feat(colors): lock color & background-color together in utilities, an…

…d use supporting colours for background utilities
Orange-OpenSource · Apr 8, 2020 · 5998d6a · 5998d6a
1 parent 20ef6b9
commit 5998d6a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 33 deletions.
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -369,16 +369,13 @@ $utilities: map-merge(
     "color": (
       property: color,
       class: text,
-      values: map-merge(
-        $theme-colors,
-        (
-          "white": $white,
-          "body": $body-color,
-          "muted": $text-muted,
-          "black-50": rgba($black, .5),
-          "white-50": rgba($white, .5),
-          "reset": inherit,
-        )
+      values: (
+        "primary": $primary,
+        "light": $light,
+        "white": $white,
+        "body": $body-color,
+        "muted": $text-muted,
+        "reset": inherit,
       )
     ),
     "line-height": (
@@ -395,9 +392,12 @@ $utilities: map-merge(
       property: background-color,
       class: bg,
       values: map-merge(
-        $theme-colors,
+        $supporting-colors,
         (
+          "primary": $primary,
+          "secondary": $secondary,
           "body": $body-bg,
+          "light": $light,
           "white": $white,
           "transparent": transparent
         )

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
@@ -42,6 +42,13 @@
       .#{$property-class + $infix + $property-class-modifier} {
         @each $property in $properties {
           #{$property}: $value if($enable-important-utilities, !important, null);
+          // Boosted mod
+          @if "background-color" == $property and "transparent" != $value {
+            color: color-contrast($value);
+          } @else if "color" == $property and "inherit" != $value {
+            background-color: color-contrast($value);
+          }
+          // End mod
         }
       }
     }

diff --git a/site/content/docs/4.3/utilities/colors.md b/site/content/docs/4.3/utilities/colors.md
@@ -10,18 +10,16 @@ toc: true
 
 Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
 
+<!-- Boosted mod -->
 {{< example >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<p class="text-{{ .name }}{{ if eq .name "light" }} bg-dark{{ end }}">.text-{{ .name }}</p>
-{{- end -}}
-{{< /colors.inline >}}
+<p class="text-primary">.text-primary</p>
+<p class="text-secondary">.text-secondary</p>
+<p class="text-light">.text-light</p>
 <p class="text-body">.text-body</p>
 <p class="text-muted">.text-muted</p>
 <p class="text-white bg-dark">.text-white</p>
-<p class="text-black-50">.text-black-50</p>
-<p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
+<!-- End mod -->
 
 ## Background color
 
@@ -30,25 +28,13 @@ Similar to the contextual text color classes, easily set the background of an el
 {{< example >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<div class="p-3 mb-2 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else }}text-white{{ end }}">.bg-{{ .name }}</div>
+<div class="p-3 mb-2 bg-{{ .name }}">.bg-{{ .name }}</div>
 {{- end -}}
 {{< /colors.inline >}}
-<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+<div class="p-3 mb-2 bg-white">.bg-white</div>
+<div class="p-3 mb-2 bg-transparent">.bg-transparent</div>
 {{< /example >}}
 
-## Background gradient
-
-When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options]({{< docsref "/getting-started/theming#sass-options" >}}) to enable these classes and more.
-
-{{< markdown >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-- `.bg-gradient-{{ .name }}`
-{{- end -}}
-{{< /colors.inline >}}
-{{< /markdown >}}
-
 {{< callout info >}}
 #### Dealing with specificity