@webmate-studio/builder 0.2.134 → 0.2.136

package/package.json

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

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

@@ -13,6 +13,7 @@ import {
 	BUTTON_VARIANTS,
 	BUTTON_SIZES,
 	calculateOnColor,
+	DEFAULT_SURFACE_TOKENS,
 	defaultDesignTokensV2
 } from './design-tokens-v2.js';
 
@@ -142,6 +143,22 @@ function generateColorVariables(t, lines) {
 			if (mapping.ring) lines.push(`  --color-${world}-ring: var(--color-${world}-${mapping.ring});`);
 		}
 	}
+
+	// Surface, Text & Border Tokens
+	const surface = t.surface || DEFAULT_SURFACE_TOKENS;
+	lines.push('  /* surface tokens */');
+	if (surface.page) lines.push(`  --color-surface-page: ${resolveColorRef(surface.page, t)};`);
+	if (surface.elevated) lines.push(`  --color-surface-elevated: ${resolveColorRef(surface.elevated, t)};`);
+	if (surface.lifted) lines.push(`  --color-surface-lifted: ${resolveColorRef(surface.lifted, t)};`);
+	if (surface.overlay) lines.push(`  --color-surface-overlay: ${resolveColorRef(surface.overlay, t)};`);
+	lines.push('  /* text tokens */');
+	if (surface.textDefault) lines.push(`  --color-text-default: ${resolveColorRef(surface.textDefault, t)};`);
+	if (surface.textSubtle) lines.push(`  --color-text-subtle: ${resolveColorRef(surface.textSubtle, t)};`);
+	if (surface.textMuted) lines.push(`  --color-text-muted: ${resolveColorRef(surface.textMuted, t)};`);
+	lines.push('  /* border tokens */');
+	if (surface.borderDefault) lines.push(`  --color-border-default: ${resolveColorRef(surface.borderDefault, t)};`);
+	if (surface.borderSubtle) lines.push(`  --color-border-subtle: ${resolveColorRef(surface.borderSubtle, t)};`);
+	if (surface.borderStrong) lines.push(`  --color-border-strong: ${resolveColorRef(surface.borderStrong, t)};`);
 }
 
 
@@ -205,6 +222,42 @@ function generateColorUtilities(t) {
 		}
 	}
 
+	// Surface Utilities: bg-page, bg-elevated, bg-lifted, bg-overlay
+	const surfaceUtils = [
+		{ cls: 'bg-page', prop: 'background-color', varRef: '--color-surface-page' },
+		{ cls: 'bg-elevated', prop: 'background-color', varRef: '--color-surface-elevated' },
+		{ cls: 'bg-lifted', prop: 'background-color', varRef: '--color-surface-lifted' },
+		{ cls: 'bg-overlay', prop: 'background-color', varRef: '--color-surface-overlay' },
+	];
+
+	for (const { cls, prop, varRef } of surfaceUtils) {
+		css += `\n.${cls} { ${prop}: var(${varRef}); }`;
+	}
+
+	// Text Utilities: text-default, text-subtle, text-muted
+	const textUtils = [
+		{ cls: 'text-default', prop: 'color', varRef: '--color-text-default' },
+		{ cls: 'text-subtle', prop: 'color', varRef: '--color-text-subtle' },
+		{ cls: 'text-muted', prop: 'color', varRef: '--color-text-muted' },
+	];
+
+	for (const { cls, prop, varRef } of textUtils) {
+		css += `\n.${cls} { ${prop}: var(${varRef}); }`;
+		css += `\n.hover\\:${cls}:hover { ${prop}: var(${varRef}); }`;
+	}
+
+	// Border Utilities: border-default, border-subtle, border-strong
+	const borderUtils = [
+		{ cls: 'border-default', prop: 'border-color', varRef: '--color-border-default' },
+		{ cls: 'border-subtle', prop: 'border-color', varRef: '--color-border-subtle' },
+		{ cls: 'border-strong', prop: 'border-color', varRef: '--color-border-strong' },
+	];
+
+	for (const { cls, prop, varRef } of borderUtils) {
+		css += `\n.${cls} { ${prop}: var(${varRef}); }`;
+		css += `\n.hover\\:${cls}:hover { ${prop}: var(${varRef}); }`;
+	}
+
 	css += '\n}'; // Close @layer utilities
 	return css;
 }
@@ -686,8 +739,8 @@ function generateBaseStyles(t) {
 	return `\n/* Global baseline styles */
 body {
   font-family: ${fontFamily};
-  background-color: var(--color-neutral-1);
-  color: var(--color-neutral-12);
+  background-color: var(--color-surface-page);
+  color: var(--color-text-default);
 }`;
 }
 

package/src/design-tokens-v2.js

@@ -22,25 +22,29 @@ export function generateColorScale(baseHex) {
 	if (!rgb) return null;
 
 	const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+	const h = hsl.h;
+	const s = hsl.s;
+	const l = hsl.l;
 
 	// Neutral-Erkennung: Basis mit niedriger Sättigung (<15%)
-	// bekommt deutlich reduzierte Sättigung über die gesamte Skala
-	const isNeutral = hsl.s < 15;
-	const sFactor = isNeutral ? 0.3 : 1; // Sättigung auf 30% für Neutraltöne
+	const isNeutral = s < 15;
+	const sFactor = isNeutral ? 0.15 : 1;
+	// Helle Stufen: leichter Hue-Shift für natürlichere Farbverläufe
+	const hShift = isNeutral ? 0 : -5;
 
 	return {
-		1: hslToHex(hsl.h, Math.max(hsl.s * 0.15 * sFactor, isNeutral ? 0 : 2), 97),
-		2: hslToHex(hsl.h, Math.max(hsl.s * 0.2 * sFactor, isNeutral ? 0.5 : 3), 95),
-		3: hslToHex(hsl.h, Math.max(hsl.s * 0.3 * sFactor, isNeutral ? 1 : 5), 91),
-		4: hslToHex(hsl.h, Math.max(hsl.s * 0.4 * sFactor, isNeutral ? 1.5 : 7), 86),
-		5: hslToHex(hsl.h, Math.max(hsl.s * 0.5 * sFactor, isNeutral ? 2 : 9), 80),
-		6: hslToHex(hsl.h, hsl.s * 0.65 * sFactor, 70),
-		7: hslToHex(hsl.h, hsl.s * 0.8 * sFactor, 58),
-		8: hslToHex(hsl.h, hsl.s * 0.9 * sFactor, 48),
-		9: baseHex,
-		10: hslToHex(hsl.h, Math.min(hsl.s * 1.05 * sFactor, 100), Math.max(hsl.l - 8, 10)),
-		11: hslToHex(hsl.h, Math.min(hsl.s * 0.9 * sFactor, 100), Math.max(hsl.l - 20, 15)),
-		12: hslToHex(hsl.h, Math.min(hsl.s * 0.7 * sFactor, 80), Math.max(hsl.l - 35, 8)),
+		1:  isNeutral ? '#ffffff' : hslToHex(h + hShift, Math.min(s * 0.85, 70), 99),
+		2:  hslToHex(h + hShift, Math.min(s * 0.65 * sFactor, isNeutral ? 4 : 55), 97),
+		3:  hslToHex(h + hShift, Math.min(s * 0.72 * sFactor, isNeutral ? 5 : 60), 94),
+		4:  hslToHex(h + hShift, Math.min(s * 0.7 * sFactor, isNeutral ? 5 : 58), 89),
+		5:  hslToHex(h + hShift, Math.min(s * 0.68 * sFactor, isNeutral ? 5 : 55), 84),
+		6:  hslToHex(h - 2,      Math.min(s * 0.63 * sFactor, isNeutral ? 5 : 52), 77),
+		7:  hslToHex(h - 1,      Math.min(s * 0.6 * sFactor, isNeutral ? 5 : 50), 68),
+		8:  hslToHex(h,           Math.min(s * 0.62 * sFactor, isNeutral ? 6 : 50), 53),
+		9:  baseHex,
+		10: hslToHex(h + 2,      Math.min(s * 1.3 * sFactor, isNeutral ? 8 : 100), Math.max(l - 7, 15)),
+		11: hslToHex(h + 1,      Math.min(s * 1.3 * sFactor, isNeutral ? 6 : 100), Math.max(l - 11, 20)),
+		12: hslToHex(h - 5,      Math.min(s * 0.55 * sFactor, isNeutral ? 4 : 45), isNeutral ? 13 : Math.max(l * 0.5, 15)),
 	};
 }
 
@@ -53,27 +57,29 @@ export function generateDarkColorScale(baseHex) {
 	if (!rgb) return null;
 
 	const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+	const h = hsl.h;
+	const s = hsl.s;
+	const l = hsl.l;
 
-	// Neutral-Erkennung: gleiche Logik wie generateColorScale
-	const isNeutral = hsl.s < 15;
-	const sFactor = isNeutral ? 0.3 : 1;
+	const isNeutral = s < 15;
+	const sFactor = isNeutral ? 0.15 : 1;
 
 	// Dark Mode: Basis etwas heller für bessere Sichtbarkeit
-	const darkBase = hslToHex(hsl.h, Math.min(hsl.s * 1.1 * sFactor, 100), Math.min(hsl.l + 10, 65));
+	const darkBase = hslToHex(h, Math.min(s * 1.1 * sFactor, isNeutral ? 8 : 100), Math.min(l + 10, 65));
 
 	return {
-		1: hslToHex(hsl.h, Math.max(hsl.s * 0.3 * sFactor, isNeutral ? 0 : 5), 8),
-		2: hslToHex(hsl.h, Math.max(hsl.s * 0.35 * sFactor, isNeutral ? 0.5 : 6), 12),
-		3: hslToHex(hsl.h, Math.max(hsl.s * 0.45 * sFactor, isNeutral ? 1 : 8), 18),
-		4: hslToHex(hsl.h, Math.max(hsl.s * 0.55 * sFactor, isNeutral ? 1.5 : 10), 24),
-		5: hslToHex(hsl.h, Math.max(hsl.s * 0.6 * sFactor, isNeutral ? 2 : 12), 30),
-		6: hslToHex(hsl.h, hsl.s * 0.65 * sFactor, 38),
-		7: hslToHex(hsl.h, hsl.s * 0.75 * sFactor, 48),
-		8: hslToHex(hsl.h, hsl.s * 0.85 * sFactor, 58),
-		9: darkBase,
-		10: hslToHex(hsl.h, Math.min(hsl.s * 1.0 * sFactor, 100), Math.min(hsl.l + 20, 75)),
-		11: hslToHex(hsl.h, Math.min(hsl.s * 0.7 * sFactor, 80), Math.min(hsl.l + 35, 85)),
-		12: hslToHex(hsl.h, Math.min(hsl.s * 0.4 * sFactor, 50), Math.min(hsl.l + 50, 95)),
+		1:  hslToHex(h,     Math.min(s * 0.35 * sFactor, isNeutral ? 2 : 15), 8),
+		2:  hslToHex(h,     Math.min(s * 0.4 * sFactor, isNeutral ? 3 : 18), 12),
+		3:  hslToHex(h,     Math.min(s * 0.5 * sFactor, isNeutral ? 4 : 22), 18),
+		4:  hslToHex(h,     Math.min(s * 0.55 * sFactor, isNeutral ? 4 : 28), 24),
+		5:  hslToHex(h,     Math.min(s * 0.6 * sFactor, isNeutral ? 5 : 32), 30),
+		6:  hslToHex(h - 2, Math.min(s * 0.63 * sFactor, isNeutral ? 5 : 40), 38),
+		7:  hslToHex(h - 1, Math.min(s * 0.7 * sFactor, isNeutral ? 5 : 48), 48),
+		8:  hslToHex(h,     Math.min(s * 0.8 * sFactor, isNeutral ? 6 : 55), 58),
+		9:  darkBase,
+		10: hslToHex(h + 1, Math.min(s * 0.85 * sFactor, isNeutral ? 6 : 65), Math.min(l + 20, 75)),
+		11: hslToHex(h + 2, Math.min(s * 0.6 * sFactor, isNeutral ? 5 : 50), Math.min(l + 35, 85)),
+		12: hslToHex(h - 3, Math.min(s * 0.35 * sFactor, isNeutral ? 3 : 30), Math.min(l + 50, 95)),
 	};
 }
 
@@ -204,6 +210,45 @@ export const DEFAULT_SEMANTIC_MAPPINGS = {
 };
 
 
+// ─── Surface & Text Tokens ─────────────────────────────────────────────────
+
+/**
+ * Globale Surface-, Text- und Border-Aliase.
+ * Mappen semantische Konzepte (page, elevated, default, muted)
+ * auf Neutral-Stufen. Damit braucht der User kein Radix-Insiderwissen.
+ */
+export const DEFAULT_SURFACE_TOKENS = {
+	page: 'neutral-1',
+	elevated: 'neutral-2',
+	lifted: 'neutral-3',
+	overlay: 'neutral-1/80',
+
+	textDefault: 'neutral-12',
+	textSubtle: 'neutral-11',
+	textMuted: 'neutral-8',
+
+	borderDefault: 'neutral-6',
+	borderSubtle: 'neutral-4',
+	borderStrong: 'neutral-7'
+};
+
+/**
+ * Labels und Beschreibungen für den Editor.
+ */
+export const SURFACE_TOKEN_META = {
+	page:          { label: 'Page',           desc: 'Seitenhintergrund (body)', group: 'surface' },
+	elevated:      { label: 'Elevated',       desc: 'Karten, Modals, Panels', group: 'surface' },
+	lifted:        { label: 'Lifted',         desc: 'Element auf erhöhter Fläche', group: 'surface' },
+	overlay:       { label: 'Overlay',        desc: 'Backdrop / Overlay', group: 'surface' },
+	textDefault:   { label: 'Default',        desc: 'Standard-Textfarbe', group: 'text' },
+	textSubtle:    { label: 'Subtle',         desc: 'Sekundärer Text', group: 'text' },
+	textMuted:     { label: 'Muted',          desc: 'Platzhalter, deaktiviert', group: 'text' },
+	borderDefault: { label: 'Default',        desc: 'Standard-Rahmen', group: 'border' },
+	borderSubtle:  { label: 'Subtle',         desc: 'Dezenter Rahmen', group: 'border' },
+	borderStrong:  { label: 'Strong',         desc: 'Starker Rahmen (Inputs)', group: 'border' }
+};
+
+
 // ─── Typografie ─────────────────────────────────────────────────────────────
 
 /**
@@ -299,6 +344,8 @@ export const defaultDesignTokensV2 = {
 		info: { ...DEFAULT_SEMANTIC_MAPPINGS }
 	},
 
+	surface: { ...DEFAULT_SURFACE_TOKENS },
+
 	darkMode: {
 		enabled: false,
 		colors: null, // Wird bei Aktivierung auto-generiert