Docs: use `fg-*` text color utilities instead of `text-*` in Spinner page

diff --git a/site/src/content/docs/components/spinner.mdx b/site/src/content/docs/components/spinner.mdx
index c3522c2f6b6de24143451d11957c334c8283b775..d0d300ec5e095fbca3276ce75cf914711d1abef3 100644 (file)
--- 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>`)} />