feat(configurator): inline live preview for every token domain - #371
Merged
Conversation
Generalises the Colors panel's "Semantic roles" card to every other token domain. Each of Typography, Spacing, Layout, Gradients, Borders, Shadows, Motion and Effects now carries a collapsed "Preview" accordion that renders a compact, domain-shaped live preview of its tokens — type specimen, spacing bars, container widths, gradient tiles, radius corners, elevation cards, motion bars and blur/opacity samples — resolved against the user's current overrides. - lib/domainPreviews.js: curated per-domain preview specs (single source of truth, pinned to the catalogue by a tripwire test like colorRoles.js). - components/DomainPreview.svelte: renders the spec inside a scoped stage carrying the full framework cascade (buildPreviewDeclarations), switching layout on the spec kind. Honours the preview theme + reduced-motion toggle. - DomainPanel.svelte: shows the Preview accordion for any domain with a spec (Colors keeps its bespoke ColorAssignments card). Tests: tests/domainPreviews.test.js (curation tripwire), component test (every domain mounts + override flows into the stage), e2e spec (accordion opens, stays collapsed by default, Colors keeps Semantic roles). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
📝 WalkthroughWalkthroughAdds inline domain preview cards to the configurator. A new ChangesInline Domain Preview
Sequence Diagram(s)sequenceDiagram
actor User
participant DomainPanel
participant DomainPreview
participant DOMAIN_PREVIEWS
participant overrideStore
User->>DomainPanel: select domain (e.g. Borders)
DomainPanel->>DOMAIN_PREVIEWS: lookup previewSpec by domain.id
DOMAIN_PREVIEWS-->>DomainPanel: spec { kind, blurb, groups }
DomainPanel->>DomainPanel: set showPreview, render Preview <details>
User->>DomainPanel: expand Preview accordion
DomainPanel->>DomainPreview: render domain prop
DomainPreview->>DOMAIN_PREVIEWS: derive spec from domain
DomainPreview->>overrideStore: read current overrides + ui.previewTheme
overrideStore-->>DomainPreview: CSS variable overrides
DomainPreview->>DomainPreview: buildPreviewDeclarations() → stageStyle string
DomainPreview-->>User: .dp__stage with live token-driven visuals
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@configurator/tests-e2e/domain-preview.spec.js`:
- Around line 35-46: The test `the preview reflects a live override` only
verifies that the baseline stage style contains `--sf-radius-m`, but does not
actually test that live overrides work by mutating a token and observing the
change. After capturing the `before` style attribute of the `stage` locator, add
steps to mutate a radius token (such as radius-m) through the UI in the
catalogue, then retrieve the updated style attribute and assert that it has
changed to reflect the new token value, proving that the override propagation is
working correctly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 27eaff14-4545-454c-9c0b-d01ce2f87661
📒 Files selected for processing (6)
configurator/src/components/DomainPanel.svelteconfigurator/src/components/DomainPreview.svelteconfigurator/src/lib/domainPreviews.jsconfigurator/tests-components/domain-preview.test.jsconfigurator/tests-e2e/domain-preview.spec.jsconfigurator/tests/domainPreviews.test.js
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 6 files
You’re at about 91% of the monthly reviewed-line limit. You may want to disable incremental reviews to conserve quota. Reviews will continue until that limit is exceeded. If you need help avoiding interruptions, please contact contact@cubic.dev.
Reply with feedback, questions, or to request a fix.
Fix all with cubic | Re-trigger cubic
…e override in e2e Two review findings on the inline domain previews: - DomainPreview easing bars hardcoded animation-duration: 1.1s, bypassing the reduced-motion toggle (which sets --sf-motion-scale: 0 on the stage). Scale the easing duration by --sf-motion-scale so those bars freeze too, matching the duration bars (whose tokens are calc(... * --sf-motion-scale)). - The "preview reflects a live override" e2e only asserted the baseline cascade contained a radius token (always true). radius-m is a read-only consumption token, so drive its upstream knob --sf-radius-scale via the Scaling panel and assert the new value flows live into the stage's inline custom properties. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
This was referenced Jun 22, 2026
This was referenced Jun 24, 2026
Closed
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.
Summary
Extends the Colors panel redesign to every other token domain. The Colors panel's headline new feature was the inline "Semantic roles" card — a live preview of your tokens right where you edit. This generalises that to all token domains so each panel shows focused, live feedback without leaving the editing surface.
Each renders inside a scoped stage carrying the full framework cascade plus the user's overrides (
buildPreviewDeclarations), so everyvar(--sf-*)resolves live and updates the instant a token changes. The stage honours the preview theme and the reduced-motion toggle.Architecture (mirrors existing patterns)
lib/domainPreviews.js— curated per-domain preview specs; single source of truth, pinned to the baked catalogue by a tripwire test (same philosophy ascolorRoles.js/basics.js).components/DomainPreview.svelte— one component; layout switches on the speckind(radius corners, elevation cards, gradient tiles, motion bars, type specimen, spacing/container bars, blur/opacity).DomainPanel.svelte— collapsed "Preview" accordion for any domain with a spec. Colors keeps its bespokeColorAssignmentscard (it is not inDOMAIN_PREVIEWS, so no generic Preview is added there).Test plan
tests/domainPreviews.test.jstripwire pins every preview token to the catalogue (518 tests pass)tests-components/domain-preview.test.js: every domain mounts and renders a sample per spec item; an override flows into the scoped stagenpm run buildclean (0 errors),svelte-check0 errors,check:curation+ rootcheck:versiongreentests-e2e/domain-preview.spec.js): accordion opens, stays collapsed by default, Colors keeps Semantic roles — validated in CI (local browsers are network-restricted here)🤖 Generated with Claude Code
https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
Generated by Claude Code
Summary by cubic
Adds inline live previews to every token domain (Typography, Spacing, Layout, Gradients, Borders, Shadows, Motion, Effects). Fixes motion easing bars to honor reduced-motion by scaling animation duration with
--sf-motion-scale.New Features
DomainPreview.svelterenders curated per-domain previews fromdomainPreviews.jsinside a scoped stage usingbuildPreviewDeclarations; honors theme and reduced-motion.DomainPanel.sveltedisplays the Preview accordion when a spec exists; Colors keeps its bespokeColorAssignments.Tests
--sf-radius-scaleoverride flows into the stage’s inline styles.Written for commit c1bdd5c. Summary will update on new commits.
Summary by CodeRabbit
New Features
Tests