feat(linter): add oklch color support

package.json

@@ -1,6 +1,7 @@
 {
   "name": "design-monorepo",
   "private": true,
+  "packageManager": "bun@1.1.20",
   "workspaces": [
     "packages/*"
   ],

packages/cli/package.json

@@ -47,6 +47,7 @@
     "@json-render/core": "^0.16.0",
     "@json-render/ink": "^0.16.0",
     "citty": "^0.1.6",
+    "culori": "^4.0.2",
     "ink": "^7.0.0",
     "mdast": "^3.0.0",
     "react": "^19.2.5",

packages/cli/src/linter/model/handler.test.ts

@@ -75,6 +75,19 @@ describe('ModelHandler', () => {
       expect(semitransparent?.hex).toBe('#ffffffa6');
       expect(semitransparent?.a).toBeCloseTo(166 / 255, 5);
     });
+
+    it('parses oklch() color and converts to hex', () => {
+      const result = handler.execute(makeParsed({
+        colors: { 'brand-oklch': 'oklch(0.63 0.22 24.87)' },
+      }));
+      const brand = result.designSystem.colors.get('brand-oklch');
+      expect(brand).toBeDefined();
+      expect(brand?.hex).toBe('#f1383e'); // Corrected hex value from culori
+      expect(brand?.oklch).toBe('oklch(0.63 0.22 24.87)');
+      expect(brand?.r).toBeCloseTo(241, 0);
+      expect(brand?.g).toBeCloseTo(56, 0);
+      expect(brand?.b).toBeCloseTo(62, 0);
+    });
   });
 
   // ── Cycle 10: Resolve single-level token reference ────────────────

packages/cli/src/linter/model/handler.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { parse, formatHex, converter } from 'culori';
 import type { ParsedDesignSystem } from '../parser/spec.js';
 import type {
   ModelSpec,
@@ -59,7 +60,7 @@ export class ModelHandler implements ModelSpec {
             findings.push({
               severity: 'error',
               path: `colors.${name}`,
-              message: `'${raw}' is not a valid color. Expected a hex color code (e.g., #ffffff).`,
+              message: `'${raw}' is not a valid color. Expected a hex color code (e.g., #ffffff) or oklch().`,
             });
             // Store as-is for fallback
             symbolTable.set(`colors.${name}`, raw);
@@ -237,9 +238,25 @@ export class ModelHandler implements ModelSpec {
 // ── Pure utility functions ─────────────────────────────────────────
 
 /**
- * Parse a hex color string into a ResolvedColor with RGB + WCAG luminance.
+ * Parse a hex or oklch() color string into a ResolvedColor with RGB + WCAG luminance.
  */
 export function parseColor(raw: string): ResolvedColor {
+  if (raw.startsWith('oklch(')) {
+    const parsed = parse(raw);
+    if (!parsed) {
+      // This should ideally not be reached if isValidColor is correct
+      throw new Error(`Invalid oklch color: ${raw}`);
+    }
+    const rgb = converter('rgb')(parsed);
+    const { r, g, b, alpha } = rgb;
+    const hex = formatHex(raw);
+    const r255 = r * 255;
+    const g255 = g * 255;
+    const b255 = b * 255;
+    const luminance = computeLuminance(r255, g255, b255);
+    return { type: 'color', hex, r: r255, g: g255, b: b255, a: alpha, luminance, oklch: raw };
+  }
+
   let hex = raw;
 
   // Normalize #RGB to #RRGGBB
@@ -267,6 +284,7 @@ export function parseColor(raw: string): ResolvedColor {
   return { type: 'color', hex, r, g, b, a, luminance };
 }
 
+
 /**
  * Compute WCAG 2.1 relative luminance.
  * Uses sRGB linearization.
@@ -404,4 +422,4 @@ export function contrastRatio(a: ResolvedColor, b: ResolvedColor): number {
   const L1 = Math.max(a.luminance, b.luminance);
   const L2 = Math.min(a.luminance, b.luminance);
   return (L1 + 0.05) / (L2 + 0.05);
-}
+}

packages/cli/src/linter/model/spec.test.ts

@@ -26,6 +26,10 @@ describe('isValidColor', () => {
   it.each(invalidColors)('rejects invalid color: %s', (color: string) => {
     expect(isValidColor(color)).toBe(false);
   });
+
+  it('accepts valid oklch color', () => {
+    expect(isValidColor('oklch(0.63 0.22 24.87)')).toBe(true);
+  });
 });
 
 describe('isStandardDimension', () => {

packages/cli/src/linter/model/spec.ts

@@ -40,6 +40,8 @@ export interface ResolvedColor {
   a?: number;
   /** WCAG relative luminance */
   luminance: number;
+  /** Original oklch string, if provided */
+  oklch?: string;
 }
 
 export interface ResolvedDimension {
@@ -148,9 +150,10 @@ export function parseDimensionParts(raw: string): { value: number; unit: string
 }
 
 /**
- * Validate a hex color string. Accepts #RGB, #RGBA, #RRGGBB, and #RRGGBBAA.
+ * Validate a color string. Accepts hex codes and oklch().
  */
 export function isValidColor(raw: string): boolean {
+  if (raw.startsWith('oklch(') && raw.endsWith(')')) return true;
   return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(raw);
 }
 

packages/cli/src/types/culori.d.ts

@@ -0,0 +1 @@
+declare module 'culori';