@vettvangur/design-system 2.0.12 → 2.0.14

package/dist/index.js

@@ -2062,7 +2062,7 @@ function renderButtonsCshtml(buttons, projectName) {
     const key = b.key;
     const title = titleizeButton(key);
     return `            <div class="ds-button-wrap">
-                <vv-headline text="${title}" size="2" modifier="headline-2" />
+                <vv-headline text="${title}" size="@HeadlineSize.H2" modifier="headline-2" />
                 <vv-button
                     identifier="ds__button"
                     modifier="${key}"
@@ -2091,7 +2091,7 @@ function renderButtonsCshtml(buttons, projectName) {
         <vv-headline
             identifier="ds-title"
             modifier="headline-2"
-            size="2"
+            size="@HeadlineSize.H2"
             text="Buttons"
         />
 
@@ -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>
@@ -2139,7 +2142,7 @@ function renderColorsCshtml(colors, projectName) {
             </div>`;
     }).join('\n');
     return `        <section class="ds-color-group">
-            <vv-headline text="${categoryTitle}" size="2" modifier="headline-2" />
+            <vv-headline text="${categoryTitle}" size="@HeadlineSize.H2" modifier="headline-2" />
             <div class="ds-color-grid">
 ${items}
             </div>
@@ -2158,7 +2161,7 @@ ${items}
     <vv-headline
         identifier="ds-title"
         modifier="headline-2"
-        size="2"
+        size="@HeadlineSize.H2"
         text="Colors"
     />
 
@@ -2179,8 +2182,8 @@ async function generateColors(colors, config, outpath, projectName) {
   message('finished generating colors');
 }
 
-/* ---------------------------------------------
- * helpers
+/* ---------------------------------------------
+ * helpers
  * ------------------------------------------- */
 
 function titleCase(str) {
@@ -2197,8 +2200,8 @@ function isHeadline(id) {
   return id.startsWith('headline-');
 }
 
-/* ---------------------------------------------
- * normalize typography into semantic entries
+/* ---------------------------------------------
+ * normalize typography into semantic entries
  * ------------------------------------------- */
 
 function buildEntries({
@@ -2228,8 +2231,8 @@ function buildEntries({
   return map;
 }
 
-/* ---------------------------------------------
- * category resolution
+/* ---------------------------------------------
+ * category resolution
  * ------------------------------------------- */
 
 function resolveCategory(id) {
@@ -2242,8 +2245,8 @@ function resolveCategory(id) {
   return null;
 }
 
-/* ---------------------------------------------
- * preview render
+/* ---------------------------------------------
+ * preview render
  * ------------------------------------------- */
 
 function renderPreview(id, title) {
@@ -2252,7 +2255,7 @@ function renderPreview(id, title) {
             <vv-headline
                 identifier="ds-preview-headline"
                 text="${title}"
-                size="2"
+                size="@HeadlineSize.H2"
                 modifier="${id}"
             />`;
   }
@@ -2262,8 +2265,8 @@ function renderPreview(id, title) {
             </p>`;
 }
 
-/* ---------------------------------------------
- * entry render
+/* ---------------------------------------------
+ * entry render
  * ------------------------------------------- */
 
 function renderEntry(id, entry) {
@@ -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,33 +2301,30 @@ ${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>`;
 }
 
-/* ---------------------------------------------
- * category render
+/* ---------------------------------------------
+ * category render
  * ------------------------------------------- */
 
 function renderCategory(title, entries) {
   return `
     <section class="ds-type-category">
-        <vv-headline text="${title}" size="3" modifier="headline-2" />
+        <vv-headline text="${title}" size="@HeadlineSize.H2" modifier="headline-2" />
 
         <div class="ds-type-grid">
 ${entries.join('\n')}
@@ -2315,8 +2332,8 @@ ${entries.join('\n')}
     </section>`;
 }
 
-/* ---------------------------------------------
- * main render
+/* ---------------------------------------------
+ * main render
  * ------------------------------------------- */
 
 function renderTypographyCshtml(data, projectName) {
@@ -2346,7 +2363,7 @@ function renderTypographyCshtml(data, projectName) {
         <vv-headline
             identifier="ds-title"
             modifier="headline-1"
-            size="2"
+            size="@HeadlineSize.H2"
             text="Typography"
         />
 
@@ -2356,8 +2373,8 @@ ${sections}
 </section>`;
 }
 
-/* ---------------------------------------------
- * public API
+/* ---------------------------------------------
+ * public API
  * ------------------------------------------- */
 
 async function generateTypography(typography, config, outpath, projectName) {
@@ -2384,7 +2401,7 @@ function renderTablesCshtml(projectName) {
     <vv-headline
         identifier="ds__headline"
         modifier="headline-2"
-        size="2"
+        size="@HeadlineSize.H2"
         text="Tables"
     />
 
@@ -2441,6 +2458,7 @@ function renderRichtextCshtml(projectName) {
         <vv-headline
             identifier="ds__headline"
             modifier="headline-2"
+            size="@HeadlineSize.H2"
             text="Richtext"
         />
 
@@ -2547,6 +2565,7 @@ function renderSection({
         <vv-headline
           identifier="ds__headline"
           modifier="headline-2"
+          size="@HeadlineSize.H2"
           text="${escapeAttr(title)}"
         />
 `;
@@ -2841,6 +2860,7 @@ ${razorPrelude}
     <vv-headline
       identifier="ds__headline"
       modifier="headline-2"
+      size="@HeadlineSize.H2"
       text="Inputs"
     />
 

package/package.json

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