@vettvangur/design-system 2.0.68 → 2.0.70

package/dist/index.js

@@ -3511,7 +3511,8 @@ async function renderTypography(tokens, config) {
       return;
     }
     if (typeof value === 'number') {
-      const v = value === 0 ? '0' : rem(value);
+      const k = String(key);
+      const v = value === 0 ? '0' : k.startsWith('text-') || k.startsWith('leading-') ? rem(value) : `${value}px`;
       return `  --${key}: ${v};\n`;
     }
     return `  --${key}: ${String(value)};\n`; // already has units
@@ -3618,16 +3619,43 @@ function pickNumber(values, preferredMode) {
   if (!values || typeof values !== 'object') {
     return null;
   }
-  const direct = values[preferredMode];
-  if (typeof direct === 'number') {
+  const parseNumberLike = v => {
+    if (typeof v === 'number') {
+      return Number.isFinite(v) ? v : null;
+    }
+    if (typeof v !== 'string') {
+      return null;
+    }
+
+    // Accept numeric strings and common px strings from Figma variables.
+    // Examples: "2", "2px", "0px".
+    const s = v.trim();
+    if (!s) {
+      return null;
+    }
+
+    // Radius/spacing/border tokens are expected to be integer pixel values.
+    // If decimals are present, keep behavior explicit by rejecting them.
+    const m = /^-?\d+(?:px)?$/i.exec(s);
+    if (!m) {
+      return null;
+    }
+    const n = Number.parseInt(s.replace(/px$/i, ''), 10);
+    return Number.isFinite(n) ? n : null;
+  };
+  const direct = parseNumberLike(values[preferredMode]);
+  if (direct != null) {
     return direct;
   }
   const normalizedPreferred = modeKey(preferredMode) ;
-  if (normalizedPreferred && typeof values[normalizedPreferred] === 'number') {
-    return values[normalizedPreferred];
+  if (normalizedPreferred) {
+    const n = parseNumberLike(values[normalizedPreferred]);
+    if (n != null) {
+      return n;
+    }
   }
   const first = Object.values(values)[0];
-  return typeof first === 'number' ? first : null;
+  return parseNumberLike(first);
 }
 
 /**
@@ -3685,14 +3713,14 @@ function ensureVar(lines, varName, value) {
  *
  * addRem(map, name, n)
  */
-function addRem(map, name, n) {
+function addPx(map, name, n) {
   if (n == null) {
     return;
   }
   if (map.has(name)) {
     return;
   }
-  map.set(name, n === 0 ? '0' : rem(n));
+  map.set(name, n === 0 ? '0' : `${n}px`);
 }
 
 /**
@@ -3716,7 +3744,7 @@ function generateSpacingCss(scales) {
       if (v == null) {
         continue;
       }
-      addRem(map, `--spacing-${kebab$1(tokenKey)}`, v);
+      addPx(map, `--spacing-${kebab$1(tokenKey)}`, v);
     }
   };
 
@@ -3732,7 +3760,7 @@ function generateSpacingCss(scales) {
       continue;
     }
     const k = kebab$1(tokenKey).replace(/^scale-/, '');
-    addRem(map, `--spacing-vertical-${k}`, v);
+    addPx(map, `--spacing-vertical-${k}`, v);
   }
   const lines = Array.from(map.entries()).map(([k, v]) => `  ${k}: ${v};`);
 
@@ -3766,7 +3794,7 @@ function generateBorderCss(scales) {
     if (v == null) {
       continue;
     }
-    addRem(map, `--border-${kebab$1(tokenKey)}`, v);
+    addPx(map, `--border-${kebab$1(tokenKey)}`, v);
   }
   const lines = Array.from(map.entries()).map(([k, v]) => `  ${k}: ${v};`);
 
@@ -3801,6 +3829,7 @@ function generateRadiusCss(scales) {
   const map = new Map();
   let skippedManual = 0;
   let skippedNull = 0;
+  const skippedNullSample = [];
   for (const [tokenKey, token] of Object.entries(input)) {
     const k = kebab$1(tokenKey);
 
@@ -3812,19 +3841,31 @@ function generateRadiusCss(scales) {
     const v = pickNumber(token?.values, 'Mode 1');
     if (v == null) {
       skippedNull++;
+      if (debug && skippedNullSample.length < 8) {
+        const values = token?.values && typeof token.values === 'object' ? token.values : null;
+        skippedNullSample.push({
+          key: tokenKey,
+          type: token?.type ?? null,
+          modes: values ? Object.keys(values).slice(0, 10) : [],
+          valuesSample: values ? Object.fromEntries(Object.entries(values).slice(0, 3)) : null
+        });
+      }
       continue;
     }
-    addRem(map, `--radius-${k}`, v);
+    addPx(map, `--radius-${k}`, v);
   }
   if (debug) {
     console.log('[design-system] radius: emitted =', map.size, '| skipped(manual)=', skippedManual, '| skipped(null)=', skippedNull);
+    if (skippedNullSample.length) {
+      console.log('[design-system] radius: skipped(null) sample =', JSON.stringify(skippedNullSample, null, 2));
+    }
   }
   const lines = Array.from(map.entries()).map(([k, v]) => `  ${k}: ${v};`);
 
   // manual required defaults
   ensureVar(lines, '--radius-0', '0');
   ensureVar(lines, '--radius-circle', '50%');
-  ensureVar(lines, '--radius-rounded', rem(100));
+  ensureVar(lines, '--radius-rounded', '100px');
   return `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n${renderTheme$1(lines)}`;
 }
 
@@ -3975,7 +4016,7 @@ function effectToBoxShadow(effect) {
   const color = rgbaFromColor(effect.color) ?? 'rgba(0 0 0 / 0.25)';
 
   // "x y blur spread color"
-  const len = n => n === 0 ? '0' : rem(n);
+  const len = n => n === 0 ? '0' : `${n}px`;
   return `${len(x)} ${len(y)} ${len(blur)} ${len(spread)} ${color}`;
 }
 

package/package.json

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