1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
layout: docs
title: Colors
description: Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too.
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") }}
<p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
{{- end -}}
{{< /colors.inline >}}
<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>
<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
{{< /example >}}
{{< callout warning >}}
**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
{{< /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 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
{{< added-in "5.1.0" >}}
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.
### How it works
Consider our default `.text-primary` utility.
```css
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
```
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 >}}
<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>
{{< /example >}}
Or, choose from any of the `.text-opacity` utilities:
{{< example >}}
<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>
{{< /example >}}
## 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.
## 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.
### Sass variables
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
Grayscale colors are also available, but only a subset are used to generate any utilities.
{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
{{< 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.
{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
RGB colors are generated from a separate Sass map:
{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
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" >}}
### Sass 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" >}})
{{< scss-docs name="utils-color" file="scss/_utilities.scss" >}}
|
