@webmate-studio/builder 0.2.160 → 0.2.163

package/package.json

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

package/src/design-tokens-v2-css.js

@@ -16,7 +16,8 @@ import {
 	DEFAULT_SURFACE_TOKENS,
 	defaultDesignTokensV2,
 	normalizeShadowValue,
-	isGradientValue
+	isGradientValue,
+	SHADOW_PRESETS
 } from './design-tokens-v2.js';
 
 
@@ -54,6 +55,7 @@ export function generateTailwindV4ThemeV2(tokens) {
 	globalStyles += generateTextResponsiveVariants(t);
 	globalStyles += generateButtonClasses(t);
 	globalStyles += generateSpacingStyles(t);
+	globalStyles += generateShadowStyles(t);
 	globalStyles += generateResponsiveMediaQueries(responsiveLines);
 
 	return { themeVars, globalStyles };
@@ -116,15 +118,18 @@ function generateColorVariables(t, lines) {
 		}
 	}
 
-	// on-{welt} Kontrastfarben
+	// on-{welt} Kontrastfarben (überschreibbar via semanticMappings.textOn)
 	const neutralScale = t.colors.neutral?.scale;
 	if (neutralScale) {
-		lines.push('  /* on-colors (auto-contrast) */');
+		lines.push('  /* on-colors */');
 		for (const world of SEMANTIC_COLOR_WORLDS) {
 			const color = t.colors[world];
 			if (!color?.scale?.[9]) continue;
 
-			const onColor = calculateOnColor(color.scale[9], neutralScale);
+			const textOnOverride = t.semanticMappings?.[world]?.textOn;
+			const onColor = textOnOverride
+				? (neutralScale[textOnOverride] || calculateOnColor(color.scale[9], neutralScale))
+				: calculateOnColor(color.scale[9], neutralScale);
 			lines.push(`  --color-on-${world}: ${onColor};`);
 		}
 	}
@@ -1023,6 +1028,24 @@ function generateLayoutVariables(t, lines) {
 	if (t.borderWidth) lines.push(`  --border-width: ${t.borderWidth};`);
 	if (t.borderRadius) lines.push(`  --radius: ${t.borderRadius};`);
 
+	// Tailwind v4 base spacing (used by px-*, py-*, gap-*, m-*, p-*, etc.)
+	lines.push(`  --spacing: 0.25rem;`);
+
+	// Tailwind v4 container widths (used by max-w-sm, max-w-md, max-w-lg, etc.)
+	lines.push(`  --container-3xs: 16rem;`);
+	lines.push(`  --container-2xs: 18rem;`);
+	lines.push(`  --container-xs: 20rem;`);
+	lines.push(`  --container-sm: 24rem;`);
+	lines.push(`  --container-md: 28rem;`);
+	lines.push(`  --container-lg: 32rem;`);
+	lines.push(`  --container-xl: 36rem;`);
+	lines.push(`  --container-2xl: 42rem;`);
+	lines.push(`  --container-3xl: 48rem;`);
+	lines.push(`  --container-4xl: 56rem;`);
+	lines.push(`  --container-5xl: 64rem;`);
+	lines.push(`  --container-6xl: 72rem;`);
+	lines.push(`  --container-7xl: 80rem;`);
+
 	if (t.spacing?.component) {
 		lines.push(`  /* component spacing */`);
 		lines.push(`  --spacing-component: ${t.spacing.component.base || '3rem'};`);
@@ -1073,6 +1096,20 @@ function generateSpacingStyles(t) {
 }
 
 
+// ─── Shadow-Utilities ───────────────────────────────────────────────────────
+
+function generateShadowStyles(t) {
+	let css = '\n\n/* Shadow Utilities */';
+
+	for (const [name, value] of Object.entries(SHADOW_PRESETS)) {
+		const resolved = resolveShadowToCSS(value, t);
+		css += `\n.shadow-${name} { box-shadow: ${resolved}; }`;
+	}
+
+	return css;
+}
+
+
 // ─── Basis-Styles ───────────────────────────────────────────────────────────
 
 function generateBaseStyles(t) {