Design tokens in the inspector: chips, color-picker palette, oklch fix (v0.3.1) - #133
Merged
Conversation
Introduce src/utils/design-tokens.ts: a pure, unit-tested layer that collects theme variables from document stylesheets, resolves var() alias chains textually, builds a color-token index, maps Tailwind color/typography utility classes back to their CSS variables, and reverse-maps resolved colors to the best-matching token. Re-export the public API from the src/utils.ts barrel. Claude-Session: https://claude.ai/code/session_01JzitXiMcdedyPbH4wqkXqX
Add a shared TokenChip pill (shadow-DOM-safe base-ui popover) and make the inspector's color rows token-aware. ColorInput now shows the bound CSS variable (resolved via plan 023's resolveColorToken) with the hex/alpha editors moved into a detail popover; rows fall back to the existing hex/alpha inputs when no token binds. Thread elementInfo.classList into the fill, background, and border sections and invalidate the color-token index on selection change. Claude-Session: https://claude.ai/code/session_01JzitXiMcdedyPbH4wqkXqX
Make the font-size, line-height, letter-spacing, and font-weight rows of the Text section token-aware. A new TypographyField wrapper shows the attributed Tailwind utility (text-base, leading-7, font-semibold, …) via the shared TokenChip from plan 024, moving the raw editor into the chip popover; rows fall back to today's controls when no utility is attributed. Resolution reuses typographyTokenForProperty from plan 023; classList is threaded from the panel. Claude-Session: https://claude.ai/code/session_01JzitXiMcdedyPbH4wqkXqX
- formatColorValue: preserve alpha on bound tokens via color-mix (<100%) - design-tokens: add varForClassRule to recover shadcn @theme inline bindings from the generated utility rule; tokenForColorClass falls back to it - dedup parseColorValue: src/utils.ts now re-exports from src/utils/color.ts - bump package version 0.3.0 -> 0.3.1 Claude-Session: https://claude.ai/code/session_01JzitXiMcdedyPbH4wqkXqX
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
1 participant
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.
Surfaces the design token / CSS variable behind each inspector value (Figma-style), adds a token palette to the color picker, and fixes oklch color parsing. Bumps to 0.3.1.
What's in it (plans 023–028)
:root/@theme/ shadcn vars, resolves alias chains, maps Tailwind color classes → vars.text-base,font-semibold,leading-7…) instead of raw px/weight; raw fallback otherwise.parseColorValueforoklch()/lab()/lch()/color()— rasterize a pixel instead of round-trippingfillStyle(Chrome returns oklch unchanged). oklch is the default for Tailwind v4 / shadcn, so this was breaking all oklch swatches.var(--token)(not a flattened hex), so the chip persists and the agent gets the token. Editing the HSV detaches.color-mix), shadcn@theme inlineresolution via the generated utility rule (varForClassRule),parseColorValuededup, version bump.Verification
tsc --noEmitclean; 667 tests pass (48 files).--color-brandwrotevar(--color-brand);@theme inlinetokens (--muted-foreground) resolve via the class rule.Notes
dev/token harness is dev-only (not in the published tarball:files= dist/README/LICENSE).rgb(100% …)(never emitted bygetComputedStyle).Publish (
made-refine@0.3.1) is a separate manual step after merge:gh workflow run publish.yml --ref main -f task=release -f npm_tag=auto.https://claude.ai/code/session_01JzitXiMcdedyPbH4wqkXqX