@webmate-studio/builder 0.2.100 → 0.2.101

package/package.json

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

package/src/design-tokens.js

@@ -911,6 +911,49 @@ body {
 			}
 			globalStyles += `\n}`;
 		}
+
+		// Generate responsive variants (sm:, md:, lg:, xl:, 2xl:) for Tailwind compatibility
+		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];
+		const breakpointValues = {
+			sm: '640px',
+			md: '768px',
+			lg: '1024px',
+			xl: '1280px',
+			'2xl': '1536px'
+		};
+
+		for (const bp of breakpointKeys) {
+			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
+				const kebabName = styleName
+					.replace(/([A-Z])/g, '-$1')
+					.replace(/(\d+)/g, '-$1')
+					.toLowerCase()
+					.replace(/^-/, '');
+				const className = `text-${kebabName}`;
+				const hasResponsive = (
+					(style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) ||
+					(style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) ||
+					(style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp])
+				);
+
+				if (hasResponsive) {
+					// Generate Tailwind-compatible breakpoint class: md:text-body
+					globalStyles += `\n@media (min-width: ${breakpointValues[bp]}) {`;
+					globalStyles += `\n  .${bp}\\:${className} {`;
+					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
+						globalStyles += `\n    font-size: ${style.fontSize[bp]};`;
+					}
+					if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
+						globalStyles += `\n    line-height: ${style.lineHeight[bp]};`;
+					}
+					if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
+						globalStyles += `\n    letter-spacing: ${style.letterSpacing[bp]};`;
+					}
+					globalStyles += `\n  }`;
+					globalStyles += `\n}`;
+				}
+			}
+		}
 	}
 
 	// Generate utility classes for buttons
@@ -1186,11 +1229,10 @@ export function generateCSSFromTokens(tokens) {
 			}
 			lines.push(`  }`);
 		}
-		lines.push('}'); // Close @layer components
-
-		// Add responsive media queries for textStyles
-		const breakpointKeys = ['md', 'lg', 'xl', '2xl'];
+		// Generate responsive variants (md:, lg:, xl:, 2xl:) for Tailwind compatibility
+		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];
 		const breakpointValues = {
+			sm: '640px',
 			md: '768px',
 			lg: '1024px',
 			xl: '1280px',
@@ -1198,8 +1240,6 @@ export function generateCSSFromTokens(tokens) {
 		};
 
 		for (const bp of breakpointKeys) {
-			const mediaQueryLines = [];
-
 			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
 				const kebabName = styleName
 					.replace(/([A-Z])/g, '-$1')
@@ -1214,30 +1254,26 @@ export function generateCSSFromTokens(tokens) {
 				);
 
 				if (hasResponsive) {
-					mediaQueryLines.push(`    .${className} {`);
+					// Generate Tailwind-compatible breakpoint class: md:text-body
+					lines.push(`  .${bp}\\:${className} {`);
+					lines.push(`    @media (min-width: ${breakpointValues[bp]}) {`);
 					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
-						mediaQueryLines.push(`      font-size: ${style.fontSize[bp]};`);
+						lines.push(`      font-size: ${style.fontSize[bp]};`);
 					}
 					if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
-						mediaQueryLines.push(`      line-height: ${style.lineHeight[bp]};`);
+						lines.push(`      line-height: ${style.lineHeight[bp]};`);
 					}
 					if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
-						mediaQueryLines.push(`      letter-spacing: ${style.letterSpacing[bp]};`);
+						lines.push(`      letter-spacing: ${style.letterSpacing[bp]};`);
 					}
-					mediaQueryLines.push(`    }`);
+					lines.push(`    }`);
+					lines.push(`  }`);
 				}
 			}
-
-			if (mediaQueryLines.length > 0) {
-				lines.push('');
-				lines.push(`@layer components {`);
-				lines.push(`  @media (min-width: ${breakpointValues[bp]}) {`);
-				lines.push(...mediaQueryLines);
-				lines.push(`  }`);
-				lines.push('}');
-			}
 		}
 
+		lines.push('}'); // Close @layer components
+
 		// Generate markdown prose styles
 		lines.push('');
 		lines.push('/* Markdown Prose Styles */');