@motion-proto/live-tokens 0.53.0 → 0.54.0

package/.claude/skills/live-tokens-adjust-shape-space/SKILL.md

@@ -11,7 +11,7 @@ You translate the request into a small ops file; the CLI resolves each matching
 
 1. Write the ops file to a temp path (not the project tree), e.g. `/tmp/adjust-ops.json`.
 2. Run `npx live-tokens adjust /tmp/adjust-ops.json`. It writes `component-configs/<id>/_working.json` for every component the ops change, which is the buffer the page already runs. `--dry-run` prints the report without writing.
-3. Read the report card: every changed alias old → new, plus skips (raw value, off the ladder, already at the ladder end, pill preserved). Exit 1 means the run was rejected; the message names the offending op or the missing input, so fix it and re-run.
+3. Read the report card: every changed alias old → new, plus skips (raw value, off the ladder, already at the ladder end, pill preserved). Exit 1 means the run was rejected; the message names the offending op or the missing input, so fix it and re-run. Read where the controls landed, not only that the run succeeded: a button, badge, input, or tab padding sitting at `--space-6` is on its floor, and one that also carries `--radius-full` wants a targeted lift.
 4. Tell the user to reload the app and look. Offer the inverse op as the undo, and say the edit is unsaved until they save the open theme.
 
 Each run reads the LIVE config (buffer, else the open theme, else the shipped default), so "a bit more" and "back one" compound naturally.
@@ -40,7 +40,7 @@ Targeted, absolute:
 
 | Request | Ops |
 |---|---|
-| pill, capsule | radius `set: "--radius-full"` |
+| pill, capsule | radius `set: "--radius-full"`, plus the padding the pill needs (see below) |
 | 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` |
@@ -52,12 +52,30 @@ Targeted, absolute:
 
 Magnitude words: "slightly" or "a bit" is 1 step, unqualified is 1 to 2, "much", "way", or "really" is 2 to 3. Mood words often mean both axes: "softer" is rounder plus airier, "compact" is tighter padding plus smaller gaps.
 
+## Controls squeeze before containers
+
+A global op spends the same number of steps everywhere, but a step costs a control far more than a container. `padding shift: -2` takes a card from a 16px inset to 10px and it is still a card. It takes a button from 8 to 4, doubled to 8px at each end, around an 18px line. The button stops reading as a button.
+
+So a global compaction is `shift: -1`. When the brief wants more, spend the extra steps on the containers by name (`card`, `dialog`, `panel`, `sidenavigation`, `table`, `codesnippet`) and leave the controls alone. Loosening is not symmetric: airier is safe globally, because nothing breaks by growing.
+
+A pill needs the room most. `--radius-full` bends the corner in over the first and last glyph, so a capsule wants more horizontal inset than a square-cornered control, never less. `--space-8` is the floor for a large-text pill, which is where compact Midnight Study sits; the roomier pill presets (Ocean, Sunset, Royal Velvet) run `--space-10` to `--space-12`. Pair the radius op with a padding `set` on the same target, placed after any global compaction so it wins outright:
+
+```json
+{ "ops": [
+  { "kind": "padding", "shift": -1 },
+  { "target": "button", "kind": "radius", "set": "--radius-full" },
+  { "target": "button", "kind": "padding", "set": "--space-10" }
+] }
+```
+
 ## Ladders
 
 Radius runs `none, sm, md, lg, xl, 2xl, 3xl, 4xl`, with `full` as the gated ninth rung. Space (padding and gap) is the editor picker's subset: `0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48`, so every written value stays re-editable by hand. Border width is the full `--border-width-*` scale. `set` values must be on the ladder (`--space-64` is rejected).
 
 Content insets stop at `--space-4`. Below it the text sits against its own edge, so `--space-0` and `--space-2` are destinations a person picks on purpose, not ones a relative "tighter" hands you. Both stay available through the editor picker and through `set`. An alias already below the floor still moves up, and a shift that would push one under `--space-4` reports as clamped and writes nothing.
 
+Padding that wraps a line of type stops a rung higher, at `--space-6`. The engine spots it in the config itself: a variant that also declares a `-text-font-size` is holding text, and the components that hold text double their 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. Outer space is exempt, because a 2px gap between an icon and its label, or a 2px margin under a bar, is ordinary design rather than a mistake. Note that `-margin` rides the `padding` kind, so a padding op moves margins too; it just does not floor them.
 
 An alias sitting off the subset spends its first step reaching the rung the shift points at, so `--space-2` with `shift: 1` lands on `--space-4` rather than jumping past it.
@@ -70,5 +88,6 @@ Every value written is an existing token; nothing new is minted. `tokens.css`, s
 
 - The CLI exits 0 and the report card lists the changes you expected, with no surprising skips.
 - The app (dev server running) shows the new shape on each changed component after a reload.
+- Buttons still read as buttons: the label has room at both ends, and a pill has more of it than a square-cornered control had.
 - `component-configs/<id>/_working.json` exists for every component the report listed. That buffer is the whole change: it stays until the open theme is saved or another theme is loaded.
 - To revert, run the inverse ops, or load a theme in the Theme panel to discard every unsaved edit.

package/.claude/skills/live-tokens-generate-theme/SKILL.md

@@ -130,6 +130,21 @@ A sky needs a committed canvas: when the Canvas seed anchors at the ramp edge
 side and the engine skips the sky, saying so in the report. An atmospheric
 brief that wants one should already be at canvas commitment level 2–3.
 
+## Shadow weight follows the canvas
+
+The engine sets the opacity of the `--shadow-*` scale from the Canvas seed's
+lightness and carries each shadow's geometry and color through untouched. A
+near-black shadow at 0.9 opacity is what a dark ground needs to show any
+shadow at all, and it punches a hole in paper, so opacity holds at 0.9 up to
+canvas L 0.5 and eases to 0.2 by L 0.9. There is nothing to choose: the report
+prints the derived value, and every regeneration re-derives it, so a brief
+iterated from a light canvas to a dark one gets its weight back.
+
+When the user says the shadows read heavy, muddy, or dirty, the canvas is the
+lever. Raise the Canvas seed's lightness and the shadows lighten with it. A
+one-off override lives in the editor's Shadows tab and survives regeneration
+in everything except opacity.
+
 ## Named themes (canonical OKLCH anchors)
 
 Holiday briefs are statement briefs — default to commitment level 2–3 above, not cream. The named colors go on the *ground*, not just the buttons.
@@ -143,7 +158,7 @@ Holiday briefs are statement briefs — default to commitment level 2–3 above,
 
 ## Scope
 
-Fonts are never touched (they carry forward from the live look, as do shadows and component aliases). Swatch gradients (`--gradient-1..4`) carry forward when user-tuned; if they are absent or still stock, the engine rebuilds them from the new theme's families — you never author them. Radius is out of scope for generation. Shipping the theme stays a human action: Adopt, in the editor.
+Fonts are never touched (they carry forward from the live look, as do component aliases and shadow geometry; shadow opacity is derived, see above). Swatch gradients (`--gradient-1..4`) carry forward when user-tuned; if they are absent or still stock, the engine rebuilds them from the new theme's families — you never author them. Radius is out of scope for generation. Shipping the theme stays a human action: Adopt, in the editor.
 
 ## Verify
 

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.54.0 — Shadow weight and text insets follow their context
+
+### Fixed
+
+- **Padding that holds text stops at `--space-6`.** One floor for every inset
+  treated a card and a button alike, but the components that hold text double
+  their padding horizontally, so `--space-4` on a button is 4px over an 18px
+  line and 8px at each end. `adjust` now reads which floor applies off the
+  config itself: a variant that also declares a `-text-font-size` is holding
+  type. Containers keep the `--space-4` floor, `-margin` and `-gap` stay
+  exempt, and both rungs stay reachable by `set` and by the editor picker.
+  Midnight Study shipped with every text inset on the old floor, its pill
+  buttons worst of all; its controls move up, and the six full-size button
+  variants to `--space-8` so the capsule has room for its label.
+
+### Changed
+
+- **Shadow weight follows the canvas.** The `--shadow-*` scale was one fixed
+  near-black at 0.9 opacity in every theme, which is what a dark ground needs
+  and what puts a smudge under every card on a light one. `generate-theme` now
+  derives the opacity from the Canvas seed's lightness: 0.9 holds up to L 0.5
+  and eases to 0.2 by L 0.9. Geometry and color carry forward untouched, so a
+  hand-tuned elevation ramp survives regeneration. The three light presets
+  (Ocean, Spring Meadow, Autumn) ship with the derived values; the dark presets
+  and the default theme are unchanged.
+
 ## 0.53.0 — Themes are complete documents
 
 ### Fixed

package/bin/generate-theme.mjs

@@ -241,6 +241,7 @@ export function formatGenerateThemeResult(result) {
       ? '\nGradients: kept your tuned swatch gradients.'
       : '\nGradients: swatch tokens rebuilt from the theme families.',
   );
+  lines.push(`Shadows: ${result.report.shadows}; carried geometry kept.`);
   if (result.report.canvasGradient) {
     lines.push(`Canvas sky: ${result.report.canvasGradient}.`);
   }

package/dist-plugin/adjust/index.cjs

@@ -102,6 +102,7 @@ var SPACE_SETTABLE = [
 ];
 var SPACE_RUNGS = SPACE_SETTABLE;
 var INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-4"));
+var TEXT_INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-6"));
 var SPACE_FAMILY = [...SPACE_SETTABLE, "--space-40", "--space-64", "--space-96", "--space-128"];
 var BORDER_WIDTH_RUNGS = [
   "--border-width-0",
@@ -133,10 +134,13 @@ var LADDERS = {
   }
 };
 var TOKEN_NAME = /^--[a-z0-9-]+$/;
-function rungsFor(op, variable) {
+function rungsFor(op, variable, aliases) {
   if (op.kind === "radius") return op.full ? [...RADIUS_RUNGS, RADIUS_FULL] : RADIUS_RUNGS;
-  if (op.kind === "padding" && stripSide(variable).endsWith("-padding")) return INSET_RUNGS;
-  return LADDERS[op.kind].rungs;
+  if (op.kind !== "padding") return LADDERS[op.kind].rungs;
+  const base = stripSide(variable);
+  if (!base.endsWith("-padding")) return LADDERS.padding.rungs;
+  const variant = base.slice(0, -"-padding".length);
+  return `${variant}-text-font-size` in aliases ? TEXT_INSET_RUNGS : INSET_RUNGS;
 }
 function spaceStep(token) {
   return Number(token.slice("--space-".length));
@@ -149,11 +153,11 @@ function snapRung(token, rungs, direction) {
   }
   return -1;
 }
-function resolve(op, variable, value) {
+function resolve(op, variable, value, aliases) {
   if (typeof value !== "string" || !TOKEN_NAME.test(value)) return { skip: "raw-value" };
   if (!LADDERS[op.kind].family.includes(value)) return { skip: "off-ladder" };
   if (op.set !== void 0) return { from: value, to: op.set };
-  const rungs = rungsFor(op, variable);
+  const rungs = rungsFor(op, variable, aliases);
   let index = rungs.indexOf(value);
   let shift = op.shift;
   if (index < 0) {
@@ -206,7 +210,7 @@ function adjustAliases(configs, ops, now) {
       let changed = false;
       for (const [variable, value] of Object.entries(config.aliases)) {
         if (!matchesKind(variable, op.kind)) continue;
-        const outcome = resolve(op, variable, value);
+        const outcome = resolve(op, variable, value, config.aliases);
         if ("skip" in outcome) {
           reportFor(component).skips.push({ variable, value, reason: outcome.skip });
           continue;

package/dist-plugin/adjust/index.js

@@ -70,6 +70,7 @@ var SPACE_SETTABLE = [
 ];
 var SPACE_RUNGS = SPACE_SETTABLE;
 var INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-4"));
+var TEXT_INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-6"));
 var SPACE_FAMILY = [...SPACE_SETTABLE, "--space-40", "--space-64", "--space-96", "--space-128"];
 var BORDER_WIDTH_RUNGS = [
   "--border-width-0",
@@ -101,10 +102,13 @@ var LADDERS = {
   }
 };
 var TOKEN_NAME = /^--[a-z0-9-]+$/;
-function rungsFor(op, variable) {
+function rungsFor(op, variable, aliases) {
   if (op.kind === "radius") return op.full ? [...RADIUS_RUNGS, RADIUS_FULL] : RADIUS_RUNGS;
-  if (op.kind === "padding" && stripSide(variable).endsWith("-padding")) return INSET_RUNGS;
-  return LADDERS[op.kind].rungs;
+  if (op.kind !== "padding") return LADDERS[op.kind].rungs;
+  const base = stripSide(variable);
+  if (!base.endsWith("-padding")) return LADDERS.padding.rungs;
+  const variant = base.slice(0, -"-padding".length);
+  return `${variant}-text-font-size` in aliases ? TEXT_INSET_RUNGS : INSET_RUNGS;
 }
 function spaceStep(token) {
   return Number(token.slice("--space-".length));
@@ -117,11 +121,11 @@ function snapRung(token, rungs, direction) {
   }
   return -1;
 }
-function resolve(op, variable, value) {
+function resolve(op, variable, value, aliases) {
   if (typeof value !== "string" || !TOKEN_NAME.test(value)) return { skip: "raw-value" };
   if (!LADDERS[op.kind].family.includes(value)) return { skip: "off-ladder" };
   if (op.set !== void 0) return { from: value, to: op.set };
-  const rungs = rungsFor(op, variable);
+  const rungs = rungsFor(op, variable, aliases);
   let index = rungs.indexOf(value);
   let shift = op.shift;
   if (index < 0) {
@@ -174,7 +178,7 @@ function adjustAliases(configs, ops, now) {
       let changed = false;
       for (const [variable, value] of Object.entries(config.aliases)) {
         if (!matchesKind(variable, op.kind)) continue;
-        const outcome = resolve(op, variable, value);
+        const outcome = resolve(op, variable, value, config.aliases);
         if ("skip" in outcome) {
           reportFor(component).skips.push({ variable, value, reason: outcome.skip });
           continue;

package/dist-plugin/generateColorsAndType/index.cjs

@@ -691,6 +691,39 @@ function makeDefaultGradients() {
   ];
 }
 
+// src/editor/core/themes/parsers/shadow.ts
+var SHADOW_VAR_NAMES = [
+  "--shadow-sm",
+  "--shadow-md",
+  "--shadow-lg",
+  "--shadow-xl",
+  "--shadow-2xl"
+];
+function computeAngleDistance(x, y) {
+  const distance = Math.round(Math.sqrt(x * x + y * y));
+  if (distance === 0) return { angle: 135, distance: 0 };
+  let angle = Math.atan2(y, -x) * (180 / Math.PI);
+  if (angle < 0) angle += 360;
+  return { angle: Math.round(angle), distance };
+}
+function shadowTokenCss(t) {
+  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
+}
+function parseShadowCss(variable, raw) {
+  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
+  if (!m) return null;
+  const x = parseInt(m[1], 10);
+  const y = parseInt(m[2], 10);
+  const blur = parseInt(m[3], 10);
+  const spread = parseInt(m[4], 10);
+  const hue = Math.round(parseFloat(m[5]));
+  const saturation = Math.round(parseFloat(m[6]));
+  const lightness = Math.round(parseFloat(m[7]));
+  const opacity = parseFloat(m[8]);
+  const { angle, distance } = computeAngleDistance(x, y);
+  return { variable, x, y, blur, spread, opacity, hue, saturation, lightness, angle, distance };
+}
+
 // src/editor/core/palettes/contrast.ts
 var AA_BODY = 4.5;
 var AA_LARGE = 3;
@@ -1760,6 +1793,34 @@ function applyCanvasGradient(canvas, scheme) {
   canvas.gradientSize = "window";
   return `on, ${labels[sky]} \u2192 ${labels[anchor]}`;
 }
+var STOCK_SHADOW_GEOMETRY = {
+  "--shadow-sm": [1, 1, 2],
+  "--shadow-md": [3, 3, 6],
+  "--shadow-lg": [5, 5, 9],
+  "--shadow-xl": [6, 7, 13],
+  "--shadow-2xl": [8, 9, 16]
+};
+var STOCK_SHADOW_COLOR = { spread: 0, hue: 237, saturation: 18, lightness: 3, opacity: 0.9 };
+var SHADOW_OPACITY_DEEP = 0.9;
+var SHADOW_OPACITY_SOFT = 0.2;
+var SHADOW_GROUND_DEEP = 0.5;
+var SHADOW_GROUND_SOFT = 0.9;
+function shadowOpacityForCanvas(canvasL) {
+  const t = (canvasL - SHADOW_GROUND_DEEP) / (SHADOW_GROUND_SOFT - SHADOW_GROUND_DEEP);
+  const ramp = Math.max(0, Math.min(1, t));
+  const opacity = SHADOW_OPACITY_DEEP + ramp * (SHADOW_OPACITY_SOFT - SHADOW_OPACITY_DEEP);
+  return Math.round(opacity * 100) / 100;
+}
+function shadowVars(carried, canvas) {
+  const opacity = shadowOpacityForCanvas(canvas.l);
+  const out = {};
+  for (const variable of SHADOW_VAR_NAMES) {
+    const [x, y, blur] = STOCK_SHADOW_GEOMETRY[variable];
+    const base = parseShadowCss(variable, carried[variable] ?? "") ?? { x, y, blur, ...STOCK_SHADOW_COLOR };
+    out[variable] = shadowTokenCss({ ...base, opacity });
+  }
+  return out;
+}
 function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ new Date()).toISOString()) {
   const { seeds, slug } = validateBrief(brief);
   const configs = {};
@@ -1784,6 +1845,7 @@ function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ n
     Object.entries(carry.cssVariables ?? {}).filter(([k]) => !owned.has(k))
   );
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
+  Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, seeds.Canvas));
   const colorsAndType = {
     name: brief.name.trim(),
     createdAt: now,
@@ -1802,6 +1864,7 @@ function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ n
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",
+      shadows: `opacity ${shadowOpacityForCanvas(seeds.Canvas.l)} for a canvas at L ${seeds.Canvas.l.toFixed(2)}`,
       ...canvasGradient ? { canvasGradient } : {}
     }
   };

package/dist-plugin/generateColorsAndType/index.d.cts

@@ -41,7 +41,8 @@ interface ColorsAndTypeBrief {
     canvasGradient?: boolean;
 }
 /** Non-color content carried forward from the currently active colors and type
- *  so gradients, shadows, component aliases, and fonts survive regeneration. */
+ *  so gradients, shadow geometry, component aliases, and fonts survive
+ *  regeneration. Shadow opacity is derived, not carried — see `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     fontSources?: FontSource[];
@@ -68,6 +69,8 @@ interface GenerateColorsAndTypeReport {
      *  'on, <sky> → <anchor>' or a 'skipped — …' explanation when the Canvas
      *  anchors at the ramp edge and leaves no room. */
     canvasGradient?: string;
+    /** The derived shadow opacity and the canvas lightness it came from. */
+    shadows: string;
 }
 interface GenerateColorsAndTypeResult {
     colorsAndType: ColorsAndType;

package/dist-plugin/generateColorsAndType/index.d.ts

@@ -41,7 +41,8 @@ interface ColorsAndTypeBrief {
     canvasGradient?: boolean;
 }
 /** Non-color content carried forward from the currently active colors and type
- *  so gradients, shadows, component aliases, and fonts survive regeneration. */
+ *  so gradients, shadow geometry, component aliases, and fonts survive
+ *  regeneration. Shadow opacity is derived, not carried — see `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     fontSources?: FontSource[];
@@ -68,6 +69,8 @@ interface GenerateColorsAndTypeReport {
      *  'on, <sky> → <anchor>' or a 'skipped — …' explanation when the Canvas
      *  anchors at the ramp edge and leaves no room. */
     canvasGradient?: string;
+    /** The derived shadow opacity and the canvas lightness it came from. */
+    shadows: string;
 }
 interface GenerateColorsAndTypeResult {
     colorsAndType: ColorsAndType;

package/dist-plugin/generateColorsAndType/index.js

@@ -86,6 +86,39 @@ function makeDefaultGradients() {
   ];
 }
 
+// src/editor/core/themes/parsers/shadow.ts
+var SHADOW_VAR_NAMES = [
+  "--shadow-sm",
+  "--shadow-md",
+  "--shadow-lg",
+  "--shadow-xl",
+  "--shadow-2xl"
+];
+function computeAngleDistance(x, y) {
+  const distance = Math.round(Math.sqrt(x * x + y * y));
+  if (distance === 0) return { angle: 135, distance: 0 };
+  let angle = Math.atan2(y, -x) * (180 / Math.PI);
+  if (angle < 0) angle += 360;
+  return { angle: Math.round(angle), distance };
+}
+function shadowTokenCss(t) {
+  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
+}
+function parseShadowCss(variable, raw) {
+  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
+  if (!m) return null;
+  const x = parseInt(m[1], 10);
+  const y = parseInt(m[2], 10);
+  const blur = parseInt(m[3], 10);
+  const spread = parseInt(m[4], 10);
+  const hue = Math.round(parseFloat(m[5]));
+  const saturation = Math.round(parseFloat(m[6]));
+  const lightness = Math.round(parseFloat(m[7]));
+  const opacity = parseFloat(m[8]);
+  const { angle, distance } = computeAngleDistance(x, y);
+  return { variable, x, y, blur, spread, opacity, hue, saturation, lightness, angle, distance };
+}
+
 // src/editor/core/palettes/contrast.ts
 var AA_BODY = 4.5;
 var AA_LARGE = 3;
@@ -410,6 +443,34 @@ function applyCanvasGradient(canvas, scheme) {
   canvas.gradientSize = "window";
   return `on, ${labels[sky]} \u2192 ${labels[anchor]}`;
 }
+var STOCK_SHADOW_GEOMETRY = {
+  "--shadow-sm": [1, 1, 2],
+  "--shadow-md": [3, 3, 6],
+  "--shadow-lg": [5, 5, 9],
+  "--shadow-xl": [6, 7, 13],
+  "--shadow-2xl": [8, 9, 16]
+};
+var STOCK_SHADOW_COLOR = { spread: 0, hue: 237, saturation: 18, lightness: 3, opacity: 0.9 };
+var SHADOW_OPACITY_DEEP = 0.9;
+var SHADOW_OPACITY_SOFT = 0.2;
+var SHADOW_GROUND_DEEP = 0.5;
+var SHADOW_GROUND_SOFT = 0.9;
+function shadowOpacityForCanvas(canvasL) {
+  const t = (canvasL - SHADOW_GROUND_DEEP) / (SHADOW_GROUND_SOFT - SHADOW_GROUND_DEEP);
+  const ramp = Math.max(0, Math.min(1, t));
+  const opacity = SHADOW_OPACITY_DEEP + ramp * (SHADOW_OPACITY_SOFT - SHADOW_OPACITY_DEEP);
+  return Math.round(opacity * 100) / 100;
+}
+function shadowVars(carried, canvas) {
+  const opacity = shadowOpacityForCanvas(canvas.l);
+  const out = {};
+  for (const variable of SHADOW_VAR_NAMES) {
+    const [x, y, blur] = STOCK_SHADOW_GEOMETRY[variable];
+    const base = parseShadowCss(variable, carried[variable] ?? "") ?? { x, y, blur, ...STOCK_SHADOW_COLOR };
+    out[variable] = shadowTokenCss({ ...base, opacity });
+  }
+  return out;
+}
 function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ new Date()).toISOString()) {
   const { seeds, slug } = validateBrief(brief);
   const configs = {};
@@ -434,6 +495,7 @@ function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ n
     Object.entries(carry.cssVariables ?? {}).filter(([k]) => !owned.has(k))
   );
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
+  Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, seeds.Canvas));
   const colorsAndType = {
     name: brief.name.trim(),
     createdAt: now,
@@ -452,6 +514,7 @@ function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ n
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",
+      shadows: `opacity ${shadowOpacityForCanvas(seeds.Canvas.l)} for a canvas at L ${seeds.Canvas.l.toFixed(2)}`,
       ...canvasGradient ? { canvasGradient } : {}
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/core/components/adjustAliases.ts

@@ -66,6 +66,12 @@ const SPACE_RUNGS = SPACE_SETTABLE;
     rungs stay pickable by hand and settable by name. */
 const INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf('--space-4'));
 
+/** Padding that wraps a line of type stops a rung higher. Those components
+    double it horizontally (`themed-padding($h: 2)`), so `--space-4` is 4px
+    over an 18px line and 8px inside a pill's own corner: squeezed rather than
+    compact. No shipped default puts text below `--space-6`. */
+const TEXT_INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf('--space-6'));
+
 const SPACE_FAMILY = [...SPACE_SETTABLE, '--space-40', '--space-64', '--space-96', '--space-128'];
 
 const BORDER_WIDTH_RUNGS = [
@@ -95,11 +101,16 @@ const TOKEN_NAME = /^--[a-z0-9-]+$/;
 type Outcome = { from: string; to: string } | { skip: SkipReason };
 
 /** `-margin` shares the padding kind, so the inset floor keys off the variable
-    rather than the kind. */
-function rungsFor(op: AdjustOp, variable: string): string[] {
+    rather than the kind. Which floor depends on what the padding surrounds,
+    and the config says so itself: a variant that also declares a
+    `-text-font-size` is holding type. */
+function rungsFor(op: AdjustOp, variable: string, aliases: ComponentConfig['aliases']): string[] {
   if (op.kind === 'radius') return op.full ? [...RADIUS_RUNGS, RADIUS_FULL] : RADIUS_RUNGS;
-  if (op.kind === 'padding' && stripSide(variable).endsWith('-padding')) return INSET_RUNGS;
-  return LADDERS[op.kind].rungs;
+  if (op.kind !== 'padding') return LADDERS[op.kind].rungs;
+  const base = stripSide(variable);
+  if (!base.endsWith('-padding')) return LADDERS.padding.rungs;
+  const variant = base.slice(0, -'-padding'.length);
+  return `${variant}-text-font-size` in aliases ? TEXT_INSET_RUNGS : INSET_RUNGS;
 }
 
 function spaceStep(token: string): number {
@@ -119,12 +130,17 @@ function snapRung(token: string, rungs: string[], direction: number): number {
   return -1;
 }
 
-function resolve(op: AdjustOp, variable: string, value: AliasDiskValue): Outcome {
+function resolve(
+  op: AdjustOp,
+  variable: string,
+  value: AliasDiskValue,
+  aliases: ComponentConfig['aliases'],
+): Outcome {
   if (typeof value !== 'string' || !TOKEN_NAME.test(value)) return { skip: 'raw-value' };
   if (!LADDERS[op.kind].family.includes(value)) return { skip: 'off-ladder' };
   if (op.set !== undefined) return { from: value, to: op.set };
 
-  const rungs = rungsFor(op, variable);
+  const rungs = rungsFor(op, variable, aliases);
   let index = rungs.indexOf(value);
   let shift = op.shift!;
   if (index < 0) {
@@ -188,7 +204,7 @@ export function adjustAliases(
 
       for (const [variable, value] of Object.entries(config.aliases)) {
         if (!matchesKind(variable, op.kind)) continue;
-        const outcome = resolve(op, variable, value);
+        const outcome = resolve(op, variable, value, config.aliases);
         if ('skip' in outcome) {
           reportFor(component).skips.push({ variable, value, reason: outcome.skip });
           continue;

package/src/editor/core/themes/generateColorsAndType.ts

@@ -18,6 +18,7 @@ import {
   setCurveAnchor,
 } from '../palettes/paletteDerivation';
 import { formatGradientValue, makeDefaultGradients } from './slices/gradients';
+import { SHADOW_VAR_NAMES, parseShadowCss, shadowTokenCss } from './parsers/shadow';
 import { AA_BODY, AA_LARGE, contrastRatio, findLForContrast } from '../palettes/contrast';
 import { type HarmonyAxis, type HarmonyMode } from '../palettes/colorHarmony';
 import { defaultPaletteConfig } from '../../ui/palette/paletteMath';
@@ -39,7 +40,8 @@ export interface ColorsAndTypeBrief {
 }
 
 /** Non-color content carried forward from the currently active colors and type
- *  so gradients, shadows, component aliases, and fonts survive regeneration. */
+ *  so gradients, shadow geometry, component aliases, and fonts survive
+ *  regeneration. Shadow opacity is derived, not carried — see `shadowVars`. */
 export interface CarryForward {
   cssVariables?: Record<string, string>;
   fontSources?: FontSource[];
@@ -68,6 +70,8 @@ export interface GenerateColorsAndTypeReport {
    *  'on, <sky> → <anchor>' or a 'skipped — …' explanation when the Canvas
    *  anchors at the ramp edge and leaves no room. */
   canvasGradient?: string;
+  /** The derived shadow opacity and the canvas lightness it came from. */
+  shadows: string;
 }
 
 export interface GenerateColorsAndTypeResult {
@@ -377,6 +381,49 @@ function applyCanvasGradient(canvas: PaletteConfig, scheme: SchemeDirection): st
   return `on, ${labels[sky]} → ${labels[anchor]}`;
 }
 
+/** The tokens.css scale, the starting point when a theme carries no shadows.
+ *  Geometry per step; every step shares one color. */
+const STOCK_SHADOW_GEOMETRY: Record<(typeof SHADOW_VAR_NAMES)[number], readonly [number, number, number]> = {
+  '--shadow-sm': [1, 1, 2],
+  '--shadow-md': [3, 3, 6],
+  '--shadow-lg': [5, 5, 9],
+  '--shadow-xl': [6, 7, 13],
+  '--shadow-2xl': [8, 9, 16],
+};
+const STOCK_SHADOW_COLOR = { spread: 0, hue: 237, saturation: 18, lightness: 3, opacity: 0.9 };
+
+/** A near-black shadow needs 0.9 to read at all against a dark ground, and at
+ *  0.9 it punches a hole in a light one. Opacity therefore rides the canvas:
+ *  full weight up to DEEP, easing to SOFT by the time the page is paper. */
+const SHADOW_OPACITY_DEEP = 0.9;
+const SHADOW_OPACITY_SOFT = 0.2;
+const SHADOW_GROUND_DEEP = 0.5;
+const SHADOW_GROUND_SOFT = 0.9;
+
+export function shadowOpacityForCanvas(canvasL: number): number {
+  const t = (canvasL - SHADOW_GROUND_DEEP) / (SHADOW_GROUND_SOFT - SHADOW_GROUND_DEEP);
+  const ramp = Math.max(0, Math.min(1, t));
+  const opacity = SHADOW_OPACITY_DEEP + ramp * (SHADOW_OPACITY_SOFT - SHADOW_OPACITY_DEEP);
+  return Math.round(opacity * 100) / 100;
+}
+
+/** Recolor the scale for this canvas: carried geometry and color ride through
+ *  (elevation shape belongs to the shape pass), opacity is replaced. Replaced
+ *  rather than kept-when-untouched, because a brief iterated from a light
+ *  canvas to a dark one would otherwise hold a shadow too faint to see. The
+ *  Canvas seed is the page background verbatim, so it is the ground the
+ *  shadow falls on. */
+function shadowVars(carried: Record<string, string>, canvas: Oklch): Record<string, string> {
+  const opacity = shadowOpacityForCanvas(canvas.l);
+  const out: Record<string, string> = {};
+  for (const variable of SHADOW_VAR_NAMES) {
+    const [x, y, blur] = STOCK_SHADOW_GEOMETRY[variable];
+    const base = parseShadowCss(variable, carried[variable] ?? '') ?? { x, y, blur, ...STOCK_SHADOW_COLOR };
+    out[variable] = shadowTokenCss({ ...base, opacity });
+  }
+  return out;
+}
+
 export function buildColorsAndTypeFromSeeds(
   brief: ColorsAndTypeBrief,
   carry: CarryForward = {},
@@ -417,6 +464,7 @@ export function buildColorsAndTypeFromSeeds(
   );
   // Rendered projections of the structured gradients, kept for production CSS.
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
+  Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, seeds.Canvas));
 
   const colorsAndType: ColorsAndType = {
     name: brief.name.trim(),
@@ -437,6 +485,7 @@ export function buildColorsAndTypeFromSeeds(
     report: {
       ...report,
       gradients: gradients === carry.gradients ? 'carried' : 'recipes',
+      shadows: `opacity ${shadowOpacityForCanvas(seeds.Canvas.l)} for a canvas at L ${seeds.Canvas.l.toFixed(2)}`,
       ...(canvasGradient ? { canvasGradient } : {}),
     },
   };

package/src/editor/core/themes/parsers/shadow.ts

@@ -0,0 +1,52 @@
+/**
+ * The single source of truth for the CSS form of a shadow scale token:
+ *
+ *   <x>px <y>px <blur>px <spread>px hsla(<h>, <s>%, <l>%, <a>)
+ *
+ * Everything that reads or writes that form goes through `parseShadowCss` /
+ * `shadowTokenCss`, so the theme generator (Node, no store) and the editor
+ * (store, DOM) agree on the shape without sharing a graph.
+ */
+import type { ShadowToken } from '../../store/editorTypes';
+
+export const SHADOW_VAR_NAMES = [
+  '--shadow-sm', '--shadow-md', '--shadow-lg', '--shadow-xl', '--shadow-2xl',
+] as const;
+
+/** What the CSS form needs; `ShadowToken` adds the editor's polar controls. */
+export type ShadowValue = Omit<ShadowToken, 'variable' | 'angle' | 'distance'>;
+
+export function computeShadowXY(angle: number, distance: number): { x: number; y: number } {
+  const rad = angle * (Math.PI / 180);
+  return {
+    x: Math.round(-distance * Math.cos(rad)),
+    y: Math.round(distance * Math.sin(rad)),
+  };
+}
+
+export function computeAngleDistance(x: number, y: number): { angle: number; distance: number } {
+  const distance = Math.round(Math.sqrt(x * x + y * y));
+  if (distance === 0) return { angle: 135, distance: 0 };
+  let angle = Math.atan2(y, -x) * (180 / Math.PI);
+  if (angle < 0) angle += 360;
+  return { angle: Math.round(angle), distance };
+}
+
+export function shadowTokenCss(t: ShadowValue): string {
+  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
+}
+
+export function parseShadowCss(variable: string, raw: string): ShadowToken | null {
+  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
+  if (!m) return null;
+  const x = parseInt(m[1], 10);
+  const y = parseInt(m[2], 10);
+  const blur = parseInt(m[3], 10);
+  const spread = parseInt(m[4], 10);
+  const hue = Math.round(parseFloat(m[5]));
+  const saturation = Math.round(parseFloat(m[6]));
+  const lightness = Math.round(parseFloat(m[7]));
+  const opacity = parseFloat(m[8]);
+  const { angle, distance } = computeAngleDistance(x, y);
+  return { variable, x, y, blur, spread, opacity, hue, saturation, lightness, angle, distance };
+}

package/src/editor/core/themes/slices/shadows.ts

@@ -10,53 +10,17 @@
 import { get } from 'svelte/store';
 import type { EditorState, ShadowToken } from '../../store/editorTypes';
 import { store, persist } from '../../store/editorCore';
+import { SHADOW_VAR_NAMES, computeShadowXY, parseShadowCss, shadowTokenCss } from '../parsers/shadow';
 
-export const SHADOW_VAR_NAMES = [
-  '--shadow-sm', '--shadow-md', '--shadow-lg', '--shadow-xl', '--shadow-2xl',
-] as const;
+export { SHADOW_VAR_NAMES, computeShadowXY, parseShadowCss, shadowTokenCss };
 
 // Identical literal set as SHADOW_VAR_NAMES — derived to avoid drift.
 export const SCALE_SHADOW_VARIABLES: ReadonlySet<string> = new Set(SHADOW_VAR_NAMES);
 
-export function computeShadowXY(angle: number, distance: number): { x: number; y: number } {
-  const rad = angle * (Math.PI / 180);
-  return {
-    x: Math.round(-distance * Math.cos(rad)),
-    y: Math.round(distance * Math.sin(rad)),
-  };
-}
-
-function computeAngleDistance(x: number, y: number): { angle: number; distance: number } {
-  const distance = Math.round(Math.sqrt(x * x + y * y));
-  if (distance === 0) return { angle: 135, distance: 0 };
-  let angle = Math.atan2(y, -x) * (180 / Math.PI);
-  if (angle < 0) angle += 360;
-  return { angle: Math.round(angle), distance };
-}
-
-export function shadowTokenCss(t: ShadowToken): string {
-  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
-}
-
 export function defaultShadowOverride(): import('../../store/editorTypes').ShadowOverrideFlags {
   return { angle: false, opacity: false, color: false, distance: false, blur: false, size: false };
 }
 
-export function parseShadowCss(variable: string, raw: string): ShadowToken | null {
-  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
-  if (!m) return null;
-  const x = parseInt(m[1], 10);
-  const y = parseInt(m[2], 10);
-  const blur = parseInt(m[3], 10);
-  const spread = parseInt(m[4], 10);
-  const hue = Math.round(parseFloat(m[5]));
-  const saturation = Math.round(parseFloat(m[6]));
-  const lightness = Math.round(parseFloat(m[7]));
-  const opacity = parseFloat(m[8]);
-  const { angle, distance } = computeAngleDistance(x, y);
-  return { variable, x, y, blur, spread, opacity, hue, saturation, lightness, angle, distance };
-}
-
 export function shadowsToVars(shadows: EditorState['shadows']): Record<string, string> {
   const out: Record<string, string> = {};
   for (const t of shadows.tokens) out[t.variable] = shadowTokenCss(t);

package/src/live-tokens/data/colors-and-type/autumn.json

@@ -2265,11 +2265,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.25)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/ocean.json

@@ -2265,11 +2265,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/spring-meadow.json

@@ -2251,11 +2251,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/themes/autumn.json

@@ -2270,11 +2270,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.25)"
     },
     "fontSources": [
       {

package/src/live-tokens/data/themes/midnight-study.json

@@ -2544,7 +2544,7 @@
       "name": "midnight-study",
       "component": "badge",
       "createdAt": "2026-05-01T08:28:00.345Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--badge-primary-surface": "--surface-brand",
         "--badge-primary-text": "--text-brand",
@@ -2555,7 +2555,7 @@
         "--badge-primary-text-line-height": "--line-height-none",
         "--badge-primary-border-width": "--border-width-1",
         "--badge-primary-radius": "--radius-full",
-        "--badge-primary-padding": "--space-4",
+        "--badge-primary-padding": "--space-6",
         "--badge-primary-shadow": "--shadow-none",
         "--badge-primary-blur": "--blur-none",
         "--badge-primary-icon-size": "--icon-size-sm",
@@ -2568,7 +2568,7 @@
         "--badge-accent-text-line-height": "--line-height-none",
         "--badge-accent-border-width": "--border-width-1",
         "--badge-accent-radius": "--radius-full",
-        "--badge-accent-padding": "--space-4",
+        "--badge-accent-padding": "--space-6",
         "--badge-accent-shadow": "--shadow-none",
         "--badge-accent-blur": "--blur-none",
         "--badge-accent-icon-size": "--icon-size-sm",
@@ -2581,7 +2581,7 @@
         "--badge-neutral-text-line-height": "--line-height-none",
         "--badge-neutral-border-width": "--border-width-1",
         "--badge-neutral-radius": "--radius-full",
-        "--badge-neutral-padding": "--space-4",
+        "--badge-neutral-padding": "--space-6",
         "--badge-neutral-shadow": "--shadow-none",
         "--badge-neutral-blur": "--blur-none",
         "--badge-neutral-icon-size": "--icon-size-sm",
@@ -2594,7 +2594,7 @@
         "--badge-alternate-text-line-height": "--line-height-none",
         "--badge-alternate-border-width": "--border-width-1",
         "--badge-alternate-radius": "--radius-full",
-        "--badge-alternate-padding": "--space-4",
+        "--badge-alternate-padding": "--space-6",
         "--badge-alternate-shadow": "--shadow-none",
         "--badge-alternate-blur": "--blur-none",
         "--badge-alternate-icon-size": "--icon-size-sm",
@@ -2607,7 +2607,7 @@
         "--badge-canvas-text-line-height": "--line-height-none",
         "--badge-canvas-border-width": "--border-width-1",
         "--badge-canvas-radius": "--radius-full",
-        "--badge-canvas-padding": "--space-4",
+        "--badge-canvas-padding": "--space-6",
         "--badge-canvas-shadow": "--shadow-none",
         "--badge-canvas-blur": "--blur-none",
         "--badge-canvas-icon-size": "--icon-size-sm",
@@ -2620,7 +2620,7 @@
         "--badge-special-text-line-height": "--line-height-none",
         "--badge-special-border-width": "--border-width-1",
         "--badge-special-radius": "--radius-full",
-        "--badge-special-padding": "--space-4",
+        "--badge-special-padding": "--space-6",
         "--badge-special-shadow": "--shadow-none",
         "--badge-special-blur": "--blur-none",
         "--badge-special-icon-size": "--icon-size-sm",
@@ -2633,7 +2633,7 @@
         "--badge-success-text-line-height": "--line-height-none",
         "--badge-success-border-width": "--border-width-1",
         "--badge-success-radius": "--radius-full",
-        "--badge-success-padding": "--space-4",
+        "--badge-success-padding": "--space-6",
         "--badge-success-shadow": "--shadow-none",
         "--badge-success-blur": "--blur-none",
         "--badge-success-icon-size": "--icon-size-sm",
@@ -2646,7 +2646,7 @@
         "--badge-warning-text-line-height": "--line-height-none",
         "--badge-warning-border-width": "--border-width-1",
         "--badge-warning-radius": "--radius-full",
-        "--badge-warning-padding": "--space-4",
+        "--badge-warning-padding": "--space-6",
         "--badge-warning-shadow": "--shadow-none",
         "--badge-warning-blur": "--blur-none",
         "--badge-warning-icon-size": "--icon-size-sm",
@@ -2659,7 +2659,7 @@
         "--badge-danger-text-line-height": "--line-height-none",
         "--badge-danger-border-width": "--border-width-1",
         "--badge-danger-radius": "--radius-full",
-        "--badge-danger-padding": "--space-4",
+        "--badge-danger-padding": "--space-6",
         "--badge-danger-shadow": "--shadow-none",
         "--badge-danger-blur": "--blur-none",
         "--badge-danger-icon-size": "--icon-size-sm",
@@ -2672,7 +2672,7 @@
         "--badge-info-text-line-height": "--line-height-none",
         "--badge-info-border-width": "--border-width-1",
         "--badge-info-radius": "--radius-full",
-        "--badge-info-padding": "--space-4",
+        "--badge-info-padding": "--space-6",
         "--badge-info-shadow": "--shadow-none",
         "--badge-info-blur": "--blur-none",
         "--badge-info-icon-size": "--icon-size-sm"
@@ -2682,7 +2682,7 @@
       "name": "midnight-study",
       "component": "button",
       "createdAt": "2026-05-10T19:28:06.893Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--button-primary-surface": "--surface-brand-high",
         "--button-primary-text": "--text-primary",
@@ -2693,7 +2693,7 @@
         "--button-primary-border": "--border-brand",
         "--button-primary-border-width": "--border-width-1",
         "--button-primary-radius": "--radius-full",
-        "--button-primary-padding": "--space-4",
+        "--button-primary-padding": "--space-8",
         "--button-primary-hover-surface": "--surface-brand-higher",
         "--button-primary-hover-text": "--text-primary",
         "--button-primary-hover-border": "--border-brand-strong",
@@ -2710,7 +2710,7 @@
         "--button-secondary-border": "--border-neutral",
         "--button-secondary-border-width": "--border-width-1",
         "--button-secondary-radius": "--radius-full",
-        "--button-secondary-padding": "--space-4",
+        "--button-secondary-padding": "--space-8",
         "--button-secondary-hover-surface": "--surface-neutral-higher",
         "--button-secondary-hover-text": "--text-primary",
         "--button-secondary-hover-border": "--border-neutral-strong",
@@ -2727,7 +2727,7 @@
         "--button-outline-border": "--border-neutral",
         "--button-outline-border-width": "--border-width-1",
         "--button-outline-radius": "--radius-full",
-        "--button-outline-padding": "--space-4",
+        "--button-outline-padding": "--space-8",
         "--button-outline-hover-surface": "--surface-neutral-lower",
         "--button-outline-hover-text": "--text-primary",
         "--button-outline-hover-border": "--border-neutral-strong",
@@ -2745,7 +2745,7 @@
         "--button-success-border": "--border-success",
         "--button-success-border-width": "--border-width-1",
         "--button-success-radius": "--radius-full",
-        "--button-success-padding": "--space-4",
+        "--button-success-padding": "--space-8",
         "--button-success-hover-surface": "--surface-success-higher",
         "--button-success-hover-text": "--text-primary",
         "--button-success-hover-border": "--border-success-strong",
@@ -2762,7 +2762,7 @@
         "--button-danger-border": "--border-danger",
         "--button-danger-border-width": "--border-width-1",
         "--button-danger-radius": "--radius-full",
-        "--button-danger-padding": "--space-4",
+        "--button-danger-padding": "--space-8",
         "--button-danger-hover-surface": "--surface-danger-high",
         "--button-danger-hover-text": "--text-primary",
         "--button-danger-hover-border": "--border-danger-medium",
@@ -2779,7 +2779,7 @@
         "--button-warning-border": "--border-warning",
         "--button-warning-border-width": "--border-width-1",
         "--button-warning-radius": "--radius-full",
-        "--button-warning-padding": "--space-4",
+        "--button-warning-padding": "--space-8",
         "--button-warning-hover-surface": "--surface-warning-high",
         "--button-warning-hover-text": "--text-primary",
         "--button-warning-hover-border": "--border-warning-medium",
@@ -2787,7 +2787,7 @@
         "--button-warning-disabled-text": "--text-tertiary",
         "--button-warning-disabled-border": "--border-neutral-faint",
         "--button-warning-icon-size": "--icon-size-md",
-        "--button-small-padding": "--space-4",
+        "--button-small-padding": "--space-6",
         "--button-small-text-font-size": "--font-size-sm",
         "--button-small-text-font-weight": "--font-weight-normal",
         "--button-small-text-line-height": "--line-height-tighter",
@@ -3008,14 +3008,14 @@
       "name": "midnight-study",
       "component": "cornerbadge",
       "createdAt": "2026-05-12T15:31:06.313Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--corner-badge-margin": "--space-0",
         "--corner-badge-outer-radius": "--radius-none",
         "--corner-badge-inner-radius": "--radius-none",
         "--corner-badge-h-axis-radius": "--radius-none",
         "--corner-badge-v-axis-radius": "--radius-none",
-        "--corner-badge-padding": "--space-4",
+        "--corner-badge-padding": "--space-6",
         "--corner-badge-text-font-family": "--font-sans",
         "--corner-badge-text-font-size": "--font-size-sm",
         "--corner-badge-text-font-weight": "--font-weight-medium",
@@ -3624,7 +3624,7 @@
       "name": "midnight-study",
       "component": "segmentedcontrol",
       "createdAt": "2026-04-28T21:13:17.669Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
         "--segmentedcontrol-bar-border": "--border-neutral",
@@ -3635,7 +3635,7 @@
         "--segmentedcontrol-divider-color": "--border-neutral",
         "--segmentedcontrol-divider-thickness": "--border-width-1",
         "--segmentedcontrol-divider-inset": "--space-6",
-        "--segmentedcontrol-option-padding": "--space-4",
+        "--segmentedcontrol-option-padding": "--space-6",
         "--segmentedcontrol-option-gap": "--space-6",
         "--segmentedcontrol-option-text": "--text-primary",
         "--segmentedcontrol-option-text-font-family": "--font-sans",
@@ -3672,7 +3672,7 @@
         "--segmentedcontrol-bar-small-radius": "--radius-md",
         "--segmentedcontrol-small-divider-inset": "--space-4",
         "--segmentedcontrol-small-divider-thickness": "--border-width-1",
-        "--segmentedcontrol-option-small-padding": "--space-4",
+        "--segmentedcontrol-option-small-padding": "--space-6",
         "--segmentedcontrol-option-small-gap": "--space-4",
         "--segmentedcontrol-option-small-icon-size": "--icon-size-sm",
         "--segmentedcontrol-option-small-text-font-size": "--font-size-sm",
@@ -3684,7 +3684,7 @@
       "name": "midnight-study",
       "component": "sidenavigation",
       "createdAt": "2026-05-25T19:34:09.771Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--sidenavigation-panel-surface": "--surface-canvas-lower",
         "--sidenavigation-panel-border": "--border-canvas-faint",
@@ -3776,7 +3776,7 @@
         "--sidenavigation-section-active-text-font-weight": "--font-weight-medium",
         "--sidenavigation-section-active-text-line-height": "--line-height-normal",
         "--sidenavigation-item-default-surface": "--color-transparent",
-        "--sidenavigation-item-default-padding": "--space-4",
+        "--sidenavigation-item-default-padding": "--space-6",
         "--sidenavigation-item-default-accent": "--color-transparent",
         "--sidenavigation-item-default-accent-width": "--border-width-3",
         "--sidenavigation-item-default-text": "--text-tertiary",
@@ -3785,7 +3785,7 @@
         "--sidenavigation-item-default-text-font-weight": "--font-weight-semibold",
         "--sidenavigation-item-default-text-line-height": "--line-height-normal",
         "--sidenavigation-item-hover-surface": "--surface-canvas",
-        "--sidenavigation-item-hover-padding": "--space-4",
+        "--sidenavigation-item-hover-padding": "--space-6",
         "--sidenavigation-item-hover-accent": "--color-transparent",
         "--sidenavigation-item-hover-accent-width": "--border-width-3",
         "--sidenavigation-item-hover-text": "--text-secondary",
@@ -3794,7 +3794,7 @@
         "--sidenavigation-item-hover-text-font-weight": "--font-weight-light",
         "--sidenavigation-item-hover-text-line-height": "--line-height-normal",
         "--sidenavigation-item-active-surface": "--surface-canvas-low",
-        "--sidenavigation-item-active-padding": "--space-4",
+        "--sidenavigation-item-active-padding": "--space-6",
         "--sidenavigation-item-active-accent": "--border-brand-medium",
         "--sidenavigation-item-active-accent-width": "--border-width-3",
         "--sidenavigation-item-active-text": "--text-primary",
@@ -3803,7 +3803,7 @@
         "--sidenavigation-item-active-text-font-weight": "--font-weight-normal",
         "--sidenavigation-item-active-text-line-height": "--line-height-normal",
         "--sidenavigation-footer-default-surface": "--color-transparent",
-        "--sidenavigation-footer-default-padding": "--space-4",
+        "--sidenavigation-footer-default-padding": "--space-6",
         "--sidenavigation-footer-default-gap": "--space-6",
         "--sidenavigation-footer-default-accent": "--color-transparent",
         "--sidenavigation-footer-default-accent-width": "--border-width-3",
@@ -3815,7 +3815,7 @@
         "--sidenavigation-footer-default-text-font-weight": "--font-weight-light",
         "--sidenavigation-footer-default-text-line-height": "--line-height-normal",
         "--sidenavigation-footer-hover-surface": "--surface-canvas",
-        "--sidenavigation-footer-hover-padding": "--space-4",
+        "--sidenavigation-footer-hover-padding": "--space-6",
         "--sidenavigation-footer-hover-gap": "--space-6",
         "--sidenavigation-footer-hover-accent": "--color-transparent",
         "--sidenavigation-footer-hover-accent-width": "--border-width-3",
@@ -3827,7 +3827,7 @@
         "--sidenavigation-footer-hover-text-font-weight": "--font-weight-light",
         "--sidenavigation-footer-hover-text-line-height": "--line-height-normal",
         "--sidenavigation-footer-active-surface": "--surface-canvas-low",
-        "--sidenavigation-footer-active-padding": "--space-4",
+        "--sidenavigation-footer-active-padding": "--space-6",
         "--sidenavigation-footer-active-gap": "--space-6",
         "--sidenavigation-footer-active-accent": "--border-brand-medium",
         "--sidenavigation-footer-active-accent-width": "--border-width-3",
@@ -3844,7 +3844,7 @@
       "name": "midnight-study",
       "component": "tabbar",
       "createdAt": "2026-05-12T01:57:26.390Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--tabbar-bar-divider": "--border-neutral-subtle",
         "--tabbar-bar-divider-thickness": "--border-width-1",
@@ -3858,7 +3858,7 @@
         "--tabbar-default-text-font-weight": "--font-weight-light",
         "--tabbar-default-text-line-height": "--line-height-normal",
         "--tabbar-default-icon-size": "--icon-size-md",
-        "--tabbar-default-padding": "--space-4",
+        "--tabbar-default-padding": "--space-6",
         "--tabbar-default-border": "--color-transparent",
         "--tabbar-default-surface": "--color-transparent",
         "--tabbar-default-tab-border-color": "--color-transparent",
@@ -3873,7 +3873,7 @@
         "--tabbar-hover-text-font-weight": "--font-weight-light",
         "--tabbar-hover-text-line-height": "--line-height-normal",
         "--tabbar-hover-icon-size": "--icon-size-md",
-        "--tabbar-hover-padding": "--space-4",
+        "--tabbar-hover-padding": "--space-6",
         "--tabbar-hover-border": "--color-transparent",
         "--tabbar-hover-tab-border-color": "--color-transparent",
         "--tabbar-hover-tab-border-width": "--border-width-0",
@@ -3888,7 +3888,7 @@
         "--tabbar-active-text-font-weight": "--font-weight-light",
         "--tabbar-active-text-line-height": "--line-height-normal",
         "--tabbar-active-icon-size": "--icon-size-md",
-        "--tabbar-active-padding": "--space-4",
+        "--tabbar-active-padding": "--space-6",
         "--tabbar-active-tab-border-color": "--color-transparent",
         "--tabbar-active-tab-border-width": "--border-width-0",
         "--tabbar-active-tab-top-radius": "--radius-none",
@@ -3900,7 +3900,7 @@
         "--tabbar-disabled-text-font-weight": "--font-weight-light",
         "--tabbar-disabled-text-line-height": "--line-height-normal",
         "--tabbar-disabled-icon-size": "--icon-size-md",
-        "--tabbar-disabled-padding": "--space-4",
+        "--tabbar-disabled-padding": "--space-6",
         "--tabbar-disabled-border": "--color-transparent",
         "--tabbar-disabled-surface": "--color-transparent",
         "--tabbar-disabled-tab-border-color": "--color-transparent",
@@ -3980,7 +3980,7 @@
       "name": "midnight-study",
       "component": "tooltip",
       "createdAt": "2026-04-18T02:43:11.333Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "updatedAt": "2026-08-20T00:00:00.000Z",
       "aliases": {
         "--tooltip-surface": "color-mix(in srgb, var(--surface-canvas-lowest) 75%, transparent)",
         "--tooltip-text": "--text-primary",
@@ -3991,10 +3991,10 @@
         "--tooltip-border": "--border-neutral",
         "--tooltip-border-width": "--border-width-1",
         "--tooltip-radius": "--radius-md",
-        "--tooltip-padding": "--space-4",
+        "--tooltip-padding": "--space-6",
         "--tooltip-shadow": "--shadow-md"
       }
     }
   },
   "componentSchemaVersion": 21
-}
+}

package/src/live-tokens/data/themes/ocean.json

@@ -2270,11 +2270,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {

package/src/live-tokens/data/themes/spring-meadow.json

@@ -2256,11 +2256,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {

package/src/system/components/FloatingTokenTags.css

@@ -1,9 +1,10 @@
 /*
  * Decoupled from the design system: pills, knots, strings, balls, and
  * animations are hardcoded so token edits don't repaint our chrome. The
- * two exceptions are intentional and ARE the demo: the central box's
- * surface/radius/border (set inline) and the dropdown (rendered through
- * <MenuSelect>). File is global; keep selectors `ftt-` prefixed.
+ * exceptions are intentional and ARE the demo: the central box's
+ * surface/radius/border (set inline), the dropdown (rendered through
+ * <MenuSelect>), and elevation, which reads from the --shadow-* scale.
+ * File is global; keep selectors `ftt-` prefixed.
  */
 
 .ftt-stage {
@@ -34,7 +35,7 @@
   border-color: #52726e;
   border-width: 2px;
   border-radius: 0.25rem;
-  box-shadow: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
+  box-shadow: var(--shadow-md);
   transition:
     background    300ms ease,
     border-color  300ms ease,
@@ -188,6 +189,7 @@
   color: #000;
   border: 1px solid rgba(255, 255, 255, 0.55);
   border-radius: 9999px;
+  box-shadow: var(--shadow-md);
   font-family: Manrope, system-ui, -apple-system, sans-serif;
   font-size: 0.875rem;
   font-weight: 600;

package/src/system/internal/backgroundContrast.ts

@@ -48,7 +48,8 @@ function luminance({ r, g, b }: Rgb): number {
 
 /**
  * Pick the invariant black/white token with the stronger minimum contrast
- * against every explicit colour in a solid or gradient page background.
+ * against every explicit colour in a solid or gradient page background —
+ * the rule FloatingTokenTags uses for its kite strings.
  */
 export function contrastTokenForBackground(background: string): ContrastColorToken {
   const colors = colorsIn(background);