@askewly/design 0.3.0 → 0.4.1

package/dist/verify.js

@@ -14,7 +14,7 @@ const TYPOGRAPHY_MARKER = /askewly-typography-ok(?::([^\n]*))?/;
 const DEFAULT_EXTENSIONS = ["tsx", "ts", "jsx", "js", "css", "html"];
 const SKIP_DIRS = new Set(["node_modules", "dist", "build", ".git", ".next"]);
 // Generated token files legitimately contain raw color values.
-const SKIP_FILES = new Set(["tokens.css", "askewly.css"]);
+const SKIP_FILES = new Set(["tokens.css", "askewly.css", "askewly-brand.css"]);
 const HEX_RULE = /#[0-9a-fA-F]{3,8}\b/;
 const COLOR_FN_RULE = /\b(?:rgb|rgba|hsl|hsla|oklch)\(/;
 // Every rule is checked independently per line. A single ternary would report
@@ -30,6 +30,21 @@ const LINE_COMMENT_EXTENSIONS = new Set(["ts", "tsx", "js", "jsx"]);
 // Two SVG shapes: paired <svg>…</svg> and self-closing <svg … />.
 const SVG_PAIRED = /<svg\b[\s\S]*?<\/svg\s*>/gi;
 const SVG_SELF_CLOSING = /<svg\b[^>]*\/>/gi;
+/**
+ * CSS attribute selectors whose value is a hex color, e.g. the Tailwind
+ * arbitrary variant `[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border`.
+ *
+ * The hex there is a *match target*, not a color the file paints with: it names
+ * a value some third-party library already emitted so the rule can override it
+ * with a token. Flagging it inverts the gate — the line doing the token work is
+ * the line getting reported.
+ *
+ * Deliberately narrow: an attribute name, an `=` (optionally prefixed by a CSS
+ * match operator), and a *quoted* hex. Tailwind arbitrary values like
+ * `bg-[#ccc]` have no `=` and no quotes, so they stay violations. The optional
+ * backslashes cover selectors written inside a same-quoted JS string.
+ */
+const ATTR_SELECTOR_HEX = /\[[A-Za-z_-][\w:.-]*\s*[~^|*$]?=\s*\\?(['"])#[0-9a-fA-F]{3,8}\\?\1\s*[iIsS]?\s*\]/g;
 /**
  * Blanks regions whose color literals are not rendered output — comments and
  * SVG markup — while preserving every character position and newline, so
@@ -109,7 +124,7 @@ export function maskIgnoredRegions(source, ext) {
     // Pass 2 — SVG markup, matched against the comment-masked text so a commented
     // out `</svg>` cannot terminate a block early.
     let masked = chars.join("");
-    for (const pattern of [SVG_PAIRED, SVG_SELF_CLOSING]) {
+    for (const pattern of [SVG_PAIRED, SVG_SELF_CLOSING, ATTR_SELECTOR_HEX]) {
         masked = masked.replace(pattern, (match) => match.replace(/[^\n]/g, " "));
     }
     return masked;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askewly/design",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Query, inject, and verify the Askewly Design system (tokens, UI vocabulary, recipes) from your terminal or coding agent.",
   "license": "MIT",
   "homepage": "https://ui.askewly.com",