vibe-design-system 2.8.75 → 2.8.76

package/package.json

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

package/vds-core-template/scan.mjs

@@ -1397,9 +1397,14 @@ function extractFoundations() {
     if (cssChunks.length > 0) {
       const css = cssChunks.join("\n");
 
-      const rootMatch = css.match(/:root\s*\{([\s\S]*?)\}/);
-      if (rootMatch) {
-        const rootVars = parseCssVarBlock(rootMatch[1]);
+      // Collect ALL :root blocks (a file may have multiple, e.g. a small one early
+      // and the main one inside @layer base { :root { } })
+      const rootBlocks = [];
+      const rootGlobalRe = /:root\s*\{([\s\S]*?)\}/g;
+      let rootM;
+      while ((rootM = rootGlobalRe.exec(css)) !== null) { rootBlocks.push(rootM[1]); }
+      if (rootBlocks.length > 0) {
+        const rootVars = parseCssVarBlock(rootBlocks.join("\n"));
         for (const [name, value] of Object.entries(rootVars)) {
           if (/\d+\s+\d+%/.test(value) || /\d+%/.test(value)) {
             const hsl = `hsl(${value})`;

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

@@ -2182,9 +2182,11 @@ function buildStoryFileContent(comp) {
       const resolvedColors = colorRaw.map(token => {
         const m = token.match(/^(?:bg|text|border|ring|from|to|fill|stroke)-(.+)$/);
         const key = m ? m[1] : null;
-        const entry = key ? foundColors[key] : null;
+        // Strip opacity modifier (e.g. "muted/20" → "muted") as a fallback
+        const baseKey = key ? key.replace(/\/[\d.]+$/, "") : null;
+        const entry = key ? (foundColors[key] || (baseKey !== key ? foundColors[baseKey] : null)) : null;
         const hex = entry?.hex && /^#[0-9a-fA-F]{3,8}$/.test(entry.hex) ? entry.hex : null;
-        return { token, hex, label: key };
+        return { token, hex, label: baseKey || key };
       });
 
       const hasContent = resolvedColors.length > 0 || spacingRaw.length > 0 || typographyRaw.length > 0 || radiusRaw.length > 0 || animRaw.length > 0;