diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md
index 764e5a1cbb..e2d92b08b3 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.
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
Example heading New
-Example heading New
-Example heading New
-Example heading New
-Example heading New
-Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
{% 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 %}
-Default
-Primary
-Success
-Info
-Warning
-Danger
+{% for color in site.data.theme-colors %}
+{{ color.name | capitalize }}{% 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 %}
-Default
-Primary
-Success
-Info
-Warning
-Danger
+{% for color in site.data.theme-colors %}
+{{ color.name | capitalize }}{% 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 `` element quickly provide _actionable_ badges with hover and focus states.
{% example html %}
-Default
-Primary
-Success
-Info
-Warning
-Danger
+{% for color in site.data.theme-colors %}
+{{ color.name | capitalize }}{% endfor %}
{% endexample %}
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 175b19d86e..8a76263444 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 9fa44b6478..257a6abb7d 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%);
}
}
}