Conversation
f572ad7 to
9e1ac13
Compare
|
@dkryaklin sign the commit to merge it pls |
Head branch was pushed to by a user without write access
9e1ac13 to
cf60aa5
Compare
Done 👍 |
Friendly ping |
|
Thanks for identifying this and adding regression tests. We'd prefer to avoid a new runtime dependency for color parsing. We prototyped a browser-native approach in #3931—could you adapt that into this PR while keeping the regression coverage? |
Head branch was pushed to by a user without write access
c391d70 to
a5e0d0b
Compare
Sure, no problem. I've updated the PR with your approach from #3931 and kept my gradient test |
Problem
Select an element styled with
color: oklch(0.7 0.15 200)in Studio. The inspector swatch shows black. Drag the picker and the element turns black.parseCssColorinpackages/studio/src/components/editor/colorValue.tsonly read hex and comma-separatedrgb(). That is not what reaches it:getComputedStylekeepsoklch(),oklab()andlab()as written, and turnscolor-mix()intocolor(srgb ...).background-image, sowhite,#0f172accorrgb(255 0 0 / 50%)are common there.All of these returned
null. The inspector fell back to black. In the gradient editor a stop inserted between two named stops copied its left neighbour instead of blending.Fix
parseCssColorparses with@colordx/coreplus its named-color plugin. It covers CSS Color 4, has no dependencies, is 8.4 KB gzipped, and is the fastest parser in its class.gradientValue.tsdrops its own parser and usesparseCssColor.InlineTextToolbar.tsxdrops its canvas fallback, which only existed for named colors.Verification
colorValue.test.ts: modern computed colors, named colors, 8-digit hex, gamut clipping, rejected input, picker hex conversion.gradientValue.test.ts: interpolation across named stops and across 8-digit hex stops with alpha.bun run --cwd packages/studio test: 428 files, 4786 passed.oxlint,oxfmt --check,tsc --noEmitclean.bun install --frozen-lockfileaccepts the lockfile.