update badges to use the theme colors sass map

3 files changed, 28 insertions, 67 deletions

diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md
index 764e5a1cb..e2d92b08b 100644
--- a/docs/4.0/components/badge.md
+++ b/docs/4.0/components/badge.md
@@ -11,21 +11,21 @@ toc: true
 Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
 
 <div class="bd-example">
-<div class="h1">Example heading <span class="badge badge-default">New</span></div>
-<div class="h2">Example heading <span class="badge badge-default">New</span></div>
-<div class="h3">Example heading <span class="badge badge-default">New</span></div>
-<div class="h4">Example heading <span class="badge badge-default">New</span></div>
-<div class="h5">Example heading <span class="badge badge-default">New</span></div>
-<div class="h6">Example heading <span class="badge badge-default">New</span></div>
+<div class="h1">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h6">Example heading <span class="badge badge-secondary">New</span></div>
 </div>
 
 {% highlight html %}
-<h1>Example heading <span class="badge badge-default">New</span></h1>
-<h2>Example heading <span class="badge badge-default">New</span></h2>
-<h3>Example heading <span class="badge badge-default">New</span></h3>
-<h4>Example heading <span class="badge badge-default">New</span></h4>
-<h5>Example heading <span class="badge badge-default">New</span></h5>
-<h6>Example heading <span class="badge badge-default">New</span></h6>
+<h1>Example heading <span class="badge badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
 {% endhighlight %}
 
 ## Contextual variations
@@ -33,12 +33,8 @@ Badges scale to match the size of the immediate parent element by using relative
 Add any of the below mentioned modifier classes to change the appearance of a badge.
 
 {% example html %}
-<span class="badge badge-default">Default</span>
-<span class="badge badge-primary">Primary</span>
-<span class="badge badge-success">Success</span>
-<span class="badge badge-info">Info</span>
-<span class="badge badge-warning">Warning</span>
-<span class="badge badge-danger">Danger</span>
+{% for color in site.data.theme-colors %}
+<span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@@ -49,12 +45,8 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
 
 {% example html %}
-<span class="badge badge-pill badge-default">Default</span>
-<span class="badge badge-pill badge-primary">Primary</span>
-<span class="badge badge-pill badge-success">Success</span>
-<span class="badge badge-pill badge-info">Info</span>
-<span class="badge badge-pill badge-warning">Warning</span>
-<span class="badge badge-pill badge-danger">Danger</span>
+{% for color in site.data.theme-colors %}
+<span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
 ## Links
@@ -62,10 +54,6 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger
 Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
 
 {% example html %}
-<a href="#" class="badge badge-default">Default</a>
-<a href="#" class="badge badge-primary">Primary</a>
-<a href="#" class="badge badge-success">Success</a>
-<a href="#" class="badge badge-info">Info</a>
-<a href="#" class="badge badge-warning">Warning</a>
-<a href="#" class="badge badge-danger">Danger</a>
+{% for color in site.data.theme-colors %}
+<a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
 {% endexample %}
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 175b19d86..8a7626344 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -27,16 +27,6 @@
   top: -1px;
 }
 
-// scss-lint:disable QualifyingElement
-// Add hover effects, but only for links
-a.badge {
-  @include hover-focus {
-    color: $badge-link-hover-color;
-    text-decoration: none;
-  }
-}
-// scss-lint:enable QualifyingElement
-
 // Pill badges
 //
 // Make them extra rounded with a modifier to replace v3's badges.
@@ -51,26 +41,8 @@ a.badge {
 //
 // Contextual variations (linked badges get darker on :hover).
 
-.badge-default {
-  @include badge-variant($badge-default-bg);
-}
-
-.badge-primary {
-  @include badge-variant($badge-primary-bg);
-}
-
-.badge-success {
-  @include badge-variant($badge-success-bg);
-}
-
-.badge-info {
-  @include badge-variant($badge-info-bg);
-}
-
-.badge-warning {
-  @include badge-variant($badge-warning-bg);
-}
-
-.badge-danger {
-  @include badge-variant($badge-danger-bg);
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
 }
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index 9fa44b647..257a6abb7 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -1,11 +1,12 @@
-// Badges
-
-@mixin badge-variant($color) {
-  background-color: $color;
+@mixin badge-variant($bg) {
+  @include color-yiq($bg);
+  background-color: $bg;
 
   &[href] {
     @include hover-focus {
-      background-color: darken($color, 10%);
+      @include color-yiq($bg);
+      text-decoration: none;
+      background-color: darken($bg, 10%);
     }
   }
 }