Revamp background utilities and add new .text-white utility

- Rather than mix multiple properties in our color utilities, this splits all color and all background utils into separate classes.
- Adds new .text-white class to help lighten text color for darker backgrounds

diff --git a/docs/utilities/colors.md b/docs/utilities/colors.md
index 62315e614c8d5a5b3041b73e5969f29cba5c79d9..216941f95a0350117a16a4c28c1c95a9a7f662ab 100644 (file)
--- a/docs/utilities/colors.md
+++ b/docs/utilities/colors.md
@@ -13,9 +13,10 @@ Convey meaning through color with a handful of emphasis utility classes. These m
 <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-white">Etiam porta sem malesuada ultricies vehicula.</p>
 {% endexample %}
 
-Contextual text classes also work well on anchors with the provided hover and focus states.
+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>
@@ -26,15 +27,15 @@ Contextual text classes also work well on anchors with the provided hover and fo
 <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.
+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">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
-<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
-<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
-<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
-<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
-<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
+<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>
 {% endexample %}
 
 {% callout info %}

diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
index ff21ad958f70a00c4243d34d64768ed6fce78d3a..54a734dcc82f5a0226df8c09bd03c4a9381d245e 100644 (file)
--- a/scss/mixins/_background-variant.scss
+++ b/scss/mixins/_background-variant.scss
@@ -2,7 +2,6 @@
 
 @mixin bg-variant($parent, $color) {
   #{$parent} {
-    color: #fff !important;
     background-color: $color !important;
   }
   a#{$parent} {

diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 901f771442bc3cbb33c9a89aa442f4206f138c2d..a12f9a17883b1ef8abc6275a1934040cd5319e48 100644 (file)
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -32,6 +32,10 @@
 
 // Contextual colors
 
+.text-white {
+  color: #fff !important;
+}
+
 @include text-emphasis-variant('.text-muted', $text-muted);
 
 @include text-emphasis-variant('.text-primary', $brand-primary);