update alert component to use theme sass map and add a ton of options in the process

2 files changed, 8 insertions, 16 deletions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 562821a58..3dfd13f56 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -41,15 +41,8 @@
 //
 // Generate contextual modifier classes for colorizing the alert.
 
-.alert-success {
-  @include alert-variant($alert-success-bg, $alert-success-border-color, $alert-success-text);
-}
-.alert-info {
-  @include alert-variant($alert-info-bg, $alert-info-border-color, $alert-info-text);
-}
-.alert-warning {
-  @include alert-variant($alert-warning-bg, $alert-warning-border-color, $alert-warning-text);
-}
-.alert-danger {
-  @include alert-variant($alert-danger-bg, $alert-danger-border-color, $alert-danger-text);
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
+  }
 }
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index 1e9307ebb..d938e8972 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,14 +1,13 @@
-// Alerts
-
-@mixin alert-variant($background, $border, $body-color) {
-  color: $body-color;
+@mixin alert-variant($background, $border, $color) {
+  color: $color;
   background-color: $background;
   border-color: $border;
 
   hr {
     border-top-color: darken($border, 5%);
   }
+
   .alert-link {
-    color: darken($body-color, 10%);
+    color: darken($color, 10%);
   }
 }