@webmate-studio/builder 0.2.72 → 0.2.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.72",
+  "version": "0.2.74",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/design-tokens.js

@@ -514,6 +514,7 @@ export const defaultDesignTokens = {
  */
 export function generateTailwindV4Theme(tokens) {
 	const lines = [];
+	const responsiveLines = {}; // { sm: [...], md: [...], lg: [...], xl: [...], '2xl': [...] }
 
 	// Colors - Map to Tailwind v4 CSS variables
 	if (tokens.colors) {
@@ -629,6 +630,13 @@ export function generateTailwindV4Theme(tokens) {
 					if (style.fontSize.base) {
 						lines.push(`  --text-${kebabName}-font-size: ${style.fontSize.base};`);
 					}
+					// Responsive: breakpoint values
+					for (const [breakpoint, value] of Object.entries(style.fontSize)) {
+						if (breakpoint !== 'base' && value) {
+							responsiveLines[breakpoint] = responsiveLines[breakpoint] || [];
+							responsiveLines[breakpoint].push(`  --text-${kebabName}-font-size: ${value};`);
+						}
+					}
 				} else {
 					// Simple value
 					lines.push(`  --text-${kebabName}-font-size: ${style.fontSize};`);
@@ -641,6 +649,13 @@ export function generateTailwindV4Theme(tokens) {
 					if (style.lineHeight.base) {
 						lines.push(`  --text-${kebabName}-line-height: ${style.lineHeight.base};`);
 					}
+					// Responsive: breakpoint values
+					for (const [breakpoint, value] of Object.entries(style.lineHeight)) {
+						if (breakpoint !== 'base' && value) {
+							responsiveLines[breakpoint] = responsiveLines[breakpoint] || [];
+							responsiveLines[breakpoint].push(`  --text-${kebabName}-line-height: ${value};`);
+						}
+					}
 				} else {
 					lines.push(`  --text-${kebabName}-line-height: ${style.lineHeight};`);
 				}
@@ -652,6 +667,13 @@ export function generateTailwindV4Theme(tokens) {
 					if (style.letterSpacing.base) {
 						lines.push(`  --text-${kebabName}-letter-spacing: ${style.letterSpacing.base};`);
 					}
+					// Responsive: breakpoint values
+					for (const [breakpoint, value] of Object.entries(style.letterSpacing)) {
+						if (breakpoint !== 'base' && value) {
+							responsiveLines[breakpoint] = responsiveLines[breakpoint] || [];
+							responsiveLines[breakpoint].push(`  --text-${kebabName}-letter-spacing: ${value};`);
+						}
+					}
 				} else {
 					lines.push(`  --text-${kebabName}-letter-spacing: ${style.letterSpacing};`);
 				}
@@ -836,47 +858,19 @@ body {
 	}
 
 	// Add responsive media queries for textStyles (OUTSIDE @theme block!)
-	if (tokens.textStyles) {
-		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];
-		const breakpointValues = {
-			sm: '640px',
-			md: '768px',
-			lg: '1024px',
-			xl: '1280px',
-			'2xl': '1536px'
-		};
-
-		for (const bp of breakpointKeys) {
-			const mediaQueryLines = [];
-
-			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
-				const kebabName = styleName
-					.replace(/([A-Z])/g, '-$1')
-					.replace(/(\d+)/g, '-$1')
-					.toLowerCase()
-					.replace(/^-/, '');
-
-				// Font size
-				if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
-					mediaQueryLines.push(`    --text-${kebabName}-font-size: ${style.fontSize[bp]};`);
-				}
-
-				// Line height
-				if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
-					mediaQueryLines.push(`    --text-${kebabName}-line-height: ${style.lineHeight[bp]};`);
-				}
-
-				// Letter spacing
-				if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
-					mediaQueryLines.push(`    --text-${kebabName}-letter-spacing: ${style.letterSpacing[bp]};`);
-				}
-			}
+	const breakpointValues = {
+		sm: '640px',
+		md: '768px',
+		lg: '1024px',
+		xl: '1280px',
+		'2xl': '1536px'
+	};
 
-			if (mediaQueryLines.length > 0) {
-				globalStyles += `\n\n@media (min-width: ${breakpointValues[bp]}) {\n  :root {\n`;
-				globalStyles += mediaQueryLines.join('\n');
-				globalStyles += '\n  }\n}';
-			}
+	for (const [bp, minWidth] of Object.entries(breakpointValues)) {
+		if (responsiveLines[bp] && responsiveLines[bp].length > 0) {
+			globalStyles += `\n\n@media (min-width: ${minWidth}) {\n  :root {\n`;
+			globalStyles += responsiveLines[bp].join('\n');
+			globalStyles += '\n  }\n}';
 		}
 	}