guard-my-design-system 2.0.0 → 2.1.0

package/README.md

@@ -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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "guard-my-design-system",
-  "version": "2.0.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": "9.0.0"
+    "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, isChartFile, chartFindings,
+  tokenTwinFindings, avoidedImportFindings, isChartFile, chartFindings, handmadeButtonFindings,
 } from 'roast-my-design-system/engine';
 
 // Folder membership, the way the engine's own splits do it.
@@ -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.
@@ -259,7 +262,21 @@ export function judge(added, system, { readFile, readBase } = {}) {
 
     for (const c of seen.colors) {
       if (onKit || chart) break; // the kit rule or the chart rule owns colours here
-      if (tokenSet.has(c.value)) continue; // disciplined token use
+      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,
@@ -414,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;

package/src/report.mjs

@@ -26,11 +26,14 @@ const KIND_LABEL = {
   // 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', 'chart-palette']);
+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`';