@webmate-studio/builder 0.2.117 → 0.2.119

package/package.json

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

package/src/design-tokens.js

@@ -59,7 +59,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)
@@ -74,108 +79,58 @@ function generateSemanticColorUtilities(tokens) {
 		// If className already has prefix (bg-, text-, border-), generate only that variant
 		// Otherwise generate all three variants
 
+		/** 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-')) {
-			// 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  background-color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
+			addUtility(className, 'background-color', colorVar);
 		} 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  color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
+			addUtility(className, 'color', colorVar);
 		} 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  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);
-				// 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  color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
+			addUtility(`text-${className}`, 'color', colorVar);
+			addUtility(`bg-${className}`, 'background-color', colorVar);
+			addUtility(`border-${className}`, 'border-color', colorVar);
+		}
+	}
 
-			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  background-color: var(${colorVar});`;
-				utilities += `\n}`;
-			}
+	// Generate opacity variants for all color utilities using color-mix()
+	const opacitySteps = [10, 20, 30, 40, 50, 60, 70, 80, 90];
 
-			if (!processedClasses.has(borderClass)) {
-				processedClasses.add(borderClass);
-				// Base class
-				utilities += `\n.${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});`;
+	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 +207,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 +646,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};`);