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

diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md
index 3acfd2a7977420e1082dd0184b0402111c148d4f..ed63da9525b087bf668fb75a3dd88a5e1dc0ed96 100644 (file)
--- a/docs/4.0/components/alerts.md
+++ b/docs/4.0/components/alerts.md
@@ -11,18 +11,10 @@ toc: true
 Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
 
 {% example html %}
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read this important alert message.
-</div>
-<div class="alert alert-info" role="alert">
-  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
-</div>
-<div class="alert alert-warning" role="alert">
-  <strong>Warning!</strong> Better check yourself, you're not looking too good.
-</div>
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> Change a few things up and try submitting again.
-</div>
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  This is a {{ color.name }} alert—check it out!
+</div>{% endfor %}
 {% endexample %}
 
 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@@ -33,18 +25,10 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
 {% example html %}
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
-</div>
-<div class="alert alert-info" role="alert">
-  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
-</div>
-<div class="alert alert-warning" role="alert">
-  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
-</div>
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
-</div>
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  This is a {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>{% endfor %}
 {% endexample %}
 
 ### Additional content

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 562821a58b77ebcf5f56d86008d4de75683ffff1..3dfd13f56ac14e29dc3db9995a2bcb134bfe387a 100644 (file)
--- 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 1e9307ebbe965a518d5d4412283e700a1e05a7eb..d938e8972256d72d2d5bb4535509fb63b5132531 100644 (file)
--- 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%);
   }
 }