Update hue-palette extension (#16757)

* Update hue-palette extension * Update CHANGELOG.md and optimise images --------- Co-authored-by: raycastbot <[email protected]>
raycast · Feb 2, 2025 · 3ecb95c · 3ecb95c
1 parent 92673f4
commit 3ecb95c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/extensions/hue-palette/CHANGELOG.md b/extensions/hue-palette/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Hue Changelog
 
+## [Feature] - 2025-02-02
+
+- Added the action to copy the new Tailwind CSS version 4.0 configuration code.
+
 ## [Feature] - 2025-01-19
 
 - Added the `Search Hue Palette History` feature to track the history of generated Hue palette.

diff --git a/extensions/hue-palette/src/components/hue-detail.tsx b/extensions/hue-palette/src/components/hue-detail.tsx
@@ -15,6 +15,17 @@ export default function HueDetail({
   tailwind_colors_name,
   tailwind_colors,
 }: HueDetailProps) {
+  function convertToV4(colors = {}) {
+    let cssVariables = "@theme {\n";
+    for (const [colorLevel, hex] of Object.entries(colors)) {
+      cssVariables += ` --color-${tailwind_colors_name}-${colorLevel}: ${hex};\n`;
+    }
+    cssVariables += "}";
+    return cssVariables;
+  }
+  const tailwindColorsV3 = tailwind_colors;
+  const tailwindColorsV4 = convertToV4(tailwindColorsV3);
+
   return (
     <Grid columns={5} filtering={false} isLoading={isLoading}>
       <Grid.Section title={name}>
@@ -31,15 +42,20 @@ export default function HueDetail({
             actions={
               <ActionPanel>
                 <Action.CopyToClipboard
-                  title="Copy Hue Color to Clipboard"
+                  title="Copy Hue Color"
                   content={color}
                 />
                 <Action.CopyToClipboard
-                  title="Copy Tailwind Hue to Clipboard"
+                  title="Copy Hue Tailwind V4 Config Code"
+                  content={tailwindColorsV4}
+                />
+                <Action.CopyToClipboard
+                  title="Copy Hue Tailwind V3 Config Code"
                   content={
                     `${tailwind_colors_name}:` +
-                    JSON.stringify(tailwind_colors, null, 4)
+                    JSON.stringify(tailwindColorsV3, null, 2)
                   }
+                  shortcut={{ modifiers: ["cmd"], key: "t" }}
                 />
                 {isGenerator ? (
                   <Action.OpenInBrowser