Zetta v1.6

What's New

What's New

Version history for the Zetta spec and this showcase. Each release tags its token and component changes as new, changed, or resolved.

v1.6 Current

Accessibility remediation and a token-integrity pass

A correctness release with one real accessibility fix at its centre: white on the dark danger button measured 2.77:1 and failed AA outright. No new components. Every factual claim in the system was audited against its own token sources — contrast figures recomputed, undefined token references resolved, and provenance repaired.

  • Changed Dark danger button remediation. White on danger-solid measured 2.77:1 — failing AA, AA-large and the 3:1 non-text floor. on-danger becomes #450a0a and the dark ramp now lightens under interaction (#f87171 → #fca5a5 → #fecaca), so contrast improves as you interact: 5.84 / 8.51 / 11.16. See Button.
  • Changed The Light danger ramp shifts to #dc2626 → #b91c1c → #991b1b (white on the old #ef4444 was AA-large only). danger stays #ef4444 and now deliberately differs from danger-solid in Light — the first is the icon token, the second the button fill.
  • Resolved About 30 incorrect contrast figures corrected across the themes and components. ink on canvas was documented as both 21.0:1 and 20.4:1 — it is 18.92:1. brand-600 on white was published as "5.12:1 (AA large)"; it is 1.67:1 and fails everything.
  • Resolved Seven undefined token references removed. A parallel z-index stack invented in the blanket spec is gone — the canonical scale is navigation 200 · popup 400 · blanket 500 · modal 510 · flag 600 · tooltip 800, and there is no dedicated drawer layer: side drawers share z-index.modal with dialogs. duration-enter / duration-exit never existed and are purged.
  • New Every table now requires a composition-settings control — column visibility, default sort, default page size, persisted per user. This applies to tables already shipped, not just new ones.
  • Changed Inline edit gains a trigger prop (button or hover); hover must also reveal on focus-visible and touch, never hover-only.
  • Note Carried forward unresolved: the brand shade ramp is non-monotonic (brand-600 is lighter than brand-500) so it must never be walked programmatically; status-icon-* holds hex in Light/Dark but Material Symbol names in Accessibility, so it cannot be typed uniformly. See Known gaps.
v1.5 Earlier

The palette collapses to three roles — BREAKING

The breaking release. Five palette roles become three: Secondary and Quaternary are deleted outright and Tertiary is renamed AI. Light Primary moves hue, both chart ramps are retuned and severed from the palette, and scrollbars become themed. Never distributed on its own — v1.6 is cumulative over it, so a v1.4 project upgrades straight to v1.6.

  • Changed The palette collapses from five roles to three. secondary (cyan) and quaternary (orange) are deleted; tertiary is renamed ai with its hex preserved and its purpose narrowed to AI, automation and premium. See Color.
  • Changed Repoint deleted roles by job, not by hue: informational contexts → info; urgency and deadlines → warning; links → primary; a neutral button surface → surface-muted. surface-secondary is a neutral and survives — it is not the deleted role.
  • Changed Light primary desaturates #4f46e5 → #5155C6, and primary-active moves from .70 to .92 alpha.
  • Changed Charts are severed from the palette. Series 1–5 previously mapped to primary / secondary / tertiary / quaternary / chart-5; they now map to chart-1…chart-5 directly, and both ramps were fully retuned. This is a rewrite of the series assignment, not a re-hex. See Chart.
  • New A scrollbar foundation — three tokens per theme plus the cross-browser recipe, so scrollbars follow the theme instead of the OS. Guardrails grow 16 → 17.
  • New Two new components: theme switcher and language switcher (77 total). Both are UI only — no i18n runtime, no theme-transition animation.
  • Changed Buttons are 8px narrower — paddingX 20px → 16px on every variant; height stays 32px. Deleted alongside the roles: accent-foreground, logo.primary-color, the gray-* ramp and white.
  • Note The upstream release shipped no migration guidance — no rename table, no deprecation window. The zetta-design-md skill carries a designer-approved v1.4 → v1.6 guide; that is the authority for the upgrade path.
v1.4 Earlier

Full atomization — one file per component

A non-breaking expansion. The component library splits into one spec file per component (75 total), adds accordion, tabs, dropdown and the overlay / feedback / form families as standalone components, introduces tab surface tokens and a full 50–950 colour ramp, and gives the Accessibility theme a global keyboard and selected-state model.

  • New The component library is fully atomized — 75 components, one per file, adding accordion, tabs, dropdown, and the overlay family (popover, hover-card, command-palette, context-menu) as standalone specs.
  • New The form family splits into standalone specs — text / textarea / number inputs, combobox, multi-select, checkbox, radio, slider and OTP input, plus label and field wrappers.
  • New New tab surface tokens (surface-tab-bg / surface-tab-active) back the tab list and active tab. See Tabs.
  • New The colour foundation gains a full 50–950 shade spectrum for every palette role. See Color.
  • New The Accessibility theme gains a global keyboard model and a selected-state visible-border rule across every interactive component.
  • Changed Lozenge radius moves from a full pill to rounded.base (8px) per spec review.
  • Note Non-breaking: no token-value or CTA changes. The five old combined files (form / control / navigation / overlay / feedback) were removed — every component is now standalone.
v1.3 Earlier

Off-white canvas + a first-class Accessibility theme

A non-breaking refinement. The Light theme moves to an off-white canvas, and the Accessibility theme graduates from a colour collapse to a fully specified high-contrast system — borders, fills, and icons now carry every cue that colour used to.

  • Changed Light canvas shifts #ffffff → #f8fafc (off-white) so white cards read as raised surfaces. Cards, headers and popovers stay #ffffff. See Color.
  • New Accessibility theme: a universal 1px white component border separates every bounded element from the black canvas (buttons, inputs, cards, badges, banners, lozenges, tabs, tables).
  • New Fill-based button differentiation — where hues collapse to white/black, Primary keeps a white fill while Secondary / Outline / Danger take a black fill + white border; Danger prefixes an error icon.
  • New White selected / active border-highlights (selected-border-*) replace fill changes — selected table row, active sidebar item, and active tab are marked by a 2px white accent.
  • New A status-icon + legend system (status-icon-success/warning/danger/info/neutral) — every semantic component pairs an icon with its label, and a per-view legend block explains each icon in plain language. See it on Badge.
  • Note Non-breaking: no CTA, token-name, or component-API changes. The long tail of component a11y overrides (pickers, range, stepper, menus) is tracked for a follow-up pass.
v1.2 Earlier

Five-role palette — Brand steps back, Indigo leads

The major reskin. Lime Brand becomes identity-only; Indigo Primary is every CTA and interactive state. A new elevation system, 16 guardrails, and an expanded, Atlassian-style component set.

  • Changed Brand Lime is now identity-only (logo, focus ring, spinner). Indigo primary (#4f46e5) is every CTA, hover, active state, badge and in-chrome link.
  • New A five-role palette — Primary (indigo), Secondary (cyan), Tertiary (purple), Quaternary (orange) alongside Brand (lime). See Brand & principles.
  • Changed A new elevation system replaces the flat shadow scale — surface tokens + shadow-raised / shadow-overlay + a z-index scale. Cards may now carry shadow-raised; Accessibility has no shadows.
  • Changed Guardrails grew 13 → 16 (Brand=identity, Primary=interaction, five-role hierarchy, motion respects prefers-reduced-motion). See the guardrails.
  • New An expanded spec set with Atlassian-style names. The showcase adopts the new taxonomy — Modal (was Dialog), Menu (was Dropdown), Date picker (was Calendar) — with redirects from the old routes.
  • Changed New tokens: spacing 2xs / md-lg / 2xl, two new type roles, a responsive grid, and a motion keyframe library.
  • Note Still open: per-component motion mapping, chart structure, page-level empty / loading states, and RTL. See Known gaps.
v0.10 Earlier

Foundation locked, showcase launched

The documented baseline. Three themes share one foundation; ~70 components are specified across 13 files; this showcase makes all of it browsable.

  • New This documentation & showcase site — 43 component reference pages, each with a live 3-theme preview, resolved spec, and a build-with-the-skill recipe.
  • New The header component — top / horizontal navigation, previously a known gap.
  • Changed border-strong is now a neutral grey structural border (it was lime in ≤v0.5). Only border-focus is lime.
  • Changed The -soft colour aliases were folded back into *-bg / brand-bg in the themes.
  • Resolved Focus states and convention standardization for dropdown-item, sidebar-nav-item, pagination-item, accordion-trigger, toggle and table-row are present in the component files (the theme files’ "Deferred" prose is stale).
  • Resolved The control consolidation (toggle + switch) shipped.
  • Note Still open: per-component motion mapping, chart structure, page-level empty/loading states, z-index, and RTL. See Known gaps.