feat: theme() design-tokens layer (Phase 1)#89
Merged
Conversation
Phase 1 of the design layer. `brand` is the reframe house style as code (the DESIGN.md values: accent #FF4D00, bg #0A0C14, the Inter type scale, Balanced motion tone, audio palette); `theme(overrides)` deep-merges a custom kit onto it so a consumer defines their brand once and reuses it. Pure data: a theme emits nothing into the IR, so referencing a token renders byte-identical to writing the literal (goldens unchanged). The Theme type is the foundation for a later IR-level, overlay-addressable theme. Exported from @reframe/core. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Source examples/lib/deviceKit.ts (shared by every device scene) and 6 non-golden scenes from the brand tokens instead of re-declaring inline BG/FG/MUTED/accent. Canonicalizes their drifted values to the house palette (e.g. a random #FF5A1F orange becomes brand.color.accent #FF4D00, off-brand backgrounds become brand.color.bg) for a consistent look. The golden-tracked scenes are left untouched, so the determinism snapshots stay byte-identical. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Show importing `brand` and referencing tokens (`fill: brand.color.accent`,
`...brand.type.headline`) and building a custom kit with `theme({...})`. Note
that theme.ts is the source of truth the doc mirrors.
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 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.
Phase 1 of the design layer. Turns the documented brand (DESIGN.md, Phase 0) into tokens in code.
What
packages/core/src/theme.ts(new, exported from@reframe/core/reframe-video):brand— the reframe house style as data (the DESIGN.md values: accent#FF4D00, bg#0A0C14, the Inter type scale, Balanced motion tone, audio palette).theme(overrides)— deep-merges a custom kit ontobrand, so a consumer defines their brand once and reuses it (theme({ color: { accent: "#1E90FF" } })).Theme/TypeStyletypes (the foundation for a later IR-level, overlay-addressable theme).examples/lib/deviceKit.ts(shared by every device scene) + 6 non-golden scenes to reference tokens instead of re-declaring inlineBG/FG/MUTED/accent, canonicalizing drifted values (a random#FF5A1Forange becomesbrand.color.accent, off-brand backgrounds becomebrand.color.bg).brand/theme()usage in DESIGN.md and the eDSL guide. No plugin/skill change (no version bump).Golden-safe by construction
brandis pure data and emits nothing into the IR, so referencing a token renders byte-identical to writing the literal. The 6 golden-tracked scenes are left untouched (their backgrounds drift from canonical, so tokenizing them would change snapshots). DisplayList goldens stay byte-identical.Verification
pnpm test— 427 pass (421 + 6 newtheme.test.ts); goldens byte-identical.pnpm typecheck+pnpm lintclean.data-explainer,cursor-fx) renders on-brand.Not in this PR
Phase 2: an IR-level
SceneIR.designfield resolved in the compiler, overlay-addressable, withrender --themeand per-brandbatch. TheThemetype here is its foundation.🤖 Generated with Claude Code