@webmate-studio/builder 0.2.130 → 0.2.132

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

@@ -0,0 +1,510 @@
+/**
+ * Design Token V2 — Migration + Validation
+ *
+ * Konvertiert V1-Token-Objekte in V2-Format.
+ * Validiert V2-Token-Objekte und füllt fehlende Felder mit Defaults auf.
+ */
+
+import {
+	defaultDesignTokensV2,
+	generateColorScale,
+	isV1Format,
+	isV2Format,
+	COLOR_WORLDS,
+	SEMANTIC_COLOR_WORLDS,
+	TEXT_VOICES,
+	TEXT_LEVELS,
+	BUTTON_VARIANTS,
+	BUTTON_SIZES,
+	DEFAULT_SEMANTIC_MAPPINGS,
+	DEFAULT_TEXT_ALIASES
+} from './design-tokens-v2.js';
+
+
+// ─── Hauptfunktionen ────────────────────────────────────────────────────────
+
+/**
+ * Migriert ein V1-Token-Objekt zu V2.
+ * Gibt ein vollständiges V2-Token-Objekt zurück.
+ */
+export function migrateDesignTokensV1toV2(v1) {
+	if (!v1) return structuredClone(defaultDesignTokensV2);
+	if (isV2Format(v1)) return validateDesignTokensV2(v1);
+
+	const v2 = structuredClone(defaultDesignTokensV2);
+
+	// ── Farben migrieren ──
+	migrateColors(v1, v2);
+
+	// ── Fonts migrieren ──
+	migrateFonts(v1, v2);
+
+	// ── Text-Stile migrieren ──
+	migrateTextStyles(v1, v2);
+
+	// ── Buttons migrieren ──
+	migrateButtons(v1, v2);
+
+	// ── Layout migrieren ──
+	if (v1.borderRadius) v2.borderRadius = v1.borderRadius;
+	if (v1.borderWidth) v2.borderWidth = v1.borderWidth;
+	if (v1.spacing) v2.spacing = structuredClone(v1.spacing);
+	if (v1.container) v2.container = structuredClone(v1.container);
+	if (v1.breakpoints) v2.breakpoints = structuredClone(v1.breakpoints);
+
+	return v2;
+}
+
+/**
+ * Validiert ein V2-Token-Objekt und füllt fehlende Felder auf.
+ * Gibt ein vollständiges V2-Token-Objekt zurück.
+ */
+export function validateDesignTokensV2(tokens) {
+	if (!tokens) return structuredClone(defaultDesignTokensV2);
+
+	const v2 = structuredClone(tokens);
+	v2.version = 2;
+
+	// ── Farben validieren ──
+	if (!v2.colors) v2.colors = structuredClone(defaultDesignTokensV2.colors);
+
+	for (const world of COLOR_WORLDS) {
+		if (!v2.colors[world]) {
+			v2.colors[world] = structuredClone(defaultDesignTokensV2.colors[world]);
+		} else if (v2.colors[world].base && !v2.colors[world].scale) {
+			// Basisfarbe vorhanden aber keine Skala → generieren
+			v2.colors[world].scale = generateColorScale(v2.colors[world].base);
+		}
+	}
+
+	// Semantic Mappings
+	if (!v2.semanticMappings) v2.semanticMappings = {};
+	for (const world of SEMANTIC_COLOR_WORLDS) {
+		if (!v2.semanticMappings[world]) {
+			v2.semanticMappings[world] = { ...DEFAULT_SEMANTIC_MAPPINGS };
+		}
+	}
+
+	// Dark Mode
+	if (!v2.darkMode) v2.darkMode = { enabled: false, colors: null, semanticMappings: null };
+
+	// ── Typografie validieren ──
+	if (!v2.typography) v2.typography = structuredClone(defaultDesignTokensV2.typography);
+	if (!v2.typography.fonts || v2.typography.fonts.length === 0) {
+		v2.typography.fonts = structuredClone(defaultDesignTokensV2.typography.fonts);
+	}
+	if (!v2.typography.monoFont) {
+		v2.typography.monoFont = structuredClone(defaultDesignTokensV2.typography.monoFont);
+	}
+
+	// Text Styles
+	if (!v2.typography.textStyles) v2.typography.textStyles = structuredClone(defaultDesignTokensV2.typography.textStyles);
+	for (const voice of TEXT_VOICES) {
+		if (!v2.typography.textStyles[voice]) {
+			v2.typography.textStyles[voice] = structuredClone(defaultDesignTokensV2.typography.textStyles[voice]);
+		}
+		for (const level of TEXT_LEVELS) {
+			if (!v2.typography.textStyles[voice][level]) {
+				v2.typography.textStyles[voice][level] = structuredClone(defaultDesignTokensV2.typography.textStyles[voice][level]);
+			}
+		}
+	}
+
+	// Aliases
+	if (!v2.typography.aliases) v2.typography.aliases = { ...DEFAULT_TEXT_ALIASES };
+
+	// ── Buttons validieren ──
+	if (!v2.buttons) v2.buttons = structuredClone(defaultDesignTokensV2.buttons);
+	if (!v2.buttons.sizes) v2.buttons.sizes = structuredClone(defaultDesignTokensV2.buttons.sizes);
+	if (!v2.buttons.variants) v2.buttons.variants = structuredClone(defaultDesignTokensV2.buttons.variants);
+	if (!v2.buttons.global) v2.buttons.global = structuredClone(defaultDesignTokensV2.buttons.global);
+
+	for (const size of BUTTON_SIZES) {
+		if (!v2.buttons.sizes[size]) {
+			v2.buttons.sizes[size] = structuredClone(defaultDesignTokensV2.buttons.sizes[size]);
+		}
+	}
+	for (const variant of BUTTON_VARIANTS) {
+		if (!v2.buttons.variants[variant]) {
+			v2.buttons.variants[variant] = structuredClone(defaultDesignTokensV2.buttons.variants[variant]);
+		}
+		if (!v2.buttons.variants[variant].normal) {
+			v2.buttons.variants[variant].normal = structuredClone(defaultDesignTokensV2.buttons.variants[variant].normal);
+		}
+		if (!v2.buttons.variants[variant].onSurface) {
+			v2.buttons.variants[variant].onSurface = structuredClone(defaultDesignTokensV2.buttons.variants[variant].onSurface);
+		}
+	}
+
+	// ── Layout validieren ──
+	if (!v2.spacing) v2.spacing = structuredClone(defaultDesignTokensV2.spacing);
+	if (!v2.borderRadius) v2.borderRadius = defaultDesignTokensV2.borderRadius;
+	if (!v2.borderWidth) v2.borderWidth = defaultDesignTokensV2.borderWidth;
+	if (!v2.container) v2.container = structuredClone(defaultDesignTokensV2.container);
+	if (!v2.breakpoints) v2.breakpoints = structuredClone(defaultDesignTokensV2.breakpoints);
+
+	return v2;
+}
+
+
+// ─── Farb-Migration ─────────────────────────────────────────────────────────
+
+function migrateColors(v1, v2) {
+	if (!v1.colors) return;
+
+	// V1 hat flache Farben → V2 braucht 12-Stufen-Skalen
+
+	// Primary: v1.colors.primary → v2.colors.primary.base + Skala
+	migrateColorWorld(v1, v2, 'primary');
+	migrateColorWorld(v1, v2, 'secondary');
+	migrateColorWorld(v1, v2, 'success');
+	migrateColorWorld(v1, v2, 'warning');
+	migrateColorWorld(v1, v2, 'error');
+	migrateColorWorld(v1, v2, 'info');
+
+	// Accent: V1 hat bgAccentBase als Hauptfarbe
+	if (v1.colors.bgAccentBase) {
+		v2.colors.accent = {
+			base: v1.colors.bgAccentBase,
+			scale: generateColorScale(v1.colors.bgAccentBase)
+		};
+	}
+
+	// Neutral: V1 hat keine Neutral-Skala → Defaults behalten
+	// Aber wir können die V1 Hintergrund-/Text-Werte als Hinweis nehmen
+	if (v1.colors.bgBody && v1.colors.textBase) {
+		// Prüfe ob das ein helles oder dunkles Theme ist
+		const bgIsLight = isLightColor(v1.colors.bgBody);
+		if (!bgIsLight) {
+			// Dunkles Theme → invertierte Neutral-Skala
+			v2.colors.neutral.scale = {
+				1: v1.colors.bgBody || '#0F172A',
+				2: v1.colors.bgBase || '#1E293B',
+				3: v1.colors.bgElevated || '#334155',
+				4: '#475569',
+				5: '#64748B',
+				6: '#78859B',
+				7: '#94A3B8',
+				8: v1.colors.textMuted || '#A8B5C7',
+				9: '#CBD5E1',
+				10: '#D5DDE7',
+				11: v1.colors.textSubtle || '#E2E8F0',
+				12: v1.colors.textBase || '#F8FAFC'
+			};
+		}
+	}
+}
+
+function migrateColorWorld(v1, v2, world) {
+	if (v1.colors[world]) {
+		v2.colors[world] = {
+			base: v1.colors[world],
+			scale: generateColorScale(v1.colors[world])
+		};
+	}
+}
+
+function isLightColor(hex) {
+	if (!hex) return true;
+	const r = parseInt(hex.slice(1, 3), 16);
+	const g = parseInt(hex.slice(3, 5), 16);
+	const b = parseInt(hex.slice(5, 7), 16);
+	// Relative luminance
+	return (0.299 * r + 0.587 * g + 0.114 * b) > 128;
+}
+
+
+// ─── Font-Migration ─────────────────────────────────────────────────────────
+
+function migrateFonts(v1, v2) {
+	if (!v1.typography) return;
+
+	const fonts = [];
+	const seen = new Set();
+
+	// Sammle einzigartige Fonts aus V1-Slots
+	const slots = ['heading', 'body', 'accent'];
+	const fontIds = {
+		heading: v1.typography.fontHeadingId,
+		body: v1.typography.fontBodyId,
+		accent: v1.typography.fontAccentId
+	};
+
+	for (const slot of slots) {
+		const familyString = v1.typography.fontFamily?.[slot];
+		if (!familyString) continue;
+
+		// Extrahiere den ersten Font-Namen aus dem CSS font-family string
+		const name = familyString.split(',')[0].trim().replace(/['"]/g, '');
+		if (seen.has(name)) continue;
+		seen.add(name);
+
+		fonts.push({
+			name,
+			source: fontIds[slot] ? 'fontsource' : 'system',
+			id: fontIds[slot] || null,
+			fallback: familyString.split(',').slice(1).map(s => s.trim()).join(', ') || 'sans-serif'
+		});
+	}
+
+	if (fonts.length > 0) v2.typography.fonts = fonts;
+
+	// Mono
+	if (v1.typography.fontFamily?.mono) {
+		const monoName = v1.typography.fontFamily.mono.split(',')[0].trim().replace(/['"]/g, '');
+		const monoFallback = v1.typography.fontFamily.mono.split(',').slice(1).map(s => s.trim()).join(', ') || 'monospace';
+		v2.typography.monoFont = {
+			name: monoName,
+			source: v1.typography.fontMonoId ? 'fontsource' : 'system',
+			id: v1.typography.fontMonoId || null,
+			fallback: monoFallback
+		};
+	}
+}
+
+
+// ─── Text-Stil-Migration ────────────────────────────────────────────────────
+
+function migrateTextStyles(v1, v2) {
+	if (!v1.textStyles) return;
+
+	// Finde Font-Namen für V1-Slots
+	const headingFont = v2.typography.fonts.find(f =>
+		v1.typography?.fontFamily?.heading?.includes(f.name))?.name || v2.typography.fonts[0]?.name || 'Inter';
+	const bodyFont = v2.typography.fonts.find(f =>
+		v1.typography?.fontFamily?.body?.includes(f.name))?.name || v2.typography.fonts[0]?.name || 'Inter';
+	const accentFont = v2.typography.fonts.find(f =>
+		v1.typography?.fontFamily?.accent?.includes(f.name))?.name || bodyFont;
+
+	// Display: V1 display/heading1-5 → V2 display.1-5
+	const displayMap = {
+		display: 1,
+		heading1: 2,
+		heading2: 3,
+		heading3: 4,
+		heading4: 4, // heading4 und heading5 werden zu display.4 und display.5
+		heading5: 5,
+		heading6: 5
+	};
+
+	for (const [v1Name, v2Level] of Object.entries(displayMap)) {
+		if (v1.textStyles[v1Name]) {
+			const s = v1.textStyles[v1Name];
+			v2.typography.textStyles.display[v2Level] = {
+				font: headingFont,
+				fontSize: s.fontSize || v2.typography.textStyles.display[v2Level].fontSize,
+				fontWeight: s.fontWeight || 600,
+				lineHeight: s.lineHeight || '1.2',
+				letterSpacing: s.letterSpacing || '0em',
+				textTransform: s.textTransform || 'none'
+			};
+		}
+	}
+
+	// Body: V1 lead/body/bodySmall/caption → V2 body.1-5
+	const bodyMap = {
+		lead: 1,
+		body: 3,
+		bodySmall: 4,
+		caption: 5
+	};
+
+	for (const [v1Name, v2Level] of Object.entries(bodyMap)) {
+		if (v1.textStyles[v1Name]) {
+			const s = v1.textStyles[v1Name];
+			v2.typography.textStyles.body[v2Level] = {
+				font: bodyFont,
+				fontSize: s.fontSize || v2.typography.textStyles.body[v2Level].fontSize,
+				fontWeight: s.fontWeight || 400,
+				lineHeight: s.lineHeight || '1.5',
+				letterSpacing: s.letterSpacing || '0em',
+				textTransform: s.textTransform || 'none'
+			};
+		}
+	}
+
+	// UI: V1 label → V2 ui.3
+	if (v1.textStyles.label) {
+		const s = v1.textStyles.label;
+		v2.typography.textStyles.ui[3] = {
+			font: bodyFont,
+			fontSize: s.fontSize || '0.875rem',
+			fontWeight: s.fontWeight || 500,
+			lineHeight: s.lineHeight || '1.4',
+			letterSpacing: s.letterSpacing || '0em',
+			textTransform: s.textTransform || 'none'
+		};
+	}
+
+	// Accent: V1 overlines → V2 accent.4-5
+	const overlineMap = {
+		overlineDisplay: 3,
+		overlineHeading1: 4,
+		overlineHeading2: 4,
+		overlineHeading3: 5,
+		overlineHeading4: 5,
+		overlineHeading5: 5,
+		overlineHeading6: 5
+	};
+
+	for (const [v1Name, v2Level] of Object.entries(overlineMap)) {
+		if (v1.textStyles[v1Name]) {
+			const s = v1.textStyles[v1Name];
+			v2.typography.textStyles.accent[v2Level] = {
+				font: accentFont,
+				fontSize: s.fontSize || v2.typography.textStyles.accent[v2Level].fontSize,
+				fontWeight: s.fontWeight || 600,
+				lineHeight: s.lineHeight || '1.4',
+				letterSpacing: s.letterSpacing || '0.08em',
+				textTransform: s.textTransform || 'uppercase'
+			};
+		}
+	}
+}
+
+
+// ─── Button-Migration ───────────────────────────────────────────────────────
+
+function migrateButtons(v1, v2) {
+	if (!v1.buttons) return;
+
+	// Sizes: V1 small/medium/large → V2 sm/md/lg
+	const sizeMap = { small: 'sm', medium: 'md', large: 'lg' };
+	if (v1.buttons.sizes) {
+		for (const [v1Size, v2Size] of Object.entries(sizeMap)) {
+			const s = v1.buttons.sizes[v1Size];
+			if (!s) continue;
+
+			v2.buttons.sizes[v2Size] = {
+				paddingX: typeof s.paddingX === 'number' ? `${s.paddingX / 16}rem` : s.paddingX,
+				paddingY: typeof s.paddingY === 'number' ? `${s.paddingY / 16}rem` : s.paddingY,
+				fontSize: typeof s.fontSize === 'number' ? `${s.fontSize / 16}rem` : s.fontSize,
+				fontWeight: 500,
+				lineHeight: '1.4',
+				letterSpacing: '0em',
+				borderRadius: typeof s.borderRadius === 'number' ? `${s.borderRadius / 16}rem` : s.borderRadius,
+				minHeight: typeof s.minHeight === 'number' ? `${s.minHeight / 16}rem` : s.minHeight,
+				gap: typeof s.gap === 'number' ? `${s.gap / 16}rem` : s.gap,
+				iconSize: typeof s.iconSize === 'number' ? `${s.iconSize / 16}rem` : s.iconSize
+			};
+		}
+	}
+
+	// Variants: V1 primary → V2 filled, V1 secondary → V2 tonal, etc.
+	const variantMap = {
+		primary: 'filled',
+		secondary: 'tonal',
+		ghost: 'ghost',
+		accent: 'tonal', // Fallback: accent → tonal
+		inverted: null    // Wird als filled.onSurface migriert
+	};
+
+	for (const [v1Name, v2Name] of Object.entries(variantMap)) {
+		const variant = v1.buttons[v1Name];
+		if (!variant || !v2Name) continue;
+
+		// V1 Farbreferenzen zu V2 Stufen konvertieren
+		v2.buttons.variants[v2Name].normal = {
+			bg: mapV1ColorToV2Ref(variant.bgColor, v1),
+			bgHover: mapV1ColorToV2Ref(variant.bgColorHover, v1),
+			text: mapV1ColorToV2Ref(variant.textColor, v1),
+			textHover: mapV1ColorToV2Ref(variant.textColorHover || variant.textColor, v1),
+			border: variant.borderColor === 'transparent' ? 'none' : mapV1ColorToV2Ref(variant.borderColor, v1),
+			borderHover: variant.borderColorHover === 'transparent' ? 'none' : mapV1ColorToV2Ref(variant.borderColorHover, v1),
+			shadow: 'none',
+			shadowHover: 'none',
+			focusRingColor: 'primary-8',
+			customCSS: null
+		};
+	}
+
+	// inverted → filled.onSurface
+	if (v1.buttons.inverted) {
+		const inv = v1.buttons.inverted;
+		v2.buttons.variants.filled.onSurface = {
+			bg: mapV1ColorToV2Ref(inv.bgColor, v1),
+			bgHover: mapV1ColorToV2Ref(inv.bgColorHover, v1),
+			text: mapV1ColorToV2Ref(inv.textColor, v1),
+			textHover: mapV1ColorToV2Ref(inv.textColorHover || inv.textColor, v1),
+			border: 'none',
+			borderHover: 'none',
+			customCSS: null
+		};
+	}
+}
+
+/**
+ * Konvertiert V1-Farbreferenzen (Token-Name oder Hex) zu V2-Stufenreferenzen.
+ * V1: "primary" → V2: "primary-9"
+ * V1: "primaryDark" → V2: "primary-10"
+ * V1: "white" → V2: "neutral-1"
+ * V1: "textBase" → V2: "neutral-12"
+ * V1: "transparent" → V2: "transparent"
+ */
+function mapV1ColorToV2Ref(v1Ref, v1) {
+	if (!v1Ref) return 'none';
+	if (v1Ref === 'transparent') return 'transparent';
+
+	// Direkte Mappings V1 → V2
+	const mapping = {
+		// Brand
+		'primary': 'primary-9',
+		'primaryDark': 'primary-10',
+		'primaryLight': 'primary-7',
+		'secondary': 'secondary-9',
+		'secondaryDark': 'secondary-10',
+		'secondaryLight': 'secondary-7',
+
+		// Status
+		'success': 'success-9',
+		'successDark': 'success-10',
+		'successLight': 'success-3',
+		'warning': 'warning-9',
+		'warningDark': 'warning-10',
+		'warningLight': 'warning-3',
+		'error': 'error-9',
+		'errorDark': 'error-10',
+		'errorLight': 'error-3',
+		'info': 'info-9',
+		'infoDark': 'info-10',
+		'infoLight': 'info-3',
+
+		// Neutral
+		'white': 'neutral-1',
+		'black': 'neutral-12',
+
+		// Background
+		'bgBody': 'neutral-1',
+		'bgBase': 'neutral-1',
+		'bgElevated': 'neutral-2',
+		'bgLifted': 'neutral-3',
+
+		// Text
+		'textBase': 'neutral-12',
+		'textSubtle': 'neutral-11',
+		'textMuted': 'neutral-8',
+
+		// Border
+		'borderBase': 'neutral-7',
+		'borderSubtle': 'neutral-6',
+		'borderMuted': 'neutral-5',
+
+		// On-colors
+		'textOnPrimary': 'on-primary',
+		'textOnSecondary': 'on-secondary',
+		'textOnAccent': 'on-accent',
+
+		// Accent backgrounds
+		'bgAccentBase': 'accent-9',
+		'bgAccentElevated': 'accent-10',
+		'bgAccentLifted': 'accent-3'
+	};
+
+	if (mapping[v1Ref]) return mapping[v1Ref];
+
+	// Wenn es ein Hex-Wert ist, gib ihn als Stufe 9 der nächsten Welt zurück
+	// (Fallback — sollte selten vorkommen)
+	if (v1Ref.startsWith('#')) return v1Ref;
+
+	return 'primary-9'; // Letzter Fallback
+}