}
@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 {
// 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-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,
"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,
- 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>
}
```
+## 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.
{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>
-
-<<<<<<< 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>`} />
+<div class="p-3 mb-2 bg-black bg-gradient color-white">.bg-black.bg-gradient</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.
- 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:
<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>`),
- `<div class="mb-2 text-fg">.text-fg</div>
-<div class="mb-2 text-fg-1">.text-fg-1</div>
-<div class="mb-2 text-fg-2">.text-fg-2</div>
-<div class="mb-2 text-fg-3">.text-fg-3</div>
-
-<div class="mb-2 text-black bg-white">.text-black</div>
-<div class="mb-2 text-white bg-black">.text-white</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 color">.color</div>
+<div class="mb-2 color-1">.color-1</div>
+<div class="mb-2 color-2">.color-2</div>
+<div class="mb-2 color-3">.color-3</div>
+
+<div class="mb-2 color-black bg-white">.color-black</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
+
+<BreakingChange />
-<AddedIn version="5.1.0" />
+**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
+<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>`} />
-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.
-
-<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:
+.color-success {
+ --bs-color: var(--bs-success);
+}
-<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>`} />
+.color-10 {
+ color: color-mix(in srgb, var(--bs-color) 10%, transparent);
+}
+```
## Specificity
projects / thirdparty / bootstrap.git / commitdiff
