Add tests for OKLAB and OKLCH color format support

Adds comprehensive test coverage to verify the extension properly detects and handles modern CSS color formats (oklab/oklch) including alpha channel support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: vunguyentuan

packages/css-variables-language-server/src/tests/fixtures/oklab-oklch-colors/main.css

@@ -0,0 +1,33 @@
+:root {
+  /* OKLAB colors */
+  --oklab-red: oklab(0.628 0.225 0.126);
+  --oklab-green: oklab(0.519 -0.14 0.108);
+  --oklab-blue: oklab(0.452 -0.032 -0.312);
+  --oklab-with-alpha: oklab(0.628 0.225 0.126 / 0.5);
+
+  /* OKLCH colors */
+  --oklch-red: oklch(0.628 0.258 29.2);
+  --oklch-green: oklch(0.519 0.177 142.5);
+  --oklch-blue: oklch(0.452 0.313 264.1);
+  --oklch-with-alpha: oklch(0.628 0.258 29.2 / 0.8);
+
+  /* Non-color values for comparison */
+  --main-bg-color: brown;
+  --h1: 26px;
+  --h2: 22px;
+  --h3: 18px;
+  --text-base: 16px;
+  --carousel-bg: var(--main-bg-color);
+}
+
+.oklab-example {
+  color: var(--oklab-red);
+  background-color: var(--oklab-green);
+  border-color: var(--oklab-blue);
+}
+
+.oklch-example {
+  color: var(--oklch-red);
+  background-color: var(--oklch-green);
+  border-color: var(--oklch-blue);
+}

packages/css-variables-language-server/src/tests/unit-tests/CSSVariableManager.test.ts

@@ -59,4 +59,53 @@ describe('CSS Variable Manager', () => {
       expect(allVars.get('--slate-50').symbol.value).toEqual('#f8fafc');
     });
   });
+
+  test('can parse and detect OKLAB and OKLCH colors', async () => {
+    const cssManager = new CSSVariableManager();
+
+    await cssManager.parseAndSyncVariables([
+      path.join(__dirname, '../fixtures/oklab-oklch-colors'),
+    ]);
+
+    const allVars = cssManager.getAll();
+
+    // Test OKLAB colors
+    const oklabRed = allVars.get('--oklab-red');
+    expect(oklabRed.symbol.value).toEqual('oklab(0.628 0.225 0.126)');
+    expect(oklabRed.color).toBeDefined();
+
+    const oklabGreen = allVars.get('--oklab-green');
+    expect(oklabGreen.symbol.value).toEqual('oklab(0.519 -0.14 0.108)');
+    expect(oklabGreen.color).toBeDefined();
+
+    const oklabBlue = allVars.get('--oklab-blue');
+    expect(oklabBlue.symbol.value).toEqual('oklab(0.452 -0.032 -0.312)');
+    expect(oklabBlue.color).toBeDefined();
+
+    const oklabWithAlpha = allVars.get('--oklab-with-alpha');
+    expect(oklabWithAlpha.symbol.value).toEqual('oklab(0.628 0.225 0.126 / 0.5)');
+    expect(oklabWithAlpha.color).toBeDefined();
+
+    // Test OKLCH colors
+    const oklchRed = allVars.get('--oklch-red');
+    expect(oklchRed.symbol.value).toEqual('oklch(0.628 0.258 29.2)');
+    expect(oklchRed.color).toBeDefined();
+
+    const oklchGreen = allVars.get('--oklch-green');
+    expect(oklchGreen.symbol.value).toEqual('oklch(0.519 0.177 142.5)');
+    expect(oklchGreen.color).toBeDefined();
+
+    const oklchBlue = allVars.get('--oklch-blue');
+    expect(oklchBlue.symbol.value).toEqual('oklch(0.452 0.313 264.1)');
+    expect(oklchBlue.color).toBeDefined();
+
+    const oklchWithAlpha = allVars.get('--oklch-with-alpha');
+    expect(oklchWithAlpha.symbol.value).toEqual('oklch(0.628 0.258 29.2 / 0.8)');
+    expect(oklchWithAlpha.color).toBeDefined();
+
+    // Verify non-color variables don't have color property
+    const h1Var = allVars.get('--h1');
+    expect(h1Var.symbol.value).toEqual('26px');
+    expect(h1Var.color).toBeUndefined();
+  });
 });