@vettvangur/design-system 2.0.35 → 2.0.37

package/dist/index.js

@@ -3523,61 +3523,95 @@ async function generateShadows(variableSet, config) {
   message(`finished generating shadows (${lines.length})`);
 }
 
-/**
- * design-system :: src/generators/tailwind/screens.mjs.
- *
- * Design token tooling: pulls from Figma and generates platform outputs (Razor/Astro/Tailwind).
- *
- * These docs are generated from inline JSDoc in the repo and are intended for contributors.
- *
- * @generated
- * @module design-system
- */
-const
-/**
-* BREAKPOINTS CSS.
-*
-* @generated
-* @example
-* console.log(BREAKPOINTS_CSS)
-*/
-BREAKPOINTS_CSS = `/* AUTO-GENERATED - DO NOT EDIT BY HAND */
-
-@theme {
-  --breakpoint-phone-xs: ${rem(0)};
-  --breakpoint-phone-s: ${rem(321)};
-  --breakpoint-phone-m: ${rem(426)};
-  --breakpoint-tablet: ${rem(576)};
-  --breakpoint-desktop-xs: ${rem(775)};
-  --breakpoint-desktop-s: ${rem(992)};
-  --breakpoint-desktop-m: ${rem(1200)};
-  --breakpoint-desktop-l: ${rem(1280)};
-  --breakpoint-desktop-xl: ${rem(1367)};
-  --breakpoint-desktop-xxl: ${rem(1740)};
-  --breakpoint-ultrawide: ${rem(2000)};
+/**
+ * design-system :: src/generators/tailwind/screens.mjs.
+ *
+ * Design token tooling: pulls from Figma and generates platform outputs (Razor/Astro/Tailwind).
+ *
+ * These docs are generated from inline JSDoc in the repo and are intended for contributors.
+ *
+ * @generated
+ * @module design-system
+ */
+const BASE_SCREENS = {
+  'phone-xs': 0,
+  'phone-s': 321,
+  'phone-m': 426,
+  tablet: 576,
+  'desktop-xs': 775,
+  'desktop-s': 992,
+  'desktop-m': 1200,
+  'desktop-l': 1280,
+  'desktop-xl': 1367,
+  'desktop-xxl': 1740,
+  ultrawide: 2000
+};
+function pickFirstNumber(values) {
+  if (!values || typeof values !== 'object') {
+    return null;
+  }
+  for (const v of Object.values(values)) {
+    if (typeof v === 'number' && Number.isFinite(v)) {
+      return v;
+    }
+  }
+  return null;
 }
-`;
-
-/**
- * Generate screens.
- *
- * @param config - Configuration object.
- * @returns Nothing.
- *
- * @example
- * // design-system (src/tools/javascript/design-system/src/generators/tailwind/screens.mjs)
- * // import { generateScreens } from '@vettvangur/design-system'
- *
- * await generateScreens({})
- */
-async function generateScreens(config) {
+function buildScreensCss(extra = {}) {
+  const merged = {
+    ...BASE_SCREENS,
+    ...extra
+  };
+  const keys = Object.keys(merged).sort((a, b) => a.localeCompare(b, 'en'));
+  const lines = ['/* AUTO-GENERATED - DO NOT EDIT BY HAND */', '', '@theme {'];
+  for (const key of keys) {
+    lines.push(`  --breakpoint-${key}: ${merged[key]};`);
+  }
+  lines.push('}', '');
+  return `${lines.join('\n')}\n`;
+}
+
+/**
+ * Generate screens.
+ *
+ * Writes `screens.css` containing the built-in breakpoints plus any additional
+ * breakpoint values found in the Figma variable collection named `Screens`.
+ *
+ * The Figma variable collection is expected to be present under
+ * `figmaVariables.screens.tokens` (collection keys are kebab-cased).
+ *
+ * Existing built-in breakpoints are never removed. If Figma provides a token
+ * with the same key as a built-in breakpoint, the built-in value wins.
+ *
+ * @param figmaVariables - Raw Figma variables map (from `src/figma/index.mjs`).
+ * @param config - Configuration object.
+ * @returns Nothing.
+ *
+ * @example
+ * // design-system (src/tools/javascript/design-system/src/generators/tailwind/screens.mjs)
+ * // import { generateScreens } from '@vettvangur/design-system'
+ *
+ * await generateScreens({ screens: { tokens: { kiosk: { values: { Default: 1920 } } } } }, { paths: { styles: './src/styles' } })
+ */
+async function generateScreens(figmaVariables, config) {
   message('generating breakpoints...');
+  const screensCollection = figmaVariables?.screens;
+  const extras = {};
+  for (const [key, tok] of Object.entries(screensCollection?.tokens || {})) {
+    if (Object.hasOwn(BASE_SCREENS, key)) {
+      continue;
+    }
+    const n = pickFirstNumber(tok?.values);
+    if (n != null) {
+      extras[key] = n;
+    }
+  }
   const outDir = path.join(config.paths.styles, 'config');
   await fs$1.mkdir(outDir, {
     recursive: true
   });
   const outPath = path.join(outDir, 'screens.css');
-  await fs$1.writeFile(outPath, BREAKPOINTS_CSS, 'utf8');
+  await fs$1.writeFile(outPath, buildScreensCss(extras), 'utf8');
   message('finished generating breakpoints');
 }
 
@@ -3709,7 +3743,7 @@ async function fileExists(p) {
  *
  * await generateTailwind({}, projectType, typography, buttons, colors, scales, effects)
  */
-async function generateTailwind(config, projectType, typography, buttons, colors, scales, effects) {
+async function generateTailwind(config, projectType, typography, buttons, colors, scales, effects, figmaVariables) {
   message(pc.yellow('-=[ tailwind ]=-'));
   await generateFontFamily(typography.families, config);
   await generateFontWeight(typography.weights, config);
@@ -3727,7 +3761,7 @@ async function generateTailwind(config, projectType, typography, buttons, colors
   await generateColors$1(colors, config);
   await generateScales(scales, config);
   await generateShadows(effects, config);
-  await generateScreens(config);
+  await generateScreens(figmaVariables, config);
   await generateSources(config, projectType);
 }
 
@@ -5311,7 +5345,7 @@ async function pullAndBuild({
 
   // console.log(colors)
 
-  await generateTailwind(config, 'razor', typography, buttons, colors, scales, raw.effects);
+  await generateTailwind(config, 'razor', typography, buttons, colors, scales, raw.effects, raw.variables);
   if (target === 'razor') {
     // console.dir(typography, { depth: null, maxArrayLength: null })
 

package/package.json

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