feat(color-picker): migrate to culori and add add OKLCH support#816
feat(color-picker): migrate to culori and add add OKLCH support#816paanSinghCoder wants to merge 2 commits into
Conversation
Replaces the `color` dependency with `culori` so the picker can accept and emit `oklch()` values alongside hex/rgb/hsl. The picker's HSL state shape is unchanged, so sliders and the context contract are untouched. OKLCH input is parsed via culori; OKLCH output is formatted with 4-decimal L/C, 2-decimal H, hue pinned to 0 for achromatic colors. Hex output remains uppercase with alpha-aware width to match the previous behavior. Note: sliders still operate in HSL — OKLCH is an I/O format, not a perceptual editing mode, so OKLCH round-trips are not bit-identical. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR adds OKLCH color mode support to the ColorPicker component. The core change replaces the Sequence Diagram(s)sequenceDiagram
participant Client
participant ColorPickerRoot
participant Utils as utils.ts
participant Culori as culori
Client->>ColorPickerRoot: mount with defaultValue / value / mode
ColorPickerRoot->>Utils: parseColor(value/defaultValue)
Utils->>Culori: parse & convert to internal ColorObject
Culori-->>Utils: ColorObject {h,s,l,alpha}
ColorPickerRoot->>Utils: getColorString(ColorObject, mode)
Utils->>Culori: format to hex/hsl/rgb/oklch
Culori-->>Utils: formatted string
ColorPickerRoot-->>Client: emit onValueChange(formatted string)
Possibly related issues
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/raystack/components/color-picker/utils.ts`:
- Around line 10-12: SUPPORTED_MODES is currently typed as string[] so ModeType
widens to string; change SUPPORTED_MODES to a readonly tuple by appending "as
const" to preserve literal types and make ModeType a union of
'hex'|'hsl'|'rgb'|'oklch'. Update the declaration of SUPPORTED_MODES (and any
related imports if necessary) so ModeType (derived from (typeof
SUPPORTED_MODES)[number]) correctly narrows, which will ensure getColorString
and its switch/default behavior can be type-checked against only valid modes.
- Around line 30-53: formatOklch currently uses round (which returns a Number
via Number.parseFloat(n.toFixed(p))) causing trailing zeros to be dropped and
violating the "4-decimal L/C, 2-decimal H" contract; change the implementation
so the values are formatted as fixed-width decimal strings (use toFixed(p)
directly) and ensure formatOklch concatenates those string results (update the
round helper to return a string or replace calls to round(L/C/H/alpha) in
formatOklch with num.toFixed(p)) so L and C are 4-decimal, H is 2-decimal, and
alpha is 4-decimal when included (refer to formatOklch and the round helper).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c786a0e2-b310-412e-81da-d1764df00178
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
apps/www/src/app/examples/color-picker/page.tsxapps/www/src/content/docs/components/color-picker/demo.tsapps/www/src/content/docs/components/color-picker/index.mdxapps/www/src/content/docs/components/color-picker/props.tspackages/raystack/components/color-picker/__tests__/color-picker.test.tsxpackages/raystack/components/color-picker/color-picker-area.tsxpackages/raystack/components/color-picker/color-picker-input.tsxpackages/raystack/components/color-picker/color-picker-root.tsxpackages/raystack/components/color-picker/utils.tspackages/raystack/package.json
| const round = (n: number, p: number) => Number.parseFloat(n.toFixed(p)); | ||
|
|
||
| /** | ||
| * Serializes a culori-shaped HSL color as oklch(L C H[ / A]). | ||
| * Matches the design system's token format: 4-decimal L/C, 2-decimal H, | ||
| * H pinned to 0 for achromatic colors (culori would emit `none` per CSS | ||
| * Color 4, which is correct but inconsistent with how tokens are written). | ||
| */ | ||
| const formatOklch = (hsl: { | ||
| mode: 'hsl'; | ||
| h: number; | ||
| s: number; | ||
| l: number; | ||
| alpha: number; | ||
| }): string => { | ||
| const oklch = toOklch(hsl); | ||
| if (!oklch) return ''; | ||
| const L = round(oklch.l ?? 0, 4); | ||
| const C = round(oklch.c ?? 0, 4); | ||
| const H = C === 0 || !Number.isFinite(oklch.h) ? 0 : round(oklch.h ?? 0, 2); | ||
| const body = `${L} ${C} ${H}`; | ||
| return hsl.alpha === 1 | ||
| ? `oklch(${body})` | ||
| : `oklch(${body} / ${round(hsl.alpha, 4)})`; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In JavaScript, does Number.parseFloat((0.5).toFixed(4)) preserve trailing zeros in the resulting string representation?
💡 Result:
No, Number.parseFloat((0.5).toFixed(4)) does not preserve trailing zeros in the resulting value because it returns a number type, which does not store formatting information like trailing zeros [1][2]. Here is the breakdown of the process: 1. The.toFixed(4) method is called on the number 0.5. This method returns a string representation of the number, padded with zeros to the specified number of decimal places [3]. In this case, it returns the string "0.5000" [3]. 2. The Number.parseFloat function then takes that string ("0.5000") and parses it into a floating-point number [1][2]. 3. Because the result is a JavaScript Number (a 64-bit binary floating-point value), it cannot maintain trailing zeros [1][4]. When the number 0.5 is represented as a numeric type, it is simply 0.5, and any trailing zeros from the string representation are discarded [1]. If you need to preserve trailing zeros, you must keep the value as a string [3][4].
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5FObjects/parseFloat
- 2: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat
- 3: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
- 4: https://stackoverflow.com/questions/2283566/how-can-i-round-a-number-in-javascript-tofixed-returns-a-string
🏁 Script executed:
# First, locate and examine the actual file
fd -t f "utils.ts" -path "*color-picker*"Repository: raystack/apsara
Length of output: 228
🏁 Script executed:
# Read the specific file to see the code at lines 30-53
cat -n packages/raystack/components/color-picker/utils.ts | sed -n '25,60p'Repository: raystack/apsara
Length of output: 1501
🏁 Script executed:
# Search for tests related to formatOklch
fd -t f "*.test\|*.spec" -path "*color-picker*" | head -20Repository: raystack/apsara
Length of output: 228
🏁 Script executed:
# Check if there are any tests that validate the format
rg "formatOklch" --type typescript -A 5 -B 5Repository: raystack/apsara
Length of output: 94
🏁 Script executed:
# Find test files in color-picker directory
find packages/raystack/components/color-picker -type f \( -name "*.test.*" -o -name "*.spec.*" \)Repository: raystack/apsara
Length of output: 133
🏁 Script executed:
# Search for formatOklch usage in tests or elsewhere
rg "formatOklch" -B 3 -A 3Repository: raystack/apsara
Length of output: 1127
🏁 Script executed:
# Look for any validation of oklch format
rg "oklch\(" -B 2 -A 2 | head -100Repository: raystack/apsara
Length of output: 8924
🏁 Script executed:
# Check the test file for formatOklch tests
cat -n packages/raystack/components/color-picker/__tests__/color-picker.test.tsx | head -150Repository: raystack/apsara
Length of output: 5362
🏁 Script executed:
# Search for any format validation or assertions on oklch output
rg "oklch\(" packages/raystack/components/color-picker/__tests__/ -B 2 -A 2Repository: raystack/apsara
Length of output: 626
🏁 Script executed:
# Search for more tests related to format, especially comparing output
rg "formatOklch\|oklch\(" packages/raystack/components/color-picker/ -B 3 -A 5Repository: raystack/apsara
Length of output: 41
🏁 Script executed:
# Look for utils.test or any unit tests specifically for utils.ts
find packages/raystack/components/color-picker -name "*utils*" -type fRepository: raystack/apsara
Length of output: 110
🏁 Script executed:
# Check if there's any validation of the output format or round function
rg "round\|toFixed" packages/raystack/components/color-picker/ -B 2 -A 2Repository: raystack/apsara
Length of output: 41
🏁 Script executed:
# Create a test to demonstrate the actual behavior of formatOklch
cat > /tmp/test_format.js << 'EOF'
// Simulate the current implementation
const round = (n, p) => Number.parseFloat(n.toFixed(p));
// Test with values that would lose trailing zeros
const testValues = [
{ name: "0.5 with 4 decimals", value: 0.5, decimals: 4 },
{ name: "0.1 with 4 decimals", value: 0.1, decimals: 4 },
{ name: "1.0 with 4 decimals", value: 1.0, decimals: 4 },
{ name: "50.12 with 2 decimals", value: 50.12, decimals: 2 },
];
console.log("Current implementation (parseFloat(toFixed())):");
testValues.forEach(({name, value, decimals}) => {
const rounded = round(value, decimals);
const inTemplate = `Value: ${rounded}`;
console.log(` ${name}: ${value.toFixed(decimals)} -> ${rounded} -> "${inTemplate}"`);
});
console.log("\nProposed implementation (toFixed() directly):");
testValues.forEach(({name, value, decimals}) => {
const fixed = value.toFixed(decimals);
const inTemplate = `Value: ${fixed}`;
console.log(` ${name}: ${value.toFixed(decimals)} -> "${inTemplate}"`);
});
// Test a realistic oklch output
console.log("\nRealistic oklch output example:");
const hsl = { mode: 'hsl', h: 45, s: 100, l: 50, alpha: 1 };
const fakeOklch = { l: 0.5, c: 0.15, h: 45.67 }; // Simplified example
// Current implementation
const L_current = round(0.5, 4);
const C_current = round(0.15, 4);
const H_current = round(45.67, 2);
const oklch_current = `oklch(${L_current} ${C_current} ${H_current})`;
console.log(` Current: ${oklch_current}`);
// Proper implementation
const L_proper = (0.5).toFixed(4);
const C_proper = (0.15).toFixed(4);
const H_proper = (45.67).toFixed(2);
const oklch_proper = `oklch(${L_proper} ${C_proper} ${H_proper})`;
console.log(` Proper: ${oklch_proper}`);
EOF
node /tmp/test_format.jsRepository: raystack/apsara
Length of output: 667
formatOklch rounds values but does not preserve the stated decimal format.
The current implementation using Number.parseFloat(n.toFixed(p)) converts to a number, which loses trailing zeros when interpolated into the template literal. This violates the documented contract: "4-decimal L/C, 2-decimal H." For example, with L=0.5 and C=0.15, the output is oklch(0.5 0.15 ...) instead of the intended oklch(0.5000 0.1500 ...).
To preserve the fixed decimal width, use toFixed(p) directly, which returns a properly formatted string:
Proposed fix
-const round = (n: number, p: number) => Number.parseFloat(n.toFixed(p));
+const fixed = (n: number, p: number) => (Number.isFinite(n) ? n : 0).toFixed(p);
@@
- const L = round(oklch.l ?? 0, 4);
- const C = round(oklch.c ?? 0, 4);
- const H = C === 0 || !Number.isFinite(oklch.h) ? 0 : round(oklch.h ?? 0, 2);
+ const cRaw = oklch.c ?? 0;
+ const L = fixed(oklch.l ?? 0, 4);
+ const C = fixed(cRaw, 4);
+ const H = cRaw === 0 || !Number.isFinite(oklch.h) ? '0.00' : fixed(oklch.h ?? 0, 2);
@@
- : `oklch(${body} / ${round(hsl.alpha, 4)})`;
+ : `oklch(${body} / ${fixed(hsl.alpha, 4)})`;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const round = (n: number, p: number) => Number.parseFloat(n.toFixed(p)); | |
| /** | |
| * Serializes a culori-shaped HSL color as oklch(L C H[ / A]). | |
| * Matches the design system's token format: 4-decimal L/C, 2-decimal H, | |
| * H pinned to 0 for achromatic colors (culori would emit `none` per CSS | |
| * Color 4, which is correct but inconsistent with how tokens are written). | |
| */ | |
| const formatOklch = (hsl: { | |
| mode: 'hsl'; | |
| h: number; | |
| s: number; | |
| l: number; | |
| alpha: number; | |
| }): string => { | |
| const oklch = toOklch(hsl); | |
| if (!oklch) return ''; | |
| const L = round(oklch.l ?? 0, 4); | |
| const C = round(oklch.c ?? 0, 4); | |
| const H = C === 0 || !Number.isFinite(oklch.h) ? 0 : round(oklch.h ?? 0, 2); | |
| const body = `${L} ${C} ${H}`; | |
| return hsl.alpha === 1 | |
| ? `oklch(${body})` | |
| : `oklch(${body} / ${round(hsl.alpha, 4)})`; | |
| const fixed = (n: number, p: number) => (Number.isFinite(n) ? n : 0).toFixed(p); | |
| /** | |
| * Serializes a culori-shaped HSL color as oklch(L C H[ / A]). | |
| * Matches the design system's token format: 4-decimal L/C, 2-decimal H, | |
| * H pinned to 0 for achromatic colors (culori would emit `none` per CSS | |
| * Color 4, which is correct but inconsistent with how tokens are written). | |
| */ | |
| const formatOklch = (hsl: { | |
| mode: 'hsl'; | |
| h: number; | |
| s: number; | |
| l: number; | |
| alpha: number; | |
| }): string => { | |
| const oklch = toOklch(hsl); | |
| if (!oklch) return ''; | |
| const cRaw = oklch.c ?? 0; | |
| const L = fixed(oklch.l ?? 0, 4); | |
| const C = fixed(cRaw, 4); | |
| const H = cRaw === 0 || !Number.isFinite(oklch.h) ? '0.00' : fixed(oklch.h ?? 0, 2); | |
| const body = `${L} ${C} ${H}`; | |
| return hsl.alpha === 1 | |
| ? `oklch(${body})` | |
| : `oklch(${body} / ${fixed(hsl.alpha, 4)})`; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/color-picker/utils.ts` around lines 30 - 53,
formatOklch currently uses round (which returns a Number via
Number.parseFloat(n.toFixed(p))) causing trailing zeros to be dropped and
violating the "4-decimal L/C, 2-decimal H" contract; change the implementation
so the values are formatted as fixed-width decimal strings (use toFixed(p)
directly) and ensure formatOklch concatenates those string results (update the
round helper to return a string or replace calls to round(L/C/H/alpha) in
formatOklch with num.toFixed(p)) so L and C are 4-decimal, H is 2-decimal, and
alpha is 4-decimal when included (refer to formatOklch and the round helper).
paanSinghCoder
changed the title
Without `as const`, `SUPPORTED_MODES` is `string[]` so `ModeType` widens to `string` — invalid modes pass type-checking and silently fall back to RGB in `getColorString`. `options` on `ColorPickerMode` is widened to `readonly ModeType[]` to accept the const tuple as its default. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 participants
Summary
colorforculoriin theColorPickercomponent so it can accept and emitoklch()alongside hex/rgb/hsloklchtoSUPPORTED_MODESand aformatOklch()helper (4-decimal L/C, 2-decimal H, hue pinned to 0 for grays)/examples/color-pickerWhy culori (not color-convert)
The picker's
valueprop accepts any CSS color string from consumers — hex, rgb/rgba, hsl/hsla, oklch, named colors.color-convertis route-based; it has no CSS parser and no stringifiers (except a hex helper), so we'd hand-roll ~170 lines of parsers and formatters.culoriships exactly the surface this component needs.parseconverter('hsl')c.rgb.hsl,c.hex.rgb, …)formatHex#rrggbbc.rgb.hexreturns'FF0000'(no#, no alpha)formatHex8#rrggbbaaformatHslhsl(...)/hsla(...)formatRgbrgb(...)/rgba(...)Caveat
Sliders still operate in HSL.
oklchis an I/O format, not a perceptual editing mode — anoklch()value passed in will not be bit-identical when read back, because the round-trip goes through HSL → sRGB → OKLCH.Follow-up
The VS Code plugin (#759) currently uses
color-convertbecause its input is a closed set ofoklch()tokens. We could move it toculorilater to consolidate on one color library across the monorepo — the trade-off is ~9 KB gzipped in the plugin bundle vs. removing the parser/scaling/type-shim glue we hand-rolled there.Test plan
pnpm test components/color-picker— 24/24 passing (3 new tests for oklch input, oklch mode output, and oklch alpha tail)pnpm tsc --noEmitclean on touched filespnpm biome checkclean on touched files/examples/color-pickerin the docs site and verify each card🤖 Generated with Claude Code