remove - vars, update docs to generate from data yml files, update mixins, and generate card, button, bg, and color classes from the sass map

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;
 }
 

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 {

assets/scss/_sidebar.scss

@@ -39,7 +39,7 @@
     color: #99979c;
 
     &:hover {
-      color: $brand-primary;
+      color: $blue;
       text-decoration: none;
     }
   }

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>

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>
+{% for color in site.data.theme-colors %}
-<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+<p class="text-{{ color.name }}">.text-{{ color.name }}</p>{% endfor %}
-<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>
 {% 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>
+{% for color in site.data.theme-colors %}
-<a href="#" class="text-primary">Primary link</a>
+<p><a href="#" class="text-{{ color.name }}{% if color.name == "white" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
-<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>
 {% 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>
+{% for color in site.data.theme-colors %}
-<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
+<div class="p-3 bg-{{ color.name }} {% if color.name == "white" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
-<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>
 {% endexample %}
 
 {% callout info %}

scss/_buttons.scss

@@ -50,43 +50,16 @@ fieldset[disabled] a.btn {
 // Alternate buttons
 //
 
-.btn-primary {
+@each $color, $value in $theme-colors {
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
+  .btn-#{$color} {
-}
+    @include button-variant($value, $value);
-.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);
 }
 
-// Remove all backgrounds
+@each $color, $value in $theme-colors {
-.btn-outline-primary {
+  .btn-outline-#{$color} {
-  @include button-outline-variant($btn-primary-bg, $btn-primary-color);
+    @include button-outline-variant($value, #fff);
-}
+  }
-.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);
 }
 
 

scss/_card.scss

@@ -105,42 +105,19 @@
 // Background variations
 //
 
-.card-primary {
+@each $color, $value in $theme-colors {
-  @include card-variant($brand-primary, $brand-primary);
+  .card-#{$color} {
-}
+    @include card-variant($value, $value);
-.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);
 }
 
-// Remove all backgrounds
+@each $color, $value in $theme-colors {
-.card-outline-primary {
+  .card-outline-#{$color} {
-  @include card-outline-variant($btn-primary-bg);
+    @include card-variant($value, $value);
-}
+  }
-.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);
 }
 
+
 //
 // Inverse text within a card for use with dark backgrounds
 //

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-valid-color:   theme-color("success") !default;
-$form-feedback-invalid-color: $brand-danger !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-bg:                 theme-color("primary") !default;
-$pagination-active-border-color:       $brand-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-primary-bg:            theme-color("primary") !default;
-$badge-success-bg:            $brand-success !default;
+$badge-success-bg:            theme-color("success") !default;
-$badge-info-bg:               $brand-info !default;
+$badge-info-bg:               theme-color("info") !default;
-$badge-warning-bg:            $brand-warning !default;
+$badge-warning-bg:            theme-color("warning") !default;
-$badge-danger-bg:             $brand-danger !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;
 

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) {
+@mixin button-variant($background, $border) {
-  $active-background: darken($background, 10%);
+  $active-background: darken($background, 7.5%);
-  $active-border: darken($border, 12%);
+  $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 {
+  &:hover {
-    color: $color;
+    @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;

scss/utilities/_background.scss

@@ -6,14 +6,6 @@
   background-color: darken($body-bg, 3%);
 }
 
-@include bg-variant('.bg-primary', $brand-primary);
+@each $color, $value in $theme-colors {
-
+  @include bg-variant('.bg-#{$color}', $value);
-@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);

scss/utilities/_text.scss

@@ -38,21 +38,9 @@
   color: #fff !important;
 }
 
-@include text-emphasis-variant('.text-muted', $text-muted);
+@each $color, $value in $theme-colors {
-
+  @include text-emphasis-variant('.text-#{$color}', $value);
-@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);
 
 // Misc