aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md')
-rw-r--r--vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md39
1 files changed, 28 insertions, 11 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md
index 4b1647242..e132a2f11 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md
@@ -6,10 +6,18 @@ group: utilities
toc: true
---
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
## Colors
Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
+{{< callout info >}}
+Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
+{{< /callout >}}
+
{{< example >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
@@ -17,9 +25,8 @@ Colorize text with color utilities. If you want to colorize links, you can use t
<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
{{- end -}}
{{< /colors.inline >}}
-<p class="text-body">.text-body</p>
-<p class="text-muted">.text-muted</p>
+<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>
@@ -35,11 +42,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
{{< /callout >}}
{{< callout warning >}}
-**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
-{{< /callout >}}
-
-{{< callout info >}}
-{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
{{< /callout >}}
## Opacity
@@ -83,11 +86,11 @@ Or, choose from any of the `.text-opacity` utilities:
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.
-## Sass
+## 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.
-### Variables
+### Sass variables
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
@@ -99,7 +102,15 @@ Grayscale colors are also available, but only a subset are used to generate any
{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
-### Map
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
+
+{{< scss-docs name="theme-text-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-text-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
@@ -113,10 +124,16 @@ RGB colors are generated from a separate Sass map:
{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
-And color opacities build on that with their own map that's consumed by the utilities API:
+Color opacities build on that with their own map that's consumed by the utilities API:
{{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
+Color mode adaptive text colors are also available as a Sass map:
+
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}}
+
### Utilities API
Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})