@vettvangur/design-system 1.0.1 → 1.0.2

package/dist/generate-tailwind-DQMJ7rRw.js

@@ -0,0 +1,242 @@
+#!/usr/bin/env node
+import fs from 'node:fs/promises';
+import { constants } from 'node:fs';
+import path from 'node:path';
+import chalk from 'chalk';
+import { p as paths } from './index.esm.js';
+import { p as parseButtons } from './buttons-o2a9tpOe.js';
+import 'node:process';
+import 'boxen';
+import 'fs';
+import 'path';
+import 'os';
+import 'crypto';
+import 'node:url';
+
+const tag = chalk.cyan('[design-system]');
+
+/*
+  * This needs to genrate:
+  * variables:
+    * color.css
+    * font.css
+    * radius.css
+    * shadow.css
+    * typography.css
+  * core:
+    * body.css
+    * headline.css
+*/
+
+async function generateTailwind(type, figmaStyles) {
+  console.log(`${tag} starting tailwind generation...`);
+  await generateColors(figmaStyles.paint);
+  await generateTypography(figmaStyles.text);
+
+  // core utilities
+  await generateBodies(figmaStyles.text);
+  await generateHeadlines(figmaStyles.text);
+  await generateButtons(figmaStyles);
+  console.log(`${tag} finished tailwind generation`);
+}
+
+// ------- VARIABLES -------
+async function generateColors(data) {
+  console.log(`${tag} generating colors...`);
+  const outDir = path.join(paths.styles, 'config');
+  await fs.mkdir(outDir, {
+    recursive: true
+  });
+  const lines = [];
+  for (const [key, entry] of Object.entries(data ?? {})) {
+    const paints = entry?.paints ?? [];
+    const p = paints[0] ?? {};
+    // exporter already normalizes; prefer .hex/.value, else stringify fallback
+    const value = (p.hex && String(p.hex)) ?? (p.value && String(p.value)) ?? (p.css && String(p.css)) ?? String(p);
+    if (!value) {
+      continue;
+    }
+    lines.push(`  --color-${key}: ${value};`);
+  }
+  const css = `/* Auto-generated. Do not edit by hand. */
+@theme {
+${lines.join('\n')}
+}
+`;
+  const filePath = path.join(outDir, 'color.css');
+  await fs.writeFile(filePath, css, 'utf8');
+  console.log(`${tag} finished generating colors`);
+}
+async function generateButtons(figma) {
+  console.log(`${tag} generating buttons...`);
+  const outDir = path.join(paths.styles, "core");
+  const outFile = path.join(outDir, "button-variants.css");
+
+  // If file already exists, skip generation
+  try {
+    await fs.access(outFile, constants.F_OK);
+    console.log(`${tag} button-variants.css already exists, skipping`);
+    return;
+  } catch {
+    // access threw -> file does not exist, continue
+  }
+  const getButtons = await parseButtons(figma);
+  const buttons = getButtons.map(b => `@utility ${b} {
+  @apply button;
+
+}`).join("\n\n");
+  const out = `/* Auto-generated. Do not edit by hand. */
+${buttons}
+`;
+  await fs.writeFile(outFile, out, "utf8");
+  console.log(`${tag} finished generating buttons`);
+}
+async function generateTypography(data) {
+  console.log(`${tag} generating typography...`);
+  const outDir = path.join(paths.styles, 'config');
+  await fs.mkdir(outDir, {
+    recursive: true
+  });
+  const lines = [];
+  for (const [key, entry] of Object.entries(data ?? {})) {
+    if (!entry || typeof entry !== 'object') {
+      console.log(`${tag} [typography] skip "${key}" – entry is not an object`, entry);
+      continue;
+    }
+    const fontSize = entry.fontSize;
+    const lh = entry.lineHeight ?? {};
+    const lhVal = lh && typeof lh === 'object' ? lh.value : undefined;
+    const lhUnit = lh && typeof lh === 'object' ? lh.unit ?? '' : '';
+    const hasFontSize = typeof fontSize === 'number' && !Number.isNaN(fontSize);
+    const hasLineHeight = typeof lhVal === 'number' && !Number.isNaN(lhVal) && lhUnit !== '';
+    if (!hasFontSize && !hasLineHeight) {
+      // This will tell you exactly which keys are coming in “empty”
+      console.log(`${tag} [typography] "${key}" has no usable fontSize/lineHeight`, {
+        fontSize,
+        lineHeight: lh
+      });
+      continue;
+    }
+    if (hasFontSize) {
+      lines.push(`  --text-${key}: ${fontSize}px;`);
+    }
+    if (hasLineHeight) {
+      lines.push(`  --leading-${key}: ${lhVal}${lhUnit};`);
+    }
+  }
+  const css = `/* Auto-generated. Do not edit by hand. */
+@theme {
+${lines.join('\n')}
+}
+`;
+  const filePath = path.join(outDir, 'typography.css');
+  await fs.writeFile(filePath, css, 'utf8');
+  console.log(`${tag} finished generating typography`);
+}
+
+// ------- CORE (fixed grouping incl. semibold) -------
+
+async function generateBodies(textMap = {}) {
+  console.log(`${tag} generating bodies...`);
+  const outDir = path.join(paths.styles, 'core');
+  await fs.mkdir(outDir, {
+    recursive: true
+  });
+  const keys = Object.keys(textMap || {}).filter(k => k.startsWith('body-'));
+
+  // Normalize base: remove a single "mobile" segment after "body-"
+  function baseKey(k) {
+    const parts = k.split('-');
+    const idx = parts.indexOf('mobile');
+    if (idx !== -1) parts.splice(idx, 1);
+    return parts.join('-');
+  }
+
+  /** @type {Map<string,{desktop:string|null,mobile:string|null}>} */
+  const groups = new Map();
+  for (const k of keys) {
+    const base = baseKey(k);
+    const g = groups.get(base) ?? {
+      desktop: null,
+      mobile: null
+    };
+    if (k.includes('-mobile-')) g.mobile = k;else g.desktop = k;
+    groups.set(base, g);
+  }
+  const blocks = [];
+  for (const [base, {
+    desktop,
+    mobile
+  }] of [...groups.entries()].sort()) {
+    const hasMobile = !!mobile;
+    const hasDesktop = !!desktop;
+    const mobileRef = hasMobile ? mobile : desktop;
+    const desktopUpgrade = hasMobile && hasDesktop ? `\n  @apply desktop-xs:text-${desktop} desktop-xs:leading-${desktop};` : ``;
+
+    // collapse “body-body-x” → “body-x”
+    const isDouble = base.startsWith('body-body-');
+    const utilName = isDouble ? base.replace(/^body-body-/, 'body-') : base;
+
+    // main utility
+    blocks.push(`@utility ${utilName} {
+  @apply text-${mobileRef} leading-${mobileRef};${desktopUpgrade}
+}`);
+
+    // only add numeric alias if no collapse happened
+    if (!isDouble) {
+      const m = /^body-body-(\d+)$/i.exec(base);
+      if (m) {
+        const n = m[1];
+        blocks.push(`@utility body-${n} {
+  @apply text-${mobileRef} leading-${mobileRef};${desktopUpgrade}
+}`);
+      }
+    }
+  }
+  const out = `/* Auto-generated. Do not edit by hand. */
+${blocks.join('\n\n')}
+`;
+  await fs.writeFile(path.join(outDir, 'body.css'), out, 'utf8');
+  console.log(`${tag} finished generating bodies`);
+}
+async function generateHeadlines(textMap = {}) {
+  console.log(`${tag} generating headlines...`);
+  const outDir = path.join(paths.styles, 'core');
+  await fs.mkdir(outDir, {
+    recursive: true
+  });
+  const keys = Object.keys(textMap || {}).filter(k => k.startsWith('headline-'));
+
+  // collect ids present in either mobile or desktop
+  const ids = new Set();
+  for (const k of keys) {
+    let m = /^headline-h(\d+)$/i.exec(k);
+    if (m) {
+      ids.add(+m[1]);
+      continue;
+    }
+    m = /^headline-mobile-h(\d+)$/i.exec(k);
+    if (m) {
+      ids.add(+m[1]);
+      continue;
+    }
+  }
+  const blocks = [];
+  for (const n of [...ids].sort((a, b) => a - b)) {
+    const mobileKey = keys.includes(`headline-mobile-h${n}`) ? `headline-mobile-h${n}` : `headline-h${n}`;
+    const hasDesktop = keys.includes(`headline-h${n}`);
+    const desktopKey = hasDesktop ? `headline-h${n}` : null;
+    const desktopUpgrade = hasDesktop ? `\n  @apply desktop-xs:text-${desktopKey} desktop-xs:leading-${desktopKey};` : ``;
+    blocks.push(`@utility headline-h${n} {
+  @apply text-${mobileKey} leading-${mobileKey};
+  @apply font-default;${desktopUpgrade}
+}`);
+  }
+  const out = `/* Auto-generated. Do not edit by hand. */
+${blocks.join('\n\n')}
+`;
+  await fs.writeFile(path.join(outDir, 'headline.css'), out, 'utf8');
+  console.log(`${tag} finished generating headlines`);
+}
+
+export { generateTailwind as default, generateTailwind };

package/dist/index.esm.js

@@ -1131,7 +1131,7 @@ async function readFigma() {
   try {
     const {
       default: generateTailwind
-    } = await import('./generate-tailwind-yIoMdo1g.js');
+    } = await import('./generate-tailwind-DQMJ7rRw.js');
     const figma = await readFigma();
     switch (cmd) {
       case 'astro':

package/package.json

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