@webmate-studio/builder 0.2.141 → 0.2.143

package/package.json

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

package/src/design-tokens-v2.js

@@ -74,6 +74,14 @@ export function generateColorScale(baseHex, curve) {
 			c = base.c;
 		} else {
 			c = computeChroma(L[i], L[8], base.c, stdDev, chromaScale);
+
+			// Neutraltöne: Helle Stufen extra dämpfen, damit Steps 2-5
+			// nicht zu farbig wirken. Nahe der Base bleibt volle Chroma.
+			if (isLowChroma && L[i] > L[8]) {
+				const distFromBase = (L[i] - L[8]) / (0.985 - L[8]); // 0 bei Base, 1 bei Step 1
+				const damping = 1.0 - 0.55 * distFromBase * distFromBase;
+				c *= damping;
+			}
 		}
 
 		const mapped = gamutMapOklch(L[i], c, base.h);
@@ -249,10 +257,10 @@ function buildLightnessRamp(baseL, isLowChroma = false) {
 
 	if (isLowChroma) {
 		// Neutraltöne: Step 12 muss sehr dunkel sein (Hauptschriftfarbe),
-		// Step 11 = Low-Contrast Text, volle Spreizung nach unten
+		// Step 11 = Low-Contrast Text, gleichmäßigere Verteilung nach unten
 		const bottomL = 0.25;
 		const darkRange = safeBaseL - bottomL;
-		step10L = safeBaseL - darkRange * 0.12;
+		step10L = safeBaseL - darkRange * 0.20;
 		step11L = safeBaseL - darkRange * 0.55;
 		step12L = bottomL;
 	} else {
@@ -352,13 +360,18 @@ function computeChroma(stepL, baseL, baseC, stdDev, chromaScale) {
 		gaussian = 0.97 * Math.exp((-12 / stdDev) * edgeDiff * edgeDiff);
 	}
 
-	// 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
+	// Lightness-Begrenzung: Asymmetrisch + Chroma-abhängig
+	// Bei hochgesättigten Farben (Grün, Cyan) wirken schon kleine Chroma-Werte
+	// bei hoher Lightness "neonig". Der Einsatzpunkt wird daher bei hoher
+	// Base-Chroma nach unten verschoben.
+	// Helle Seite: Einsatz ab threshold (0.85 bei C=0, 0.75 bei C≥0.17)
+	// Dunkle Seite (L < 0.3): Chroma fällt moderat
+	// Mitte: volle Chroma möglich
+	const chromaFactor = Math.min(baseC / 0.17, 1.0); // 0 bei grau, 1 bei gesättigtem Grün
+	const lightThreshold = 0.85 - chromaFactor * 0.10; // 0.85 → 0.75
 	let lightnessLimit;
-	if (stepL > 0.85) {
-		const t = (stepL - 0.85) / 0.15;
+	if (stepL > lightThreshold) {
+		const t = (stepL - lightThreshold) / (1.0 - lightThreshold);
 		lightnessLimit = 1.0 - t * t;
 	} else if (stepL < 0.3) {
 		const t = stepL / 0.3;