@vettvangur/design-system 2.0.59 → 2.0.61

package/dist/index.js

@@ -1759,6 +1759,15 @@ function groupTypography(variableSet) {
   message('grouping typography...');
   const col = variableSet.typography;
   const toks = col?.tokens || {};
+  if (process$1.env.DS_DEBUG) {
+    const keys = Object.keys(toks);
+    console.log('[design-system] typography: token count =', keys.length);
+    if (keys.length) {
+      console.log('[design-system] typography: token key sample =', keys.slice(0, 25).join(', '));
+      const ff = keys.filter(k => k.startsWith('font-family-'));
+      console.log('[design-system] typography: font-family key sample =', ff.slice(0, 25).join(', '));
+    }
+  }
   const out = {
     families: {},
     weights: {},
@@ -2444,6 +2453,15 @@ const extractVariantColors = variantNode => {
     }
     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;
@@ -2454,14 +2472,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,
@@ -2470,16 +2480,9 @@ const extractVariantColors = variantNode => {
   const icon = {
     bg: null
   };
-
-  // Prefer explicit bindings on the component root.
-  if (variantNode?.type !== 'TEXT') {
-    root.bg = hasVisibleFill(variantNode) ? getFillToken(variantNode) : null;
-    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;
@@ -2494,38 +2497,50 @@ const extractVariantColors = variantNode => {
     if (node?.type === 'TEXT') {
       return;
     }
-
-    // Icon background (used for icon-only background buttons).
-    if (!icon.bg && isIconNode(node)) {
-      const t = hasVisibleFill(node) ? getFillToken(node) : null;
+    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 = hasVisibleFill(node) ? getFillToken(node) : null;
-      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.59",
+  "version": "2.0.61",
   "description": "",
   "access": "public",
   "type": "module",