Repository navigation
feat: token() on background + gradient stops (Phase 2d, partial) - #93
Merged
Merged
Conversation
Extends design-token resolution past color props to the two other slots where a
token would otherwise misrender silently. `background: token("color.bg")` resolves
at compile (exposed as CompiledScene.background; renderer/preview read it). A
`$ref` in a gradient stop resolves in evaluate against CompiledScene.effectiveTheme
— gradients are static objects that bypass the value path, so resolveGradient
returns the SAME object when no stop is a token, keeping non-token scenes
byte-identical. No type-widening needed (both slots are already string-typed).
Numeric/type tokens (IR widening) remain a later phase.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…okens
The scene background is token("color.bg") and the accent bar is a gradient whose
stops are tokens, so --theme / a design.* batch column re-skins them too.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Fixes the CI typecheck (op.fill on the DisplayOp union); runtime behavior unchanged. Use `"fill" in op` narrowing instead of a bare property access. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
This branch was successfully deployed
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
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.
Closes the two silent footguns from the 2d investigation:
background: token("color.bg")and$refgradient stops used to misrender silently (invalid color string → no/garbage paint). Now they resolve. Numeric/type tokens (which need IR type-widening) are deliberately left for later.What
background: token("color.bg")resolves at compile (CompiledScene.background); renderer-canvas + preview read it (compiled.background ?? compiled.ir.background).$refin aColorStop.colorresolves inevaluateagainstCompiledScene.effectiveTheme. Gradients bypass the value path (static objects), soresolveGradientreturns the same object when no stop is a token → non-token scenes byte-identical.string-typed, sotoken()just works there.Golden-safe
No
design/$ref→effectiveThemeisbrand,resolveGradientis identity,backgroundis the literal → byte-identical IR/DisplayList. The 6 golden snapshots are unchanged (verified).Demo
themed-card.tsnow usesbackground: token("color.bg")and a gradient accent bar with token stops, so--theme/ adesign.*batch column re-skins the background and gradient too.Verification
pnpm test— 446 pass (442 + 4 new: background resolve/literal, gradient-stop resolve, gradient identity-preserved); goldens byte-identical; typecheck + lint clean.reframe frame themed-card.ts --t 1vs… --theme examples/themes/ocean.jsondiffers (bg + gradient re-skinned).Out of scope (later)
Numeric / type tokens (
fontSize: token(...)) — needsnumber | TokenRefwidening across the numeric style props.🤖 Generated with Claude Code