@pieai/swimmer-ui-kit 2.13.0 → 3.0.0-rc.1

package/bin/swimmer-ui-check.mjs

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 // Scans consumer CSS for raw color literals living in component rules
 // instead of flowing through SwimmerUIKit tokens. Mirrors the guard check
-// the kit runs on its own styles.css in src/tokens.test.ts, packaged so
+// the kit runs on its own styles.css in tests/tokens.test.ts, packaged so
 // downstream products can hold their own component CSS to the same
 // "token-only" bar the design-system-guide asks for.
 //
 // Raw colors are expected (and fine) inside token-defining blocks —
 // :root { ... } or an attribute-selector theme/tone block like
-// [data-game-ui-theme='night'] / [data-game-ui-tone='glass'] /
+// [data-game-ui-theme='dark'] / [data-game-ui-tone='glass'] /
 // [data-theme='dark'] — since that is how the design-system-guide tells
 // consumers to re-theme or re-scope surface tones. Only raw colors inside
 // *other* selectors (component rules) are flagged.
@@ -18,6 +18,7 @@
 import { readFileSync, readdirSync, statSync } from 'node:fs';
 import { dirname, extname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { findRetiredThemeValues } from './lib/retired-theme.mjs';
 
 const RAW_COLOR = /#[0-9a-fA-F]{3,8}\b|\brgba?\(|\bhsla?\(|\boklch\(/g;
 const TOKEN_BLOCK_SELECTOR = /:root\b|\[data-[\w-]*(?:theme|tone)[\w-]*\s*=/i;
@@ -145,18 +146,26 @@ function contrastRatio(a, b) {
 /**
  * Token values per theme, read from the kit's shipped stylesheet.
  *
- * Only fully opaque hex values are kept. A token carrying alpha composites
+ * Fully opaque hex values, references and two-colour srgb token mixes are kept.
+ * Resolve expressions AFTER combining each theme's declarations; carrying a
+ * pre-resolved light colour into dark would invent a false contrast result.
+ * A token carrying alpha composites
  * against whatever is behind it, and guessing that would produce confident
  * numbers about a colour nobody can know from here.
  */
 function themeTokens() {
   const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-  // dist/ is what a consumer installs. src/theme.css is what exists in this
+  // dist/ is what a consumer installs. src/tokens/theme.css exists in this
   // repository before a build — and `pnpm test` runs before `pnpm build`, so
   // reading only dist made the check a silent no-op in its own CI while
   // passing locally off a stale dist. Silence is the failure mode this whole
   // check exists to remove, so it must not be the failure mode of the check.
-  const sources = [join(packageRoot, 'dist', 'styles.css'), join(packageRoot, 'src', 'theme.css')];
+  // Prefer live source in a checkout: a previous build must not hide a new
+  // missing or unreadable token. Installed packages have only the dist path.
+  const sources = [
+    join(packageRoot, 'src', 'tokens', 'theme.css'),
+    join(packageRoot, 'dist', 'styles.css'),
+  ];
   let css = null;
   for (const candidate of sources) {
     try {
@@ -167,18 +176,46 @@ function themeTokens() {
     }
   }
   if (css === null) return null;
-  const themes = new Map();
+  const declarations = new Map();
   // The built stylesheet is minified and the attribute value loses its quotes,
   // so both forms have to match or every theme but the default is invisible.
   const blockRe = /(:root|\[data-game-ui-theme=['"]?([\w-]+)['"]?\])\s*\{([^}]*)\}/g;
-  for (const match of css.matchAll(blockRe)) {
+  for (const match of css.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(blockRe)) {
     const name = match[2] ?? 'light';
-    const values = themes.get(name) ?? new Map(themes.get('light') ?? []);
-    for (const decl of match[3].matchAll(/(--game-ui-[\w-]+)\s*:\s*(#[0-9a-fA-F]{3,8})/g)) {
-      const rgb = decl[2].length === 9 || decl[2].length === 5 ? null : parseHex(decl[2]);
-      if (rgb) values.set(decl[1], rgb);
+    const values = declarations.get(name) ?? new Map();
+    for (const decl of match[3].matchAll(/(--game-ui-[\w-]+)\s*:\s*([^;}]+)/g))
+      values.set(decl[1], decl[2].trim());
+    declarations.set(name, values);
+  }
+  const themes = new Map();
+  for (const [name, own] of declarations) {
+    const values = new Map([...(declarations.get('light') ?? []), ...own]);
+    const color = (value, seen = new Set()) => {
+      if (!value) return null;
+      if (/^#(?:[\da-f]{3}|[\da-f]{6})$/i.test(value)) return parseHex(value);
+      const variable = /^var\(\s*(--[\w-]+)\s*\)$/.exec(value);
+      if (variable) {
+        if (seen.has(variable[1])) return null;
+        return color(values.get(variable[1]), new Set([...seen, variable[1]]));
+      }
+      const mix =
+        /^color-mix\(in srgb,\s*(var\(--[\w-]+\)|#[\da-f]+)\s*([\d.]+)%,\s*(var\(--[\w-]+\)|#[\da-f]+)\s*\)$/i.exec(
+          value,
+        );
+      if (!mix) return null; // Unknown/alpha paint is not guessed or inherited.
+      const a = color(mix[1], seen),
+        b = color(mix[3], seen),
+        fraction = Number(mix[2]) / 100;
+      return a && b && fraction >= 0 && fraction <= 1
+        ? a.map((channel, i) => channel * fraction + b[i] * (1 - fraction))
+        : null;
+    };
+    const resolved = new Map();
+    for (const [variable, value] of values) {
+      const rgb = color(value);
+      if (rgb) resolved.set(variable, rgb);
     }
-    themes.set(name, values);
+    themes.set(name, resolved);
   }
   return themes;
 }
@@ -190,7 +227,10 @@ function themeTokens() {
  */
 function definedTokenNames() {
   const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-  const sources = [join(packageRoot, 'dist', 'styles.css'), join(packageRoot, 'src', 'theme.css')];
+  const sources = [
+    join(packageRoot, 'src', 'tokens', 'theme.css'),
+    join(packageRoot, 'dist', 'styles.css'),
+  ];
   for (const candidate of sources) {
     try {
       const css = readFileSync(candidate, 'utf8');
@@ -312,8 +352,16 @@ for (const file of files) {
 const codeFiles = [];
 walk(target, new Set(['.ts', '.tsx', '.js', '.jsx', '.mjs']), codeFiles);
 for (const file of codeFiles) {
-  for (const match of readFileSync(file, 'utf8').matchAll(/['"`](--game-ui-[\w-]+)['"`]/g)) {
-    ownTokens.add(match[1]);
+  if (/\.(?:test|spec|stories)\.[cm]?[jt]sx?$/.test(file)) continue;
+  const code = readFileSync(file, 'utf8');
+  // A quoted name is not a definition: tests and read-only token lookups
+  // previously hid undefined CSS hooks. Accept actual inline style writes or
+  // native setProperty writes, not arbitrary strings containing token names.
+  for (const pattern of [
+    /['"`](--game-ui-[\w-]+)['"`]\s*\]?\s*:/g,
+    /\.setProperty\(\s*['"`](--game-ui-[\w-]+)['"`]/g,
+  ]) {
+    for (const match of code.matchAll(pattern)) ownTokens.add(match[1]);
   }
 }
 if (!themes || themes.size === 0) {
@@ -325,6 +373,33 @@ if (!themes || themes.size === 0) {
 let contrastCount = 0;
 let undefinedCount = 0;
 let violationCount = 0;
+let retiredThemeCount = 0;
+// This migration check always reads source as well as CSS, even when the
+// default raw-colour scan is CSS-only. It never supplies a legacy fallback.
+const themeFiles = [];
+walk(
+  target,
+  new Set([
+    '.css',
+    '.ts',
+    '.tsx',
+    '.js',
+    '.jsx',
+    '.mjs',
+    '.cjs',
+    '.mts',
+    '.cts',
+    '.html',
+    '.vue',
+    '.svelte',
+  ]),
+  themeFiles,
+);
+for (const file of themeFiles)
+  for (const violation of findRetiredThemeValues(readFileSync(file, 'utf8'))) {
+    console.error(`${relative(process.cwd(), file)}:${violation.line}: ${violation.message}`);
+    retiredThemeCount++;
+  }
 for (const file of files) {
   const text = readFileSync(file, 'utf8');
   for (const pair of findContrastViolations(text, themes)) {
@@ -365,7 +440,7 @@ if (undefinedCount > 0) {
   );
 }
 
-if (violationCount > 0 || contrastCount > 0 || undefinedCount > 0) {
+if (violationCount > 0 || contrastCount > 0 || undefinedCount > 0 || retiredThemeCount > 0) {
   console.error(
     `\nswimmer-ui-check: ${violationCount} raw color literal(s) in ${files.length} file(s) under "${target}". ` +
       'Raw colors are expected inside :root / [data-*theme*=...] / [data-*tone*=...] token blocks ' +