Changelog · latest
@codeatlasdev/ui 1.2.0
4 changes. This release has no written post; the list below is generated from the changelog.
In short
- Design tokens v2: every visual dimension is a theme knob, so one co... Design tokens v2: every visual dimension is a theme knob, so one component set can render any design language.
- RadioGroup: variant="cards" (selectable cards with label and des... RadioGroup: `variant="cards"` (selectable cards with label and `description`, whole card is the hit area) and `aria-label`.
- Remove the legacy theme editor generator: editorTokensToCSS, edi... Remove the legacy theme editor generator: `editorTokensToCSS`, `editorPreviewCSS`, `DEFAULT_CONFIG` and the `ThemeConfig` type are gone, with no aliases.
Upgrade
Published under the latest dist-tag.
bun
npm
pnpm
yarn
Then run your checks. Moving between majors? bunx @codeatlasdev/ui migrate --from <major> --to <major> lists what to change, and agents get the same data from the MCP tool get_migration. The migration notes per major are inUpgrading.
Changesets
### Minor Changes
- e5b0fe8: Design tokens v2: every visual dimension is a theme knob, so one component set can render any design language.
- New `defineTheme` options: `controlRadius`, numeric or named `density` (`compact`/`comfortable`/`airy`), `border`, `typography` (scale, weights, heading/label tracking and case, line height, measure), `elevation` (`soft`/`none`/`hard`/`glow`), `motion` (scale, easing personality), `iconStroke`, `noise`. `designTokens()` exposes the mapping.
- Scales are parametric: spacing = 4px × step × `--ca-density` (new half steps 0.5/1.5/2.5/3.5 and 20/24), radius × `--ca-radius-scale`, type × `--ca-font-scale`, durations × `--ca-motion-scale` (0 under reduced motion). `[data-ca-tokens]` re-derives them inside an island.
- Fluid layout tokens: `--ca-gutter`, `--ca-section-gap`, `--ca-content-max`, fluid display sizes `--ca-font-size-display-1..3`. Role tokens: `--ca-radius-control`, `--ca-control-height*`, `--ca-border-width*`, `--ca-border-color`, `--ca-font-weight-*`, `--ca-heading-*`, `--ca-label-*`, `--ca-line-height-*`, `--ca-measure`, `--ca-icon-stroke`, `--ca-noise-opacity`, `--ca-ease-emphasized`.
- Material tiers read `--ca-mat-{tier}-{filter,fill,shadow}` and `--ca-mat-edge`. New surface styles: `outlined`, `neumorphic`, `clay`, `tonal` (alongside glass, frosted, solid, flat).
- Design style recipes: `designStyle(id, overrides)` and `DESIGN_STYLES` for Swiss, Neobrutalism, Neumorphism, Glassmorphism, Material 3, Fluent 2, Apple HIG, Bento, Claymorphism, Y2K, Editorial and Terminal.
- Headings read the theme's display family, heading weight, tracking and case; Lucide icons read `--ca-icon-stroke`.
- One breakpoint scale (600/900/1200/1536) everywhere, enforced by the token lint, which also rejects malformed `svelte-ignore` comments.
- e5b0fe8: RadioGroup: `variant="cards"` (selectable cards with label and `description`, whole card is the hit area) and `aria-label`. Option ids are now unique per instance, so two groups with the same values on one page no longer share label targets. CodeTabs: a plain `code` tab renders inside the framed `.ca-code` block as a focusable scroll region.
- e5b0fe8: Remove the legacy theme editor generator: `editorTokensToCSS`, `editorPreviewCSS`, `DEFAULT_CONFIG` and the `ThemeConfig` type are gone, with no aliases.
Replacement: `defineTheme()` + `themeCSS()` (or `designStyle(id, overrides)` for a recipe) cover every dimension the old hue/chroma/radius/spacing/shadow config exposed, and `[data-ca-tokens]` + `[data-style]` + `[data-theme-scope]` scope a theme to a single element. The theme editor at /theme/ is rebuilt on them: it starts from a design style recipe, edits any `ThemeDefinition` key and prints the exact `defineTheme({ ... })` call to paste.
Migrate: `ThemeConfig.hue/chroma/lightL` → `presets: [{ id, color }]`; `radiusBase` → `radius`; `spacingBase`/paddings → `density`; `fontSans`/`fontMono` → `fonts`; `shadowIntensity` → `elevation`; `surfaceStyle` → `defaultStyle`.
- e5b0fe8: Viewport hardening:
- `--ca-vh-min` (small viewport, `svh` with `vh` fallback) for full-screen sections, so a hero never hides its call to action behind the browser UI.
- Focus is never obscured by sticky chrome: `scroll-padding-block` on `:root` accounts for the header, safe areas and `--ca-sticky-top` / `--ca-sticky-bottom`.
- Prose heading anchors are always visible on touch screens (no hover-only affordance).
- BottomNav labels use an 11px floor.
- SimpleTable `responsive="cards"` captions every cell with its column header automatically; `data-label` only overrides.
- `caThemeHandle` warns in dev when the viewport meta blocks zoom (`user-scalable=no`, `maximum-scale=1`).