From 440021c556d82b19f0c49aff4e6e1409feffa95b Mon Sep 17 00:00:00 2001 From: DrejT <119151870+DrejT@users.noreply.github.com> Date: Fri, 9 Feb 2024 00:32:29 +0530 Subject: [PATCH 1/2] updated table to be responsive --- site/content/docs/5.3/customize/color.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md index 6a3c323b0c7e..7e60e0f31243 100644 --- a/site/content/docs/5.3/customize/color.md +++ b/site/content/docs/5.3/customize/color.md @@ -18,6 +18,7 @@ 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 >}} +
@@ -353,6 +354,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
+
### Using the new colors From 67916c266c9ee7609b2fc54166e0da58d7cdc3f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 9 Feb 2024 07:56:52 +0100 Subject: [PATCH 2/2] Fix formatting --- site/content/docs/5.3/customize/color.md | 670 +++++++++++------------ 1 file changed, 335 insertions(+), 335 deletions(-) diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md index 7e60e0f31243..d42c63615923 100644 --- a/site/content/docs/5.3/customize/color.md +++ b/site/content/docs/5.3/customize/color.md @@ -19,341 +19,341 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< /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