From e7af9b5238448eadc29a93f56fd93e6f9871307d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 16 Jan 2023 15:50:08 -0800 Subject: [PATCH 1/2] Add docs callout for utilities that don't respond to color modes --- site/content/docs/5.3/utilities/background.md | 4 ++++ site/content/docs/5.3/utilities/borders.md | 4 ++++ site/content/docs/5.3/utilities/colors.md | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index dad71ec372a7..9dafc488b073 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -10,6 +10,10 @@ toc: true Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}). +{{< callout info >}} +Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, howver, any `.bg-*-subtle` utility will. This will be resolved in v6. +{{< /callout >}} + {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md index 50df793f2e44..a59f7a7e7d76 100644 --- a/site/content/docs/5.3/utilities/borders.md +++ b/site/content/docs/5.3/utilities/borders.md @@ -36,6 +36,10 @@ Or remove borders: ## Color +{{< callout info >}} +Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, howver, any `.border-*-subtle` utility will. This will be resolved in v6. +{{< /callout >}} + Change the border color using utilities built on our theme colors. {{< example class="bd-example-border-utils" >}} diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md index 4b1647242c08..ab2fe96bd694 100644 --- a/site/content/docs/5.3/utilities/colors.md +++ b/site/content/docs/5.3/utilities/colors.md @@ -10,6 +10,10 @@ toc: true 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, howver, any `.text-*-emphasis` utility will. This will be resolved in v6. +{{< /callout >}} + {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} From 9c92d65328f2b27858763e69111f24ca96c44e4b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 16 Jan 2023 15:51:10 -0800 Subject: [PATCH 2/2] Typo --- site/content/docs/5.3/utilities/background.md | 2 +- site/content/docs/5.3/utilities/borders.md | 2 +- site/content/docs/5.3/utilities/colors.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index 9dafc488b073..aa9d2417615e 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -11,7 +11,7 @@ toc: true Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}). {{< callout info >}} -Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, howver, any `.bg-*-subtle` utility will. This will be resolved in v6. +Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6. {{< /callout >}} {{< example >}} diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md index a59f7a7e7d76..ad244c16fec9 100644 --- a/site/content/docs/5.3/utilities/borders.md +++ b/site/content/docs/5.3/utilities/borders.md @@ -37,7 +37,7 @@ Or remove borders: ## Color {{< callout info >}} -Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, howver, any `.border-*-subtle` utility will. This will be resolved in v6. +Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6. {{< /callout >}} Change the border color using utilities built on our theme colors. diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md index ab2fe96bd694..4f7ea8df2e56 100644 --- a/site/content/docs/5.3/utilities/colors.md +++ b/site/content/docs/5.3/utilities/colors.md @@ -11,7 +11,7 @@ toc: true 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, howver, any `.text-*-emphasis` utility will. This will be resolved in v6. +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 >}}