From: DrejT <119151870+DrejT@users.noreply.github.com> Date: Tue, 13 Feb 2024 08:06:40 +0000 (+0530) Subject: Docs: update colors table to be responsive in Customize > Color page (#39663) X-Git-Tag: v5.3.3~13 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=d30385b9df718e476c4667c171650f608ecf639b;p=thirdparty%2Fbootstrap.git Docs: update colors table to be responsive in Customize > Color page (#39663) Co-authored-by: Julien Déramond --- diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md index 6a3c323b0c..d42c636159 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