@webmate-studio/builder 0.2.121 → 0.2.124

package/package.json

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

package/src/design-tokens.js

@@ -94,6 +94,12 @@ function generateSemanticColorUtilities(tokens) {
 			addUtility(className, 'color', colorVar);
 		} else if (className.startsWith('border-')) {
 			addUtility(className, 'border-color', colorVar);
+			// Also generate divide-* variant (border color on children via divide-y/divide-x)
+			const divideCls = className.replace('border-', 'divide-');
+			if (!processedClasses.has(divideCls)) {
+				processedClasses.add(divideCls);
+				utilities += `\n.${divideCls} > :not(:first-child) {\n  border-color: var(${colorVar});\n}`;
+			}
 		} else {
 			addUtility(`text-${className}`, 'color', colorVar);
 			addUtility(`bg-${className}`, 'background-color', colorVar);
@@ -134,6 +140,19 @@ function generateSemanticColorUtilities(tokens) {
 				utilities += `\n}`;
 			}
 		}
+
+		// Generate divide-* opacity variants for border-* classes
+		if (className.startsWith('border-')) {
+			const divideCls = className.replace('border-', 'divide-');
+			for (const step of opacitySteps) {
+				const opacityCls = `${divideCls}\\/${step}`;
+				if (processedClasses.has(opacityCls)) continue;
+				processedClasses.add(opacityCls);
+				utilities += `\n.${opacityCls} > :not(:first-child) {`;
+				utilities += `\n  border-color: color-mix(in srgb, var(${colorVar}) ${step}%, transparent);`;
+				utilities += `\n}`;
+			}
+		}
 	}
 
 	utilities += '\n}'; // Close @layer utilities
@@ -792,12 +811,10 @@ export function generateTailwindV4Theme(tokens) {
 		lines.push(`  --radius: ${tokens.borderRadius};`);
 	}
 
-	// Container widths (specific breakpoints)
-	if (tokens.container) {
-		for (const [key, value] of Object.entries(tokens.container)) {
-			lines.push(`  --container-${key}: ${value};`);
-		}
-	}
+	// Container widths — NICHT als --container-* ausgeben!
+	// In Tailwind v4 steuern --container-* die max-w-* Klassen (z.B. --container-2xl = max-w-2xl).
+	// Die Werte hier sind Breakpoints (640px, 1536px), nicht max-width-Werte (42rem, 56rem).
+	// Breakpoints werden separat als --breakpoint-* ausgegeben.
 
 	// Breakpoints
 	if (tokens.breakpoints) {
@@ -1202,10 +1219,8 @@ export function generateCSSFromTokens(tokens) {
 		lines.push(`  --tracking-${key}: ${value};`);
 	}
 
-	// Container
-	for (const [key, value] of Object.entries(tokens.container || {})) {
-		lines.push(`  --container-${key}: ${value};`);
-	}
+	// Container — NICHT als --container-* ausgeben (kollidiert mit Tailwind v4 max-w-*)
+	// Breakpoints werden separat als --breakpoint-* ausgegeben.
 
 	// Border Width
 	if (typeof tokens.borderWidth === 'object' && tokens.borderWidth !== null) {