@vettvangur/design-system 2.0.74 → 2.0.77

package/dist/index.js

@@ -3776,7 +3776,7 @@ function generateSpacingCss(scales) {
   const lines = Array.from(map.entries()).map(([k, v]) => `  ${k}: ${v};`);
 
   // manual required defaults
-  ensureVar(lines, '--spacing', '1px');
+  ensureVar(lines, '--spacing', rem(1));
   ensureVar(lines, '--spacing-0', '0');
   ensureVar(lines, '--spacing-auto', 'auto');
   ensureVar(lines, '--spacing-full', '100%');
@@ -3981,12 +3981,59 @@ function rgbaFromColor(color) {
   const r = color?.rgba?.r;
   const g = color?.rgba?.g;
   const b = color?.rgba?.b;
+  const normalizeRgbChannel = v => {
+    if (typeof v !== 'number' || Number.isNaN(v)) {
+      return null;
+    }
+
+    // Figma typically gives channels in 0..1, but some token sources provide 0..255.
+    if (v >= 0 && v <= 1) {
+      return Math.round(v * 255);
+    }
+
+    // Handle 16-bit channels (0..65535) defensively.
+    if (v > 255 && v <= 65535) {
+      return Math.round(Math.max(0, Math.min(255, v / 257)));
+    }
+    return Math.round(Math.max(0, Math.min(255, v)));
+  };
+  const normalizeAlpha = v => {
+    if (typeof v !== 'number' || Number.isNaN(v)) {
+      return null;
+    }
+
+    // Common cases: 0..1, percent (0..100), or 0..255.
+    //
+    // Figma color alpha comes through as 0..1 (e.g. 4% => 0.04). For shadows we want
+    // that 4% to land as 0.4 in generated CSS (historical parity with our tokens),
+    // so we scale very small fractional alphas up by 10.
+    let a = v;
+    if (a > 1 && a <= 10) {
+      // Some sources provide alpha in a 0..10 scale (e.g. 4 => 0.4)
+      a /= 10;
+    } else if (a > 10 && a <= 100) {
+      a /= 100;
+    } else if (a > 100 && a <= 255) {
+      a /= 255;
+    } else if (a > 0 && a <= 0.1) {
+      // Figma: 4% is 0.04; we want 0.4.
+      a *= 10;
+    }
+    a = Math.max(0, Math.min(1, a));
+
+    // Avoid long float tails from upstream values.
+    const rounded = Number(a.toFixed(4));
+    return String(rounded);
+  };
   if ([r, g, b, a].every(v => typeof v === 'number')) {
-    const rr = Math.round(r * 255);
-    const gg = Math.round(g * 255);
-    const bb = Math.round(b * 255);
-    const aa = Math.max(0, Math.min(1, a));
-    return `rgba(${rr} ${gg} ${bb} / ${aa})`;
+    const rr = normalizeRgbChannel(r);
+    const gg = normalizeRgbChannel(g);
+    const bb = normalizeRgbChannel(b);
+    const aa = normalizeAlpha(a);
+    if ([rr, gg, bb, aa].every(v => v != null)) {
+      // Use legacy comma-separated rgba() for maximum tool compatibility.
+      return `rgba(${rr}, ${gg}, ${bb}, ${aa})`;
+    }
   }
   const hex = String(color?.hex ?? '').trim();
   // supports #RRGGBB or #RRGGBBAA
@@ -4000,7 +4047,10 @@ function rgbaFromColor(color) {
   const gg = parseInt(rgb.slice(2, 4), 16);
   const bb = parseInt(rgb.slice(4, 6), 16);
   const alpha = aa ? parseInt(aa, 16) / 255 : 1;
-  return `rgba(${rr} ${gg} ${bb} / ${alpha})`;
+  const alphaStr = String(Number(Math.max(0, Math.min(1, alpha)).toFixed(4)));
+
+  // Use legacy comma-separated rgba() for maximum tool compatibility.
+  return `rgba(${rr}, ${gg}, ${bb}, ${alphaStr})`;
 }
 
 /**
@@ -4072,6 +4122,16 @@ function renderTheme(lines) {
   return `@theme {\n${lines.join('\n')}\n}\n`;
 }
 
+/**
+ * Render utilities.
+ *
+ * @param blocks - Value.
+ * @returns String result.
+ */
+function renderUtilities(blocks) {
+  return blocks.length ? `${blocks.join('\n\n')}\n` : '';
+}
+
 /**
  * Generate shadows.
  *
@@ -4087,19 +4147,21 @@ function renderTheme(lines) {
  */
 async function generateShadows(variableSet, config) {
   message('generating shadows...');
-  const lines = [];
+  const themeLines = [];
+  const utilityBlocks = [];
   for (const [rawKey, token] of Object.entries(variableSet || {})) {
     const key = toShadowKey(rawKey);
     const value = buildShadowValue(token?.effects);
     if (!value) {
       continue;
     }
-    lines.push(`  --${key}: ${value};`);
+    themeLines.push(`  --${key}: ${value};`);
+    utilityBlocks.push(`@utility ${key} {\n  box-shadow: var(--${key});\n}`);
   }
-  const css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n${renderTheme(lines)}`;
+  const css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n${renderTheme(themeLines)}\n${renderUtilities(utilityBlocks)}`;
   const outPath = path.join(config.paths.styles, 'config', 'shadow.css');
   await fs$1.writeFile(outPath, css, 'utf8');
-  message(`finished generating shadows (${lines.length})`);
+  message(`finished generating shadows (${themeLines.length})`);
 }
 
 /**
@@ -4340,7 +4402,13 @@ async function generateTailwind(config, projectType, typography, buttons, colors
   message(pc.yellow('-=[ tailwind ]=-'));
   await generateFontFamily(typography.families, config);
   await generateFontWeight(typography.weights, config);
-  await generateButtons$1(buttons, config);
+  const skipButtonVariants = process.env.DS_SKIP_BUTTON_VARIANTS === '1' || process.env.DS_SKIP_BUTTON_VARIANTS === 'true' || config?.raw?.generators?.tailwind?.buttonVariants === false || config?.raw?.generators?.tailwind?.buttons === false;
+  const enableButtonVariants = process.env.DS_ENABLE_BUTTON_VARIANTS === '1' || process.env.DS_ENABLE_BUTTON_VARIANTS === 'true' || config?.raw?.generators?.tailwind?.buttonVariants === true || config?.raw?.generators?.tailwind?.buttons === true;
+  if (skipButtonVariants || !enableButtonVariants) {
+    message('skipping tailwind button variants generator');
+  } else {
+    await generateButtons$1(buttons, config);
+  }
   await generateBodies(typography.sizes, typography.lineHeights, config);
   await generateHeadlines(typography.sizes, typography.lineHeights, config);
   await generateTypography$1(typography.sizes, typography.lineHeights, config);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vettvangur/design-system",
-  "version": "2.0.74",
+  "version": "2.0.77",
   "description": "",
   "access": "public",
   "type": "module",