@vettvangur/design-system 2.0.24 → 2.0.26

package/dist/index.js

@@ -551,7 +551,7 @@ async function jget(url) {
   throw err;
 }
 
-const toKebab$1 = s => String(s || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+const toKebab = s => String(s || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
 const hex2 = n => n.toString(16).padStart(2, '0');
 function rgba255(c) {
   const a = typeof c?.a === 'number' ? c.a : 1;
@@ -586,14 +586,14 @@ async function fetchVariablesLocal(fileKey) {
     const byCollection = {};
     for (const colId of Object.keys(cols)) {
       const c = cols[colId];
-      const colKey = toKebab$1(c.name);
+      const colKey = toKebab(c.name);
       byCollection[colKey] = {
         id: c.id,
         name: c.name,
         modes: (c.modes || []).map(m => ({
           id: m.modeId,
           name: m.name,
-          key: toKebab$1(m.name)
+          key: toKebab(m.name)
         })),
         tokens: {}
       };
@@ -614,8 +614,8 @@ async function fetchVariablesLocal(fileKey) {
       const v = vars[vId];
       const coll = cols[v.variableCollectionId];
       if (!coll) continue;
-      const colKey = toKebab$1(coll.name);
-      const nameKey = toKebab$1(v.name);
+      const colKey = toKebab(coll.name);
+      const nameKey = toKebab(v.name);
       const token = {
         id: v.id,
         name: v.name,
@@ -644,7 +644,7 @@ async function fetchVariablesLocal(fileKey) {
           modes: (coll.modes || []).map(m => ({
             id: m.modeId,
             name: m.name,
-            key: toKebab$1(m.name)
+            key: toKebab(m.name)
           })),
           tokens: {}
         };
@@ -780,13 +780,13 @@ function emitComponentPropsJson(nodes) {
     const props = {};
     for (const propId of Object.keys(defs)) {
       const def = defs[propId];
-      const key = toKebab$1(def?.name ?? propId);
+      const key = toKebab(def?.name ?? propId);
       props[key] = {
         id: propId,
         ...normalizeComponentPropDef(def)
       };
     }
-    const key = toKebab$1(n.name || n.id);
+    const key = toKebab(n.name || n.id);
     out[key] = {
       id: n.id,
       name: n.name,
@@ -979,7 +979,7 @@ function emitEffectStylesJson(effectMetas, effectNodes) {
     if (list.length) {
       // If meta.name is empty (node-id refs), use node.name
       const displayName = meta.name || n.name || meta.key || meta.node_id;
-      const k = toKebab$1(displayName);
+      const k = toKebab(displayName);
       out[k] = {
         id: meta.key || meta.node_id,
         name: displayName,
@@ -1051,136 +1051,6 @@ async function figmaSource(fileKey) {
   };
 }
 
-// src/tokens/naming.mjs
-function toKebab(s) {
-  return String(s || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
-}
-function toCamel(s) {
-  const raw = String(s || '').trim();
-  if (!raw) return '';
-
-  // If it's already a single token (e.g. "Desktop"), just lowercase the first char.
-  if (!/[^a-zA-Z0-9]/.test(raw)) {
-    return raw.charAt(0).toLowerCase() + raw.slice(1);
-  }
-  const parts = raw.split(/[^a-zA-Z0-9]+/g).filter(Boolean);
-  if (!parts.length) return '';
-  const [first, ...rest] = parts;
-  return first.charAt(0).toLowerCase() + first.slice(1) + rest.map(p => p ? p.charAt(0).toUpperCase() + p.slice(1) : '').join('');
-}
-
-/**
- * Figma token names often come in "Group / Sub / Name" form.
- * Convert to a stable token key path:
- *   "Primary / Blue / 100" -> "primary-blue-100"
- */
-function tokenNameToKey(name) {
-  const raw = String(name || '');
-  // split on common separators but keep it conservative
-  const parts = raw.split('/').map(s => s.trim()).filter(Boolean);
-  if (parts.length) return toKebab(parts.join('-'));
-  return toKebab(raw);
-}
-
-/**
- * Normalize keys inside token "values".
- * - Figma modes like "Mode 1" -> "mode-1" (kebab)
- * - Device-ish keys like "Desktop" / "Mobile" -> "desktop" / "mobile" (camel)
- */
-function valueKeyToKey(name) {
-  const raw = String(name || '').trim();
-  if (!raw) return '';
-
-  // "Mode 1" (or "mode1") must become "mode-1"
-  const m = raw.match(/^mode\s*(\d+)$/i);
-  if (m) return `mode-${m[1]}`;
-
-  // Anything with whitespace is treated like a mode label.
-  if (/\s/.test(raw)) return toKebab(raw);
-
-  // Default: camelCase for simple keys (Desktop/Mobile/etc)
-  return toCamel(raw);
-}
-function collectionNameToKey(name) {
-  return toKebab(name);
-}
-
-function normalizeTokens(figmaCollections) {
-  message('normalizing tokens...');
-  const variables = {};
-  for (const [colKeyRaw, col] of Object.entries(figmaCollections || {})) {
-    const key = collectionNameToKey(col?.name || colKeyRaw);
-    const tokens = {};
-    for (const [tokKeyRaw, t] of Object.entries(col?.tokens || {})) {
-      const tKey = tokenNameToKey(t?.name || tokKeyRaw);
-      const rawValues = t?.values && typeof t.values === 'object' ? t.values : null;
-      const modeNames = rawValues ? Object.keys(rawValues) : [];
-      let values;
-
-      // Single-mode: keep the simple shape you asked for
-      if (!rawValues || modeNames.length <= 1) {
-        const firstValue = rawValues ? rawValues[modeNames[0]] : null;
-        values = normalizeValueByType(t?.type, firstValue);
-      } else {
-        // Multi-mode: keep all columns (Desktop/Tablet/Mobile etc)
-        const map = {};
-        for (const modeName of modeNames) {
-          const modeKey = valueKeyToKey(modeName);
-          map[modeKey] = normalizeValueByType(t?.type, rawValues[modeName]);
-        }
-        values = map;
-      }
-      tokens[tKey] = {
-        id: String(t?.id || ''),
-        key: tKey,
-        name: String(t?.name || ''),
-        type: (/** @type {any} */String(t?.type || 'STRING')),
-        values
-      };
-    }
-    variables[key] = {
-      id: String(col?.id || ''),
-      key,
-      name: String(col?.name || colKeyRaw),
-      tokens
-    };
-  }
-  message('finished normalizing tokens');
-  return {
-    variables
-  };
-}
-function normalizeValueByType(type, v) {
-  const t = String(type || '').toUpperCase();
-  if (t === 'COLOR') {
-    if (v && typeof v === 'object' && v.hex) {
-      return {
-        raw: v,
-        color: v
-      };
-    }
-    return {
-      raw: v ?? null
-    };
-  }
-  if (t === 'BOOLEAN') {
-    return {
-      raw: v ?? null,
-      boolean: typeof v === 'boolean' ? v : null
-    };
-  }
-  if (t === 'FLOAT') {
-    return {
-      raw: v ?? null,
-      number: typeof v === 'number' ? v : null
-    };
-  }
-  return {
-    raw: v ?? null,
-    string: typeof v === 'string' ? v : v != null ? String(v) : null
-  };
-}
-
 /**
  * Return an array of components whose key or name starts with `prefix`.
  * Example: prefix "button-" returns all button-* components.
@@ -1211,7 +1081,7 @@ function groupButtons(components) {
   return buttons;
 }
 
-function entries$3(tokens) {
+function entries$2(tokens) {
   return Object.entries(tokens || {});
 }
 
@@ -1232,24 +1102,30 @@ function entries$3(tokens) {
  */
 function groupColors(variableSet, collectionKey = 'colour') {
   message('grouping colors...');
-  const col = variableSet.colour;
+  // `variableSet` is the object returned by src/figma/index.mjs (byCollection).
+  // Keys are kebab-cased collection names.
+  const col = variableSet?.[collectionKey] || null;
   const toks = col?.tokens || {};
 
   /** @type {Record<string, Record<string, any>>} */
   const out = {};
-  for (const [key, token] of entries$3(toks)) {
+  for (const [key, token] of entries$2(toks)) {
     const parts = String(key).split('-').filter(Boolean);
-    if (parts.length === 0) continue;
+    if (parts.length === 0) {
+      continue;
+    }
     const head = parts[0];
     const tail = parts.slice(1).join('-') || head;
-    if (!out[head]) out[head] = {};
+    if (!out[head]) {
+      out[head] = {};
+    }
     out[head][tail] = token;
   }
   message('finished grouping colors');
   return out;
 }
 
-function entries$2(tokens) {
+function entries$1(tokens) {
   return Object.entries(tokens || {});
 }
 
@@ -1276,7 +1152,7 @@ function groupTypography(variableSet) {
     lineHeights: {},
     other: {}
   };
-  for (const [key, token] of entries$2(toks)) {
+  for (const [key, token] of entries$1(toks)) {
     if (key.startsWith('font-family-')) {
       out.families[key] = token;
       continue;
@@ -1299,7 +1175,7 @@ function groupTypography(variableSet) {
   return out;
 }
 
-function entries$1(tokens) {
+function entries(tokens) {
   return Object.entries(tokens || {});
 }
 function isNumericKey(k) {
@@ -1328,7 +1204,7 @@ function groupScales(variableSet, collectionKey = 'scales') {
 
   /** @type {Record<string, Record<string, any>>} */
   const groups = {};
-  for (const [key, token] of entries$1(toks)) {
+  for (const [key, token] of entries(toks)) {
     const k = String(key);
     if (isNumericKey(k)) {
       other[k] = token;
@@ -1351,38 +1227,6 @@ function groupScales(variableSet, collectionKey = 'scales') {
   };
 }
 
-function entries(obj) {
-  return Object.entries(obj || {});
-}
-function normalizeKey(k) {
-  return String(k).trim().replace(/\s+/g, '-').replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-}
-
-/**
- * Groups only icon components.
- * Output:
- * {
- *   'icon-add': Component,
- *   'icon-search': Component,
- *   ...
- * }
- */
-function groupIcons(componentSet) {
-  message('grouping icons...');
-  const toks = componentSet?.components?.tokens || componentSet?.components || componentSet || {};
-  const icons = {};
-  for (const [rawKey, token] of entries(toks)) {
-    const key = normalizeKey(rawKey);
-    const name = normalizeKey(token?.name);
-    const isIcon = key.startsWith('icon-') || name.startsWith('icon=') || name.startsWith('icon-');
-    if (!isIcon) continue;
-    const iconKey = key.startsWith('icon-') ? key : name.startsWith('icon=') ? `icon-${name.slice('icon='.length)}` : name.startsWith('icon-') ? name : key;
-    icons[iconKey] = token;
-  }
-  message('finished grouping icons');
-  return icons;
-}
-
 function normalizeWeightKey(rawKey) {
   // enforce "font-weight-x"
   if (rawKey.startsWith('font-weight-')) return rawKey;
@@ -1540,12 +1384,12 @@ function pickHex(values, preferredMode) {
   if (!values || typeof values !== 'object') {
     return null;
   }
-  if (preferredMode && values[preferredMode]?.hex) {
+  if (values[preferredMode]?.hex) {
     return values[preferredMode].hex;
   }
 
   // if already normalized upstream
-  if (preferredMode && values[modeKey$1(preferredMode)]?.hex) {
+  if (values[modeKey$1(preferredMode)]?.hex) {
     return values[modeKey$1(preferredMode)].hex;
   }
 
@@ -1554,19 +1398,32 @@ function pickHex(values, preferredMode) {
   return first?.hex ?? null;
 }
 function collectColorVars(variableSet, {
-  includeDefaults = false,
-  preferredMode = 'Mode 1'
+  excludeGroups = []
 } = {}) {
-  const map = new Map();
-  if (includeDefaults) {
-    // Optional legacy colors (kept for backwards compatibility)
-    map.set('--color-transparent', 'transparent');
-    map.set('--color-white', '#fff');
-    map.set('--color-black', '#111');
-    map.set('--color-umbraco-blue', '#283a97');
-    map.set('--color-umbraco-pink', '#f5c1bc');
-  }
+  // Colors not present in Figma variables, 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'
+  }];
+  const seen = new Set(out.map(x => x.varName));
+  const skipGroups = new Set((excludeGroups || []).map(x => kebab$2(x)));
   for (const [groupKey, group] of Object.entries(variableSet ?? {})) {
+    if (skipGroups.has(kebab$2(groupKey))) {
+      continue;
+    }
     if (!group || typeof group !== 'object') {
       continue;
     }
@@ -1574,18 +1431,24 @@ function collectColorVars(variableSet, {
       if (!token || token.type !== 'COLOR') {
         continue;
       }
-      const hex = pickHex(token.values, preferredMode);
+
+      // Prefer "Mode 1" if present, else fallback to first mode
+      const hex = pickHex(token.values, 'Mode 1');
       if (!hex) {
         continue;
       }
       const varName = `--color-${kebab$2(groupKey)}-${kebab$2(tokenKey)}`;
-      map.set(varName, hex);
+      if (seen.has(varName)) {
+        continue;
+      }
+      seen.add(varName);
+      out.push({
+        varName,
+        hex
+      });
     }
   }
-  return Array.from(map, ([varName, hex]) => ({
-    varName,
-    hex
-  }));
+  return out;
 }
 function renderColors(vars) {
   const lines = vars.map(v => `  ${v.varName}: ${v.hex};`);
@@ -1593,11 +1456,9 @@ function renderColors(vars) {
 }
 async function generateColors$1(variableSet, config) {
   message('generating colors...');
-  const includeDefaults = config?.raw?.colors?.includeDefaults ?? false;
-  const preferredMode = config?.raw?.colors?.preferredMode ?? 'Mode 1';
+  const excludeGroups = config?.raw?.colors?.excludeGroups ?? [];
   const vars = collectColorVars(variableSet, {
-    includeDefaults,
-    preferredMode
+    excludeGroups
   });
   const css = '/* AUTO-GENERATED - DO NOT EDIT BY HAND */\n\n' + renderColors(vars);
   const outPath = path.join(config.paths.styles, 'config', 'color.css');
@@ -3048,28 +2909,17 @@ async function pullAndBuild({
   projectName
 }) {
   const raw = await figmaSource(config.figma.fileKey);
-
-  // const outPath = path.join(process.cwd(), 'figma-raw.json')
-
-  normalizeTokens(raw.variables);
-  // await fs.writeFile(
-  //   outPath,
-  //   JSON.stringify(tokens, null, 2),
-  //   'utf8'
-  // )
-
-  const colors = groupColors(raw.variables);
+  const colorCollectionKey = config?.raw?.colors?.collectionKey ?? 'colour';
+  const availableColorCollections = Object.keys(raw.variables || {}).sort().join(', ');
+  message(`colors: using variable collection "${colorCollectionKey}" (available: ${availableColorCollections || 'none'})`);
+  const colors = groupColors(raw.variables, colorCollectionKey);
   const typography = groupTypography(raw.variables);
   const scales = groupScales(raw.variables);
   const buttons = groupButtons(raw.components);
-  groupIcons(raw.components);
 
   // console.log(colors)
 
   await generateTailwind(config, 'razor', typography, buttons, colors, scales, raw.effects);
-
-  // await exportIcons(icons, config.figma.fileKey)
-
   if (target === 'razor') {
     // console.dir(typography, { depth: null, maxArrayLength: null })
 

package/package.json

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