@webmate-studio/builder 0.2.139 → 0.2.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.139",
+  "version": "0.2.141",
   "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: 40, chromaScale: 1.15 },
+	vivid:   { label: 'Leuchtend', stdDev: 50, chromaScale: 1.2 },
 	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 },
+	soft:    { label: 'Pastellig', stdDev: 18, chromaScale: 0.7 },
+	muted:   { label: 'Gedämpft', stdDev: 22, chromaScale: 0.5 },
 };
 
 /**
@@ -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;
@@ -76,8 +80,8 @@ export function generateColorScale(baseHex, curve) {
 		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 +226,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 +240,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, volle Spreizung nach unten
+		const bottomL = 0.25;
+		const darkRange = safeBaseL - bottomL;
+		step10L = safeBaseL - darkRange * 0.12;
+		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
@@ -316,9 +334,23 @@ function buildDarkLightnessRamp(darkBaseL) {
  * sind — wie bei Radix Colors.
  */
 function computeChroma(stepL, baseL, baseC, stdDev, chromaScale) {
-	// Gaußkurve: Peak bei baseL, flachere Flanken als vorher
+	// 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((-12 / 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: Asymmetrisch
 	// Helle Seite (L > 0.85): Chroma fällt steil auf 0 → Steps 1-2 bleiben fast weiß
@@ -326,13 +358,11 @@ function computeChroma(stepL, baseL, baseC, stdDev, chromaScale) {
 	// 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
+		const t = (stepL - 0.85) / 0.15;
+		lightnessLimit = 1.0 - t * t;
 	} 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
+		const t = stepL / 0.3;
+		lightnessLimit = t * t;
 	} else {
 		lightnessLimit = 1.0;
 	}