Adding some more utilities

Orange-OpenSource · Nov 10, 2023 · 9c556cd · 9c556cd
1 parent fb53962
commit 9c556cd
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -169,7 +169,7 @@ $utilities: map-merge(
       local-vars: (
         "border-opacity": 1
       ),
-      values: $utilities-border-colors
+      values: map-merge($utilities-border-colors, ("tertiary": var(--#{$prefix}border-color-translucent)))
     ),
     "subtle-border-color": (
       property: border-color,
@@ -679,7 +679,8 @@ $utilities: map-merge(
           "supporting-blue": $supporting-blue, // Boosted mod
           "supporting-yellow": $supporting-yellow, // Boosted mod
           "supporting-pink": $supporting-pink, // Boosted mod
-          "supporting-purple": $supporting-purple // Boosted mod
+          "supporting-purple": $supporting-purple, // Boosted mod
+          "supporting-orange": $brand-orange, // Boosted mod
         )
       )
     ),

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -7741,6 +7741,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary"></div>
@@ -7764,6 +7765,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary"></div>
@@ -7787,6 +7789,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary"></div>
@@ -7810,6 +7813,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow" data-bs-theme="dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue" data-bs-theme="dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange" data-bs-theme="dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light" data-bs-theme="dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark" data-bs-theme="dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary" data-bs-theme="dark"></div>
@@ -7833,6 +7837,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-yellow" data-bs-theme="light"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-blue" data-bs-theme="light"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-supporting-pink" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-success);" class="bg-supporting-orange" data-bs-theme="light"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-light" data-bs-theme="light"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-dark" data-bs-theme="light"></div>
   <div style="width: 2.5rem; height: 2.5rem; border: 2px solid var(--bs-secondary);" class="bg-body-secondary" data-bs-theme="light"></div>
@@ -7857,6 +7862,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-success);" class="border border-tertiary"></div>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
@@ -7872,6 +7878,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-success);" class="border border-tertiary"></div>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
@@ -7887,6 +7894,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-success);" class="border border-tertiary"></div>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
@@ -7902,6 +7910,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark" data-bs-theme="dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black" data-bs-theme="dark"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white" data-bs-theme="dark"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-success);" class="border border-tertiary" data-bs-theme="dark"></div>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
@@ -7917,6 +7926,7 @@ sitemap_exclude: true
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-dark" data-bs-theme="light"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-black" data-bs-theme="light"></div>
   <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-secondary-bg);" class="border border-white" data-bs-theme="light"></div>
+  <div style="width: 2.5rem; height: 2.5rem; background-color: var(--bs-success);" class="border border-tertiary" data-bs-theme="light"></div>
 </div>
 
 ### Colors

diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md
@@ -20,27 +20,32 @@ Similar to the contextual text color classes, set the background of an element t
 Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6.
 {{< /callout >}}
 
+{{< callout info >}}
+In case you need to write over one of these background, prefer using our [color & background helper]({{< docsref "/helpers/color-background" >}}) when it exists.
+{{< /callout >}}
+
 <!-- Boosted mod: inconsistent background color & naming, showing only supporting color naming -->
 {{< example >}}
-<div class="p-3 mb-2 fw-bold bg-primary text-black">.bg-primary</div>
-<div class="p-3 mb-2 fw-bold bg-secondary text-white">.bg-secondary</div>
-<div class="p-3 mb-2 fw-bold bg-success text-white">.bg-success</div>
-<div class="p-3 mb-2 fw-bold bg-danger text-white">.bg-danger</div>
-<div class="p-3 mb-2 fw-bold bg-warning text-black">.bg-warning</div>
-<div class="p-3 mb-2 fw-bold bg-info text-white">.bg-info</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-green text-black">.bg-supporting-green</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-purple text-black">.bg-supporting-purple</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-yellow text-black">.bg-supporting-yellow</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-blue text-black">.bg-supporting-blue</div>
-<div class="p-3 mb-2 fw-bold bg-supporting-pink text-black">.bg-supporting-pink</div>
-<div class="p-3 mb-2 fw-bold bg-light text-black">.bg-light</div>
-<div class="p-3 mb-2 fw-bold bg-dark text-white">.bg-dark</div>
-<div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
-<div class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</div>
-<div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
-<div class="p-3 mb-2 fw-bold bg-black text-white">.bg-black</div>
-<div class="p-3 mb-2 fw-bold bg-white text-black">.bg-white</div>
-<div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>
+<div class="p-3 mb-2 fw-bold bg-primary"><span class="text-body" data-bs-theme="light">.bg-primary</span></div>
+<div class="p-3 mb-2 fw-bold bg-secondary"><span class="text-body" data-bs-theme="inverted">.bg-secondary</span></div>
+<div class="p-3 mb-2 fw-bold bg-success"><span class="text-body" data-bs-theme="inverted">.bg-success</span></div>
+<div class="p-3 mb-2 fw-bold bg-danger"><span class="text-body" data-bs-theme="inverted">.bg-danger</span></div>
+<div class="p-3 mb-2 fw-bold bg-warning"><span class="text-body" data-bs-theme="light">.bg-warning</span></div>
+<div class="p-3 mb-2 fw-bold bg-info"><span class="text-body" data-bs-theme="inverted">.bg-info</span></div>
+<div class="p-3 mb-2 fw-bold bg-supporting-green"><span class="text-body" data-bs-theme="light">.bg-supporting-green</span></div>
+<div class="p-3 mb-2 fw-bold bg-supporting-purple"><span class="text-body" data-bs-theme="light">.bg-supporting-purple</span></div>
+<div class="p-3 mb-2 fw-bold bg-supporting-yellow"><span class="text-body" data-bs-theme="light">.bg-supporting-yellow</span></div>
+<div class="p-3 mb-2 fw-bold bg-supporting-blue"><span class="text-body" data-bs-theme="light">.bg-supporting-blue</span></div>
+<div class="p-3 mb-2 fw-bold bg-supporting-pink"><span class="text-body" data-bs-theme="light">.bg-supporting-pink</span></div>
+<div class="p-3 mb-2 fw-bold bg-supporting-orange"><span class="text-body" data-bs-theme="light">.bg-supporting-pink</span></div>
+<div class="p-3 mb-2 fw-bold bg-light"><span class="text-body" data-bs-theme="light">.bg-light</span></div>
+<div class="p-3 mb-2 fw-bold bg-dark"><span class="text-body" data-bs-theme="dark">.bg-dark</span></div>
+<div class="p-3 mb-2 fw-bold bg-body-secondary"><span class="text-body" data-bs-theme="body">.bg-body-secondary</span></div>
+<div class="p-3 mb-2 fw-bold bg-body-tertiary"><span class="text-body" data-bs-theme="body">.bg-body-tertiary</span></div>
+<div class="p-3 mb-2 fw-bold bg-body"><span class="text-body" data-bs-theme="body">.bg-body</span></div>
+<div class="p-3 mb-2 fw-bold bg-black"><span class="text-body" data-bs-theme="dark">.bg-black</span></div>
+<div class="p-3 mb-2 fw-bold bg-white"><span class="text-body" data-bs-theme="light">.bg-white</span></div>
+<div class="p-3 mb-2 fw-bold bg-transparent"><span class="text-body" data-bs-theme="body">.bg-transparent</span></div>
 {{< /example >}}
 
 {{< callout info >}}

diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md
@@ -52,6 +52,7 @@ Change the border color using utilities built on our theme colors.
 {{< /border.inline >}}
 <span class="border border-black"></span>
 <span class="border border-white"></span>
+<span class="border border-tertiary"></span>
 {{< /example >}}
 
 {{< callout info >}}