Use -* vars for .bg-* and .text-* utilities

- Simplifies variables usage
- Makes components and brand variable usage more consistent (dark bg and white text throughout instead of some mixed light and dark bgs)
- Very likely means lower contrast and thus no more AA compliance (we'll want to fix that eventually obviously)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 19a1d1a07a7c85bee9081c043cc4e3cff2212490..648c94c60f72b3f4d8b8eda84f1e7a66954f6c97 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -107,13 +107,13 @@
 
 @include text-emphasis-variant('.text-primary', $brand-primary);
 
-@include text-emphasis-variant('.text-success', $state-success-text);
+@include text-emphasis-variant('.text-success', $brand-success);
 
-@include text-emphasis-variant('.text-info', $state-info-text);
+@include text-emphasis-variant('.text-info', $brand-info);
 
-@include text-emphasis-variant('.text-warning', $state-warning-text);
+@include text-emphasis-variant('.text-warning', $brand-warning);
 
-@include text-emphasis-variant('.text-danger', $state-danger-text);
+@include text-emphasis-variant('.text-danger', $brand-danger);
 
 
 // Contextual backgrounds
@@ -127,18 +127,12 @@
   background-color: $gray-dark;
 }
 
-.bg-primary {
-  // Given the contrast here, this is the only class to have its color inverted
-  // automatically.
-  color: #fff;
-}
-
 @include bg-variant('.bg-primary', $brand-primary);
 
-@include bg-variant('.bg-success', $state-success-bg);
+@include bg-variant('.bg-success', $brand-success);
 
-@include bg-variant('.bg-info', $state-info-bg);
+@include bg-variant('.bg-info', $brand-info);
 
-@include bg-variant('.bg-warning', $state-warning-bg);
+@include bg-variant('.bg-warning', $brand-warning);
 
-@include bg-variant('.bg-danger', $state-danger-bg);
+@include bg-variant('.bg-danger', $brand-danger);

diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
index 3287d7a0608181922706b7481508d09017464972..a665f255111c3ffcb3f356b2f854955f389a2450 100644 (file)
--- a/scss/mixins/_background-variant.scss
+++ b/scss/mixins/_background-variant.scss
@@ -3,6 +3,7 @@
 // [converter] $parent hack
 @mixin bg-variant($parent, $color) {
   #{$parent} {
+    color: #fff;
     background-color: $color;
   }
   a#{$parent} {