@webmate-studio/builder 0.2.117 → 0.2.118

package/package.json

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

package/src/design-tokens.js

@@ -7,7 +7,6 @@ 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 = {
@@ -59,7 +58,12 @@ function generateSemanticColorUtilities(tokens) {
 		// Text-on-background colors
 		'textOnPrimary': 'text-on-primary',
 		'textOnSecondary': 'text-on-secondary',
-		'textOnAccent': 'text-on-accent'
+		'textOnAccent': 'text-on-accent',
+
+		// Border-on-background colors (borders on colored backgrounds)
+		'borderOnPrimary': 'border-on-primary',
+		'borderOnSecondary': 'border-on-secondary',
+		'borderOnAccent': 'border-on-accent'
 	};
 
 	// Collect unique class names (deduplicate)
@@ -73,55 +77,27 @@ 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.)
 
 		if (className.startsWith('bg-')) {
-			// Only generate bg-* utility (with hover/focus/active variants)
 			if (!processedClasses.has(className)) {
 				processedClasses.add(className);
-				// Base class
-				utilities += `\n.${className} {`;
-				utilities += `\n  background-color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Hover variant
-				utilities += `\n.hover\\:${className}:hover {`;
-				utilities += `\n  background-color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Focus variant
-				utilities += `\n.focus\\:${className}:focus {`;
+				utilities += `\n@utility ${className} {`;
 				utilities += `\n  background-color: var(${colorVar});`;
 				utilities += `\n}`;
 			}
 		} else if (className.startsWith('text-')) {
-			// Only generate text-* utility (with hover/focus/active variants)
 			if (!processedClasses.has(className)) {
 				processedClasses.add(className);
-				// Base class
-				utilities += `\n.${className} {`;
-				utilities += `\n  color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Hover variant
-				utilities += `\n.hover\\:${className}:hover {`;
-				utilities += `\n  color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Focus variant
-				utilities += `\n.focus\\:${className}:focus {`;
+				utilities += `\n@utility ${className} {`;
 				utilities += `\n  color: var(${colorVar});`;
 				utilities += `\n}`;
 			}
 		} else if (className.startsWith('border-')) {
-			// Only generate border-* utility (with hover/focus/active variants)
 			if (!processedClasses.has(className)) {
 				processedClasses.add(className);
-				// Base class
-				utilities += `\n.${className} {`;
-				utilities += `\n  border-color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Hover variant
-				utilities += `\n.hover\\:${className}:hover {`;
-				utilities += `\n  border-color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Focus variant
-				utilities += `\n.focus\\:${className}:focus {`;
+				utilities += `\n@utility ${className} {`;
 				utilities += `\n  border-color: var(${colorVar});`;
 				utilities += `\n}`;
 			}
@@ -133,49 +109,62 @@ function generateSemanticColorUtilities(tokens) {
 
 			if (!processedClasses.has(textClass)) {
 				processedClasses.add(textClass);
-				// Base class
-				utilities += `\n.${textClass} {`;
-				utilities += `\n  color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Hover variant
-				utilities += `\n.hover\\:${textClass}:hover {`;
-				utilities += `\n  color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Focus variant
-				utilities += `\n.focus\\:${textClass}:focus {`;
+				utilities += `\n@utility ${textClass} {`;
 				utilities += `\n  color: var(${colorVar});`;
 				utilities += `\n}`;
 			}
 
 			if (!processedClasses.has(bgClass)) {
 				processedClasses.add(bgClass);
-				// Base class
-				utilities += `\n.${bgClass} {`;
-				utilities += `\n  background-color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Hover variant
-				utilities += `\n.hover\\:${bgClass}:hover {`;
-				utilities += `\n  background-color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Focus variant
-				utilities += `\n.focus\\:${bgClass}:focus {`;
+				utilities += `\n@utility ${bgClass} {`;
 				utilities += `\n  background-color: var(${colorVar});`;
 				utilities += `\n}`;
 			}
 
 			if (!processedClasses.has(borderClass)) {
 				processedClasses.add(borderClass);
-				// Base class
-				utilities += `\n.${borderClass} {`;
+				utilities += `\n@utility ${borderClass} {`;
 				utilities += `\n  border-color: var(${colorVar});`;
 				utilities += `\n}`;
-				// Hover variant
-				utilities += `\n.hover\\:${borderClass}:hover {`;
-				utilities += `\n  border-color: var(${colorVar});`;
-				utilities += `\n}`;
-				// Focus variant
-				utilities += `\n.focus\\:${borderClass}:focus {`;
-				utilities += `\n  border-color: var(${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()}`;
+
+		// Determine which CSS property(ies) to use
+		let entries;
+		if (className.startsWith('bg-')) {
+			entries = [[className, 'background-color']];
+		} else if (className.startsWith('text-')) {
+			entries = [[className, 'color']];
+		} else if (className.startsWith('border-')) {
+			entries = [[className, 'border-color']];
+		} else {
+			entries = [
+				[`text-${className}`, 'color'],
+				[`bg-${className}`, 'background-color'],
+				[`border-${className}`, 'border-color']
+			];
+		}
+
+		for (const [cls, prop] of entries) {
+			for (const step of opacitySteps) {
+				const opacityCls = `${cls}\\/${step}`;
+				if (processedClasses.has(opacityCls)) continue;
+				processedClasses.add(opacityCls);
+				utilities += `\n.${opacityCls} {`;
+				utilities += `\n  ${prop}: color-mix(in srgb, var(${colorVar}) ${step}%, transparent);`;
 				utilities += `\n}`;
 			}
 		}
@@ -252,7 +241,12 @@ export const defaultDesignTokens = {
 		// Text-on-Background Colors (for text on colored backgrounds)
 		textOnPrimary: '#ffffff',        // Text on bg-primary
 		textOnSecondary: '#ffffff',      // Text on bg-secondary
-		textOnAccent: '#ffffff'          // Text on bg-accent
+		textOnAccent: '#ffffff',         // Text on bg-accent
+
+		// Border-on-Background Colors (for borders on colored backgrounds)
+		borderOnPrimary: '#ffffff',      // Border on bg-primary
+		borderOnSecondary: '#ffffff',    // Border on bg-secondary
+		borderOnAccent: '#ffffff'        // Border on bg-accent
 	},
 
 	typography: {
@@ -686,6 +680,11 @@ export function generateTailwindV4Theme(tokens) {
 		if (tokens.colors.textOnSecondary) lines.push(`  --color-text-on-secondary: ${tokens.colors.textOnSecondary};`);
 		if (tokens.colors.textOnAccent) lines.push(`  --color-text-on-accent: ${tokens.colors.textOnAccent};`);
 
+		// Border-on-background colors
+		if (tokens.colors.borderOnPrimary) lines.push(`  --color-border-on-primary: ${tokens.colors.borderOnPrimary};`);
+		if (tokens.colors.borderOnSecondary) lines.push(`  --color-border-on-secondary: ${tokens.colors.borderOnSecondary};`);
+		if (tokens.colors.borderOnAccent) lines.push(`  --color-border-on-accent: ${tokens.colors.borderOnAccent};`);
+
 		// Basic colors
 		if (tokens.colors.white) lines.push(`  --color-white: ${tokens.colors.white};`);
 		if (tokens.colors.black) lines.push(`  --color-black: ${tokens.colors.black};`);