From: Mark Otto Date: Tue, 27 May 2025 05:58:38 +0000 (-0700) Subject: Redo background and color utilities with new classes and more X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=015f19a0a3cda65f54fc57d07c01f4e0e5c8fadf;p=thirdparty%2Fbootstrap.git Redo background and color utilities with new classes and more --- diff --git a/scss/_root.scss b/scss/_root.scss index 0d1cf2c390..de03aca12f 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -60,13 +60,13 @@ } @each $key, $value in $theme-bgs { - // $key: if($key == 0, "", "-" + $key); - --#{$prefix}bg-#{$key}: #{$value}; + $key: if($key == null, "", "-" + $key); + --#{$prefix}bg#{$key}: #{$value}; } @each $key, $value in $theme-fgs { - // $key: if($key == 0, "", "-" + $key); - --#{$prefix}fg-#{$key}: #{$value}; + $key: if($key == null, "", "-" + $key); + --#{$prefix}fg#{$key}: #{$value}; } @each $key, $value in $theme-borders { diff --git a/scss/_theme.scss b/scss/_theme.scss index 6ac82b27d4..04a1ba2818 100644 --- a/scss/_theme.scss +++ b/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: ( diff --git a/scss/_utilities.scss b/scss/_utilities.scss index e355fe42eb..7e0762f288 100644 --- a/scss/_utilities.scss +++ b/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, - local-vars: ( - "text-opacity": 1 - ), - // values: map.merge( - // theme-color-values("text"), - // $theme-fgs - // ), - values: map.merge( - // $utilities-text-colors, - theme-color-values("text"), - ( - "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, - ) + values: ( + 10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent), + 20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent), + 30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent), + 40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent), + 50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent), + 60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent), + 70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent), + 80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent), + 90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent), + 100: var(--#{$prefix}color), ) ), + "contrast-color": ( - property: color, - class: text-on, + property: --#{$prefix}color, + 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( - theme-color-values("bg"), - $theme-bgs - ), + values: map.merge(theme-color-values("bg"), $theme-bgs), ), "bg-color-subtle": ( property: --#{$prefix}bg, diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx index cc968cbabe..553f90c3f9 100644 --- a/site/src/content/docs/utilities/background.mdx +++ b/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: `
.bg-${themeColor.name}
@@ -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. + +.color-on-success +
.color-on-success.color-50
`} /> + ## 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 ( -
.bg-{themeColor.name}.bg-gradient
+
.bg-{themeColor.name}.bg-gradient
) })} -
.bg-black.bg-gradient
- -<<<<<<< HEAD -## Opacity - - - -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. - -This is default success background -
This is 50% opacity success background
`} /> - -Or, choose from any of the `.bg-opacity` utilities: - -This is default success background -
This is 75% opacity success background
-
This is 50% opacity success background
-
This is 25% opacity success background
-
This is 10% opacity success background
`} /> +
.bg-black.bg-gradient
-======= ->>>>>>> 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. diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx index 0cb429f589..9250ce3c4b 100644 --- a/site/src/content/docs/utilities/colors.mdx +++ b/site/src/content/docs/utilities/colors.mdx @@ -13,67 +13,72 @@ 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)`. - - Then, our specific color utilities set the `--bs-text` CSS variable to the color value. + - 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-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: `
.text-${themeColor.name}
`), - `
.text-fg
-
.text-fg-1
-
.text-fg-2
-
.text-fg-3
- -
.text-black
-
.text-white
` + ...getData('theme-colors').map((themeColor) => `
.color-${themeColor.name}
`), + `
.color
+
.color-1
+
.color-2
+
.color-3
+ +
.color-black
+
.color-white
` ]} /> 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); } ``` -## Opacity +## Color opacity + + - +**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. -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. +Note that changing the alpha-transparency or opacity of a color may require you to also update the text color to ensure proper contrast. -### How it works +.color-success +
.color-90
+
.color-80
+
.color-70
+
.color-60
+
.color-50
+
.color-40
+
.color-30
+
.color-20
+
.color-10
`} /> -Consider our default `.text-primary` utility. +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 { - --bs-text-opacity: 1; - color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; +[class*="color-"] { + color: var(--bs-color); } -``` - -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. - -This is default primary text -
This is 50% opacity primary text
`} /> - -Or, choose from any of the `.text-opacity` utilities: +.color-success { + --bs-color: var(--bs-success); +} -This is default primary text -
This is 75% opacity primary text
-
This is 50% opacity primary text
-
This is 25% opacity primary text
`} /> +.color-10 { + color: color-mix(in srgb, var(--bs-color) 10%, transparent); +} +``` ## Specificity