@motion-proto/live-tokens 0.65.0 → 0.65.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.65.1 — applyFontStacks returns what it wrote
+
+### Changed
+
+- **`applyFontStacks` returns the variables it wrote.** It writes the `--font-*`
+  stacks from a list it kept to itself, so a consumer tracking what it had
+  applied — to tear those vars down when switching looks — had to hand-maintain
+  a copy of that list. A copy falls behind silently the moment a stack is added
+  here, and the missed variable stays stuck at the outgoing look's value:
+  `--font-editorial` did exactly that to a site that had listed the original
+  four. The return value is additive, so existing calls keep working.
+
+  ```ts
+  applied = [...applied, ...applyFontStacks(theme.fontStacks, theme.fontSources)];
+  ```
+
 ## 0.65.0 — A link the router cannot serve is the browser's
 
 ### Fixed

package/package.json

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

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

@@ -129,12 +129,27 @@ export function resolveFontStackValues(
  * Compose each stack into its resolved "family1, family2, ..." string and
  * write it to the matching --font-* variable on :root (and parent :root when
  * in an iframe) via the same pipeline used for color variables.
+ *
+ * Returns the variables it set, so a caller tracking what it has applied — to
+ * tear those vars down when switching looks — can record them without keeping
+ * its own copy of the stack list. A hand-maintained copy silently falls behind
+ * whenever a stack is added here, leaving the missed variable stuck at the
+ * outgoing look's value; `--font-editorial` did exactly that.
  */
-export function applyFontStacks(stacks: FontStack[], sources: FontSource[]): void {
+export function applyFontStacks(
+  stacks: FontStack[],
+  sources: FontSource[],
+): FontStackVariable[] {
   const resolved = resolveFontStackValues(stacks, sources);
+  const applied: FontStackVariable[] = [];
   for (const name of FONT_STACK_VARIABLES) {
     const value = resolved[name];
-    if (value) setCssVar(name, value);
-    else removeCssVar(name);
+    if (value) {
+      setCssVar(name, value);
+      applied.push(name);
+    } else {
+      removeCssVar(name);
+    }
   }
+  return applied;
 }