update badges to use the theme colors sass map

1 files changed, 18 insertions, 30 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 %}