@webmate-studio/builder 0.2.73 → 0.2.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.73",
+  "version": "0.2.75",
   "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) {
@@ -680,7 +681,12 @@ export function generateTailwindV4Theme(tokens) {
 
 			// Text color (not responsive)
 			if (style.textColor) {
-				lines.push(`  --text-${kebabName}-color: var(--color-${style.textColor});`);
+				// Convert textColor to kebab-case (textBase -> text-base)
+				const colorKebab = style.textColor
+					.replace(/([A-Z])/g, '-$1')
+					.toLowerCase()
+					.replace(/^-/, '');
+				lines.push(`  --text-${kebabName}-color: var(--color-${colorKebab});`);
 			}
 		}
 	}
@@ -857,47 +863,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}';
 		}
 	}