remove - vars, update docs to generate from data yml files, update mixins, and genera...

diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index 84dc457810dd2624a43ff068dee54cb87ef8935a..84f4f2ccf43d33b7d04501376de5b7c7ffcbbf06 100644 (file)
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -86,7 +86,7 @@
 .bd-example-container-header {
   height: 3rem;
   margin-bottom: .5rem;
-  background-color: lighten($brand-primary, 50%);
+  background-color: lighten($blue, 50%);
   border-radius: .25rem;
 }
 
@@ -94,7 +94,7 @@
   float: right;
   width: 4rem;
   height: 8rem;
-  background-color: lighten($brand-warning, 25%);
+  background-color: lighten($blue, 25%);
   border-radius: .25rem;
 }
 

diff --git a/assets/scss/_featurettes.scss b/assets/scss/_featurettes.scss
index 764fcffee782edef0eb98b484e704d21f75bca37..f214eb927ddb3881524fcaa898a241c7fcf2c8d3 100644 (file)
--- a/assets/scss/_featurettes.scss
+++ b/assets/scss/_featurettes.scss
@@ -50,7 +50,7 @@
   color: #333;
 }
 .bd-featurette-img:hover {
-  color: $brand-primary;
+  color: $blue;
   text-decoration: none;
 }
 .bd-featurette-img img {

diff --git a/assets/scss/_sidebar.scss b/assets/scss/_sidebar.scss
index b8f311f209219bd1015d0c88457bfefbb7ecc2ac..46ab37fb7bd60a0b3fbaaab3638845b87891dba9 100644 (file)
--- a/assets/scss/_sidebar.scss
+++ b/assets/scss/_sidebar.scss
@@ -39,7 +39,7 @@
     color: #99979c;
 
     &:hover {
-      color: $brand-primary;
+      color: $blue;
       text-decoration: none;
     }
   }

diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md
index bc20da88fc9a30070a491d8c9d14aec3953e24ee..1c8117a9aa89fb5559c8ae16ea993855a6d1b6fa 100644 (file)
--- a/docs/4.0/components/card.md
+++ b/docs/4.0/components/card.md
@@ -134,7 +134,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
 
 {% example html %}
 <div class="card">
-  <h3 class="card-header">Featured</h3>
+  <h4 class="card-header">Featured</h4>
   <div class="card-body">
     <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -186,7 +186,7 @@ Using the grid, wrap cards in columns and rows as needed.
   <div class="col-sm-6">
     <div class="card">
       <div class="card-body">
-        <h3 class="card-title">Special title treatment</h3>
+        <h4 class="card-title">Special title treatment</h4>
         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
@@ -195,7 +195,7 @@ Using the grid, wrap cards in columns and rows as needed.
   <div class="col-sm-6">
     <div class="card">
       <div class="card-body">
-        <h3 class="card-title">Special title treatment</h3>
+        <h4 class="card-title">Special title treatment</h4>
         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
@@ -211,7 +211,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
 {% example html %}
 <div class="card w-75">
   <div class="card-body">
-    <h3 class="card-title">Card title</h3>
+    <h4 class="card-title">Card title</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Button</a>
   </div>
@@ -219,7 +219,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
 
 <div class="card w-50">
   <div class="card-body">
-    <h3 class="card-title">Card title</h3>
+    <h4 class="card-title">Card title</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Button</a>
   </div>
@@ -233,7 +233,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 {% example html %}
 <div class="card" style="width: 20rem;">
   <div class="card-body">
-    <h3 class="card-title">Special title treatment</h3>
+    <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -376,7 +376,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
 <div class="card card-inverse" style="background-color: #333; border-color: #333;">
   <div class="card-header">Header</div>
   <div class="card-body">
-    <h3 class="card-title">Special title treatment</h3>
+    <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>

diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md
index 80e096cf95292a82672fbb18be2dea5c6279b7b9..3d06b3e4e290687562dba5f7496860edd2c8dbb4 100644 (file)
--- a/docs/4.0/utilities/colors.md
+++ b/docs/4.0/utilities/colors.md
@@ -7,37 +7,22 @@ toc: true
 ---
 
 {% example html %}
-<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p class="text-gray-dark">Eget risus varius blandit sit ultricies vehicula amet non magna.</p>
-<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
+{% for color in site.data.theme-colors %}
+<p class="text-{{ color.name }}">.text-{{ color.name }}</p>{% endfor %}
 {% endexample %}
 
 Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.**
 
 {% example html %}
-<a href="#" class="text-muted">Muted link</a>
-<a href="#" class="text-primary">Primary link</a>
-<a href="#" class="text-success">Success link</a>
-<a href="#" class="text-info">Info link</a>
-<a href="#" class="text-warning">Warning link</a>
-<a href="#" class="text-danger">Danger link</a>
+{% for color in site.data.theme-colors %}
+<p><a href="#" class="text-{{ color.name }}{% if color.name == "white" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
 {% endexample %}
 
 Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
 
 {% example html %}
-<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
-<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
-<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
-<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
-<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
-<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
-<div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>
+{% for color in site.data.theme-colors %}
+<div class="p-3 bg-{{ color.name }} {% if color.name == "white" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
 {% endexample %}
 
 {% callout info %}

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 05c54e4ee012541ce3c5ea7de606b444c6b97588..944eb5ffaf7169ca54261860c29b47a26296c184 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -50,43 +50,16 @@ fieldset[disabled] a.btn {
 // Alternate buttons
 //
 
-.btn-primary {
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
-}
-.btn-secondary {
-  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
-}
-.btn-info {
-  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
-}
-.btn-success {
-  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
-}
-.btn-warning {
-  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
-}
-.btn-danger {
-  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
 }
 
-// Remove all backgrounds
-.btn-outline-primary {
-  @include button-outline-variant($btn-primary-bg, $btn-primary-color);
-}
-.btn-outline-secondary {
-  @include button-outline-variant($btn-secondary-border-color, $btn-secondary-color);
-}
-.btn-outline-info {
-  @include button-outline-variant($btn-info-bg, $btn-info-color);
-}
-.btn-outline-success {
-  @include button-outline-variant($btn-success-bg, $btn-success-color);
-}
-.btn-outline-warning {
-  @include button-outline-variant($btn-warning-bg, $btn-warning-color);
-}
-.btn-outline-danger {
-  @include button-outline-variant($btn-danger-bg, $btn-danger-color);
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value, #fff);
+  }
 }
 
 

diff --git a/scss/_card.scss b/scss/_card.scss
index 436df300fa64da6db7d80934b118a4e1e1547938..df5c20fe12e13b826d5e5ff242605e2786ee4bd0 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -105,42 +105,19 @@
 // Background variations
 //
 
-.card-primary {
-  @include card-variant($brand-primary, $brand-primary);
-}
-.card-success {
-  @include card-variant($brand-success, $brand-success);
-}
-.card-info {
-  @include card-variant($brand-info, $brand-info);
-}
-.card-warning {
-  @include card-variant($brand-warning, $brand-warning);
-}
-.card-danger {
-  @include card-variant($brand-danger, $brand-danger);
+@each $color, $value in $theme-colors {
+  .card-#{$color} {
+    @include card-variant($value, $value);
+  }
 }
 
-// Remove all backgrounds
-.card-outline-primary {
-  @include card-outline-variant($btn-primary-bg);
-}
-.card-outline-secondary {
-  @include card-outline-variant($btn-secondary-border-color);
-}
-.card-outline-info {
-  @include card-outline-variant($btn-info-bg);
-}
-.card-outline-success {
-  @include card-outline-variant($btn-success-bg);
-}
-.card-outline-warning {
-  @include card-outline-variant($btn-warning-bg);
-}
-.card-outline-danger {
-  @include card-outline-variant($btn-danger-bg);
+@each $color, $value in $theme-colors {
+  .card-outline-#{$color} {
+    @include card-variant($value, $value);
+  }
 }
 
+
 //
 // Inverse text within a card for use with dark backgrounds
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 087e353a847c23120b39c56d3b76865501f7d7fe..7d4a3ddbdb767b6a573a06f0e2b05c634c06c7e5 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -119,14 +119,6 @@ $gray-light:                #636c72 !default;
 $gray-lighter:              #eceeef !default;
 $gray-lightest:             #f7f7f9 !default;
 
-// Reassign color vars to semantic color scheme
-$brand-primary:             $blue !default;
-$brand-success:             $green !default;
-$brand-info:                $teal !default;
-$brand-warning:             $orange !default;
-$brand-danger:              $red !default;
-$brand-inverse:             $gray-dark !default;
-
 
 // Options
 //
@@ -176,7 +168,7 @@ $body-color:    $gray-dark !default;
 //
 // Style anchor elements.
 
-$link-color:            $brand-primary !default;
+$link-color:            theme-color("primary") !default;
 $link-decoration:       none !default;
 $link-hover-color:      darken($link-color, 15%) !default;
 $link-hover-decoration: underline !default;
@@ -240,7 +232,7 @@ $border-radius-lg:       .3rem !default;
 $border-radius-sm:       .2rem !default;
 
 $component-active-color: $white !default;
-$component-active-bg:    $brand-primary !default;
+$component-active-bg:    theme-color("primary") !default;
 
 $caret-width:            .3em !default;
 
@@ -360,11 +352,11 @@ $input-btn-line-height-lg:  1.5 !default;
 
 $btn-font-weight:                $font-weight-normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
-$btn-focus-box-shadow:           0 0 0 3px rgba($brand-primary, .25) !default;
+$btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
 
 $btn-primary-color:              $white !default;
-$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-bg:                 theme-color("primary") !default;
 $btn-primary-border-color:       $btn-primary-bg !default;
 
 $btn-secondary-color:            $gray-dark !default;
@@ -372,19 +364,19 @@ $btn-secondary-bg:               $white !default;
 $btn-secondary-border-color:     #ccc !default;
 
 $btn-info-color:                 $white !default;
-$btn-info-bg:                    $brand-info !default;
+$btn-info-bg:                    theme-color("info") !default;
 $btn-info-border-color:          $btn-info-bg !default;
 
 $btn-success-color:              $white !default;
-$btn-success-bg:                 $brand-success !default;
+$btn-success-bg:                 theme-color("success") !default;
 $btn-success-border-color:       $btn-success-bg !default;
 
 $btn-warning-color:              $white !default;
-$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-bg:                 theme-color("warning") !default;
 $btn-warning-border-color:       $btn-warning-bg !default;
 
 $btn-danger-color:               $white !default;
-$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-bg:                  theme-color("danger") !default;
 $btn-danger-border-color:        $btn-danger-bg !default;
 
 $btn-link-disabled-color:        $gray-light !default;
@@ -414,7 +406,7 @@ $input-border-radius-lg:         $border-radius-lg !default;
 $input-border-radius-sm:         $border-radius-sm !default;
 
 $input-focus-bg:                 $input-bg !default;
-$input-focus-border-color:       lighten($brand-primary, 25%) !default;
+$input-focus-border-color:       lighten(theme-color("primary"), 25%) !default;
 $input-focus-box-shadow:         $input-box-shadow, $btn-focus-box-shadow !default;
 $input-focus-color:              $input-color !default;
 
@@ -461,19 +453,19 @@ $custom-control-indicator-disabled-bg:       $gray-lighter !default;
 $custom-control-description-disabled-color:  $gray-light !default;
 
 $custom-control-indicator-checked-color:      $white !default;
-$custom-control-indicator-checked-bg:         $brand-primary !default;
+$custom-control-indicator-checked-bg:         theme-color("primary") !default;
 $custom-control-indicator-checked-box-shadow: none !default;
 
-$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;
+$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
 
 $custom-control-indicator-active-color:      $white !default;
-$custom-control-indicator-active-bg:         lighten($brand-primary, 35%) !default;
+$custom-control-indicator-active-bg:         lighten(theme-color("primary"), 35%) !default;
 $custom-control-indicator-active-box-shadow: none !default;
 
 $custom-checkbox-border-radius: $border-radius !default;
 $custom-checkbox-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$custom-checkbox-indeterminate-bg: $brand-primary !default;
+$custom-checkbox-indeterminate-bg: theme-color("primary") !default;
 $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
 $custom-checkbox-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
 $custom-checkbox-indeterminate-box-shadow: none !default;
@@ -497,7 +489,7 @@ $custom-select-border-width:  $input-btn-border-width !default;
 $custom-select-border-color:  $input-border-color !default;
 $custom-select-border-radius: $border-radius !default;
 
-$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
+$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
 $custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
 
 $custom-select-font-size-sm:  75% !default;
@@ -505,7 +497,7 @@ $custom-select-height-sm: $input-height-sm !default;
 
 $custom-file-height:           2.5rem !default;
 $custom-file-width:            14rem !default;
-$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
+$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
 
 $custom-file-padding-y:     1rem !default;
 $custom-file-padding-x:     .5rem !default;
@@ -529,8 +521,8 @@ $custom-file-text: (
 
 
 // Form validation
-$form-feedback-valid-color:   $brand-success !default;
-$form-feedback-invalid-color: $brand-danger !default;
+$form-feedback-valid-color:   theme-color("success") !default;
+$form-feedback-invalid-color: theme-color("danger") !default;
 
 
 // Dropdowns
@@ -642,8 +634,8 @@ $pagination-hover-bg:                  $gray-lighter !default;
 $pagination-hover-border-color:        #ddd !default;
 
 $pagination-active-color:              $white !default;
-$pagination-active-bg:                 $brand-primary !default;
-$pagination-active-border-color:       $brand-primary !default;
+$pagination-active-bg:                 theme-color("primary") !default;
+$pagination-active-border-color:       theme-color("primary") !default;
 
 $pagination-disabled-color:            $gray-light !default;
 $pagination-disabled-bg:               $white !default;
@@ -745,11 +737,11 @@ $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !defau
 // Badges
 
 $badge-default-bg:            $gray-light !default;
-$badge-primary-bg:            $brand-primary !default;
-$badge-success-bg:            $brand-success !default;
-$badge-info-bg:               $brand-info !default;
-$badge-warning-bg:            $brand-warning !default;
-$badge-danger-bg:             $brand-danger !default;
+$badge-primary-bg:            theme-color("primary") !default;
+$badge-success-bg:            theme-color("success") !default;
+$badge-info-bg:               theme-color("info") !default;
+$badge-warning-bg:            theme-color("warning") !default;
+$badge-danger-bg:             theme-color("danger") !default;
 
 $badge-color:                 $white !default;
 $badge-link-hover-color:      $white !default;
@@ -831,7 +823,7 @@ $progress-bg:                   $gray-lighter !default;
 $progress-border-radius:        $border-radius !default;
 $progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
 $progress-bar-color:            $white !default;
-$progress-bar-bg:               $brand-primary !default;
+$progress-bar-bg:               theme-color("primary") !default;
 $progress-bar-animation-timing: 1s linear infinite !default;
 $progress-bar-transition:       width .6s ease !default;
 

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index f5ca3aa71cc2a3a495b10c90481f4943761398bb..c22a5cc3f9871f670c38e333e99bbd05a0af1f08 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -3,21 +3,22 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($color, $background, $border) {
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
+@mixin button-variant($background, $border) {
+  $active-background: darken($background, 7.5%);
+  $active-border: darken($border, 10%);
 
-  color: $color;
+  @include color-yiq($background);
   background-color: $background;
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
   // Hover and focus styles are shared
-  @include hover {
-    color: $color;
+  &:hover {
+    @include color-yiq($background);
     background-color: $active-background;
     border-color: $active-border;
   }
+  
   &:focus,
   &.focus {
     // Avoid using mixin so we can pass custom focus shadow properly
@@ -38,7 +39,6 @@
   &:active,
   &.active,
   .show > &.dropdown-toggle {
-    color: $color;
     background-color: $active-background;
     background-image: none; // Remove the gradient for the pressed/active state
     border-color: $active-border;

diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
index b9ac295231cfa4cffb6a8ce7d30cce429c829c69..cc21859e83366b1ce570a8130a7ca8c56924a233 100644 (file)
--- a/scss/utilities/_background.scss
+++ b/scss/utilities/_background.scss
@@ -6,14 +6,6 @@
   background-color: darken($body-bg, 3%);
 }
 
-@include bg-variant('.bg-primary', $brand-primary);
-
-@include bg-variant('.bg-success', $brand-success);
-
-@include bg-variant('.bg-info', $brand-info);
-
-@include bg-variant('.bg-warning', $brand-warning);
-
-@include bg-variant('.bg-danger', $brand-danger);
-
-@include bg-variant('.bg-inverse', $brand-inverse);
+@each $color, $value in $theme-colors {
+  @include bg-variant('.bg-#{$color}', $value);
+}

diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 4ac90533acb9376b3a31016fb70c56803f7ef199..90e06f5c43f00db53c84f5707ae56aa4b159f960 100644 (file)
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -38,21 +38,9 @@
   color: #fff !important;
 }
 
-@include text-emphasis-variant('.text-muted', $text-muted);
-
-@include text-emphasis-variant('.text-primary', $brand-primary);
-
-@include text-emphasis-variant('.text-success', $brand-success);
-
-@include text-emphasis-variant('.text-info', $brand-info);
-
-@include text-emphasis-variant('.text-warning', $brand-warning);
-
-@include text-emphasis-variant('.text-danger', $brand-danger);
-
-// Font color
-
-@include text-emphasis-variant('.text-gray-dark', $gray-dark);
+@each $color, $value in $theme-colors {
+  @include text-emphasis-variant('.text-#{$color}', $value);
+}
 
 // Misc