@vettvangur/design-system 2.0.20 → 2.0.22

package/dist/index.js

@@ -1537,24 +1537,55 @@ function modeKey$1(raw) {
   return kebab$2(raw);
 }
 function pickHex(values, preferredMode) {
-  if (!values || typeof values !== 'object') return null;
-  if (values[preferredMode]?.hex) return values[preferredMode].hex;
-  if (values[modeKey$1(preferredMode)]?.hex) return values[modeKey$1(preferredMode)].hex; // if already normalized upstream
+  if (!values || typeof values !== 'object') {
+    return null;
+  }
+  if (values[preferredMode]?.hex) {
+    return values[preferredMode].hex;
+  }
+
+  // if already normalized upstream
+  if (values[modeKey$1(preferredMode)]?.hex) {
+    return values[modeKey$1(preferredMode)].hex;
+  }
 
   // fallback: first entry
   const first = Object.values(values)[0];
   return first?.hex ?? null;
 }
 function collectColorVars(variableSet) {
-  const out = [];
+  // Colors not present in Figma, but required by consumers.
+  // These must come first in the generated output.
+  const out = [{
+    varName: '--color-transparent',
+    hex: 'transparent'
+  }, {
+    varName: '--color-white',
+    hex: '#fff'
+  }, {
+    varName: '--color-black',
+    hex: '#111'
+  }, {
+    varName: '--color-umbraco-blue',
+    hex: '#283a97'
+  }, {
+    varName: '--color-umbraco-pink',
+    hex: '#f5c1bc'
+  }];
   for (const [groupKey, group] of Object.entries(variableSet ?? {})) {
-    if (!group || typeof group !== 'object') continue;
+    if (!group || typeof group !== 'object') {
+      continue;
+    }
     for (const [tokenKey, token] of Object.entries(group)) {
-      if (!token || token.type !== 'COLOR') continue;
+      if (!token || token.type !== 'COLOR') {
+        continue;
+      }
 
       // Prefer "Mode 1" if present, else fallback to first mode
       const hex = pickHex(token.values, 'Mode 1');
-      if (!hex) continue;
+      if (!hex) {
+        continue;
+      }
       const varName = `--color-${kebab$2(groupKey)}-${kebab$2(tokenKey)}`;
       out.push({
         varName,
@@ -1571,7 +1602,7 @@ function renderColors(vars) {
 async function generateColors$1(variableSet, config) {
   message('generating colors...');
   const vars = collectColorVars(variableSet);
-  const css = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n` + renderColors(vars);
+  const css = '/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n' + renderColors(vars);
   const outPath = path.join(config.paths.styles, 'config', 'color.css');
   await fs$1.writeFile(outPath, css, 'utf8');
   message(`finished generating (${vars.length}) colors`);
@@ -2337,7 +2368,7 @@ function renderCategory(title, entries) {
 
     <section class="ds-type-category">
 
-        <vv-headline text="${title}" size="@HeadlineSize.H2" modifier="headline-2" />
+        <vv-headline identifier="ds-type-category__title" text="${title}" size="@HeadlineSize.H2" modifier="headline-2" />
 
 
 

package/package.json

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