feat(shadcn): add support for color vars (#8459)

* feat(shadcn): add support for color vars

* chore: add changeset

.changeset/hot-feet-beam.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+add support for color as var

packages/shadcn/src/utils/updaters/update-css-vars.ts

@@ -897,6 +897,7 @@ export function isColorValue(value: string) {
     value.startsWith("hsl") ||
     value.startsWith("rgb") ||
     value.startsWith("#") ||
-    value.startsWith("oklch")
+    value.startsWith("oklch") ||
+    value.startsWith("var(--color-")
   )
 }

packages/shadcn/test/utils/updaters/update-css-vars.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, test } from "vitest"
 
 import {
+  isColorValue,
   isLocalHSLValue,
   transformCssVars,
 } from "../../../src/utils/updaters/update-css-vars"
@@ -1338,6 +1339,62 @@ describe("transformCssVarsV4", () => {
               "
     `)
   })
+
+  test("should handle var(--color-*) references as colors", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {
+          light: {
+            background: "var(--color-background)",
+            foreground: "var(--color-foreground)",
+            primary: "var(--color-blue-500)",
+            spacing: "var(--spacing-md)",
+          },
+          dark: {
+            background: "var(--color-background-dark)",
+            foreground: "var(--color-foreground-dark)",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      :root {
+        --background: var(--color-background);
+        --foreground: var(--color-foreground);
+        --primary: var(--color-blue-500);
+        --spacing: var(--spacing-md);
+      }
+
+      .dark {
+        --background: var(--color-background-dark);
+        --foreground: var(--color-foreground-dark);
+      }
+
+      @theme inline {
+        --color-background: var(--background);
+        --color-foreground: var(--foreground);
+        --color-primary: var(--primary);
+        --spacing: var(--spacing);
+      }
+
+      @layer base {
+        * {
+          @apply border-border outline-ring/50;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
 })
 
 describe("isLocalHSLValue", () => {
@@ -1351,3 +1408,20 @@ describe("isLocalHSLValue", () => {
     expect(isLocalHSLValue(value)).toBe(expected)
   })
 })
+
+describe("isColorValue", () => {
+  test.each([
+    ["hsl(0 0% 100%)", true],
+    ["rgb(255 255 255)", true],
+    ["#ffffff", true],
+    ["oklch(0.5 0.2 180)", true],
+    ["var(--color-background)", true],
+    ["var(--color-blue-500)", true],
+    ["var(--radius)", false],
+    ["var(--spacing)", false],
+    ["0.5rem", false],
+    ["16px", false],
+  ])("%s -> %s", (value, expected) => {
+    expect(isColorValue(value)).toBe(expected)
+  })
+})