@motion-proto/live-tokens 0.72.1 → 0.74.0

package/.claude/skills/live-tokens-generate-theme/references/style-vocabulary.md

@@ -1,35 +0,0 @@
-# Style vocabulary: idioms, eras, and genres
-
-Read this when the brief names a design idiom, a decade, or a genre. A mood
-moves dials; an idiom sets constraints, and it overrides the generic defaults in
-SKILL.md: the polished-UI Accent at 45% of Brand's chroma is right for a vague
-brief and wrong for Bauhaus.
-
-Entries are starting points, not seeds to copy: apply the chroma budget,
-per-role bands, and canvas commitment rules on top of them. Riso, Memphis, and
-brutalist break the chroma budget on purpose. Break it in the one layer the
-style is about and hold the rest of the ground tier down.
-
-The table runs modernist, digital, quiet, print, expressive.
-
-| Brief | Anchors (L, C, H) | Type | Geometry |
-|---|---|---|---|
-| Swiss, International | near-white canvas (0.97, 0.01, 0), or true black for the poster reading; one red Brand (0.55, 0.22, 27) as the only hue on screen; Neutral at C 0.005, untinted on purpose; monochromatic | one rational neo-grotesque across both slots | radius none, tight gaps, hairline borders |
-| Bauhaus | paper canvas (0.95, 0.02, 85) under primaries at full commitment: red (0.58, 0.21, 27), blue (0.48, 0.20, 264), yellow (0.86, 0.17, 90); triadic | geometric sans, heavy display | radius none on containers, radius full on buttons alone, so the circle reads as a decision |
-| Mid-century modern | canvas (0.90, 0.05, 75), mustard (0.75, 0.13, 85), teal (0.55, 0.10, 195), burnt orange (0.60, 0.15, 45), walnut neutrals H 60; nothing over C 0.16; compound | dynamic sans, or a geometric display over a dynamic body | radius +1 to +2, padding +1, no borders |
-| Art deco, opulent, luxurious | near-black canvas (0.20, 0.02, 280), gold (0.78, 0.13, 88), jade (0.60, 0.10, 165); dark, one metallic accent, everything else grey | rational high-contrast serif display, quiet body | sharp, padding +1, thin borders |
-| Terminal, phosphor | canvas (0.16, 0.01, 150), phosphor green Brand (0.80, 0.16, 145), amber Accent (0.80, 0.13, 80); monochromatic, dark, gradient off | mono in both slots | radius none, tight padding, a 1px border on everything |
-| Cyberpunk, neon noir, futuristic | canvas (0.18, 0.04, 300), magenta Brand (0.78, 0.18, 330), cyan Accent (0.82, 0.12, 200); complementary, dark, canvasGradient on for the glow | wide geometric display, neutral body | sharp, tight gaps |
-| Vaporwave | sunset canvas (0.88, 0.06, 330), pink (0.72, 0.16, 350), cyan (0.80, 0.11, 205), lilac Special; light, gradient on | wide retro display, serif welcome | rounder, airier |
-| Y2K, bubble | chrome canvas (0.96, 0.015, 240), electric blue Brand (0.62, 0.18, 255), lime Accent (0.85, 0.17, 130) | geometric sans, heavy display | radius full on buttons with the padding a pill needs, generous spacing |
-| Blueprint | canvas (0.35, 0.07, 245), pale rules (0.90, 0.02, 240), one warm accent (0.75, 0.14, 60); dark | mono, or a technical grotesque; a mono body works here and almost nowhere else | radius none, 1px borders, tight grid |
-| Scandinavian, hygge | chalk canvas (0.96, 0.012, 70), sage Brand (0.60, 0.06, 150), clay Accent (0.70, 0.08, 40); nothing above C 0.10; analogous | dynamic sans on both sides | soft radius, padding +1, hairline borders |
-| Japandi, wabi-sabi | unbleached paper canvas (0.93, 0.025, 80), ink Brand (0.35, 0.02, 250), one earth Accent (0.62, 0.09, 45); near-monochrome | rational serif display over a quiet humanist body | radius sm, padding +2, no borders |
-| Cottagecore, botanical | cream canvas (0.94, 0.04, 85), moss (0.55, 0.10, 135), dusty rose (0.70, 0.09, 15), butter (0.85, 0.11, 95); warm analogous | dynamic serif display over humanist sans | rounder, airier |
-| Editorial, magazine | paper canvas (0.97, 0.015, 85), ink neutrals, one strong Brand (0.50, 0.18, 20) carried by rules and pull quotes | high-contrast serif display over a text serif or humanist sans | sharp, padding +1, hairline rules |
-| Newsprint, broadsheet | grey-warm canvas (0.91, 0.02, 80), near-black ink, nothing chromatic above C 0.10 | rational serif in both slots | radius none, tight gaps, hairline rules |
-| Risograph, zine | paper canvas (0.94, 0.03, 80) with two flat spot inks, fluoro pink (0.68, 0.22, 5) and blue (0.52, 0.18, 260); complementary, no midtones between them | expressive display over a plain workhorse | radius none, borders +2 |
-| Corporate, professional, trustworthy | canvas (0.97, 0.012, 250), navy Brand (0.48, 0.12, 255), teal Accent (0.60, 0.09, 195), conventional statuses | rational sans body with a rational serif or same-family display | leave it alone |
-| Brutalist | pure canvas, (0.98, 0, 0) or (0.15, 0, 0), with Neutral at C 0, untinted because that is the point; one alarming Brand (0.58, 0.24, 27) | neo-grotesque or mono at heavy weight | radius none, borders +2 to +3, tight padding |
-| Memphis, postmodern | pastel canvas (0.95, 0.03, 60) carrying full-chroma primaries and a hot pink Special (0.70, 0.20, 350); tetradic or square, four hue families on purpose | geometric display, plain body | targeted rather than global: pill buttons against radius-none cards |
-| Industrial, workshop, gritty | concrete canvas (0.88, 0.008, 250), or (0.22, 0.01, 250) dark, safety orange Brand (0.68, 0.18, 50), steel neutrals | condensed grotesque display over a plain body | radius sm, thick borders, tight padding |

package/bin/generate-theme.mjs

@@ -1,260 +0,0 @@
-// `live-tokens generate-theme` worker.
-//
-// Reads a seed brief (JSON), builds a full validated colors-and-type layer via
-// the compiled engine (dist-plugin/generateColorsAndType — the CLI never imports
-// TS sources), enforces the AA contrast gate, and saves the result as a theme:
-// <themesDir>/<slug>.json, the document that carries the whole theme by value.
-// Unless --no-activate it then opens that theme the way the dev server's apply
-// door does — existing `_working` buffers are cleared and
-// `themes/_active.json` names it. Nothing else moves, so generating a theme
-// cannot change what the site ships.
-//
-// Non-color content (shadows, component aliases, fonts) carries forward from
-// the live state so generation only replaces the color identity. Swatch
-// gradients ride along too when user-tuned; stock ones are rebuilt from the new
-// theme's families by the engine.
-
-import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
-import { dirname, join, relative, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const pkgRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-const ENGINE = resolve(pkgRoot, 'dist-plugin/generateColorsAndType/index.js');
-const packageDataDir = join(pkgRoot, 'src/live-tokens/data');
-// Source of truth: src/editor/core/themes/themeTypes.ts, which
-// normalizeTheme.ts re-exports. This copy cannot import TS, so
-// `check:preset-themes` and generate-theme.test.ts are what catch a drift.
-const THEME_SCHEMA_VERSION = 5;
-
-async function loadEngine() {
-  if (!existsSync(ENGINE)) {
-    throw new Error(
-      `theme 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'));
-}
-
-function readJsonIfExists(path) {
-  try {
-    return existsSync(path) ? readJson(path) : null;
-  } catch {
-    return null;
-  }
-}
-
-/** Local dir first, then the installed package's shipped copy — the same
- *  fallback order the dev server's reads use. */
-function readData(localDir, packageSubdir, fileName) {
-  return (
-    readJsonIfExists(join(localDir, `${fileName}.json`)) ??
-    readJsonIfExists(join(packageDataDir, packageSubdir, `${fileName}.json`))
-  );
-}
-
-function componentNames(componentConfigsDir) {
-  if (!existsSync(componentConfigsDir)) return [];
-  return readdirSync(componentConfigsDir, { withFileTypes: true })
-    .filter((e) => e.isDirectory())
-    .map((e) => e.name)
-    .sort();
-}
-
-/** `_fileName` and `_source` are read-door markers, never part of a document. */
-function stripMarkers(value) {
-  if (!value || typeof value !== 'object') return value;
-  const { _fileName, _source, ...rest } = value;
-  return rest;
-}
-
-/** A component's derived default, local tree first, then the installed
- *  package's shipped copy — same fallback order every other read here uses. */
-function defaultComponentConfig(componentConfigsDir, comp) {
-  return readData(join(componentConfigsDir, comp), `component-configs/${comp}`, 'default');
-}
-
-/**
- * The look the new theme carries forward. Without --carry-from that is the LIVE
- * state — buffer first, then the open theme, then the shipped default — because
- * what the user sees is what they expect to keep. With it, the named theme,
- * then the shipped default for anything that theme omits, so an incomplete
- * source never produces an incomplete result.
- */
-function resolveCarrySource({ carryFrom, colorsAndTypeDir, componentConfigsDir, themesDir }) {
-  const comps = componentNames(componentConfigsDir);
-
-  if (carryFrom) {
-    const theme = readData(themesDir, 'themes', carryFrom);
-    if (!theme) throw new Error(`--carry-from theme "${carryFrom}" not found`);
-    const componentConfigs = {};
-    for (const comp of comps) {
-      const cfg = theme.componentConfigs?.[comp] ?? defaultComponentConfig(componentConfigsDir, comp);
-      if (cfg) componentConfigs[comp] = stripMarkers(cfg);
-    }
-    return { colorsAndType: stripMarkers(theme.colorsAndType), componentConfigs };
-  }
-
-  const activeSlug = readJsonIfExists(join(themesDir, '_active.json'))?.activeFile ?? 'default';
-  const activeTheme = readData(themesDir, 'themes', activeSlug);
-  const colorsAndType = stripMarkers(
-    readJsonIfExists(join(colorsAndTypeDir, '_working.json')) ??
-      activeTheme?.colorsAndType ??
-      readData(colorsAndTypeDir, 'colors-and-type', 'default'),
-  );
-
-  // A working buffer is an unsaved delta from the active theme; absent theme
-  // component entries fall through to the component defaults. Mirrors
-  // `bin/adjust.mjs`'s `readLiveConfigs` and the dev server's
-  // `resolveLiveComponentConfig` — all three layers, in the same order.
-  const componentConfigs = {};
-  for (const comp of comps) {
-    const live =
-      readJsonIfExists(join(componentConfigsDir, comp, '_working.json')) ??
-      activeTheme?.componentConfigs?.[comp] ??
-      defaultComponentConfig(componentConfigsDir, comp);
-    if (live) componentConfigs[comp] = stripMarkers(live);
-  }
-  return { colorsAndType, componentConfigs };
-}
-
-/** `engine` is a test seam; the CLI always runs the compiled bundle. */
-export async function runGenerateTheme({
-  briefPath,
-  activate = true,
-  dryRun = false,
-  carryFrom,
-  root = process.cwd(),
-  colorsAndTypeDir,
-  componentConfigsDir,
-  themesDir,
-  engine,
-} = {}) {
-  const { buildColorsAndTypeFromSeeds, resolveDataDirs, CURRENT_COMPONENT_SCHEMA_VERSION } =
-    engine ?? (await loadEngine());
-
-  const briefFull = resolve(root, briefPath);
-  if (!existsSync(briefFull)) {
-    throw new Error(`brief not found at ${relative(root, briefFull)}`);
-  }
-  let brief;
-  try {
-    brief = readJson(briefFull);
-  } catch (err) {
-    throw new Error(`brief is not valid JSON: ${err instanceof Error ? err.message : String(err)}`);
-  }
-
-  const dirs =
-    colorsAndTypeDir && componentConfigsDir && themesDir
-      ? { colorsAndTypeDir, componentConfigsDir, themesDir }
-      : resolveDataDirs();
-
-  const previousActive = readJsonIfExists(join(dirs.themesDir, '_active.json'))?.activeFile ?? 'default';
-  const carry = resolveCarrySource({ carryFrom, ...dirs });
-
-  const { colorsAndType, slug, report } = buildColorsAndTypeFromSeeds(
-    brief,
-    {
-      cssVariables: carry.colorsAndType?.cssVariables,
-      fontSources: carry.colorsAndType?.fontSources,
-      fontStacks: carry.colorsAndType?.fontStacks,
-      gradients: carry.colorsAndType?.gradients,
-    },
-    new Date().toISOString(),
-  );
-
-  const themePath = join(dirs.themesDir, `${slug}.json`);
-  const existing = readJsonIfExists(themePath);
-  const theme = {
-    name: colorsAndType.name,
-    createdAt: existing?.createdAt ?? colorsAndType.createdAt,
-    updatedAt: colorsAndType.updatedAt,
-    schemaVersion: THEME_SCHEMA_VERSION,
-    colorsAndType,
-    componentConfigs: carry.componentConfigs,
-    componentSchemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION,
-  };
-
-  if (!dryRun) {
-    mkdirSync(dirs.themesDir, { recursive: true });
-    writeFileSync(themePath, JSON.stringify(theme, null, 2) + '\n');
-    if (activate) applyTheme(slug, dirs);
-  }
-
-  return {
-    name: theme.name,
-    slug,
-    themePath,
-    existed: existing !== null,
-    activated: activate && !dryRun,
-    previousActive,
-    carriedFrom: carryFrom ?? null,
-    componentsCarried: Object.keys(carry.componentConfigs).length,
-    dryRun,
-    report,
-  };
-}
-
-/** The apply door's write set, reproduced: clear every working delta and point
- *  `themes/_active.json` at the open document. Production is untouched. */
-function applyTheme(slug, dirs) {
-  const colorsWorking = join(dirs.colorsAndTypeDir, '_working.json');
-  if (existsSync(colorsWorking)) rmSync(colorsWorking);
-
-  for (const comp of componentNames(dirs.componentConfigsDir)) {
-    const workingPath = join(dirs.componentConfigsDir, comp, '_working.json');
-    if (existsSync(workingPath)) rmSync(workingPath);
-  }
-
-  writeFileSync(join(dirs.themesDir, '_active.json'), JSON.stringify({ activeFile: slug }));
-}
-
-export function formatGenerateThemeResult(result) {
-  const root = process.cwd();
-  const lines = [];
-  const wrote = result.dryRun ? 'Would write' : result.existed ? 'Updated' : 'Created';
-  lines.push(`${wrote} theme "${result.name}" → ${relative(root, result.themePath)}`);
-  lines.push(
-    `Carried forward from ${result.carriedFrom ? `theme "${result.carriedFrom}"` : 'the live state'}: ` +
-      `fonts, gradients and ${result.componentsCarried} component config(s).`,
-  );
-
-  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 brief's seeds 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.activated) {
-    lines.push(
-      `\nOpened "${result.slug}" (previously open: "${result.previousActive}"). ` +
-        `Reload the app to see it; switch back any time from Load in the editor's Theme panel. ` +
-        `Adopt it there to publish it to tokens.generated.css.`,
-    );
-  } else if (!result.dryRun) {
-    lines.push(`\nNot opened (--no-activate). Load "${result.slug}" from the editor's Theme panel to see it.`);
-  }
-  return lines.join('\n');
-}