@webmate-studio/builder 0.2.137 → 0.2.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.137",
+  "version": "0.2.140",
   "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: 50, chromaScale: 1.2 },
+	natural: { label: 'Natürlich', stdDev: 30, chromaScale: 1.0 },
+	soft:    { label: 'Pastellig', stdDev: 18, chromaScale: 0.7 },
+	muted:   { label: 'Gedämpft', stdDev: 22, chromaScale: 0.5 },
 };
 
 /**
@@ -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,38 @@ function buildDarkLightnessRamp(darkBaseL) {
  * sind — wie bei Radix Colors.
  */
 function computeChroma(stepL, baseL, baseC, stdDev, chromaScale) {
-	// Gaußkurve: Peak bei baseL
+	// Gaußkurve mit Plateau: In der Nähe der Base bleibt Chroma nahe 100%,
+	// erst weiter entfernt greift die Gaußkurve richtig.
+	// Das verhindert den harten Sprung bei Steps 8/10 vs. Base.
 	const diff = baseL - stepL;
-	const gaussian = Math.exp((-25 / stdDev) * diff * diff);
+	const absDiff = Math.abs(diff);
+
+	// Plateau-Radius: Innerhalb dieses L-Abstands bleibt Chroma nahe Base-Level
+	const plateau = 0.08;
+	let gaussian;
+	if (absDiff <= plateau) {
+		// Innerhalb des Plateaus: sanfter cosinus-Übergang (1.0 → ~0.97)
+		gaussian = 1.0 - 0.03 * (absDiff / plateau);
+	} else {
+		// Außerhalb: Gauß ab der Plateau-Kante
+		const edgeDiff = absDiff - plateau;
+		gaussian = 0.97 * Math.exp((-12 / stdDev) * edgeDiff * edgeDiff);
+	}
 
-	// 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);
+	// 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) {
+		const t = (stepL - 0.85) / 0.15;
+		lightnessLimit = 1.0 - t * t;
+	} else if (stepL < 0.3) {
+		const t = stepL / 0.3;
+		lightnessLimit = t * t;
+	} else {
+		lightnessLimit = 1.0;
+	}
 
 	return baseC * gaussian * lightnessLimit * chromaScale;
 }