@webmate-studio/builder 0.2.98 → 0.2.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.98",
+  "version": "0.2.100",
   "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',
 
@@ -602,6 +599,18 @@ export const defaultDesignTokens = {
 			opacity: 100,
 			opacityHover: 100
 		}
+	},
+
+	// Spacing between components
+	spacing: {
+		component: {
+			base: '3rem',   // 48px - Mobile
+			sm: '3rem',     // 48px - 640px+
+			md: '3.5rem',   // 56px - 768px+
+			lg: '4rem',     // 64px - 1024px+
+			xl: '4.5rem',   // 72px - 1280px+
+			'2xl': '5rem'   // 80px - 1536px+
+		}
 	}
 };
 
@@ -787,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};`);
@@ -1027,7 +1031,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 || {}
@@ -1100,18 +1103,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};`);
@@ -1555,5 +1546,36 @@ export function generateCSSFromTokens(tokens) {
 		lines.push(semanticUtilities);
 	}
 
+	// Add component spacing utilities
+	if (tokens.spacing?.component) {
+		lines.push('');
+		lines.push('/* Component Spacing */');
+		lines.push('.component-wrapper {');
+		lines.push('  display: flex;');
+		lines.push('  flex-direction: column;');
+		lines.push(`  gap: ${tokens.spacing.component.base || '3rem'};`);
+		lines.push('}');
+
+		// Responsive spacing
+		const breakpoints = {
+			sm: '640px',
+			md: '768px',
+			lg: '1024px',
+			xl: '1280px',
+			'2xl': '1536px'
+		};
+
+		for (const [breakpoint, minWidth] of Object.entries(breakpoints)) {
+			if (tokens.spacing.component[breakpoint]) {
+				lines.push('');
+				lines.push(`@media (min-width: ${minWidth}) {`);
+				lines.push('  .component-wrapper {');
+				lines.push(`    gap: ${tokens.spacing.component[breakpoint]};`);
+				lines.push('  }');
+				lines.push('}');
+			}
+		}
+	}
+
 	return lines.join('\n');
 }