feat(utilities): add .bg-supporting-* utilities

Orange-OpenSource · Jan 26, 2021 · 0fd37a0 · 0fd37a0
1 parent 8c4d0e7
commit 0fd37a0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -18,11 +18,11 @@
     },
     {
       "path": "./dist/css/boosted-utilities.css",
-      "maxSize": "6.5 kB"
+      "maxSize": "6.6 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.min.css",
-      "maxSize": "5.9 kB"
+      "maxSize": "6 kB"
     },
     {
       "path": "./dist/css/boosted.css",

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -470,10 +470,14 @@ $utilities: map-merge(
       values: map-merge(
         $background-colors,
         (
-          "pink": $pink,
           "body": $body-bg,
           "white": $white,
-          "transparent": transparent
+          "transparent": transparent,
+          "supporting-green": $supporting-green,
+          "supporting-blue": $supporting-blue,
+          "supporting-yellow": $supporting-yellow,
+          "supporting-pink": $supporting-pink,
+          "supporting-purple": $supporting-purple
         )
       )
     ),

diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md
@@ -39,15 +39,25 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 
 Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do set `color`** to ensure contrasts.
 
+<!-- Boosted mod: inconsistent background color & naming, showing only supporting color naming -->
 {{< example >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<div class="p-3 mb-2 fw-bold bg-{{ .name }}">.bg-{{ .name }}</div>
-{{- end -}}
-{{< /colors.inline >}}
-<div class="p-3 mb-2 fw-bold bg-pink">.bg-pink</div>
+<div class="p-3 mb-2 fw-bold bg-primary">.bg-primary</div>
+<div class="p-3 mb-2 fw-bold bg-secondary">.bg-secondary or .bg-dark</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-green">.bg-supporting-green</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-purple">.bg-supporting-purple</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-yellow">.bg-supporting-yellow</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-blue">.bg-supporting-blue</div>
+<div class="p-3 mb-2 fw-bold bg-supporting-pink">.bg-supporting-pink</div>
+<div class="p-3 mb-2 fw-bold bg-light">.bg-light</div>
 <div class="p-3 mb-2 fw-bold bg-white">.bg-white or .bg-body</div>
 <div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>
 {{< /example >}}
 
+{{< callout >}}
+### Color naming
+
+Since [Orange brand distinguishes functional colors from supporting colors]({{< docsref "/guidelines/colors" >}}) and Bootstrap doesn't, naming can be somewhat inconsistent.
+Bootstrap's `background-color` utilities are supported in Boosted, but will result in our core `.bg-supporting-*` utilities—making `.bg-danger` inconsistent with `.btn-danger` color, for example.
+{{< /callout >}}
+
 <!-- Boosted mod: no background gradient -->