Changelog

A living list, latest first. User-visible changes only — engineering refactors live in REBUILD_PLAN.md.

Unreleased

Sizing makes sense now: one dial for spacing, one for corners. Size moved out of the colour map into its own Sizing tab. Set one spacing base (or pick Compact / Comfortable / Spacious) and every padding and gap follows the same rhythm; drag one radius dial and every corner rounds together. Spacing is named by intent — inset (padding), stack (vertical gap), inline (side-by-side gap) — so you know where each value goes; radius is just none / small / medium / full. Add your own steps, intents, or content widths whenever you outgrow the defaults. (Behind a flag: every component can also size itself Fit, Fill, or Fixed with optional min/max bounds and separate horizontal/vertical padding.)
Every component now wears a colour family — and you can re-skin it. Each component is seeded with the family that matches its role (CTAs → Primary, panels → Block, popovers/menus → Block highlight, inputs → App, the nav rail → the new Sidebar family). Pick a different family in Components → a component → Apply family and the live preview recolours instantly — the whole component, composite parts included — while the rest of your UI stays put. Structural components with no colour of their own (separators, spinners, layout wrappers) are intentionally left unthemed.
New Sidebar family. The sidebar/navigation rail now has its own family (surface, text, selected-item tint, divider, focus ring) so it's themeable like any other surface — previously its colours weren't owned by the design system.
Starter themes, a colour picker, and gradients. Primitives are now organised by role ramp (neutral, primary, accent, success, warning, error, info/blue), each a full 50→950 scale. Pick one of four starter themes (Orange, Blue, Purple, Teal) and your whole system recolours in a click. Every swatch opens a proper colour picker (visual + hex), and you can set a value as a solid or a gradient — gradients reference your family colours, so they follow your theme and dark mode automatically. Themes are editable (your tweaks stay with the theme). Existing libraries re-seed to the new role ramps on load.
Colour model moved to families (breaking). The flat semantic + component colour tiers are replaced by editable colour families — surfaces (app, block, block highlight, success/warning/error/info) and components (primary, secondary, tertiary, ghost, destructive). Edit a family once and every component that wears it updates; apply a family to a component and override any part. Existing alpha libraries are reset to the new preset (a backup of your old library is offered for download on first load).
User-facing docs site scaffolded (this site).
Hero grid extended to bleed past 1920px viewports.

2026-05-28 — Developer export: bundle + playground

New Developer page (replaces the Documentation page). Export your design system as a committable design/ bundle, or browse the whole library — tokens, components, principles — in one place.
Export bundle — one click downloads a ZIP: tokens.css, a Tailwind v4 theme.css preset, layout-principles.md, design-system.json, an AGENTS.md your AI coding agent follows, and a README. A tostada.json snapshot rides along for CI.
CLI — npx tostada-ui export regenerates the bundle from tostada.json (auto-found in the repo; --from / --out to override).
Component playground — pick any component, read its do/don't rules, tweak the snippet against a live preview, toggle variants, and copy. Tokens and principles get read-only catalog views with copy-to-clipboard.

2026-05-28 — Layout principles, rebuilt

New Layout principles surface in Library → Properties, preview-first. A live structural preview renders the active principle; edits repaint it within a moment, no save click.
Four principle types: shells, layouts (composed from labelled blocks), overlays (drawer / modal / toast / popover / full-page), and navigation defined per container as ordered nav levels (component + location + rules).
Application tags — every principle carries structured when to use and when NOT to use tags (content-type, has-filters, audience, …) so the Spread and AI agents can match and rule out pages.
Default preset ships with every library (1 shell + its nav + 7 layouts + 4 overlays + a z-index stacking order). Reset to default preset from the header "…" menu.
Block canvas for composing a layout's blocks (add / reorder / edit usage, flex/grid, tags).
Falls back gracefully when the preview-host (:5179) isn't running — the inline editor keeps working.

2026-05-27 — Typography tokens

New Typography section in Library: primitive font-family + font-size tokens, plus 11 semantic roles (typography-heading, typography-body, typography-code, …) that compose them.
Font picker with the bundled Google Fonts catalog (54 families) and system stacks. Loads with display=swap and surfaces an inline error if the network blocks it.
Scale generator computes the xs..3xl size ladder from a base + ratio (defaults 1rem / 1.25). Quick-picks for 1.2, 1.25, 1.333, 1.414, 1.5.
Guarded delete: deleting a primitive that semantic tokens reference opens a reassign modal — pick a replacement before the delete proceeds. The last primitive of either kind (family or size) can't be removed.
tokens.css export now includes typography variables (--font-family-*, --font-size-*, --typography-*-{family,size,weight,line-height,…}).

2026-05-20 — M5.5 post-MVP enhancements

Block picker for layout principles
Component detail page rebuild with per-variant rendering
Variant-aware code snippets
Tokens-used analyzer

2026-05-19 — M0–M5 MVP

Three-tier tokens (primitive · semantic · component)
Layout principles + design rules
Live component previews via sibling Vite app
Documentation export (tokens.css · design-system.md · design-system.json)
BYOK Anthropic key in Settings
Spread (mock pipeline)