@vettvangur/design-system 2.0.76 → 2.0.77

package/dist/index.js

@@ -4003,11 +4003,21 @@ function rgbaFromColor(color) {
     }
 
     // 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 <= 100) {
+    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));
 
@@ -4112,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.
  *
@@ -4127,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})`);
 }
 
 /**

package/package.json

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