Author the design language once in the canonical React designbook and project it
one-way onto each stack: React -> designbook/ -> ir/ -> adapters/<stack>/.
Phase 0 — contracts & governance (T01-T03):
- ir/SCHEMA.md + ir/schema/{component,tokens}.schema.json — neutral IR contract
(W3C DTCG tokens; React prop -> HTML attribute mapping; non-portable props flagged).
- adapters/ADAPTER_CONTRACT.md — inputs, drift-report + parity-result shapes,
idempotency rules, CI exit codes (0 ok / 2 usage / 3 drift / 4 parity / 5 internal).
- .claude/rules/designbook-propagation.md + DesignSystemIntroduction.md §5.1 —
one-way directionality + drift-resolution workflow.
T04 — canonical React designbook + the missing pull tool:
- The bundled /design-sync skill only PUSHES repo->cloud; it cannot populate
designbook/. Added scripts/designbook_pull.py + `make designbook-pull`, which drives
the local claude binary headless (acceptEdits) so DesignSync fetch+write runs in a
subprocess (contents never hit the orchestrator's context). Pulled 44 files;
excludes the _whynot-design-seed/ self-copy. Corrected the docs that wrongly called
/design-sync the pull.
T05 — IR extractor (scripts/ir-extract.mjs + `make ir`):
- ir/tokens.json (80 tokens, DTCG, var() -> {ref} alias resolution); ir/components/*.json
(10 contracts parsed from .jsx signatures: enum/boolean/number inference, prop->attr
map, style/callback marked non-portable); ir/exemplars/*.
T06 — Lit token adapter (adapters/lit/ + `make adapt-lit`):
- Full-gen tokens into src/styles/colors_and_type.css :root (marker-bounded, idempotent
no-op on re-run; hand-authored type CSS preserved).
NOTE: token regen synced Lit to canonical React — fonts IBM Plex -> system stacks and 8
status tokens added. This is a VISUAL change: review and run `pnpm test:visual:update`
before merge. Remaining: T07 scaffold+drift, T08 parity, T09 runbook, T10 2nd-adapter.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"namespace":"WhyNotDesignSystem_fb2eef","components":[],"startingPoints":[],"cards":[{"path":"preview/brand-iconography.html","group":"Brand","viewport":"700x240","subtitle":"Lucide · 1.5px stroke · 16 of set","name":"Brand · Iconography"},{"path":"preview/brand-lockups.html","group":"Brand","viewport":"700x260","subtitle":"Mark + slug · 3 sizes","name":"Brand · Lockups"},{"path":"preview/brand-logo.html","group":"Brand","viewport":"700x220","subtitle":"Primary · inverted · ?! wordmark","name":"Brand · Logo"},{"path":"preview/brand-wireframe-motif.html","group":"Brand","viewport":"700x240","subtitle":"Graph paper + draft stamp","name":"Brand · Wireframe Motif"},{"path":"preview/colors-accent.html","group":"Colors","viewport":"700x200","subtitle":"Annotation yellow — highlighter only","name":"Colors · Accent"},{"path":"preview/colors-borders.html","group":"Colors","viewport":"700x180","subtitle":"Hairline · default · strong","name":"Colors · Borders"},{"path":"preview/colors-neutrals.html","group":"Colors","viewport":"700x290","subtitle":"Ink scale + paper surfaces","name":"Colors · Neutrals"},{"path":"preview/colors-signal.html","group":"Colors","viewport":"700x220","subtitle":"S0–S4 ramp, S4 uses accent","name":"Colors · Signal Strength"},{"path":"preview/colors-status-functional.html","group":"Colors","viewport":"700x280","subtitle":"Error / warn / success / info — borders & dots only","name":"Colors · Functional Status"},{"path":"preview/comp-buttons.html","group":"Components","viewport":"700x240","subtitle":"Primary · secondary · ghost","name":"Components · Buttons"},{"path":"preview/comp-empty-placeholder.html","group":"Components","viewport":"700x220","subtitle":"Dashed border · wireframe lines","name":"Components · Empty State"},{"path":"preview/comp-inputs.html","group":"Components","viewport":"700x280","subtitle":"Default · focus · error","name":"Components · Inputs"},{"path":"preview/comp-labels-tags.html","group":"Components","viewport":"700x200","subtitle":"Stage tags · signal dots","name":"Components · Labels & Tags"},{"path":"preview/comp-left-nav.html","group":"Components","viewport":"700x420","subtitle":"Grouped sidebar · active state · minimal variant","name":"Components · Left Navigation"},{"path":"preview/comp-pipeline.html","group":"Components","viewport":"700x180","subtitle":"Lifecycle stage tracker","name":"Components · Pipeline"},{"path":"preview/comp-prototype-card.html","group":"Components","viewport":"700x290","subtitle":"Default + hover (black left bar)","name":"Components · Prototype Card"},{"path":"preview/comp-topnav.html","group":"Components","viewport":"900x160","subtitle":"56px · 1px hairline · ⌘K search","name":"Components · Top Navigation"},{"path":"preview/page-beta-invitation.html","group":"Pages","viewport":"1280x860","subtitle":"Invitation-only · seats, dates, accept / decline","name":"Pages · Closed-beta invitation"},{"path":"preview/page-landing-auth.html","group":"Pages","viewport":"1280x820","subtitle":"Public landing · log in / request access toggle","name":"Pages · Landing — Login & Registration"},{"path":"preview/page-prototype-detail.html","group":"Pages","viewport":"1280x860","subtitle":"Single prototype · pipeline, learning question, signal sidebar","name":"Pages · Prototype detail"},{"path":"preview/page-signals-dashboard.html","group":"Pages","viewport":"1280x860","subtitle":"Market-signal log · filter by strength · evidence rows","name":"Pages · Signals dashboard"},{"path":"ui_kits/whynot-control/index.html","group":"Pages","viewport":"1200x740","subtitle":"Authenticated app · inbox, prototypes, signals, betas, decisions, docs","name":"Pages · User dashboard"},{"path":"preview/spacing-elevation.html","group":"Spacing","viewport":"700x220","subtitle":"Mostly none · wireframe system","name":"Spacing · Elevation"},{"path":"preview/spacing-radii.html","group":"Spacing","viewport":"700x200","subtitle":"0 / 2 / 4 / 8 / pill","name":"Spacing · Radii"},{"path":"preview/spacing-scale.html","group":"Spacing","viewport":"700x280","subtitle":"4px base · 10 steps","name":"Spacing · Scale"},{"path":"preview/type-body.html","group":"Type","viewport":"700x220","subtitle":"Lead 17/1.55 · Body 15/1.5","name":"Type · Body & Lead"},{"path":"preview/type-display.html","group":"Type","viewport":"700x200","subtitle":"PlexSans 300/400 · -.035em tracking","name":"Type · Display"},{"path":"preview/type-headings.html","group":"Type","viewport":"700x320","subtitle":"H1–H5 · PlexSans 500 · tight tracking","name":"Type · Headings"},{"path":"preview/type-mono-eyebrows.html","group":"Type","viewport":"700x220","subtitle":"PlexMono · uppercase · .08em tracking","name":"Type · Mono & Eyebrows"},{"path":"preview/type-serif-quote.html","group":"Type","viewport":"700x210","subtitle":"PlexSerif italic · editorial moments","name":"Type · Serif Quote"}],"templates":[],"globalCssPaths":["colors_and_type.css","styles.css"],"tokens":[{"name":"--ink","value":"#0A0A0A","kind":"color","definedIn":"colors_and_type.css"},{"name":"--ink-2","value":"#1F1F1F","kind":"color","definedIn":"colors_and_type.css"},{"name":"--ink-3","value":"#5C5C5C","kind":"color","definedIn":"colors_and_type.css"},{"name":"--ink-4","value":"#8A8A8A","kind":"color","definedIn":"colors_and_type.css"},{"name":"--ink-5","value":"#B5B5B3","kind":"color","definedIn":"colors_and_type.css"},{"name":"--line","value":"#E5E5E2","kind":"color","definedIn":"colors_and_type.css"},{"name":"--line-strong","value":"#C9C9C5","kind":"color","definedIn":"colors_and_type.css"},{"name":"--line-soft","value":"#F0F0EC","kind":"color","definedIn":"colors_and_type.css"},{"name":"--paper","value":"#FFFFFF","kind":"color","definedIn":"colors_and_type.css"},{"name":"--paper-2","value":"#FAFAF7","kind":"color","definedIn":"colors_and_type.css"},{"name":"--paper-3","value":"#F4F4EF","kind":"color","definedIn":"colors_and_type.css"},{"name":"--fg-1","value":"var(--ink)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--fg-2","value":"var(--ink-3)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--fg-3","value":"var(--ink-4)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--fg-mute","value":"var(--ink-5)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--fg-on-dark","value":"#FAFAF7","kind":"color","definedIn":"colors_and_type.css"},{"name":"--bg-1","value":"var(--paper)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--bg-2","value":"var(--paper-2)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--bg-3","value":"var(--paper-3)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--bg-invert","value":"var(--ink)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--border","value":"var(--line)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--border-strong","value":"var(--line-strong)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--border-soft","value":"var(--line-soft)","kind":"color","definedIn":"colors_and_type.css"},{"name":"--hi","value":"#FFE14A","kind":"color","definedIn":"colors_and_type.css"},{"name":"--hi-2","value":"#FFD400","kind":"color","definedIn":"colors_and_type.css"},{"name":"--hi-ink","value":"#1A1500","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-raw","value":"#B5B5B3","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-weak","value":"#8A8A8A","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-medium","value":"#5C5C5C","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-strong","value":"#0A0A0A","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-commercial","value":"#FFD400","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-error","value":"#B33A2E","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-error-bg","value":"#FCF3F1","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-warn","value":"#C28000","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-warn-bg","value":"#FFFCEB","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-success","value":"#2F6B3A","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-success-bg","value":"#F2F7F2","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-info","value":"#2E5C8A","kind":"color","definedIn":"colors_and_type.css"},{"name":"--status-info-bg","value":"#F2F5FA","kind":"color","definedIn":"colors_and_type.css"},{"name":"--ff-sans","value":"ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif","kind":"font","definedIn":"colors_and_type.css","annotation":"font"},{"name":"--ff-mono","value":"ui-monospace, \"SF Mono\", Menlo, Consolas, monospace","kind":"font","definedIn":"colors_and_type.css","annotation":"font"},{"name":"--ff-serif","value":"ui-serif, Georgia, \"Times New Roman\", serif","kind":"font","definedIn":"colors_and_type.css","annotation":"font"},{"name":"--fs-xs","value":"11px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-sm","value":"13px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-base","value":"15px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-md","value":"17px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-lg","value":"20px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-xl","value":"24px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-2xl","value":"32px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-3xl","value":"44px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-4xl","value":"64px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--fs-5xl","value":"96px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--lh-tight","value":"1.05","kind":"font","definedIn":"colors_and_type.css","annotation":"font"},{"name":"--lh-snug","value":"1.25","kind":"font","definedIn":"colors_and_type.css","annotation":"font"},{"name":"--lh-base","value":"1.5","kind":"font","definedIn":"colors_and_type.css","annotation":"font"},{"name":"--lh-loose","value":"1.7","kind":"font","definedIn":"colors_and_type.css","annotation":"font"},{"name":"--tr-tight","value":"-0.02em","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--tr-snug","value":"-0.01em","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--tr-base","value":"0em","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--tr-mono","value":"0.02em","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--tr-label","value":"0.08em","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-1","value":"4px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-2","value":"8px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-3","value":"12px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-4","value":"16px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-5","value":"24px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-6","value":"32px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-7","value":"48px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-8","value":"64px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-9","value":"96px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--sp-10","value":"128px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--r-0","value":"0px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--r-1","value":"2px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--r-2","value":"4px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--r-3","value":"8px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--r-pill","value":"999px","kind":"spacing","definedIn":"colors_and_type.css"},{"name":"--shadow-0","value":"none","kind":"shadow","definedIn":"colors_and_type.css"},{"name":"--shadow-1","value":"0 1px 0 var(--line)","kind":"shadow","definedIn":"colors_and_type.css"},{"name":"--shadow-2","value":"0 1px 0 var(--line-strong)","kind":"shadow","definedIn":"colors_and_type.css"},{"name":"--shadow-3","value":"0 4px 12px -6px rgba(10,10,10,0.10)","kind":"shadow","definedIn":"colors_and_type.css"}],"themes":[],"fonts":[],"brandFonts":[],"source":"spa"} |