Changelog
Notable changes to the Control Room design system. The format follows Keep a Changelog and the project follows Semantic Versioning.
From 1.0.0 onward each package also carries its own CHANGELOG.md, generated by
Changesets.
[1.0.0]
Section titled “[1.0.0]”First release, published privately to GitHub Packages under the @alebianco
scope. Installing needs a GitHub token with read:packages — see
Getting Started.
- Design language — the nine laws. Each law is a decision procedure with
explicit
MUST/SHOULD/NEVERrules, grounded in research rather than taste. See design language. - Token layer. One machine-readable source
(
packages/tokens/tokens/tokens.json) drives four core themes — dark, light, extreme, phosphor — plus six brand themes (aurora, boardroom, ember, harbor, porcelain, slate) and theme-independent chassis, typography, and motion tokens. Any component built from tokens survives a theme flip with zero per-theme code. Exported as theme CSS, a Tailwind v4@themelayer, a flat map, DTCG, and a machine-readable theme contract. - Component library. 83 catalogued entries — components, blocks, and
utilities — each with an anatomy, token list, variants, copy-ready markup,
motion, and accessibility notes. The CSS layer ships as 73 framework-agnostic
cr-parts. - Interactive components for six frameworks. Anything with real state,
keyboard behaviour, or ARIA is authored once as Mitosis
.lite.tsxand compiled to React, Vue, Svelte, Angular, Solid, and Qwik. The compiled output appliescr-classes and carries no styling of its own. - Styling contract. A PrimeVue-shaped
pt/dt/unstyledoverride API over the single-source model, so consumers can restyle without forking. - Forms. Declarative form controls with an ArkType / JSON-Schema validation contract and per-field re-render isolation.
- Motion. Four motion tiers, the glitch/CRT vocabulary, and a reduced-motion contract.
- Accessibility. A WCAG 2.1 AA contract for the aesthetic, enforced in CI by an axe-core gate across every theme — not merely documented.
- Responsive architecture. Container-query driven, with a CI gate against horizontal overflow at 375 / 768 / 1024.
- Decoration. Seeded pixel-cat and pixel-sigil generators (identity from
seed, pose/hue from state), seeded ASCII density fields, and a
decorative-only contract (
aria-hidden, whisper, mask-faded). - 24 pixel icons, filled on a consistent 24×24 grid.
- AI-native surfaces. An MCP server (
npx @alebianco/cr-mcp) exposing the catalog, theme contract, and reference docs as tools and resources;llms.txt/llms-full.txt; a queryablecatalog.json; and the whole system as an installable agent skill. - Docs site — Astro + Starlight, with a live gallery and a component browser covering every theme.
Packages
Section titled “Packages”| Package | Contents |
|---|---|
@alebianco/cr-tokens | Token layer — theme CSS, Tailwind @theme, DTCG, theme contract |
@alebianco/cr-styles | The cr- component CSS (73 parts) |
@alebianco/cr-components | Interactive components for six frameworks |
@alebianco/cr-icons | Pixel icon set |
@alebianco/cr-utils | cn, theme switching, duration/time-scale, form validation |
@alebianco/cr-mcp | MCP server over the catalog and docs |
@alebianco/cr-skill | The system as an installable agent skill |