guard-my-design-system 1.9.0 → 2.1.0

package/README.md

@@ -1,6 +1,6 @@
 # guard-my-design-system
 
-[![npm](https://img.shields.io/npm/v/guard-my-design-system?color=2dd4bf&label=npm)](https://www.npmjs.com/package/guard-my-design-system) [![downloads](https://img.shields.io/npm/dm/guard-my-design-system?color=2dd4bf&label=downloads)](https://www.npmjs.com/package/guard-my-design-system) [![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE) [![no telemetry](https://img.shields.io/badge/no-telemetry-2dd4bf)](https://github.com/gregkozakiewicz/guard-my-design-system#what-makes-the-verdict-trustworthy) [![GitHub Action](https://img.shields.io/badge/GitHub_Action-v1-2dd4bf)](#on-a-pull-request)
+[![npm](https://img.shields.io/npm/v/guard-my-design-system?color=2dd4bf&label=npm)](https://www.npmjs.com/package/guard-my-design-system) [![downloads](https://img.shields.io/npm/dm/guard-my-design-system?color=2dd4bf&label=downloads)](https://www.npmjs.com/package/guard-my-design-system) [![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE) [![no telemetry](https://img.shields.io/badge/no-telemetry-2dd4bf)](https://github.com/gregkozakiewicz/guard-my-design-system#what-makes-the-verdict-trustworthy) [![GitHub Action](https://img.shields.io/badge/GitHub_Action-v2-2dd4bf)](#on-a-pull-request)
 
 ## Your design system dies one pull request at a time. This makes sure it doesn't.
 
@@ -40,7 +40,9 @@ it updates that same comment. It never adds more comments:
 ## What it catches
 
 - **A hard-coded colour where a token exists.** The finding names the token:
-  `var(--blue-500)`, not just a hex code. This works across colour notations:
+  `var(--blue-500)`, not just a hex code. A token's own value pasted into a
+  component or a stylesheet counts too: the finding says use the name, not
+  the value. This works across colour notations:
   a hex stray is matched to an hsl or oklch token, including shadcn's
   bare-triplet variables. Dark-theme values count as the system too, so a
   stray in a dark block snaps to the dark token, never its light twin.
@@ -54,6 +56,11 @@ it updates that same comment. It never adds more comments:
 - **An inline `style={{ }}` block.** Styling written there is invisible to the
   system and to every agent that reads the file. Blocks built from variables
   are decided elsewhere, so they are left alone.
+- **A button built from scratch where the repo already has a Button.** A
+  styled button, or a button tag dressed as one, in a file whose package
+  can import a Button that at least 20 files already use. The finding
+  gives the import line. Rows, tabs, close crosses and select triggers
+  built on a button tag are left alone.
 - **A second definition of a component you already have.** The finding names
   the file that already defines it, and how many places use that one.
 - **A new import of a duplicate component.** When a name is defined in more
@@ -70,6 +77,17 @@ it updates that same comment. It never adds more comments:
 - **A palette colour where a theme variable exists.** On a shadcn repo whose
   theme file holds the variables, `text-slate-500` in the app's own code is
   flagged and the theme file named. Off on utility-class installs.
+- **A chart colour written by hand.** A chart needs several colours that
+  differ from each other, and most design systems never name them, so the
+  chart rule (roast 8.8) has three answers. Where the repo keeps a chart
+  palette (`--chart-*` or `--series-*` tokens, a `chartColors` entry in the
+  theme, or shadcn's `--chart-1` to `--chart-5` when a chart actually reads
+  them), a hex in a chart file is flagged and the palette named. Where the
+  repo has charts but no palette, a new chart painting by hand gets one line
+  that names the existing chart doing the same and asks for the palette
+  once. The first chart in a repo gets one line asking for a name. The
+  generic colour rule stays out of chart files, the same way it does in
+  `roast_validate`.
 - **A colour or a pixel size written onto a kit component.** On a product
   built on MUI, Mantine, Chakra UI or Ant Design, `color: '#667085'` in an
   `sx` prop or a style object is flagged and the finding says whether the
@@ -134,7 +152,7 @@ jobs:
       - uses: actions/checkout@v5
         with:
           fetch-depth: 0
-      - uses: gregkozakiewicz/guard-my-design-system@v1
+      - uses: gregkozakiewicz/guard-my-design-system@v2
 ```
 
 After that it runs on every pull request and needs no attention from you.
@@ -143,7 +161,7 @@ If you want the check to fail instead of commenting, turn on strict mode.
 It is the only setting:
 
 ```yaml
-      - uses: gregkozakiewicz/guard-my-design-system@v1
+      - uses: gregkozakiewicz/guard-my-design-system@v2
         with:
           strict: true
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "guard-my-design-system",
-  "version": "1.9.0",
+  "version": "2.1.0",
   "description": "Your design system dies one pull request at a time. This makes sure it doesn't. A guard that judges only the lines a change adds, against the system the repo already has, and names the on-system value the author probably meant.",
   "type": "module",
   "bin": {
@@ -11,7 +11,7 @@
     "src/"
   ],
   "dependencies": {
-    "roast-my-design-system": "8.6.1"
+    "roast-my-design-system": "9.2.0"
   },
   "keywords": [
     "design-system",

package/src/judge.mjs

@@ -13,7 +13,7 @@ import {
   definedComponents, exemptReason,
   EXTRA_KINDS, extraValue, fontDeclarations,
   WIDGET_CSS_RE, isLibraryClass, PALETTE_CLASS_RE, blankComments, kitPaintFindings,
-  tokenTwinFindings, avoidedImportFindings,
+  tokenTwinFindings, avoidedImportFindings, isChartFile, chartFindings, handmadeButtonFindings,
 } from 'roast-my-design-system/engine';
 
 // Folder membership, the way the engine's own splits do it.
@@ -88,7 +88,7 @@ function exemptFiles(added, readFile) {
  * Returns [{ file, line, kind, value, advice }] sorted by file then line.
  * kinds: color | spacing | radius | fontsize | shadow | arbitrary |
  *        important | font | inline | component | palette | kit-colour |
- *        kit-px | twin-token | avoided-copy
+ *        kit-px | twin-token | avoided-copy | chart-colour | chart-palette
  * readFile(file) gives the file as it stands; readBase(file) the file at the
  * base (null when the change creates it), so a token or an import the change
  * adds can be told from one that was already there.
@@ -163,6 +163,9 @@ export function judge(added, system, { readFile, readBase } = {}) {
   }
   // "use var(--blue-500)", not "go hunt this hex": name a value when the
   // system defines it as a custom property.
+  const statesTokens = (file) => (system.tokenSources ?? []).some((t) => samePath(t, file));
+  // on a kit repo the theme is where a colour is decided (mcp/knowledge reads it the same way)
+  const themeFile = system.profile?.kit?.themeFiles?.[0] ?? system.tokenFile ?? null;
   const named = (value) => {
     // shadcn-style tokens are defined as bare triplets (--primary: 222.2 47.4%
     // 11.2%) but normalised to hsl(...); try the unwrapped form too.
@@ -221,6 +224,18 @@ export function judge(added, system, { readFile, readBase } = {}) {
 
   const findings = [];
 
+  // A chart's series colours are judged against the chart palette, or its
+  // absence, by the engine (roast 8.8.0, lib/charts): the report never
+  // counted them, the live checks counted every one, and the guard did too.
+  // On a chart file the chart rule owns colours, the same way it does in
+  // roast_validate: the kit judge and the generic colour rule stay out.
+  const chartColours = new Map(); // file → [{ value, index: line }]
+  const isChart = (file) => {
+    if (!system.charts) return false;
+    const w = wholeText(file);
+    return isChartFile(file, w ?? '');
+  };
+
   for (const { file, line, text } of added) {
     if (exempt(file) || outOfScope(file)) continue;
     const css = isStyleFile(file);
@@ -228,7 +243,14 @@ export function judge(added, system, { readFile, readBase } = {}) {
 
     const seen = extractStyling(text, { css });
 
-    const onKit = css ? null : kitLines(file);
+    const chart = !css && isChart(file);
+    if (chart) {
+      const list = chartColours.get(file) ?? [];
+      for (const c of seen.colors) if (!tokenSet.has(c.value)) list.push({ value: c.value, index: line });
+      chartColours.set(file, list);
+    }
+
+    const onKit = css || chart ? null : kitLines(file);
     const kitPx = new Set();
     for (const f of onKit?.get(line) ?? []) {
       if (f.rule === 'kit-px') kitPx.add(f.value.split(': ')[1]);
@@ -239,8 +261,22 @@ export function judge(added, system, { readFile, readBase } = {}) {
     }
 
     for (const c of seen.colors) {
-      if (onKit) break; // the kit rule owns colours on a kit file
-      if (tokenSet.has(c.value)) continue; // disciplined token use
+      if (onKit || chart) break; // the kit rule or the chart rule owns colours here
+      if (tokenSet.has(c.value)) {
+        // A token's raw value is the definition only inside a file that
+        // states the palette (system.tokenSources, roast 9.1.3). Anywhere
+        // else it is the value pasted where the name belongs: the system
+        // cannot see it, and the next reader copies the hex.
+        if (!system.tokenSources || statesTokens(file)) continue;
+        const n = named(c.value);
+        findings.push({
+          file, line, kind: 'color', value: c.value,
+          advice: n !== c.value
+            ? `this is already the token ${n}; use the name, not the value`
+            : `the theme already holds this value${themeFile ? ` (${themeFile})` : ''}; read it from there rather than pasting it`,
+        });
+        continue;
+      }
       const near = c.value.startsWith('#') ? nearestColor(c.value, system.tokens) : null;
       findings.push({
         file, line, kind: 'color', value: c.value,
@@ -395,7 +431,13 @@ export function judge(added, system, { readFile, readBase } = {}) {
           others: system.tokenDefs.filter((d) => !samePath(d.file, file)),
           tailwind: prof.kind === 'tailwind' || /@theme\b/.test(w),
         }) : [])
-      : (system.duplicates ? avoidedImportFindings(w, { file, before: baseText(file), dupes: system.duplicates }) : []);
+      : [
+        ...(system.duplicates ? avoidedImportFindings(w, { file, before: baseText(file), dupes: system.duplicates }) : []),
+        // a button built from scratch where the file's own package can
+        // import the repo's Button (roast 9.2.0); a warning in the engine,
+        // a finding here, on the line the button starts
+        ...(system.buttons?.length ? handmadeButtonFindings(w, { file }, system) : []),
+      ];
     for (const f of hits) {
       const line = lineAt(w, f.index);
       if (!lines.has(line)) continue;
@@ -406,6 +448,21 @@ export function judge(added, system, { readFile, readBase } = {}) {
     }
   }
 
+  // The chart rule, once per chart file, in the engine's words: with a
+  // palette every hand-written colour is a finding that names it; without
+  // one the file gets a single line that names the precedent chart and asks
+  // for the palette once (roast 8.8.0). `index` carries the diff line.
+  for (const [file, colours] of chartColours) {
+    if (!colours.length) continue;
+    for (const f of chartFindings({ file, colours, charts: system.charts, tokenFile: system.tokenFile ?? null })) {
+      findings.push({
+        file, line: f.index, kind: f.rule,
+        value: f.rule === 'chart-colour' ? f.message.match(/Chart colour (\S+)/)?.[1] ?? 'colour' : `${colours.length} series colour${colours.length === 1 ? '' : 's'} by hand`,
+        advice: `${f.message} ${f.fix.replace(/\.$/, '')}`,
+      });
+    }
+  }
+
   // Two extractors can see the same value on the same line (a hex inside a
   // Tailwind class is also a hex in the raw sweep). One sin, one line.
   const seen = new Set();

package/src/report.mjs

@@ -22,11 +22,18 @@ const KIND_LABEL = {
   // the engine's sentence names the token or the import itself (roast 8.6)
   'twin-token': 'token that copies an existing one',
   'avoided-copy': 'import of a duplicate',
+  // the chart rule (roast 8.8): a colour beside a chart palette, or a chart
+  // painting by hand where the repo keeps none
+  'chart-colour': 'chart colour written by hand',
+  'chart-palette': 'chart painted by hand',
+  // a styled.button or a dressed button tag where the repo has a Button
+  // (roast 9.2.0); the engine's sentence names the Button and its import
+  'handmade-button': 'button built from scratch',
 };
 const labelOf = (f) => f.label ?? KIND_LABEL[f.kind];
 
 // Kinds whose label already says everything; printing the value repeats it.
-const VALUELESS = new Set(['important', 'inline', 'twin-token', 'avoided-copy']);
+const VALUELESS = new Set(['important', 'inline', 'twin-token', 'avoided-copy', 'chart-palette', 'handmade-button']);
 
 const FOOTER = 'Full picture of the whole codebase: `npx roast-my-design-system`';