Add color background helpers to the Colors tokens PR (#2831)

Author: louismaximepiton

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "63.75 kB"
+      "maxSize": "64.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "60.75 kB"
+      "maxSize": "61.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
@@ -34,7 +34,7 @@
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "57.0 kB"
+      "maxSize": "57.25 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",

js/tests/visual/modal.html

@@ -188,7 +188,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
 
       <br><br>
 
-      <div class="text-bg-dark p-short" id="tall" style="display: none;">
+      <div class="text-bg-always-black p-short" id="tall" style="display: none;">
         Tall body content to force the page to have a scrollbar.
       </div>
 

scss/helpers/_color-bg.scss

@@ -13,3 +13,29 @@
     background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
+
+// OUDS mod
+@each $color, $value in map-remove($ouds-backgrounds, "transparent") {
+  $text-bg-color: var(--#{$prefix}color-content-default);
+  @if index(("brand-primary"), #{$color}) {
+    $text-bg-color: var(--#{$prefix}color-content-on-brand-primary);
+  } @else if index(("emphasized"), #{$color}) {
+    $text-bg-color: var(--#{$prefix}color-always-white);
+  } @else if index(("always-black"), #{$color}) {
+    $text-bg-color: var(--#{$prefix}color-always-on-black);
+  } @else if index(("always-white"), #{$color}) {
+    $text-bg-color: var(--#{$prefix}color-always-on-white);
+  } @else if index(("status-neutral-emphasized", "status-negative-emphasized"), #{$color}) {
+    $text-bg-color: var(--#{$prefix}color-content-on-status-emphasized-alt);
+  } @else if index(("status-accent-emphasized", "status-positive-emphasized", "status-warning-emphasized", "status-info-emphasized"), #{$color}) {
+    $text-bg-color: var(--#{$prefix}color-content-on-status-emphasized);
+  } @else if index(("status-neutral-muted", "status-accent-muted", "status-positive-muted", "status-negative-muted", "status-warning-muted", "status-info-muted"), #{$color}) {
+    $text-bg-color: var(--#{$prefix}color-content-on-status-muted);
+  }
+
+  .text-bg-#{$color} {
+    color: $text-bg-color if($enable-important-utilities, !important, null);
+    background-color: $value if($enable-important-utilities, !important, null);
+  }
+}
+// End mod

site/content/docs/0.0/helpers/color-background.md

@@ -8,4 +8,55 @@ aliases:
 toc: true
 ---
 
-{{< callout-soon "helper" >}}
+## Overview
+
+Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. We determine a contrasting `color` for a particular `background-color`. However, it doesn't change mode at all.
+
+{{< callout info >}}
+Please consider using our [color modes]({{< docsref "/customize/color-modes" >}}) directly as explained in our [background utilities]({{< docsref "/utilities/background" >}}) to set nested components in the right mode directly as well.
+{{< /callout >}}
+
+{{< example >}}
+<p class="text-bg-primary p-tall fw-bold">.text-bg-primary</p>
+<p class="text-bg-secondary p-tall fw-bold">.text-bg-secondary</p>
+<p class="text-bg-tertiary p-tall fw-bold">.text-bg-tertiary</p>
+<p class="text-bg-emphasized p-tall fw-bold">.text-bg-emphasized</p>
+<p class="text-bg-brand-primary p-tall fw-bold">.text-bg-brand-primary</p>
+<p class="text-bg-status-neutral-emphasized p-tall fw-bold">.text-bg-status-neutral-emphasized</p>
+<p class="text-bg-status-neutral-muted p-tall fw-bold">.text-bg-status-neutral-muted</p>
+<p class="text-bg-status-accent-emphasized p-tall fw-bold">.text-bg-status-accent-emphasized</p>
+<p class="text-bg-status-accent-muted p-tall fw-bold">.text-bg-status-accent-muted</p>
+<p class="text-bg-status-positive-emphasized p-tall fw-bold">.text-bg-status-positive-emphasized</p>
+<p class="text-bg-status-positive-muted p-tall fw-bold">.text-bg-status-positive-muted</p>
+<p class="text-bg-status-negative-emphasized p-tall fw-bold">.text-bg-status-negative-emphasized</p>
+<p class="text-bg-status-negative-muted p-tall fw-bold">.text-bg-status-negative-muted</p>
+<p class="text-bg-status-warning-emphasized p-tall fw-bold">.text-bg-status-warning-emphasized</p>
+<p class="text-bg-status-warning-muted p-tall fw-bold">.text-bg-status-warning-muted</p>
+<p class="text-bg-status-info-emphasized p-tall fw-bold">.text-bg-status-info-emphasized</p>
+<p class="text-bg-status-info-muted p-tall fw-bold">.text-bg-status-info-muted</p>
+<p class="text-bg-always-black p-tall fw-bold">.text-bg-always-black</p>
+<p class="text-bg-always-white p-tall fw-bold">.text-bg-always-white</p>
+{{< /example >}}
+
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
+{{< bootstrap-compatibility >}}
+<!-- TODO LM: Check Bootstrap compatibility -->
+Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.
+
+{{< callout warning >}}
+**Heads up!** There's currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.
+{{< /callout >}}
+
+{{< example >}}
+{{< text-bg.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<div class="text-bg-{{ .name }} p-3">{{ .name | title }} with contrasting color</div>
+{{- end -}}
+{{< /text-bg.inline >}}
+{{< /example >}}
+{{< /bootstrap-compatibility >}}
+
+<!-- ## With components -->