@vettvangur/design-system 2.0.62 → 2.0.63

package/dist/index.js

@@ -2154,6 +2154,34 @@ function normalizeValuesKeys(values) {
 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;
@@ -2164,7 +2192,7 @@ function formatFontFamilyValue(raw) {
   }
 
   // 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 parts = splitFontStack(s);
   const formatted = parts.map(p => {
     // Keep CSS var() and already-quoted values.
     if (/^var\(/.test(p)) {
@@ -2226,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 = formatFontFamilyValue(token?.values?.mobile);
-    const desktop = formatFontFamilyValue(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.62",
+  "version": "2.0.63",
   "description": "",
   "access": "public",
   "type": "module",