@motion-proto/live-tokens 0.91.2 → 0.92.0

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

@@ -47,12 +47,16 @@ interface TokensCssMigration {
  * sectioning, and formatting survive untouched. They are idempotent **by
  * presence**: `ensure` skips a token that already exists, `rename` only fires
  * when the old name is present and the new one is absent, `remove` is a no-op
- * when the name is gone. Re-running a migration therefore never double-applies,
+ * when the name is gone, `set` writes nothing when the value already matches,
+ * and `appendMediaBlock` skips a name the block declares. Re-running a migration therefore never double-applies,
  * which is what lets the CLI run safely without a schema-version stamp.
  */
 /** Names declared as custom properties (`--x: …;`) anywhere in the source. */
 declare function collectDefinedTokens(css: string): Set<string>;
-/** Declared name → value, last declaration winning (as the cascade would). */
+/**
+ * Declared name → top-level value, last declaration winning. Declarations
+ * inside `@media` are breakpoint re-points and never count.
+ */
 declare function collectTokenValues(css: string): Map<string, string>;
 /** Names referenced via `var(--x)` anywhere in the source. */
 declare function collectReferencedTokens(css: string): Set<string>;
@@ -96,6 +100,22 @@ declare function removeToken(css: string, name: string): string;
  * No-op when nothing matches. Use for retiring a whole retired namespace.
  */
 declare function removeTokensMatching(css: string, predicate: (name: string) => boolean): string;
+interface SetTokenValueOptions {
+    /** Rewrite only when the current value equals this one, so a consumer's edit stays. */
+    from?: string;
+}
+/**
+ * Rewrite the value of `name` where the top-level `:root` declares it. A
+ * re-declaration inside `@media` keeps its value. No-op when the top-level
+ * `:root` does not declare `name`.
+ */
+declare function setTokenValue(css: string, name: string, value: string, opts?: SetTokenValueOptions): string;
+/**
+ * Append each entry that no top-level `@media <query>` block declares yet to
+ * that block's `:root`. The query must match exactly. With no such block, a new
+ * one goes at the end of the file.
+ */
+declare function appendMediaBlock(css: string, query: string, entries: ScaleEntry[]): string;
 
 /**
  * Registered tokens-css migrations, applied in array order. Unlike the
@@ -194,4 +214,4 @@ interface ValidateInput {
  */
 declare function validateTokensCss(input: ValidateInput): MissingToken[];
 
-export { type BreakingGateResult, type ComponentSource, type ContractViolation, type MissingToken, type RunResult, type SemverBump, TOKENS_CSS_MIGRATIONS, type TokensCssMigration, type ValidateInput, collectDefinedTokens, collectReferencedTokens, collectTokenValues, enforceBreakingRequiresMajor, ensureScale, findContractViolations, removeToken, removeTokensMatching, renameToken, runAdditiveTokensCssMigrations, runTokensCssMigrations, semverBumpType, validateTokensCss };
+export { type BreakingGateResult, type ComponentSource, type ContractViolation, type MissingToken, type RunResult, type SemverBump, TOKENS_CSS_MIGRATIONS, type TokensCssMigration, type ValidateInput, appendMediaBlock, collectDefinedTokens, collectReferencedTokens, collectTokenValues, enforceBreakingRequiresMajor, ensureScale, findContractViolations, removeToken, removeTokensMatching, renameToken, runAdditiveTokensCssMigrations, runTokensCssMigrations, semverBumpType, setTokenValue, validateTokensCss };

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

@@ -47,12 +47,16 @@ interface TokensCssMigration {
  * sectioning, and formatting survive untouched. They are idempotent **by
  * presence**: `ensure` skips a token that already exists, `rename` only fires
  * when the old name is present and the new one is absent, `remove` is a no-op
- * when the name is gone. Re-running a migration therefore never double-applies,
+ * when the name is gone, `set` writes nothing when the value already matches,
+ * and `appendMediaBlock` skips a name the block declares. Re-running a migration therefore never double-applies,
  * which is what lets the CLI run safely without a schema-version stamp.
  */
 /** Names declared as custom properties (`--x: …;`) anywhere in the source. */
 declare function collectDefinedTokens(css: string): Set<string>;
-/** Declared name → value, last declaration winning (as the cascade would). */
+/**
+ * Declared name → top-level value, last declaration winning. Declarations
+ * inside `@media` are breakpoint re-points and never count.
+ */
 declare function collectTokenValues(css: string): Map<string, string>;
 /** Names referenced via `var(--x)` anywhere in the source. */
 declare function collectReferencedTokens(css: string): Set<string>;
@@ -96,6 +100,22 @@ declare function removeToken(css: string, name: string): string;
  * No-op when nothing matches. Use for retiring a whole retired namespace.
  */
 declare function removeTokensMatching(css: string, predicate: (name: string) => boolean): string;
+interface SetTokenValueOptions {
+    /** Rewrite only when the current value equals this one, so a consumer's edit stays. */
+    from?: string;
+}
+/**
+ * Rewrite the value of `name` where the top-level `:root` declares it. A
+ * re-declaration inside `@media` keeps its value. No-op when the top-level
+ * `:root` does not declare `name`.
+ */
+declare function setTokenValue(css: string, name: string, value: string, opts?: SetTokenValueOptions): string;
+/**
+ * Append each entry that no top-level `@media <query>` block declares yet to
+ * that block's `:root`. The query must match exactly. With no such block, a new
+ * one goes at the end of the file.
+ */
+declare function appendMediaBlock(css: string, query: string, entries: ScaleEntry[]): string;
 
 /**
  * Registered tokens-css migrations, applied in array order. Unlike the
@@ -194,4 +214,4 @@ interface ValidateInput {
  */
 declare function validateTokensCss(input: ValidateInput): MissingToken[];
 
-export { type BreakingGateResult, type ComponentSource, type ContractViolation, type MissingToken, type RunResult, type SemverBump, TOKENS_CSS_MIGRATIONS, type TokensCssMigration, type ValidateInput, collectDefinedTokens, collectReferencedTokens, collectTokenValues, enforceBreakingRequiresMajor, ensureScale, findContractViolations, removeToken, removeTokensMatching, renameToken, runAdditiveTokensCssMigrations, runTokensCssMigrations, semverBumpType, validateTokensCss };
+export { type BreakingGateResult, type ComponentSource, type ContractViolation, type MissingToken, type RunResult, type SemverBump, TOKENS_CSS_MIGRATIONS, type TokensCssMigration, type ValidateInput, appendMediaBlock, collectDefinedTokens, collectReferencedTokens, collectTokenValues, enforceBreakingRequiresMajor, ensureScale, findContractViolations, removeToken, removeTokensMatching, renameToken, runAdditiveTokensCssMigrations, runTokensCssMigrations, semverBumpType, setTokenValue, validateTokensCss };

package/dist-plugin/tokensCssMigrations/index.js

@@ -1,5 +1,6 @@
 import {
   TOKENS_CSS_MIGRATIONS,
+  appendMediaBlock,
   collectDefinedTokens,
   collectReferencedTokens,
   collectTokenValues,
@@ -12,14 +13,16 @@ import {
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   semverBumpType,
+  setTokenValue,
   validateTokensCss
-} from "../chunk-GWMEYBZ2.js";
+} from "../chunk-JOSSYGR2.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig
 } from "../chunk-6WGFOJXO.js";
 export {
   TOKENS_CSS_MIGRATIONS,
+  appendMediaBlock,
   collectDefinedTokens,
   collectReferencedTokens,
   collectTokenValues,
@@ -33,5 +36,6 @@ export {
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   semverBumpType,
+  setTokenValue,
   validateTokensCss
 };

package/package.json

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

package/src/app/site.css

@@ -52,6 +52,28 @@ h4 {
   margin: var(--space-16) 0 var(--space-4);
 }
 
+h5 {
+  font-family: var(--heading-xs-font-family);
+  font-size: var(--heading-xs-font-size);
+  font-weight: var(--heading-xs-font-weight);
+  line-height: var(--heading-xs-line-height);
+  letter-spacing: var(--heading-xs-letter-spacing);
+  color: var(--text-primary);
+  margin: var(--space-16) 0 var(--space-4);
+  overflow-wrap: break-word;
+}
+
+h6 {
+  font-family: var(--heading-2xs-font-family);
+  font-size: var(--heading-2xs-font-size);
+  font-weight: var(--heading-2xs-font-weight);
+  line-height: var(--heading-2xs-line-height);
+  letter-spacing: var(--heading-2xs-letter-spacing);
+  color: var(--text-primary);
+  margin: var(--space-16) 0 var(--space-4);
+  overflow-wrap: break-word;
+}
+
 @media (max-width: 768px) {
   h1 {
     margin-bottom: var(--space-8);
@@ -80,19 +102,31 @@ p:last-child {
   margin-bottom: 0;
 }
 
+small {
+  font-family: var(--body-sm-font-family);
+  font-size: var(--body-sm-font-size);
+  font-weight: var(--body-sm-font-weight);
+  line-height: var(--body-sm-line-height);
+  letter-spacing: var(--body-sm-letter-spacing);
+}
+
 code {
-  font-family: var(--code-font-family);
-  font-size: var(--code-font-size);
-  font-weight: var(--code-font-weight);
-  letter-spacing: var(--code-letter-spacing);
+  font-family: var(--code-md-font-family);
+  font-size: 0.875em;
+  font-weight: var(--code-md-font-weight);
+  letter-spacing: var(--code-md-letter-spacing);
 }
 
 pre {
-  font-family: var(--code-font-family);
-  font-size: var(--code-font-size);
-  font-weight: var(--code-font-weight);
-  line-height: var(--code-line-height);
-  letter-spacing: var(--code-letter-spacing);
+  font-family: var(--code-md-font-family);
+  font-size: var(--code-md-font-size);
+  font-weight: var(--code-md-font-weight);
+  line-height: var(--code-md-line-height);
+  letter-spacing: var(--code-md-letter-spacing);
+}
+
+pre code {
+  font-size: inherit;
 }
 
 a {
@@ -255,3 +289,203 @@ blockquote {
   letter-spacing: var(--eyebrow-letter-spacing);
   text-transform: var(--eyebrow-text-transform);
 }
+
+.display-2xl {
+  font-family: var(--display-2xl-font-family);
+  font-size: var(--display-2xl-font-size);
+  font-weight: var(--display-2xl-font-weight);
+  line-height: var(--display-2xl-line-height);
+  letter-spacing: var(--display-2xl-letter-spacing);
+}
+
+.display-xl {
+  font-family: var(--display-xl-font-family);
+  font-size: var(--display-xl-font-size);
+  font-weight: var(--display-xl-font-weight);
+  line-height: var(--display-xl-line-height);
+  letter-spacing: var(--display-xl-letter-spacing);
+}
+
+.display-lg {
+  font-family: var(--display-lg-font-family);
+  font-size: var(--display-lg-font-size);
+  font-weight: var(--display-lg-font-weight);
+  line-height: var(--display-lg-line-height);
+  letter-spacing: var(--display-lg-letter-spacing);
+}
+
+.display-md {
+  font-family: var(--display-md-font-family);
+  font-size: var(--display-md-font-size);
+  font-weight: var(--display-md-font-weight);
+  line-height: var(--display-md-line-height);
+  letter-spacing: var(--display-md-letter-spacing);
+}
+
+.display-sm {
+  font-family: var(--display-sm-font-family);
+  font-size: var(--display-sm-font-size);
+  font-weight: var(--display-sm-font-weight);
+  line-height: var(--display-sm-line-height);
+  letter-spacing: var(--display-sm-letter-spacing);
+}
+
+.display-xs {
+  font-family: var(--display-xs-font-family);
+  font-size: var(--display-xs-font-size);
+  font-weight: var(--display-xs-font-weight);
+  line-height: var(--display-xs-line-height);
+  letter-spacing: var(--display-xs-letter-spacing);
+}
+
+.display-2xs {
+  font-family: var(--display-2xs-font-family);
+  font-size: var(--display-2xs-font-size);
+  font-weight: var(--display-2xs-font-weight);
+  line-height: var(--display-2xs-line-height);
+  letter-spacing: var(--display-2xs-letter-spacing);
+}
+
+.heading-2xl {
+  font-family: var(--heading-2xl-font-family);
+  font-size: var(--heading-2xl-font-size);
+  font-weight: var(--heading-2xl-font-weight);
+  line-height: var(--heading-2xl-line-height);
+  letter-spacing: var(--heading-2xl-letter-spacing);
+}
+
+.heading-xs {
+  font-family: var(--heading-xs-font-family);
+  font-size: var(--heading-xs-font-size);
+  font-weight: var(--heading-xs-font-weight);
+  line-height: var(--heading-xs-line-height);
+  letter-spacing: var(--heading-xs-letter-spacing);
+}
+
+.heading-2xs {
+  font-family: var(--heading-2xs-font-family);
+  font-size: var(--heading-2xs-font-size);
+  font-weight: var(--heading-2xs-font-weight);
+  line-height: var(--heading-2xs-line-height);
+  letter-spacing: var(--heading-2xs-letter-spacing);
+}
+
+.body-2xl {
+  font-family: var(--body-2xl-font-family);
+  font-size: var(--body-2xl-font-size);
+  font-weight: var(--body-2xl-font-weight);
+  line-height: var(--body-2xl-line-height);
+  letter-spacing: var(--body-2xl-letter-spacing);
+}
+
+.body-xl {
+  font-family: var(--body-xl-font-family);
+  font-size: var(--body-xl-font-size);
+  font-weight: var(--body-xl-font-weight);
+  line-height: var(--body-xl-line-height);
+  letter-spacing: var(--body-xl-letter-spacing);
+}
+
+.body-lg {
+  font-family: var(--body-lg-font-family);
+  font-size: var(--body-lg-font-size);
+  font-weight: var(--body-lg-font-weight);
+  line-height: var(--body-lg-line-height);
+  letter-spacing: var(--body-lg-letter-spacing);
+}
+
+.body-xs {
+  font-family: var(--body-xs-font-family);
+  font-size: var(--body-xs-font-size);
+  font-weight: var(--body-xs-font-weight);
+  line-height: var(--body-xs-line-height);
+  letter-spacing: var(--body-xs-letter-spacing);
+}
+
+.body-2xs {
+  font-family: var(--body-2xs-font-family);
+  font-size: var(--body-2xs-font-size);
+  font-weight: var(--body-2xs-font-weight);
+  line-height: var(--body-2xs-line-height);
+  letter-spacing: var(--body-2xs-letter-spacing);
+}
+
+.editorial-2xl {
+  font-family: var(--editorial-2xl-font-family);
+  font-size: var(--editorial-2xl-font-size);
+  font-weight: var(--editorial-2xl-font-weight);
+  line-height: var(--editorial-2xl-line-height);
+  letter-spacing: var(--editorial-2xl-letter-spacing);
+}
+
+.editorial-xs {
+  font-family: var(--editorial-xs-font-family);
+  font-size: var(--editorial-xs-font-size);
+  font-weight: var(--editorial-xs-font-weight);
+  line-height: var(--editorial-xs-line-height);
+  letter-spacing: var(--editorial-xs-letter-spacing);
+}
+
+.editorial-2xs {
+  font-family: var(--editorial-2xs-font-family);
+  font-size: var(--editorial-2xs-font-size);
+  font-weight: var(--editorial-2xs-font-weight);
+  line-height: var(--editorial-2xs-line-height);
+  letter-spacing: var(--editorial-2xs-letter-spacing);
+}
+
+.code-2xl {
+  font-family: var(--code-2xl-font-family);
+  font-size: var(--code-2xl-font-size);
+  font-weight: var(--code-2xl-font-weight);
+  line-height: var(--code-2xl-line-height);
+  letter-spacing: var(--code-2xl-letter-spacing);
+}
+
+.code-xl {
+  font-family: var(--code-xl-font-family);
+  font-size: var(--code-xl-font-size);
+  font-weight: var(--code-xl-font-weight);
+  line-height: var(--code-xl-line-height);
+  letter-spacing: var(--code-xl-letter-spacing);
+}
+
+.code-lg {
+  font-family: var(--code-lg-font-family);
+  font-size: var(--code-lg-font-size);
+  font-weight: var(--code-lg-font-weight);
+  line-height: var(--code-lg-line-height);
+  letter-spacing: var(--code-lg-letter-spacing);
+}
+
+.code-md {
+  font-family: var(--code-md-font-family);
+  font-size: var(--code-md-font-size);
+  font-weight: var(--code-md-font-weight);
+  line-height: var(--code-md-line-height);
+  letter-spacing: var(--code-md-letter-spacing);
+}
+
+.code-sm {
+  font-family: var(--code-sm-font-family);
+  font-size: var(--code-sm-font-size);
+  font-weight: var(--code-sm-font-weight);
+  line-height: var(--code-sm-line-height);
+  letter-spacing: var(--code-sm-letter-spacing);
+}
+
+.code-xs {
+  font-family: var(--code-xs-font-family);
+  font-size: var(--code-xs-font-size);
+  font-weight: var(--code-xs-font-weight);
+  line-height: var(--code-xs-line-height);
+  letter-spacing: var(--code-xs-letter-spacing);
+}
+
+.code-2xs {
+  font-family: var(--code-2xs-font-family);
+  font-size: var(--code-2xs-font-size);
+  font-weight: var(--code-2xs-font-weight);
+  line-height: var(--code-2xs-line-height);
+  letter-spacing: var(--code-2xs-letter-spacing);
+}

package/src/demo/TestingLoops.svelte

@@ -607,10 +607,10 @@
 
   code {
     font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
+    font-size: var(--code-md-font-size);
     font-weight: var(--code-font-weight);
-    line-height: var(--code-line-height);
-    letter-spacing: var(--code-letter-spacing);
+    line-height: var(--code-md-line-height);
+    letter-spacing: var(--code-md-letter-spacing);
     background: var(--tint-low);
     padding-inline: var(--space-4);
     border-radius: var(--radius-sm);
@@ -863,10 +863,10 @@
 
   .dg :global(.rule) {
     font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
+    font-size: var(--code-md-font-size);
     font-weight: var(--code-font-weight);
-    line-height: var(--code-line-height);
-    letter-spacing: var(--code-letter-spacing);
+    line-height: var(--code-md-line-height);
+    letter-spacing: var(--code-md-letter-spacing);
     fill: var(--text-accent);
   }
 
@@ -901,10 +901,10 @@
     padding-top: var(--space-24);
     border-top: var(--border-width-1) solid var(--border-neutral-subtle);
     font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
+    font-size: var(--code-md-font-size);
     font-weight: var(--code-font-weight);
-    line-height: var(--code-line-height);
-    letter-spacing: var(--code-letter-spacing);
+    line-height: var(--code-md-line-height);
+    letter-spacing: var(--code-md-letter-spacing);
     color: var(--text-secondary);
   }
 

package/src/editor/core/fonts/weightCoverage.ts

@@ -18,6 +18,7 @@ export interface FaceCoverage {
 
 const STACK_REF = /var\(\s*(--font-(?:display|sans|serif|mono))\s*\)/;
 const VAR_REF = /var\(\s*(--[a-z0-9-]+)/i;
+const ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
 
 function declarations(css: string): Map<string, string> {
   const decls = new Map<string, string>();
@@ -27,6 +28,28 @@ function declarations(css: string): Map<string, string> {
   return decls;
 }
 
+/**
+ * Follows whole-value aliases, such as a text style's `var(--heading-font-weight)`,
+ * until `read` accepts a value. A `--font-*` stack or weight token ends the walk,
+ * so an alias between stacks, such as `--font-editorial`, counts for no stack.
+ */
+function follow<T>(
+  decls: Map<string, string>,
+  value: string | undefined,
+  read: (v: string) => T | undefined,
+): T | undefined {
+  const seen = new Set<string>();
+  while (value !== undefined) {
+    const hit = read(value);
+    if (hit !== undefined) return hit;
+    const next = value.match(ALIAS)?.[1];
+    if (!next || next.startsWith('--font-') || seen.has(next)) return undefined;
+    seen.add(next);
+    value = decls.get(next);
+  }
+  return undefined;
+}
+
 /**
  * Every weight the token contract asks of each font stack, read off the
  * `-font-family` / `-font-weight` pairing that typography tokens follow.
@@ -50,10 +73,16 @@ export function requiredWeights(
   for (const [name, value] of decls) {
     const familyVariable = inferFontFamilyVariable(name);
     if (!familyVariable) continue;
-    const stack = decls.get(familyVariable)?.match(STACK_REF)?.[1] as FontStackVariable | undefined;
+    const stack = follow(
+      decls,
+      decls.get(familyVariable),
+      (v) => v.match(STACK_REF)?.[1] as FontStackVariable | undefined,
+    );
     if (!stack) continue;
 
-    const weight = /^\d+$/.test(value) ? Number(value) : scale.get(value.match(VAR_REF)?.[1] ?? '');
+    const weight = follow(decls, value, (v) =>
+      /^\d+$/.test(v) ? Number(v) : scale.get(v.match(VAR_REF)?.[1] ?? ''),
+    );
     if (weight === undefined) continue;
 
     const key = `${stack}:${weight}`;

package/src/editor/core/palettes/tokenRegistry.ts

@@ -23,6 +23,8 @@ import tokensCss from '../../../system/styles/tokens.css?raw';
 import { editorState } from '../store/editorStore';
 import type { EditorState } from '../store/editorTypes';
 import { extractGlobalRootBody } from '../themes/parsers/globalRootBlock';
+import { stripMediaBlocks } from '../themes/parsers/mediaBlocks';
+import { parseColorOpacity } from '../themes/parsers/colorOpacity';
 import { refToCss } from '../store/cssVarRef';
 
 // Re-exported for tests and downstream consumers that previously imported it
@@ -43,39 +45,51 @@ export interface TokenRegistry {
 
 /**
  * Pure constructor: parses a CSS source string (possibly concatenated from
- * multiple files) and returns a registry bound to that snapshot.
+ * multiple files) and returns a registry bound to that snapshot. A declaration
+ * inside `@media` is a breakpoint re-point and never counts as declared.
  */
 export function buildTokenRegistry(cssText: string): TokenRegistry {
   const declarations = new Map<string, string>();
   const re = /(--[a-z0-9-]+)\s*:\s*([^;]+);/gi;
   let m: RegExpExecArray | null;
-  while ((m = re.exec(cssText)) !== null) {
+  const topLevel = stripMediaBlocks(cssText);
+  while ((m = re.exec(topLevel)) !== null) {
     declarations.set(m[1], m[2].trim());
   }
 
-  function resolveAliasChain(varName: string): string[] {
-    const chain = [varName];
-    const visited = new Set<string>([varName]);
-    let current = varName;
-    while (true) {
-      const decl = declarations.get(current);
-      if (!decl) return chain;
-      const aliasMatch = decl.match(/var\((--[a-z0-9-]+)\)/i);
-      if (!aliasMatch) return chain;
-      const next = aliasMatch[1];
-      if (visited.has(next)) return chain;
-      visited.add(next);
-      chain.push(next);
-      current = next;
-    }
-  }
-
+  const getDeclaredValue = (v: string): string | null => declarations.get(v) ?? null;
   return {
-    getDeclaredValue: (v) => declarations.get(v) ?? null,
-    resolveAliasChain,
+    getDeclaredValue,
+    resolveAliasChain: (varName) => walkAliasChain(varName, getDeclaredValue),
   };
 }
 
+const ALIAS_RE = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
+
+/**
+ * The token a declaration aliases: the whole value is `var(--x)`, or `--x` at
+ * reduced opacity. A `var()` inside any other expression is arithmetic on the
+ * token, so `calc(var(--x) * 2)` aliases nothing.
+ */
+function aliasTarget(decl: string): string | null {
+  return decl.match(ALIAS_RE)?.[1] ?? parseColorOpacity(decl)?.name ?? null;
+}
+
+function walkAliasChain(varName: string, getDeclared: (v: string) => string | null): string[] {
+  const chain = [varName];
+  const visited = new Set<string>([varName]);
+  let current = varName;
+  while (true) {
+    const decl = getDeclared(current);
+    if (!decl) return chain;
+    const next = aliasTarget(decl);
+    if (!next || visited.has(next)) return chain;
+    visited.add(next);
+    chain.push(next);
+    current = next;
+  }
+}
+
 const componentTokenCss = Object.values(componentSources)
   .map(extractGlobalRootBody)
   .join('\n');
@@ -119,22 +133,7 @@ function buildOverlayRegistry(
     overrides.has(v) ? overrides.get(v)! : base.getDeclaredValue(v);
   return {
     getDeclaredValue: getDeclared,
-    resolveAliasChain(varName: string): string[] {
-      const chain = [varName];
-      const visited = new Set<string>([varName]);
-      let current = varName;
-      while (true) {
-        const decl = getDeclared(current);
-        if (!decl) return chain;
-        const aliasMatch = decl.match(/var\((--[a-z0-9-]+)\)/i);
-        if (!aliasMatch) return chain;
-        const next = aliasMatch[1];
-        if (visited.has(next)) return chain;
-        visited.add(next);
-        chain.push(next);
-        current = next;
-      }
-    },
+    resolveAliasChain: (varName) => walkAliasChain(varName, getDeclared),
   };
 }
 

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

@@ -0,0 +1,46 @@
+/**
+ * `css` with every `@media` block removed. Readers that want a token's declared
+ * default go through it, so a breakpoint re-point never stands in for the
+ * top-level value.
+ *
+ * Dependency-free so the vite plugin build can import it, as it does
+ * `globalRootBlock`.
+ */
+export function stripMediaBlocks(css: string): string {
+  const kept: string[] = [];
+  let from = 0;
+  let i = 0;
+  while (i < css.length) {
+    if (css.startsWith('/*', i)) {
+      i = commentEnd(css, i);
+    } else if (css[i] === '@' && /^@media\b/i.test(css.slice(i, i + 7))) {
+      kept.push(css.slice(from, i));
+      i = from = blockEnd(css, i);
+    } else {
+      i++;
+    }
+  }
+  kept.push(css.slice(from));
+  return kept.join('');
+}
+
+function commentEnd(css: string, start: number): number {
+  const end = css.indexOf('*/', start + 2);
+  return end === -1 ? css.length : end + 2;
+}
+
+/** Index just past the brace that closes the first block opened at or after `start`. */
+function blockEnd(css: string, start: number): number {
+  let depth = 0;
+  let i = start;
+  while (i < css.length) {
+    if (css.startsWith('/*', i)) {
+      i = commentEnd(css, i);
+      continue;
+    }
+    const c = css[i++];
+    if (c === '{') depth++;
+    else if (c === '}' && --depth === 0) return i;
+  }
+  return css.length;
+}