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

[jaydeep-pipaliya]

Summary

Fixes the color rendering failure when shadcn init generates OKLCH color variables in index.css but wraps them with hsl() in tailwind.config.js.

Root cause: buildTailwindThemeColorsFromCssVars() unconditionally wraps all CSS variable references with hsl() (e.g., hsl(var(--primary))). Since CLI 2.3.0 generates OKLCH values like oklch(0.205 0 0) in CSS variables, the hsl() wrapper tries to interpret OKLCH as HSL, causing colors to fail.

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

Before:

// tailwind.config.js (broken)
colors: { primary: { DEFAULT: 'hsl(var(--primary))' } }
// index.css: --primary: oklch(0.205 0 0);
// Result: hsl(oklch(0.205 0 0)) → invalid

After:

// tailwind.config.js (fixed)
colors: { primary: { DEFAULT: 'var(--primary)' } }
// index.css: --primary: oklch(0.205 0 0);
// Result: oklch(0.205 0 0) → correct

Fixes #10254

Test plan

• Run npx shadcn@latest init in a fresh project
• Verify tailwind.config.js uses var(--name) when CSS vars contain OKLCH values
• Verify tailwind.config.js still uses hsl(var(--name)) for HSL-based themes
• Verify theme colors render correctly in both OKLCH and HSL configurations
• Run existing tests: pnpm test

[vercel]

@jaydeep-pipaliya is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[shadcn]

Can you add a test?

[jaydeep-pipaliya]

Added tests in the latest commit covering all four cases:

• OKLCH values → uses var(--name)
• RGB values → uses var(--name)
• Hex values → uses var(--name)
• HSL values (existing behavior) → still uses hsl(var(--name))

All 1235 tests pass.