chore(plugin-vscode): migrate to OKLCH (color → culori)

packages/plugin-vscode/package.json

@@ -2,7 +2,7 @@
   "name": "apsara-for-vscode",
   "displayName": "Apsara for VSCode",
   "publisher": "Raystack",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": true,
   "description": "VS Code extension for @raystack/apsara",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -62,14 +62,13 @@
   },
   "dependencies": {
     "@raystack/apsara": "^0.56.6",
-    "color": "^5.0.0",
+    "culori": "^4.0.2",
     "vscode-languageclient": "^9.0.1",
     "vscode-languageserver": "^9.0.1",
     "vscode-languageserver-textdocument": "^1.0.12"
   },
   "devDependencies": {
     "@raystack/tools-config": "workspace:*",
-    "@types/color": "^4.2.0",
     "@types/node": "20.x",
     "@types/vscode": "^1.70.0",
     "@vscode/vsce": "^3.5.0",

packages/plugin-vscode/src/lib/utils.ts

@@ -1,9 +1,17 @@
-import Color from 'color';
+import { converter, parse } from 'culori';
 import type { Color as VSCodeColorType } from 'vscode-languageserver';
 import tokens from '../tokens';
 
 export const TOKEN_PREFIX = 'rs';
 
+const toRgb = converter('rgb');
+const toOklch = converter('oklch');
+
+const round = (n: number | undefined, p: number) =>
+  Number.parseFloat((n ?? 0).toFixed(p));
+
+const clamp01 = (v: number | undefined) => Math.max(0, Math.min(1, v ?? 0));
+
 /**
  * Get the token name for a given token group and name
  * @param tokenGroupName - The name of the token group
@@ -41,52 +49,55 @@ export const getTokenValueFromName = (tokenName: string): string | null => {
 };
 
 /**
- * Converts a Color object to VS Code Color format
- * @param color - The color to convert
- * @returns The color in VS Code Color format
+ * Parses a CSS color string (oklch, hex, rgb, etc.) into VS Code's Color shape.
+ * Returns null for non-renderable inputs (currentColor, inherit, parse failure).
  */
 export const colorToVSCodeColor = (color: string): VSCodeColorType | null => {
+  if (color === 'transparent') {
+    return { red: 0, green: 0, blue: 0, alpha: 0 };
+  }
+  if (color === 'currentColor' || color === 'inherit') {
+    return null;
+  }
   try {
-    // Handle transparent values
-    if (color === 'transparent') {
-      return {
-        red: 0,
-        green: 0,
-        blue: 0,
-        alpha: 0
-      };
-    }
-    // handles special CSS values that don't have a specific color
-    if (color === 'currentColor' || color === 'inherit') {
-      return null;
-    }
-
-    const rgb = Color(color).rgb();
+    const parsed = parse(color);
+    if (!parsed) return null;
+    const rgb = toRgb(parsed);
+    if (!rgb) return null;
     return {
-      red: rgb.red() / 255,
-      green: rgb.green() / 255,
-      blue: rgb.blue() / 255,
-      alpha: rgb.alpha()
+      red: clamp01(rgb.r),
+      green: clamp01(rgb.g),
+      blue: clamp01(rgb.b),
+      alpha: rgb.alpha ?? 1
     };
   } catch {
-    // If the color library can't parse the value, return null
     return null;
   }
 };
 
 /**
- * Converts a VS Code Color to a Color object
- * @param color - The VS Code color object to convert
- * @returns The color in hex format
+ * Serializes VS Code's Color (sRGB 0-1 floats) to an oklch() string.
+ * Output format matches the design system convention so picker edits
+ * stay consistent with the rest of the codebase.
  */
 export const VSCodeColorToColor = (color: VSCodeColorType): string => {
-  return Color.rgb(
-    Math.round(color.red * 255),
-    Math.round(color.green * 255),
-    Math.round(color.blue * 255)
-  )
-    .alpha(color.alpha)
-    .hex();
+  const oklch = toOklch({
+    mode: 'rgb',
+    r: color.red,
+    g: color.green,
+    b: color.blue,
+    alpha: color.alpha
+  });
+  if (!oklch) return '';
+
+  const L = round(oklch.l, 4);
+  const C = round(oklch.c, 4);
+  const H = Number.isFinite(oklch.h) ? round(oklch.h, 2) : 0;
+  const body = `${L} ${C} ${H}`;
+  if (color.alpha === undefined || color.alpha === 1) {
+    return `oklch(${body})`;
+  }
+  return `oklch(${body} / ${round(color.alpha, 4)})`;
 };
 
 // Function to get the pattern match and the range around the cursor

packages/plugin-vscode/src/tokens/color.ts

@@ -63,32 +63,32 @@ export default {
   /* Overlay Colors */
   'overlay-base-primary': primitives['overlay-1'],
   /* Black Overlay */
-  'overlay-black-a1': '#0000000D' /* 5% opacity */,
-  'overlay-black-a2': '#0000001A' /* 10% opacity */,
-  'overlay-black-a3': '#00000026' /* 15% opacity */,
-  'overlay-black-a4': '#00000033' /* 20% opacity */,
-  'overlay-black-a5': '#0000004D' /* 30% opacity */,
-  'overlay-black-a6': '#00000066' /* 40% opacity */,
-  'overlay-black-a7': '#00000080' /* 50% opacity */,
-  'overlay-black-a8': '#00000099' /* 60% opacity */,
-  'overlay-black-a9': '#000000B3' /* 70% opacity */,
-  'overlay-black-a10': '#000000CC' /* 80% opacity */,
-  'overlay-black-a11': '#000000E6' /* 90% opacity */,
-  'overlay-black-a12': '#000000F2' /* 95% opacity */,
+  'overlay-black-a1': 'oklch(0 0 0 / 0.051)' /* 5% opacity */,
+  'overlay-black-a2': 'oklch(0 0 0 / 0.102)' /* 10% opacity */,
+  'overlay-black-a3': 'oklch(0 0 0 / 0.149)' /* 15% opacity */,
+  'overlay-black-a4': 'oklch(0 0 0 / 0.2)' /* 20% opacity */,
+  'overlay-black-a5': 'oklch(0 0 0 / 0.302)' /* 30% opacity */,
+  'overlay-black-a6': 'oklch(0 0 0 / 0.4)' /* 40% opacity */,
+  'overlay-black-a7': 'oklch(0 0 0 / 0.502)' /* 50% opacity */,
+  'overlay-black-a8': 'oklch(0 0 0 / 0.6)' /* 60% opacity */,
+  'overlay-black-a9': 'oklch(0 0 0 / 0.702)' /* 70% opacity */,
+  'overlay-black-a10': 'oklch(0 0 0 / 0.8)' /* 80% opacity */,
+  'overlay-black-a11': 'oklch(0 0 0 / 0.902)' /* 90% opacity */,
+  'overlay-black-a12': 'oklch(0 0 0 / 0.949)' /* 95% opacity */,
 
   /* White Overlay */
-  'overlay-white-a1': '#ffffff0D' /* 5% opacity */,
-  'overlay-white-a2': '#ffffff1A' /* 10% opacity */,
-  'overlay-white-a3': '#ffffff26' /* 15% opacity */,
-  'overlay-white-a4': '#ffffff33' /* 20% opacity */,
-  'overlay-white-a5': '#ffffff4D' /* 30% opacity */,
-  'overlay-white-a6': '#ffffff66' /* 40% opacity */,
-  'overlay-white-a7': '#ffffff80' /* 50% opacity */,
-  'overlay-white-a8': '#ffffff99' /* 60% opacity */,
-  'overlay-white-a9': '#ffffffB3' /* 70% opacity */,
-  'overlay-white-a10': '#ffffffCC' /* 80% opacity */,
-  'overlay-white-a11': '#ffffffE6' /* 90% opacity */,
-  'overlay-white-a12': '#ffffffF2' /* 95% opacity */,
+  'overlay-white-a1': 'oklch(1 0 0 / 0.051)' /* 5% opacity */,
+  'overlay-white-a2': 'oklch(1 0 0 / 0.102)' /* 10% opacity */,
+  'overlay-white-a3': 'oklch(1 0 0 / 0.149)' /* 15% opacity */,
+  'overlay-white-a4': 'oklch(1 0 0 / 0.2)' /* 20% opacity */,
+  'overlay-white-a5': 'oklch(1 0 0 / 0.302)' /* 30% opacity */,
+  'overlay-white-a6': 'oklch(1 0 0 / 0.4)' /* 40% opacity */,
+  'overlay-white-a7': 'oklch(1 0 0 / 0.502)' /* 50% opacity */,
+  'overlay-white-a8': 'oklch(1 0 0 / 0.6)' /* 60% opacity */,
+  'overlay-white-a9': 'oklch(1 0 0 / 0.702)' /* 70% opacity */,
+  'overlay-white-a10': 'oklch(1 0 0 / 0.8)' /* 80% opacity */,
+  'overlay-white-a11': 'oklch(1 0 0 / 0.902)' /* 90% opacity */,
+  'overlay-white-a12': 'oklch(1 0 0 / 0.949)' /* 95% opacity */,
 
   /* Additional Background Colors */
   'background-neutral-primary': primitives['neutral-3'],

packages/plugin-vscode/src/tokens/effects.ts

@@ -4,13 +4,13 @@
 export const shadow = {
   /* Shadows */
   feather:
-    '0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 4px 4px -1px rgba(0, 0, 0, 0.02)' /* sm */,
-  soft: '0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)' /* md */,
+    '0px 1px 1px 0px oklch(0 0 0 / 0.06), 0px 4px 4px -1px oklch(0 0 0 / 0.02)' /* sm */,
+  soft: '0px 2px 4px 0px oklch(0 0 0 / 0.04), 0px 1px 2px 0px oklch(0 0 0 / 0.04)' /* md */,
   lifted:
-    '0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 3px 8px 0px rgba(0, 0, 0, 0.07)' /* lg */,
+    '0px 1px 1px 0px oklch(0 0 0 / 0.07), 0px 2px 5px 0px oklch(0 0 0 / 0.07), 0px 3px 8px 0px oklch(0 0 0 / 0.07)' /* lg */,
   floating:
-    '0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 3px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 30px 0px rgba(0, 0, 0, 0.13)' /* xl */,
-  inset: '0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset'
+    '0px 1px 1px 0px oklch(0 0 0 / 0.04), 0px 2px 8px 0px oklch(0 0 0 / 0.04), 0px 3px 17px 0px oklch(0 0 0 / 0.04), 0px 4px 30px 0px oklch(0 0 0 / 0.13)' /* xl */,
+  inset: '0px 1px 1px 0px oklch(0 0 0 / 0.04) inset'
 } as const;
 
 export const blur = {

packages/plugin-vscode/src/tokens/primitives/accent.ts

@@ -3,17 +3,17 @@
 */
 
 export default {
-  'accent-1': '#fdfdfe',
-  'accent-2': '#f7f9ff',
-  'accent-3': '#edf2fe',
-  'accent-4': '#e1e9ff',
-  'accent-5': '#d2deff',
-  'accent-6': '#c1d0ff',
-  'accent-7': '#abbdf9',
-  'accent-8': '#8da4ef',
-  'accent-9': '#3e63dd',
-  'accent-10': '#3358d4',
-  'accent-11': '#3a5bc7',
-  'accent-12': '#1f2d5c',
-  'accent-contrast': '#ffffff'
+  'accent-1': 'oklch(0.9943 0.0013 286.38)',
+  'accent-2': 'oklch(0.9823 0.0083 271.33)',
+  'accent-3': 'oklch(0.9609 0.017 267.79)',
+  'accent-4': 'oklch(0.9346 0.031 269.82)',
+  'accent-5': 'oklch(0.9019 0.0471 269.62)',
+  'accent-6': 'oklch(0.862 0.0675 271.09)',
+  'accent-7': 'oklch(0.8062 0.0875 271.41)',
+  'accent-8': 'oklch(0.7309 0.1123 270.43)',
+  'accent-9': 'oklch(0.5438 0.191 267.01)',
+  'accent-10': 'oklch(0.5106 0.1954 266.58)',
+  'accent-11': 'oklch(0.5092 0.1725 267.17)',
+  'accent-12': 'oklch(0.3126 0.0858 268.6)',
+  'accent-contrast': 'oklch(1 0 0)'
 } as const;