@webmate-studio/builder 0.2.161 → 0.2.164

package/package.json

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

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

@@ -118,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};`);
 		}
 	}
@@ -1025,6 +1028,108 @@ function generateLayoutVariables(t, lines) {
 	if (t.borderWidth) lines.push(`  --border-width: ${t.borderWidth};`);
 	if (t.borderRadius) lines.push(`  --radius: ${t.borderRadius};`);
 
+	// ── Tailwind v4 default theme variables ──
+	// These are normally set by @theme in a Tailwind build.
+	// Since our preview loads pre-built component CSS that references these vars,
+	// we must define them here so the utilities work correctly.
+
+	// Spacing (px-*, py-*, gap-*, m-*, p-*, w-*, h-*, etc.)
+	lines.push(`  --spacing: 0.25rem;`);
+
+	// Border radius (rounded-sm, rounded-lg, etc.)
+	lines.push(`  --radius-xs: 0.125rem;`);
+	lines.push(`  --radius-sm: 0.25rem;`);
+	lines.push(`  --radius-md: 0.375rem;`);
+	lines.push(`  --radius-lg: 0.5rem;`);
+	lines.push(`  --radius-xl: 0.75rem;`);
+	lines.push(`  --radius-2xl: 1rem;`);
+	lines.push(`  --radius-3xl: 1.5rem;`);
+	lines.push(`  --radius-4xl: 2rem;`);
+
+	// Font sizes (text-xs, text-sm, text-base, text-lg, text-xl, etc.)
+	lines.push(`  --text-xs: 0.75rem;`);
+	lines.push(`  --text-xs--line-height: 1rem;`);
+	lines.push(`  --text-sm: 0.875rem;`);
+	lines.push(`  --text-sm--line-height: 1.25rem;`);
+	lines.push(`  --text-base: 1rem;`);
+	lines.push(`  --text-base--line-height: 1.5rem;`);
+	lines.push(`  --text-lg: 1.125rem;`);
+	lines.push(`  --text-lg--line-height: 1.75rem;`);
+	lines.push(`  --text-xl: 1.25rem;`);
+	lines.push(`  --text-xl--line-height: 1.75rem;`);
+	lines.push(`  --text-2xl: 1.5rem;`);
+	lines.push(`  --text-2xl--line-height: 2rem;`);
+	lines.push(`  --text-3xl: 1.875rem;`);
+	lines.push(`  --text-3xl--line-height: 2.25rem;`);
+	lines.push(`  --text-4xl: 2.25rem;`);
+	lines.push(`  --text-4xl--line-height: 2.5rem;`);
+	lines.push(`  --text-5xl: 3rem;`);
+	lines.push(`  --text-5xl--line-height: 1;`);
+	lines.push(`  --text-6xl: 3.75rem;`);
+	lines.push(`  --text-6xl--line-height: 1;`);
+	lines.push(`  --text-7xl: 4.5rem;`);
+	lines.push(`  --text-7xl--line-height: 1;`);
+	lines.push(`  --text-8xl: 6rem;`);
+	lines.push(`  --text-8xl--line-height: 1;`);
+	lines.push(`  --text-9xl: 8rem;`);
+	lines.push(`  --text-9xl--line-height: 1;`);
+
+	// Font weight (font-thin, font-light, font-normal, font-bold, etc.)
+	lines.push(`  --font-weight-thin: 100;`);
+	lines.push(`  --font-weight-extralight: 200;`);
+	lines.push(`  --font-weight-light: 300;`);
+	lines.push(`  --font-weight-normal: 400;`);
+	lines.push(`  --font-weight-medium: 500;`);
+	lines.push(`  --font-weight-semibold: 600;`);
+	lines.push(`  --font-weight-bold: 700;`);
+	lines.push(`  --font-weight-extrabold: 800;`);
+	lines.push(`  --font-weight-black: 900;`);
+
+	// Line height (leading-none, leading-tight, leading-normal, etc.)
+	lines.push(`  --leading-none: 1;`);
+	lines.push(`  --leading-tight: 1.25;`);
+	lines.push(`  --leading-snug: 1.375;`);
+	lines.push(`  --leading-normal: 1.5;`);
+	lines.push(`  --leading-relaxed: 1.625;`);
+	lines.push(`  --leading-loose: 2;`);
+
+	// Letter spacing (tracking-tighter, tracking-tight, tracking-normal, etc.)
+	lines.push(`  --tracking-tighter: -0.05em;`);
+	lines.push(`  --tracking-tight: -0.025em;`);
+	lines.push(`  --tracking-normal: 0em;`);
+	lines.push(`  --tracking-wide: 0.025em;`);
+	lines.push(`  --tracking-wider: 0.05em;`);
+	lines.push(`  --tracking-widest: 0.1em;`);
+
+	// Shadows (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl)
+	lines.push(`  --shadow-2xs: 0 1px rgba(0,0,0,0.05);`);
+	lines.push(`  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);`);
+	lines.push(`  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);`);
+	lines.push(`  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);`);
+	lines.push(`  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);`);
+	lines.push(`  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);`);
+	lines.push(`  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);`);
+
+	// Inset shadows (inset-shadow-xs, inset-shadow-sm)
+	lines.push(`  --inset-shadow-2xs: inset 0 1px rgba(0,0,0,0.05);`);
+	lines.push(`  --inset-shadow-xs: inset 0 1px 1px rgba(0,0,0,0.05);`);
+	lines.push(`  --inset-shadow-sm: inset 0 2px 4px rgba(0,0,0,0.05);`);
+
+	// Container widths (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'};`);