@webmate-studio/builder 0.2.140 → 0.2.142

package/package.json

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

package/src/design-tokens-v2.js

@@ -45,8 +45,12 @@ export function generateColorScale(baseHex, curve) {
 	// Neutral-Erkennung: Basis mit sehr niedriger Chroma (reines Grau)
 	const isPureNeutral = base.c < 0.008;
 
+	// Neutral-Erkennung für Rampe: getönte Grautöne (c < 0.05) brauchen
+	// dunkle Steps für Textfarbe und Step 1 = Weiß
+	const isLowChroma = base.c < 0.05;
+
 	// Lightness-Rampe adaptiv an Base-Lightness
-	const L = buildLightnessRamp(base.l);
+	const L = buildLightnessRamp(base.l, isLowChroma);
 
 	// Wurde die Base-Lightness geclampt? (extrem helle/dunkle Farben)
 	const baseClamped = Math.abs(L[8] - base.l) > 0.01;
@@ -70,14 +74,22 @@ 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);
 		scale[step] = oklchToHex(mapped.l, mapped.c, mapped.h);
 	}
 
-	// Reines Neutral Step 1 = reines Weiß
-	if (isPureNeutral) {
+	// Neutraltöne: Step 1 = reines Weiß (Seitenhintergrund)
+	if (isLowChroma) {
 		scale[1] = '#ffffff';
 	}
 
@@ -222,9 +234,8 @@ function hslToHex(h, s, l) {
  * - Die Rampe wird auf den verfügbaren Bereich komprimiert
  * - Monotonie ist durch die Konstruktion garantiert
  */
-function buildLightnessRamp(baseL) {
+function buildLightnessRamp(baseL, isLowChroma = false) {
 	const topL = 0.985;    // Step 1: fast Weiß
-	const bottomL = 0.25;  // Step 12: dunkelster Wert
 
 	// Base clampen: min. 0.30 damit 3 dunkle Stufen Platz haben,
 	// max. 0.80 damit 8 helle Stufen genug Abstand in sRGB haben
@@ -237,15 +248,30 @@ function buildLightnessRamp(baseL) {
 	const range = topL - step8Target;
 
 	// Feste Verteilungs-Gewichte: Steps 1-2 bleiben nahe Weiß,
-	// dann beschleunigter Abstieg zur Base. Inspiriert von Radix' Lightness-Verteilung.
-	const weights = [0.0, 0.04, 0.10, 0.20, 0.34, 0.50, 0.70, 0.92];
+	// dann gleichmäßiger Abstieg zur Base. Sprünge zwischen benachbarten Weights
+	// sollen möglichst gleichmäßig ansteigen (kein harter Sprung bei Step 7).
+	const weights = [0.0, 0.04, 0.10, 0.20, 0.34, 0.50, 0.67, 0.86];
 	const lightSteps = weights.map(w => topL - w * range);
 
-	// Steps 10-12: nach unten von Base weg
-	const darkRange = safeBaseL - bottomL;
-	const step10L = safeBaseL - darkRange * 0.12;
-	const step11L = safeBaseL - darkRange * 0.55;
-	const step12L = bottomL;
+	let step10L, step11L, step12L;
+
+	if (isLowChroma) {
+		// Neutraltöne: Step 12 muss sehr dunkel sein (Hauptschriftfarbe),
+		// Step 11 = Low-Contrast Text, gleichmäßigere Verteilung nach unten
+		const bottomL = 0.25;
+		const darkRange = safeBaseL - bottomL;
+		step10L = safeBaseL - darkRange * 0.20;
+		step11L = safeBaseL - darkRange * 0.55;
+		step12L = bottomL;
+	} else {
+		// Chromatische Farben: Steps 11-12 näher beieinander,
+		// der Farbton bleibt wichtiger als maximale Dunkelheit
+		const bottomL = 0.25;
+		const darkRange = safeBaseL - bottomL;
+		step10L = safeBaseL - darkRange * 0.12;
+		step11L = safeBaseL - darkRange * 0.30;
+		step12L = safeBaseL - darkRange * 0.42;
+	}
 
 	const ramp = [
 		...lightSteps,  // Steps 1-8