@webmate-studio/builder 0.2.147 → 0.2.148

package/package.json

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

package/src/design-tokens-v2.js

@@ -110,12 +110,13 @@ export function generateDarkColorScale(baseHex, curve) {
 	const chromaScale = curve?.preset === 'custom' ? (curve.chromaScale ?? 0.85) : (preset?.chromaScale ?? 0.85);
 
 	const isPureNeutral = base.c < 0.008;
+	const isLowChroma = base.c < 0.04;
 
 	// Dark Mode: Base etwas heller für bessere Sichtbarkeit
 	const darkBaseL = Math.min(base.l + 0.08, 0.65);
 
 	// Lightness-Rampe adaptiv (invertiert für Dark Mode)
-	const L = buildDarkLightnessRamp(darkBaseL);
+	const L = buildDarkLightnessRamp(darkBaseL, isLowChroma);
 
 	const scale = {};
 	for (let i = 0; i < 12; i++) {
@@ -295,17 +296,24 @@ function buildLightnessRamp(baseL, isLowChroma = false) {
  * Baut eine strikt monoton steigende Lightness-Rampe für Dark Mode.
  * Steps 1-8: dunkel → darkBaseL, Steps 10-12: darkBaseL → hell.
  */
-function buildDarkLightnessRamp(darkBaseL) {
-	const bottomL = 0.14;
+function buildDarkLightnessRamp(darkBaseL, isLowChroma) {
+	// Chromatische Farben (Primary, Secondary, Accent) brauchen hellere
+	// dunkle Steps, damit der Farbton sichtbar bleibt. Neutraltöne dürfen
+	// sehr dunkel werden (Hintergrundflächen).
+	const bottomL = isLowChroma ? 0.14 : 0.22;
 	const topL = 0.94;
 
-	const safeBaseL = Math.max(0.22, Math.min(0.85, darkBaseL));
+	const safeBaseL = Math.max(bottomL + 0.08, Math.min(0.85, darkBaseL));
 
 	const gap = Math.max(0.02, (safeBaseL - bottomL) * 0.05);
 	const step8Target = safeBaseL - gap;
 	const range = step8Target - bottomL;
 
-	const weights = [0.0, 0.04, 0.10, 0.20, 0.34, 0.50, 0.70, 0.92];
+	// Chromatische Farben: Steps stärker zur Base hin komprimiert,
+	// damit die dunklen Steps nicht zu dunkel (=farblos) werden
+	const weights = isLowChroma
+		? [0.0, 0.04, 0.10, 0.20, 0.34, 0.50, 0.70, 0.92]
+		: [0.0, 0.06, 0.14, 0.26, 0.40, 0.55, 0.72, 0.90];
 	const darkSteps = weights.map(w => bottomL + w * range);
 
 	const lightRange = topL - safeBaseL;