Redo background and color utilities with new classes and more

scss/_root.scss

@@ -60,13 +60,13 @@
   }
 
   @each $key, $value in $theme-bgs {
-    // $key: if($key == 0, "", "-" + $key);
+    $key: if($key == null, "", "-" + $key);
-    --#{$prefix}bg-#{$key}: #{$value};
+    --#{$prefix}bg#{$key}: #{$value};
   }
 
   @each $key, $value in $theme-fgs {
-    // $key: if($key == 0, "", "-" + $key);
+    $key: if($key == null, "", "-" + $key);
-    --#{$prefix}fg-#{$key}: #{$value};
+    --#{$prefix}fg#{$key}: #{$value};
   }
 
   @each $key, $value in $theme-borders {

scss/_theme.scss

@@ -156,17 +156,24 @@ $new-theme-colors: (
 
 // mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
 $theme-bgs: (
-  "0": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
+  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
   "1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
   "2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
   "3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
+  "white": var(--#{$prefix}white),
+  "black": var(--#{$prefix}black),
+  "transparent": transparent,
+  "inherit": inherit,
 ) !default;
 
 $theme-fgs: (
-  "0": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
   "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
   "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
   "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
+  "white": var(--#{$prefix}white),
+  "black": var(--#{$prefix}black),
+  "inherit": inherit,
 ) !default;
 
 $theme-borders: (

scss/_utilities.scss

@@ -632,54 +632,40 @@ $utilities: map.merge(
     ),
     // scss-docs-end utils-text
     // scss-docs-start utils-color
+    "color-attr": (
+      selector: "attr-includes",
+      class: "color-",
+      property: color,
+      values: var(--#{$prefix}color),
+    ),
     "color": (
+      property: --#{$prefix}color,
+      class: color,
+      values: map.merge(theme-color-values("text"), $theme-fgs),
+    ),
+    "color-opacity": (
+      class: color,
       property: color,
-      class: text,
+      values: (
-      local-vars: (
+        10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
-        "text-opacity": 1
+        20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
-      ),
+        30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
-      // values: map.merge(
+        40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent),
-      //   theme-color-values("text"),
+        50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent),
-      //   $theme-fgs
+        60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent),
-      // ),
+        70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent),
-      values: map.merge(
+        80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent),
-        // $utilities-text-colors,
+        90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent),
-        theme-color-values("text"),
+        100: var(--#{$prefix}color),
-        (
-          "muted": var(--#{$prefix}secondary-color), // deprecated
-          "black-50": rgba($black, .5), // deprecated
-          "white-50": rgba($white, .5), // deprecated
-          "body-secondary": var(--#{$prefix}secondary-color),
-          "body-tertiary": var(--#{$prefix}tertiary-color),
-          "body-emphasis": var(--#{$prefix}emphasis-color),
-          "reset": inherit,
-        )
       )
     ),
+
     "contrast-color": (
-      property: color,
+      property: --#{$prefix}color,
-      class: text-on,
+      class: color-on,
       values: theme-color-values("contrast"),
     ),
     // scss-docs-end utils-color
-    "text-opacity": (
-      // css-var: true,
-      property: --#{$prefix}text-opacity,
-      class: text-opacity,
-      values: (
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      )
-    ),
-    // "text-color": (
-    //   property: color,
-    //   class: text,
-    //   values: theme-color-values("text"),
-    //   // values: $utilities-text-emphasis-colors
-    // ),
-    // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
       property: --#{$prefix}link-opacity,
@@ -742,10 +728,7 @@ $utilities: map.merge(
     "bg-color": (
       property: --#{$prefix}bg,
       class: bg,
-      values: map.merge(
+      values: map.merge(theme-color-values("bg"), $theme-bgs),
-        theme-color-values("bg"),
-        $theme-bgs
-      ),
     ),
     "bg-color-subtle": (
       property: --#{$prefix}bg,

site/src/content/docs/utilities/background.mdx

@@ -16,6 +16,9 @@ Set the `background-color` of an element.
   - We generate an attribute utility for classes that include `.bg-`, which looks like `[class*="bg-"]`, and set `background-color: var(--bs-bg)`.
   - Then, our specific color utilities set the `--bs-bg` CSS variable to the color value.
 - Background utilities don't set `color`, so you may need to use `.text-` or `.text-on-*` [color utilities]([[docsref:/utilities/colors]]).
+- Lastly, most background color utilities are responsive to color mode changes. This excludes inherit and transapent as there's no need, plus white and black as these exist for ease of common translucent colors.
+
+Here are the available background color utilities:
 
 <Example code={[
   ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} text-on-${themeColor.name}">.bg-${themeColor.name}</div>
@@ -75,6 +78,13 @@ As mentioned above, this works by combining the power of multiple utilities and
 }
 ```
 
+## Contrasting color
+
+The `.color-on-{background}` utility is used to set theme-provided contrast color for a particular theme background-color. Contrast color utilities also respond to their respective opacity utilities.
+
+<Example code={`<div class="p-2 bg-success color-on-success">.color-on-success</div>
+<div class="p-2 bg-success color-on-success color-50">.color-on-success.color-50</div>`} />
+
 ## Background gradient
 
 By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
@@ -83,48 +93,11 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 {getData('theme-colors').map((themeColor) => {
   return (
-    <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient${themeColor.contrast_color ? (' text-' + themeColor.contrast_color) : ' text-white'}`}>.bg-{themeColor.name}.bg-gradient</div>
+    <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient color-on-${themeColor.name}`}>.bg-{themeColor.name}.bg-gradient</div>
   )
 })}
-<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
+<div class="p-3 mb-2 bg-black bg-gradient color-white">.bg-black.bg-gradient</div>
 
-<<<<<<< HEAD
-## Opacity
-
-<AddedIn version="5.1.0" />
-
-As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
-
-### How it works
-
-Consider our default `.bg-success` utility.
-
-```css
-.bg-success {
-  --bs-bg-opacity: 1;
-  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
-}
-```
-
-We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-bg-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.bg-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.bg-*` class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.
-
-### Example
-
-To change that opacity, override `--bs-bg-opacity` via custom styles or inline styles.
-
-<Example code={`<div class="bg-success p-2 text-white">This is default success background</div>
-<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>`} />
-
-Or, choose from any of the `.bg-opacity` utilities:
-
-<Example code={`<div class="bg-success p-2 text-white">This is default success background</div>
-<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
-<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
-<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
-<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>`} />
-
-=======
->>>>>>> c719573e0 (More docs stuff and wip edits)
 ## CSS
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]([[docsref:/customize/css-variables]]) (aka CSS variables) for colors and more.

site/src/content/docs/utilities/colors.mdx

@@ -13,68 +13,73 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 - Colors are generated from the `$new-theme-colors` Sass map with a `theme-color-values()` function that looks up semantic colors based on a particular key from the Bootstrap theme config.
 - Additional colors are generated from the separate `$theme-texts` Sass map.
 - Text utilities are generated in a two-step process to allow for dynamic alpha transparency changes:
-  - We generate an attribute utility for classes that include `.text-`, which looks like `[class*="text-"]`, and set `color: var(--bs-text)`.
+  - We generate an attribute utility for classes that include `.color-`, which looks like `[class*="color-"]`, and set `color: var(--bs-color)`.
-  - Then, our specific color utilities set the `--bs-text` CSS variable to the color value.
+  - Then, our specific color utilities set the `--bs-color` CSS variable to the color value.
 - Text utilities don't set `background-color`, so you may need to use `.bg-` [background utilities]([[docsref:/utilities/background]]) for proper contrast.
+- Lastly, most color utilities are responsive to color mode changes. This excludes inherit as there's no need, plus white and black as these exist for ease of common translucent colors.
+
+Here are the available color utilities:
 
 <Example code={[
-  ...getData('theme-colors').map((themeColor) => `<div class="mb-2 text-${themeColor.name}${themeColor.contrast_color ? ` bg-${themeColor.contrast_color}` : ``}">.text-${themeColor.name}</div>`),
+  ...getData('theme-colors').map((themeColor) => `<div class="mb-2 color-${themeColor.name}${themeColor.contrast_color ? ` bg-${themeColor.contrast_color}` : ``}">.color-${themeColor.name}</div>`),
-  `<div class="mb-2 text-fg">.text-fg</div>
+  `<div class="mb-2 color">.color</div>
-<div class="mb-2 text-fg-1">.text-fg-1</div>
+<div class="mb-2 color-1">.color-1</div>
-<div class="mb-2 text-fg-2">.text-fg-2</div>
+<div class="mb-2 color-2">.color-2</div>
-<div class="mb-2 text-fg-3">.text-fg-3</div>
+<div class="mb-2 color-3">.color-3</div>
 
-<div class="mb-2 text-black bg-white">.text-black</div>
+<div class="mb-2 color-black bg-white">.color-black</div>
-<div class="mb-2 text-white bg-black">.text-white</div>`
+<div class="mb-2 color-white bg-black">.color-white</div>`
 ]} />
 
 Behind the scenes, the utilities come together like this:
 
 ```css
-[class*="text-"] {
+[class*="color-"] {
   color: var(--bs-text);
 }
 
-.text-primary {
+.color-primary {
   --bs-text: var(--bs-primary);
 }
 ```
 
 <Callout name="warning-color-assistive-technologies" />
 
-## Opacity
+## Color opacity
 
-<AddedIn version="5.1.0" />
+<BreakingChange />
 
-As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
+**Color opacity utilities have changed in v6** to use `.color-{number}` instead of `.text-opacity-{number}`. These new utilities are built with CSS-native `color-mix()` functions that mix the `.color-{color}`'s CSS variable with `transparent`. This allows for real-time color opacity changes without compilation.
 
-### How it works
+Note that changing the alpha-transparency or opacity of a color may require you to also update the text color to ensure proper contrast.
 
-Consider our default `.text-primary` utility.
+<Example code={`<div class="p-2 color-success">.color-success</div>
+<div class="p-2 color-success color-90">.color-90</div>
+<div class="p-2 color-success color-80">.color-80</div>
+<div class="p-2 color-success color-70">.color-70</div>
+<div class="p-2 color-success color-60">.color-60</div>
+<div class="p-2 color-success color-50">.color-50</div>
+<div class="p-2 color-success color-40">.color-40</div>
+<div class="p-2 color-success color-30">.color-30</div>
+<div class="p-2 color-success color-20">.color-20</div>
+<div class="p-2 color-success color-10">.color-10</div>`} />
+
+As mentioned above, this works by combining the power of multiple utilities and CSS `color-mix()`. Here's how the compiled CSS looks:
 
 ```css
-.text-primary {
+[class*="color-"] {
-  --bs-text-opacity: 1;
+  color: var(--bs-color);
-  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+}
+
+.color-success {
+  --bs-color: var(--bs-success);
+}
+
+.color-10 {
+  color: color-mix(in srgb, var(--bs-color) 10%, transparent);
 }
 ```
 
-We use an RGB version of our `--bs-primary` (with the value of `13, 110, 253`) CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(13, 110, 253, 1)`. The local CSS variable inside each `.text-*` class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.
-
-### Example
-
-To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.
-
-<Example code={`<div class="text-primary">This is default primary text</div>
-<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>`} />
-
-Or, choose from any of the `.text-opacity` utilities:
-
-<Example code={`<div class="text-primary">This is default primary text</div>
-<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
-<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
-<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>`} />
-
 ## Specificity
 
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a `<div>` or more semantic element with the desired class.