[OUDS] Update bg-* utilities

js/tests/visual/toast.html

@@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
     <div class="notifications">
       <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
         <div class="toast-header">
-          <span class="d-block bg-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
+          <span class="d-block bg-surface-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small>11 mins ago</small>
         </div>
@@ -39,7 +39,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
       <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
-          <span class="d-block bg-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
+          <span class="d-block bg-surface-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-muted">2 seconds ago</small>
           <button type="button" class="ms-small mb-2xsmall btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->

scss/_maps.scss

@@ -141,31 +141,39 @@ $ouds-opacities: (
 // scss-docs-end ouds-maps-opacities
 
 // scss-docs-start ouds-maps-backgrounds
-$ouds-backgrounds: (
+$ouds-backgrounds-with-color: (
+  "surface-brand-primary": var(--#{$prefix}color-surface-brand-primary),
+  "surface-brand-secondary": if(variable-exists(ouds-color-surface-brand-secondary-light), var(--#{$prefix}color-surface-brand-secondary), null),
+  "surface-brand-tertiary": if(variable-exists(ouds-color-surface-brand-tertiary-light), var(--#{$prefix}color-surface-brand-tertiary), null),
+  "surface-status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized),
+  "surface-status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted),
+  "surface-status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized),
+  "surface-status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted),
+  "surface-status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized),
+  "surface-status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted),
+  "surface-status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized),
+  "surface-status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted),
+  "surface-status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized),
+  "surface-status-info-muted": var(--#{$prefix}color-surface-status-info-muted),
+  "always-black": var(--#{$prefix}color-always-black),
+  "always-white": var(--#{$prefix}color-always-white),
+) !default;
+$ouds-backgrounds-without-color: (
   "primary": var(--#{$prefix}color-bg-primary),
   "secondary": var(--#{$prefix}color-bg-secondary),
   "tertiary": var(--#{$prefix}color-bg-tertiary),
-  "brand-primary": var(--#{$prefix}color-surface-brand-primary),
-  "brand-secondary": if(variable-exists(ouds-color-surface-brand-secondary-light), var(--#{$prefix}color-surface-brand-secondary), null),
-  "brand-tertiary": if(variable-exists(ouds-color-surface-brand-tertiary-light), var(--#{$prefix}color-surface-brand-tertiary), null),
-  "inverse-high": var(--#{$prefix}color-surface-inverse-high),
-  "inverse-low": var(--#{$prefix}color-surface-inverse-low),
-  "status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized),
-  "status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted),
-  "status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized),
-  "status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted),
-  "status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized),
-  "status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted),
-  "status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized),
-  "status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted),
-  "status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized),
-  "status-info-muted": var(--#{$prefix}color-surface-status-info-muted),
-  "always-black": var(--#{$prefix}color-always-black),
-  "always-white": var(--#{$prefix}color-always-white),
+  "inverse-high": var(--#{$prefix}color-bg-inverse-high),
+  "inverse-low": var(--#{$prefix}color-bg-inverse-low),
+  "surface-primary": var(--#{$prefix}color-surface-primary),
+  "surface-secondary": var(--#{$prefix}color-surface-secondary),
+  "surface-tertiary": var(--#{$prefix}color-surface-tertiary),
+  "surface-inverse-high": var(--#{$prefix}color-surface-inverse-high),
+  "surface-inverse-low": var(--#{$prefix}color-surface-inverse-low),
   "opacity-lower": var(--#{$prefix}color-opacity-lower),
   "opacity-lowest": var(--#{$prefix}color-opacity-lowest),
   "transparent": transparent,
 ) !default;
+$ouds-backgrounds: map-merge($ouds-backgrounds-with-color, $ouds-backgrounds-without-color) !default;
 // scss-docs-end ouds-maps-backgrounds
 
 // scss-docs-start ouds-maps-text-colors

scss/helpers/_color-bg.scss

@@ -21,18 +21,25 @@
   }
 }
 
-@each $color, $value in map-remove($ouds-backgrounds, "primary", "secondary", "tertiary", "opacity-lower", "opacity-lowest", "transparent", "inverse-high", "inverse-low") {
+@each $color, $value in $ouds-backgrounds-with-color {
   $text-bg-color: null;
 
   @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 {
-    $text-bg-color: var(--#{$prefix}color-content-on-#{$color});
+    $text-bg-color: var(--#{$prefix}color-content-on-#{str-replace($color, "surface-")});
   }
 
   .bg-#{$color} {
     --#{$prefix}color-local: #{$text-bg-color};
+    color: var(--#{$prefix}color-local);
+  }
+}
+
+@each $color, $value in $ouds-backgrounds-without-color {
+  .bg-#{$color} {
+    --#{$prefix}color-local: initial;
   }
 }

scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss

@@ -3632,67 +3632,47 @@ $utilities: ();
           box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky) !important;
         }
 
-        .bg-primary {
-          background-color: var(--bs-color-bg-primary) !important;
-        }
-
-        .bg-secondary {
-          background-color: var(--bs-color-bg-secondary) !important;
-        }
-
-        .bg-tertiary {
-          background-color: var(--bs-color-bg-tertiary) !important;
-        }
-
-        .bg-brand-primary {
+        .bg-surface-brand-primary {
           background-color: var(--bs-color-surface-brand-primary) !important;
         }
 
-        .bg-inverse-high {
-          background-color: var(--bs-color-surface-inverse-high) !important;
-        }
-
-        .bg-inverse-low {
-          background-color: var(--bs-color-surface-inverse-low) !important;
-        }
-
-        .bg-status-accent-emphasized {
+        .bg-surface-status-accent-emphasized {
           background-color: var(--bs-color-surface-status-accent-emphasized) !important;
         }
 
-        .bg-status-accent-muted {
+        .bg-surface-status-accent-muted {
           background-color: var(--bs-color-surface-status-accent-muted) !important;
         }
 
-        .bg-status-positive-emphasized {
+        .bg-surface-status-positive-emphasized {
           background-color: var(--bs-color-surface-status-positive-emphasized) !important;
         }
 
-        .bg-status-positive-muted {
+        .bg-surface-status-positive-muted {
           background-color: var(--bs-color-surface-status-positive-muted) !important;
         }
 
-        .bg-status-negative-emphasized {
+        .bg-surface-status-negative-emphasized {
           background-color: var(--bs-color-surface-status-negative-emphasized) !important;
         }
 
-        .bg-status-negative-muted {
+        .bg-surface-status-negative-muted {
           background-color: var(--bs-color-surface-status-negative-muted) !important;
         }
 
-        .bg-status-warning-emphasized {
+        .bg-surface-status-warning-emphasized {
           background-color: var(--bs-color-surface-status-warning-emphasized) !important;
         }
 
-        .bg-status-warning-muted {
+        .bg-surface-status-warning-muted {
           background-color: var(--bs-color-surface-status-warning-muted) !important;
         }
 
-        .bg-status-info-emphasized {
+        .bg-surface-status-info-emphasized {
           background-color: var(--bs-color-surface-status-info-emphasized) !important;
         }
 
-        .bg-status-info-muted {
+        .bg-surface-status-info-muted {
           background-color: var(--bs-color-surface-status-info-muted) !important;
         }
 
@@ -3704,6 +3684,46 @@ $utilities: ();
           background-color: var(--bs-color-always-white) !important;
         }
 
+        .bg-primary {
+          background-color: var(--bs-color-bg-primary) !important;
+        }
+
+        .bg-secondary {
+          background-color: var(--bs-color-bg-secondary) !important;
+        }
+
+        .bg-tertiary {
+          background-color: var(--bs-color-bg-tertiary) !important;
+        }
+
+        .bg-inverse-high {
+          background-color: var(--bs-color-bg-inverse-high) !important;
+        }
+
+        .bg-inverse-low {
+          background-color: var(--bs-color-bg-inverse-low) !important;
+        }
+
+        .bg-surface-primary {
+          background-color: var(--bs-color-surface-primary) !important;
+        }
+
+        .bg-surface-secondary {
+          background-color: var(--bs-color-surface-secondary) !important;
+        }
+
+        .bg-surface-tertiary {
+          background-color: var(--bs-color-surface-tertiary) !important;
+        }
+
+        .bg-surface-inverse-high {
+          background-color: var(--bs-color-surface-inverse-high) !important;
+        }
+
+        .bg-surface-inverse-low {
+          background-color: var(--bs-color-surface-inverse-low) !important;
+        }
+
         .bg-opacity-lower {
           background-color: var(--bs-color-opacity-lower) !important;
         }
@@ -14647,67 +14667,47 @@ $utilities: ();
           background-color: var(--bs-dark-bg-subtle) !important;
         }
 
-        .bg-primary {
-          background-color: var(--bs-color-bg-primary) !important;
-        }
-
-        .bg-secondary {
-          background-color: var(--bs-color-bg-secondary) !important;
-        }
-
-        .bg-tertiary {
-          background-color: var(--bs-color-bg-tertiary) !important;
-        }
-
-        .bg-brand-primary {
+        .bg-surface-brand-primary {
           background-color: var(--bs-color-surface-brand-primary) !important;
         }
 
-        .bg-inverse-high {
-          background-color: var(--bs-color-surface-inverse-high) !important;
-        }
-
-        .bg-inverse-low {
-          background-color: var(--bs-color-surface-inverse-low) !important;
-        }
-
-        .bg-status-accent-emphasized {
+        .bg-surface-status-accent-emphasized {
           background-color: var(--bs-color-surface-status-accent-emphasized) !important;
         }
 
-        .bg-status-accent-muted {
+        .bg-surface-status-accent-muted {
           background-color: var(--bs-color-surface-status-accent-muted) !important;
         }
 
-        .bg-status-positive-emphasized {
+        .bg-surface-status-positive-emphasized {
           background-color: var(--bs-color-surface-status-positive-emphasized) !important;
         }
 
-        .bg-status-positive-muted {
+        .bg-surface-status-positive-muted {
           background-color: var(--bs-color-surface-status-positive-muted) !important;
         }
 
-        .bg-status-negative-emphasized {
+        .bg-surface-status-negative-emphasized {
           background-color: var(--bs-color-surface-status-negative-emphasized) !important;
         }
 
-        .bg-status-negative-muted {
+        .bg-surface-status-negative-muted {
           background-color: var(--bs-color-surface-status-negative-muted) !important;
         }
 
-        .bg-status-warning-emphasized {
+        .bg-surface-status-warning-emphasized {
           background-color: var(--bs-color-surface-status-warning-emphasized) !important;
         }
 
-        .bg-status-warning-muted {
+        .bg-surface-status-warning-muted {
           background-color: var(--bs-color-surface-status-warning-muted) !important;
         }
 
-        .bg-status-info-emphasized {
+        .bg-surface-status-info-emphasized {
           background-color: var(--bs-color-surface-status-info-emphasized) !important;
         }
 
-        .bg-status-info-muted {
+        .bg-surface-status-info-muted {
           background-color: var(--bs-color-surface-status-info-muted) !important;
         }
 
@@ -14719,6 +14719,46 @@ $utilities: ();
           background-color: var(--bs-color-always-white) !important;
         }
 
+        .bg-primary {
+          background-color: var(--bs-color-bg-primary) !important;
+        }
+
+        .bg-secondary {
+          background-color: var(--bs-color-bg-secondary) !important;
+        }
+
+        .bg-tertiary {
+          background-color: var(--bs-color-bg-tertiary) !important;
+        }
+
+        .bg-inverse-high {
+          background-color: var(--bs-color-bg-inverse-high) !important;
+        }
+
+        .bg-inverse-low {
+          background-color: var(--bs-color-bg-inverse-low) !important;
+        }
+
+        .bg-surface-primary {
+          background-color: var(--bs-color-surface-primary) !important;
+        }
+
+        .bg-surface-secondary {
+          background-color: var(--bs-color-surface-secondary) !important;
+        }
+
+        .bg-surface-tertiary {
+          background-color: var(--bs-color-surface-tertiary) !important;
+        }
+
+        .bg-surface-inverse-high {
+          background-color: var(--bs-color-surface-inverse-high) !important;
+        }
+
+        .bg-surface-inverse-low {
+          background-color: var(--bs-color-surface-inverse-low) !important;
+        }
+
         .bg-opacity-lower {
           background-color: var(--bs-color-opacity-lower) !important;
         }

site/src/assets/examples/download-app/index.astro

@@ -174,7 +174,7 @@ export const aliases = [
     </div>
   </div>
 
-  <div class="py-2xlarge py-md-4xlarge bg-status-info-emphasized">
+  <div class="py-2xlarge py-md-4xlarge bg-surface-status-info-emphasized">
     <div data-bs-theme={getMode('modes-on-status-info-emphasized')}>
       <div class="container-fluid container-max-width d-flex justify-content-center pt-md-small pb-small">
         <div class="col-12 col-md-6 col-lg-8 col-xl-6">
@@ -815,7 +815,7 @@ export const aliases = [
     </div>
   </div>
 
-  <div class="py-2xlarge py-md-4xlarge bg-status-warning-emphasized">
+  <div class="py-2xlarge py-md-4xlarge bg-surface-status-warning-emphasized">
     <div data-bs-theme={getMode('modes-on-status-warning-emphasized')}>
       <div class="container-fluid container-max-width d-flex justify-content-center pt-md-small pb-small">
         <div class="col-12 col-md-6">