vibe-design-system 2.8.16 → 2.8.19

package/package.json

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

package/vds-core-template/scan.mjs

@@ -1730,6 +1730,8 @@ function extractTokenUsage() {
   const radiusCounts = new Map();
   const animateCounts = new Map();
   const textSizeCounts = new Map();
+  // Per-file tracking: token → Map<componentName, count>
+  const textSizeFiles = new Map();
 
   // Spacing utilities: gap-*, p-*, px-*, py-*, pt-*, pb-*, pl-*, pr-*, m-*, mx-*, my-*, mt-*, mb-*, ml-*, mr-*, space-*, w-*, h-*
   const spacingRe = /\b(gap|p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|space-x|space-y|w|h|size|inset|top|bottom|left|right|min-w|min-h|max-w|max-h)-((?:\d+(\.\d+)?|px|full|screen|auto|fit|max|min|svh|dvh|svw|dvw))\b/g;
@@ -1792,11 +1794,16 @@ function extractTokenUsage() {
       animateCounts.set(key, (animateCounts.get(key) || 0) + 1);
     }
 
-    // Text sizes
+    // Text sizes — global count + per-component breakdown
+    const componentName = path.basename(rel).replace(/\.(tsx|jsx|ts|js)$/, "");
     const textSizeUtilReCopy = new RegExp(textSizeUtilRe.source, "g");
     while ((m = textSizeUtilReCopy.exec(content)) !== null) {
       const key = `text-${m[1]}`;
       textSizeCounts.set(key, (textSizeCounts.get(key) || 0) + 1);
+      // Per-file
+      if (!textSizeFiles.has(key)) textSizeFiles.set(key, new Map());
+      const fm = textSizeFiles.get(key);
+      fm.set(componentName, (fm.get(componentName) || 0) + 1);
     }
   }
 
@@ -1812,10 +1819,75 @@ function extractTokenUsage() {
     zIndex: toTop(zIndexCounts, 10),
     radius: toTop(radiusCounts, 10),
     animations: toTop(animateCounts, 8),
-    textSizes: toTop(textSizeCounts, 12),
+    textSizes: toTop(textSizeCounts, 12).map(({ token, count }) => ({
+      token,
+      count,
+      // Top 5 components that use this text size most
+      topFiles: [...(textSizeFiles.get(token) || new Map()).entries()]
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 5)
+        .map(([name]) => name),
+    })),
   };
 }
 
+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() };
+  }
+
+  // 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;
+
+  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;
+    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);
+    }
+  }
+
+  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);
@@ -1928,6 +2000,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 || {};
@@ -1353,24 +1492,35 @@ function writeFoundationsStories(foundations) {
       "      ) : (",
       "        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 0, marginBottom: 48, border: \"1px solid #e5e7eb\", borderRadius: 10, overflow: \"hidden\" }}>",
       "          {typeScale.map(({ step, size, px, lineHeight }, i) => {",
-      "            const usageCount = usedTextSizes.find(u => u.token === `text-${step}`)?.count;",
-      "            const remVal = parseFloat(size);",
-      "            const pxVal = px ? parseInt(px) : Math.round(remVal * 16);",
+      "            const usage = usedTextSizes.find(u => u.token === `text-${step}`);",
+      "            const usageCount = usage?.count;",
+      "            const topFiles = usage?.topFiles || [];",
       "            return (",
-      "              <div key={step} style={{ display: \"flex\", alignItems: \"center\", gap: 20, padding: \"14px 20px\", background: i % 2 === 0 ? \"#fff\" : \"#f9fafb\", borderTop: i === 0 ? \"none\" : \"1px solid #f0f0f0\" }}>",
-      "                <div style={{ width: 120, flexShrink: 0 }}>",
-      "                  <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>",
-      "                    <code style={{ fontSize: 12, fontWeight: 600, color: \"#6366f1\", background: \"#eef2ff\", padding: \"2px 7px\", borderRadius: 4 }}>text-{step}</code>",
-      "                    {usageCount && <span style={{ fontSize: 11, color: \"#9ca3af\" }}>×{usageCount}</span>}",
+      "              <div key={step} style={{ display: \"flex\", flexDirection: \"column\", padding: \"14px 20px\", background: i % 2 === 0 ? \"#fff\" : \"#f9fafb\", borderTop: i === 0 ? \"none\" : \"1px solid #f0f0f0\" }}>",
+      "                <div style={{ display: \"flex\", alignItems: \"center\", gap: 20 }}>",
+      "                  <div style={{ width: 140, flexShrink: 0 }}>",
+      "                    <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>",
+      "                      <code style={{ fontSize: 12, fontWeight: 600, color: \"var(--color-primary, #6366f1)\", background: \"color-mix(in srgb, var(--color-primary, #6366f1) 12%, white)\", padding: \"2px 7px\", borderRadius: 4 }}>text-{step}</code>",
+      "                      {usageCount && <span style={{ fontSize: 11, color: \"#9ca3af\" }}>×{usageCount}</span>}",
+      "                    </div>",
+      "                    <div style={{ fontSize: 11, color: \"#9ca3af\", marginTop: 4 }}>",
+      "                      {size}{px && px !== size ? ` · ${px}` : \"\"}",
+      "                      {lineHeight ? <span style={{ marginLeft: 8 }}>lh {lineHeight}</span> : null}",
+      "                    </div>",
       "                  </div>",
-      "                  <div style={{ fontSize: 11, color: \"#9ca3af\", marginTop: 4 }}>",
-      "                    {size}{px && px !== size ? ` · ${px}` : \"\"}",
-      "                    {lineHeight ? <span style={{ marginLeft: 8 }}>lh {lineHeight}</span> : null}",
+      "                  <div style={{ fontSize: size, fontFamily: sansFamily, color: \"#111\", lineHeight: lineHeight || 1.5, overflow: \"hidden\", whiteSpace: \"nowrap\", textOverflow: \"ellipsis\", flex: 1 }}>",
+      "                    The quick brown fox jumps over the lazy dog",
       "                  </div>",
       "                </div>",
-      "                <div style={{ fontSize: size, fontFamily: sansFamily, color: \"#111\", lineHeight: lineHeight || 1.5, overflow: \"hidden\", whiteSpace: \"nowrap\", textOverflow: \"ellipsis\", flex: 1 }}>",
-      "                  The quick brown fox jumps over the lazy dog",
-      "                </div>",
+      "                {topFiles.length > 0 && (",
+      "                  <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 5, marginTop: 8, paddingLeft: 0 }}>",
+      "                    {topFiles.map((name: string) => (",
+      "                      <span key={name} style={{ fontSize: 10, background: \"#f0f9ff\", color: \"#0369a1\", padding: \"2px 8px\", borderRadius: 3, border: \"1px solid #bae6fd\", fontFamily: \"monospace\" }}>",
+      "                        {name}",
+      "                      </span>",
+      "                    ))}",
+      "                  </div>",
+      "                )}",
       "              </div>",
       "            );",
       "          })}",
@@ -1607,7 +1757,7 @@ function writeFoundationsStories(foundations) {
       "          {spacingTokens.map(({ token, label, barWidth }) => (",
       "            <div key={token} style={{ display: \"flex\", alignItems: \"center\", gap: 10, minHeight: 24 }}>",
       "              <span style={{ width: 40, fontSize: 11, color: \"#9ca3af\", textAlign: \"right\", flexShrink: 0, fontVariantNumeric: \"tabular-nums\" }}>{token}</span>",
-      "              <div style={{ width: Math.max(barWidth, 2), height: 16, background: barWidth === 0 ? \"transparent\" : \"linear-gradient(90deg,#818cf8,#6366f1)\", borderRadius: 3, flexShrink: 0, border: barWidth === 0 ? \"1px dashed #555\" : \"none\", boxSizing: \"border-box\" as any }} />",
+      "              <div style={{ width: Math.max(barWidth, 2), height: 16, background: barWidth === 0 ? \"transparent\" : \"var(--color-primary, #6366f1)\", opacity: barWidth === 0 ? 1 : 0.85, borderRadius: 3, flexShrink: 0, border: barWidth === 0 ? \"1px dashed #555\" : \"none\", boxSizing: \"border-box\" as any }} />",
       "              <code style={{ fontSize: 11, color: \"#6b7280\" }}>{label}</code>",
       "            </div>",
       "          ))}",
@@ -1744,7 +1894,7 @@ function writeFoundationsStories(foundations) {
       "        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6, maxWidth: 380 }}>",
       "          {zIndexTokens.map(({ token, value, label }) => (",
       "            <div key={token} style={{ display: \"flex\", alignItems: \"center\", gap: 12, padding: \"8px 14px\", background: \"#fff\", borderRadius: 8, border: \"1px solid #e5e7eb\" }}>",
-      "              <span style={{ width: 36, fontSize: 15, fontWeight: 700, color: \"#6366f1\", textAlign: \"right\", flexShrink: 0, fontVariantNumeric: \"tabular-nums\" }}>{value}</span>",
+      "              <span style={{ width: 36, fontSize: 15, fontWeight: 700, color: \"var(--color-primary, #6366f1)\", textAlign: \"right\", flexShrink: 0, fontVariantNumeric: \"tabular-nums\" }}>{value}</span>",
       "              <div>",
       "                <span style={{ fontSize: 12, fontWeight: 600 }}>{token}</span>",
       "                {label ? <span style={{ fontSize: 11, color: \"#9ca3af\", marginLeft: 8 }}>{label}</span> : null}",
@@ -1756,7 +1906,7 @@ function writeFoundationsStories(foundations) {
       "        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6, maxWidth: 380 }}>",
       "          {usedZIndex.map(({ token, count }) => (",
       "            <div key={token} style={{ display: \"flex\", alignItems: \"center\", gap: 12, padding: \"8px 14px\", background: \"#fff\", borderRadius: 8, border: \"1px solid #e5e7eb\" }}>",
-      "              <span style={{ width: 36, fontSize: 15, fontWeight: 700, color: \"#6366f1\", textAlign: \"right\", flexShrink: 0 }}>{token.replace('z-','')}</span>",
+      "              <span style={{ width: 36, fontSize: 15, fontWeight: 700, color: \"var(--color-primary, #6366f1)\", textAlign: \"right\", flexShrink: 0 }}>{token.replace('z-','')}</span>",
       "              <div>",
       "                <span style={{ fontSize: 12, fontWeight: 600 }}>{token}</span>",
       "                {zSemantics[token] ? <span style={{ fontSize: 11, color: \"#9ca3af\", marginLeft: 8 }}>{zSemantics[token]}</span> : null}",
@@ -1837,7 +1987,7 @@ function writeFoundationsStories(foundations) {
       "              <div style={{",
       "                width: isFull ? 64 : 72,",
       "                height: isFull ? 64 : 56,",
-      "                background: \"linear-gradient(135deg,#818cf8,#6366f1)\",",
+      "                background: \"var(--color-primary, #6366f1)\",",
       "                borderRadius: isFull ? \"50%\" : value === \"0px\" || value === \"0\" ? 0 : value,",
       "                flexShrink: 0,",
       "              }} />",
@@ -1907,7 +2057,7 @@ function writeFoundationsStories(foundations) {
       "          position: \"absolute\",",
       "          top: 4, left: active ? 172 : 4,",
       "          width: 44, height: 24,",
-      "          background: \"linear-gradient(90deg,#818cf8,#6366f1)\",",
+      "          background: \"var(--color-primary, #6366f1)\",",
       "          borderRadius: 6,",
       "          transition: `left ${value} cubic-bezier(0.4,0,0.2,1)`,",
       "        }} />",