@webmate-studio/builder 0.2.146 → 0.2.148

package/package.json

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

package/src/design-tokens-v2-migrate.js

@@ -86,8 +86,9 @@ export function validateDesignTokensV2(tokens) {
 		}
 	}
 
-	// Dark Mode
-	if (!v2.darkMode) v2.darkMode = { enabled: false, colors: null, semanticMappings: null };
+	// Theme (light/dark) — ersetzt altes darkMode-Objekt
+	if (!v2.theme) v2.theme = 'light';
+	delete v2.darkMode;
 
 	// ── Typografie validieren ──
 	if (!v2.typography) v2.typography = structuredClone(defaultDesignTokensV2.typography);

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;
@@ -680,6 +688,7 @@ export const BUTTON_SIZES = ['sm', 'md', 'lg'];
  */
 export const defaultDesignTokensV2 = {
 	version: 2,
+	theme: 'light', // 'light' | 'dark'
 
 	// ── Farben ──
 	colors: {
@@ -737,12 +746,6 @@ export const defaultDesignTokensV2 = {
 
 	surface: { ...DEFAULT_SURFACE_TOKENS },
 
-	darkMode: {
-		enabled: false,
-		colors: null, // Wird bei Aktivierung auto-generiert
-		semanticMappings: null
-	},
-
 	// ── Typografie ──
 	typography: {
 		fonts: [