@vettvangur/design-system 2.0.57 → 2.0.59

package/dist/index.js

@@ -2417,27 +2417,37 @@ const extractVariantColors = variantNode => {
       }
     };
   }
-  const getFillToken = node => {
-    // Figma exposes fill variable bindings in two common shapes:
-    // - node.boundVariables.fills[0]
-    // - node.fills[i].boundVariables.color
-    const fillAlias = Array.isArray(node?.boundVariables?.fills) ? node.boundVariables.fills[0] : null;
-    const fillVar = fillAlias?.variable;
-    if (fillVar?.resolvedType === 'COLOR' && fillVar?.nameKebab) {
-      return fillVar.nameKebab;
-    }
+  const hasVisibleFill = node => {
     const paints = Array.isArray(node?.fills) ? node.fills : null;
-    if (!paints) {
-      return null;
+    if (!paints || paints.length === 0) {
+      return false;
     }
     for (const paint of paints) {
-      const colorAlias = paint?.boundVariables?.color;
-      const colorVar = colorAlias?.variable;
-      if (colorVar?.resolvedType === 'COLOR' && colorVar?.nameKebab) {
-        return colorVar.nameKebab;
+      if (!paint || typeof paint !== 'object') {
+        continue;
+      }
+      if (paint.visible === false) {
+        continue;
+      }
+      const opacity = typeof paint.opacity === 'number' ? paint.opacity : 1;
+      if (opacity <= 0) {
+        continue;
+      }
+      const alpha = typeof paint?.color?.a === 'number' ? paint.color.a : 1;
+      if (alpha * opacity <= 0) {
+        continue;
+      }
+      const type = typeof paint.type === 'string' ? paint.type : null;
+      if (type && type !== 'NONE') {
+        return true;
       }
     }
-    return null;
+    return false;
+  };
+  const getFillToken = node => {
+    const fillAlias = Array.isArray(node?.boundVariables?.fills) ? node.boundVariables.fills[0] : null;
+    const fillVar = fillAlias?.variable;
+    return fillVar?.resolvedType === 'COLOR' && fillVar?.nameKebab ? fillVar.nameKebab : null;
   };
   const getStrokeToken = node => {
     const strokeAlias = Array.isArray(node?.boundVariables?.strokes) ? node.boundVariables.strokes[0] : null;
@@ -2463,7 +2473,7 @@ const extractVariantColors = variantNode => {
 
   // Prefer explicit bindings on the component root.
   if (variantNode?.type !== 'TEXT') {
-    root.bg = getFillToken(variantNode);
+    root.bg = hasVisibleFill(variantNode) ? getFillToken(variantNode) : null;
     root.border = getStrokeToken(variantNode);
   }
   let fallbackRootBg = null;
@@ -2479,38 +2489,37 @@ const extractVariantColors = variantNode => {
       if (t) {
         root.text = t;
       }
+      return;
     }
     if (node?.type === 'TEXT') {
       return;
     }
 
-    // If the design has a dedicated icon wrapper with a fill token, prefer mapping it
-    // to `.button__icon` instead of the button root.
+    // Icon background (used for icon-only background buttons).
     if (!icon.bg && isIconNode(node)) {
-      const t = getFillToken(node);
+      const t = hasVisibleFill(node) ? getFillToken(node) : null;
       if (t) {
         icon.bg = t;
       }
+      return;
     }
 
     // Root background/stroke candidates (exclude icon wrappers).
-    if (!isIconNode(node)) {
-      if (!root.bg) {
-        const t = getFillToken(node);
-        if (t) {
-          fallbackRootBg ??= t;
-          if (!namedRootBg && isRootBgNode(node)) {
-            namedRootBg = t;
-          }
+    if (!root.bg) {
+      const t = hasVisibleFill(node) ? getFillToken(node) : null;
+      if (t) {
+        fallbackRootBg ??= t;
+        if (!namedRootBg && isRootBgNode(node)) {
+          namedRootBg = t;
         }
       }
-      if (!root.border) {
-        const t = getStrokeToken(node);
-        if (t) {
-          fallbackRootBorder ??= t;
-          if (!namedRootBorder && isRootBgNode(node)) {
-            namedRootBorder = t;
-          }
+    }
+    if (!root.border) {
+      const t = getStrokeToken(node);
+      if (t) {
+        fallbackRootBorder ??= t;
+        if (!namedRootBorder && isRootBgNode(node)) {
+          namedRootBorder = t;
         }
       }
     }
@@ -2531,13 +2540,6 @@ const renderApplyLine = (prefix, token, indent = '  ') => {
   }
   return `${indent}@apply ${prefix}-${token};\n`;
 };
-function renderIconBgBlock(indent, bgToken) {
-  if (!bgToken) {
-    return '';
-  }
-  const innerIndent = `${indent}  `;
-  return `${indent}.button__icon {\n${renderApplyLine('bg', bgToken, innerIndent)}${indent}}\n`;
-}
 function renderUtility(name, base, hover) {
   const baseRoot = base?.root ?? {
     bg: null,
@@ -2550,6 +2552,13 @@ function renderUtility(name, base, hover) {
   const hoverRoot = hover?.root ?? null;
   const hoverIcon = hover?.icon ?? null;
   const baseLines = renderApplyLine('bg', baseRoot?.bg, '  ') + renderApplyLine('border', baseRoot?.border, '  ') + renderApplyLine('text', baseRoot?.text, '  ');
+  const renderIconBgBlock = (indent, bgToken) => {
+    if (!bgToken) {
+      return '';
+    }
+    const innerIndent = `${indent}  `;
+    return `${indent}.button__icon {\n${renderApplyLine('bg', bgToken, innerIndent)}${indent}}\n`;
+  };
 
   // Only emit icon background styles when the button root itself has no background.
   const iconBaseBlock = !baseRoot?.bg ? renderIconBgBlock('  ', baseIcon?.bg) : '';

package/package.json

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