Add docs callout for utilities that don't respond to color modes

twbs · Jan 17, 2023 · 436de31 · 436de31
1 parent a799f01
commit 436de31
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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") }}