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.
- New
Titlecomponent (<a-title>styled tag +TitleJSX wrapper) for headings at one of sixlevels. Drives both the type scale (font-size + line-height) and the vertical rhythm (logicalmargin-blockper level); also surfacesrole="heading"+aria-levelfor assistive tech. MirrorsText'spriority(primary-quinary, mapping to--text-1...--text-5) andtone(brand,success,critical,warning,info) APIs. Children are arbitrary — pass icons, badges, or any inline content beside the title text; there are noleadingIcon/trailingIconprops. <a-title>is intentionally CSS-only — nocustomElements.define, no shadow DOM. The browser treats it as a generic unknown element and the rules indist/elements/a-title.cssdo all the work, so consumers who import@antadesign/anta/elementsget it for free.
src/reset.cssnow styles raw<h1>-<h6>to match<Title level={n}>at the defaultprimarypriority / no tone — same demi-bold weight (584.62), letter-spacing (0), per-level font-size, line-height, and logical block margins. Reach for a real heading tag when SEO matters and you don't needtone/priority; reach for<Title>when you do.
anta_global_tokens.cssrenamed totokens.cssand 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.cssimport carries the typography defaults that used to live alongside the tokens (h1-h6 { font-weight: 600 },strong,ul / ol / li / menu,alink 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 addimport '@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.
- 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-3and their-infovariants. --progress-indicator-edgeis now declared once at the base level and derives from--progress-border-colorvia 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-infoto--text-2/--text-2-info, matching Figma'scomponent/progress/text-{neutral,info}tokens.<a-progress-text>and<a-progress-hint>are now tone-aware: intone="info"they pick up--text-2-info/--text-3-infoinstead 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.
- New
table-2icon on<a-icon>(Lucide-derived).synonyms.jsonupdated with search aliases (table,grid,data,spreadsheet,rows,columns);a-icon.shapes.{ts,css}regenerated. - New
sunandmoonicons on<a-icon>(Lucide-derived) for theme-toggle UIs. - New
refresh-ccw-doticon on<a-icon>(Lucide-derived) — used by the playground's reset button and useful for any "revert to defaults" affordance.
- 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. Allbg-*andborder-*tokens were also audited against the same Figma source — no drift, no changes.
--text-whitetoken. It was declared inanta_global_tokens.cssbut referenced nowhere in the package and is not part of the Figma "Anta 0.2" source-of-truth. Consumers relying onvar(--text-white)should switch to#ffffff(orwhite) directly, or define their own variable.
- Five new icons on
<a-icon>:swatch-book,hat-glasses,heart-handshake,hourglass,text-initial(Lucide-derived).synonyms.jsonupdated;a-icon.shapes.{ts,css}regenerated. Iconwrapper gains an optionallabelprop. When set, the wrapper exposesrole="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.Progresswrapper now composes a singlearia-labelfromlabel+ percentage +hint, joined with·, so screen readers announce what sighted users see in one phrase. The element still setsrole="progressbar",aria-valuenow, andaria-valuemaxindependently.general_types.ts:AProgressAttributesandAIconAttributesnow declare typed ARIA attributes (role,aria-label,aria-valuenow,aria-valuemax,aria-valuemin,aria-hidden) so JSX type-checks the wrapper's pass-through.
- Convention strengthened (no API impact): ARIA wiring (
role,aria-*,tabindex, etc.) lives insrc/components/<Name>.tsxJSX wrappers as attribute pass-through, never inside the web component class. Web components stay pure declarative DOM — neither the constructor norattributeChangedCallbackmutates host attributes or inline styles. Documented inCLAUDE.md. - Default body
font-weightinanta_global_tokens.csschanged to400for both:root, .light(was390) and.dark(was350). 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 overridefont-weighton:rootor.darkare unaffected.
:root, .lightselector mirror inanta_global_tokens.css, so consumers can apply thelightclass to a subtree to opt back into light tokens explicitly even when a.darkancestor would otherwise be in effect (useful for dark/light comparison demos).
Textcomponent +<a-text>element. Props:priority(primary/secondary/tertiary/quaternary/quinary),tone(brand/success/critical/warning/info),inline,truncate(truefor single line, integer ≥ 2 for line-clamp),expandable(chevron + fade-out mask, click or Enter to expand).Iconcomponent +<a-icon>element. Mask-based icon set recolored viacurrentColor.sizeprop sets--icon-size. 80+ shapes derived from Lucide / Feather / Blueprint sources.scripts/generate-icons.mjs— Node generator that emitsa-icon.shapes.cssanda-icon.shapes.tsfrom a folder of SVGs. The.tsfile augmentsIconShapesvia adeclare module '@antadesign/anta'block, so consumer-generated icons auto-merge with Anta'sIconShapetype.- 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>getpadding-left: 3chandli::markermuted to--text-5;ligets a0.5embottom 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:rootand.dark). NOTICES.mdat repo root attributing Lucide (ISC), Feather (MIT), and Blueprint (Apache 2.0) for derived icons;NOTICES.mdis included in the published tarball.
- Prose link styling moved out of the docs
base.cssand into Anta's global tokens, so every consumer ofanta_global_tokens.cssgets the same defaults.
- 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 /currentColordecoration mirror are picked up automatically. To opt out for a specific element, settext-decoration: noneand your owncolor. - If you were styling
<menu>,<ul>, or<ol>from scratch, expect the new defaults to take effect; override with more-specific selectors as needed.
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.