{{ $color.hex }}
{{ $color.darkHex }}
{{ $color.hex }}
{{ $color.darkHex }}
{{ $color.hex }}
{{ $color.darkHex }}
{{ $color.hex }}
{{ $color.hex }}
| Description | +Light value | +Dark value | +Variables | +
|---|---|---|---|
| + {{.description}} + | +
+
+
+ {{.hex}} |
+
+
+
+ {{.dark_hex}} |
+
+
+
+
+
+
+
+
+ |
+
| Description | ++ | Light value | +Dark value | +Variables | +
|---|---|---|---|---|
| + {{< markdown >}}**Body** - Default background and foreground colors, including components. {{< /markdown >}} + | ++ {{< markdown >}}Background.{{< /markdown >}} + | +
+
+
+ #fff |
+
+
+
+ #141414 |
+
+
+
+
+
+ |
+
| + {{< markdown >}}Foreground.{{< /markdown >}} + | +
+
+
+ #000 |
+
+
+
+ #fff |
+
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Body secondary** - Use the `color` option for less accentuated text (placeholder, helper text, code). Use the `bg` option to low emphasis a content or display a specific component state (hover, form disabled).{{< /markdown >}} + | ++ {{< markdown >}}Background.{{< /markdown >}} + | +
+
+
+ #eee |
+
+
+
+ #333 |
+
+
+
+
+
+ |
+
| + {{< markdown >}}Foreground.{{< /markdown >}} + | +
+
+
+ #666 |
+
+
+
+ #999 |
+
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Body tertiary** - Use the tertiary `color` and `bg` options to have a body secondary less-emphasized rendering.{{< /markdown >}} + | ++ {{< markdown >}}Background.{{< /markdown >}} + | +
+
+
+ #fafafa |
+
+
+
+ #000 |
+
+
+
+
+
+ |
+
| + {{< markdown >}}Foreground.{{< /markdown >}} + | +
+
+
+ #ccc |
+
+
+
+ #999 |
+
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Emphasis** - For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} + | +
+
+
+ #000 |
+
+
+
+ #fff |
+
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Border** - Use the default border for clickable component borders and the subtle variant for everything else.{{< /markdown >}} + | ++ {{< markdown >}}Default.{{< /markdown >}} + | +
+
+
+ #000 |
+
+
+
+ #fff |
+
+
+
+
+ |
+
| + {{< markdown >}}Subtle.{{< /markdown >}} + | +
+
+
+ #ccc |
+
+
+
+ #666 |
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Disabled** - For disabled state.{{< /markdown >}} + | +
+
+
+ #ccc |
+
+
+
+ #666 |
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Highlight** - Use to highlight some components.{{< /markdown >}} + | ++ {{< markdown >}}Background.{{< /markdown >}} + | +
+
+
+ #000 |
+
+
+
+ #fff |
+
+
+
+
+ |
+
| + {{< markdown >}}Foreground.{{< /markdown >}} + | +
+
+
+ #fff |
+
+
+
+ #000 |
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Tertiary active** - Use for active components often accompanied to an orange active bar.{{< /markdown >}} + | ++ {{< markdown >}}Background.{{< /markdown >}} + | +
+
+
+ #ddd |
+
+
+
+ #666 |
+
+
+
+
+ |
+
| + {{< markdown >}}**Focus visible** - Use `outer` for the focus outline. Use `inner` for the focus box-shadow.{{< /markdown >}} + | ++ {{< markdown >}}Outer.{{< /markdown >}} + | +
+
+
+ #000 |
+
+
+
+ #fff |
+
+
+
+
+ |
+
| + {{< markdown >}}Inner.{{< /markdown >}} + | +
+
+
+ #fff |
+
+
+
+ #000 |
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Link** - Use the default `color` for a link and the hover variant for a link hover state.{{< /markdown >}} + | ++ {{< markdown >}}Default.{{< /markdown >}} + | +
+
+
+ #000 |
+
+
+
+ #fff |
+
+
+
+
+
+ |
+
| + {{< markdown >}}Hover.{{< /markdown >}} + | +
+
+
+ #f16e00 |
+
+
+
+ #ff7900 |
+
+
+
+
+
+ |
+ |
| + {{< markdown >}}**Code** - For code color text.{{< /markdown >}} + | +
+
+
+ #666 |
+
+
+
+ #999 |
+
+
+
+
+ |
+ |
.text-{{ .name }}
+.text-{{ .name }}-emphasis
+{{- end -}} +{{< /colors.inline >}} + +.text-body
+.text-body-emphasis
+.text-body-secondary
+.text-body-tertiary
+ +.text-black
+.text-white
+.text-black-50
+.text-white-50
+{{< /example >}} + +{{< callout warning >}} +`.text-black-50` and `.text-white-50` are deprecated as of Bootstrap v5.1.0. They'll be removed in Bootstrap v6.0.0. +{{< /callout >}} +{{< /bootstrap-compatibility >}} + ### On icons The following color utilities are meant to be used only with icons and not with text. @@ -100,54 +125,6 @@ Here are [the normal contexts of use of these text color utilities](https://unif | `.text-status-negative` | Use to communicate something negative. It can be a destructive action, an error state, or a negative feedback. | {{< /bs-table >}} - - - - ## Specificity diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml index 991e654e1d..1dcaa890f3 100644 --- a/site/data/theme-colors.yml +++ b/site/data/theme-colors.yml @@ -18,7 +18,7 @@ hex: "#ffcc00" dark_hex: "#ffcc00" description: "Warning — Theme color used for non-destructive warning messages." - contrast_color: dark + contrast_color: black - name: info hex: "#4170d8" dark_hex: "#6699ff" @@ -27,9 +27,7 @@ hex: "#ccc" dark_hex: "#ccc" description: "Light — Additional theme option." - contrast_color: dark - name: dark hex: "#000" dark_hex: "#000" description: "Dark — Additional theme option." - contrast_color: white diff --git a/site/layouts/shortcodes/bootstrap-compatibility.html b/site/layouts/shortcodes/bootstrap-compatibility.html index ec7e93abe0..b2f71f0473 100644 --- a/site/layouts/shortcodes/bootstrap-compatibility.html +++ b/site/layouts/shortcodes/bootstrap-compatibility.html @@ -1,6 +1,6 @@ {{- $markdown := .Get 0 | default true -}} -$enable-bootstrap-compatibility: true