vibe-design-system 2.8.18 → 2.8.20

package/package.json

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

package/vds-core-template/scan.mjs

@@ -1831,6 +1831,111 @@ function extractTokenUsage() {
   };
 }
 
+function extractColorUsage(colorNames) {
+  if (!fs.existsSync(SRC_DIR)) return {};
+  if (!Array.isArray(colorNames) || colorNames.length === 0) return {};
+  const files = getAllTsxJsxInDir(SRC_DIR);
+  if (!Array.isArray(files) || files.length === 0) return {};
+
+  const nameSet = new Set(colorNames);
+  const usage = {};
+  for (const name of 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;
+    let content;
+    try {
+      content = fs.readFileSync(path.join(SRC_DIR, rel), "utf-8");
+    } catch (_) { continue; }
+    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];
+      const token = m[2];
+      if (!nameSet.has(token)) continue;
+      if (prefix === "bg") usage[token].bg++;
+      else if (prefix === "text") usage[token].text++;
+      else if (prefix === "border") usage[token].border++;
+      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 = {};
+  for (const name of colorNames) {
+    const data = usage[name];
+    const total = data.bg + data.text + data.border + data.other;
+    if (total > 0) {
+      result[name] = {
+        bg: data.bg,
+        text: data.text,
+        border: data.border,
+        total,
+        topFiles: [...data.topFiles.entries()]
+          .sort((a, b) => b[1] - a[1])
+          .slice(0, 5)
+          .map(([n]) => n),
+      };
+    }
+  }
+  return result;
+}
+
 function extractButtonUsage() {
   if (!fs.existsSync(SRC_DIR)) return null;
   const files = getAllTsxJsxInDir(SRC_DIR);
@@ -1943,6 +2048,9 @@ function scan() {
   if (tokenUsage) {
     foundations.tokenUsage = tokenUsage;
   }
+  const colorNames = Object.keys(foundations.colors || {}).filter((k) => k !== "_dark");
+  const colorUsage = extractColorUsage(colorNames);
+  if (Object.keys(colorUsage).length > 0) foundations.colorUsage = colorUsage;
   const componentSuggestions = extractComponentSuggestions();
   const unreleasedSectionCandidates = extractUnreleasedSectionCandidates();
   const output = {

package/vds-core-template/story-generator.mjs

@@ -1240,53 +1240,192 @@ function buildStoryFileContent(comp) {
   return lines.join("\n");
 }
 
-/** Build color entries from foundations.colors (skip _dark; flatten to { name, hex }). */
-function getColorEntries(colors) {
-  if (!colors || typeof colors !== "object") return [];
-  const entries = [];
-  for (const [name, v] of Object.entries(colors)) {
-    if (name === "_dark") continue;
-    const hex = v && (v.hex ?? (typeof v.value === "string" && v.value.startsWith("#") ? v.value : null));
-    const value = v && v.value;
-    if (hex) entries.push({ name, hex });
-    else if (value) entries.push({ name, hex: value });
-  }
-  return entries;
-}
-
 function writeFoundationsStories(foundations) {
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
 
-  const colorEntries = getColorEntries(foundations?.colors);
-  const colorsContent =
-    [
+  // ── Colors story ──────────────────────────────────────────────────────────
+  {
+    const rawColors = foundations?.colors || {};
+    const colorUsage = foundations?.colorUsage || {};
+
+    const NON_COLOR_KEYS = new Set(["font-weight-medium", "font-weight-normal"]);
+
+    const DESCRIPTIONS = {
+      background: "Page background",
+      foreground: "Default text color",
+      card: "Card / panel background",
+      "card-foreground": "Text on cards",
+      popover: "Popover background",
+      "popover-foreground": "Text in popovers",
+      primary: "Brand color — CTAs, active states",
+      "primary-foreground": "Text on primary backgrounds",
+      secondary: "Secondary actions, subtle UI",
+      "secondary-foreground": "Text on secondary",
+      muted: "Muted backgrounds, disabled",
+      "muted-foreground": "Placeholder, secondary text",
+      accent: "Hover states, highlights",
+      "accent-foreground": "Text on accent backgrounds",
+      destructive: "Errors, delete actions",
+      "destructive-foreground": "Text on destructive",
+      border: "Border / divider color",
+      input: "Input border",
+      "input-background": "Input fill",
+      "switch-background": "Toggle switch track",
+      ring: "Focus ring",
+      "chart-1": "Chart series 1",
+      "chart-2": "Chart series 2",
+      "chart-3": "Chart series 3",
+      "chart-4": "Chart series 4",
+      "chart-5": "Chart series 5",
+      sidebar: "Sidebar background",
+      "sidebar-foreground": "Sidebar text",
+      "sidebar-primary": "Sidebar active item",
+      "sidebar-primary-foreground": "Text on sidebar active",
+      "sidebar-accent": "Sidebar hover / subtle",
+      "sidebar-accent-foreground": "Text on sidebar hover",
+      "sidebar-border": "Sidebar dividers",
+      "sidebar-ring": "Sidebar focus ring",
+    };
+
+    const GROUP_DEFS = [
+      { key: "brand", label: "Brand & Primary", tokens: ["primary", "primary-foreground", "secondary", "secondary-foreground"] },
+      { key: "surfaces", label: "Surfaces", tokens: ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "muted", "muted-foreground"] },
+      { key: "ui", label: "UI States", tokens: ["accent", "accent-foreground", "border", "input", "input-background", "switch-background", "ring"] },
+      { key: "status", label: "Status", tokens: ["destructive", "destructive-foreground"] },
+      { key: "charts", label: "Charts", tokens: ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"] },
+      { key: "sidebar", label: "Sidebar", tokens: ["sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"] },
+    ];
+
+    const assignedTokens = new Set();
+    const colorGroups = GROUP_DEFS.map((group) => {
+      const colors = group.tokens
+        .filter((name) => rawColors[name] && !NON_COLOR_KEYS.has(name))
+        .map((name) => {
+          assignedTokens.add(name);
+          const c = rawColors[name];
+          const hex = c?.hex || c?.value || "";
+          const u = colorUsage[name] || null;
+          return { name, hex, cssVar: `--${name}`, description: DESCRIPTIONS[name] || "", usage: u };
+        });
+      return { key: group.key, label: group.label, colors };
+    }).filter((g) => g.colors.length > 0);
+
+    // Arbitrary / one-off colors (not assigned to a group, not css-* noise, not font-weight)
+    const arbitraryColors = Object.entries(rawColors)
+      .filter(([name, c]) =>
+        !assignedTokens.has(name) &&
+        !NON_COLOR_KEYS.has(name) &&
+        !name.startsWith("css-") &&
+        (name.startsWith("arbitrary-") || name.startsWith("inline-") ||
+          (!name.startsWith("css-") && !assignedTokens.has(name)))
+      )
+      .map(([name, c]) => {
+        const hex = c?.hex || c?.value || "";
+        if (!hex) return null;
+        const u = colorUsage[name] || null;
+        return { name, hex, usage: u };
+      })
+      .filter(Boolean)
+      .slice(0, 60); // cap to avoid extremely long stories
+
+    const colorsContent = [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Colors\" } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
-      `const colors = ${JSON.stringify(colorEntries)};`,
+      `const colorGroups: { key: string; label: string; colors: { name: string; hex: string; cssVar: string; description: string; usage: { bg: number; text: number; border: number; total: number; topFiles: string[] } | null }[] }[] = ${JSON.stringify(colorGroups)};`,
+      `const arbitraryColors: { name: string; hex: string; usage: { total: number } | null }[] = ${JSON.stringify(arbitraryColors)};`,
+      "",
+      "function isLight(hex: string): boolean {",
+      "  try {",
+      "    const h = hex.replace('#','');",
+      "    if (h.length < 3) return true;",
+      "    const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);",
+      "    return (r*299 + g*587 + b*114) / 1000 > 155;",
+      "  } catch { return true; }",
+      "}",
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(160px, 1fr))\", gap: \"1rem\" }}>",
-      "      {colors.map(({ name, hex }) => (",
-      "        <div key={name} style={{ display: \"flex\", alignItems: \"center\", gap: 12, flexWrap: \"wrap\" }}>",
-      "          <div style={{ backgroundColor: hex, width: 48, height: 48, borderRadius: 8, border: \"1px solid #333\", flexShrink: 0 }} />",
-      "          <div>",
-      "            <p style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>{name}</p>",
-      "            <code style={{ fontSize: 11, color: \"#888\" }}>{hex}</code>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#f8fafc\", minHeight: 500 }}>",
+      "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\", color: \"#111\" }}>Colors</h2>",
+      "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 40px\" }}>Design tokens defined in CSS variables — grouped by role</p>",
+      "",
+      "      {colorGroups.map(group => (",
+      "        <div key={group.key} style={{ marginBottom: 40 }}>",
+      "          <h3 style={{ fontSize: 14, fontWeight: 700, textTransform: \"uppercase\", letterSpacing: \"0.08em\", color: \"#6b7280\", margin: \"0 0 16px\", borderBottom: \"1px solid #e5e7eb\", paddingBottom: 8 }}>{group.label}</h3>",
+      "          <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(210px, 1fr))\", gap: 16 }}>",
+      "            {group.colors.map(({ name, hex, cssVar, description, usage }) => {",
+      "              const transparent = hex === 'transparent' || hex === 'oklch(1 0 0 / 0)' || hex.includes('0000000') || hex === '#0000';",
+      "              const light = isLight(hex.startsWith('#') ? hex : '#888888');",
+      "              return (",
+      "                <div key={name} style={{ background: \"#fff\", borderRadius: 12, border: \"1px solid #e5e7eb\", overflow: \"hidden\", boxShadow: \"0 1px 3px rgba(0,0,0,0.06)\" }}>",
+      "                  {/* Swatch */}",
+      "                  <div style={{ height: 72, background: transparent ? 'repeating-linear-gradient(45deg,#e5e7eb,#e5e7eb 4px,#fff 4px,#fff 10px)' : hex, position: \"relative\", flexShrink: 0 }}>",
+      "                    {usage && usage.total > 0 && (",
+      "                      <span style={{ position: \"absolute\", top: 8, right: 8, fontSize: 10, fontWeight: 700, padding: \"2px 7px\", borderRadius: 99, background: light ? \"rgba(0,0,0,0.18)\" : \"rgba(255,255,255,0.25)\", color: light ? \"#fff\" : \"#fff\", backdropFilter: \"blur(2px)\" }}>",
+      "                        ×{usage.total}",
+      "                      </span>",
+      "                    )}",
+      "                  </div>",
+      "                  {/* Info */}",
+      "                  <div style={{ padding: \"12px 14px\" }}>",
+      "                    <div style={{ fontSize: 12, fontWeight: 700, color: \"#111\", marginBottom: 2 }}>{name}</div>",
+      "                    <code style={{ fontSize: 10, color: \"#6b7280\", display: \"block\", marginBottom: 2 }}>{cssVar}</code>",
+      "                    <code style={{ fontSize: 10, color: \"#9ca3af\", display: \"block\", marginBottom: description ? 6 : 0 }}>{hex.length > 28 ? hex.slice(0,28)+'…' : hex}</code>",
+      "                    {description && <p style={{ margin: \"0 0 8px\", fontSize: 11, color: \"#6b7280\", lineHeight: 1.4 }}>{description}</p>}",
+      "                    {usage && usage.total > 0 && (",
+      "                      <div style={{ display: \"flex\", gap: 6, flexWrap: \"wrap\", marginBottom: 6 }}>",
+      "                        {usage.bg > 0 && <span style={{ fontSize: 10, padding: \"1px 6px\", background: \"#dbeafe\", color: \"#1e40af\", borderRadius: 4 }}>bg ×{usage.bg}</span>}",
+      "                        {usage.text > 0 && <span style={{ fontSize: 10, padding: \"1px 6px\", background: \"#d1fae5\", color: \"#065f46\", borderRadius: 4 }}>text ×{usage.text}</span>}",
+      "                        {usage.border > 0 && <span style={{ fontSize: 10, padding: \"1px 6px\", background: \"#fef9c3\", color: \"#854d0e\", borderRadius: 4 }}>border ×{usage.border}</span>}",
+      "                        {usage.total - usage.bg - usage.text - usage.border > 0 && <span style={{ fontSize: 10, padding: \"1px 6px\", background: \"#f3e8ff\", color: \"#7e22ce\", borderRadius: 4 }}>other ×{usage.total - usage.bg - usage.text - usage.border}</span>}",
+      "                      </div>",
+      "                    )}",
+      "                    {usage && usage.topFiles && usage.topFiles.length > 0 && (",
+      "                      <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4 }}>",
+      "                        {usage.topFiles.map((f: string) => (",
+      "                          <span key={f} style={{ fontSize: 10, padding: \"1px 6px\", background: \"#f0f9ff\", color: \"#0369a1\", borderRadius: 3, border: \"1px solid #bae6fd\", fontFamily: \"monospace\" }}>{f}</span>",
+      "                        ))}",
+      "                      </div>",
+      "                    )}",
+      "                    {(!usage || usage.total === 0) && (",
+      "                      <span style={{ fontSize: 10, color: \"#d1d5db\" }}>Not found in source</span>",
+      "                    )}",
+      "                  </div>",
+      "                </div>",
+      "              );",
+      "            })}",
       "          </div>",
       "        </div>",
       "      ))}",
+      "",
+      "      {arbitraryColors.length > 0 && (",
+      "        <div>",
+      "          <h3 style={{ fontSize: 14, fontWeight: 700, textTransform: \"uppercase\", letterSpacing: \"0.08em\", color: \"#6b7280\", margin: \"0 0 16px\", borderBottom: \"1px solid #e5e7eb\", paddingBottom: 8 }}>Arbitrary Colors</h3>",
+      "          <p style={{ fontSize: 12, color: \"#9ca3af\", marginBottom: 16, marginTop: -8 }}>One-off hex values used via Tailwind arbitrary values or inline styles in this project</p>",
+      "          <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 8 }}>",
+      "            {arbitraryColors.map(({ name, hex, usage }) => (",
+      "              <div key={name} title={name + ' — ' + hex} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 4, width: 56 }}>",
+      "                <div style={{ width: 40, height: 40, borderRadius: 8, background: hex, border: \"1px solid #e5e7eb\", flexShrink: 0 }} />",
+      "                <span style={{ fontSize: 9, color: \"#9ca3af\", textAlign: \"center\", wordBreak: \"break-all\" as any, lineHeight: 1.2 }}>{hex.length > 9 ? hex.slice(0,9)+'…' : hex}</span>",
+      "                {usage && usage.total > 0 && <span style={{ fontSize: 9, color: \"#6b7280\" }}>×{usage.total}</span>}",
+      "              </div>",
+      "            ))}",
+      "          </div>",
+      "        </div>",
+      "      )}",
       "    </div>",
       "  ),",
       "};",
     ].join("\n");
-  fs.writeFileSync(path.join(foundationsDir, "Colors.stories.tsx"), colorsContent, "utf-8");
-  console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Colors.stories.tsx")));
+
+    fs.writeFileSync(path.join(foundationsDir, "Colors.stories.tsx"), colorsContent, "utf-8");
+    console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Colors.stories.tsx")));
+  }
 
   {
     const typo = foundations?.typography || {};