@motion-proto/live-tokens 0.72.1 → 0.74.0

package/bin/set-colors.mjs

@@ -0,0 +1,191 @@
+// `live-tokens set-colors` worker.
+//
+// Reads a base color file (JSON), builds the theme's whole color state via the
+// compiled engine (dist-plugin/setColors — the CLI never imports TS sources),
+// enforces the AA contrast gate, and writes the result into
+// `colors-and-type/_working.json`: the same buffer the editor's own palette
+// edits land in, so a recolor is an unsaved edit the user keeps by saving the
+// open theme or by running `save-theme`. Named colors-and-type files, themes,
+// tokens.css and fonts.css are never touched, and nothing is activated.
+//
+// Non-color content carries forward from the live colors and type, so a recolor
+// replaces the color identity and nothing else. Swatch gradients ride along
+// when user-tuned; stock ones are rebuilt from the new families by the engine.
+
+import { existsSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import {
+  readActiveTheme,
+  readLiveColorsAndType,
+  readSavedColorsAndType,
+  sameContent,
+  savedColorsAndTypeSource,
+} from './lib/liveState.mjs';
+
+const pkgRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const ENGINE = resolve(pkgRoot, 'dist-plugin/setColors/index.js');
+
+const SOURCE_LABELS = {
+  working: 'your unsaved edits',
+  theme: 'the open theme',
+  default: 'the package default',
+};
+
+async function loadEngine() {
+  if (!existsSync(ENGINE)) {
+    throw new Error(
+      `setColors engine not found at ${relative(process.cwd(), ENGINE)}. ` +
+        `Build the plugin first (npm run build:plugin).`,
+    );
+  }
+  return import(ENGINE);
+}
+
+function readJson(path) {
+  return JSON.parse(readFileSync(path, 'utf8'));
+}
+
+/** `engine` is a test seam; the CLI always runs the compiled bundle. */
+export async function runSetColors({
+  baseColorsPath,
+  dryRun = false,
+  root = process.cwd(),
+  colorsAndTypeDir,
+  themesDir,
+  engine,
+} = {}) {
+  const { buildColors, resolveDataDirs } = engine ?? (await loadEngine());
+
+  const fullPath = resolve(root, baseColorsPath);
+  if (!existsSync(fullPath)) {
+    throw new Error(`base color file not found at ${relative(root, fullPath)}`);
+  }
+  let input;
+  try {
+    input = readJson(fullPath);
+  } catch (err) {
+    throw new Error(`base color file is not valid JSON: ${err instanceof Error ? err.message : String(err)}`);
+  }
+
+  const resolved = colorsAndTypeDir && themesDir ? null : resolveDataDirs();
+  const colorsDir = colorsAndTypeDir ?? resolved.colorsAndTypeDir;
+  const themes = themesDir ?? resolved.themesDir;
+  if (!existsSync(colorsDir)) {
+    throw new Error(`no colors and type at ${relative(root, colorsDir)}. Run the dev server once to create it.`);
+  }
+
+  const active = readActiveTheme(themes);
+  const { colorsAndType: live, source } = readLiveColorsAndType(colorsDir, active);
+
+  const { colors, report } = buildColors(input, {
+    cssVariables: live.cssVariables,
+    gradients: live.gradients,
+  });
+
+  const next = {
+    ...live,
+    ...colors,
+    updatedAt: new Date().toISOString(),
+    schemaVersion: live.schemaVersion,
+  };
+
+  const workingPath = join(colorsDir, '_working.json');
+  const saved = readSavedColorsAndType(colorsDir, active);
+
+  // Returning the buffer to what the layer under it already holds is a discard,
+  // not an edit — the same call the dev server's own PUT makes.
+  const backToSaved = saved !== null && sameContent(next, saved);
+  let wrote = null;
+  if (!dryRun) {
+    if (backToSaved) {
+      if (existsSync(workingPath)) rmSync(workingPath);
+      wrote = 'cleared';
+    } else {
+      writeFileSync(workingPath, JSON.stringify(next, null, 2) + '\n');
+      wrote = 'buffer';
+    }
+  }
+
+  return {
+    baseColorsPath: fullPath,
+    colorsAndTypeDir: colorsDir,
+    workingPath,
+    openTheme: active?.slug ?? null,
+    source,
+    // Which layer the discard compared against, so the report can name it. It
+    // is the open theme only when one is open; with none, it is the default the
+    // package ships, and calling that "the open theme" named a file nobody had
+    // opened.
+    savedSource: savedColorsAndTypeSource(active),
+    // The base color file's `name` used to pick a theme file name. This verb
+    // writes no file of its own now, so it names nothing; say so rather than
+    // drop it in silence.
+    ignoredName: input.name === undefined ? null : String(input.name),
+    dryRun,
+    wrote,
+    report,
+  };
+}
+
+export function formatSetColorsResult(result) {
+  const root = process.cwd();
+  const lines = [];
+
+  const from =
+    result.source === 'theme' && result.openTheme
+      ? `theme "${result.openTheme}"`
+      : SOURCE_LABELS[result.source];
+  const verb = result.dryRun ? 'Would replace' : 'Replaced';
+  lines.push(`${verb} the color identity, carrying everything else forward from ${from}.`);
+  if (result.ignoredName !== null) {
+    lines.push(
+      `Ignored "name": "${result.ignoredName}". The base color file no longer names a theme; ` +
+        `name it when you run save-theme.`,
+    );
+  }
+
+  lines.push(`\nContrast report (${result.report.scheme} scheme):`);
+  const width = Math.max(...result.report.checks.map((c) => c.textVar.length));
+  for (const c of result.report.checks) {
+    const mark = c.pass ? '✓' : '✗';
+    const fixed = c.corrected ? '  (auto-corrected)' : '';
+    lines.push(
+      `  ${mark} ${c.textVar.padEnd(width)}  ${c.ratio.toFixed(2).padStart(6)}:1  vs ${c.against}  floor ${c.floor}:1${fixed}`,
+    );
+  }
+  if (result.report.failures.length > 0) {
+    lines.push(`\nUnmet floors — adjust the base colors and re-run:`);
+    for (const f of result.report.failures) lines.push(`  ! ${f}`);
+  }
+
+  lines.push(
+    result.report.gradients === 'carried'
+      ? '\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}.`);
+  }
+
+  if (result.wrote === 'buffer') {
+    lines.push(
+      `\nReload the app to see it. This is an unsaved edit: save the open theme in the ` +
+        `editor's Theme panel to keep it, or run save-theme to write a new one.`,
+    );
+  } else if (result.wrote === 'cleared') {
+    const held =
+      result.savedSource === 'theme' ? `theme "${result.openTheme}"` : 'the package default';
+    lines.push(
+      result.source === 'working'
+        ? `\nThat is what ${held} already holds, so the unsaved buffer was discarded. ` +
+            `Reload the app to see it.`
+        : `\nThat is what ${held} already holds, and there was no unsaved buffer, so nothing was written.`,
+    );
+  } else if (result.dryRun) {
+    lines.push(`\nDry run: nothing written under ${relative(root, result.colorsAndTypeDir)}.`);
+  }
+  return lines.join('\n');
+}

package/bin/{adjust.mjs → set-geometry.mjs}

@@ -1,19 +1,20 @@
-// `live-tokens adjust` worker.
+// `live-tokens set-geometry` worker.
 //
 // Reads an ops file (JSON), applies it to every component's LIVE config via the
-// compiled engine (dist-plugin/adjust — the CLI never imports TS sources), and
+// compiled engine (dist-plugin/setGeometry — the CLI never imports TS sources), and
 // writes the result into that component's `_working.json` buffer: the same slot
 // the editor's own edits land in, so an adjustment is an unsaved edit the user
 // saves into a theme when they want to keep it. `default.json`, named preset
 // files, themes, colors and type, and tokens.css are never touched.
 
-import { existsSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import { componentNames, readActiveTheme, readLiveComponentConfigs } from './lib/liveState.mjs';
+
 const pkgRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-const ENGINE = resolve(pkgRoot, 'dist-plugin/adjust/index.js');
-const packageThemesDir = join(pkgRoot, 'src/live-tokens/data/themes');
+const ENGINE = resolve(pkgRoot, 'dist-plugin/setGeometry/index.js');
 
 const SOURCE_LABELS = {
   working: 'your unsaved edits',
@@ -30,7 +31,7 @@ const SKIP_LABELS = [
 async function loadEngine() {
   if (!existsSync(ENGINE)) {
     throw new Error(
-      `adjust engine not found at ${relative(process.cwd(), ENGINE)}. ` +
+      `setGeometry engine not found at ${relative(process.cwd(), ENGINE)}. ` +
         `Build the plugin first (npm run build:plugin).`,
     );
   }
@@ -41,10 +42,6 @@ function readJson(path) {
   return JSON.parse(readFileSync(path, 'utf8'));
 }
 
-function readJsonIfExists(path) {
-  return existsSync(path) ? readJson(path) : null;
-}
-
 /** Successive ops can touch the same alias (soften, then pill the buttons);
  *  the report shows one entry per alias, first `from` to last `to`. */
 function collapseChanges(changes) {
@@ -57,49 +54,20 @@ function collapseChanges(changes) {
   return [...byVariable.values()].filter((c) => c.from !== c.to);
 }
 
-/** The open theme, read the way every other door reads it: the local file
- *  first, then the copy the installed package ships. */
-function readActiveTheme(themesDir) {
-  if (!themesDir) return null;
-  const slug = readJsonIfExists(join(themesDir, '_active.json'))?.activeFile ?? 'default';
-  const theme =
-    readJsonIfExists(join(themesDir, `${slug}.json`)) ??
-    readJsonIfExists(join(packageThemesDir, `${slug}.json`));
-  return theme ? { slug, theme } : null;
-}
-
-/** Each component's live config, and whether a buffer or the open document
- *  answered. The document's own copy falls back to the shipped default for a
- *  component it somehow lacks, which reports as the document either way.
- *  Mirrors the dev server's `resolveLiveComponentConfig`, so the CLI adjusts
- *  what the page runs. */
-function readLiveConfigs(dir, active) {
+/** A config document names its own component, and a theme-embedded copy can
+ *  omit it, so stamp it back on before the buffer is written from it. */
+function stampedLiveConfigs(dir, active) {
+  const { configs: live, sources } = readLiveComponentConfigs(dir, active);
   const configs = {};
-  const sources = {};
-  for (const entry of readdirSync(dir, { withFileTypes: true })) {
-    if (!entry.isDirectory()) continue;
-    const comp = entry.name;
-    const componentDir = join(dir, comp);
-    const working = readJsonIfExists(join(componentDir, '_working.json'));
-    // Every theme carries every component by value, but this CLI reads the
-    // file straight off disk, ahead of any server-side fill — a theme
-    // written before this component existed can still omit it, so a missing
-    // entry falls back to the shipped default the same way the theme's own
-    // fill would.
-    const embedded =
-      active?.theme?.componentConfigs?.[comp] ?? readJsonIfExists(join(componentDir, 'default.json'));
-    const config = working ?? embedded;
-    if (!config) {
-      throw new Error(`component "${comp}": default.json is missing`);
-    }
-    configs[comp] = { ...config, component: comp };
-    sources[comp] = working ? 'working' : 'theme';
+  for (const comp of componentNames(dir)) {
+    if (!live[comp]) throw new Error(`component "${comp}": default.json is missing`);
+    configs[comp] = { ...live[comp], component: comp };
   }
   return { configs, sources };
 }
 
 /** `engine` is a test seam; the CLI always runs the compiled bundle. */
-export async function runAdjust({
+export async function runSetGeometry({
   opsPath,
   dryRun = false,
   root = process.cwd(),
@@ -132,7 +100,7 @@ export async function runAdjust({
   }
 
   const active = readActiveTheme(themesDir ?? resolved?.themesDir);
-  const { configs, sources } = readLiveConfigs(dir, active);
+  const { configs, sources } = stampedLiveConfigs(dir, active);
   const now = new Date().toISOString();
   const { configs: next, report } = adjustAliases(configs, ops, now);
 
@@ -175,7 +143,7 @@ export async function runAdjust({
   };
 }
 
-export function formatAdjustResult(result) {
+export function formatSetGeometryResult(result) {
   const root = process.cwd();
   const lines = [];
   const { components: changedCount, aliases, skips } = result.totals;
@@ -192,7 +160,7 @@ export function formatAdjustResult(result) {
   }
   if (result.ignoredName !== null) {
     lines.push(
-      `Ignored "name": "${result.ignoredName}". adjust edits the open buffer now, ` +
+      `Ignored "name": "${result.ignoredName}". set-geometry edits the open buffer, ` +
         `so it writes no file of its own.`,
     );
   }

package/bin/{set-fonts.mjs → set-type.mjs}

@@ -1,7 +1,7 @@
-// `live-tokens set-fonts` worker.
+// `live-tokens set-type` worker.
 //
-// Reads a pairing brief (JSON), verifies each family against Google Fonts,
-// binds it to a font stack via the compiled engine (dist-plugin/fontPairing —
+// Reads a pairing file (JSON), verifies each family against Google Fonts,
+// binds it to a font stack via the compiled engine (dist-plugin/setType —
 // the CLI never imports TS sources), and writes the result into
 // `colors-and-type/_working.json`: the same buffer the editor's own font edits
 // land in, so a retype is an unsaved edit the user saves into a theme when they
@@ -12,11 +12,11 @@ import { existsSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import { readActiveTheme, readLiveColorsAndType, readSavedColorsAndType, sameContent } from './lib/liveState.mjs';
 import { resolveTokensCssPath } from './migrate.mjs';
 
 const pkgRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-const ENGINE = resolve(pkgRoot, 'dist-plugin/fontPairing/index.js');
-const packageDataDir = join(pkgRoot, 'src/live-tokens/data');
+const ENGINE = resolve(pkgRoot, 'dist-plugin/setType/index.js');
 
 // Google serves a different stylesheet per user agent; ask as a browser would
 // so the weight census matches what the page will actually load.
@@ -32,7 +32,7 @@ const SOURCE_LABELS = {
 async function loadEngine() {
   if (!existsSync(ENGINE)) {
     throw new Error(
-      `font pairing engine not found at ${relative(process.cwd(), ENGINE)}. ` +
+      `setType engine not found at ${relative(process.cwd(), ENGINE)}. ` +
         `Build the plugin first (npm run build:plugin).`,
     );
   }
@@ -43,53 +43,22 @@ function readJson(path) {
   return JSON.parse(readFileSync(path, 'utf8'));
 }
 
-function readJsonIfExists(path) {
-  return existsSync(path) ? readJson(path) : null;
-}
-
 function browserFetch(url) {
   return fetch(url, { headers: { 'user-agent': BROWSER_UA } });
 }
 
-/** The open theme, read the way every other door reads it: the local file
- *  first, then the copy the installed package ships. */
-function readActiveTheme(themesDir) {
-  const slug = readJsonIfExists(join(themesDir, '_active.json'))?.activeFile ?? 'default';
-  const theme =
-    readJsonIfExists(join(themesDir, `${slug}.json`)) ??
-    readJsonIfExists(join(packageDataDir, 'themes', `${slug}.json`));
-  return theme ? { slug, theme } : null;
-}
-
-/** Mirrors the dev server's live colors-and-type resolution: the unsaved
- *  buffer, then the open theme's own copy, then the package default. */
-function readLiveColorsAndType(colorsAndTypeDir, active) {
-  const working = readJsonIfExists(join(colorsAndTypeDir, '_working.json'));
-  if (working) return { colorsAndType: working, source: 'working' };
-  if (active?.theme?.colorsAndType) return { colorsAndType: active.theme.colorsAndType, source: 'theme' };
-  const shipped =
-    readJsonIfExists(join(colorsAndTypeDir, 'default.json')) ??
-    readJsonIfExists(join(packageDataDir, 'colors-and-type', 'default.json'));
-  if (!shipped) throw new Error(`no colors and type to read at ${colorsAndTypeDir}`);
-  return { colorsAndType: shipped, source: 'default' };
-}
-
 function normalizeFace(slot, value) {
   if (typeof value === 'string') return { name: value };
   if (value && typeof value === 'object' && typeof value.name === 'string') {
     return { name: value.name, ...(value.url ? { url: value.url } : {}) };
   }
-  throw new Error(`brief slot "${slot}" must be a family name or { "name": "...", "url": "..." }`);
-}
-
-function sameJson(a, b) {
-  return JSON.stringify(a) === JSON.stringify(b);
+  throw new Error(`pairing slot "${slot}" must be a family name or { "name": "...", "url": "..." }`);
 }
 
 /** `engine` and `fetcher` are test seams; the CLI always runs the compiled
  *  bundle against the live API. */
-export async function runSetFonts({
-  briefPath,
+export async function runSetType({
+  pairingPath,
   dryRun = false,
   verify = true,
   root = process.cwd(),
@@ -110,21 +79,21 @@ export async function runSetFonts({
     resolveDataDirs,
   } = engine ?? (await loadEngine());
 
-  const briefFull = resolve(root, briefPath);
-  if (!existsSync(briefFull)) throw new Error(`brief file not found at ${relative(root, briefFull)}`);
-  let brief;
+  const fullPath = resolve(root, pairingPath);
+  if (!existsSync(fullPath)) throw new Error(`pairing file not found at ${relative(root, fullPath)}`);
+  let input;
   try {
-    brief = readJson(briefFull);
+    input = readJson(fullPath);
   } catch (err) {
-    throw new Error(`brief file is not valid JSON: ${err instanceof Error ? err.message : String(err)}`);
+    throw new Error(`pairing file is not valid JSON: ${err instanceof Error ? err.message : String(err)}`);
   }
 
-  const requested = SLOT_ORDER.filter((slot) => brief[slot] !== undefined).map((slot) => ({
+  const requested = SLOT_ORDER.filter((slot) => input[slot] !== undefined).map((slot) => ({
     slot,
-    face: normalizeFace(slot, brief[slot]),
+    face: normalizeFace(slot, input[slot]),
   }));
   if (requested.length === 0) {
-    throw new Error(`brief names no slot. Use one or more of: ${SLOT_ORDER.join(', ')}.`);
+    throw new Error(`pairing names no slot. Use one or more of: ${SLOT_ORDER.join(', ')}.`);
   }
 
   const resolved = colorsAndTypeDir && themesDir ? null : resolveDataDirs();
@@ -176,14 +145,11 @@ export async function runSetFonts({
   }
 
   const workingPath = join(colorsDir, '_working.json');
-  const savedColorsAndType =
-    active?.theme?.colorsAndType ??
-    readJsonIfExists(join(colorsDir, 'default.json')) ??
-    readJsonIfExists(join(packageDataDir, 'colors-and-type', 'default.json'));
+  const savedColorsAndType = readSavedColorsAndType(colorsDir, active);
 
   // Returning the buffer to what the open theme already holds is a discard,
   // not an edit — the same call the dev server's own PUT makes.
-  const backToSaved = savedColorsAndType !== null && sameJson(next, savedColorsAndType);
+  const backToSaved = savedColorsAndType !== null && sameContent(next, savedColorsAndType);
   let wrote = null;
   if (!dryRun && report.changed) {
     if (backToSaved) {
@@ -196,7 +162,7 @@ export async function runSetFonts({
   }
 
   return {
-    briefPath: briefFull,
+    pairingPath: fullPath,
     colorsAndTypeDir: colorsDir,
     workingPath,
     openTheme: active?.slug ?? null,
@@ -212,7 +178,7 @@ export async function runSetFonts({
   };
 }
 
-export function formatSetFontsResult(result) {
+export function formatSetTypeResult(result) {
   const root = process.cwd();
   const lines = [];
 

package/dist-plugin/{chunk-RIXO2E55.js → chunk-7VRTBGJT.js}

@@ -1,7 +1,7 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
-} from "./chunk-YLCOIGQC.js";
+} from "./chunk-V3YF6CGT.js";
 
 // vite-plugin/files/versionedFileResourceServer.ts
 import fs from "fs";

package/dist-plugin/{chunk-YLCOIGQC.js → chunk-V3YF6CGT.js}

@@ -826,6 +826,60 @@ var componentMigration_2026_09_02_sectiondividerDropTitleOutline = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-03-drop-legacy-component-keys.ts
+var DROPPED3 = /* @__PURE__ */ new Set([
+  "--badge-trait-surface",
+  "--badge-trait-text",
+  "--badge-trait-text-font-family",
+  "--badge-trait-text-font-size",
+  "--badge-trait-text-font-weight",
+  "--badge-trait-text-line-height",
+  "--badge-trait-border",
+  "--badge-trait-border-width",
+  "--badge-trait-shadow",
+  "--sectiondivider-title",
+  "--sectiondivider-title-font-family",
+  "--sectiondivider-title-font-size",
+  "--sectiondivider-title-font-weight",
+  "--sectiondivider-title-line-height",
+  "--sectiondivider-title-border-width",
+  "--sectiondivider-title-stroke-color",
+  "--sectiondivider-description",
+  "--sectiondivider-description-font-family",
+  "--sectiondivider-description-font-size",
+  "--sectiondivider-description-font-weight",
+  "--sectiondivider-description-line-height",
+  "--dialog-primary-default-surface",
+  "--dialog-primary-default-text",
+  "--dialog-primary-default-border",
+  "--dialog-primary-default-border-width",
+  "--dialog-primary-hover-surface",
+  "--dialog-primary-hover-text",
+  "--dialog-primary-hover-border",
+  "--dialog-primary-hover-border-width",
+  "--dialog-secondary-default-text",
+  "--dialog-secondary-default-border",
+  "--dialog-secondary-default-border-width",
+  "--dialog-secondary-hover-surface",
+  "--dialog-secondary-hover-text",
+  "--dialog-secondary-hover-border",
+  "--dialog-secondary-hover-border-width"
+]);
+var colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys = {
+  id: "2026-09-03-drop-legacy-component-keys",
+  fromVersion: 7,
+  toVersion: 8,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED3.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -860,7 +914,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tabbarActiveTint,
   componentMigration_2026_09_01_gateSuffixEnabled,
-  componentMigration_2026_09_02_sectiondividerDropTitleOutline
+  componentMigration_2026_09_02_sectiondividerDropTitleOutline,
+  colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -877,7 +932,6 @@ function runMigrations(kind, fileVersion, rawVars, meta = {}) {
 }
 
 export {
-  CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
 };

package/dist-plugin/index.cjs

@@ -1610,6 +1610,60 @@ var componentMigration_2026_09_02_sectiondividerDropTitleOutline = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-03-drop-legacy-component-keys.ts
+var DROPPED3 = /* @__PURE__ */ new Set([
+  "--badge-trait-surface",
+  "--badge-trait-text",
+  "--badge-trait-text-font-family",
+  "--badge-trait-text-font-size",
+  "--badge-trait-text-font-weight",
+  "--badge-trait-text-line-height",
+  "--badge-trait-border",
+  "--badge-trait-border-width",
+  "--badge-trait-shadow",
+  "--sectiondivider-title",
+  "--sectiondivider-title-font-family",
+  "--sectiondivider-title-font-size",
+  "--sectiondivider-title-font-weight",
+  "--sectiondivider-title-line-height",
+  "--sectiondivider-title-border-width",
+  "--sectiondivider-title-stroke-color",
+  "--sectiondivider-description",
+  "--sectiondivider-description-font-family",
+  "--sectiondivider-description-font-size",
+  "--sectiondivider-description-font-weight",
+  "--sectiondivider-description-line-height",
+  "--dialog-primary-default-surface",
+  "--dialog-primary-default-text",
+  "--dialog-primary-default-border",
+  "--dialog-primary-default-border-width",
+  "--dialog-primary-hover-surface",
+  "--dialog-primary-hover-text",
+  "--dialog-primary-hover-border",
+  "--dialog-primary-hover-border-width",
+  "--dialog-secondary-default-text",
+  "--dialog-secondary-default-border",
+  "--dialog-secondary-default-border-width",
+  "--dialog-secondary-hover-surface",
+  "--dialog-secondary-hover-text",
+  "--dialog-secondary-hover-border",
+  "--dialog-secondary-hover-border-width"
+]);
+var colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys = {
+  id: "2026-09-03-drop-legacy-component-keys",
+  fromVersion: 7,
+  toVersion: 8,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED3.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -1644,7 +1698,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tabbarActiveTint,
   componentMigration_2026_09_01_gateSuffixEnabled,
-  componentMigration_2026_09_02_sectiondividerDropTitleOutline
+  componentMigration_2026_09_02_sectiondividerDropTitleOutline,
+  colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -3816,7 +3871,7 @@ ${lines.join("\n")}
     return "corrupt";
   }
   function notAThemeError(fileName) {
-    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${import_path4.default.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme generator skill "generate-theme".`;
+    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${import_path4.default.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme skill "create-theme".`;
   }
   function respondUnreadableTheme(res, fileName, missingError) {
     switch (unreadableThemeReason(fileName)) {
@@ -4408,7 +4463,7 @@ ${lines.join("\n")}
     const { theme, filled } = read;
     if (!theme.colorsAndType) {
       jsonResponse(res, 422, {
-        error: 'This theme carries no colors and type. Build one with the theme generator skill "generate-theme".'
+        error: 'This theme carries no colors and type. Build one with the theme skill "create-theme".'
       });
       return;
     }