Add `.fg-reset` text utility (#42495)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 1c875e1858a132751d6eb1612352074c2777e602..be3e10c932de2501e0859a5f95873922cf3c40ad 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -717,7 +717,10 @@ $utilities: map.merge(
         "color": var(--fg)
       ),
       class: fg,
-      values: map.merge(theme-color-refs("fg"), theme-token-refs($theme-fgs, "fg")),
+      values: map.merge(
+        map.merge(theme-color-refs("fg"), theme-token-refs($theme-fgs, "fg")),
+        (reset: inherit)
+      ),
     ),
     "fg-emphasis": (
       property: (

diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx
index 41e3c5103a48f1b976440697e3580b1e29b327da..6bb2725323ddb9bb4786cfe89f99cd373a319635 100644 (file)
--- a/site/src/content/docs/guides/migration.mdx
+++ b/site/src/content/docs/guides/migration.mdx
@@ -359,7 +359,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 - **Negative margins limited.** Negative spacers are reduced to only `-1` (`-0.25rem`) and `-2` (`-0.5rem`), and only applied to `margin-inline-start` (`.ms-n1`, `.ms-n2`) and `margin-inline-end` (`.me--1`, `.me--2`). The v5 full negative margin utilities across all sides have been removed.
 - **Spacing and border utilities now use CSS logical properties.** `margin-top` → `margin-block-start`, `margin-right` → `margin-inline-end`, `padding-left` → `padding-inline-start`, `border-right` → `border-inline-end`, etc. Class names (`.mt-*`, `.me-*`, `.ps-*`, `.border-end`) remain the same, but the underlying CSS properties are now logical, improving RTL and writing-mode support.
 - **Text wrap additions.** Added `.text-balance` and `.text-pretty` values to the text-wrap utility.
-- **Color utility renames.** `.text-*` color utilities have been replaced by `.fg-*` (foreground) utilities. New `.fg-emphasis-*` and `.fg-contrast-*` variants. Background utilities now include `.bg-subtle-*` and `.bg-muted-*` in addition to `.bg-*`. Added `.fg-bg` and `.bg-fg` cross-reference utilities; removed `.fg-inherit` and `.bg-inherit`. Renamed `.bg-opacity-*` to `.bg-*`.
+- **Color utility renames.** `.text-*` color utilities have been replaced by `.fg-*` (foreground) utilities. New `.fg-emphasis-*` and `.fg-contrast-*` variants. Background utilities now include `.bg-subtle-*` and `.bg-muted-*` in addition to `.bg-*`. Added `.fg-bg` and `.bg-fg` cross-reference utilities; removed `.fg-inherit` and `.bg-inherit`. Renamed `.bg-opacity-*` to `.bg-*`. Renamed `.text-reset` to `.fg-reset`.
 - **Display utilities:** added `flow-root` and `contents` options.
 - **Sizing utilities:**
   - Renamed `.mh-*`/`.mw-*` to `.max-h-*`/`.max-w-*`

diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx
index 429f9b070cd1a89dcfe0a37e29d4b5af273635cc..5596ba3c13d6a60b11d57f29cf70fc5110325923 100644 (file)
--- a/site/src/content/docs/utilities/colors.mdx
+++ b/site/src/content/docs/utilities/colors.mdx
@@ -93,11 +93,12 @@ These even mix with the opacity utilities.
 
 ## Reset color
 
-Reset a text or link’s color with `.text-reset`, so that it inherits the color from its parent.
+Reset a text or link’s color with `.fg-reset`, so that it inherits the color from its parent.
 
-<Example code={`<p class="fg-3">
-    Lighter body text with a <a href="#" class="text-reset">reset link</a>.
-  </p>`} />
+<Example code={`<p class="fg-danger">
+    Danger text with a <a href="#">normal link</a> and a <a href="#" class="fg-reset">reset link</a>.
+  </p>
+  `} />
 
 ## Specificity