From 39a38eeb8cece5cec7c6211f0ae6cd79901b8071 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Mon, 12 Jan 2026 20:15:38 +0100
Subject: [PATCH] Docs: use `fg-*` text color utilities instead of `text-*` in
 Spinner page

---
 site/src/content/docs/components/spinner.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/content/docs/components/spinner.mdx b/site/src/content/docs/components/spinner.mdx
index c3522c2f6b..d0d300ec5e 100644
--- a/site/src/content/docs/components/spinner.mdx
+++ b/site/src/content/docs/components/spinner.mdx
@@ -28,7 +28,7 @@ Use the border spinners for a lightweight loading indicator.
 
 The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner.
 
-<Example code={getData('theme-colors').map((themeColor) => `<div class="spinner-border text-${themeColor.name}" role="status">
+<Example code={getData('theme-colors').map((themeColor) => `<div class="spinner-border fg-${themeColor.name}" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>`)} />
 
@@ -46,7 +46,7 @@ If you don’t fancy a border spinner, switch to the grow spinner. While it does
 
 Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in blue, along with the supported variants.
 
-<Example code={getData('theme-colors').map((themeColor) => `<div class="spinner-grow text-${themeColor.name}" role="status">
+<Example code={getData('theme-colors').map((themeColor) => `<div class="spinner-grow fg-${themeColor.name}" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>`)} />
 
-- 
2.47.3