From 430dfde0c061333b87d01a0c9cbc136831d1f712 Mon Sep 17 00:00:00 2001
From: Bill Criswell <bill.criswell@gmail.com>
Date: Thu, 27 Mar 2025 20:47:03 -0400
Subject: [PATCH 1/2] document specific colors

---
 src/components/content.tsx | 29 +++++++++++++++++++++++++++--
 src/docs/box-shadow.mdx    |  6 +++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/content.tsx b/src/components/content.tsx
index 2f0478fab..302d5a548 100644
--- a/src/components/content.tsx
+++ b/src/components/content.tsx
@@ -12,6 +12,19 @@ function startsWithVowel(string: string) {
   return ["a", "e", "i", "o", "u"].includes(string[0]);
 }
 
+function utilityToThemeKeyColorPrefix(utility: string) {
+  switch (utility) {
+    case "decoration":
+      return "text-decoration";
+    case "bg":
+      return "background";
+    case "shadow":
+      return "box-shadow";
+    default:
+      return utility;
+  }
+}
+
 function htmlSnippet({
   elementName,
   attributes,
@@ -444,22 +457,34 @@ export function CustomizingYourThemeColors({
   utilities,
   element = "div",
   elementAttributes = {},
+  themeKey = "color",
+  name = "color",
 }: {
   utility: string;
   utilities?: Array<string>;
   element?: string;
   elementAttributes?: Record<string, string>;
+  name?: string;
+  themeKey?: string;
 }) {
+  const primaryUtility = utility || utilities![0];
+
   return (
     <CustomizingYourTheme
-      themeKey="color"
-      name="color"
+      themeKey={themeKey}
+      name={name}
       utility={utility}
       utilities={utilities}
       customName="regal-blue"
       customValue="#243c5a"
       element={element}
       elementAttributes={elementAttributes}
+      children={
+        <p>
+          You may also specify colors specifically for <code>{primaryUtility}</code> by using{" "}
+          <code>--{utilityToThemeKeyColorPrefix(primaryUtility)}-color-*</code> in your theme.
+        </p>
+      }
     />
   );
 }
diff --git a/src/docs/box-shadow.mdx b/src/docs/box-shadow.mdx
index 9836988a1..0b8f4b400 100644
--- a/src/docs/box-shadow.mdx
+++ b/src/docs/box-shadow.mdx
@@ -458,4 +458,8 @@ Use the `shadow-none`, `inset-shadow-none`,`ring-0`, and `inset-ring-0` utilitie
 
 ### Customizing shadow colors
 
-<CustomizingYourThemeColors utilities={["shadow", "inset-shadow", "ring", "inset-ring"]} />
+<CustomizingYourThemeColors utilities={["shadow", "inset-shadow"]} />
+
+### Customizing ring colors
+
+<CustomizingYourThemeColors utilities={["ring", "inset-ring"]} />

From 894d512482ece3fef55f6c110d9cf81a32a0e048 Mon Sep 17 00:00:00 2001
From: Bill Criswell <bill.criswell@gmail.com>
Date: Thu, 27 Mar 2025 20:51:37 -0400
Subject: [PATCH 2/2] revert unneeded changes

---
 src/components/content.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/content.tsx b/src/components/content.tsx
index 302d5a548..26bb51d74 100644
--- a/src/components/content.tsx
+++ b/src/components/content.tsx
@@ -457,22 +457,18 @@ export function CustomizingYourThemeColors({
   utilities,
   element = "div",
   elementAttributes = {},
-  themeKey = "color",
-  name = "color",
 }: {
   utility: string;
   utilities?: Array<string>;
   element?: string;
   elementAttributes?: Record<string, string>;
-  name?: string;
-  themeKey?: string;
 }) {
   const primaryUtility = utility || utilities![0];
 
   return (
     <CustomizingYourTheme
-      themeKey={themeKey}
-      name={name}
+      themeKey="color"
+      name="color"
       utility={utility}
       utilities={utilities}
       customName="regal-blue"