diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md index 6a3c323b0c7e..d42c63615923 100644 --- a/site/content/docs/5.3/customize/color.md +++ b/site/content/docs/5.3/customize/color.md @@ -18,341 +18,343 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` **Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6. {{< /callout >}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescriptionSwatchVariables
- {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-body-color`
`--bs-body-color-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-body-bg`
`--bs-body-bg-rgb`{{< /markdown >}} -
- {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-secondary-color`
`--bs-secondary-color-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-secondary-bg`
`--bs-secondary-bg-rgb`{{< /markdown >}} -
- {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-tertiary-color`
`--bs-tertiary-color-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-tertiary-bg`
`--bs-tertiary-bg-rgb`{{< /markdown >}} -
- {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-emphasis-color`
`--bs-emphasis-color-rgb`{{< /markdown >}} -
- {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-border-color`
`--bs-border-color-rgb`{{< /markdown >}} -
- {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-primary`
`--bs-primary-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} -
-
Text
- 		- {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} -
- {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-success`
`--bs-success-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} -
-
Text
- 		- {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} -
- {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-danger`
`--bs-danger-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} -
-
Text
- 		- {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} -
- {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-warning`
`--bs-warning-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} -
-
Text
- 		- {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} -
- {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-info`
`--bs-info-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} -
-
Text
- 		- {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} -
- {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-light`
`--bs-light-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} -
-
Text
- 		- {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} -
- {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} - -
 
- 		- {{< markdown >}}`--bs-dark`
`--bs-dark-rgb`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} -
-
 
- 		- {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} -
-
Text
- 		- {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescriptionSwatchVariables
+ {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-body-color`
`--bs-body-color-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-body-bg`
`--bs-body-bg-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-secondary-color`
`--bs-secondary-color-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-secondary-bg`
`--bs-secondary-bg-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-tertiary-color`
`--bs-tertiary-color-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-tertiary-bg`
`--bs-tertiary-bg-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-emphasis-color`
`--bs-emphasis-color-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-border-color`
`--bs-border-color-rgb`{{< /markdown >}} +
+ {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-primary`
`--bs-primary-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-success`
`--bs-success-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-danger`
`--bs-danger-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-warning`
`--bs-warning-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-info`
`--bs-info-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-light`
`--bs-light-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} +
+ {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} + +
 
+ 		+ {{< markdown >}}`--bs-dark`
`--bs-dark-rgb`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} +
+
 
+ 		+ {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} +
+
Text
+ 		+ {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} +
+
### Using the new colors