@webmate-studio/builder 0.2.130 → 0.2.132

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

@@ -0,0 +1,710 @@
+/**
+ * Design Token V2 — CSS-Generierung
+ *
+ * Generiert CSS-Variablen, Utility-Klassen und @layer-Blöcke
+ * aus einem V2-Token-Objekt.
+ */
+
+import {
+	COLOR_WORLDS,
+	SEMANTIC_COLOR_WORLDS,
+	TEXT_VOICES,
+	TEXT_LEVELS,
+	BUTTON_VARIANTS,
+	BUTTON_SIZES,
+	calculateOnColor,
+	defaultDesignTokensV2
+} from './design-tokens-v2.js';
+
+
+// ─── Hauptfunktionen ────────────────────────────────────────────────────────
+
+/**
+ * Generiert { themeVars, globalStyles } für Tailwind v4.
+ * themeVars = CSS-Variablen für :root
+ * globalStyles = @layer components/utilities mit Utility-Klassen
+ */
+export function generateTailwindV4ThemeV2(tokens) {
+	const t = tokens || defaultDesignTokensV2;
+	const lines = [];
+	const responsiveLines = {};
+
+	// ── Farb-Variablen ──
+	generateColorVariables(t, lines);
+
+	// ── Typografie-Variablen ──
+	generateTypographyVariables(t, lines, responsiveLines);
+
+	// ── Button-Variablen ──
+	generateButtonVariables(t, lines);
+
+	// ── Layout-Variablen ──
+	generateLayoutVariables(t, lines);
+
+	const themeVars = lines.join('\n');
+
+	// ── Global Styles ──
+	let globalStyles = generateBaseStyles(t);
+	globalStyles += generateColorUtilities(t);
+	globalStyles += generateTextStyleClasses(t);
+	globalStyles += generateTextAliasClasses(t);
+	globalStyles += generateTextResponsiveVariants(t);
+	globalStyles += generateButtonClasses(t);
+	globalStyles += generateResponsiveMediaQueries(responsiveLines);
+
+	return { themeVars, globalStyles };
+}
+
+/**
+ * Generiert vollständiges CSS (Variablen + Utilities) als einzelnen String.
+ * Für Endpunkte die kein Tailwind verwenden.
+ */
+export function generateCSSFromTokensV2(tokens) {
+	const { themeVars, globalStyles } = generateTailwindV4ThemeV2(tokens);
+
+	return `:root {\n${themeVars}\n}\n\n${globalStyles}`;
+}
+
+/**
+ * Generiert @import-Anweisungen für Web-Fonts.
+ */
+export function generateFontImportsV2(tokens) {
+	const t = tokens || defaultDesignTokensV2;
+	const imports = [];
+	const loadedFonts = new Set();
+
+	// Fonts aus der offenen Liste
+	if (t.typography?.fonts) {
+		for (const font of t.typography.fonts) {
+			if (font.source === 'fontsource' && font.id && !loadedFonts.has(font.id)) {
+				loadedFonts.add(font.id);
+				const fontSlug = font.id.replace('fontsource:', '');
+				imports.push(`@import url('https://fonts.bunny.net/css?family=${fontSlug}:100,200,300,400,500,600,700,800,900');`);
+			}
+		}
+	}
+
+	// Mono-Font
+	if (t.typography?.monoFont?.source === 'fontsource' && t.typography.monoFont.id && !loadedFonts.has(t.typography.monoFont.id)) {
+		loadedFonts.add(t.typography.monoFont.id);
+		const fontSlug = t.typography.monoFont.id.replace('fontsource:', '');
+		imports.push(`@import url('https://fonts.bunny.net/css?family=${fontSlug}:100,200,300,400,500,600,700,800,900');`);
+	}
+
+	return imports.join('\n');
+}
+
+
+// ─── Farb-Variablen ────────────────────────────────────────────────────────
+
+function generateColorVariables(t, lines) {
+	if (!t.colors) return;
+
+	for (const world of COLOR_WORLDS) {
+		const color = t.colors[world];
+		if (!color?.scale) continue;
+
+		lines.push(`  /* ${world} */`);
+		for (let step = 1; step <= 12; step++) {
+			if (color.scale[step]) {
+				lines.push(`  --color-${world}-${step}: ${color.scale[step]};`);
+			}
+		}
+	}
+
+	// on-{welt} Kontrastfarben
+	const neutralScale = t.colors.neutral?.scale;
+	if (neutralScale) {
+		lines.push('  /* on-colors (auto-contrast) */');
+		for (const world of SEMANTIC_COLOR_WORLDS) {
+			const color = t.colors[world];
+			if (!color?.scale?.[9]) continue;
+
+			const onColor = calculateOnColor(color.scale[9], neutralScale);
+			lines.push(`  --color-on-${world}: ${onColor};`);
+		}
+	}
+
+	// Semantische Mappings
+	if (t.semanticMappings) {
+		lines.push('  /* semantic mappings */');
+		for (const world of SEMANTIC_COLOR_WORLDS) {
+			const mapping = t.semanticMappings[world];
+			const color = t.colors[world];
+			if (!mapping || !color?.scale) continue;
+
+			if (mapping.bg) lines.push(`  --color-${world}-bg: var(--color-${world}-${mapping.bg});`);
+			if (mapping.bgHover) lines.push(`  --color-${world}-bg-hover: var(--color-${world}-${mapping.bgHover});`);
+			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.border) lines.push(`  --color-${world}-border: var(--color-${world}-${mapping.border});`);
+			if (mapping.ring) lines.push(`  --color-${world}-ring: var(--color-${world}-${mapping.ring});`);
+		}
+	}
+}
+
+
+// ─── Farb-Utilities ─────────────────────────────────────────────────────────
+
+function generateColorUtilities(t) {
+	if (!t.colors) return '';
+
+	let css = '\n\n/* Color Utilities */\n@layer utilities {';
+	const processed = new Set();
+	const opacitySteps = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+
+	// Stufen-Utilities: bg-primary-3, text-neutral-12, etc.
+	for (const world of COLOR_WORLDS) {
+		if (!t.colors[world]?.scale) continue;
+
+		for (let step = 1; step <= 12; step++) {
+			const varRef = `--color-${world}-${step}`;
+			addColorUtility(css = css, processed, `bg-${world}-${step}`, 'background-color', varRef);
+			addColorUtility(css = css, processed, `text-${world}-${step}`, 'color', varRef);
+			addColorUtility(css = css, processed, `border-${world}-${step}`, 'border-color', varRef);
+
+			// Opacity-Varianten
+			for (const step2 of opacitySteps) {
+				css += `\n.bg-${world}-${step}\\/${step2} { background-color: color-mix(in srgb, var(${varRef}) ${step2}%, transparent); }`;
+				css += `\n.text-${world}-${step}\\/${step2} { color: color-mix(in srgb, var(${varRef}) ${step2}%, transparent); }`;
+				css += `\n.border-${world}-${step}\\/${step2} { border-color: color-mix(in srgb, var(${varRef}) ${step2}%, transparent); }`;
+			}
+		}
+	}
+
+	// Semantische Utilities: bg-primary, text-on-primary, border-error, etc.
+	for (const world of SEMANTIC_COLOR_WORLDS) {
+		if (!t.colors[world]?.scale) continue;
+
+		const semantics = [
+			{ cls: `bg-${world}`, prop: 'background-color', varRef: `--color-${world}-bg` },
+			{ cls: `bg-${world}-hover`, prop: 'background-color', varRef: `--color-${world}-bg-hover` },
+			{ 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-on-${world}`, prop: 'color', varRef: `--color-on-${world}` },
+			{ cls: `border-${world}`, prop: 'border-color', varRef: `--color-${world}-border` },
+			{ cls: `ring-${world}`, prop: '--tw-ring-color', varRef: `--color-${world}-ring` },
+			{ cls: `border-on-${world}`, prop: 'border-color', varRef: `--color-on-${world}` },
+		];
+
+		for (const { cls, prop, varRef } of semantics) {
+			if (!processed.has(cls)) {
+				processed.add(cls);
+				css += `\n.${cls} { ${prop}: var(${varRef}); }`;
+				css += `\n.hover\\:${cls}:hover { ${prop}: var(${varRef}); }`;
+				css += `\n.focus\\:${cls}:focus { ${prop}: var(${varRef}); }`;
+			}
+		}
+
+		// Opacity-Varianten für on-{welt}
+		for (const step of opacitySteps) {
+			css += `\n.text-on-${world}\\/${step} { color: color-mix(in srgb, var(--color-on-${world}) ${step}%, transparent); }`;
+			css += `\n.border-on-${world}\\/${step} { border-color: color-mix(in srgb, var(--color-on-${world}) ${step}%, transparent); }`;
+		}
+	}
+
+	css += '\n}'; // Close @layer utilities
+	return css;
+}
+
+function addColorUtility(css, processed, cls, prop, varRef) {
+	if (processed.has(cls)) return css;
+	processed.add(cls);
+	return css + `\n.${cls} { ${prop}: var(${varRef}); }` +
+		`\n.hover\\:${cls}:hover { ${prop}: var(${varRef}); }` +
+		`\n.focus\\:${cls}:focus { ${prop}: var(${varRef}); }`;
+}
+
+
+// ─── Typografie-Variablen ───────────────────────────────────────────────────
+
+function generateTypographyVariables(t, lines, responsiveLines) {
+	if (!t.typography) return;
+
+	// Font-Variablen
+	if (t.typography.fonts?.length > 0) {
+		lines.push('  /* fonts */');
+		// Erste Font als Button-Font
+		const primaryFont = t.typography.fonts[0];
+		lines.push(`  --btn-font: "${primaryFont.name}", ${primaryFont.fallback || 'sans-serif'};`);
+	}
+
+	if (t.typography.monoFont) {
+		const mono = t.typography.monoFont;
+		lines.push(`  --font-mono: "${mono.name}", ${mono.fallback || 'monospace'};`);
+	}
+
+	// Text-Stil-Variablen
+	const textStyles = t.typography.textStyles;
+	if (!textStyles) return;
+
+	for (const voice of TEXT_VOICES) {
+		if (!textStyles[voice]) continue;
+
+		lines.push(`  /* text-${voice} */`);
+
+		for (const level of TEXT_LEVELS) {
+			const style = textStyles[voice][level];
+			if (!style) continue;
+
+			const prefix = `--text-${voice}-${level}`;
+
+			// Font
+			if (style.font) {
+				const font = findFont(t, style.font);
+				const fallback = font?.fallback || 'sans-serif';
+				lines.push(`  ${prefix}-font: "${style.font}", ${fallback};`);
+			}
+
+			// fontWeight, letterSpacing, textTransform — nicht responsive
+			if (style.fontWeight != null) lines.push(`  ${prefix}-weight: ${style.fontWeight};`);
+			if (style.textTransform) lines.push(`  ${prefix}-transform: ${style.textTransform};`);
+
+			// fontSize — kann responsive sein
+			addResponsiveVar(prefix + '-size', style.fontSize, lines, responsiveLines);
+
+			// lineHeight — kann responsive sein
+			addResponsiveVar(prefix + '-line-height', style.lineHeight, lines, responsiveLines);
+
+			// letterSpacing — kann responsive sein
+			addResponsiveVar(prefix + '-letter-spacing', style.letterSpacing, lines, responsiveLines);
+		}
+	}
+}
+
+function addResponsiveVar(varName, value, lines, responsiveLines) {
+	if (value == null) return;
+
+	if (typeof value === 'object') {
+		if (value.base) lines.push(`  ${varName}: ${value.base};`);
+		for (const [bp, bpValue] of Object.entries(value)) {
+			if (bp !== 'base' && bpValue) {
+				responsiveLines[bp] = responsiveLines[bp] || [];
+				responsiveLines[bp].push(`  ${varName}: ${bpValue};`);
+			}
+		}
+	} else {
+		lines.push(`  ${varName}: ${value};`);
+	}
+}
+
+function findFont(t, fontName) {
+	if (!t.typography?.fonts) return null;
+	return t.typography.fonts.find(f => f.name === fontName);
+}
+
+
+// ─── Text-Stil-Klassen ─────────────────────────────────────────────────────
+
+function generateTextStyleClasses(t) {
+	const textStyles = t.typography?.textStyles;
+	if (!textStyles) return '';
+
+	let css = '\n\n/* Text Style Utilities */\n@layer components {';
+
+	for (const voice of TEXT_VOICES) {
+		if (!textStyles[voice]) continue;
+
+		for (const level of TEXT_LEVELS) {
+			const style = textStyles[voice][level];
+			if (!style) continue;
+
+			const prefix = `--text-${voice}-${level}`;
+			css += `\n.text-${voice}-${level} {`;
+			if (style.font) css += `\n  font-family: var(${prefix}-font);`;
+			css += `\n  font-size: var(${prefix}-size);`;
+			if (style.fontWeight != null) css += `\n  font-weight: var(${prefix}-weight);`;
+			css += `\n  line-height: var(${prefix}-line-height);`;
+			if (style.letterSpacing) css += `\n  letter-spacing: var(${prefix}-letter-spacing);`;
+			if (style.textTransform) css += `\n  text-transform: var(${prefix}-transform);`;
+			css += '\n}';
+		}
+	}
+
+	css += '\n}'; // Close @layer components
+	return css;
+}
+
+function generateTextAliasClasses(t) {
+	const aliases = t.typography?.aliases;
+	if (!aliases) return '';
+
+	let css = '\n\n/* Text Aliases */\n@layer components {';
+
+	for (const [alias, target] of Object.entries(aliases)) {
+		// target = "display-1" → voice = "display", level = "1"
+		const prefix = `--text-${target}`;
+		css += `\n.text-${alias} {`;
+		css += `\n  font-family: var(${prefix}-font);`;
+		css += `\n  font-size: var(${prefix}-size);`;
+		css += `\n  font-weight: var(${prefix}-weight);`;
+		css += `\n  line-height: var(${prefix}-line-height);`;
+		css += `\n  letter-spacing: var(${prefix}-letter-spacing);`;
+		css += `\n  text-transform: var(${prefix}-transform);`;
+		css += '\n}';
+	}
+
+	css += '\n}';
+	return css;
+}
+
+function generateTextResponsiveVariants(t) {
+	const textStyles = t.typography?.textStyles;
+	if (!textStyles) return '';
+
+	const breakpoints = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' };
+	let css = '';
+
+	for (const [bp, minWidth] of Object.entries(breakpoints)) {
+		css += `\n@media (min-width: ${minWidth}) {\n@layer components {`;
+
+		for (const voice of TEXT_VOICES) {
+			if (!textStyles[voice]) continue;
+			for (const level of TEXT_LEVELS) {
+				const style = textStyles[voice][level];
+				if (!style) continue;
+
+				const prefix = `--text-${voice}-${level}`;
+				css += `\n  .${bp}\\:text-${voice}-${level} {`;
+				if (style.font) css += `\n    font-family: var(${prefix}-font);`;
+				css += `\n    font-size: var(${prefix}-size);`;
+				if (style.fontWeight != null) css += `\n    font-weight: var(${prefix}-weight);`;
+				css += `\n    line-height: var(${prefix}-line-height);`;
+				if (style.letterSpacing) css += `\n    letter-spacing: var(${prefix}-letter-spacing);`;
+				if (style.textTransform) css += `\n    text-transform: var(${prefix}-transform);`;
+				css += '\n  }';
+			}
+		}
+
+		// Responsive alias variants
+		const aliases = t.typography?.aliases;
+		if (aliases) {
+			for (const [alias, target] of Object.entries(aliases)) {
+				const prefix = `--text-${target}`;
+				css += `\n  .${bp}\\:text-${alias} {`;
+				css += `\n    font-family: var(${prefix}-font);`;
+				css += `\n    font-size: var(${prefix}-size);`;
+				css += `\n    font-weight: var(${prefix}-weight);`;
+				css += `\n    line-height: var(${prefix}-line-height);`;
+				css += `\n    letter-spacing: var(${prefix}-letter-spacing);`;
+				css += `\n    text-transform: var(${prefix}-transform);`;
+				css += '\n  }';
+			}
+		}
+
+		css += '\n}\n}'; // Close @layer + @media
+	}
+
+	return css;
+}
+
+
+// ─── Button-Variablen ───────────────────────────────────────────────────────
+
+function generateButtonVariables(t, lines) {
+	if (!t.buttons) return;
+
+	// Global
+	if (t.buttons.global) {
+		lines.push('  /* buttons global */');
+		lines.push(`  --btn-transition: ${t.buttons.global.transition || 'all 150ms ease'};`);
+	}
+
+	// Sizes
+	if (t.buttons.sizes) {
+		for (const size of BUTTON_SIZES) {
+			const s = t.buttons.sizes[size];
+			if (!s) continue;
+
+			lines.push(`  /* btn-${size} */`);
+			lines.push(`  --btn-${size}-padding-x: ${s.paddingX};`);
+			lines.push(`  --btn-${size}-padding-y: ${s.paddingY};`);
+			lines.push(`  --btn-${size}-font-size: ${s.fontSize};`);
+			lines.push(`  --btn-${size}-font-weight: ${s.fontWeight};`);
+			lines.push(`  --btn-${size}-line-height: ${s.lineHeight};`);
+			lines.push(`  --btn-${size}-letter-spacing: ${s.letterSpacing};`);
+			lines.push(`  --btn-${size}-border-radius: ${s.borderRadius};`);
+			lines.push(`  --btn-${size}-min-height: ${s.minHeight};`);
+			lines.push(`  --btn-${size}-gap: ${s.gap};`);
+			lines.push(`  --btn-${size}-icon-size: ${s.iconSize};`);
+		}
+	}
+
+	// Variants
+	if (t.buttons.variants) {
+		for (const variant of BUTTON_VARIANTS) {
+			const v = t.buttons.variants[variant];
+			if (!v) continue;
+
+			// Normal mode
+			if (v.normal && !v.normal.customCSS) {
+				lines.push(`  /* btn-${variant} normal */`);
+				addButtonVariantVars(lines, `btn-${variant}`, v.normal, t);
+			}
+
+			// On-surface mode
+			if (v.onSurface && !v.onSurface.customCSS) {
+				lines.push(`  /* btn-${variant} on-surface */`);
+				addButtonVariantVars(lines, `btn-${variant}-on-surface`, v.onSurface, t);
+			}
+		}
+	}
+}
+
+function addButtonVariantVars(lines, prefix, variant, t) {
+	if (variant.bg) lines.push(`  --${prefix}-bg: ${resolveColorRef(variant.bg, t)};`);
+	if (variant.bgHover) lines.push(`  --${prefix}-bg-hover: ${resolveColorRef(variant.bgHover, t)};`);
+	if (variant.text) lines.push(`  --${prefix}-text: ${resolveColorRef(variant.text, t)};`);
+	if (variant.textHover) lines.push(`  --${prefix}-text-hover: ${resolveColorRef(variant.textHover, t)};`);
+	if (variant.border && variant.border !== 'none') lines.push(`  --${prefix}-border: 1px solid ${resolveColorRef(variant.border, t)};`);
+	if (variant.borderHover && variant.borderHover !== 'none') lines.push(`  --${prefix}-border-hover: 1px solid ${resolveColorRef(variant.borderHover, t)};`);
+	if (variant.shadow && variant.shadow !== 'none') lines.push(`  --${prefix}-shadow: ${variant.shadow};`);
+	if (variant.shadowHover && variant.shadowHover !== 'none') lines.push(`  --${prefix}-shadow-hover: ${variant.shadowHover};`);
+	if (variant.focusRingColor) lines.push(`  --${prefix}-focus-ring: ${resolveColorRef(variant.focusRingColor, t)};`);
+}
+
+/**
+ * Löst eine Farbreferenz auf.
+ * "primary-9" → "var(--color-primary-9)"
+ * "on-primary" → "var(--color-on-primary)"
+ * "neutral-1/15" → "color-mix(in srgb, var(--color-neutral-1) 15%, transparent)"
+ * "transparent" → "transparent"
+ * "none" → bleibt "none"
+ */
+function resolveColorRef(ref, t) {
+	if (!ref || ref === 'none') return 'none';
+	if (ref === 'transparent') return 'transparent';
+
+	// Opacity-Syntax: "neutral-1/15"
+	const opacityMatch = ref.match(/^(.+)\/(\d+)$/);
+	if (opacityMatch) {
+		const colorRef = opacityMatch[1];
+		const opacity = opacityMatch[2];
+		return `color-mix(in srgb, var(--color-${colorRef}) ${opacity}%, transparent)`;
+	}
+
+	return `var(--color-${ref})`;
+}
+
+
+// ─── Button-Klassen ─────────────────────────────────────────────────────────
+
+function generateButtonClasses(t) {
+	if (!t.buttons) return '';
+
+	let css = '\n\n/* Button Utilities */\n@layer components {';
+
+	// Base .btn class
+	css += `\n.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--btn-font);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: var(--btn-transition);
+  border: none;
+}`;
+
+	// Disabled
+	css += `\n.btn:disabled, .btn[aria-disabled="true"] {
+  opacity: ${t.buttons.global?.disabledOpacity ?? 0.5};
+  pointer-events: none;
+  cursor: not-allowed;
+}`;
+
+	// Size classes
+	for (const size of BUTTON_SIZES) {
+		if (!t.buttons.sizes?.[size]) continue;
+		css += `\n.btn-${size} {
+  padding: var(--btn-${size}-padding-y) var(--btn-${size}-padding-x);
+  font-size: var(--btn-${size}-font-size);
+  font-weight: var(--btn-${size}-font-weight);
+  line-height: var(--btn-${size}-line-height);
+  letter-spacing: var(--btn-${size}-letter-spacing);
+  border-radius: var(--btn-${size}-border-radius);
+  min-height: var(--btn-${size}-min-height);
+  gap: var(--btn-${size}-gap);
+}`;
+		css += `\n.btn-${size} iconify-icon { font-size: var(--btn-${size}-icon-size); }`;
+	}
+
+	// Variant classes
+	for (const variant of BUTTON_VARIANTS) {
+		const v = t.buttons.variants?.[variant];
+		if (!v) continue;
+
+		// Normal mode
+		if (v.normal?.customCSS) {
+			// customCSS Escape-Hatch
+			css += generateCustomCSSBlock(`btn-${variant}`, v.normal.customCSS);
+		} else if (v.normal) {
+			css += generateVariantNormalCSS(variant, v);
+		}
+
+		// On-surface mode
+		if (v.onSurface?.customCSS) {
+			css += generateCustomCSSBlock(`btn-on-surface.btn-${variant}`, v.onSurface.customCSS);
+		} else if (v.onSurface) {
+			css += generateVariantOnSurfaceCSS(variant, v, t);
+		}
+	}
+
+	css += '\n}'; // Close @layer components
+	return css;
+}
+
+function generateVariantNormalCSS(variant, v) {
+	const p = `btn-${variant}`;
+	let css = `\n.${p} {
+  background: var(--${p}-bg);
+  color: var(--${p}-text);`;
+
+	if (v.normal.border && v.normal.border !== 'none') {
+		css += `\n  border: var(--${p}-border);`;
+	}
+	if (v.normal.shadow && v.normal.shadow !== 'none') {
+		css += `\n  box-shadow: var(--${p}-shadow);`;
+	}
+	if (v.normal.textDecoration) {
+		css += `\n  text-decoration: ${v.normal.textDecoration};`;
+	}
+
+	css += '\n}';
+
+	// Hover
+	css += `\n.${p}:hover {
+  background: var(--${p}-bg-hover);
+  color: var(--${p}-text-hover);`;
+
+	if (v.normal.borderHover && v.normal.borderHover !== 'none') {
+		css += `\n  border: var(--${p}-border-hover);`;
+	}
+	if (v.normal.shadowHover && v.normal.shadowHover !== 'none') {
+		css += `\n  box-shadow: var(--${p}-shadow-hover);`;
+	}
+	if (v.normal.textDecorationHover) {
+		css += `\n  text-decoration: ${v.normal.textDecorationHover};`;
+	}
+
+	css += '\n}';
+
+	// Focus
+	if (v.normal.focusRingColor) {
+		css += `\n.${p}:focus-visible {
+  outline: 2px solid var(--${p}-focus-ring);
+  outline-offset: 2px;
+}`;
+	}
+
+	return css;
+}
+
+function generateVariantOnSurfaceCSS(variant, v, t) {
+	const p = `btn-${variant}`;
+	const osp = `btn-${variant}-on-surface`;
+	let css = `\n.btn-on-surface.${p} {
+  background: var(--${osp}-bg);
+  color: var(--${osp}-text);`;
+
+	if (v.onSurface.border && v.onSurface.border !== 'none') {
+		css += `\n  border: var(--${osp}-border);`;
+	}
+	if (v.onSurface.textDecoration) {
+		css += `\n  text-decoration: ${v.onSurface.textDecoration};`;
+	}
+
+	css += '\n}';
+
+	// Hover
+	css += `\n.btn-on-surface.${p}:hover {
+  background: var(--${osp}-bg-hover);
+  color: var(--${osp}-text-hover);`;
+
+	if (v.onSurface.borderHover && v.onSurface.borderHover !== 'none') {
+		css += `\n  border: var(--${osp}-border-hover);`;
+	}
+	if (v.onSurface.textDecorationHover) {
+		css += `\n  text-decoration: ${v.onSurface.textDecorationHover};`;
+	}
+
+	css += '\n}';
+
+	// Focus (on-surface)
+	const focusColor = t.buttons.global?.onSurfaceFocusRingColor;
+	if (focusColor) {
+		css += `\n.btn-on-surface.${p}:focus-visible {
+  outline: 2px solid ${resolveColorRef(focusColor, t)};
+  outline-offset: 2px;
+}`;
+	}
+
+	return css;
+}
+
+function generateCustomCSSBlock(selector, customCSS) {
+	let css = '';
+
+	if (customCSS.default) {
+		css += `\n.${selector} {\n  ${customCSS.default}\n}`;
+	}
+	if (customCSS.hover) {
+		css += `\n.${selector}:hover {\n  ${customCSS.hover}\n}`;
+	}
+	if (customCSS.focus) {
+		css += `\n.${selector}:focus-visible {\n  ${customCSS.focus}\n}`;
+	}
+
+	return css;
+}
+
+
+// ─── Layout-Variablen ───────────────────────────────────────────────────────
+
+function generateLayoutVariables(t, lines) {
+	if (t.borderWidth) lines.push(`  --border-width: ${t.borderWidth};`);
+	if (t.borderRadius) lines.push(`  --radius: ${t.borderRadius};`);
+
+	if (t.breakpoints) {
+		lines.push('  /* breakpoints */');
+		for (const [key, value] of Object.entries(t.breakpoints)) {
+			lines.push(`  --breakpoint-${key}: ${value};`);
+		}
+	}
+}
+
+
+// ─── Basis-Styles ───────────────────────────────────────────────────────────
+
+function generateBaseStyles(t) {
+	const primaryFont = t.typography?.fonts?.[0];
+	const fontFamily = primaryFont ? `"${primaryFont.name}", ${primaryFont.fallback || 'sans-serif'}` : 'system-ui, sans-serif';
+
+	return `\n/* Global baseline styles */
+body {
+  font-family: ${fontFamily};
+  background-color: var(--color-neutral-1);
+  color: var(--color-neutral-12);
+}`;
+}
+
+
+// ─── Responsive Media Queries ───────────────────────────────────────────────
+
+function generateResponsiveMediaQueries(responsiveLines) {
+	const breakpoints = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' };
+	let css = '';
+
+	for (const [bp, minWidth] of Object.entries(breakpoints)) {
+		if (responsiveLines[bp]?.length > 0) {
+			css += `\n\n@media (min-width: ${minWidth}) {\n  :root {\n`;
+			css += responsiveLines[bp].join('\n');
+			css += '\n  }\n}';
+		}
+	}
+
+	return css;
+}