fix(studio): parse modern CSS colors in the inspector and gradient editor - #3752
Open
dkryaklin wants to merge 1 commit into
Open
fix(studio): parse modern CSS colors in the inspector and gradient editor#3752dkryaklin wants to merge 1 commit into
dkryaklin wants to merge 1 commit into
Conversation
dkryaklin
force-pushed
the
fix/studio-modern-css-color-parsing
branch
9 times, most recently
from
September 7, 2026 22:02
f572ad7 to
9e1ac13
Compare
dkryaklin
marked this pull request as ready for review
September 7, 2026 22:04
miguel-heygen
self-requested a review
September 7, 2026 22:04
miguel-heygen
approved these changes
Sep 7, 2026
miguel-heygen
enabled auto-merge (squash)
September 7, 2026 22:05
Collaborator
|
@dkryaklin sign the commit to merge it pls |
…itor parseCssColor only read hex and comma-separated rgb(). Computed styles arrive as oklch(), oklab() or color(srgb ...), and gradient stops as whatever the author wrote, so the inspector showed black for all of them and committing wrote black over the author's color. Parse with @colordx/core, which covers CSS Color 4. The gradient editor and the inline text toolbar share the same parser.
auto-merge was automatically disabled
September 8, 2026 07:41
Head branch was pushed to by a user without write access
dkryaklin
force-pushed
the
fix/studio-modern-css-color-parsing
branch
from
September 8, 2026 07:41
9e1ac13 to
cf60aa5
Compare
Author
Done 👍 |
miga-heygen
enabled auto-merge (squash)
September 8, 2026 17:56
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.