@webmate-studio/builder 0.2.99 → 0.2.101

package/package.json

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

package/src/design-tokens.js

@@ -453,9 +453,6 @@ export const defaultDesignTokens = {
 		}
 	},
 
-	// Base spacing unit - Tailwind berechnet p-1, p-2, p-4 etc. automatisch
-	spacing: '0.25rem', // 4px base unit (Tailwind default)
-
 	// Base border width
 	borderWidth: '1px',
 
@@ -799,11 +796,6 @@ export function generateTailwindV4Theme(tokens) {
 		}
 	}
 
-	// Spacing base
-	if (tokens.spacing) {
-		lines.push(`  --spacing: ${tokens.spacing};`);
-	}
-
 	// Border width base
 	if (tokens.borderWidth) {
 		lines.push(`  --border-width: ${tokens.borderWidth};`);
@@ -919,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
@@ -1039,7 +1074,6 @@ export function generateTailwindConfig(tokens) {
 				fontWeight: tokens.typography?.fontWeight || {},
 				lineHeight: tokens.typography?.lineHeight || {},
 				letterSpacing: tokens.typography?.letterSpacing || {},
-				spacing: tokens.spacing || {},
 				borderRadius: tokens.borderRadius || {},
 				boxShadow: tokens.boxShadow || {},
 				maxWidth: tokens.container || {}
@@ -1112,18 +1146,6 @@ export function generateCSSFromTokens(tokens) {
 		lines.push(`  --tracking-${key}: ${value};`);
 	}
 
-	// Spacing
-	if (typeof tokens.spacing === 'object' && tokens.spacing !== null) {
-		// Object format: { '0': '0', '1': '0.25rem', '2': '0.5rem', ... }
-		for (const [key, value] of Object.entries(tokens.spacing)) {
-			lines.push(`  --spacing-${key.replace('.', '-')}: ${value};`);
-		}
-	} else if (typeof tokens.spacing === 'string') {
-		// String format (base unit): '0.25rem' - Tailwind v4 will auto-generate scale
-		// Output base spacing variable for Tailwind v4
-		lines.push(`  --spacing: ${tokens.spacing};`);
-	}
-
 	// Container
 	for (const [key, value] of Object.entries(tokens.container || {})) {
 		lines.push(`  --container-${key}: ${value};`);
@@ -1207,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',
@@ -1219,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')
@@ -1235,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 */');