vibe-design-system 2.8.19 → 2.8.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.19",
+  "version": "2.8.20",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

package/vds-core-template/scan.mjs

@@ -1843,8 +1843,22 @@ function extractColorUsage(colorNames) {
     usage[name] = { bg: 0, text: 0, border: 0, other: 0, topFiles: new Map() };
   }
 
+  // Build reverse lookup: lowercase hex → color name (for arbitrary-* and inline-* tokens)
+  // e.g. "arbitrary-4f46e5" → hex key "4f46e5"
+  const hexToName = new Map();
+  for (const name of colorNames) {
+    if (name.startsWith("arbitrary-") || name.startsWith("inline-")) {
+      const hexKey = name.replace(/^(arbitrary|inline)-/, "").toLowerCase();
+      hexToName.set(hexKey, name);
+    }
+  }
+
   // Single-pass regex: matches bg-primary, text-card-foreground, border-chart-1, etc.
   const colorUtilRe = /\b(bg|text|border|fill|stroke|ring|from|to|via|outline)-([\w][\w-]*)/g;
+  // Bracket-notation: bg-[#4F46E5], text-[#4f46e5/80], etc.
+  const bracketHexRe = /\b(bg|text|border|fill|stroke|ring|from|to|via|outline)-\[#([0-9a-fA-F]{3,8})(?:\/[\d.]+)?\]/g;
+  // Inline style hex colors: color:"#4F46E5", backgroundColor:'#4f46e5', etc.
+  const inlineHexRe = /(?:color|(?:background|border|fill|stroke|ring)(?:Color)?)\s*[:=]\s*['"]#([0-9a-fA-F]{3,8})['"]/g;
 
   for (const rel of files) {
     if (rel.includes("stories")) continue;
@@ -1855,6 +1869,7 @@ function extractColorUsage(colorNames) {
     const componentName = path.basename(rel).replace(/\.(tsx|jsx|ts|js)$/, "");
 
     let m;
+    // ── Token-based utilities (bg-primary, text-muted-foreground, …) ──
     const reCopy = new RegExp(colorUtilRe.source, "g");
     while ((m = reCopy.exec(content)) !== null) {
       const prefix = m[1];
@@ -1866,6 +1881,39 @@ function extractColorUsage(colorNames) {
       else usage[token].other++;
       usage[token].topFiles.set(componentName, (usage[token].topFiles.get(componentName) || 0) + 1);
     }
+
+    // ── Bracket-notation hex utilities (bg-[#4F46E5], …) ──
+    if (hexToName.size > 0) {
+      const brCopy = new RegExp(bracketHexRe.source, "gi");
+      while ((m = brCopy.exec(content)) !== null) {
+        const prefix = m[1].toLowerCase();
+        const hexKey = m[2].toLowerCase();
+        // Normalise 3-char hex → 6-char for matching
+        const normalKey = hexKey.length === 3
+          ? hexKey[0] + hexKey[0] + hexKey[1] + hexKey[1] + hexKey[2] + hexKey[2]
+          : hexKey;
+        const name = hexToName.get(normalKey) || hexToName.get(hexKey);
+        if (!name) continue;
+        if (prefix === "bg") usage[name].bg++;
+        else if (prefix === "text") usage[name].text++;
+        else if (prefix === "border") usage[name].border++;
+        else usage[name].other++;
+        usage[name].topFiles.set(componentName, (usage[name].topFiles.get(componentName) || 0) + 1);
+      }
+
+      // ── Inline style hex colors (color: "#4F46E5") ──
+      const inCopy = new RegExp(inlineHexRe.source, "gi");
+      while ((m = inCopy.exec(content)) !== null) {
+        const hexKey = m[1].toLowerCase();
+        const normalKey = hexKey.length === 3
+          ? hexKey[0] + hexKey[0] + hexKey[1] + hexKey[1] + hexKey[2] + hexKey[2]
+          : hexKey;
+        const name = hexToName.get(normalKey) || hexToName.get(hexKey);
+        if (!name) continue;
+        usage[name].other++;
+        usage[name].topFiles.set(componentName, (usage[name].topFiles.get(componentName) || 0) + 1);
+      }
+    }
   }
 
   const result = {};