Skip to content

feat(studio): cascade verification UI#1434

Open
ssilvius wants to merge 1 commit intofix/semantic-cascade-backfillfrom
feat/studio-cascade-preview
Open

feat(studio): cascade verification UI#1434
ssilvius wants to merge 1 commit intofix/semantic-cascade-backfillfrom
feat/studio-cascade-preview

Conversation

@ssilvius
Copy link
Copy Markdown
Collaborator

Summary

Sean: "the server has no UI for me to see changes." Confirmed -- App.tsx was a hardcoded mock ("primary-500" as literal text, dialog with no wiring). Nothing in it talked to the real registry or the studio API.

Replace with a real cascade verification surface:

  • Three swatch grids: Accent (8 variants), Highlight (6 variants), Reference (background, foreground, primary, primary-foreground -- should not change)
  • Each swatch renders via `var(--rafters-${name})`, so HMR pushes from the vite-plugin update them in place
  • "Apply Easter palette" button fires `setToken(accent -> silver-true-honey-500)` then `setToken(highlight -> silver-true-sky-200)`
  • StatusPill surfaces pending/ok/error states from the WebSocket round trip

This is the visual gate for the cascade fix in #1433 (this PR's base). With both merged, one setToken per family should cascade to every -hover/-active/-foreground/-border/-ring variant; the Reference section should stay put.

Test plan

  • Pre-existing studio test suite was 45/149 failing before this change; unchanged after (failures are API-side, not UI)
  • Biome clean
  • Manual: run `pnpm --filter @rafters/studio dev` against this repo, click "Apply Easter palette," observe accent variants turn amber and highlight variants turn sky -- without page reload, with reference section unchanged

🤖 Generated with Claude Code

App.tsx was a hardcoded mock. Replace with a real swatch grid that
renders accent + highlight variants via --rafters-* CSS variables and
fires setToken to apply an Easter palette (accent -> silver-true-honey,
highlight -> silver-true-sky). HMR push from the vite-plugin updates
the swatches in place; the reference section (background, foreground,
primary) should not change. If the cascade is working, every accent-*
and highlight-* variant updates from one setToken per family.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant