@motion-proto/live-tokens 0.40.1 → 0.42.0

package/CHANGELOG.md

@@ -1,5 +1,165 @@
 # Changelog
 
+## 0.42.0 — Canvas, and every ramp places its base color
+
+### Changed (breaking)
+
+- **The "Background" palette family is renamed to "Canvas".** Its CSS namespace
+  was always `canvas` (`--color-canvas-*`, `--surface-canvas-*`), and every other
+  surface that names the family already said Canvas: the token selector,
+  SectionDivider's variant families, the shadows backdrop picker. Only the
+  palette label said Background, so the label joins the namespace. **No token
+  names change**, so consumer CSS is unaffected. The label doubles as a storage
+  key, so theme migration `2026-07-29-background-palette-to-canvas` renames the
+  `editorConfigs` key and any `harmonyAxes` family binding. It applies
+  automatically both when a theme file loads and when a persisted editor session
+  hydrates, and it runs before the axes are sanitized, which would otherwise drop
+  the now-ineligible family and silently unbind the axis. The shipped
+  `default.json` is rewritten under the new key.
+
+### Added
+
+- **The Colors view's swatch rows read as ramps.** Both rows (core families and
+  functional families) order their swatches by base-color luminance, light to
+  dark, matching the palette ramps. The selected swatch dock-magnifies through
+  the same `dockGrow` policy the palette grid and the derived-scale strip already
+  share, and it animates to its new position as its lightness is dialed, so the
+  selection is legible while it walks the row.
+
+### Removed
+
+- `Theme.harmonyOrder` and its migration path. The field only ever existed
+  between v0.40.1 and v0.41.0, superseded by `harmonyAxes` inside the same
+  release cycle, so nothing on disk carries it: a 0.41.0-saved theme wrote both
+  fields and `harmonyAxes` was already authoritative on load. Themes with
+  neither field still resolve to the default axes, with the unbound Quaternary
+  offset from the anchor's own hue.
+
+### Fixed
+
+- **Palette ramps now show the enlarged slot for the step the base color sits
+  at.** The dock magnification keys off `anchorPlacement`, which the July 24
+  migration only wrote for configs carrying the legacy locked-500 curve anchor;
+  a palette whose `anchorToBase` was on but never re-edited had no placement, so
+  its ramp never magnified anything. Theme migration
+  `2026-07-29-place-base-anchors` places those configs up front by pinning the
+  base color at the step whose curve lightness is nearest the base L, the same
+  thing a base-color edit has always done. It applies on theme load and on
+  session hydrate, skips configs that are already placed or have `anchorToBase`
+  off, and self-sunsets once every theme has been resaved with a placement.
+
+### Migration
+
+- Both migrations in this release are **theme-file migrations**: they run
+  automatically when a theme loads and when a persisted editor session hydrates.
+  No token names changed, so `tokens.css` is untouched and there is nothing for
+  `npx live-tokens migrate` to do. Consumers upgrade by bumping the dependency.
+
+## 0.41.0 — A Colors view, and semantic text styles
+
+### Added
+
+- **Colors: a third editor view, next to Tokens and Components.** It has two
+  sections. **Wheel** is a saturation-radial harmony wheel where every color
+  family that participates in harmony sits on a rail, with external rotation
+  handles per family plus one global rotation handle, a lightness bar under the
+  wheel, and an Absolute Chroma toggle that governs whether radius reads as
+  absolute or relative chroma. Nine harmony modes (complementary,
+  split-complementary, triadic, tetradic, compound, square, analogous,
+  monochromatic, custom) are picked from a row of geometry icons that draw the
+  mode's actual axis layout. Two one-shot actions sit alongside: "Tint neutrals
+  from anchor" re-hues Neutral and Alternate to the anchor color while keeping
+  their own chroma and lightness, and "Derive accessible text" solves each
+  family's Text lightness curve so the derived text clears WCAG AA against the
+  surfaces it sits on. Both are a single undo.
+- **Color Story: a proportional preview of the theme, built from seeds.** It
+  paints the seed base colors in their intended proportions rather than the
+  derived `--surface-*` tokens, so it tracks the wheel one-to-one, and it renders
+  the neutral text ladder (primary / secondary / tertiary) on each band with live
+  contrast readouts.
+- **Suggested neutral text hierarchy.** Color Story proposes a text ladder
+  anchored on the current primary, deriving secondary and tertiary as two even
+  OKLCH-lightness drops toward the background: hierarchy first, with AA (4.5) as
+  a floor rather than the driver. The floor is solved against the adverse extreme
+  of the neutral surface band, so a compliant suggestion holds AA on every band
+  surface; when the seed's reachable lightness window cannot span the band, it
+  falls back to the default surface and reports the reduced coverage. Coverage
+  alerts are informational and never block. "Use suggested" writes the Neutral
+  Text curve; "Use black and white" is available as the blunt alternative.
+- **Harmony runs on four fixed axes.** Anchor, Secondary, Tertiary and
+  Quaternary each own a hue whether or not a family is bound to them, and a new
+  Harmony axes list binds and unbinds families per axis. Neutral and Alternate
+  join Brand, Accent, Background and Special in the harmony-eligible pool.
+  Harmony rotates hue only: each palette keeps its own chroma and lightness.
+- **Semantic text styles: a role layer over the type primitives.** Eight named
+  style bundles ship in `tokens.css` (`heading-xl/lg/md/sm`, `body-md/sm`,
+  `code`, `eyebrow`), each a set of per-axis aliases (`--heading-xl-font-family`,
+  `--heading-xl-font-size`, `-font-weight`, `-line-height`, `-letter-spacing`,
+  plus `--eyebrow-text-transform`). Every value aliases an existing primitive
+  scale, so editing a style re-points an alias rather than minting a raw value,
+  and the responsive size shrink carries through for free. Additive migration
+  `2026-07-20-semantic-text-styles` (`kind: 'additive'`) inserts the bundle block
+  into a consumer's vendored `tokens.css`.
+- **Text Styles table in the editor.** Tokens → Typography gains a row per style
+  with pickers for family, size, weight, line-height and letter-spacing, plus a
+  text-transform picker on `eyebrow`, the one style that carries that axis.
+  `site.css` and the first-party surfaces consume the style layer instead of
+  re-declaring the same per-element type rules.
+
+### Changed (breaking)
+
+- **The line-height scale is reshaped from size vocabulary to leading
+  vocabulary.** `--line-height-xs/sm/md/lg/xl` become
+  `--line-height-none/tightest/tighter/tight/normal/relaxed`
+  (1, 1.1, 1.25, 1.35, 1.5, 1.75). Old values map by ratio: `xs`→`none`,
+  `sm`→`tighter`, `md`→`normal`, `lg`→`relaxed`; `xl` (2) has no slot in the new
+  scale and is dropped. Line-height now names by effect, matching the
+  letter-spacing scale. Token names are public API, so this ships with the paired
+  migration `2026-07-20-line-height-rename` (`kind: 'breaking'`); a consumer
+  applies it via `npx live-tokens migrate`, which rewrites their vendored
+  `tokens.css` declarations and every `var()` reference.
+- **Palette state is numeric OKLCH, not hex.** `PaletteConfig.baseColor` and
+  `overrides` change from hex strings to `{ l, c, h }`. The store holds the
+  user's unclamped intent and gamut clamping becomes projection-only, applied at
+  derivation output, canvas painting and CSS serialization. This removes the
+  hex round-trip that made wheel and slider gestures wobble. Theme migration
+  `2026-07-21-palette-oklch-basis` converts saved themes on load.
+- **The base-color anchor can sit at any step.** The old "lock base color to
+  position 500" flag becomes `anchorPlacement`, which records the step it pins
+  and remembers the anchor it displaced, so moving or releasing the placement
+  restores what was there. Theme migration `2026-07-24-base-anchor-placement`
+  adopts the legacy locked-500 anchor.
+- **The solid page background is the Background base color.** It used to be a
+  separately selected palette step (`emptyStep`), which is removed. Theme
+  migration `2026-07-25-background-spot-to-base` adopts the color the old spot
+  actually rendered, curves and overrides included, so a saved theme's page
+  renders identically. Gradient-mode configs are untouched.
+- **`Theme.harmonyOrder` is superseded by `Theme.harmonyAxes`.** The old field is
+  still read when `harmonyAxes` is absent, and still written on save so older
+  builds keep loading the file.
+- **Token names are otherwise unchanged.** The palette changes above are theme
+  schema changes, not `tokens.css` migrations, and every theme migration applies
+  automatically when a theme loads.
+
+### Removed
+
+- `TextTab` (`src/editor/ui/TextTab.svelte`) and its re-export. It was never
+  mounted; the Text Styles table supersedes it.
+
+### Fixed
+
+- The `2026-07-20-semantic-text-styles` migration set `--body-sm-line-height` to
+  `--line-height-normal` while the package default is `--line-height-tight`. A
+  migrating consumer now lands on the same value as a fresh install.
+- Vitest snapshots (`**/__snapshots__/**`) are excluded from the published
+  tarball.
+
+### Migration
+
+- Run `npx live-tokens migrate` to apply the two `tokens.css` migrations. The
+  line-height rename is `breaking` and never auto-applies, so it rides that
+  explicit command. Both are idempotent.
+
 ## 0.40.1 — Floating token-tag labels follow the theme
 
 ### Fixed

package/dist-plugin/{chunk-D77VD4Z6.js → chunk-H4TRUINI.js}

@@ -107,20 +107,9 @@ function escapeRe(s) {
 var tokensCssMigration_2026_05_29_typographyScaleAdditions = {
   id: "2026-05-29-typography-scale-additions",
   kind: "additive",
-  description: "Add --line-height-{xs..xl}, --letter-spacing-* and --ease-out-quart scales",
+  description: "Add --letter-spacing-* and --ease-out-quart scales",
   apply(css) {
     let out = css;
-    out = ensureScale(out, {
-      sectionComment: "Line height (t-shirt scale)",
-      anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
-      entries: [
-        { name: "--line-height-xs", value: "1" },
-        { name: "--line-height-sm", value: "1.25" },
-        { name: "--line-height-md", value: "1.5" },
-        { name: "--line-height-lg", value: "1.75" },
-        { name: "--line-height-xl", value: "2" }
-      ]
-    });
     out = ensureScale(out, {
       sectionComment: "Letter spacing",
       anchorPrefixes: ["--letter-spacing-", "--line-height-", "--font-size-", "--font-"],
@@ -263,6 +252,104 @@ var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
+var RENAMES = [
+  ["--line-height-xs", "--line-height-none"],
+  ["--line-height-sm", "--line-height-tighter"],
+  ["--line-height-md", "--line-height-normal"],
+  ["--line-height-lg", "--line-height-relaxed"]
+];
+var SCALE = [
+  { name: "--line-height-none", value: "1" },
+  { name: "--line-height-tightest", value: "1.1" },
+  { name: "--line-height-tighter", value: "1.25" },
+  { name: "--line-height-tight", value: "1.35" },
+  { name: "--line-height-normal", value: "1.5" },
+  { name: "--line-height-relaxed", value: "1.75" }
+];
+var tokensCssMigration_2026_07_20_lineHeightRename = {
+  id: "2026-07-20-line-height-rename",
+  kind: "breaking",
+  description: "Reshape --line-height-{xs..xl} to leading vocabulary (none/tightest/tighter/tight/normal/relaxed); retire the 2.0 slot",
+  apply(css) {
+    let out = css;
+    for (const [oldName, newName] of RENAMES) out = renameToken(out, oldName, newName);
+    out = removeToken(out, "--line-height-xl");
+    out = ensureScale(out, {
+      anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
+      entries: SCALE
+    });
+    return out;
+  }
+};
+
+// vite-plugin/tokensCssMigrations/migrations/2026-07-20-semantic-text-styles.ts
+var BUNDLE = [
+  { name: "--heading-xl-font-family", value: "var(--font-display)" },
+  { name: "--heading-xl-font-size", value: "var(--font-size-4xl)" },
+  { name: "--heading-xl-font-weight", value: "var(--font-weight-semibold)" },
+  { name: "--heading-xl-line-height", value: "var(--line-height-tightest)" },
+  { name: "--heading-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--heading-lg-font-family", value: "var(--font-display)" },
+  { name: "--heading-lg-font-size", value: "var(--font-size-2xl)" },
+  { name: "--heading-lg-font-weight", value: "var(--font-weight-semibold)" },
+  { name: "--heading-lg-line-height", value: "var(--line-height-tightest)" },
+  { name: "--heading-lg-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--heading-md-font-family", value: "var(--font-display)" },
+  { name: "--heading-md-font-size", value: "var(--font-size-xl)" },
+  { name: "--heading-md-font-weight", value: "var(--font-weight-semibold)" },
+  { name: "--heading-md-line-height", value: "var(--line-height-tighter)" },
+  { name: "--heading-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--heading-sm-font-family", value: "var(--font-sans)" },
+  { name: "--heading-sm-font-size", value: "var(--font-size-lg)" },
+  { name: "--heading-sm-font-weight", value: "var(--font-weight-semibold)" },
+  { name: "--heading-sm-line-height", value: "var(--line-height-tighter)" },
+  { name: "--heading-sm-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--body-md-font-family", value: "var(--font-sans)" },
+  { name: "--body-md-font-size", value: "var(--font-size-md)" },
+  { name: "--body-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--body-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--body-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--body-sm-font-family", value: "var(--font-sans)" },
+  { name: "--body-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--body-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--body-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--body-sm-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--code-font-family", value: "var(--font-mono)" },
+  { name: "--code-font-size", value: "var(--font-size-sm)" },
+  { name: "--code-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--code-line-height", value: "var(--line-height-normal)" },
+  { name: "--code-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--eyebrow-font-family", value: "var(--font-sans)" },
+  { name: "--eyebrow-font-size", value: "var(--font-size-sm)" },
+  { name: "--eyebrow-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--eyebrow-line-height", value: "var(--line-height-normal)" },
+  { name: "--eyebrow-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--eyebrow-text-transform", value: "none" }
+];
+var tokensCssMigration_2026_07_20_semanticTextStyles = {
+  id: "2026-07-20-semantic-text-styles",
+  kind: "additive",
+  description: "Add the semantic text-style bundles (--heading-*/--body-*/--code-*/--eyebrow-*)",
+  apply(css) {
+    return ensureScale(css, {
+      sectionComment: "Text styles \u2014 semantic typography roles",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 import fs from "fs";
 import path from "path";
@@ -315,7 +402,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
   tokensCssMigration_2026_06_03_transformScaleAdditions,
   tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
-  tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions
+  tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions,
+  tokensCssMigration_2026_07_20_lineHeightRename,
+  tokensCssMigration_2026_07_20_semanticTextStyles
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);