@webmate-studio/builder 0.2.137 → 0.2.139

package/package.json

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

package/src/design-tokens-v2.js

@@ -16,10 +16,10 @@
  * chromaScale = globaler Sättigungsmultiplikator
  */
 export const COLOR_SCALE_PRESETS = {
-	vivid:   { label: 'Leuchtend', stdDev: 28, chromaScale: 1.0 },
-	natural: { label: 'Natürlich', stdDev: 20, chromaScale: 0.85 },
-	soft:    { label: 'Pastellig', stdDev: 13, chromaScale: 0.7 },
-	muted:   { label: 'Gedämpft', stdDev: 18, chromaScale: 0.5 },
+	vivid:   { label: 'Leuchtend', stdDev: 40, chromaScale: 1.15 },
+	natural: { label: 'Natürlich', stdDev: 30, chromaScale: 1.0 },
+	soft:    { label: 'Pastellig', stdDev: 16, chromaScale: 0.75 },
+	muted:   { label: 'Gedämpft', stdDev: 22, chromaScale: 0.55 },
 };
 
 /**
@@ -42,8 +42,8 @@ export function generateColorScale(baseHex, curve) {
 	const stdDev = curve?.preset === 'custom' ? (curve.stdDev ?? 20) : (preset?.stdDev ?? 20);
 	const chromaScale = curve?.preset === 'custom' ? (curve.chromaScale ?? 0.85) : (preset?.chromaScale ?? 0.85);
 
-	// Neutral-Erkennung: Basis mit niedriger Chroma
-	const isNeutral = base.c < 0.04;
+	// Neutral-Erkennung: Basis mit sehr niedriger Chroma (reines Grau)
+	const isPureNeutral = base.c < 0.008;
 
 	// Lightness-Rampe adaptiv an Base-Lightness
 	const L = buildLightnessRamp(base.l);
@@ -62,7 +62,8 @@ export function generateColorScale(baseHex, curve) {
 
 		// Chroma über Gaußkurve berechnen
 		let c;
-		if (isNeutral) {
+		if (isPureNeutral) {
+			// Reines Grau: minimale Chroma, Step 1 wird weiß
 			c = base.c * 0.3;
 		} else if (step === 9) {
 			// Geclampt: volle Base-Chroma bei korrigierter Lightness
@@ -75,8 +76,8 @@ export function generateColorScale(baseHex, curve) {
 		scale[step] = oklchToHex(mapped.l, mapped.c, mapped.h);
 	}
 
-	// Neutral Step 1 = reines Weiß
-	if (isNeutral) {
+	// Reines Neutral Step 1 = reines Weiß
+	if (isPureNeutral) {
 		scale[1] = '#ffffff';
 	}
 
@@ -96,7 +97,7 @@ export function generateDarkColorScale(baseHex, curve) {
 	const stdDev = curve?.preset === 'custom' ? (curve.stdDev ?? 20) : (preset?.stdDev ?? 20);
 	const chromaScale = curve?.preset === 'custom' ? (curve.chromaScale ?? 0.85) : (preset?.chromaScale ?? 0.85);
 
-	const isNeutral = base.c < 0.04;
+	const isPureNeutral = base.c < 0.008;
 
 	// Dark Mode: Base etwas heller für bessere Sichtbarkeit
 	const darkBaseL = Math.min(base.l + 0.08, 0.65);
@@ -108,7 +109,7 @@ export function generateDarkColorScale(baseHex, curve) {
 	for (let i = 0; i < 12; i++) {
 		const step = i + 1;
 		let c;
-		if (isNeutral) {
+		if (isPureNeutral) {
 			c = base.c * 0.3;
 		} else {
 			c = computeChroma(L[i], L[8], base.c, stdDev, chromaScale);
@@ -315,14 +316,26 @@ function buildDarkLightnessRamp(darkBaseL) {
  * sind — wie bei Radix Colors.
  */
 function computeChroma(stepL, baseL, baseC, stdDev, chromaScale) {
-	// Gaußkurve: Peak bei baseL
+	// Gaußkurve: Peak bei baseL, flachere Flanken als vorher
 	const diff = baseL - stepL;
-	const gaussian = Math.exp((-25 / stdDev) * diff * diff);
-
-	// Lightness-Begrenzung: Wie viel Chroma ist bei dieser Lightness sinnvoll?
-	// Bei L=0 oder L=1 → 0, bei L≈0.5-0.7 → Maximum
-	// Formel: sin-artige Kurve die bei L=0 und L=1 null ist
-	const lightnessLimit = Math.pow(Math.sin(stepL * Math.PI), 1.2);
+	const gaussian = Math.exp((-12 / stdDev) * diff * diff);
+
+	// Lightness-Begrenzung: Asymmetrisch
+	// Helle Seite (L > 0.85): Chroma fällt steil auf 0 → Steps 1-2 bleiben fast weiß
+	// Dunkle Seite (L < 0.3): Chroma fällt moderat → Steps 11-12 behalten Farbton
+	// Mitte (0.3-0.85): Nahezu volle Chroma möglich
+	let lightnessLimit;
+	if (stepL > 0.85) {
+		// Steep falloff for near-white steps
+		const t = (stepL - 0.85) / 0.15; // 0 at L=0.85, 1 at L=1.0
+		lightnessLimit = 1.0 - t * t;     // quadratic drop
+	} else if (stepL < 0.3) {
+		// Moderate falloff for near-black steps
+		const t = stepL / 0.3;            // 0 at L=0, 1 at L=0.3
+		lightnessLimit = t * t;            // quadratic rise
+	} else {
+		lightnessLimit = 1.0;
+	}
 
 	return baseC * gaussian * lightnessLimit * chromaScale;
 }