feat: visual redesign, theme playground, and Constructive brand blue

[yyyyaaa]

Summary

A visual redesign of every component and block surface, plus a shadcn-style theme playground for the docs.

• Design system — pure-neutral hsl() surface/text ramp (strong / default / subtle text, selected surfaces, hairline borders) with a mirrored dark ramp; Constructive brand blue #00A2FF as the accent with a derived --link token for blue-as-text; blue-led chart palette; Inter; one radius / shadow / duration ladder; spring motion tiers and a FluidHighlight pill on tabs, menus and toggle groups; html paints the canvas and theme-color follows the mode.
• New primitives — slider, toggle, toggle-group, accordion, kbd, spinner, item, button-group, each with a story, registry item, docs page and package export. Subpath exports for the theme modules (/theme, /theme-tuning, /theme-presets, /theme-dials-config).
• Theme playground at /blocks/create — DialKit customizer beside a live iframe preview with three switchable walls (86 cards built from the real primitives and blocks); neutral / accent / radius / elevation / motion presets and ten Ghostty-derived theme presets that pin exact tokens and release per dial family; URL + localStorage drafts; Get code offers the CSS overrides, a one-paste shadcn add install (registry:theme item) and an agent prompt. Walls and the dialog load on demand.
• Registry — ten @constructive/theme-<id> items generated from the preset source; lib/motion aliases resolved in the compiler.
• Polish passes — hover fills switch instantly, tooltips wait 600ms once, tabular numerals on changing digits, image outlines, concentric radii, grain texture on the hero, CardFooter gap, flush checkbox/radio rows via pseudo-element hit areas, chart labels contained, Alert corner fringe removed.

flowchart LR
  P[Create panel<br/>DialKit + presets] -- postMessage draft + wall --> F[Preview iframe<br/>3 walls · 86 cards]
  P -- Get code --> C[CSS overrides]
  P -- Get code --> I["shadcn add ./theme.json<br/>or @constructive/theme-&lt;id&gt;"]
  T[theme.ts + theme-presets.ts] -- generate --> G[globals.css · registry.json · /r/theme-*.json]
  T --> P

Loading

Visual

Surface	Before	After
Accent	#076df1 royal blue, white text	brand #00A2FF (as constructive.io renders it), --link for blue text at ≥ 4.5:1
Neutrals	cool-tinted OKLCH grays	pure-neutral hsl() ramp: strong 16% · default 36% · subtle 50% · selected 96% · border 95%, mirrored dark
Cards (dark)	external ring + inset highlight drew two edges	single inset hairline with a lit top edge
/blocks/create	one 25-card wall	01 Platform (33) · 02 Workspace (48) · 03 Assistant (5), preset tiles, Reset, Get code → CSS / CLI install / agent prompt
Forms	40px checkbox/radio boxes indented rows by ~11px	18px controls flush with inputs, 34px pseudo hit area

Notes for review

• primary with white text is 2.6:1 — the brand's own pairing, fine for short bold button labels. Body-text uses of the accent were moved to text-link; the Create panel's contrast badge reports WCAG tiers (AA / AA large / Below AA) honestly.
• Alert default radius is now rounded-md and its tints are opaque color-mix over the card.
• Preview routes are noindex; the docs site stays a static export (the CLI install path needs no server).

Generated with Devin

[tenki-reviewer]

Review complete. No issues found — approved ✅.

---

The staged diff for PR #39 is empty: the pre-staged patch file is 0 bytes and the change summary reports zero files. There are no changed lines to review, so no findings were produced.

_{Reviewed commit: d479ddc}

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	dialkit@​2.0.2

View full report