@webmate-studio/builder 0.2.118 → 0.2.120

package/package.json

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

package/src/design-tokens.js

@@ -7,6 +7,7 @@ function generateSemanticColorUtilities(tokens) {
 	if (!tokens.colors) return '';
 
 	let utilities = '\n/* Color Utilities */';
+	utilities += '\n@layer utilities {';
 
 	// Map of all colors: token name -> utility class base name
 	const colorMap = {
@@ -77,67 +78,32 @@ function generateSemanticColorUtilities(tokens) {
 		// Determine which type(s) of utility classes to generate based on className prefix
 		// If className already has prefix (bg-, text-, border-), generate only that variant
 		// Otherwise generate all three variants
-		// Using @utility instead of @layer utilities gives full Tailwind v4 variant support
-		// (hover:, focus:, sm:, md:, lg:, xl:, 2xl:, etc.)
+
+		/** Helper: generate base + hover + focus for a single class */
+		function addUtility(cls, prop, varRef) {
+			if (processedClasses.has(cls)) return;
+			processedClasses.add(cls);
+			utilities += `\n.${cls} {\n  ${prop}: var(${varRef});\n}`;
+			utilities += `\n.hover\\:${cls}:hover {\n  ${prop}: var(${varRef});\n}`;
+			utilities += `\n.focus\\:${cls}:focus {\n  ${prop}: var(${varRef});\n}`;
+		}
 
 		if (className.startsWith('bg-')) {
-			if (!processedClasses.has(className)) {
-				processedClasses.add(className);
-				utilities += `\n@utility ${className} {`;
-				utilities += `\n  background-color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
+			addUtility(className, 'background-color', colorVar);
 		} else if (className.startsWith('text-')) {
-			if (!processedClasses.has(className)) {
-				processedClasses.add(className);
-				utilities += `\n@utility ${className} {`;
-				utilities += `\n  color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
+			addUtility(className, 'color', colorVar);
 		} else if (className.startsWith('border-')) {
-			if (!processedClasses.has(className)) {
-				processedClasses.add(className);
-				utilities += `\n@utility ${className} {`;
-				utilities += `\n  border-color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
+			addUtility(className, 'border-color', colorVar);
 		} else {
-			// No prefix: generate all three variants (for primary, secondary, etc.)
-			const textClass = `text-${className}`;
-			const bgClass = `bg-${className}`;
-			const borderClass = `border-${className}`;
-
-			if (!processedClasses.has(textClass)) {
-				processedClasses.add(textClass);
-				utilities += `\n@utility ${textClass} {`;
-				utilities += `\n  color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
-
-			if (!processedClasses.has(bgClass)) {
-				processedClasses.add(bgClass);
-				utilities += `\n@utility ${bgClass} {`;
-				utilities += `\n  background-color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
-
-			if (!processedClasses.has(borderClass)) {
-				processedClasses.add(borderClass);
-				utilities += `\n@utility ${borderClass} {`;
-				utilities += `\n  border-color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
+			addUtility(`text-${className}`, 'color', colorVar);
+			addUtility(`bg-${className}`, 'background-color', colorVar);
+			addUtility(`border-${className}`, 'border-color', colorVar);
 		}
 	}
 
 	// Generate opacity variants for all color utilities using color-mix()
-	// These use @layer utilities (not @utility) because @utility doesn't support slash in names.
-	// Opacity variants don't need responsive/hover support — the base class handles that.
 	const opacitySteps = [10, 20, 30, 40, 50, 60, 70, 80, 90];
 
-	utilities += '\n\n/* Opacity Variants */';
-	utilities += '\n@layer utilities {';
-
 	for (const [tokenKey, className] of Object.entries(colorMap)) {
 		if (!tokens.colors[tokenKey]) continue;
 		const colorVar = `--color-${tokenKey.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
@@ -1012,7 +978,9 @@ body {
 
 	// Generate utility classes for buttons
 	if (tokens.buttons) {
+		// IMPORTANT: Buttons in @layer components so Tailwind utilities (rounded-full, etc.) can override
 		globalStyles += '\n\n/* Button Utilities */';
+		globalStyles += '\n@layer components {';
 
 		// Base button class
 		globalStyles += `\n.btn {
@@ -1058,6 +1026,8 @@ body {
   border-color: var(--button-${variantName}-border-hover);
 }`;
 		}
+
+		globalStyles += '\n}'; // Close @layer components
 	}
 
 	// Add responsive media queries for textStyles (OUTSIDE @theme block!)