@vettvangur/design-system 2.0.13 → 2.0.14

package/dist/index.js

@@ -2128,10 +2128,13 @@ function renderColorsCshtml(colors, projectName) {
     const items = Object.entries(group || {}).filter(([, token]) => token?.type === 'COLOR').map(([tokenKey]) => {
       const colorTitle = titleizeColor(categoryKey, tokenKey);
 
-      // Tailwind utility name (maps to --color-*)
+      // CSS variable name
       const colorKey = `color-${categoryKey}-${tokenKey}`;
+
+      // Tailwind utility name (maps to --color-*)
+      const swatchKey = `${categoryKey}-${tokenKey}`;
       return `            <div class="ds-color">
-                <div class="ds-color__swatch bg-${colorKey}"></div>
+                <div class="ds-color__swatch bg-${swatchKey}"></div>
                 <div class="ds-color__meta">
                     <div class="ds-color__name">${colorTitle}</div>
                     <div class="ds-color__var">--${colorKey}</div>
@@ -2274,6 +2277,23 @@ function renderEntry(id, entry) {
   const mSize = getValue(entry.size, 'Mobile');
   const mLine = getValue(entry.lineHeight, 'Mobile');
   const mFamily = getValue(entry.family, 'Mobile');
+  const hasDesktopVariant = dSize != null && dLine != null && dFamily != null && (dSize !== mSize || dLine !== mLine || dFamily !== mFamily);
+  const defaultSize = hasDesktopVariant ? dSize : mSize;
+  const defaultLine = hasDesktopVariant ? dLine : mLine;
+  const defaultFamily = hasDesktopVariant ? dFamily : mFamily;
+  const renderMeta = (family, size, line) => {
+    const lines = [];
+    if (family != null) {
+      lines.push(`<div><strong>Font</strong> ${family}</div>`);
+    }
+    if (size != null) {
+      lines.push(`<div><strong>Size</strong> ${size}px</div>`);
+    }
+    if (line != null) {
+      lines.push(`<div><strong>Line height</strong> ${line}px</div>`);
+    }
+    return lines.join('\n                ');
+  };
   return `
         <div class="ds-type-card">
             <div class="ds-type-preview">
@@ -2281,22 +2301,19 @@ ${renderPreview(id, title)}
             </div>
 
             <div class="ds-type-meta">
-                <div><strong>Font</strong> ${dFamily}</div>
-                <div><strong>Size</strong> ${dSize}px</div>
-                <div><strong>Line height</strong> ${dLine}px</div>
+                ${renderMeta(defaultFamily, defaultSize, defaultLine)}
             </div>
 
+            ${hasDesktopVariant ? `
             <div class="ds-type-mobile">
                 <div class="ds-type-preview">
-${renderPreview(id, title)}
+ ${renderPreview(id, title)}
                 </div>
 
                 <div class="ds-type-meta">
-                    <div><strong>Font</strong> ${mFamily}</div>
-                    <div><strong>Size</strong> ${mSize}px</div>
-                    <div><strong>Line height</strong> ${mLine}px</div>
+                    ${renderMeta(mFamily, mSize, mLine)}
                 </div>
-            </div>
+            </div>` : ''}
         </div>`;
 }
 

package/package.json

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