@webmate-studio/builder 0.2.142 → 0.2.144

package/package.json

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

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

@@ -139,8 +139,11 @@ function generateColorVariables(t, lines) {
 			if (mapping.bgSubtle) lines.push(`  --color-${world}-bg-subtle: var(--color-${world}-${mapping.bgSubtle});`);
 			if (mapping.bgSubtleHover) lines.push(`  --color-${world}-bg-subtle-hover: var(--color-${world}-${mapping.bgSubtleHover});`);
 			if (mapping.text) lines.push(`  --color-${world}-text: var(--color-${world}-${mapping.text});`);
+			if (mapping.textHover) lines.push(`  --color-${world}-text-hover: var(--color-${world}-${mapping.textHover});`);
 			if (mapping.border) lines.push(`  --color-${world}-border: var(--color-${world}-${mapping.border});`);
-			if (mapping.ring) lines.push(`  --color-${world}-ring: var(--color-${world}-${mapping.ring});`);
+			if (mapping.borderHover) lines.push(`  --color-${world}-border-hover: var(--color-${world}-${mapping.borderHover});`);
+			// ring zeigt auf border (kein eigenes Mapping nötig)
+			lines.push(`  --color-${world}-ring: var(--color-${world}-border);`);
 		}
 	}
 
@@ -200,8 +203,10 @@ function generateColorUtilities(t) {
 			{ cls: `bg-${world}-subtle`, prop: 'background-color', varRef: `--color-${world}-bg-subtle` },
 			{ cls: `bg-${world}-subtle-hover`, prop: 'background-color', varRef: `--color-${world}-bg-subtle-hover` },
 			{ cls: `text-${world}`, prop: 'color', varRef: `--color-${world}-text` },
+			{ cls: `text-${world}-hover`, prop: 'color', varRef: `--color-${world}-text-hover` },
 			{ cls: `text-on-${world}`, prop: 'color', varRef: `--color-on-${world}` },
 			{ cls: `border-${world}`, prop: 'border-color', varRef: `--color-${world}-border` },
+			{ cls: `border-${world}-hover`, prop: 'border-color', varRef: `--color-${world}-border-hover` },
 			{ cls: `ring-${world}`, prop: '--tw-ring-color', varRef: `--color-${world}-ring` },
 			{ cls: `border-on-${world}`, prop: 'border-color', varRef: `--color-on-${world}` },
 		];

package/src/design-tokens-v2.js

@@ -360,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;
@@ -563,9 +568,10 @@ export const DEFAULT_SEMANTIC_MAPPINGS = {
 	bgSubtle: '3',
 	bgSubtleHover: '4',
 	text: '11',
+	textHover: '12',
 	textOn: null, // Auto-berechnet
 	border: '7',
-	ring: '8'
+	borderHover: '8'
 };