Skip to content
On this page In short

Changelog · latest

@codeatlasdev/ui 1.2.0

4 changes. This release has no written post; the list below is generated from the changelog.

Release 1.2.0Three sketchbook pages stacked and slightly fanned, the front one tabbed with the version number and shaded with pencil hatching in the corner.1.2.0

In short

  1. 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.
  2. 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`.
  3. 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
bash
bun add @codeatlasdev/[email protected]
npm
bash
npm install @codeatlasdev/[email protected]
pnpm
bash
pnpm add @codeatlasdev/[email protected]
yarn
bash
yarn add @codeatlasdev/[email protected]

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`).