@webmate-studio/builder 0.2.130 → 0.2.132

package/src/design-tokens-v2.js

@@ -0,0 +1,739 @@
+/**
+ * Design Token Schema V2
+ *
+ * Single Source of Truth für das gesamte Design-Token-System.
+ * Alle Konsumenten (webmate-studio, webmate-workbench, preview, build)
+ * importieren dieses Schema und die zugehörigen Generatoren.
+ *
+ * Dokumentation: webmate-studio/docs/DESIGN-TOKEN-SCHEMA-V2.md
+ */
+
+// ─── Farbskala-Generierung ──────────────────────────────────────────────────
+
+/**
+ * Generiert eine 12-Stufen-Farbskala aus einer Basisfarbe.
+ * Stufe 9 = Basisfarbe. Stufen 1-8 heller, 10-12 dunkler.
+ */
+export function generateColorScale(baseHex) {
+	const rgb = hexToRgb(baseHex);
+	if (!rgb) return null;
+
+	const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+
+	return {
+		1: hslToHex(hsl.h, Math.max(hsl.s * 0.15, 2), 97),
+		2: hslToHex(hsl.h, Math.max(hsl.s * 0.2, 3), 95),
+		3: hslToHex(hsl.h, Math.max(hsl.s * 0.3, 5), 91),
+		4: hslToHex(hsl.h, Math.max(hsl.s * 0.4, 7), 86),
+		5: hslToHex(hsl.h, Math.max(hsl.s * 0.5, 9), 80),
+		6: hslToHex(hsl.h, hsl.s * 0.65, 70),
+		7: hslToHex(hsl.h, hsl.s * 0.8, 58),
+		8: hslToHex(hsl.h, hsl.s * 0.9, 48),
+		9: baseHex,
+		10: hslToHex(hsl.h, Math.min(hsl.s * 1.05, 100), Math.max(hsl.l - 8, 10)),
+		11: hslToHex(hsl.h, Math.min(hsl.s * 0.9, 100), Math.max(hsl.l - 20, 15)),
+		12: hslToHex(hsl.h, Math.min(hsl.s * 0.7, 80), Math.max(hsl.l - 35, 8)),
+	};
+}
+
+/**
+ * Generiert eine invertierte 12-Stufen-Skala für Dark Mode.
+ * Stufe 1 = dunkelster Wert, Stufe 12 = hellster.
+ */
+export function generateDarkColorScale(baseHex) {
+	const rgb = hexToRgb(baseHex);
+	if (!rgb) return null;
+
+	const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+
+	// Dark Mode: Basis etwas heller für bessere Sichtbarkeit
+	const darkBase = hslToHex(hsl.h, Math.min(hsl.s * 1.1, 100), Math.min(hsl.l + 10, 65));
+
+	return {
+		1: hslToHex(hsl.h, Math.max(hsl.s * 0.3, 5), 8),
+		2: hslToHex(hsl.h, Math.max(hsl.s * 0.35, 6), 12),
+		3: hslToHex(hsl.h, Math.max(hsl.s * 0.45, 8), 18),
+		4: hslToHex(hsl.h, Math.max(hsl.s * 0.55, 10), 24),
+		5: hslToHex(hsl.h, Math.max(hsl.s * 0.6, 12), 30),
+		6: hslToHex(hsl.h, hsl.s * 0.65, 38),
+		7: hslToHex(hsl.h, hsl.s * 0.75, 48),
+		8: hslToHex(hsl.h, hsl.s * 0.85, 58),
+		9: darkBase,
+		10: hslToHex(hsl.h, Math.min(hsl.s * 1.0, 100), Math.min(hsl.l + 20, 75)),
+		11: hslToHex(hsl.h, Math.min(hsl.s * 0.7, 80), Math.min(hsl.l + 35, 85)),
+		12: hslToHex(hsl.h, Math.min(hsl.s * 0.4, 50), Math.min(hsl.l + 50, 95)),
+	};
+}
+
+/**
+ * Berechnet die beste Kontrastfarbe für Text auf einer Hintergrundfarbe.
+ * Gibt eine Stufe der Neutral-Skala zurück.
+ */
+export function calculateOnColor(bgHex, neutralScale) {
+	const bgRgb = hexToRgb(bgHex);
+	if (!bgRgb) return neutralScale['12']; // Fallback: dunkelster Neutral
+
+	const bgLuminance = relativeLuminance(bgRgb.r, bgRgb.g, bgRgb.b);
+
+	// Teste helle und dunkle Neutral-Stufen
+	const light = neutralScale['1'] || '#ffffff';
+	const dark = neutralScale['12'] || '#111827';
+
+	const lightRgb = hexToRgb(light);
+	const darkRgb = hexToRgb(dark);
+
+	const lightContrast = contrastRatio(bgLuminance, relativeLuminance(lightRgb.r, lightRgb.g, lightRgb.b));
+	const darkContrast = contrastRatio(bgLuminance, relativeLuminance(darkRgb.r, darkRgb.g, darkRgb.b));
+
+	return lightContrast > darkContrast ? light : dark;
+}
+
+
+// ─── Farb-Hilfsfunktionen ───────────────────────────────────────────────────
+
+function hexToRgb(hex) {
+	if (!hex || typeof hex !== 'string') return null;
+	hex = hex.replace('#', '');
+	if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
+	if (hex.length !== 6) return null;
+	return {
+		r: parseInt(hex.slice(0, 2), 16),
+		g: parseInt(hex.slice(2, 4), 16),
+		b: parseInt(hex.slice(4, 6), 16)
+	};
+}
+
+function rgbToHex(r, g, b) {
+	return '#' + [r, g, b].map(v => {
+		const hex = Math.max(0, Math.min(255, Math.round(v))).toString(16);
+		return hex.length === 1 ? '0' + hex : hex;
+	}).join('');
+}
+
+function rgbToHsl(r, g, b) {
+	r /= 255; g /= 255; b /= 255;
+	const max = Math.max(r, g, b), min = Math.min(r, g, b);
+	let h, s;
+	const l = (max + min) / 2;
+
+	if (max === min) {
+		h = s = 0;
+	} else {
+		const d = max - min;
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+		switch (max) {
+			case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+			case g: h = ((b - r) / d + 2) / 6; break;
+			case b: h = ((r - g) / d + 4) / 6; break;
+		}
+	}
+
+	return { h: h * 360, s: s * 100, l: l * 100 };
+}
+
+function hslToHex(h, s, l) {
+	s = Math.max(0, Math.min(100, s));
+	l = Math.max(0, Math.min(100, l));
+	h = ((h % 360) + 360) % 360;
+
+	const sNorm = s / 100;
+	const lNorm = l / 100;
+	const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+	const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+	const m = lNorm - c / 2;
+
+	let r, g, b;
+	if (h < 60) { r = c; g = x; b = 0; }
+	else if (h < 120) { r = x; g = c; b = 0; }
+	else if (h < 180) { r = 0; g = c; b = x; }
+	else if (h < 240) { r = 0; g = x; b = c; }
+	else if (h < 300) { r = x; g = 0; b = c; }
+	else { r = c; g = 0; b = x; }
+
+	return rgbToHex((r + m) * 255, (g + m) * 255, (b + m) * 255);
+}
+
+function relativeLuminance(r, g, b) {
+	const [rs, gs, bs] = [r, g, b].map(c => {
+		c = c / 255;
+		return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+	});
+	return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+function contrastRatio(l1, l2) {
+	const lighter = Math.max(l1, l2);
+	const darker = Math.min(l1, l2);
+	return (lighter + 0.05) / (darker + 0.05);
+}
+
+
+// ─── Farbwelten ─────────────────────────────────────────────────────────────
+
+/**
+ * Die 8 Farbwelten des V2-Systems.
+ * Brand-Welten (primary, secondary, accent) + Status-Welten (success, warning, error, info) + Neutral.
+ */
+export const COLOR_WORLDS = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'neutral'];
+export const SEMANTIC_COLOR_WORLDS = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info'];
+
+/**
+ * Semantische Utility-Defaults: Welche Stufe mappt auf welchen Alias.
+ */
+export const DEFAULT_SEMANTIC_MAPPINGS = {
+	bg: '9',
+	bgHover: '10',
+	bgSubtle: '3',
+	bgSubtleHover: '4',
+	text: '11',
+	textOn: null, // Auto-berechnet
+	border: '7',
+	ring: '8'
+};
+
+
+// ─── Typografie ─────────────────────────────────────────────────────────────
+
+/**
+ * Die 4 Stimmen des Typografie-Systems.
+ */
+export const TEXT_VOICES = ['display', 'body', 'ui', 'accent'];
+
+/**
+ * Jede Stimme hat 5 Stufen (1 = größte, 5 = kleinste).
+ */
+export const TEXT_LEVELS = [1, 2, 3, 4, 5];
+
+/**
+ * Semantische Text-Aliase mit Defaults.
+ */
+export const DEFAULT_TEXT_ALIASES = {
+	hero: 'display-1',
+	headline: 'display-3',
+	title: 'display-5',
+	body: 'body-3',
+	label: 'ui-3',
+	caption: 'body-4',
+	overline: 'accent-4',
+	fine: 'body-5'
+};
+
+
+// ─── Buttons ────────────────────────────────────────────────────────────────
+
+/**
+ * Die 6 festen Button-Varianten.
+ */
+export const BUTTON_VARIANTS = ['filled', 'tonal', 'outline', 'ghost', 'text', 'destructive'];
+
+/**
+ * Die 3 Button-Größen.
+ */
+export const BUTTON_SIZES = ['sm', 'md', 'lg'];
+
+
+// ─── Default Token-Objekt ───────────────────────────────────────────────────
+
+/**
+ * Vollständiges Default-Token-Objekt für V2.
+ * Wird verwendet wenn kein Design System konfiguriert ist.
+ */
+export const defaultDesignTokensV2 = {
+	version: 2,
+
+	// ── Farben ──
+	colors: {
+		primary: {
+			base: '#1E40AF',
+			scale: generateColorScale('#1E40AF')
+		},
+		secondary: {
+			base: '#6366F1',
+			scale: generateColorScale('#6366F1')
+		},
+		accent: {
+			base: '#8B5CF6',
+			scale: generateColorScale('#8B5CF6')
+		},
+		success: {
+			base: '#16A34A',
+			scale: generateColorScale('#16A34A')
+		},
+		warning: {
+			base: '#D97706',
+			scale: generateColorScale('#D97706')
+		},
+		error: {
+			base: '#DC2626',
+			scale: generateColorScale('#DC2626')
+		},
+		info: {
+			base: '#2563EB',
+			scale: generateColorScale('#2563EB')
+		},
+		neutral: {
+			base: null, // Neutral hat keine Basisfarbe
+			scale: {
+				1: '#FFFFFF',
+				2: '#F9FAFB',
+				3: '#F3F4F6',
+				4: '#E5E7EB',
+				5: '#D1D5DB',
+				6: '#C0C5CD',
+				7: '#9CA3AF',
+				8: '#6B7280',
+				9: '#4B5563',
+				10: '#374151',
+				11: '#1F2937',
+				12: '#111827'
+			}
+		}
+	},
+
+	semanticMappings: {
+		primary: { ...DEFAULT_SEMANTIC_MAPPINGS },
+		secondary: { ...DEFAULT_SEMANTIC_MAPPINGS },
+		accent: { ...DEFAULT_SEMANTIC_MAPPINGS },
+		success: { ...DEFAULT_SEMANTIC_MAPPINGS },
+		warning: { ...DEFAULT_SEMANTIC_MAPPINGS },
+		error: { ...DEFAULT_SEMANTIC_MAPPINGS },
+		info: { ...DEFAULT_SEMANTIC_MAPPINGS }
+	},
+
+	darkMode: {
+		enabled: false,
+		colors: null, // Wird bei Aktivierung auto-generiert
+		semanticMappings: null
+	},
+
+	// ── Typografie ──
+	typography: {
+		fonts: [
+			{
+				name: 'Inter',
+				source: 'fontsource',
+				id: 'fontsource:inter',
+				fallback: 'system-ui, -apple-system, sans-serif'
+			}
+		],
+		monoFont: {
+			name: 'JetBrains Mono',
+			source: 'fontsource',
+			id: 'fontsource:jetbrains-mono',
+			fallback: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
+		},
+		textStyles: {
+			display: {
+				1: {
+					font: 'Inter',
+					fontSize: { base: '2.5rem', md: '3.5rem', lg: '4.5rem' },
+					fontWeight: 700,
+					lineHeight: { base: '1.15', md: '1.1' },
+					letterSpacing: '-0.02em',
+					textTransform: 'none'
+				},
+				2: {
+					font: 'Inter',
+					fontSize: { base: '2rem', md: '2.5rem', lg: '3rem' },
+					fontWeight: 700,
+					lineHeight: '1.15',
+					letterSpacing: '-0.015em',
+					textTransform: 'none'
+				},
+				3: {
+					font: 'Inter',
+					fontSize: { base: '1.5rem', md: '1.75rem', lg: '2rem' },
+					fontWeight: 600,
+					lineHeight: '1.2',
+					letterSpacing: '-0.01em',
+					textTransform: 'none'
+				},
+				4: {
+					font: 'Inter',
+					fontSize: { base: '1.25rem', md: '1.5rem' },
+					fontWeight: 600,
+					lineHeight: '1.3',
+					letterSpacing: '-0.005em',
+					textTransform: 'none'
+				},
+				5: {
+					font: 'Inter',
+					fontSize: { base: '1.125rem', md: '1.25rem' },
+					fontWeight: 600,
+					lineHeight: '1.3',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				}
+			},
+			body: {
+				1: {
+					font: 'Inter',
+					fontSize: { base: '1.125rem', md: '1.25rem' },
+					fontWeight: 400,
+					lineHeight: '1.6',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				2: {
+					font: 'Inter',
+					fontSize: '1.0625rem',
+					fontWeight: 400,
+					lineHeight: '1.6',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				3: {
+					font: 'Inter',
+					fontSize: '1rem',
+					fontWeight: 400,
+					lineHeight: '1.5',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				4: {
+					font: 'Inter',
+					fontSize: '0.875rem',
+					fontWeight: 400,
+					lineHeight: '1.5',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				5: {
+					font: 'Inter',
+					fontSize: '0.75rem',
+					fontWeight: 400,
+					lineHeight: '1.5',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				}
+			},
+			ui: {
+				1: {
+					font: 'Inter',
+					fontSize: '1.125rem',
+					fontWeight: 500,
+					lineHeight: '1.4',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				2: {
+					font: 'Inter',
+					fontSize: '1rem',
+					fontWeight: 500,
+					lineHeight: '1.4',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				3: {
+					font: 'Inter',
+					fontSize: '0.875rem',
+					fontWeight: 500,
+					lineHeight: '1.4',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				4: {
+					font: 'Inter',
+					fontSize: '0.8125rem',
+					fontWeight: 500,
+					lineHeight: '1.4',
+					letterSpacing: '0.01em',
+					textTransform: 'none'
+				},
+				5: {
+					font: 'Inter',
+					fontSize: '0.6875rem',
+					fontWeight: 500,
+					lineHeight: '1.4',
+					letterSpacing: '0.02em',
+					textTransform: 'none'
+				}
+			},
+			accent: {
+				1: {
+					font: 'Inter',
+					fontSize: { base: '1.5rem', md: '1.75rem', lg: '2rem' },
+					fontWeight: 400,
+					lineHeight: '1.5',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				2: {
+					font: 'Inter',
+					fontSize: { base: '1.25rem', md: '1.5rem' },
+					fontWeight: 400,
+					lineHeight: '1.4',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				3: {
+					font: 'Inter',
+					fontSize: '1.125rem',
+					fontWeight: 400,
+					lineHeight: '1.4',
+					letterSpacing: '0em',
+					textTransform: 'none'
+				},
+				4: {
+					font: 'Inter',
+					fontSize: '0.8125rem',
+					fontWeight: 600,
+					lineHeight: '1.4',
+					letterSpacing: '0.08em',
+					textTransform: 'uppercase'
+				},
+				5: {
+					font: 'Inter',
+					fontSize: '0.6875rem',
+					fontWeight: 600,
+					lineHeight: '1.4',
+					letterSpacing: '0.1em',
+					textTransform: 'uppercase'
+				}
+			}
+		},
+		aliases: { ...DEFAULT_TEXT_ALIASES }
+	},
+
+	// ── Buttons ──
+	buttons: {
+		sizes: {
+			sm: {
+				paddingX: '0.75rem',
+				paddingY: '0.375rem',
+				fontSize: '0.8125rem',
+				fontWeight: 500,
+				lineHeight: '1.4',
+				letterSpacing: '0.01em',
+				borderRadius: '0.375rem',
+				minHeight: '2rem',
+				gap: '0.375rem',
+				iconSize: '1rem'
+			},
+			md: {
+				paddingX: '1.25rem',
+				paddingY: '0.625rem',
+				fontSize: '0.875rem',
+				fontWeight: 500,
+				lineHeight: '1.4',
+				letterSpacing: '0em',
+				borderRadius: '0.5rem',
+				minHeight: '2.5rem',
+				gap: '0.5rem',
+				iconSize: '1.25rem'
+			},
+			lg: {
+				paddingX: '1.75rem',
+				paddingY: '0.875rem',
+				fontSize: '1rem',
+				fontWeight: 600,
+				lineHeight: '1.4',
+				letterSpacing: '0em',
+				borderRadius: '0.625rem',
+				minHeight: '3rem',
+				gap: '0.625rem',
+				iconSize: '1.5rem'
+			}
+		},
+		variants: {
+			filled: {
+				normal: {
+					bg: 'primary-9',
+					bgHover: 'primary-10',
+					text: 'on-primary',
+					textHover: 'on-primary',
+					border: 'none',
+					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
+					focusRingColor: 'primary-8',
+					customCSS: null
+				},
+				onSurface: {
+					bg: 'neutral-1',
+					bgHover: 'neutral-2',
+					text: 'neutral-12',
+					textHover: 'neutral-12',
+					border: 'none',
+					borderHover: 'none',
+					customCSS: null
+				}
+			},
+			tonal: {
+				normal: {
+					bg: 'primary-3',
+					bgHover: 'primary-4',
+					text: 'primary-11',
+					textHover: 'primary-12',
+					border: 'none',
+					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
+					focusRingColor: 'primary-8',
+					customCSS: null
+				},
+				onSurface: {
+					bg: 'neutral-1/15',
+					bgHover: 'neutral-1/25',
+					text: 'on-primary',
+					textHover: 'on-primary',
+					border: 'none',
+					borderHover: 'none',
+					customCSS: null
+				}
+			},
+			outline: {
+				normal: {
+					bg: 'transparent',
+					bgHover: 'primary-3',
+					text: 'primary-11',
+					textHover: 'primary-12',
+					border: 'primary-7',
+					borderHover: 'primary-8',
+					shadow: 'none',
+					shadowHover: 'none',
+					focusRingColor: 'primary-8',
+					customCSS: null
+				},
+				onSurface: {
+					bg: 'transparent',
+					bgHover: 'neutral-1/15',
+					text: 'on-primary',
+					textHover: 'on-primary',
+					border: 'on-primary/40',
+					borderHover: 'on-primary/70',
+					customCSS: null
+				}
+			},
+			ghost: {
+				normal: {
+					bg: 'transparent',
+					bgHover: 'neutral-3',
+					text: 'primary-11',
+					textHover: 'primary-12',
+					border: 'none',
+					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
+					focusRingColor: 'primary-8',
+					customCSS: null
+				},
+				onSurface: {
+					bg: 'transparent',
+					bgHover: 'neutral-1/15',
+					text: 'on-primary',
+					textHover: 'on-primary',
+					border: 'none',
+					borderHover: 'none',
+					customCSS: null
+				}
+			},
+			text: {
+				normal: {
+					bg: 'transparent',
+					bgHover: 'transparent',
+					text: 'primary-11',
+					textHover: 'primary-12',
+					border: 'none',
+					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
+					textDecoration: 'none',
+					textDecorationHover: 'underline',
+					focusRingColor: 'primary-8',
+					customCSS: null
+				},
+				onSurface: {
+					bg: 'transparent',
+					bgHover: 'transparent',
+					text: 'on-primary',
+					textHover: 'on-primary',
+					textDecoration: 'none',
+					textDecorationHover: 'underline',
+					customCSS: null
+				}
+			},
+			destructive: {
+				normal: {
+					bg: 'error-9',
+					bgHover: 'error-10',
+					text: 'on-error',
+					textHover: 'on-error',
+					border: 'none',
+					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
+					focusRingColor: 'error-8',
+					customCSS: null
+				},
+				onSurface: {
+					bg: 'error-9',
+					bgHover: 'error-10',
+					text: 'on-error',
+					textHover: 'on-error',
+					border: 'none',
+					borderHover: 'none',
+					customCSS: null
+				}
+			}
+		},
+		global: {
+			transition: 'all 150ms ease',
+			focusRingWidth: '2px',
+			focusRingOffset: '2px',
+			disabledOpacity: 0.5,
+			onSurfaceFocusRingColor: 'on-primary/50'
+		}
+	},
+
+	// ── Spacing ──
+	spacing: {
+		component: {
+			base: '3rem',
+			sm: '3rem',
+			md: '3.5rem',
+			lg: '4rem',
+			xl: '4.5rem',
+			'2xl': '5rem'
+		}
+	},
+
+	// ── Layout ──
+	borderRadius: '0.25rem',
+	borderWidth: '1px',
+
+	container: {
+		sm: '640px',
+		md: '768px',
+		lg: '1024px',
+		xl: '1280px',
+		'2xl': '1536px'
+	},
+
+	breakpoints: {
+		sm: '640px',
+		md: '768px',
+		lg: '1024px',
+		xl: '1280px',
+		'2xl': '1536px'
+	}
+};
+
+
+// ─── Erkennung ──────────────────────────────────────────────────────────────
+
+/**
+ * Prüft ob ein Token-Objekt V2-Format hat.
+ */
+export function isV2Format(tokens) {
+	return tokens && tokens.version === 2;
+}
+
+/**
+ * Prüft ob ein Token-Objekt V1-Format hat.
+ */
+export function isV1Format(tokens) {
+	if (!tokens) return false;
+	// V1 hat flache Farben (tokens.colors.primary ist ein String)
+	return tokens.colors && typeof tokens.colors.primary === 'string';
+}