roast-my-design-system 9.7.0 → 9.7.1

package/README.md

@@ -17,7 +17,7 @@ npx roast-my-design-system@latest
 Run it at the root of a UI repo. One second later, a report opens.
 No account. No network. No telemetry. Nothing in your repo changes.
 
-**Current release: 9.3.** Version history in [CHANGELOG.md](CHANGELOG.md).
+Version history is in [CHANGELOG.md](CHANGELOG.md).
 
 ## The idea
 
@@ -142,11 +142,11 @@ Eleven reports, hosted exactly as the tool writes them. Every number determinist
 
 The full report for vercel/ai-chatbot. The verdict answers what the agent will learn here, the gap section comes first, then "What the repo teaches the agent", Claude's read of the scan:
 
-![The full diagnosis report for vercel/ai-chatbot in dark mode: a fixed side panel with the health score and what it measures, the stack, how the repo was read as a shadcn install, an index of every section and what is not the team's and not counted; then where the agent will have to guess, the fixes you can make right now, each with what it is worth and its copy-the-fix-prompt button, the wrapped present with the agent rules, an agent trap callout, 3-yardstick tiles including the 2 shadcn tiles, the adoption map treemap, palette forensics, the shadcn theme variable by variable, spacing receipts, typography specimens, offenders, duplicates, and the component usage ledger](assets/report-full-dark.png?v=9.7.0)
+![The full diagnosis report for vercel/ai-chatbot in dark mode: a fixed side panel with the health score and what it measures, the stack, how the repo was read as a shadcn install, an index of every section and what is not the team's and not counted; then where the agent will have to guess, the fixes you can make right now, each with what it is worth and its copy-the-fix-prompt button, the wrapped present with the agent rules, an agent trap callout, 3-yardstick tiles including the 2 shadcn tiles, the adoption map treemap, palette forensics, the shadcn theme variable by variable, spacing receipts, typography specimens, offenders, duplicates, and the component usage ledger](assets/report-full-dark.png?v=9.7.1)
 
 The same report in light mode (one file, built-in toggle):
 
-![The diagnosis report in light mode](assets/report-light-hero.png?v=9.7.0)
+![The diagnosis report in light mode](assets/report-light-hero.png?v=9.7.1)
 
 ## Why the numbers hold
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roast-my-design-system",
-  "version": "9.7.0",
+  "version": "9.7.1",
   "mcpName": "io.github.gregkozakiewicz/roast-my-design-system",
   "description": "Your AI can write the UI. This makes sure it writes your UI. A deterministic scanner scores your design system 0-100 against 112 public repos, reads React and web components (Stencil, Lit), hands you a copy-paste fix prompt for each top finding, writes rules for Claude, Cursor, Copilot and Windsurf with --apply, and runs as a local MCP server with --mcp.",
   "keywords": [

package/skills/roast-my-design-system/scripts/diagnose/index.mjs

@@ -1352,10 +1352,10 @@ function whereToStartSection() {
       else c.push(gate === 'repaint'
         ? { score: 20 + pt.tin.per100 / 4, metric: 'paintTin', after: 0,
           title: `Repaint the ${n(pt.tin.uses)} colours from outside the theme`,
-          sub: `${esc(s0.value)} appears ${s0.count} times${f0 ? `, ${esc(basename(f0.file))} alone carries ${f0.count}` : ''}. The theme file already has a variable for each (a grey is <code>text-muted-foreground</code>, a status colour is a Badge variant or a variable you add). Swap the class, not the value.` }
+          sub: `${esc(s0.value)} appears ${s0.count} times.${f0 ? ` ${esc(basename(f0.file))} alone has ${f0.count} palette classes.` : ''} The theme file already has a variable for each (a grey is <code>text-muted-foreground</code>, a status colour is a Badge variant or a variable you add). Swap the class, not the value.` }
         : { score: 20 + pt.tin.per100 / 4, metric: 'paintTin', after: 0,
           title: `Decide what the product paints from`,
-          sub: `${esc(s0.value)} appears ${s0.count} times${f0 ? `, ${esc(basename(f0.file))} alone carries ${f0.count}` : ''}, and there is no theme file to point them at: ${P.shadcn?.sheet?.file ? `${esc(P.shadcn.sheet.file)} defines` : 'the theme file defines'} none of shadcn's colour variables, so the palette is the system today. The first move is a decision, not a swap: adopt the theme variables (define them, map the palette onto them), then repaint file by file. Swapping <code>text-slate-500</code> for <code>text-muted-foreground</code> before that leaves the text with no colour.` });
+          sub: `${esc(s0.value)} appears ${s0.count} times.${f0 ? ` ${esc(basename(f0.file))} alone has ${f0.count} palette classes.` : ''} There is no theme file to point them at: ${P.shadcn?.sheet?.file ? `${esc(P.shadcn.sheet.file)} defines` : 'the theme file defines'} none of shadcn's colour variables, so the palette is the system today. The first move is a decision, not a swap: adopt the theme variables (define them, map the palette onto them), then repaint file by file. Swapping <code>text-slate-500</code> for <code>text-muted-foreground</code> before that leaves the text with no colour.` });
     }
     if (pt.doors.uses >= 5) {
       const s0 = pt.doors.samples[0];

package/skills/roast-my-design-system/scripts/harvest/coloruse.mjs

@@ -128,6 +128,16 @@ const COLOUR_PROP_RE = /^(?:color|background(?:-color)?|border(?:-(?:top|right|b
 const DARK_CHAIN_RE = /(^|[^a-z])dark(?![a-z])/i;
 const DARK_FILE_RE = /(^|[/._-])dark([/._-]|$)/i;
 const ROOT_RE = /(^|[\s,(])(?::root|html|:host|body)\b|@theme/;
+// A selector list with a bare root selector in it is a root statement
+// whatever its other members say: documenso's `:root, .dark-mode-disabled`
+// was ranked dark for the word in its second selector and the sheet earned
+// no receipt line (9.7.1). `:root.dark` and `html[data-theme=dark]` are not
+// bare, and stay dark, and so does a :root under a dark at-rule.
+const bareRoot = (chain) => {
+  const parts = chain.split(' > ');
+  if (DARK_CHAIN_RE.test(parts.slice(0, -1).join(' > '))) return false;
+  return parts[parts.length - 1].split(',').some((sel) => /^(?::root|html|:host|body)$/.test(sel.trim()));
+};
 // theme reads this pass cannot follow (D4): a JavaScript theme object outside
 // the four kits (emotion, styled-components), and Sass or Less variables in
 // a colour property. Read by the colour words a theme object uses, at any
@@ -195,7 +205,7 @@ function cssStatements(text) {
 /** A Tailwind v3 config's colours, flattened: primary.DEFAULT -> primary,
  *  brand[500] -> brand-500. String values only; spreads and computed values
  *  are skipped, so a palette assembled in code reads as not defined. */
-function configColours(src) {
+export function configColours(src) {
   const out = new Map();
   const code = src.replace(/\/\*[\s\S]*?\*\//g, ' ').replace(/(^|[^:'"`])\/\/[^\n]*/g, '$1');
   const re = /\bcolou?rs\s*:\s*\{/g;
@@ -392,7 +402,7 @@ export function colourUse(root, files, tokens, { email = null, P = null, palette
   const addStatements = (st, f, pkg) => {
     const fileDark = DARK_FILE_RE.test(f);
     for (const d of st.defs) {
-      const rank = fileDark || DARK_CHAIN_RE.test(d.chain) ? 2 : ROOT_RE.test(d.chain) ? 0 : 1;
+      const rank = fileDark ? 2 : bareRoot(d.chain) ? 0 : DARK_CHAIN_RE.test(d.chain) ? 2 : ROOT_RE.test(d.chain) ? 0 : 1;
       const list = defs.get(d.name) ?? [];
       list.push({ pkg, value: d.value, rank, order: order++ });
       defs.set(d.name, list);

package/skills/roast-my-design-system/scripts/lib/palette.mjs

@@ -182,15 +182,22 @@ const hueDistance = (x, y) => Math.hypot(x.L - y.L, 2 * (x.a - y.a), 2 * (x.b -
 // Past this, the nearest theme colour is a different colour, not a stand-in
 // (bg-blue-600 against a theme of greys), and the pick by name answers.
 const CLOSE = 0.2;
+// A grey class stands in for a grey only. Tailwind's greys sit at a chroma
+// of 0.01 to 0.045 (slate is the most tinted); a brand teal at the same
+// lightness sits at 0.095 and was within CLOSE of slate-500, so formbricks'
+// text-slate-500 was sent to text-brandnew (2026-10-01).
+const GREY_CHROMA = 0.06;
 /** The suitable theme name nearest to a palette shade's Tailwind value, or null. */
 function nearestThemeName(shade, role, values) {
   const from = oklab(TAILWIND_DEFAULTS[shade] ?? '');
   if (!from) return null;
+  const grey = GREY_HUE_RE.test(`-${shade}`);
   let best = null;
   for (const [name, value] of Object.entries(values)) {
     if (!suits(name, role)) continue;
     const to = oklab(value);
     if (!to) continue;
+    if (grey && Math.hypot(to.a, to.b) > GREY_CHROMA) continue;
     const d = hueDistance(from, to);
     if (!best || d < best.d) best = { name, d };
   }

package/skills/roast-my-design-system/scripts/lib/version.mjs

@@ -1,7 +1,7 @@
 // Single version constant for the engine — imported by diagnose (report
 // footer) and rules (generated-by line). This is the bump spot that used to
 // live as a const inside diagnose/index.mjs.
-export const VERSION = '9.7.0';
+export const VERSION = '9.7.1';
 // The shape of harvest.json and summary.json. Bumped only when a field is
 // renamed, removed or changes meaning; a new field is not a new schema. A
 // tool comparing two scans compares like with like by this number, not by VERSION.

package/skills/roast-my-design-system/scripts/profiles/index.mjs

@@ -22,7 +22,7 @@ import { join, basename, dirname } from 'node:path';
  * fixture's expected output is byte-identical before and after.
  */
 import shadcn from './shadcn.mjs';
-import tailwind, { readTailwindTheme } from './tailwind.mjs';
+import tailwind, { readTailwindTheme, v3Retuned } from './tailwind.mjs';
 import { decidePalette } from '../lib/palette.mjs';
 import { installedFile, componentName } from './installed.mjs';
 import mui from './mui.mjs';
@@ -94,6 +94,12 @@ export function decideProfile(profile, components, files, root = null, { themeRe
   let ownTheme;
   const readOwnTheme = () => (ownTheme === undefined ? (ownTheme = readTailwindTheme({ ...profile }, ctx)?.facts ?? null) : ownTheme);
   profile.palette = decidePalette(profile, profileOf(profile), readOwnTheme);
+  // a palette name a v3 config gave the repo's own colour is the theme too,
+  // whichever vocabulary judges the rest (9.7.1)
+  if (profile.palette && root) {
+    const tuned = v3Retuned(root, files.code);
+    if (tuned.length) profile.palette.retuned = [...new Set([...(profile.palette.retuned ?? []), ...tuned])].sort();
+  }
   // shadcn in utility-class mode (components.json: cssVariables false) paints
   // with Tailwind classes by design. A theme of the repo's own beside it
   // (rybbit retunes the whole neutral scale) is what the rules file points

package/skills/roast-my-design-system/scripts/profiles/shadcn.mjs

@@ -124,10 +124,12 @@ function themeContract(root, files) {
   return seen.size;
 }
 
-/** Rows declared under a selector in a CSS text: name -> value. */
+/** Rows declared under a selector in a CSS text: name -> value. The
+ *  selector may head a list (documenso: `:root, .dark-mode-disabled`) or
+ *  carry a :not() (`.dark:not(.dark-mode-disabled)`), 9.7.1. */
 function rowsUnder(css, selector) {
   const out = new Map();
-  const re = new RegExp(`(^|[\\s,}])${selector}\\s*\\{([^}]*)\\}`, 'g');
+  const re = new RegExp(`(^|[\\s,}])${selector}(?::not\\([^)]*\\))?\\s*(?:,[^{}]*)?\\{([^}]*)\\}`, 'g');
   for (const m of css.matchAll(re)) {
     for (const d of m[2].matchAll(/--([a-z0-9-]+)\s*:\s*([^;]+);/gi)) out.set(d[1], d[2].trim());
   }
@@ -150,7 +152,7 @@ function sheetRows(css) {
       if (!/--background\s*:/.test(m[2]) || sel.startsWith('@')) continue;
       const rows = new Map();
       for (const d of m[2].matchAll(/--([a-z0-9-]+)\s*:\s*([^;]+);/gi)) rows.set(d[1], d[2].trim());
-      if (/\.dark\b/.test(sel)) { if (!dark.has('background')) dark = rows; }
+      if (/\.dark(?![\w-])/.test(sel)) { if (!dark.has('background')) dark = rows; }
       else if (!light.has('background')) { light = rows; scope = sel; }
       if (light.has('background') && dark.has('background')) break;
     }
@@ -199,6 +201,10 @@ function readSheet(root, wsRoot, cssPath, files = null) {
     const rel = file.slice(root.length + 1);
     const others = [...(files.code ?? []), ...(files.styles ?? [])].filter((f) => f !== rel).slice(0, 4000);
     const pending = new Set(custom.filter((r) => !/^(font|shadow|tracking|spacing|radius|ease|breakpoint|typeset)/.test(r)));
+    // a read inside the sheet itself counts: --sidebar: var(--surface-2)
+    // makes --surface-2 part of the theme, whether or not a component names
+    // it (9.7.1; its own rows, light and dark, are definitions, not reads)
+    for (const r of [...pending]) if (new RegExp(`var\\(\\s*--${r}(?![\\w-])`).test(css)) pending.delete(r);
     for (const f of others) {
       if (!pending.size) break;
       const src = read(join(root, f));

package/skills/roast-my-design-system/scripts/profiles/tailwind.mjs

@@ -20,7 +20,10 @@ import { cachedSource } from '../harvest/walk.mjs';
 import { join } from 'node:path';
 import { PALETTE } from './shadcn-data.mjs';
 import { TAILWIND_DEFAULTS } from './tailwind-defaults.mjs';
-import { canonical, parseColor } from '../lib/color.mjs';
+import { canonical, parseColor, oklab } from '../lib/color.mjs';
+import { configColours } from '../harvest/coloruse.mjs';
+import { existsSync } from 'node:fs';
+import { posix } from 'node:path';
 
 // the scan's own copy when it has one (harvest/walk.mjs), the disk otherwise
 const read = (p) => { const t = cachedSource(p); if (t !== undefined) return t; try { return readFileSync(p, 'utf8'); } catch { return ''; } };
@@ -40,6 +43,58 @@ function retuned(name, value) {
   return !(cv && cd && near(cv, cd));
 }
 
+// A v3 config can retune a scale too: Novu points every grey at
+// hsl(var(--gray-N)), workout-cool gives green its own values. The theme
+// itself stays unread (a v3 config imports, spreads and computes; Greg,
+// 2026-09-16), but a palette name it gives a new colour is the repo's own
+// wherever it is read, so the live checks and the colour bar stop calling
+// the class drift (9.7.1). Only a config the product reads counts: the root
+// config, or one in a package holding a tenth of the code files (unkey
+// retunes grey in an email package of 20 files, and the web app must not
+// inherit it).
+const TW_CONFIG_RE = /(^|\/)tailwind\.config\.[mc]?[jt]s$/;
+const PALETTE_SHADE_NAME_RE = new RegExp(`^(?:${PALETTE})-(?:50|[1-9]00|950)$`);
+const CONFIG_SHARE = 0.1;
+// The defaults the engine keeps are v4's. v3's own values sit within 0.04
+// of them in OKLab (blue-500 #3b82f6 against oklch(62.3% 0.214 259.815):
+// 0.019; the widest, fuchsia-500, 0.036), while a scale a team retuned sits
+// at 0.07 or more (workout-cool's green-500 at 0.076). A literal this close
+// is Tailwind's own, whichever major it was copied from.
+const V3_SAME = 0.05;
+const v3Retune = (name, value) => {
+  if (!retuned(name, value)) return false;
+  const a = oklab(value.trim()), b = oklab(TAILWIND_DEFAULTS[name]);
+  return !(a && b && Math.hypot(a.L - b.L, a.a - b.a, a.b - b.b) < V3_SAME);
+};
+/** Palette names a v3 config the product reads gave colours of its own. */
+export function v3Retuned(root, codeFiles) {
+  if (!root || !codeFiles?.length) return [];
+  const configs = codeFiles.filter((f) => TW_CONFIG_RE.test(f));
+  if (!configs.length) return [];
+  const pkgOf = (file) => {
+    let dir = posix.dirname(file);
+    while (dir && dir !== '.') {
+      if (existsSync(join(root, dir, 'package.json'))) return dir;
+      dir = posix.dirname(dir);
+    }
+    return '';
+  };
+  let sizes = null;
+  const sizeOf = (pkg) => {
+    if (!sizes) { sizes = new Map(); for (const f of codeFiles) { const p = pkgOf(f); sizes.set(p, (sizes.get(p) ?? 0) + 1); } }
+    return sizes.get(pkg) ?? 0;
+  };
+  const out = new Set();
+  for (const f of configs) {
+    const pkg = pkgOf(f);
+    if (pkg !== '' && sizeOf(pkg) < codeFiles.length * CONFIG_SHARE) continue;
+    for (const [n, v] of configColours(read(join(root, f)))) {
+      if (PALETTE_SHADE_NAME_RE.test(n) && v3Retune(n, v)) out.add(n);
+    }
+  }
+  return [...out].sort();
+}
+
 // what counts as a theme worth judging
 // three, not six: a small brand palette used everywhere is still a system
 // (hey.xyz: four brand shades; ConvertX: four colours, 2026-09-16)

package/skills/roast-my-design-system/scripts/rules/build.mjs

@@ -237,7 +237,14 @@ if (neverImported.length >= 3) {
       if (op?.uses) lines.push(`  (${op.uses} palette colour${op.uses === 1 ? '' : 's'} the theme does not own already sit in own code, ${op.samples.slice(0, 3).map((s) => `\`${s.value}\` ×${s.count}`).join(', ')}; do not add to them.)`);
     } else {
       rule(`This is a shadcn install${styleNote}. The theme is a set of CSS variables${sheetFile ? ` in \`${sheetFile}\`` : ''}: background, foreground, primary, muted, border and the rest, each with a light and a dark value. Change a colour there, never in a component.`);
-      if ((sc.sheet?.shadcnPresent ?? 0) >= 5) rule('Use the semantic classes the theme gives you (`bg-background`, `text-muted-foreground`, `border-border`), never a palette colour like `bg-blue-500` or `text-gray-600`, and never a hand-written `dark:` colour. The variables already carry both modes.');
+      // The same decision as the live checks (lib/palette.mjs): the contract
+      // holds when any stylesheet keeps five of shadcn's rows. Until 9.7.1
+      // this line read the configured sheet's :root rows alone, so formbricks
+      // (its names in @theme, the rows in a sibling package) was told to stay
+      // with the palette classes the live checks flag.
+      const contractHolds = P.palette?.source === 'shadcn' || (sc.sheet?.shadcnPresent ?? 0) >= 5;
+      const contractNote = contractHolds && (sc.sheet?.shadcnPresent ?? 0) < 5 && sc.contract?.file && sc.contract.file !== sheetFile ? ` The variables are defined in \`${sc.contract.file}\`.` : '';
+      if (contractHolds) rule(`Use the semantic classes the theme gives you (\`bg-background\`, \`text-muted-foreground\`, \`border-border\`), never a palette colour like \`bg-blue-500\` or \`text-gray-600\`, and never a hand-written \`dark:\` colour. The variables already carry both modes.${contractNote}`);
       else rule(`${sheetFile ? `\`${sheetFile}\` defines` : 'The theme file defines'} none of shadcn's colour variables, so \`bg-background\` and \`text-muted-foreground\` have nothing behind them here. Until the theme variables are adopted, stay with the palette classes the surrounding file already uses; do not introduce semantic classes with no variable behind them, and do not add a second palette.`);
       if (paint?.tin?.uses) lines.push(`  (${paint.tin.uses} palette colour${paint.tin.uses === 1 ? '' : 's'} already sit in own code, ${paint.tin.samples.slice(0, 3).map((s) => `\`${s.value}\` ×${s.count}`).join(', ')}; do not add to them.)`);
     }