@vettvangur/design-system 2.0.58 → 2.0.60

package/dist/index.js

@@ -2417,6 +2417,42 @@ const extractVariantColors = variantNode => {
       }
     };
   }
+  const hasVisibleFill = node => {
+    const paints = Array.isArray(node?.fills) ? node.fills : null;
+    if (!paints || paints.length === 0) {
+      return false;
+    }
+    for (const paint of paints) {
+      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 false;
+  };
+  const getArea = node => {
+    const box = node?.absoluteBoundingBox;
+    const w = typeof box?.width === 'number' ? box.width : null;
+    const h = typeof box?.height === 'number' ? box.height : null;
+    if (w === null || h === null) {
+      return 0;
+    }
+    return Math.max(0, w) * Math.max(0, h);
+  };
   const getFillToken = node => {
     const fillAlias = Array.isArray(node?.boundVariables?.fills) ? node.boundVariables.fills[0] : null;
     const fillVar = fillAlias?.variable;
@@ -2427,14 +2463,6 @@ const extractVariantColors = variantNode => {
     const strokeVar = strokeAlias?.variable;
     return strokeVar?.resolvedType === 'COLOR' && strokeVar?.nameKebab ? strokeVar.nameKebab : null;
   };
-  const isIconNode = node => {
-    const name = typeof node?.name === 'string' ? node.name : '';
-    return /\bicon\b/i.test(name);
-  };
-  const isRootBgNode = node => {
-    const name = typeof node?.name === 'string' ? node.name : '';
-    return /\b(background|container|base|bg)\b/i.test(name);
-  };
   const root = {
     bg: null,
     border: null,
@@ -2443,16 +2471,9 @@ const extractVariantColors = variantNode => {
   const icon = {
     bg: null
   };
-
-  // Prefer explicit bindings on the component root.
-  if (variantNode?.type !== 'TEXT') {
-    root.bg = getFillToken(variantNode);
-    root.border = getStrokeToken(variantNode);
-  }
-  let fallbackRootBg = null;
-  let namedRootBg = null;
-  let fallbackRootBorder = null;
-  let namedRootBorder = null;
+  const fillCandidates = [];
+  const strokeCandidates = [];
+  const rootArea = getArea(variantNode);
   walkFigmaNode(variantNode, node => {
     if (!node || typeof node !== 'object') {
       return;
@@ -2467,38 +2488,50 @@ const extractVariantColors = variantNode => {
     if (node?.type === 'TEXT') {
       return;
     }
-
-    // Icon background (used for icon-only background buttons).
-    if (!icon.bg && isIconNode(node)) {
+    const area = getArea(node);
+    if (hasVisibleFill(node)) {
       const t = getFillToken(node);
       if (t) {
-        icon.bg = t;
+        fillCandidates.push({
+          token: t,
+          area
+        });
       }
-      return;
     }
-
-    // Root background/stroke candidates (exclude icon wrappers).
-    if (!root.bg) {
-      const t = getFillToken(node);
-      if (t) {
-        fallbackRootBg ??= t;
-        if (!namedRootBg && isRootBgNode(node)) {
-          namedRootBg = t;
-        }
-      }
+    const s = getStrokeToken(node);
+    if (s) {
+      strokeCandidates.push({
+        token: s,
+        area
+      });
     }
-    if (!root.border) {
-      const t = getStrokeToken(node);
-      if (t) {
-        fallbackRootBorder ??= t;
-        if (!namedRootBorder && isRootBgNode(node)) {
-          namedRootBorder = t;
-        }
+  });
+
+  // Decide whether the variant has a true button background.
+  // If the only filled element is much smaller than the button itself (common for arrow/icon buttons),
+  // treat it as `.button__icon` background instead.
+  const pickLargest = candidates => {
+    let best = null;
+    for (const c of candidates) {
+      if (!best || c.area > best.area) {
+        best = c;
       }
     }
-  });
-  root.bg ??= namedRootBg ?? fallbackRootBg;
-  root.border ??= namedRootBorder ?? fallbackRootBorder;
+    return best;
+  };
+  const ROOT_BG_RATIO_MIN = 0.6;
+  const bestFill = pickLargest(fillCandidates);
+  const bestStroke = pickLargest(strokeCandidates);
+  const fillRatio = rootArea > 0 && bestFill?.area ? bestFill.area / rootArea : 1;
+  if (bestFill && fillRatio >= ROOT_BG_RATIO_MIN) {
+    root.bg = bestFill.token;
+  } else if (bestFill) {
+    icon.bg = bestFill.token;
+  }
+  const strokeRatio = rootArea > 0 && bestStroke?.area ? bestStroke.area / rootArea : 1;
+  if (bestStroke && strokeRatio >= ROOT_BG_RATIO_MIN) {
+    root.border = bestStroke.token;
+  }
   return {
     root,
     icon

package/package.json

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