@webmate-studio/builder 0.2.110 → 0.2.113

package/package.json

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

package/src/design-tokens.js

@@ -34,6 +34,7 @@ function generateSemanticColorUtilities(tokens) {
 		'infoLight': 'info-light',
 
 		// Base semantic colors (use prefixed names to avoid conflicts)
+		'bgBody': 'bg-body',
 		'bgBase': 'bg-default',
 		'bgElevated': 'bg-elevated',
 		'bgLifted': 'bg-lifted',
@@ -217,6 +218,7 @@ export const defaultDesignTokens = {
 		infoLight: '#dbeafe',
 
 		// Background Colors (Semantic)
+		bgBody: '#ffffff',      // Page/body background
 		bgBase: '#ffffff',
 		bgElevated: '#f9fafb',
 		bgLifted: '#ffffff',
@@ -648,6 +650,7 @@ export function generateTailwindV4Theme(tokens) {
 		if (tokens.colors.infoLight) lines.push(`  --color-info-light: ${tokens.colors.infoLight};`);
 
 		// Background colors (Semantic)
+		if (tokens.colors.bgBody) lines.push(`  --color-bg-body: ${tokens.colors.bgBody};`);
 		if (tokens.colors.bgBase) lines.push(`  --color-bg-base: ${tokens.colors.bgBase};`);
 		if (tokens.colors.bgElevated) lines.push(`  --color-bg-elevated: ${tokens.colors.bgElevated};`);
 		if (tokens.colors.bgLifted) lines.push(`  --color-bg-lifted: ${tokens.colors.bgLifted};`);
@@ -871,14 +874,17 @@ export function generateTailwindV4Theme(tokens) {
 
 	// Global styles (MUST be outside @theme block)
 	let globalStyles = `
-/* Global baseline font */
+/* Global baseline styles */
 body {
   font-family: var(--font-body);
+  background-color: var(--color-bg-body, var(--color-bg-base, #ffffff));
 }`;
 
 	// Generate utility classes for text styles
+	// IMPORTANT: Wrap in @layer components so color utilities (@layer utilities) can override textColor
 	if (tokens.textStyles) {
 		globalStyles += '\n\n/* Text Style Utilities */';
+		globalStyles += '\n@layer components {';
 		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
 			const kebabName = styleName
 				.replace(/([A-Z])/g, '-$1')
@@ -914,9 +920,11 @@ body {
 			}
 			globalStyles += `\n}`;
 		}
+		globalStyles += '\n}'; // Close @layer components for base text styles
 
 		// Generate responsive variants (sm:, md:, lg:, xl:, 2xl:) for Tailwind compatibility
 		// These allow switching to a different text style at a breakpoint: class="text-body lg:text-lead"
+		// IMPORTANT: @layer must be INSIDE @media for proper cascade behavior
 		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];
 		const breakpointValues = {
 			sm: '640px',
@@ -927,6 +935,8 @@ body {
 		};
 
 		for (const bp of breakpointKeys) {
+			globalStyles += `\n@media (min-width: ${breakpointValues[bp]}) {`;
+			globalStyles += `\n@layer components {`;
 			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
 				const kebabName = styleName
 					.replace(/([A-Z])/g, '-$1')
@@ -937,7 +947,6 @@ body {
 
 				// Generate Tailwind-compatible breakpoint class: md:text-body
 				// Apply ALL properties of the text style, not just responsive values
-				globalStyles += `\n@media (min-width: ${breakpointValues[bp]}) {`;
 				globalStyles += `\n  .${bp}\\:${className} {`;
 
 				// Font family
@@ -981,8 +990,9 @@ body {
 				}
 
 				globalStyles += `\n  }`;
-				globalStyles += `\n}`;
 			}
+			globalStyles += '\n}'; // Close @layer components
+			globalStyles += '\n}'; // Close @media
 		}
 	}
 
@@ -1210,11 +1220,12 @@ export function generateCSSFromTokens(tokens) {
 
 	lines.push('}');
 
-	// Add global body font-family as baseline
+	// Add global body styles as baseline
 	lines.push('');
-	lines.push('/* Global baseline font */');
+	lines.push('/* Global baseline styles */');
 	lines.push('body {');
 	lines.push('  font-family: var(--font-body);');
+	lines.push('  background-color: var(--color-bg-body, var(--color-bg-base, #ffffff));');
 	lines.push('}');
 
 	// Generate utility classes for text styles