Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paanSinghCoder merged 3 commits into from
May 4, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf3f5d8
chore(plugin-vscode): mirror token data from HEX to OKLCH
paanSinghCoder Apr 28, 2026
8c01260
chore(plugin-vscode): swap color→culori, emit oklch() on picker writes
paanSinghCoder Apr 28, 2026
2480ed0
chore(plugin-vscode): swap culori for color-convert
paanSinghCoder May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/plugin-vscode/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -62,14 +62,13 @@
},
"dependencies": {
"@raystack/apsara": "^0.56.6",
"color": "^5.0.0",
"color-convert": "^3.1.3",
"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",
Expand Down
95 changes: 57 additions & 38 deletions packages/plugin-vscode/src/lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,27 @@
import Color from 'color';
import convertImport from 'color-convert';
import type { Color as VSCodeColorType } from 'vscode-languageserver';
import tokens from '../tokens';

export const TOKEN_PREFIX = 'rs';

// color-convert@^3.1.3 ships oklch at runtime but its .d.ts omits it; shim until upstream catches up.
type RawTriple = (input: [number, number, number]) => [number, number, number];
const convert = convertImport as typeof convertImport & {
rgb: { oklch: { raw: RawTriple } };
oklch: { rgb: { raw: RawTriple } };
};

// Tokens are always written as oklch(L C H) or oklch(L C H / A).
const OKLCH_REGEX =
/^\s*oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)\s*$/;
Comment on lines +15 to +16
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Tighten the OKLCH numeric matcher.

[\d.]+ accepts malformed components like 0..5 or ., and the later parseFloat call will truncate or return NaN instead of failing closed. That breaks the null-on-invalid-input contract here.

Proposed fix 
+const OKLCH_NUMBER = String.raw`(?:\d+\.?\d*|\.\d+)`;
 const OKLCH_REGEX =
-  /^\s*oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)\s*$/;
+  new RegExp(
+    String.raw`^\s*oklch\(\s*(${OKLCH_NUMBER})\s+(${OKLCH_NUMBER})\s+(${OKLCH_NUMBER})(?:\s*\/\s*(${OKLCH_NUMBER}))?\s*\)\s*$`
+  );
…
   const l = Number.parseFloat(lStr) * CSS_TO_CC;
   const c = Number.parseFloat(cStr) * CSS_TO_CC;
   const h = Number.parseFloat(hStr);
   const alpha = aStr === undefined ? 1 : Number.parseFloat(aStr);
+  if (![l, c, h, alpha].every(Number.isFinite)) {
+    return null;
+  }

Also applies to: 73-79

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/plugin-vscode/src/lib/utils.ts` around lines 15 - 16, The
OKLCH_REGEX (and the similar regexes around lines 73-79) use [\d.]+ which
permits malformed numbers like "0..5" or ".", so update those regexes to use a
strict numeric token (e.g., match either an integer or a decimal with at most
one dot and optional leading/trailing digits such as (?:\d+(\.\d+)?|\.\d+)) for
each numeric capture group; then keep the existing parseFloat usage so invalid
strings no longer reach parseFloat and the function can correctly return null on
invalid input.


// color-convert uses L 0-100 and C in the 0-100 range that matches CSS × 100.
const CSS_TO_CC = 100;

const round = (n: number, p: number) => Number.parseFloat(n.toFixed(p));

const clamp01 = (v: number) => Math.max(0, Math.min(1, v));

/**
* Get the token name for a given token group and name
* @param tokenGroupName - The name of the token group
Expand Down Expand Up @@ -41,52 +59,53 @@ 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 an oklch() token value into VS Code's Color shape.
* Tokens are the only callers; non-oklch inputs (other than the
* transparent/currentColor/inherit keywords) return null.
*/
export const colorToVSCodeColor = (color: string): VSCodeColorType | 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();
return {
red: rgb.red() / 255,
green: rgb.green() / 255,
blue: rgb.blue() / 255,
alpha: rgb.alpha()
};
} catch {
// If the color library can't parse the value, return null
if (color === 'transparent') {
return { red: 0, green: 0, blue: 0, alpha: 0 };
}
if (color === 'currentColor' || color === 'inherit') {
return null;
}
const match = OKLCH_REGEX.exec(color);
if (!match) return null;
const [, lStr, cStr, hStr, aStr] = match;
const l = Number.parseFloat(lStr) * CSS_TO_CC;
const c = Number.parseFloat(cStr) * CSS_TO_CC;
const h = Number.parseFloat(hStr);
const alpha = aStr === undefined ? 1 : Number.parseFloat(aStr);
const [r, g, b] = convert.oklch.rgb.raw([l, c, h]);
return {
red: clamp01(r / 255),
green: clamp01(g / 255),
blue: clamp01(b / 255),
alpha
};
};

/**
* 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,
* matching the design system's token format 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 [l, c, h] = convert.rgb.oklch.raw([
color.red * 255,
color.green * 255,
color.blue * 255
]);
const L = round(l / CSS_TO_CC, 4);
const C = round(c / CSS_TO_CC, 4);
// color-convert returns an arbitrary hue for achromatic colors; pin to 0.
const H = C === 0 ? 0 : round(h, 2);
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
Expand Down
48 changes: 24 additions & 24 deletions packages/plugin-vscode/src/tokens/color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
10 changes: 5 additions & 5 deletions packages/plugin-vscode/src/tokens/effects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
26 changes: 13 additions & 13 deletions packages/plugin-vscode/src/tokens/primitives/accent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Loading
Loading