From cbde3396ca2f07a34cee8d1afdb4f5865fd16b2c Mon Sep 17 00:00:00 2001
From: m5o <m5o@gmx.com>
Date: Sat, 2 Dec 2017 18:02:26 +0100
Subject: [PATCH] use theme-color modifiers for .alert-*
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use theme-color modifiers for `.alert-*`

📖 http://getbootstrap.com/docs/4.0/getting-started/theming/#modifiers
---
 dist/cyborg/_bootswatch.scss      | 26 ++++----------------------
 dist/cyborg/bootstrap.css         | 16 ++++++++++++----
 dist/darkly/_bootswatch.scss      | 26 ++++----------------------
 dist/darkly/bootstrap.css         | 16 ++++++++++++----
 dist/flatly/_bootswatch.scss      | 26 ++++----------------------
 dist/flatly/bootstrap.css         | 16 ++++++++++++----
 dist/litera/_bootswatch.scss      | 26 ++++----------------------
 dist/materia/_bootswatch.scss     | 26 ++++----------------------
 dist/materia/bootstrap.css        | 16 ++++++++++++----
 dist/slate/_bootswatch.scss       | 26 ++++----------------------
 dist/solar/_bootswatch.scss       | 26 ++++----------------------
 dist/solar/bootstrap.css          | 24 ++++++++++++++++--------
 dist/superhero/_bootswatch.scss   | 26 ++++----------------------
 dist/superhero/bootstrap.css      | 16 ++++++++++++----
 docs/4/cyborg/_bootswatch.scss    | 26 ++++----------------------
 docs/4/cyborg/bootstrap.css       | 16 ++++++++++++----
 docs/4/darkly/_bootswatch.scss    | 26 ++++----------------------
 docs/4/darkly/bootstrap.css       | 16 ++++++++++++----
 docs/4/flatly/_bootswatch.scss    | 26 ++++----------------------
 docs/4/flatly/bootstrap.css       | 16 ++++++++++++----
 docs/4/litera/_bootswatch.scss    | 26 ++++----------------------
 docs/4/materia/_bootswatch.scss   | 26 ++++----------------------
 docs/4/materia/bootstrap.css      | 16 ++++++++++++----
 docs/4/slate/_bootswatch.scss     | 26 ++++----------------------
 docs/4/solar/_bootswatch.scss     | 26 ++++----------------------
 docs/4/solar/bootstrap.css        | 24 ++++++++++++++++--------
 docs/4/superhero/_bootswatch.scss | 26 ++++----------------------
 docs/4/superhero/bootstrap.css    | 16 ++++++++++++----
 28 files changed, 216 insertions(+), 408 deletions(-)

diff --git a/dist/cyborg/_bootswatch.scss b/dist/cyborg/_bootswatch.scss
index c4a384a7..d6c14721 100644
--- a/dist/cyborg/_bootswatch.scss
+++ b/dist/cyborg/_bootswatch.scss
@@ -165,28 +165,10 @@ legend,
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/dist/cyborg/bootstrap.css b/dist/cyborg/bootstrap.css
index de322f61..bfdb865e 100644
--- a/dist/cyborg/bootstrap.css
+++ b/dist/cyborg/bootstrap.css
@@ -8911,20 +8911,28 @@ legend,
   background-color: #2A9FD6;
 }
 
+.alert-secondary {
+  background-color: #555;
+}
+
 .alert-success {
   background-color: #77B300;
 }
 
-.alert-danger {
-  background-color: #CC0000;
+.alert-info {
+  background-color: #9933CC;
 }
 
 .alert-warning {
   background-color: #FF8800;
 }
 
-.alert-info {
-  background-color: #9933CC;
+.alert-danger {
+  background-color: #CC0000;
+}
+
+.alert-light {
+  background-color: #f8f9fa;
 }
 
 .alert-dark {
diff --git a/dist/darkly/_bootswatch.scss b/dist/darkly/_bootswatch.scss
index 009779ea..89c6b4ab 100644
--- a/dist/darkly/_bootswatch.scss
+++ b/dist/darkly/_bootswatch.scss
@@ -159,28 +159,10 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic"
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/dist/darkly/bootstrap.css b/dist/darkly/bootstrap.css
index 070e7fee..d9140034 100644
--- a/dist/darkly/bootstrap.css
+++ b/dist/darkly/bootstrap.css
@@ -8906,20 +8906,28 @@ a.text-dark:focus, a.text-dark:hover {
   background-color: #375a7f;
 }
 
+.alert-secondary {
+  background-color: #444;
+}
+
 .alert-success {
   background-color: #00bc8c;
 }
 
-.alert-danger {
-  background-color: #E74C3C;
+.alert-info {
+  background-color: #3498DB;
 }
 
 .alert-warning {
   background-color: #F39C12;
 }
 
-.alert-info {
-  background-color: #3498DB;
+.alert-danger {
+  background-color: #E74C3C;
+}
+
+.alert-light {
+  background-color: #303030;
 }
 
 .alert-dark {
diff --git a/dist/flatly/_bootswatch.scss b/dist/flatly/_bootswatch.scss
index 4615cb66..8f8265b5 100644
--- a/dist/flatly/_bootswatch.scss
+++ b/dist/flatly/_bootswatch.scss
@@ -173,28 +173,10 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic"
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/dist/flatly/bootstrap.css b/dist/flatly/bootstrap.css
index f56a3e2d..e88f1b1e 100644
--- a/dist/flatly/bootstrap.css
+++ b/dist/flatly/bootstrap.css
@@ -8907,20 +8907,28 @@ a.text-dark:focus, a.text-dark:hover {
   background-color: #2C3E50;
 }
 
+.alert-secondary {
+  background-color: #95a5a6;
+}
+
 .alert-success {
   background-color: #18BC9C;
 }
 
-.alert-danger {
-  background-color: #E74C3C;
+.alert-info {
+  background-color: #3498DB;
 }
 
 .alert-warning {
   background-color: #F39C12;
 }
 
-.alert-info {
-  background-color: #3498DB;
+.alert-danger {
+  background-color: #E74C3C;
+}
+
+.alert-light {
+  background-color: #ecf0f1;
 }
 
 .alert-dark {
diff --git a/dist/litera/_bootswatch.scss b/dist/litera/_bootswatch.scss
index 49629f3c..15451029 100644
--- a/dist/litera/_bootswatch.scss
+++ b/dist/litera/_bootswatch.scss
@@ -175,28 +175,10 @@ table,
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/dist/materia/_bootswatch.scss b/dist/materia/_bootswatch.scss
index e2da14c1..7ca24146 100644
--- a/dist/materia/_bootswatch.scss
+++ b/dist/materia/_bootswatch.scss
@@ -589,28 +589,10 @@ input[type="checkbox"],
     color: #fff;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 
   a:not(.close):not(.btn),
diff --git a/dist/materia/bootstrap.css b/dist/materia/bootstrap.css
index d13aac47..d4dc73ca 100644
--- a/dist/materia/bootstrap.css
+++ b/dist/materia/bootstrap.css
@@ -10178,20 +10178,28 @@ input[type="checkbox"]:disabled:checked:after,
   background-color: #2196F3;
 }
 
+.alert-secondary {
+  background-color: #fff;
+}
+
 .alert-success {
   background-color: #4CAF50;
 }
 
-.alert-danger {
-  background-color: #e51c23;
+.alert-info {
+  background-color: #9C27B0;
 }
 
 .alert-warning {
   background-color: #ff9800;
 }
 
-.alert-info {
-  background-color: #9C27B0;
+.alert-danger {
+  background-color: #e51c23;
+}
+
+.alert-light {
+  background-color: #fff;
 }
 
 .alert-dark {
diff --git a/dist/slate/_bootswatch.scss b/dist/slate/_bootswatch.scss
index 4fd4cc2d..c2e4a24d 100644
--- a/dist/slate/_bootswatch.scss
+++ b/dist/slate/_bootswatch.scss
@@ -385,28 +385,10 @@ legend {
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/dist/solar/_bootswatch.scss b/dist/solar/_bootswatch.scss
index 2a5af1d8..9f93d232 100644
--- a/dist/solar/_bootswatch.scss
+++ b/dist/solar/_bootswatch.scss
@@ -99,28 +99,10 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Source+Sans+Pro" !defau
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/dist/solar/bootstrap.css b/dist/solar/bootstrap.css
index b3d4436c..0798ffc5 100644
--- a/dist/solar/bootstrap.css
+++ b/dist/solar/bootstrap.css
@@ -8847,22 +8847,30 @@ a.text-dark:focus, a.text-dark:hover {
   background-color: #B58900;
 }
 
+.alert-secondary {
+  background-color: #839496;
+}
+
 .alert-success {
   background-color: #2AA198;
 }
 
-.alert-danger {
-  background-color: #D33682;
-}
-
-.alert-warning {
-  background-color: #CB4B16;
-}
-
 .alert-info {
   background-color: #268BD2;
 }
 
+.alert-warning {
+  background-color: #CB4B16;
+}
+
+.alert-danger {
+  background-color: #D33682;
+}
+
+.alert-light {
+  background-color: #FDF6E3;
+}
+
 .alert-dark {
   background-color: #073642;
 }
diff --git a/dist/superhero/_bootswatch.scss b/dist/superhero/_bootswatch.scss
index a69812ad..e761d154 100644
--- a/dist/superhero/_bootswatch.scss
+++ b/dist/superhero/_bootswatch.scss
@@ -159,28 +159,10 @@ label,
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/dist/superhero/bootstrap.css b/dist/superhero/bootstrap.css
index 371f40ab..57f2aa2b 100644
--- a/dist/superhero/bootstrap.css
+++ b/dist/superhero/bootstrap.css
@@ -8914,20 +8914,28 @@ label,
   background-color: #DF691A;
 }
 
+.alert-secondary {
+  background-color: #4E5D6C;
+}
+
 .alert-success {
   background-color: #5cb85c;
 }
 
-.alert-danger {
-  background-color: #d9534f;
+.alert-info {
+  background-color: #5bc0de;
 }
 
 .alert-warning {
   background-color: #f0ad4e;
 }
 
-.alert-info {
-  background-color: #5bc0de;
+.alert-danger {
+  background-color: #d9534f;
+}
+
+.alert-light {
+  background-color: #8d9dad;
 }
 
 .alert-dark {
diff --git a/docs/4/cyborg/_bootswatch.scss b/docs/4/cyborg/_bootswatch.scss
index c4a384a7..d6c14721 100644
--- a/docs/4/cyborg/_bootswatch.scss
+++ b/docs/4/cyborg/_bootswatch.scss
@@ -165,28 +165,10 @@ legend,
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/docs/4/cyborg/bootstrap.css b/docs/4/cyborg/bootstrap.css
index de322f61..bfdb865e 100644
--- a/docs/4/cyborg/bootstrap.css
+++ b/docs/4/cyborg/bootstrap.css
@@ -8911,20 +8911,28 @@ legend,
   background-color: #2A9FD6;
 }
 
+.alert-secondary {
+  background-color: #555;
+}
+
 .alert-success {
   background-color: #77B300;
 }
 
-.alert-danger {
-  background-color: #CC0000;
+.alert-info {
+  background-color: #9933CC;
 }
 
 .alert-warning {
   background-color: #FF8800;
 }
 
-.alert-info {
-  background-color: #9933CC;
+.alert-danger {
+  background-color: #CC0000;
+}
+
+.alert-light {
+  background-color: #f8f9fa;
 }
 
 .alert-dark {
diff --git a/docs/4/darkly/_bootswatch.scss b/docs/4/darkly/_bootswatch.scss
index 009779ea..89c6b4ab 100644
--- a/docs/4/darkly/_bootswatch.scss
+++ b/docs/4/darkly/_bootswatch.scss
@@ -159,28 +159,10 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic"
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/docs/4/darkly/bootstrap.css b/docs/4/darkly/bootstrap.css
index 070e7fee..d9140034 100644
--- a/docs/4/darkly/bootstrap.css
+++ b/docs/4/darkly/bootstrap.css
@@ -8906,20 +8906,28 @@ a.text-dark:focus, a.text-dark:hover {
   background-color: #375a7f;
 }
 
+.alert-secondary {
+  background-color: #444;
+}
+
 .alert-success {
   background-color: #00bc8c;
 }
 
-.alert-danger {
-  background-color: #E74C3C;
+.alert-info {
+  background-color: #3498DB;
 }
 
 .alert-warning {
   background-color: #F39C12;
 }
 
-.alert-info {
-  background-color: #3498DB;
+.alert-danger {
+  background-color: #E74C3C;
+}
+
+.alert-light {
+  background-color: #303030;
 }
 
 .alert-dark {
diff --git a/docs/4/flatly/_bootswatch.scss b/docs/4/flatly/_bootswatch.scss
index 4615cb66..8f8265b5 100644
--- a/docs/4/flatly/_bootswatch.scss
+++ b/docs/4/flatly/_bootswatch.scss
@@ -173,28 +173,10 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic"
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/docs/4/flatly/bootstrap.css b/docs/4/flatly/bootstrap.css
index f56a3e2d..e88f1b1e 100644
--- a/docs/4/flatly/bootstrap.css
+++ b/docs/4/flatly/bootstrap.css
@@ -8907,20 +8907,28 @@ a.text-dark:focus, a.text-dark:hover {
   background-color: #2C3E50;
 }
 
+.alert-secondary {
+  background-color: #95a5a6;
+}
+
 .alert-success {
   background-color: #18BC9C;
 }
 
-.alert-danger {
-  background-color: #E74C3C;
+.alert-info {
+  background-color: #3498DB;
 }
 
 .alert-warning {
   background-color: #F39C12;
 }
 
-.alert-info {
-  background-color: #3498DB;
+.alert-danger {
+  background-color: #E74C3C;
+}
+
+.alert-light {
+  background-color: #ecf0f1;
 }
 
 .alert-dark {
diff --git a/docs/4/litera/_bootswatch.scss b/docs/4/litera/_bootswatch.scss
index 49629f3c..15451029 100644
--- a/docs/4/litera/_bootswatch.scss
+++ b/docs/4/litera/_bootswatch.scss
@@ -175,28 +175,10 @@ table,
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/docs/4/materia/_bootswatch.scss b/docs/4/materia/_bootswatch.scss
index e2da14c1..7ca24146 100644
--- a/docs/4/materia/_bootswatch.scss
+++ b/docs/4/materia/_bootswatch.scss
@@ -589,28 +589,10 @@ input[type="checkbox"],
     color: #fff;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 
   a:not(.close):not(.btn),
diff --git a/docs/4/materia/bootstrap.css b/docs/4/materia/bootstrap.css
index d13aac47..d4dc73ca 100644
--- a/docs/4/materia/bootstrap.css
+++ b/docs/4/materia/bootstrap.css
@@ -10178,20 +10178,28 @@ input[type="checkbox"]:disabled:checked:after,
   background-color: #2196F3;
 }
 
+.alert-secondary {
+  background-color: #fff;
+}
+
 .alert-success {
   background-color: #4CAF50;
 }
 
-.alert-danger {
-  background-color: #e51c23;
+.alert-info {
+  background-color: #9C27B0;
 }
 
 .alert-warning {
   background-color: #ff9800;
 }
 
-.alert-info {
-  background-color: #9C27B0;
+.alert-danger {
+  background-color: #e51c23;
+}
+
+.alert-light {
+  background-color: #fff;
 }
 
 .alert-dark {
diff --git a/docs/4/slate/_bootswatch.scss b/docs/4/slate/_bootswatch.scss
index 4fd4cc2d..c2e4a24d 100644
--- a/docs/4/slate/_bootswatch.scss
+++ b/docs/4/slate/_bootswatch.scss
@@ -385,28 +385,10 @@ legend {
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/docs/4/solar/_bootswatch.scss b/docs/4/solar/_bootswatch.scss
index 2a5af1d8..9f93d232 100644
--- a/docs/4/solar/_bootswatch.scss
+++ b/docs/4/solar/_bootswatch.scss
@@ -99,28 +99,10 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Source+Sans+Pro" !defau
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/docs/4/solar/bootstrap.css b/docs/4/solar/bootstrap.css
index b3d4436c..0798ffc5 100644
--- a/docs/4/solar/bootstrap.css
+++ b/docs/4/solar/bootstrap.css
@@ -8847,22 +8847,30 @@ a.text-dark:focus, a.text-dark:hover {
   background-color: #B58900;
 }
 
+.alert-secondary {
+  background-color: #839496;
+}
+
 .alert-success {
   background-color: #2AA198;
 }
 
-.alert-danger {
-  background-color: #D33682;
-}
-
-.alert-warning {
-  background-color: #CB4B16;
-}
-
 .alert-info {
   background-color: #268BD2;
 }
 
+.alert-warning {
+  background-color: #CB4B16;
+}
+
+.alert-danger {
+  background-color: #D33682;
+}
+
+.alert-light {
+  background-color: #FDF6E3;
+}
+
 .alert-dark {
   background-color: #073642;
 }
diff --git a/docs/4/superhero/_bootswatch.scss b/docs/4/superhero/_bootswatch.scss
index a69812ad..e761d154 100644
--- a/docs/4/superhero/_bootswatch.scss
+++ b/docs/4/superhero/_bootswatch.scss
@@ -159,28 +159,10 @@ label,
     text-decoration: underline;
   }
 
-  &-primary {
-    background-color: $primary;
-  }
-
-  &-success {
-    background-color: $success;
-  }
-
-  &-danger {
-    background-color: $danger;
-  }
-
-  &-warning {
-    background-color: $warning;
-  }
-
-  &-info {
-    background-color: $info;
-  }
-
-  &-dark {
-    background-color: $dark;
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
   }
 }
 
diff --git a/docs/4/superhero/bootstrap.css b/docs/4/superhero/bootstrap.css
index 371f40ab..57f2aa2b 100644
--- a/docs/4/superhero/bootstrap.css
+++ b/docs/4/superhero/bootstrap.css
@@ -8914,20 +8914,28 @@ label,
   background-color: #DF691A;
 }
 
+.alert-secondary {
+  background-color: #4E5D6C;
+}
+
 .alert-success {
   background-color: #5cb85c;
 }
 
-.alert-danger {
-  background-color: #d9534f;
+.alert-info {
+  background-color: #5bc0de;
 }
 
 .alert-warning {
   background-color: #f0ad4e;
 }
 
-.alert-info {
-  background-color: #5bc0de;
+.alert-danger {
+  background-color: #d9534f;
+}
+
+.alert-light {
+  background-color: #8d9dad;
 }
 
 .alert-dark {