@vettvangur/design-system 2.0.49 → 2.0.51

package/dist/index.js

@@ -2404,8 +2404,65 @@ const extractButtonGroupsByComponentSet = (nodesResponse, {
   });
   return groups;
 };
-function renderUtility(name) {
-  return `@utility ${name} {\n @apply button;\n\n    &:not([disabled]):hover {\n    \n  }\n}\n`;
+const extractVariantColors = variantNode => {
+  if (!variantNode || typeof variantNode !== 'object') {
+    return {
+      bg: null,
+      border: null,
+      text: null
+    };
+  }
+  let bg = null;
+  let border = null;
+  let text = null;
+  walkFigmaNode(variantNode, node => {
+    if (!node || typeof node !== 'object') {
+      return;
+    }
+    if (!bg && node?.type !== 'TEXT') {
+      const fillAlias = Array.isArray(node?.boundVariables?.fills) ? node.boundVariables.fills[0] : null;
+      const fillVar = fillAlias?.variable;
+      if (fillVar?.resolvedType === 'COLOR' && fillVar?.nameKebab) {
+        bg = fillVar.nameKebab;
+      }
+    }
+    if (!border && node?.type !== 'TEXT') {
+      const strokeAlias = Array.isArray(node?.boundVariables?.strokes) ? node.boundVariables.strokes[0] : null;
+      const strokeVar = strokeAlias?.variable;
+      if (strokeVar?.resolvedType === 'COLOR' && strokeVar?.nameKebab) {
+        border = strokeVar.nameKebab;
+      }
+    }
+    if (!text && node?.type === 'TEXT') {
+      const textFillAlias = Array.isArray(node?.boundVariables?.fills) ? node.boundVariables.fills[0] : null;
+      const textFillVar = textFillAlias?.variable;
+      if (textFillVar?.resolvedType === 'COLOR' && textFillVar?.nameKebab) {
+        text = textFillVar.nameKebab;
+      }
+    }
+  });
+  return {
+    bg,
+    border,
+    text
+  };
+};
+const renderApplyLine = (prefix, token) => {
+  if (!token) {
+    return '';
+  }
+  if (prefix === 'text') {
+    return token.startsWith('text-') ? `  @apply ${token};\n` : `  @apply text-${token};\n`;
+  }
+  return `  @apply ${prefix}-${token};\n`;
+};
+function renderUtility(name, base, hover) {
+  const baseLines = renderApplyLine('bg', base?.bg) + renderApplyLine('border', base?.border) + renderApplyLine('text', base?.text);
+  const hoverBg = hover?.bg && hover.bg !== base?.bg ? hover.bg : null;
+  const hoverBorder = hover?.border && hover.border !== base?.border ? hover.border : null;
+  const hoverText = hover?.text && hover.text !== base?.text ? hover.text : null;
+  const hoverLines = renderApplyLine('bg', hoverBg) + renderApplyLine('border', hoverBorder) + renderApplyLine('text', hoverText);
+  return `@utility ${name} {\n  @apply button;\n${baseLines}\n  &:not([disabled]):hover {\n${hoverLines}  }\n}\n`;
 }
 async function generateButtons$1(_components, config) {
   message('generating buttons (from figma Buttons page)...');
@@ -2438,19 +2495,29 @@ async function generateButtons$1(_components, config) {
     pageNodeId,
     groups
   }, null, 2)}\n`, 'utf8');
-  const utilityNames = [];
+  const blocks = [];
   for (const group of groups) {
-    const setKey = group.componentSet?.nameKebab;
-    for (const variant of group.componentSet?.variants ?? []) {
-      const variantKey = variant?.nameKebab;
-      if (!setKey || !variantKey) {
-        continue;
+    const rawSetKey = group.componentSet?.nameKebab;
+    const setKey = typeof rawSetKey === 'string' ? rawSetKey.replace(/^button-/, '') : null;
+    if (!setKey) {
+      continue;
+    }
+    const variants = Array.isArray(group.componentSet?.variants) ? group.componentSet.variants : [];
+    const byState = new Map();
+    for (const v of variants) {
+      const k = typeof v?.nameKebab === 'string' ? v.nameKebab : null;
+      if (k) {
+        byState.set(k, v);
       }
-      utilityNames.push(`button-${setKey}-${variantKey}`);
     }
-  }
-  const blocks = Array.from(new Set(utilityNames)).sort().map(renderUtility);
-  const css = `/* AUTO-GENERATED ONCE - Safe to edit */\n${blocks.join('\n')}`;
+    const defaultVariant = byState.get('default') ?? variants[0] ?? null;
+    const hoverVariant = byState.get('hover') ?? null;
+    const base = extractVariantColors(defaultVariant);
+    const hover = hoverVariant ? extractVariantColors(hoverVariant) : null;
+    const utilityName = `button-${setKey}`;
+    blocks.push(renderUtility(utilityName, base, hover));
+  }
+  const css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n${blocks.join('\n')}`;
   const outPath = path.join(coreOutDir, 'button-variants.css');
   await fs$1.writeFile(outPath, css, 'utf8');
   message(`finished generating button variants (count=${blocks.length})`);

package/package.json

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