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)

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