@motion-proto/live-tokens 0.73.0 → 0.75.0

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

@@ -0,0 +1,149 @@
+---
+name: live-tokens-set-colors
+description: Set a live-tokens theme's color: ten OKLCH base colors, a light or dark scheme, and a WCAG AA-gated contrast check. Called with an anchor and a color intent by live-tokens-create-theme, or with the user's request directly. Use when the user asks for a palette, colors, or hues by mood, style, era, season, holiday, or hue. Use when the user names only a color. Use when the user refines a theme's color: warmer, cooler, calmer, louder, lighter, darker, moodier, more contrast. Changes color only. For a request that also names type or geometry, read live-tokens-create-theme.
+---
+
+# Setting a theme's colors
+
+Choose ten base colors. The CLI builds every ramp from them, checks AA
+contrast, and prints a contrast report. Never write theme JSON by hand and
+never edit the data tree.
+
+The result is on screen as soon as the run finishes. The three set skills
+write the same buffer, so color, type, and geometry compose in any order. When
+the user accepts the result, run `save-theme` to keep it as a theme. Loading a
+theme in the editor discards it.
+
+## Workflow
+
+1. Read the color intent and any anchor live-tokens-create-theme passed. When either names an anchor (a feeling, an idiom, an occasion), read its entry in `references/color-anchors.md`; it overrides the generic ranges below.
+2. Translate the intent into ten base colors with the framework below and write them to `scratch/<slug>-base-colors.json`. Keep this file for later refinements. The saved theme also records the base colors.
+3. Run `npx live-tokens set-colors scratch/<slug>-base-colors.json`.
+4. Read the report. Exit 0 passes, and auto-corrected values count as passing. On a contrast failure, exit 1 names the base color to change and the move: raise its lightness or reduce its chroma. On a bad file, exit 1 names the field. Fix the file and re-run.
+5. Reply with the anchor if any, the scheme, the hue families, the Canvas base color, and anything the contrast report auto-corrected.
+
+`--dry-run` prints the report without writing.
+
+## The base color file
+
+```json
+{
+  "scheme": "light",
+  "baseColors": {
+    "Brand":     { "l": 0.62, "c": 0.17, "h": 145 },
+    "Accent":    { "l": 0.80, "c": 0.15, "h": 95 },
+    "Special":   { "l": 0.60, "c": 0.19, "h": 300 },
+    "Canvas":    { "l": 0.93, "c": 0.04, "h": 120 },
+    "Neutral":   { "l": 0.55, "c": 0.012, "h": 140 },
+    "Alternate": { "l": 0.58, "c": 0.009, "h": 60 },
+    "Info":      { "l": 0.60, "c": 0.15, "h": 255 },
+    "Success":   { "l": 0.60, "c": 0.16, "h": 150 },
+    "Warning":   { "l": 0.75, "c": 0.15, "h": 85 },
+    "Danger":    { "l": 0.58, "c": 0.20, "h": 25 }
+  }
+}
+```
+
+A base color is the one color a palette's whole ramp derives from.
+
+- `baseColors`: all ten required. Each is an OKLCH triple or a `"#rrggbb"` string in its place. `l` is lightness, above 0 and below 1. `c` is chroma, 0 for grey and at most 0.4. `h` is hue in degrees.
+- `scheme`: `"light"` or `"dark"`.
+- `canvasGradient` (optional): a boolean, default off. See Canvas sky and shadows.
+- `harmony` (optional): `{ "mode": "<mode>" }`, a record of the harmony the base colors follow. The CLI validates the mode and derives nothing from it. The modes are the ones the Harmony section names, plus `custom`.
+
+Roles: **Brand** is the dominant chromatic identity; **Accent** the supporting color; **Special** the rare expressive tertiary; **Canvas** is the page background verbatim; **Neutral** drives neutral surfaces and body text; **Alternate** is the second near-grey family; the four statuses are conventional signals.
+
+## Chroma budget
+
+The more area a palette covers, the less chroma it gets.
+
+| Tier | Palettes | Chroma |
+|---|---|---|
+| Ground (about 60% of every screen) | Neutral, Alternate | C 0.008 to 0.02 |
+| Canvas (the largest single area) | Canvas | C 0.02 to 0.14, by commitment level (see Canvas commitment) |
+| Dominant chromatic (about 30%) | Brand | C 0.10 to 0.20 |
+| Garnish (about 10%) | Accent, Special | may exceed Brand; at most one at the gamut cap for its hue (see Gamut guardrails) |
+| Conditional | Info, Success, Warning, Danger | C 0.12 to 0.19 |
+
+A good theme reads as 3 or 4 hue families on screen, never 10. Neutral and Alternate stay near-grey, tinted toward the theme: Neutral near Brand's hue, Alternate offset 15 to 60 degrees or a warm/cool counterpoint. Pure C = 0 only when an anchor calls for it.
+
+## Per-role ranges
+
+| Base color | Light scheme | Dark scheme | Hue |
+|---|---|---|---|
+| Canvas | L 0.92 to 0.98, C 0.02 to 0.06 | L 0.15 to 0.28, C 0.01 to 0.05 | Brand's hue or its harmony slot |
+| Neutral, Alternate | L about 0.55, C 0.008 to 0.02 | same | per the chroma budget |
+| Brand | L 0.45 to 0.62, C 0.12 to 0.20 | L 0.70 to 0.83, C cut by a third | the request's identity hue |
+| Accent | harmony slot, or at least 0.25 L from Brand when the mode collapses hue distance | lighten and desaturate like Brand | harmony slot |
+| Special | most expressive; default Brand hue +60 at about 65% of Brand's C | same transform | harmony slot |
+| Info | shared status L (0.55 to 0.65 light) | lighten like Brand | H 230 to 260 |
+| Success | shared status L | same | H 140 to 155 |
+| Warning | L 0.75 or higher (vivid yellow must be light) | same | H 70 to 90 |
+| Danger | shared status L, C 0.15 to 0.20 | same | H 20 to 30 |
+
+Three rules cross every role:
+
+- A dark scheme transforms every base color: each chromatic one lightens to L 0.75 to 0.85 and drops about a third of its chroma, because saturated color vibrates on dark grounds.
+- Equal lightness reads as equal weight: give the four statuses one shared L, and do the same for Brand and Accent when they should balance.
+- Status hues never rotate with the harmony; only their L and C adapt to the mood.
+
+**The canvas carries the theme's identity, so commit to it.** The page background is the largest area on screen and the strongest difference between themes; a timid canvas makes every theme look the same. Below C 0.015 at L 0.95 a tint is imperceptible, so near-white is a choice for a clean or minimal intent, never a default. The canvas sits in one of three ranges:
+
+1. *Tinted paper* (most UI intents): C 0.02 to 0.06, with L down to 0.92 where the hue needs room.
+2. *Colored ground* (expressive intents): L 0.85 to 0.92 at C 0.05 to 0.10. The page is unmistakably mint, parchment, sky.
+3. *Full-color ground* (holiday and statement intents): the canvas is the theme color, like a red Christmas page with green and gold on it. Keep canvas L at or below 0.48 or at or above 0.85 so text has somewhere to go; the contrast gate enforces legibility either way.
+
+Blue tints cap very low at high L (H 264 at L 0.95 barely reaches C 0.03), so lower L for a blue canvas rather than fighting the ceiling; yellow, green, and cream tint generously at high L. Across a set of themes, make the canvases pairwise distinct in hue or in L. Two light themes both near (0.97, 0.01) read as one theme with different buttons.
+
+## Mood dials
+
+Pleasantness rises with lightness (strongly) and saturation (weakly); energy rises with saturation; drama rises with dark plus saturated. Dominance, the third axis, is carried by surface contrast, type weight, and tightness rather than by color.
+
+Warm is hues 20 to 110 plus pink 290 to 360; cool is 140 to 290. For an intent that names a feeling, read `references/color-anchors.md` rather than guessing the dial settings.
+
+Avoid mid-lightness yellow-green (H 100 to 120 at L 0.5 to 0.7, C about 0.1) unless the intent asks for olive or toxic.
+
+## Gamut guardrails
+
+The engine clamps to gamut regardless; these keep the intent achievable.
+
+- Dark saturated yellow does not exist: H 90 at L 0.4 caps at C 0.08 and reads olive. Vivid yellow needs L 0.8 or more. Brown is dark low-chroma orange.
+- Vivid light blue does not exist: H 264 at L 0.9 caps at C 0.05. Rich blue lives at L 0.40 to 0.55.
+- Teal and sky cap at C 0.15.
+- Peak chroma anchors: red H20 C 0.25 at L 0.63; orange H60 C 0.18 at L 0.76; yellow H90 C 0.18 at L 0.86; green H140 C 0.28 at L 0.88; blue H264 C 0.28 at L 0.50; magenta H320 C 0.31 at L 0.65.
+
+## Harmony
+
+Hue offsets from Brand: complementary +180; split-complementary +150/+210; triadic +120/+240; tetradic +60/+180/+240; square +90 steps; compound +30/+180/+210; analogous plus or minus 30; monochromatic same hue.
+
+- A vague or single-adjective intent takes monochromatic or analogous, with Accent separated from Brand by L and C rather than hue. The polished-UI default: Accent at Brand's hue and about 45% of its chroma, Special at +60 and about 65%.
+- An intent naming two colors: measure their hue gap and pick the matching mode (green plus gold is 60 to 90 degrees, so analogous or compound).
+- Drama or maximum contrast: complementary, triadic, or tetradic, and then tone one side down, since max-chroma text on a near-black ground vibrates.
+
+## Canvas sky and shadows
+
+`"canvasGradient": true` renders the page background as a vertical gradient from the Canvas ramp. Default off. Turn it on only when the intent evokes atmosphere (sky, night, dusk, glow, underwater) or asks for a gradient outright; keep it off for crisp, flat, minimal, or corporate intents and whenever in doubt, because a sky on every theme stops meaning anything. It needs a Canvas base color with L above 0.10 and below 0.90. Outside that range the engine skips it and says so. Say why it is on, in one line.
+
+Shadow opacity derives from Canvas lightness and re-derives on every run, so there is nothing to choose. When shadows read heavy or muddy, raise the Canvas base color's L.
+
+## Refining a theme's color
+
+"Warmer", "calmer", "more contrast" arrive against a theme that is already open, and the answer is a new base color file. Edit `scratch/<slug>-base-colors.json` when it is still there. When it is not, recover the ten base colors from `src/live-tokens/data/themes/<slug>.json`: each one sits at `colorsAndType.editorConfigs.<Palette>.baseColor` as an OKLCH triple, and the Canvas base color's lightness gives the scheme. Rebuild the base color file from those values, move the dial the user named, and re-run.
+
+A re-run replaces the buffer's palette state, including palette edits made in the editor since the last run. Swatch gradients tuned in the editor carry through, and the report says which. Say so once when iterating.
+
+One adjective moves one dial. Warmer and cooler rotate hue; calmer and louder move chroma; lighter, darker, and moodier move Canvas L and the scheme; more contrast widens the L gap between Canvas and Brand and takes chroma out of the ground rather than adding it to the garnish. Leave every base color the user did not name alone, because a refinement that re-rolls the whole palette reads as a different theme and loses the thing they liked.
+
+## Scope
+
+Color only. Fonts, geometry, saved themes, `tokens.css`, and `fonts.css` are
+untouched: `set-colors` replaces the color state in the buffer and carries
+every other value in it forward. `save-theme` keeps the result; Adopt ships it.
+
+## Verify
+
+- The CLI exits 0 with every check passing (auto-corrected is fine), and the report names which layer the non-color values came from.
+- The app (dev server running) shows the new palette.
+- The editor's Theme panel marks the open theme as edited. A dry run marks nothing, and neither does a run whose report says the open theme or the shipped default already holds these colors.
+- The canvas is committed: on screen it reads as the theme's color rather than as generic near-white.
+- To revert, re-run with the previous base color file, or load the open theme again to discard the buffer.

package/.claude/skills/live-tokens-set-colors/references/color-anchors.md

@@ -0,0 +1,80 @@
+# Color anchors: feelings, idioms, and occasions
+
+Read this when the color intent names one of these. Entries are starting
+points: apply the chroma budget, the per-role bands, and the canvas commitment
+rules from SKILL.md on top of them.
+
+An idiom sets constraints and overrides the generic defaults in SKILL.md. The
+polished-UI Accent at 45% of Brand's chroma is right for a vague intent and
+wrong for Bauhaus. A feeling moves dials, and moves them inside an idiom's
+constraints when the intent names both.
+
+Energy spent on the ground tier fights the contrast gate, so keep chroma on the
+garnish. A low-valence, low-energy intent taken literally reads as broken
+rather than sad, which is why every dark entry below holds one moment of color.
+
+Riso, Memphis, and brutalist break the chroma budget on purpose. Break it in
+the one layer the style is about and hold the rest of the ground tier down.
+
+## Feelings
+
+| Anchor | Anchors (L, C, H) |
+|---|---|
+| Joyful, exuberant, energetic | butter canvas (0.95, 0.05, 90), Brand (0.80, 0.17, 75), coral Accent (0.72, 0.18, 20), green Special (0.75, 0.16, 145); analogous warm. Yellow stays yellow only above L 0.80 |
+| Playful, whimsical | tinted canvas (0.93, 0.05, 330), Special at full chroma; tetradic, the rare request that wants four hue families |
+| Optimistic, hopeful | sky canvas (0.94, 0.03, 220), Brand (0.62, 0.14, 200), warm yellow Accent (0.85, 0.14, 90); complementary across the warm/cool line, which reads as sunrise rather than sky |
+| Confident, bold | canvas (0.90, 0.07, 250), Brand C 0.18 at L 0.55, wide L range between surfaces. High dominance is the point |
+| Serene, tranquil | cool canvas (0.95, 0.03, 200), nothing above C 0.08, analogous 160 to 240 |
+| Tender, gentle, romantic | blush canvas (0.95, 0.03, 20), rose Brand (0.70, 0.08, 10), sage Accent (0.68, 0.06, 150); narrow L range |
+| Cozy, comforting | amber-cream canvas (0.92, 0.05, 75), rust Brand (0.55, 0.12, 40), neutrals at H 60; nothing cool on screen |
+| Wistful, nostalgic, vintage, faded | faded canvas (0.92, 0.03, 70), every chromatic base color capped at C 0.10, hues warm and close. The feeling is chroma withheld, not darkness |
+| Earthy, grounded, natural | canvas (0.90, 0.05, 90) at commitment level 2, hues 30 to 140 at C 0.06 to 0.14, neutrals H 60 to 80; no magenta, no cyan, nothing over C 0.16 |
+| Clinical, sterile, precise | near-white canvas at C 0.01, the one request an untinted ground suits; one cool Brand 200 to 260 at C 0.10; statuses carry the only other color |
+| Contemplative, focused | canvas (0.94, 0.015, 250) or its dark twin (0.20, 0.02, 250), one cool Brand at C 0.10, almost no other hue |
+| Urgent, alarming | ground held near-neutral so the alarm lands, red Brand (0.58, 0.22, 27) given real area, Warning and Danger on one shared L |
+| Tense, anxious | an uncomfortable ground, (0.88, 0.04, 105) light or (0.22, 0.03, 280) dark, plus a near-complementary pair that vibrates with one side toned down |
+| Defiant, rebellious, loud | near-black canvas (0.15, 0.01, 0), one acid hue (0.85, 0.20, 120), nothing else chromatic |
+| Melancholy, moody, sad | dark; canvas (0.22, 0.03, 250), chromatic base colors C 0.06 to 0.10 at L 0.72 to 0.80, blue through violet, with Accent held at C 0.14 as the moment of color |
+| Somber, grave, mournful | near-neutral dark canvas (0.18, 0.01, 260), one desaturated Brand, gradient off |
+| Ominous, dramatic, haunted | dark canvas (0.15, 0.04, 300), one hot accent (0.75, 0.16, 30) used sparingly, canvasGradient on |
+| Austere, severe, cold | monochrome; canvas at either L extreme at C 0.01 or below, one low-chroma Brand, muted statuses |
+
+## Idioms, eras, and genres
+
+| Anchor | Anchors (L, C, H) |
+|---|---|
+| Swiss, International | near-white canvas (0.97, 0.01, 0), or true black for the poster reading; one red Brand (0.55, 0.22, 27) as the only hue on screen; Neutral at C 0.005, untinted on purpose; monochromatic |
+| Bauhaus | paper canvas (0.95, 0.02, 85) under primaries at full commitment: red (0.58, 0.21, 27), blue (0.48, 0.20, 264), yellow (0.86, 0.17, 90); triadic |
+| Mid-century modern | canvas (0.90, 0.05, 75), mustard (0.75, 0.13, 85), teal (0.55, 0.10, 195), burnt orange (0.60, 0.15, 45), walnut neutrals H 60; nothing over C 0.16; compound |
+| Art deco, opulent, luxurious | near-black canvas (0.20, 0.02, 280), gold (0.78, 0.13, 88), jade (0.60, 0.10, 165); dark, one metallic accent, everything else grey |
+| Terminal, phosphor | canvas (0.16, 0.01, 150), phosphor green Brand (0.80, 0.16, 145), amber Accent (0.80, 0.13, 80); monochromatic, dark, gradient off |
+| Cyberpunk, neon noir, futuristic | canvas (0.18, 0.04, 300), magenta Brand (0.78, 0.18, 330), cyan Accent (0.82, 0.12, 200); complementary, dark, canvasGradient on for the glow |
+| Vaporwave | sunset canvas (0.88, 0.06, 330), pink (0.72, 0.16, 350), cyan (0.80, 0.11, 205), lilac Special; light, gradient on |
+| Y2K, bubble | chrome canvas (0.96, 0.015, 240), electric blue Brand (0.62, 0.18, 255), lime Accent (0.85, 0.17, 130) |
+| Blueprint | canvas (0.35, 0.07, 245), pale rules (0.90, 0.02, 240), one warm accent (0.75, 0.14, 60); dark |
+| Scandinavian, hygge | chalk canvas (0.96, 0.012, 70), sage Brand (0.60, 0.06, 150), clay Accent (0.70, 0.08, 40); nothing above C 0.10; analogous |
+| Japandi, wabi-sabi | unbleached paper canvas (0.93, 0.025, 80), ink Brand (0.35, 0.02, 250), one earth Accent (0.62, 0.09, 45); near-monochrome |
+| Cottagecore, botanical | cream canvas (0.94, 0.04, 85), moss (0.55, 0.10, 135), dusty rose (0.70, 0.09, 15), butter (0.85, 0.11, 95); warm analogous |
+| Editorial, magazine | paper canvas (0.97, 0.015, 85), ink neutrals, one strong Brand (0.50, 0.18, 20) carried by rules and pull quotes |
+| Newsprint, broadsheet | grey-warm canvas (0.91, 0.02, 80), near-black ink, nothing chromatic above C 0.10 |
+| Risograph, zine | paper canvas (0.94, 0.03, 80) with two flat spot inks, fluoro pink (0.68, 0.22, 5) and blue (0.52, 0.18, 260); complementary, no midtones between them |
+| Corporate, professional, trustworthy | canvas (0.97, 0.012, 250), navy Brand (0.48, 0.12, 255), teal Accent (0.60, 0.09, 195), conventional statuses |
+| Brutalist | pure canvas, (0.98, 0, 0) or (0.15, 0, 0), with Neutral at C 0, untinted because that is the point; one alarming Brand (0.58, 0.24, 27) |
+| Memphis, postmodern | pastel canvas (0.95, 0.03, 60) carrying full-chroma primaries and a hot pink Special (0.70, 0.20, 350); tetradic or square, four hue families on purpose |
+| Industrial, workshop, gritty | concrete canvas (0.88, 0.008, 250), or (0.22, 0.01, 250) dark, safety orange Brand (0.68, 0.18, 50), steel neutrals |
+
+## Occasions
+
+An occasion is a statement request. Default to canvas commitment level 2 or 3,
+never cream, and put the named color on the ground rather than only on the
+buttons.
+
+| Anchor | Anchors (L, C, H) | Strongest form |
+|---|---|---|
+| Christmas | red (0.53, 0.21, 22), green (0.46, 0.11, 155), gold (0.77, 0.14, 91) | red canvas (0.42, 0.14, 25), green Brand, gold Accent, dark scheme. Softer: evergreen canvas (0.35, 0.07, 160) or deep cream (0.95, 0.04, 85). One of red or green owns the ground; never a 50/50 split. |
+| Halloween | pumpkin (0.70, 0.20, 46), purple (0.51, 0.21, 313), poison green (0.73, 0.20, 137) | orange canvas (0.45, 0.13, 55) with violet and poison-green accents, or near-black violet canvas with pumpkin Brand. Dark scheme either way. |
+| St. Patrick's | green (0.51, 0.13, 152) | green Brand, gold Accent, white or beige neutrals. |
+| Ocean | deep blue (0.35, 0.08, 237), aqua (0.78, 0.12, 214) | hues held to 180 to 240. |
+| Sunset | hues 90 to 320 through red | L falls 0.85 to 0.40 across the sweep. |
+| Autumn | parchment canvas (0.87, 0.06, 80), rust Brand (0.55, 0.15, 40), gold Accent (0.75, 0.15, 85), moss Special (0.55, 0.10, 120) | warm brown neutrals H 50 to 70; deep red H 25 welcome. |
+| Spring | pastels L 0.85 to 0.95, C 0.04 to 0.10 | greens 130 to 150, pinks 0 to 20, mint canvas. |

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

@@ -0,0 +1,121 @@
+---
+name: live-tokens-set-geometry
+description: Set a live-tokens theme's geometry: corner radius, padding, gap, and border width. Each moves per component along its shipped scale. Called with an anchor and a geometry intent by live-tokens-create-theme, or with the user's request directly. Use when the user asks for pill or capsule buttons. Use when the user asks for rounded, sharp, square, softer, or harder corners. Use when the user asks for thicker or thinner borders. Use when the user asks for density: space it out, tighter, denser, airier. Changes geometry only. For a request that also names color or type, read live-tokens-create-theme.
+---
+
+# Setting a theme's geometry
+
+Write the request as an ops file. The CLI moves each matching alias along its scale, writes the result to each component's buffer, and prints a report. Never hand-edit the data tree.
+
+The result is on screen as soon as the run finishes. The three set skills write the same buffer, so color, type, and geometry compose in any order. When the user accepts the result, run `save-theme` to keep it as a theme. Loading a theme in the editor discards it.
+
+## Workflow
+
+1. Read the geometry intent and the anchor, when live-tokens-create-theme passed one. When the intent or the anchor names a feeling, an idiom, or a genre, read its entry in `references/geometry-anchors.md`.
+2. Write the ops file to `scratch/geometry-ops.json`.
+3. Run `npx live-tokens set-geometry scratch/geometry-ops.json`. It writes `component-configs/<id>/_working.json` for every component the ops change.
+4. Read the report. It lists every changed alias, old and new, and every skip with its reason.
+5. When the CLI exits 1, fix the op or the input the message names, then re-run.
+6. Reply with every alias that moved and any skip worth naming.
+
+`--dry-run` prints the report without writing.
+
+Each run reads the live config, so "a bit more" and "back one" compound. The live config is the buffer, else the open theme. With no theme loaded, the open theme is the shipped default.
+
+## The ops file
+
+Global, relative:
+
+```json
+{ "ops": [{ "kind": "radius", "shift": 1 }, { "kind": "padding", "shift": 1 }, { "kind": "gap", "shift": 1 }] }
+```
+
+Targeted, absolute:
+
+```json
+{ "ops": [{ "target": "button", "kind": "radius", "set": "--radius-full" }] }
+```
+
+- `target` (optional): a component id, one of the folder names under `src/live-tokens/data/component-configs/`. "Windows" or "modals" is `dialog`, "cards" is `card`, "tabs" is `tabbar`. "The UI", "everything", or no noun means global, so omit `target`.
+- `kind`: `radius | padding | gap | border-width | divider-width | accent-width`. `border-width` moves `-border-width` aliases. `divider-width` moves dividers, hairline rules, and `-thickness` aliases. `accent-width` moves accent bars and indicators.
+- `set` or `shift`, one of the two. `set` takes a token on that kind's scale. `shift` is a whole number of steps and stops at the ends of the scale.
+- `full` (radius shifts only): admits `--radius-full` as the top of the scale. A pill request is `set: "--radius-full"` with no `full` flag.
+
+## Idioms
+
+The table covers an intent that names no anchor. An anchor's entry in `references/geometry-anchors.md` overrides the table.
+
+| The intent says | Ops |
+|---|---|
+| pill, capsule | radius `set: "--radius-full"`, plus the padding the pill needs (see Compact containers before controls) |
+| sharp, square corners | radius `set: "--radius-none"`, or `--radius-sm` for "mostly sharp" |
+| rounded (a named component) | radius `shift: 2` |
+| softer, rounder (global) | radius `shift: 1` to `2`, no `full` |
+| harder, sharper | radius `shift: -1` to `-2` |
+| increase the radius, less round, more round | radius `shift: 1` or `-1` with `"full": true` |
+| space it out, airier, breathing room | padding and gap `shift: 1` |
+| tighter, denser, more compact | padding and gap `shift: -1` |
+| thicker, thinner borders | border-width `shift: 1` or `-1` |
+
+A theme intent names a direction.
+
+| The direction is | Geometry |
+|---|---|
+| playful, friendly, soft | rounder and a step airier. Warm adds pill buttons. |
+| luxurious, elegant, editorial | sharper corners, airier padding, thin borders |
+| technical, dense, systematic | tighter spacing, a small radius, square corners on containers |
+| calm, minimal | unchanged |
+
+Magnitude follows the qualifier. "Slightly" or "a bit" is 1 step. No qualifier is 1 to 2 steps. "Much", "way", or "really" is 2 to 3 steps. A mood word often means both axes: "softer" is rounder plus airier, "compact" is tighter padding plus smaller gaps.
+
+## Compact containers before controls
+
+A global op spends the same number of steps everywhere, but a step costs a control more than a container. `padding shift: -2` takes a card from a 16px inset to 10px and it is still a card. The same op takes a button from 8px to its 6px floor, 12px at each end around an 18px line, and the floor stops it there. Below the floor the button stops reading as a button.
+
+So a global compaction is `shift: -1`. When the request wants more, spend the extra steps on the containers by name and leave the controls alone. The containers are:
+
+- `card`
+- `dialog`
+- `panel`
+- `collapsiblesection`
+- `sidenavigation`
+- `table`
+- `codesnippet`
+
+Airier is safe globally, because nothing breaks by growing.
+
+A pill needs the most room. `--radius-full` bends the corner in over the first and last glyph, so a capsule wants more horizontal inset than a square-cornered control. `--space-8` is the floor for a large-text pill. Compact Midnight Study sits there. The roomier pill presets, Ocean, Sunset, and Royal Velvet, run `--space-10` to `--space-12`. Pair the radius op with a padding `set` on the same target. In the ops list, place the padding `set` after any global padding shift. The later op wins:
+
+```json
+{ "ops": [
+  { "kind": "padding", "shift": -1 },
+  { "target": "button", "kind": "radius", "set": "--radius-full" },
+  { "target": "button", "kind": "padding", "set": "--space-10" }
+] }
+```
+
+## Scales
+
+Radius runs `none, sm, md, lg, xl, 2xl, 3xl, 4xl`, with `full` as the gated ninth step. Space (padding and gap) is the editor picker's subset, `0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48`, so the editor can select every value the CLI writes. Border width is the `--border-width-*` scale from `1` to `24`. A shift never reaches `--border-width-0`, and an alias at 0 is skipped. "No borders" is `set: "--border-width-0"`.
+
+An alias off the subset spends its first step reaching the subset, so `--space-2` with `shift: 1` lands on `--space-4`.
+
+## Floors
+
+Content insets stop at `--space-4`. Below `--space-4` the text sits against its own edge, so `--space-0` and `--space-2` are values a person picks on purpose, through the editor picker or `set`. An alias below the floor still moves up. A shift that would push one under `--space-4` lands on `--space-4`. An alias already at `--space-4` is skipped, and the report says so.
+
+Padding around a line of type stops at `--space-6`. A variant that declares a `-text-font-size` holds text. A component that holds text doubles its padding horizontally, so `--space-4` there is 4px over an 18px line and 8px at each end. No shipped default puts text below `--space-6`.
+
+The floor guards `-padding` only. A 2px gap between an icon and its label, or a 2px margin under a bar, is ordinary design. `-margin` belongs to the `padding` kind, so a padding op moves margins too, without the floor.
+
+## Scope
+
+Geometry only. Color, type, saved themes, and `tokens.css` are untouched: `set-geometry` writes existing tokens into each component's buffer and creates no new ones. `save-theme` keeps the result; Adopt ships it.
+
+## Verify
+
+- The CLI exits 0 and the report lists the expected changes, with no unexpected skips.
+- The app shows the new shape on each changed component.
+- Buttons still read as buttons: the label has room at both ends, and a pill has more than a square-cornered control. A control whose padding sits at `--space-6` is on its floor. A control that also carries `--radius-full` needs a targeted lift.
+- `component-configs/<id>/_working.json` exists for every component the report listed.
+- To revert, run the inverse ops, or load the open theme to discard the buffer.

package/.claude/skills/live-tokens-set-geometry/references/geometry-anchors.md

@@ -0,0 +1,63 @@
+# Geometry anchors: feelings, idioms, and genres
+
+Read this when the geometry intent names one of these. An anchor overrides the
+Idioms table in SKILL.md, because it is tuned to the same direction the color
+came from, and a style's geometry is often targeted rather than global.
+
+Entries are written in the ops vocabulary. "radius +2" is a radius shift of 2.
+"borders +1" is a border-width shift of 1. "padding +1" is a padding and gap
+shift of 1. "hairline borders" is border-width `set: "--border-width-1"`, and
+"no borders" is `set: "--border-width-0"`. "hairline rules" is divider-width
+`set: "--border-width-1"`. A named component means a targeted op. Controls squeeze before containers,
+so a compaction of more than one step still spends its extra steps on
+containers by name.
+
+An occasion (Christmas, Autumn, Ocean) fixes color only. Take its geometry from
+the feeling it implies, or leave geometry alone.
+
+## Feelings
+
+| Anchor | Geometry |
+|---|---|
+| Joyful, exuberant, energetic | radius +2, padding +1, pill buttons |
+| Playful, whimsical | pill buttons, rounder cards, wide gaps |
+| Optimistic, hopeful | radius +1 |
+| Confident, bold | radius -1, borders +1, tight gaps |
+| Serene, tranquil | soft radius, padding +1, no borders |
+| Tender, gentle, romantic | rounder, hairline borders |
+| Cozy, comforting | radius +1, padding +1 |
+| Wistful, nostalgic, vintage, faded | unchanged, hairline rules |
+| Earthy, grounded, natural | radius +1, padding +1 |
+| Clinical, sterile, precise | radius sm, tight gaps, hairline borders |
+| Contemplative, focused | padding +1, minimal borders |
+| Urgent, alarming | radius -2, borders +2, tight padding |
+| Tense, anxious | tight gaps, radius sm |
+| Defiant, rebellious, loud | radius none, borders +3 |
+| Melancholy, moody, sad | padding +1, hairline borders |
+| Somber, grave, mournful | sharp, tight gaps, hairline rules |
+| Ominous, dramatic, haunted | sharp, borders +2 |
+| Austere, severe, cold | radius none, tight padding, hairline borders |
+
+## Idioms, eras, and genres
+
+| Anchor | Geometry |
+|---|---|
+| Swiss, International | radius none, tight gaps, hairline borders |
+| Bauhaus | radius none on containers, radius full on buttons alone, so the circle reads as a decision |
+| Mid-century modern | radius +1 to +2, padding +1, no borders |
+| Art deco, opulent, luxurious | sharp, padding +1, thin borders |
+| Terminal, phosphor | radius none, tight padding, a 1px border on everything |
+| Cyberpunk, neon noir, futuristic | sharp, tight gaps |
+| Vaporwave | rounder, airier |
+| Y2K, bubble | radius full on buttons with the padding a pill needs, generous spacing |
+| Blueprint | radius none, 1px borders, tight grid |
+| Scandinavian, hygge | soft radius, padding +1, hairline borders |
+| Japandi, wabi-sabi | radius sm, padding +2, no borders |
+| Cottagecore, botanical | rounder, airier |
+| Editorial, magazine | sharp, padding +1, hairline rules |
+| Newsprint, broadsheet | radius none, tight gaps, hairline rules |
+| Risograph, zine | radius none, borders +2 |
+| Corporate, professional, trustworthy | leave it alone |
+| Brutalist | radius none, borders +2 to +3, tight padding |
+| Memphis, postmodern | targeted rather than global: pill buttons against radius-none cards |
+| Industrial, workshop, gritty | radius sm, thick borders, tight padding |

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

@@ -0,0 +1,93 @@
+---
+name: live-tokens-set-type
+description: Set a live-tokens theme's type: a Google Fonts pairing for the shipped --font-* stacks. The CLI verifies each family for the weights it ships. Called with an anchor and a type intent by live-tokens-create-theme, or with the user's request directly. Use when the user asks to pair fonts, pick a typeface, or set the fonts. Use when the user describes type by voice: editorial, friendlier, technical, elegant, less generic. Use when the user names a face for a role: a serif for headings, a display font. Changes type only. For a request that also names color or geometry, read live-tokens-create-theme.
+---
+
+# Setting a theme's type
+
+Choose the families. The CLI verifies each against Google Fonts, builds the URL from the weights the family has, and writes the result to the buffer. Never hand-author font JSON or edit the data tree. Google Fonts is the pool because it is freely licensable and loads by URL. Other sources go in through the editor's Project fonts section.
+
+The result is on screen as soon as the run finishes. The three set skills write the same buffer, so color, type, and geometry compose in any order. When the user accepts the result, run `save-theme` to keep it as a theme. Loading a theme in the editor discards it.
+
+## Workflow
+
+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.
+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.
+
+## The pairing file
+
+```json
+{ "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.
+
+## 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 font matrix
+
+Classify each candidate by form model and by stroke contrast and serifs.
+
+| Form model | Construction | Reads as |
+|---|---|---|
+| **Dynamic** | diagonal stress, open apertures, written origin | open, warm, humane, timeless |
+| **Rational** | vertical stress, closed apertures, drawn not written | orderly, reserved, elegant, authoritative |
+| **Geometric** | monolinear, circle-and-line | technical, modern, systematic, sober |
+
+- One form model with different stroke contrast or serifs pairs reliably. Helvetica and Bodoni are both rational, one a linear sans and one a high-contrast serif.
+- Different form models with the same stroke contrast and serifs fail. The two look alike and fight underneath. Two arbitrary sans serifs clash for this reason.
+- Different on both counts works. An unmistakable difference reads as a decision.
+
+Many faces sit between columns. When one straddles, say so and lean on the Voice table and the x-height check.
+
+## Voice
+
+| The intent says | Type voice |
+|---|---|
+| editorial, literary, considered | dynamic serif display over a humanist sans body |
+| elegant, luxurious, formal | rational high-contrast serif display; keep the body quiet |
+| friendly, warm, approachable | dynamic sans on both sides, or a soft serif display |
+| technical, systematic, precise | geometric or neo-grotesque sans; a mono for code |
+| playful, informal | an expressive display face over a plain workhorse body |
+| serious, institutional, trustworthy | rational sans body, rational serif display |
+| quiet, minimal, unbranded | one superfamily across both slots |
+
+The table covers an intent that names no anchor. An anchor's row in `references/type-anchors.md` wins.
+
+Match the type to the design direction the color came from. A warm autumn palette under a cold geometric sans reads as two projects.
+
+## Shortcuts
+
+Use these when the request is vague or the type should stay quiet.
+
+- **A superfamily.** A Google Fonts family with sans and serif siblings: Alegreya, Ancizar, IBM Plex, Inria, Merriweather, Noto, PT, Roboto, Source. The catalogue moves and this list does not; `set-type` fails on a family that is gone.
+- **One family across weights.**
+- **Same designer or foundry.**
+- **Serif display over sans body** when nothing else decides it.
+
+## Watch for
+
+- **x-height parity.** Both faces share one size scale, so a small-x-height display face over a large-x-height body face gives a heading weaker than its own body text. Check it on the rendered page.
+- **Print faces at small sizes.** Delicate serifs and high stroke contrast turn to mud below 16px.
+- **Every family is a download.** Two is the target; three needs a reason.
+- **Sets of themes.** No two share a display face or a body face.
+
+## Scope
+
+Type only. Color, component aliases, shape, and the type scale are untouched: `set-type` writes the font entries in the buffer and carries every other value forward. `save-theme` keeps the result; Adopt ships it and rewrites `fonts.css`, which is how a build without the editor loads the family.
+
+## Verify
+
+- The CLI exits 0 and names each stack that moved, before and after.
+- Each URL matches the family's weights: a range for a variable family, an enumeration for a static one, a bare URL for a single-weight face. A pinned URL is written as given.
+- The app shows the new type, and the editor's Fonts section lists both families with their fallbacks.
+- To revert, run the previous pairing file, or load the open theme to discard the buffer.

package/.claude/skills/live-tokens-set-type/references/type-anchors.md

@@ -0,0 +1,60 @@
+# Type anchors: feelings, idioms, and genres
+
+Read this when the type intent names one of these. An anchor overrides the
+Voice table in SKILL.md, because it is tuned to the same direction the color
+came from.
+
+An entry names a form model and a role, never a family. Take the families from
+the font matrix and the body-face rule in SKILL.md, and screen them against the
+weights the shipped text styles ask for.
+
+An occasion (Christmas, Autumn, Ocean) fixes color only. Take its type from the
+feeling it implies: Autumn reads cozy, Halloween reads ominous, Spring reads
+tender.
+
+## Feelings
+
+| Anchor | Type voice |
+|---|---|
+| Joyful, exuberant, energetic | dynamic sans in both slots |
+| Playful, whimsical | expressive display over a plain workhorse |
+| Optimistic, hopeful | humanist sans, low contrast |
+| Confident, bold | heavy rational display, plain body |
+| Serene, tranquil | dynamic sans, one family |
+| Tender, gentle, romantic | soft serif display over humanist sans, light weights |
+| Cozy, comforting | dynamic serif over dynamic sans |
+| Wistful, nostalgic, vintage, faded | rational serif display, quiet body |
+| Earthy, grounded, natural | dynamic serif over humanist sans |
+| Clinical, sterile, precise | one neo-grotesque, tightly set |
+| Contemplative, focused | one quiet superfamily |
+| Urgent, alarming | condensed grotesque, heavy |
+| Tense, anxious | neo-grotesque, tightly set |
+| Defiant, rebellious, loud | heavy display; a mono body works |
+| Melancholy, moody, sad | rational serif display over quiet sans |
+| Somber, grave, mournful | rational serif in both slots |
+| Ominous, dramatic, haunted | heavy high-contrast display |
+| Austere, severe, cold | one rational family |
+
+## Idioms, eras, and genres
+
+| Anchor | Type voice |
+|---|---|
+| Swiss, International | one rational neo-grotesque across both slots |
+| Bauhaus | geometric sans, heavy display |
+| Mid-century modern | dynamic sans, or a geometric display over a dynamic body |
+| Art deco, opulent, luxurious | rational high-contrast serif display, quiet body |
+| Terminal, phosphor | mono in both slots |
+| Cyberpunk, neon noir, futuristic | wide geometric display, neutral body |
+| Vaporwave | wide retro display, serif welcome |
+| Y2K, bubble | geometric sans, heavy display |
+| Blueprint | mono, or a technical grotesque; a mono body works here and almost nowhere else |
+| Scandinavian, hygge | dynamic sans on both sides |
+| Japandi, wabi-sabi | rational serif display over a quiet humanist body |
+| Cottagecore, botanical | dynamic serif display over humanist sans |
+| Editorial, magazine | high-contrast serif display over a text serif or humanist sans |
+| Newsprint, broadsheet | rational serif in both slots |
+| Risograph, zine | expressive display over a plain workhorse |
+| Corporate, professional, trustworthy | rational sans body with a rational serif or same-family display |
+| Brutalist | neo-grotesque or mono at heavy weight |
+| Memphis, postmodern | geometric display, plain body |
+| Industrial, workshop, gritty | condensed grotesque display over a plain body |