Anta design system

Changelog

All notable changes to the @antadesign/anta package are documented here. The format follows Keep a Changelog and the project tries to follow Semantic Versioning.

This file only tracks what ships to npm consumers — anything under src/, dist/, the build / generator scripts, and root files in the published tarball. Updates to the documentation site at antadesign.dev are not consumer-facing and are intentionally not in this changelog; see the commit history for the site narrative.

Versions ending in -dev.N are pre-release builds published under the npm dev dist-tag; main releases drop the suffix. Always pin a specific version in your package.json ("@antadesign/anta": "0.1.1-dev.1") rather than the floating "dev" tag — the floating tag tracks the latest dev build and will silently change between installs.

0.1.1-dev.5 — May 25, 2026

Breaking

  • <Button tone="custom"> removed. Pass any literal CSS color as the tone instead (tone="#ff1493", tone="oklch(0.6 0.25 30)", tone="rgb(255 20 147)", named colors, anything that parses as <color>). The JSX wrapper hands the color to the host via --button-tone-source on inline style; the CSS resolver extracts the hue with oklch(from var(--button-tone-source) … h) and runs it through the brand-tone L/C curve so every priority × state slot is populated automatically — hover/active darken on schedule, secondary alpha overlays anchor to the consumer’s color, tertiary and quaternary text colors all derive. Power-user style={{ '--button-fg-color': '#…' }} overrides still beat the resolver. Migration: drop the tone="custom" literal + the trio of --button-{bg,fg,br}-color inline declarations and just set tone to the source color. Relative-color oklch(from …) is the only modern-CSS dependency (Safari ≥16.4, Firefox ≥113, Chrome ≥119).

Changed

  • Button’s tone prop type widens: the 'custom' literal is dropped and the union gains (string & {}) so any color literal is type-safe while autocomplete on the six named tones stays intact. AButtonAttributes.tone mirrors the same widening.
  • <Button> now defaults to flex-shrink: 0. When the button sat as a flex item in a tight parent, it used to compress and silently clip its icon / label because the host carries overflow: hidden. The new default makes the button hold its natural width and overflow the parent instead — the loud failure mode. Consumers who want the old shrinkable behavior can opt back in with style={{ flexShrink: 1 }} per instance. The dedicated a-menu > a-button rule simplified accordingly (it used to set flex-shrink: 0 itself).
  • iconButton accepts an IconShape string in addition to boolean. <Button iconButton="check" /> is now equivalent to <Button iconButton leadingIcon="check" />; if both are set, the string form wins.
  • Icon-only buttons gain a min-width / min-height pinned to the natural square (small 20px, default 24px, large 28px) so a tight flex parent can no longer squeeze the host below the 16px icon.
  • Base cursor: pointer moved from the (deleted) shadow :host style into a-button.css, so anchor-mode buttons and JS-only consumers (no element CSS loaded yet) both pick it up.

0.1.1-dev.4 — May 6, 2026

Breaking

  • anta_global_tokens.css renamed to tokens.css and split. Consumers should update their import: @antadesign/anta/anta_global_tokens.css@antadesign/anta/tokens.css. The new file contains only the CSS custom property declarations on :root / :root.dark, plus a one-line @layer base, anta, components, utilities; cascade-order declaration. Tokens stay unlayered (custom properties don’t compete in the cascade).
  • New reset.css import carries the typography defaults that used to live alongside the tokens (h1-h6 { font-weight: 600 }, strong, ul / ol / li / menu, a link states) plus a modern small reset (universal box-sizing, margin reset, replaced-element block-display + max-width, form-control font inheritance, text-wrap defaults). All wrapped in @layer anta. Consumers who want Anta’s previous out-of-the-box look add import '@antadesign/anta/reset.css' alongside the tokens import; consumers who have their own reset can skip it.
  • All Anta CSS now lives in @layer anta — element rules (a-progress, a-text, a-icon, a-icon.shapes), the reset, and the generate-icons output. Token property declarations (the :root { --… } blocks) remain unlayered so they’re available everywhere unconditionally. The pre-declared layer order (base, anta, components, utilities) keeps Anta’s defaults above any preflight resets (Tailwind’s @layer base, etc.) while letting consumer components and utility classes override single properties when needed.

Changed

  • Progress component colors realigned with the “Anta 0.2” Figma library (frame 1313:1219). All four states (light × dark × neutral × info) updated. Every Progress colour now resolves through an existing global token: --bg-block / --bg-spot / --border-2 / --text-2 / --text-3 and their -info variants.
  • --progress-indicator-edge is now declared once at the base level and derives from --progress-border-color via CSS relative-colour syntax (rgb(from … r g b / 0) → var(…)). The right-edge gradient automatically tracks the border colour in every state.
  • <a-progress-number> color anchor moved from --text-1 / --text-1-info to --text-2 / --text-2-info, matching Figma’s component/progress/text-{neutral,info} tokens.
  • <a-progress-text> and <a-progress-hint> are now tone-aware: in tone="info" they pick up --text-2-info / --text-3-info instead of staying on neutral. Previously this was a visual bug — the descriptive label and hint stayed grey even when the rest of the component shifted to info-blue.

Added

  • New table-2 icon on <a-icon> (Lucide-derived). synonyms.json updated with search aliases (table, grid, data, spreadsheet, rows, columns); a-icon.shapes.{ts,css} regenerated.
  • New sun and moon icons on <a-icon> (Lucide-derived) for theme-toggle UIs.
  • New refresh-ccw-dot icon on <a-icon> (Lucide-derived) — used by the playground’s reset button and useful for any “revert to defaults” affordance.

0.1.1-dev.3 — May 5, 2026

Changed

  • Dark-mode text tokens --text-{3,4,5}-{success,critical,warning} re-anchored to their level-2 base hue (matching the light-mode pattern and the source-of-truth in the Figma “Anta 0.2” library). Visual effect in dark mode: success / critical / warning text at tertiary, quaternary, and quinary priorities shifts slightly toward the level-2 hue. Light-mode tokens are unchanged. All bg-* and border-* tokens were also audited against the same Figma source — no drift, no changes.

Removed

  • --text-white token. It was declared in anta_global_tokens.css but referenced nowhere in the package and is not part of the Figma “Anta 0.2” source-of-truth. Consumers relying on var(--text-white) should switch to #ffffff (or white) directly, or define their own variable.

0.1.1-dev.2 — May 3, 2026

Added

  • Five new icons on <a-icon>: swatch-book, hat-glasses, heart-handshake, hourglass, text-initial (Lucide-derived). synonyms.json updated; a-icon.shapes.{ts,css} regenerated.
  • Icon wrapper gains an optional label prop. When set, the wrapper exposes role="img" + aria-label={label} so the icon is announced. When omitted (the default), the icon is treated as decorative — aria-hidden="true" is applied so it doesn’t add noise alongside neighbouring text.
  • Progress wrapper now composes a single aria-label from label + percentage + hint, joined with ·, so screen readers announce what sighted users see in one phrase. The element still sets role="progressbar", aria-valuenow, and aria-valuemax independently.
  • general_types.ts: AProgressAttributes and AIconAttributes now declare typed ARIA attributes (role, aria-label, aria-valuenow, aria-valuemax, aria-valuemin, aria-hidden) so JSX type-checks the wrapper’s pass-through.

Changed

  • Convention strengthened (no API impact): ARIA wiring (role, aria-*, tabindex, etc.) lives in src/components/<Name>.tsx JSX wrappers as attribute pass-through, never inside the web component class. Web components stay pure declarative DOM — neither the constructor nor attributeChangedCallback mutates host attributes or inline styles. Documented in CLAUDE.md.
  • Default body font-weight in anta_global_tokens.css changed to 400 for both :root, .light (was 390) and .dark (was 350). The previous values applied a small optical-compensation offset so dark-mode text was rendered slightly thinner; the new values are uniform regular weight. Apps that override font-weight on :root or .dark are unaffected.

0.1.1-dev.1 — May 3, 2026

Added

  • :root, .light selector mirror in anta_global_tokens.css, so consumers can apply the light class to a subtree to opt back into light tokens explicitly even when a .dark ancestor would otherwise be in effect (useful for dark/light comparison demos).

0.1.0-dev.1 — May 2, 2026

Added

  • Text component + <a-text> element. Props: priority (primary / secondary / tertiary / quaternary / quinary), tone (brand / success / critical / warning / info), inline, truncate (true for single line, integer ≥ 2 for line-clamp), expandable (chevron + fade-out mask, click or Enter to expand).
  • Icon component + <a-icon> element. Mask-based icon set recolored via currentColor. size prop sets --icon-size. 80+ shapes derived from Lucide / Feather / Blueprint sources.
  • scripts/generate-icons.mjs — Node generator that emits a-icon.shapes.css and a-icon.shapes.ts from a folder of SVGs. The .ts file augments IconShapes via a declare module '@antadesign/anta' block, so consumer-generated icons auto-merge with Anta’s IconShape type.
  • Global element defaults in anta_global_tokens.css:
    • <a> styling — color, hairline (0.5 px) underline at 75 % alpha by default, --link-color-hover + 1 px underline on hover.
    • <ul> / <ol> get padding-left: 3ch and li::marker muted to --text-5; li gets a 0.5em bottom margin.
    • <menu> is reset (no list-style, no padding, no margins) so consumers can use it as a clean semantic container.
  • New tokens --link-color, --link-color-hover (in :root and .dark).
  • NOTICES.md at repo root attributing Lucide (ISC), Feather (MIT), and Blueprint (Apache 2.0) for derived icons; NOTICES.md is included in the published tarball.

Changed

  • Prose link styling moved out of the docs base.css and into Anta’s global tokens, so every consumer of anta_global_tokens.css gets the same defaults.

Notes for upgraders

  • If you were inlining your own a { color: ... } rule, Anta’s defaults will now apply unless overridden — the generated underline / link color / 1 px hover thickness / currentColor decoration mirror are picked up automatically. To opt out for a specific element, set text-decoration: none and your own color.
  • If you were styling <menu>, <ul>, or <ol> from scratch, expect the new defaults to take effect; override with more-specific selectors as needed.

0.0.x — through April 2026

Initial scaffolding: package layout, <Progress> component (<a-progress> element + Progress JSX wrapper), the light/dark CSS-token system imported from the Figma “Anta 0.2” library (background / text / border tokens × 5 levels × 5 tints + neutral, with hex + oklch dual declarations). No formal versioning during this period; treat as the seed of the design system.