@vettvangur/design-system 2.0.30 → 2.0.32

package/dist/index.js

@@ -1494,8 +1494,12 @@ function normalizeModeKey$1(k) {
 }
 function toTextKey(rawKey) {
   // "font-size-headline-1" -> "text-headline-1"
-  if (rawKey.startsWith('font-size-')) return `text-${rawKey.slice('font-size-'.length)}`;
-  if (rawKey.startsWith('text-')) return rawKey;
+  if (rawKey.startsWith('font-size-')) {
+    return `text-${rawKey.slice('font-size-'.length)}`;
+  }
+  if (rawKey.startsWith('text-')) {
+    return rawKey;
+  }
   return `text-${rawKey}`;
 }
 async function normalizeFontSizes(variableSet) {
@@ -1523,7 +1527,9 @@ function toLeadingKey(rawKey) {
   if (rawKey.startsWith('font-line-height-')) {
     return `leading-${rawKey.slice('font-line-height-'.length)}`;
   }
-  if (rawKey.startsWith('leading-')) return rawKey;
+  if (rawKey.startsWith('leading-')) {
+    return rawKey;
+  }
   return `leading-${rawKey}`;
 }
 async function normalizeLineHeights(variableSet) {
@@ -1551,7 +1557,9 @@ function bodyIndexFromTextKey(k) {
   return m ? m[1] : null;
 }
 function needsDesktopLine$1(values) {
-  if (!values) return false;
+  if (!values) {
+    return false;
+  }
   return values.desktop !== values.mobile;
 }
 function blockForBody(b) {
@@ -1581,13 +1589,25 @@ async function generateBodies(sizes, lineHeights, config) {
   const nlh = await normalizeLineHeights(lineHeights);
   const bodies = [];
   for (const [textKey, fs] of Object.entries(nfs ?? {})) {
-    if (!fs) continue;
-    if (isHeadlineKey$1(textKey)) continue;
+    if (!fs) {
+      continue;
+    }
+    if (isHeadlineKey$1(textKey)) {
+      continue;
+    }
     let lhKey = null;
     const n = bodyIndexFromTextKey(textKey);
-    if (n) lhKey = `leading-body-${n}`;else if (textKey === 'text-blockquote') lhKey = 'leading-blockquote';else continue;
+    if (n) {
+      lhKey = `leading-body-${n}`;
+    } else if (textKey === 'text-blockquote') {
+      lhKey = 'leading-blockquote';
+    } else {
+      continue;
+    }
     const lh = nlh?.[lhKey];
-    if (!lh) continue;
+    if (!lh) {
+      continue;
+    }
     bodies.push({
       key: textKey.replace(/^text-/, ''),
       // body-1 | body-2 | ... | blockquote
@@ -1617,7 +1637,9 @@ function headlineIndexFromTextKey(k) {
   return m ? m[1] : null;
 }
 function needsDesktopLine(values) {
-  if (!values) return false;
+  if (!values) {
+    return false;
+  }
   return values.desktop !== values.mobile;
 }
 function blockForHeadline(h) {
@@ -1650,13 +1672,21 @@ async function generateHeadlines(sizes, lineHeights, config) {
   const nlh = await normalizeLineHeights(lineHeights);
   const headlines = [];
   for (const [textKey, fs] of Object.entries(nfs ?? {})) {
-    if (!fs) continue;
-    if (!isHeadlineKey(textKey)) continue;
+    if (!fs) {
+      continue;
+    }
+    if (!isHeadlineKey(textKey)) {
+      continue;
+    }
     const n = headlineIndexFromTextKey(textKey);
-    if (!n) continue;
+    if (!n) {
+      continue;
+    }
     const lhKey = `leading-headline-${n}`;
     const lh = nlh?.[lhKey];
-    if (!lh) continue;
+    if (!lh) {
+      continue;
+    }
     headlines.push({
       key: textKey.replace(/^text-/, ''),
       // headline-1 | headline-2 | ...
@@ -1678,11 +1708,30 @@ async function generateHeadlines(sizes, lineHeights, config) {
   message(`finished generating (${headlines.length}) headline utilities`);
 }
 
+function rem(px) {
+  const n = Number(px);
+  if (!Number.isFinite(n)) {
+    return String(px);
+  }
+  if (n === 0) {
+    return '0';
+  }
+  const v = n / 16;
+  // Keep output stable and readable (no long floats)
+  const rounded = Math.round(v * 1000000) / 1000000;
+  return `${rounded}rem`;
+}
+
 async function renderTypography(tokens, config) {
-  let css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n` + `@theme {\n` + `  --text-0: 0px;\n` + `  --text-full: 100%;\n` + `  --leading-0: 0px;\n` + `  --leading-full: 100%;\n`;
+  let css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n` + `@theme {\n` + `  --text-0: 0;\n` + `  --text-full: 100%;\n` + `  --leading-0: 0;\n` + `  --leading-full: 100%;\n`;
   const emit = (key, value) => {
-    if (value == null) return;
-    if (typeof value === 'number') return `  --${key}: ${value}px;\n`;
+    if (value == null) {
+      return;
+    }
+    if (typeof value === 'number') {
+      const v = value === 0 ? '0' : rem(value);
+      return `  --${key}: ${v};\n`;
+    }
     return `  --${key}: ${String(value)};\n`; // already has units
   };
   for (const [key, token] of Object.entries(tokens || {})) {
@@ -1716,9 +1765,13 @@ function modeKey(raw) {
   return kebab$1(raw);
 }
 function pickNumber(values, preferredMode) {
-  if (!values || typeof values !== 'object') return null;
+  if (!values || typeof values !== 'object') {
+    return null;
+  }
   const direct = values[preferredMode];
-  if (typeof direct === 'number') return direct;
+  if (typeof direct === 'number') {
+    return direct;
+  }
   const normalizedPreferred = modeKey(preferredMode) ;
   if (normalizedPreferred && typeof values[normalizedPreferred] === 'number') {
     return values[normalizedPreferred];
@@ -1731,22 +1784,30 @@ function renderTheme$1(lines) {
 }
 function ensureVar(lines, varName, value) {
   const exists = lines.some(l => l.startsWith(`  ${varName}:`));
-  if (!exists) lines.unshift(`  ${varName}: ${value};`);
+  if (!exists) {
+    lines.unshift(`  ${varName}: ${value};`);
+  }
 }
 
 // Hoisted: unit policy lives here
-function addPx(map, name, n) {
-  if (n == null) return;
-  if (map.has(name)) return;
-  map.set(name, n === 0 ? '0' : `${n}px`);
+function addRem(map, name, n) {
+  if (n == null) {
+    return;
+  }
+  if (map.has(name)) {
+    return;
+  }
+  map.set(name, n === 0 ? '0' : rem(n));
 }
 function generateSpacingCss(scales) {
   const map = new Map();
   const takeNumericGroup = group => {
     for (const [tokenKey, token] of Object.entries(group || {})) {
       const v = pickNumber(token?.values, 'Mode 1');
-      if (v == null) continue;
-      addPx(map, `--spacing-${kebab$1(tokenKey)}`, v);
+      if (v == null) {
+        continue;
+      }
+      addRem(map, `--spacing-${kebab$1(tokenKey)}`, v);
     }
   };
 
@@ -1758,9 +1819,11 @@ function generateSpacingCss(scales) {
   // vertical: scale-60 -> vertical-60
   for (const [tokenKey, token] of Object.entries(scales?.vertical || {})) {
     const v = pickNumber(token?.values, 'Mode 1');
-    if (v == null) continue;
+    if (v == null) {
+      continue;
+    }
     const k = kebab$1(tokenKey).replace(/^scale-/, '');
-    addPx(map, `--spacing-vertical-${k}`, v);
+    addRem(map, `--spacing-vertical-${k}`, v);
   }
   const lines = Array.from(map.entries()).map(([k, v]) => `  ${k}: ${v};`);
 
@@ -1776,8 +1839,10 @@ function generateBorderCss(scales) {
   const map = new Map();
   for (const [tokenKey, token] of Object.entries(scales?.border || {})) {
     const v = pickNumber(token?.values, 'Mode 1');
-    if (v == null) continue;
-    addPx(map, `--border-${kebab$1(tokenKey)}`, v);
+    if (v == null) {
+      continue;
+    }
+    addRem(map, `--border-${kebab$1(tokenKey)}`, v);
   }
   const lines = Array.from(map.entries()).map(([k, v]) => `  ${k}: ${v};`);
 
@@ -1791,17 +1856,21 @@ function generateRadiusCss(scales) {
     const k = kebab$1(tokenKey);
 
     // skip these entirely (manual vars below)
-    if (k === 'round' || k === 'circle') continue;
+    if (k === 'round' || k === 'circle') {
+      continue;
+    }
     const v = pickNumber(token?.values, 'Mode 1');
-    if (v == null) continue;
-    addPx(map, `--radius-${k}`, v);
+    if (v == null) {
+      continue;
+    }
+    addRem(map, `--radius-${k}`, v);
   }
   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', '100px');
+  ensureVar(lines, '--radius-rounded', rem(100));
   return `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n` + renderTheme$1(lines);
 }
 async function generateScales(variableSet, config) {
@@ -1825,7 +1894,9 @@ function kebab(s) {
 function toShadowKey(rawKey) {
   // enforce "shadow-x"
   const k = kebab(rawKey);
-  if (k.startsWith('shadow-')) return k;
+  if (k.startsWith('shadow-')) {
+    return k;
+  }
   return `shadow-${k}`;
 }
 function rgbaFromColor(color) {
@@ -1844,7 +1915,9 @@ function rgbaFromColor(color) {
   const hex = String(color?.hex ?? '').trim();
   // supports #RRGGBB or #RRGGBBAA
   const m = hex.match(/^#?([0-9a-f]{6})([0-9a-f]{2})?$/i);
-  if (!m) return null;
+  if (!m) {
+    return null;
+  }
   const rgb = m[1];
   const aa = m[2];
   const rr = parseInt(rgb.slice(0, 2), 16);
@@ -1854,7 +1927,9 @@ function rgbaFromColor(color) {
   return `rgba(${rr} ${gg} ${bb} / ${alpha})`;
 }
 function effectToBoxShadow(effect) {
-  if (!effect || effect.kind !== 'DROP_SHADOW') return null;
+  if (!effect || effect.kind !== 'DROP_SHADOW') {
+    return null;
+  }
   const x = Number(effect.offset?.x ?? 0);
   const y = Number(effect.offset?.y ?? 0);
   const blur = Number(effect.radius ?? 0);
@@ -1862,13 +1937,16 @@ function effectToBoxShadow(effect) {
   const color = rgbaFromColor(effect.color) ?? 'rgba(0 0 0 / 0.25)';
 
   // "x y blur spread color"
-  return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+  const len = n => n === 0 ? '0' : rem(n);
+  return `${len(x)} ${len(y)} ${len(blur)} ${len(spread)} ${color}`;
 }
 function buildShadowValue(effects) {
   const parts = [];
   for (const e of effects || []) {
     const s = effectToBoxShadow(e);
-    if (s) parts.push(s);
+    if (s) {
+      parts.push(s);
+    }
   }
   return parts.length ? parts.join(', ') : null;
 }
@@ -1881,7 +1959,9 @@ async function generateShadows(variableSet, config) {
   for (const [rawKey, token] of Object.entries(variableSet || {})) {
     const key = toShadowKey(rawKey);
     const value = buildShadowValue(token?.effects);
-    if (!value) continue;
+    if (!value) {
+      continue;
+    }
     lines.push(`  --${key}: ${value};`);
   }
   const css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n` + renderTheme(lines);
@@ -1893,17 +1973,17 @@ async function generateShadows(variableSet, config) {
 const BREAKPOINTS_CSS = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */
 
 @theme {
-  --breakpoint-phone-xs: 0px;
-  --breakpoint-phone-s: 321px;
-  --breakpoint-phone-m: 426px;
-  --breakpoint-tablet: 576px;
-  --breakpoint-desktop-xs: 775px;
-  --breakpoint-desktop-s: 992px;
-  --breakpoint-desktop-m: 1200px;
-  --breakpoint-desktop-l: 1280px;
-  --breakpoint-desktop-xl: 1367px;
-  --breakpoint-desktop-xxl: 1740px;
-  --breakpoint-ultrawide: 2000px;
+  --breakpoint-phone-xs: ${rem(0)};
+  --breakpoint-phone-s: ${rem(321)};
+  --breakpoint-phone-m: ${rem(426)};
+  --breakpoint-tablet: ${rem(576)};
+  --breakpoint-desktop-xs: ${rem(775)};
+  --breakpoint-desktop-s: ${rem(992)};
+  --breakpoint-desktop-m: ${rem(1200)};
+  --breakpoint-desktop-l: ${rem(1280)};
+  --breakpoint-desktop-xl: ${rem(1367)};
+  --breakpoint-desktop-xxl: ${rem(1740)};
+  --breakpoint-ultrawide: ${rem(2000)};
 }
 `;
 async function generateScreens(config) {
@@ -2880,7 +2960,7 @@ async function generateNavigation(config, outpath) {
 function renderDesignSystemViewCshtml(projectName) {
   return `@* AUTO-GENERATED - DO NOT EDIT BY HAND *@
 @{
-    Layout = "Master.cshtml";
+    Layout = "${ProjectName}Master.cshtml";
     // This template will used later, right now users are redirected to /design-system/colors
 }
 <section class="ds">

package/package.json

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