fix: use var() instead of hsl() wrapper when CSS vars contain OKLCH values

buildTailwindThemeColorsFromCssVars() unconditionally wrapped all CSS
variable references with hsl(), but the CLI now generates OKLCH color
values in index.css. This caused a format conflict where
hsl(var(--primary)) tried to interpret oklch(0.205 0 0) as HSL.

Detect whether the CSS variables contain non-HSL values (oklch, rgb,
hex) and reference them directly via var(--name) instead of wrapping
with hsl(). Existing HSL-based themes continue to use hsl(var(--name))
for backward compatibility.

Fixes #10254

Author: jaydeep-pipaliya

packages/shadcn/src/utils/updaters/update-tailwind-config.ts

@@ -506,30 +506,43 @@ export function buildTailwindThemeColorsFromCssVars(
 ) {
   const result: Record<string, any> = {}
 
+  // When CSS variables use oklch(), rgb(), or hex values, reference them
+  // directly via var() instead of wrapping with hsl().
+  const hasNonHSLValues = Object.values(cssVars).some(
+    (value) =>
+      typeof value === "string" &&
+      (value.startsWith("oklch") ||
+        value.startsWith("rgb") ||
+        value.startsWith("#"))
+  )
+
+  const wrapVar = (varName: string) =>
+    hasNonHSLValues ? `var(--${varName})` : `hsl(var(--${varName}))`
+
   for (const key of Object.keys(cssVars)) {
     const parts = key.split("-")
     const colorName = parts[0]
     const subType = parts.slice(1).join("-")
 
     if (subType === "") {
       if (typeof result[colorName] === "object") {
-        result[colorName].DEFAULT = `hsl(var(--${key}))`
+        result[colorName].DEFAULT = wrapVar(key)
       } else {
-        result[colorName] = `hsl(var(--${key}))`
+        result[colorName] = wrapVar(key)
       }
     } else {
       if (typeof result[colorName] !== "object") {
-        result[colorName] = { DEFAULT: `hsl(var(--${colorName}))` }
+        result[colorName] = { DEFAULT: wrapVar(colorName) }
       }
-      result[colorName][subType] = `hsl(var(--${key}))`
+      result[colorName][subType] = wrapVar(key)
     }
   }
 
   // Remove DEFAULT if it's not in the original cssVars
   for (const [colorName, value] of Object.entries(result)) {
     if (
       typeof value === "object" &&
-      value.DEFAULT === `hsl(var(--${colorName}))` &&
+      value.DEFAULT === wrapVar(colorName) &&
       !(colorName in cssVars)
     ) {
       delete value.DEFAULT