@motion-proto/live-tokens 0.91.2 → 0.92.0

package/.claude/skills/live-tokens-create-page/SKILL.md

@@ -79,7 +79,7 @@ Show related items side by side when the width permits. A line of copy runs 45 t
 - A native element with no chrome of its own needs no component: an `<input type="file">` behind a Button, a `<canvas>`, an `<img>` inside a stage.
 - Text inside a `Card` or a `CollapsibleSection` takes the container's type on nested `p`, `ul`, `ol`, and `li`. When the page owns that type, as full-bleed media does, pass `prose={false}`.
 - An empty stage shows a heading that names the condition and one `secondary` Button that fills it. An error goes in a `Callout variant="danger"`.
-- A container in a tool UI labels itself: `Card variant="bare"` with the label in the body as `--body-sm-*` in `--text-secondary`.
+- A container in a tool UI labels itself: `Card variant="bare"` with the label in the body as `.body-sm` in `--text-secondary`.
 - A row of fields is a flex row with `gap: var(--space-20)`; each field's wrapper takes `flex: 1`.
 - A toolbar is a flex row of Buttons on the section's bottom edge, with no container around it. Group the Buttons left and right with `justify-content: space-between`. A `danger` Button sits apart from the group it could be mistaken for. A vertical stack of Buttons sets `fullWidth` on each Button; a row omits it.
 - For a `MenuSelect` picker, toggle it from a Button with a trailing chevron (`icon="fa-solid fa-chevron-down" iconPosition="right"`) and position the list under the Button at `top: 100%` with a `--space-*` margin.
@@ -106,18 +106,25 @@ Show related items side by side when the width permits. A line of copy runs 45 t
 
 One text style per element. A text style has five axes: `-font-family`, `-font-size`, `-font-weight`, `-line-height`, and `-letter-spacing`. Set all five from the one style.
 
+The text styles fall into five usages, each a scale of seven steps from `2xs` to `2xl`: display for type outside the page outline, heading for the outline, body for interface text and short copy, editorial for long reading, and code. Each step is a style named `--{usage}-{step}-*`, such as `--body-sm-*`. Headings use the whole set. The other usages mostly take `md` and `sm`.
+
 | Element | Style |
 |---|---|
 | Page title | `h1` in `--heading-xl-*` |
 | Section title | `h2` in `--heading-lg-*`, or `SectionDivider variant="sm"` |
+| Title inside a section | `h3` to `h6` in `--heading-md-*` to `--heading-2xs-*` |
 | Card title | the Card `title` prop |
+| Hero title | `--display-xl-*` |
+| Big number | `--display-md-*` |
 | Label above a group | `--body-sm-*` in `--text-secondary` |
 | Body | `p` in `--body-md-*` |
 | Secondary line | `--body-sm-*` in `--text-secondary` |
 | Count, status, read-out | `--body-sm-*` in `--text-primary` |
-| Command or value | `code` in `--code-*` |
+| Article copy | `p` in `--editorial-md-*` |
+| Code block | `pre` in `--code-md-*` |
+| Command or value in a line | `code`, at `0.875em` of the text around it |
 
-Use the semantic element for each place: one `h1`, an `h2` for each section, `h3` inside a section, `p` for copy. Heading levels run in order with no skipped level. `site.css` types bare `h1` to `h4`, `p`, `code`, `pre`, and list items from these styles, so the tag carries the style. Type an element only when the table gives its tag a different style. A weight alone, on `strong` or a list marker, is the one axis a page sets by itself. A page shows at most two weights.
+Use the semantic element for each place: one `h1`, an `h2` for each section, `h3` inside a section, `p` for copy. Heading levels run in order with no skipped level. `site.css` types bare `h1` to `h6`, `p`, `small`, `code`, `pre`, and list items from these styles, so the tag carries the style. It also gives every step a class of the same name, such as `.display-md` or `.body-sm`, that sets all five axes. Type an element only when the table gives its tag a different style, and type it with the step's class. A weight alone, on `strong` or a list marker, is the one axis a page sets by itself. A page shows at most two weights.
 
 ### Size
 

package/.claude/skills/live-tokens-set-type/SKILL.md

@@ -14,7 +14,7 @@ The result is on screen as soon as the run finishes. The three set skills write
 1. Read the type intent and any anchor live-tokens-create-theme passed. When either names an anchor (a feeling, an idiom, or a genre), read its entry in `references/type-anchors.md`; it overrides the Voice table below.
 2. Choose the pairing and write it to `scratch/font-pairing.json`.
 3. Run `npx live-tokens set-type scratch/font-pairing.json`. It prints each stack that moved, each family's weights and URL, and, under Weight coverage, the weights the typography tokens ask for that the family lacks.
-4. Read the report. Name a missing weight and offer an alternative only when it matters: a body face without 400, 700, or italic matters, and a display face without 300 does not. A family not on Google Fonts fails the run. Fix the spelling and re-run. A pairing the stacks already hold prints "Nothing to change" and writes nothing. A pairing equal to the open theme's discards the buffer, and the report says so.
+4. Read the report. Name a missing weight and offer an alternative only when it matters: a body face without 400, 600, or italic matters, and a display face without 300 does not. A family not on Google Fonts fails the run. Fix the spelling and re-run. A pairing the stacks already hold prints "Nothing to change" and writes nothing. A pairing equal to the open theme's discards the buffer, and the report says so.
 5. Reply with the two families, the form model behind each, the matrix verdict, and any missing weight worth naming.
 
 Flags: `--dry-run` reports without writing. `--no-verify` skips the network and requires a URL per family; use it only offline.
@@ -25,13 +25,13 @@ Flags: `--dry-run` reports without writing. `--no-verify` skips the network and
 { "display": "Fraunces", "body": "Nunito Sans" }
 ```
 
-Every slot is optional; an omitted slot keeps its family. `display` is `--font-display` and `body` is `--font-sans`. `serif`, `mono`, and `editorial` exist when a theme needs them. `editorial` is `--font-editorial`, the long-reading face behind the `--editorial-*` text styles. An omitted `editorial` keeps its family, so set it only when essays and articles need a face of their own. Weight coverage is reported for `display`, `body`, `serif`, and `mono`. A family bound to `editorial` gets no coverage line. A slot may be `{ "name": "...", "url": "..." }` to pin a URL. A pinned URL is not probed, so the report shows no weights for it and coverage skips it. Spell families as Google does; the CLI reports the canonical spelling.
+Every slot is optional; an omitted slot keeps its family. `display` is `--font-display`, the face of the display and heading usages (`--display-font-family`, `--heading-font-family`). `body` is `--font-sans`, the face of the body usage (`--body-font-family`) and of `h4` to `h6`. `mono` is `--font-mono`, the face of the code usage (`--code-font-family`). `serif` exists when a theme needs it. `editorial` is `--font-editorial`, the long-reading face behind the editorial usage (`--editorial-font-family`). An omitted `editorial` keeps its family, so set it only when essays and articles need a face of their own. Weight coverage is reported for `display`, `body`, `serif`, and `mono`. A family bound to `editorial` gets no coverage line. A slot may be `{ "name": "...", "url": "..." }` to pin a URL. A pinned URL is not probed, so the report shows no weights for it and coverage skips it. Spell families as Google does; the CLI reports the canonical spelling.
 
 ## Choose the body face first
 
 The body face is the anchor. It carries most of the words, and text faces survive small sizes where display faces do not. Pick it against the type intent, then pick the display face against it. A body face has regular, bold, and italic; low to moderate stroke contrast; open apertures; and a large x-height. A face missing any of these is a display face, whatever its name says.
 
-The shipped text styles ask the display face for 600 and the body face for 400; `strong` and `em` add 700 and italic. Screen candidates against those four weights before running.
+The display and heading usages ask the display face for 600 through `--display-font-weight` and `--heading-font-weight`. The body usage asks the body face for 400 through `--body-font-weight`, and `h4` to `h6` ask it for 600. The code usage asks the mono face for 400 through `--code-font-weight`. `strong` asks for 600, and `em` adds italic. Screen candidates against those weights before running.
 
 ## The font matrix
 

package/CHANGELOG.md

@@ -1,5 +1,145 @@
 # Changelog
 
+## 0.92.0 — Type scales for text styles
+
+### Changed (breaking)
+
+- **The code text style's size, leading and tracking move to its md step.**
+  `--code-font-size`, `--code-line-height` and `--code-letter-spacing` become
+  `--code-md-font-size`, `--code-md-line-height` and
+  `--code-md-letter-spacing`. `--code-font-family` and `--code-font-weight`
+  keep their names and now set the code usage's face and weight. A `site.css`
+  copied from an earlier release still reads the old names, and check-page
+  reports each one as `unknown-token`. The next entry gives the `code` and
+  `pre` rules that replace them.
+- **Inline `code` sizes relative to its parent.** `site.css` sets `code` at
+  `0.875em`, so inline code in a heading grows with the heading, and
+  `pre code` takes the block's size. `code` and `pre` both read the code md
+  face, weight and letter spacing, and `pre` also reads its size and line
+  height. A project keeps the `code` and `pre` rules in its own copy of
+  `site.css` until it replaces them with these:
+
+  ```css
+  code {
+    font-family: var(--code-md-font-family);
+    font-size: 0.875em;
+    font-weight: var(--code-md-font-weight);
+    letter-spacing: var(--code-md-letter-spacing);
+  }
+
+  pre {
+    font-family: var(--code-md-font-family);
+    font-size: var(--code-md-font-size);
+    font-weight: var(--code-md-font-weight);
+    line-height: var(--code-md-line-height);
+    letter-spacing: var(--code-md-letter-spacing);
+  }
+
+  pre code {
+    font-size: inherit;
+  }
+  ```
+
+- **Every text style's `-font-size` resolves per viewport.** Each step
+  declares a `-desktop-font-size`, a `-tablet-font-size` and a
+  `-phone-font-size`. Its `-font-size` keeps its name, points at the desktop
+  size, and `tokens.css` re-points it at 768px and 480px. A tablet or phone
+  size starts at `16px × (desktop size ÷ 16px) ^ compression`, capped at the
+  desktop size, so sizes above 16px shrink and reading sizes hold.
+  Set a size through its desktop, tablet or phone name: a theme that sets
+  `-font-size` itself outweighs the breakpoint re-points. The sizes use CSS
+  `pow()`, which ships in Chrome and Edge 120, Firefox 118 and Safari 15.4.
+- **Heading sizes follow a major third from a 24px base.** h2 and h3 grow the
+  most and take distinct sizes on phones.
+
+  | Element | Desktop | Tablet | Phone |
+  |---|---|---|---|
+  | h1, `--heading-xl-font-size` | 36 → 37.5px | 30 → 30.3px | 28 → 27.4px |
+  | h2, `--heading-lg-font-size` | 24 → 30px | 22 → 25.6px | 20 → 23.8px |
+  | h3, `--heading-md-font-size` | 20 → 24px | 20 → 21.7px | 20 → 20.7px |
+  | h4, `--heading-sm-font-size` | 18 → 19.2px | 18 → 18.3px | 18 → 17.9px |
+
+  Body sm, editorial sm and the eyebrow move from 14px to 14.2px. Editorial
+  xl moves from 20px to 20.2px, and editorial lg holds 18px on desktops. On
+  tablets they ease to 19.1px and 17.5px, and on phones to 18.6px and 17.2px.
+  Body md, editorial md and code md keep their sizes.
+- **Each step's face and weight read its usage's settings.**
+  `--heading-xl-font-family` holds `var(--heading-font-family)`, and every
+  other step follows the same pattern, so one edit restyles a whole usage.
+  Each resolves to the face and weight it had before. Heading sm, xs and 2xs
+  pin `var(--font-sans)`, which keeps h4 in the sans face.
+
+### Added
+
+- **The display usage.** `--display-{2xs,xs,sm,md,lg,xl,2xl}-*` style type
+  outside the page outline, such as heroes, section titles and big numbers.
+  Display md is 48px on a minor third, so display xl is 69.1px.
+- **Seven steps in every usage.** Display, heading, body, editorial and code
+  each run 2xs, xs, sm, md, lg, xl and 2xl. md is the base, each step up
+  multiplies by the ratio, and each step down divides by it. Heading gains
+  2xl, xs and 2xs; body gains 2xl, xl, lg, xs and 2xs; editorial gains 2xl,
+  xs and 2xs; code gains every step beside md. The eyebrow gains a desktop, a
+  tablet and a phone size, which follow body sm.
+- **Scale settings for each usage.** `--{usage}-font-family`,
+  `--{usage}-font-weight`, `--{usage}-scale-base` and `--{usage}-scale-ratio`.
+  The base is a unitless count of rem, and a step's desktop size is
+  `base × ratio ^ n`, with n from -3 at 2xs to 3 at 2xl.
+
+  | Usage | Face | Weight | Base | Ratio |
+  |---|---|---|---|---|
+  | Display | display | semibold | 3 (48px) | 1.2, minor third |
+  | Heading | display | semibold | 1.5 (24px) | 1.25, major third |
+  | Body | sans | normal | 1 (16px) | 1.125, major second |
+  | Editorial | editorial | normal | 1 (16px) | 1.125, major second |
+  | Code | mono | normal | 0.875 (14px) | 1.125, major second |
+
+- **Compression settings.** `--type-tablet-scale-compression` (0.75) and
+  `--type-phone-scale-compression` (0.63) set how hard each tablet and phone
+  size pulls toward 16px. At 1 a viewport keeps the desktop sizes.
+- **`site.css` rules for h5, h6 and `small`, and a class for every step.**
+  h5 reads heading xs, h6 reads heading 2xs, and `small` reads body sm. Each
+  of the 35 steps has a class that sets its five tokens, from `.display-2xl`
+  to `.code-2xs`. `create` copies the new rules into a new project. An
+  existing project copies them from the package's `src/app/site.css`.
+
+### Changed
+
+- **The editor's Text Styles group holds a tab per usage.** A Responsive
+  scaling row opens the group with a tablet slider and a phone slider, each
+  showing its effect on 72, 48 and 24px. Each tab sets its usage's face,
+  weight, base and ratio, and lists its seven steps from 2xl to 2xs. A step
+  row shows its element, its desktop, tablet and phone sizes, a sample at the
+  preview viewport, and its face, weight, line height and letter spacing. A
+  face or weight follows the usage until you unlink it, and a size follows its
+  recommendation until you type another. A value that leaves its default
+  shows a reset icon, each tab's reset button restores its usage, and Reset
+  all restores the group. The Body tab ends with the eyebrow, whose sizes
+  follow body sm until you edit them.
+
+### Fixed
+
+- **Text Styles edits save with the theme and undo like every other edit.**
+  The pickers wrote straight to the page's `:root`, so an edit reached neither
+  the undo history nor Save. Every Text Styles edit now goes through the
+  editor store and lands in the theme's `cssVariables` on Save. A size edit
+  writes the step's desktop, tablet or phone size, so the breakpoint
+  re-points of its `-font-size` keep working in a promoted theme.
+
+### Migration
+
+- Run `npx live-tokens migrate`. The `2026-10-08-type-scales` tokens.css
+  migration is breaking, so the dev plugin's `autoMigrate` skips it, and
+  check-page reports it as `tokens-breaking-migration` until it runs. It
+  renames the three code tokens and every reference to them in `tokens.css`,
+  moves a step size you changed into that step's desktop size, keeps a face or
+  weight you changed in place of its link, adds the new tokens, and appends
+  the re-points to the 768px and 480px blocks. A changed size in rem or px
+  sets its step's tablet and phone sizes the way an edit in the editor does.
+  A changed size that aliases a primitive, such as `var(--font-size-5xl)`,
+  keeps the scale's tablet and phone sizes.
+- Themes need no migration. The editor never saved a text-style edit, so no
+  theme holds one.
+
 ## 0.91.2 — Sketch mode claims its parts at ID weight
 
 ### Changed

package/bin/lib/tokenVocabulary.mjs

@@ -40,8 +40,8 @@ function capitalize(id) {
 export const CONTRACT_SCALES = [
   'surface', 'text', 'border', 'border-width', 'color', 'space', 'radius', 'font', 'line-height',
   'letter-spacing', 'shadow', 'blur', 'icon-size', 'scrim', 'tint', 'columns',
-  'heading', 'body', 'editorial', 'eyebrow', 'code', 'easing', 'duration', 'zoom',
-  'gradient', 'stroke',
+  'display', 'heading', 'body', 'editorial', 'eyebrow', 'code', 'type', 'easing', 'duration',
+  'zoom', 'gradient', 'stroke',
 ];
 
 /** True when `name` belongs to a contract-governed scale, so a miss is a typo. */

package/bin/rules/testRuns.mjs

@@ -99,7 +99,7 @@ export const pageRules = {
     severity: 'error',
     repair: 'authored',
     guidance:
-      'The finding names the page file, the line of the text element, and the nearest bundle it missed. Set the text style on the text element itself, from one shipped bundle: heading, body, editorial, or code, each printed by `npx live-tokens tokens --scale <name>`. An ancestor typed for a different role hands down the wrong style.',
+      'The finding names the page file, the line of the text element, and the nearest bundle it missed. Set the text style on the text element itself, from one shipped bundle: display, heading, body, editorial, or code, each printed by `npx live-tokens tokens --scale <name>`. An ancestor typed for a different role hands down the wrong style.',
   },
   'page-contrast': {
     severity: 'error',

package/bin/rules/tokens.mjs

@@ -75,7 +75,7 @@ export const pageRules = {
     severity: 'error',
     repair: 'choice',
     guidance:
-      'Set every axis from one text style bundle, -font-family through -letter-spacing. The text styles are heading, body, editorial, and code, and `npx live-tokens tokens --scale heading` prints one of them. Rewrite a font: shorthand the same way.',
+      'Set every axis from one text style bundle, -font-family through -letter-spacing. The text styles are display, heading, body, editorial, and code, and `npx live-tokens tokens --scale heading` prints one of them. Rewrite a font: shorthand the same way.',
   },
   'hardcoded-columns': {
     severity: 'warn',
@@ -328,7 +328,7 @@ function checkDeclaration(decl, { text, region, vocab, at }, add) {
       add(
         'raw-text-axis',
         at(index),
-        `${prop}: ${value}. ${axis} is one axis. Set every axis from one text style bundle (--heading-*, --body-*, --editorial-*, --code-*).`,
+        `${prop}: ${value}. ${axis} is one axis. Set every axis from one text style bundle (--display-*, --heading-*, --body-*, --editorial-*, --code-*).`,
       );
       return;
     }
@@ -344,7 +344,7 @@ function checkDeclaration(decl, { text, region, vocab, at }, add) {
       add(
         'raw-text-axis',
         at(index),
-        `${prop}: ${value}. Set type from a text style bundle (--heading-*, --body-*, --editorial-*, --code-*).`,
+        `${prop}: ${value}. Set type from a text style bundle (--display-*, --heading-*, --body-*, --editorial-*, --code-*).`,
       );
       return;
     }