@vettvangur/design-system 2.0.60 → 2.0.62

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.
@@ -1759,6 +1763,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 => isFontFamilyKey(k));
+      console.log('[design-system] typography: font-family key sample =', ff.slice(0, 25).join(', '));
+    }
+  }
   const out = {
     families: {},
     weights: {},
@@ -1767,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;
     }
@@ -2103,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;
   }
@@ -2134,6 +2151,37 @@ function normalizeValuesKeys(values) {
   }
   return out;
 }
+function escapeCssSingleQuotedString(value) {
+  return String(value).replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+}
+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 = s.split(',').map(p => p.trim()).filter(Boolean);
+  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.
@@ -2179,8 +2227,8 @@ async function generateFontFamily(variableSet, config) {
 async function generateFile(variables, config) {
   let css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n` + `@theme {\n`;
   for (const [key, token] of Object.entries(variables || {})) {
-    const mobile = token?.values?.mobile;
-    const desktop = token?.values?.desktop;
+    const mobile = formatFontFamilyValue(token?.values?.mobile);
+    const desktop = formatFontFamilyValue(token?.values?.desktop);
     if (mobile != null) {
       css += `  --${key}: ${mobile};\n`;
     }

package/package.json

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