@vettvangur/design-system 2.0.61 → 2.0.63

package/dist/index.js

@@ -1725,6 +1725,10 @@ function groupColors(variableSet, collectionKey = 'colour') {
  * @generated
  * @module design-system
  */
+function isFontFamilyKey(key) {
+  // NOTE: accept historical typo "familiy" as well.
+  return key.startsWith('font-family-') || key.startsWith('font-familiy-');
+}
 
 /**
  * Entries.
@@ -1764,7 +1768,7 @@ function groupTypography(variableSet) {
     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-'));
+      const ff = keys.filter(k => isFontFamilyKey(k));
       console.log('[design-system] typography: font-family key sample =', ff.slice(0, 25).join(', '));
     }
   }
@@ -1776,7 +1780,7 @@ function groupTypography(variableSet) {
     other: {}
   };
   for (const [key, token] of entries$1(toks)) {
-    if (key.startsWith('font-family-')) {
+    if (isFontFamilyKey(key)) {
       out.families[key] = token;
       continue;
     }
@@ -2112,6 +2116,10 @@ function normalizeFontKey(rawKey) {
   if (rawKey.startsWith('font-family-')) {
     return rawKey.replace(/^font-family-/, 'font-');
   }
+  // accept common typo
+  if (rawKey.startsWith('font-familiy-')) {
+    return rawKey.replace(/^font-familiy-/, 'font-');
+  }
   if (rawKey.startsWith('font-')) {
     return rawKey;
   }
@@ -2143,6 +2151,65 @@ function normalizeValuesKeys(values) {
   }
   return out;
 }
+function escapeCssSingleQuotedString(value) {
+  return String(value).replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+}
+function splitFontStack(raw) {
+  return String(raw ?? '').split(',').map(p => p.trim()).filter(Boolean);
+}
+function maybeCollapseToBaseFont(raw, {
+  baseTokenKey,
+  baseFamily
+}) {
+  // Collapse "Sharp Grotesk Medium 19" -> var(--font-body) when baseFamily is "Sharp Grotesk".
+  // This keeps projects with a single font family from generating multiple (near-identical) families.
+  // Does not hardcode any specific family name.
+  const v = String(raw ?? '').trim();
+  if (!v || !baseTokenKey || !baseFamily) {
+    return raw;
+  }
+
+  // Avoid changing var() or multi-stack definitions.
+  if (/^var\(/.test(v) || v.includes(',')) {
+    return raw;
+  }
+  const base = String(baseFamily).trim();
+  if (!base) {
+    return raw;
+  }
+  if (v === base || v.startsWith(`${base} `)) {
+    return `var(--${baseTokenKey})`;
+  }
+  return raw;
+}
+function formatFontFamilyValue(raw) {
+  if (raw == null) {
+    return raw;
+  }
+  const s = String(raw).trim();
+  if (!s) {
+    return null;
+  }
+
+  // Allow comma-separated stacks and quote parts that would otherwise be parsed as separate identifiers.
+  const parts = splitFontStack(s);
+  const formatted = parts.map(p => {
+    // Keep CSS var() and already-quoted values.
+    if (/^var\(/.test(p)) {
+      return p;
+    }
+    if (p.startsWith("'") && p.endsWith("'") || p.startsWith('"') && p.endsWith('"')) {
+      return p;
+    }
+
+    // Quote anything containing whitespace or special characters.
+    if (/\s/.test(p) || /[^a-zA-Z0-9_-]/.test(p)) {
+      return `'${escapeCssSingleQuotedString(p)}'`;
+    }
+    return p;
+  });
+  return formatted.join(', ');
+}
 
 /**
  * Generate font family.
@@ -2187,9 +2254,25 @@ async function generateFontFamily(variableSet, config) {
  */
 async function generateFile(variables, config) {
   let css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n` + `@theme {\n`;
+
+  // If a project uses a single font family, designers sometimes encode style/optical size into the
+  // "family" token (e.g. "Sharp Grotesk Medium 19"). For CSS, we usually want a stable family name.
+  // We use the first part of the base token's mobile stack as the canonical family and collapse
+  // other families that match (or start with) it.
+  const baseTokenKey = Object.hasOwn(variables || {}, 'font-body') ? 'font-body' : null;
+  const baseMobileRaw = baseTokenKey ? variables?.[baseTokenKey]?.values?.mobile : null;
+  const baseFamily = baseMobileRaw ? splitFontStack(baseMobileRaw)[0] : null;
   for (const [key, token] of Object.entries(variables || {})) {
-    const mobile = token?.values?.mobile;
-    const desktop = token?.values?.desktop;
+    const mobileRaw = key === baseTokenKey ? token?.values?.mobile : maybeCollapseToBaseFont(token?.values?.mobile, {
+      baseTokenKey,
+      baseFamily
+    });
+    const desktopRaw = key === baseTokenKey ? token?.values?.desktop : maybeCollapseToBaseFont(token?.values?.desktop, {
+      baseTokenKey,
+      baseFamily
+    });
+    const mobile = formatFontFamilyValue(mobileRaw);
+    const desktop = formatFontFamilyValue(desktopRaw);
     if (mobile != null) {
       css += `  --${key}: ${mobile};\n`;
     }

package/package.json

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