@webmate-studio/builder 0.2.63 → 0.2.65

package/package.json

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

package/src/design-tokens.js

@@ -0,0 +1,1166 @@
+/**
+ * Default Design Tokens für Website-Design
+ * Tailwind v4 kompatibel - verwendet Base-Values wo möglich
+ * Diese Tokens werden verwendet wenn keine custom Tokens in der DB existieren
+ */
+
+export const defaultDesignTokens = {
+	colors: {
+		// Primary Colors
+		primary: '#0f172a',
+		primaryDark: '#020617',
+		primaryLight: '#334155',
+
+		// Secondary Colors
+		secondary: '#6366f1',
+		secondaryDark: '#4f46e5',
+		secondaryLight: '#818cf8',
+
+		// Neutral Colors
+		white: '#ffffff',
+		black: '#000000',
+
+		// Semantic Colors
+		success: '#10b981',
+		successDark: '#059669',
+		warning: '#f59e0b',
+		warningDark: '#d97706',
+		error: '#ef4444',
+		errorDark: '#dc2626',
+		info: '#3b82f6',
+		infoDark: '#2563eb',
+
+		// Background Colors (Semantic)
+		bgBase: '#ffffff',
+		bgElevated: '#f9fafb',
+		bgLifted: '#ffffff',
+		bgAccentBase: '#8b5cf6',
+		bgAccentElevated: '#a78bfa',
+		bgAccentLifted: '#ddd6fe',
+
+		// Text Colors (Semantic)
+		textBase: '#111827',
+		textSubtle: '#374151',
+		textMuted: '#6b7280',
+		textAccentBase: '#7c3aed',
+		textAccentSubtle: '#8b5cf6',
+		textAccentMuted: '#a78bfa',
+
+		// Border Colors (Semantic)
+		borderBase: '#d1d5db',      // slate-300 - Standard Border
+		borderSubtle: '#e5e7eb',    // slate-200 - Dezenter Border
+		borderMuted: '#f3f4f6'      // slate-100 - Sehr dezenter Border
+	},
+
+	typography: {
+		fontFamily: {
+			heading: 'Inter, system-ui, -apple-system, sans-serif',
+			body: 'Inter, system-ui, -apple-system, sans-serif',
+			mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+			accent: 'Inter, system-ui, -apple-system, sans-serif'
+		},
+		// Font References (IDs from Font table, null = use fontFamily string)
+		fontHeadingId: null,
+		fontBodyId: null,
+		fontMonoId: null,
+		fontAccentId: null,
+		// Base font size - Tailwind berechnet Skala automatisch
+		fontSizeBase: '1rem', // 16px base
+		// Base line height
+		lineHeightBase: '1.5',
+		// Base letter spacing
+		letterSpacingBase: '0em'
+	},
+
+	// Text Styles - Predefined typography combinations
+	textStyles: {
+		display: {
+			fontFamily: 'heading',
+			fontSize: {
+				base: '2.5rem', // 40px - Mobile
+				md: '3.5rem',   // 56px - Tablet
+				lg: '4.5rem'    // 72px - Desktop
+			},
+			fontWeight: 800,
+			lineHeight: '1.1',
+			letterSpacing: '-0.02em',
+			textTransform: 'none',
+			textColor: 'textBase'
+		},
+		heading1: {
+			fontFamily: 'heading',
+			fontSize: {
+				base: '2rem',   // 32px - Mobile
+				md: '2.5rem',   // 40px - Tablet
+				lg: '3rem'      // 48px - Desktop
+			},
+			fontWeight: 700,
+			lineHeight: '1.2',
+			letterSpacing: '-0.015em',
+			textTransform: 'none',
+			textColor: 'textBase'
+		},
+		heading2: {
+			fontFamily: 'heading',
+			fontSize: {
+				base: '1.5rem',  // 24px - Mobile
+				md: '1.875rem',  // 30px - Tablet
+				lg: '2.25rem'    // 36px - Desktop
+			},
+			fontWeight: 600,
+			lineHeight: '1.3',
+			letterSpacing: '-0.01em',
+			textTransform: 'none',
+			textColor: 'textBase'
+		},
+		heading3: {
+			fontFamily: 'heading',
+			fontSize: {
+				base: '1.25rem', // 20px - Mobile
+				lg: '1.5rem'     // 24px - Desktop
+			},
+			fontWeight: 600,
+			lineHeight: '1.4',
+			letterSpacing: '0em',
+			textTransform: 'none',
+			textColor: 'textBase'
+		},
+		overlineDisplay: {
+			fontFamily: 'body',
+			fontSize: '1rem', // 16px
+			fontWeight: 600,
+			lineHeight: '1.5',
+			letterSpacing: '0.1em',
+			textTransform: 'uppercase',
+			textColor: 'textAccentBase'
+		},
+		overlineHeading1: {
+			fontFamily: 'body',
+			fontSize: '0.875rem', // 14px
+			fontWeight: 600,
+			lineHeight: '1.5',
+			letterSpacing: '0.1em',
+			textTransform: 'uppercase',
+			textColor: 'textAccentBase'
+		},
+		overlineHeading2: {
+			fontFamily: 'body',
+			fontSize: '0.75rem', // 12px
+			fontWeight: 600,
+			lineHeight: '1.5',
+			letterSpacing: '0.1em',
+			textTransform: 'uppercase',
+			textColor: 'textAccentSubtle'
+		},
+		overlineHeading3: {
+			fontFamily: 'body',
+			fontSize: '0.75rem', // 12px
+			fontWeight: 500,
+			lineHeight: '1.5',
+			letterSpacing: '0.08em',
+			textTransform: 'uppercase',
+			textColor: 'textAccentSubtle'
+		},
+		lead: {
+			fontFamily: 'body',
+			fontSize: '1.25rem', // 20px
+			fontWeight: 400,
+			lineHeight: '1.6',
+			letterSpacing: '0em',
+			textTransform: 'none',
+			textColor: 'textSubtle'
+		},
+		body: {
+			fontFamily: 'body',
+			fontSize: '1rem', // 16px
+			fontWeight: 400,
+			lineHeight: '1.6',
+			letterSpacing: '0em',
+			textTransform: 'none',
+			textColor: 'textSubtle'
+		},
+		bodySmall: {
+			fontFamily: 'body',
+			fontSize: '0.875rem', // 14px
+			fontWeight: 400,
+			lineHeight: '1.5',
+			letterSpacing: '0em',
+			textTransform: 'none',
+			textColor: 'textSubtle'
+		},
+		caption: {
+			fontFamily: 'body',
+			fontSize: '0.75rem', // 12px
+			fontWeight: 400,
+			lineHeight: '1.4',
+			letterSpacing: '0em',
+			textTransform: 'none',
+			textColor: 'textMuted'
+		},
+		label: {
+			fontFamily: 'body',
+			fontSize: '0.875rem', // 14px
+			fontWeight: 500,
+			lineHeight: '1.4',
+			letterSpacing: '0.01em',
+			textTransform: 'none',
+			textColor: 'textBase'
+		}
+	},
+
+	// Base spacing unit - Tailwind berechnet p-1, p-2, p-4 etc. automatisch
+	spacing: '0.25rem', // 4px base unit (Tailwind default)
+
+	// Base border width
+	borderWidth: '1px',
+
+	// Base border radius
+	borderRadius: '0.25rem', // 4px
+
+	// Container max widths (bleiben als Objekt, da spezifische Breakpoints)
+	container: {
+		sm: '640px',
+		md: '768px',
+		lg: '1024px',
+		xl: '1280px',
+		'2xl': '1536px'
+	},
+
+	// Breakpoints (bleiben als Objekt, da spezifische Werte)
+	breakpoints: {
+		sm: '640px',
+		md: '768px',
+		lg: '1024px',
+		xl: '1280px',
+		'2xl': '1536px'
+	},
+
+	// Buttons - Shared sizes and individual variants
+	buttons: {
+		sizes: {
+			small: {
+				paddingX: 12,           // px
+				paddingY: 8,            // px
+				fontSize: 14,           // px
+				lineHeight: 20,         // px
+				minHeight: 36,          // px
+				borderRadius: 6,        // px
+				borderWidth: 1,         // px
+				gap: 8,                 // px (icon spacing)
+				iconSize: 16            // px (icon size)
+			},
+			medium: {
+				paddingX: 16,           // px
+				paddingY: 10,           // px
+				fontSize: 16,           // px
+				lineHeight: 24,         // px
+				minHeight: 44,          // px
+				borderRadius: 8,        // px
+				borderWidth: 1,         // px
+				gap: 8,                 // px (icon spacing)
+				iconSize: 20            // px (icon size)
+			},
+			large: {
+				paddingX: 24,           // px
+				paddingY: 12,           // px
+				fontSize: 18,           // px
+				lineHeight: 28,         // px
+				minHeight: 52,          // px
+				borderRadius: 8,        // px
+				borderWidth: 2,         // px
+				gap: 10,                // px (icon spacing)
+				iconSize: 24            // px (icon size)
+			}
+		},
+		primary: {
+			bgColor: 'primary',
+			bgColorHover: 'primaryDark',
+			bgGradient: null,           // null or { from: 'primary', to: 'primaryDark', direction: 'to-br' }
+			bgGradientHover: null,
+			textColor: 'white',
+			textColorHover: null,       // null = same as textColor
+			borderColor: 'primary',
+			borderColorHover: 'primaryDark',
+			shadow: 'sm',               // none, sm, md, lg, xl, 2xl
+			shadowHover: 'md',
+			shadowColor: null,          // null = default shadow, or color token
+			backdropBlur: null,         // null or px value (4, 8, 12, 16, 24)
+			backdropBlurHover: null,
+			opacity: 100,               // 0-100
+			opacityHover: 100           // 0-100
+		},
+		secondary: {
+			bgColor: 'secondary',
+			bgColorHover: 'secondaryDark',
+			bgGradient: null,
+			bgGradientHover: null,
+			textColor: 'white',
+			textColorHover: null,
+			borderColor: 'secondary',
+			borderColorHover: 'secondaryDark',
+			shadow: 'sm',
+			shadowHover: 'md',
+			shadowColor: null,
+			backdropBlur: null,
+			backdropBlurHover: null,
+			opacity: 100,
+			opacityHover: 100
+		},
+		ghost: {
+			bgColor: 'transparent',
+			bgColorHover: 'bgElevated',
+			bgGradient: null,
+			bgGradientHover: null,
+			textColor: 'textBase',
+			textColorHover: null,
+			borderColor: 'transparent',
+			borderColorHover: 'transparent',
+			shadow: 'none',
+			shadowHover: 'none',
+			shadowColor: null,
+			backdropBlur: null,
+			backdropBlurHover: null,
+			opacity: 100,
+			opacityHover: 100
+		},
+		accent: {
+			bgColor: 'bgAccentBase',
+			bgColorHover: 'bgAccentElevated',
+			bgGradient: null,
+			bgGradientHover: null,
+			textColor: 'white',
+			textColorHover: null,
+			borderColor: 'bgAccentBase',
+			borderColorHover: 'bgAccentElevated',
+			shadow: 'md',
+			shadowHover: 'lg',
+			shadowColor: null,
+			backdropBlur: null,
+			backdropBlurHover: null,
+			opacity: 100,
+			opacityHover: 100
+		},
+		inverted: {
+			bgColor: 'white',
+			bgColorHover: 'bgElevated',
+			bgGradient: null,
+			bgGradientHover: null,
+			textColor: 'textBase',
+			textColorHover: null,
+			borderColor: 'white',
+			borderColorHover: 'bgElevated',
+			shadow: 'sm',
+			shadowHover: 'md',
+			shadowColor: null,
+			backdropBlur: null,
+			backdropBlurHover: null,
+			opacity: 100,
+			opacityHover: 100
+		}
+	}
+};
+
+/**
+ * Generate Tailwind v4 @theme CSS from Design Tokens
+ */
+export function generateTailwindV4Theme(tokens) {
+	const lines = [];
+
+	// Colors - Map to Tailwind v4 CSS variables
+	if (tokens.colors) {
+		// Primary colors
+		if (tokens.colors.primary) lines.push(`  --color-primary: ${tokens.colors.primary};`);
+		if (tokens.colors.primaryDark) lines.push(`  --color-primary-dark: ${tokens.colors.primaryDark};`);
+		if (tokens.colors.primaryLight) lines.push(`  --color-primary-light: ${tokens.colors.primaryLight};`);
+
+		// Secondary colors
+		if (tokens.colors.secondary) lines.push(`  --color-secondary: ${tokens.colors.secondary};`);
+		if (tokens.colors.secondaryDark) lines.push(`  --color-secondary-dark: ${tokens.colors.secondaryDark};`);
+		if (tokens.colors.secondaryLight) lines.push(`  --color-secondary-light: ${tokens.colors.secondaryLight};`);
+
+		// Semantic colors
+		if (tokens.colors.success) lines.push(`  --color-success: ${tokens.colors.success};`);
+		if (tokens.colors.successDark) lines.push(`  --color-success-dark: ${tokens.colors.successDark};`);
+		if (tokens.colors.warning) lines.push(`  --color-warning: ${tokens.colors.warning};`);
+		if (tokens.colors.warningDark) lines.push(`  --color-warning-dark: ${tokens.colors.warningDark};`);
+		if (tokens.colors.error) lines.push(`  --color-error: ${tokens.colors.error};`);
+		if (tokens.colors.errorDark) lines.push(`  --color-error-dark: ${tokens.colors.errorDark};`);
+		if (tokens.colors.info) lines.push(`  --color-info: ${tokens.colors.info};`);
+		if (tokens.colors.infoDark) lines.push(`  --color-info-dark: ${tokens.colors.infoDark};`);
+
+		// Background colors (Semantic)
+		if (tokens.colors.bgBase) lines.push(`  --color-bg-base: ${tokens.colors.bgBase};`);
+		if (tokens.colors.bgElevated) lines.push(`  --color-bg-elevated: ${tokens.colors.bgElevated};`);
+		if (tokens.colors.bgLifted) lines.push(`  --color-bg-lifted: ${tokens.colors.bgLifted};`);
+		if (tokens.colors.bgAccentBase) lines.push(`  --color-bg-accent-base: ${tokens.colors.bgAccentBase};`);
+		if (tokens.colors.bgAccentElevated) lines.push(`  --color-bg-accent-elevated: ${tokens.colors.bgAccentElevated};`);
+		if (tokens.colors.bgAccentLifted) lines.push(`  --color-bg-accent-lifted: ${tokens.colors.bgAccentLifted};`);
+
+		// Text colors (Semantic)
+		if (tokens.colors.textBase) lines.push(`  --color-text-base: ${tokens.colors.textBase};`);
+		if (tokens.colors.textSubtle) lines.push(`  --color-text-subtle: ${tokens.colors.textSubtle};`);
+		if (tokens.colors.textMuted) lines.push(`  --color-text-muted: ${tokens.colors.textMuted};`);
+		if (tokens.colors.textAccentBase) lines.push(`  --color-text-accent-base: ${tokens.colors.textAccentBase};`);
+		if (tokens.colors.textAccentSubtle) lines.push(`  --color-text-accent-subtle: ${tokens.colors.textAccentSubtle};`);
+		if (tokens.colors.textAccentMuted) lines.push(`  --color-text-accent-muted: ${tokens.colors.textAccentMuted};`);
+
+		// Border colors (Semantic)
+		if (tokens.colors.borderBase) lines.push(`  --color-border-base: ${tokens.colors.borderBase};`);
+		if (tokens.colors.borderSubtle) lines.push(`  --color-border-subtle: ${tokens.colors.borderSubtle};`);
+		if (tokens.colors.borderMuted) lines.push(`  --color-border-muted: ${tokens.colors.borderMuted};`);
+
+		// Basic colors
+		if (tokens.colors.white) lines.push(`  --color-white: ${tokens.colors.white};`);
+		if (tokens.colors.black) lines.push(`  --color-black: ${tokens.colors.black};`);
+	}
+
+	// Typography - Font families
+	if (tokens.typography?.fontFamily) {
+		if (tokens.typography.fontFamily.heading) {
+			lines.push(`  --font-heading: ${tokens.typography.fontFamily.heading};`);
+		}
+		if (tokens.typography.fontFamily.body) {
+			lines.push(`  --font-body: ${tokens.typography.fontFamily.body};`);
+		}
+		if (tokens.typography.fontFamily.mono) {
+			lines.push(`  --font-mono: ${tokens.typography.fontFamily.mono};`);
+		}
+	}
+
+	// Typography - Base values
+	if (tokens.typography?.fontSizeBase) {
+		lines.push(`  --font-size: ${tokens.typography.fontSizeBase};`);
+	}
+	if (tokens.typography?.lineHeightBase) {
+		lines.push(`  --line-height: ${tokens.typography.lineHeightBase};`);
+	}
+	if (tokens.typography?.letterSpacingBase) {
+		lines.push(`  --letter-spacing: ${tokens.typography.letterSpacingBase};`);
+	}
+
+	// Text Styles - Generate CSS variables for each style (with responsive support)
+	if (tokens.textStyles) {
+		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
+			const kebabName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
+
+			// Font family (not responsive)
+			if (style.fontFamily) {
+				lines.push(`  --text-${kebabName}-font-family: var(--font-${style.fontFamily});`);
+			}
+
+			// Font weight (not responsive)
+			if (style.fontWeight) {
+				lines.push(`  --text-${kebabName}-font-weight: ${style.fontWeight};`);
+			}
+
+			// Text transform (not responsive)
+			if (style.textTransform) {
+				lines.push(`  --text-${kebabName}-text-transform: ${style.textTransform};`);
+			}
+
+			// Font size (can be responsive)
+			if (style.fontSize) {
+				if (typeof style.fontSize === 'object') {
+					// Responsive: base value
+					if (style.fontSize.base) {
+						lines.push(`  --text-${kebabName}-font-size: ${style.fontSize.base};`);
+					}
+				} else {
+					// Simple value
+					lines.push(`  --text-${kebabName}-font-size: ${style.fontSize};`);
+				}
+			}
+
+			// Line height (can be responsive)
+			if (style.lineHeight) {
+				if (typeof style.lineHeight === 'object') {
+					if (style.lineHeight.base) {
+						lines.push(`  --text-${kebabName}-line-height: ${style.lineHeight.base};`);
+					}
+				} else {
+					lines.push(`  --text-${kebabName}-line-height: ${style.lineHeight};`);
+				}
+			}
+
+			// Letter spacing (can be responsive)
+			if (style.letterSpacing) {
+				if (typeof style.letterSpacing === 'object') {
+					if (style.letterSpacing.base) {
+						lines.push(`  --text-${kebabName}-letter-spacing: ${style.letterSpacing.base};`);
+					}
+				} else {
+					lines.push(`  --text-${kebabName}-letter-spacing: ${style.letterSpacing};`);
+				}
+			}
+		}
+	}
+
+	// Spacing base
+	if (tokens.spacing) {
+		lines.push(`  --spacing: ${tokens.spacing};`);
+	}
+
+	// Border width base
+	if (tokens.borderWidth) {
+		lines.push(`  --border-width: ${tokens.borderWidth};`);
+	}
+
+	// Border radius base
+	if (tokens.borderRadius) {
+		lines.push(`  --radius: ${tokens.borderRadius};`);
+	}
+
+	// Container widths (specific breakpoints)
+	if (tokens.container) {
+		for (const [key, value] of Object.entries(tokens.container)) {
+			lines.push(`  --container-${key}: ${value};`);
+		}
+	}
+
+	// Breakpoints
+	if (tokens.breakpoints) {
+		for (const [key, value] of Object.entries(tokens.breakpoints)) {
+			lines.push(`  --breakpoint-${key}: ${value};`);
+		}
+	}
+
+	// Buttons - Sizes
+	if (tokens.buttons?.sizes) {
+		for (const [sizeName, sizeProps] of Object.entries(tokens.buttons.sizes)) {
+			const prefix = `button-${sizeName}`;
+			if (sizeProps.paddingX) lines.push(`  --${prefix}-padding-x: ${sizeProps.paddingX};`);
+			if (sizeProps.paddingY) lines.push(`  --${prefix}-padding-y: ${sizeProps.paddingY};`);
+			if (sizeProps.fontSize) lines.push(`  --${prefix}-font-size: ${sizeProps.fontSize};`);
+			if (sizeProps.lineHeight) lines.push(`  --${prefix}-line-height: ${sizeProps.lineHeight};`);
+			if (sizeProps.borderRadius) lines.push(`  --${prefix}-border-radius: ${sizeProps.borderRadius};`);
+			if (sizeProps.gap) lines.push(`  --${prefix}-gap: ${sizeProps.gap};`);
+			if (sizeProps.iconSize) lines.push(`  --${prefix}-icon-size: ${sizeProps.iconSize};`);
+		}
+	}
+
+	// Buttons - Variants
+	if (tokens.buttons) {
+		const variants = Object.keys(tokens.buttons).filter(key => key !== 'sizes');
+		for (const variantName of variants) {
+			const variant = tokens.buttons[variantName];
+			const prefix = `button-${variantName}`;
+
+			if (variant.bgColor) {
+				const colorVar = tokens.colors[variant.bgColor] || variant.bgColor;
+				lines.push(`  --${prefix}-bg: ${colorVar};`);
+			}
+			if (variant.bgColorHover) {
+				const colorVar = tokens.colors[variant.bgColorHover] || variant.bgColorHover;
+				lines.push(`  --${prefix}-bg-hover: ${colorVar};`);
+			}
+			if (variant.textColor) {
+				const colorVar = tokens.colors[variant.textColor] || variant.textColor;
+				lines.push(`  --${prefix}-text: ${colorVar};`);
+			}
+			if (variant.borderColor) {
+				const colorVar = tokens.colors[variant.borderColor] || variant.borderColor;
+				lines.push(`  --${prefix}-border: ${colorVar};`);
+			}
+			if (variant.borderColorHover) {
+				const colorVar = tokens.colors[variant.borderColorHover] || variant.borderColorHover;
+				lines.push(`  --${prefix}-border-hover: ${colorVar};`);
+			}
+		}
+	}
+
+	const themeVars = lines.join('\n');
+
+	// Global styles (MUST be outside @theme block)
+	let globalStyles = `
+/* Global baseline font */
+body {
+  font-family: var(--font-body);
+}`;
+
+	// Generate utility classes for text styles
+	if (tokens.textStyles) {
+		globalStyles += '\n\n/* Text Style Utilities */';
+		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
+			const kebabName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
+			const className = `text-${kebabName}`;
+
+			globalStyles += `\n.${className} {`;
+			if (style.fontFamily) {
+				globalStyles += `\n  font-family: var(--text-${kebabName}-font-family);`;
+			}
+			if (style.fontWeight) {
+				globalStyles += `\n  font-weight: var(--text-${kebabName}-font-weight);`;
+			}
+			if (style.fontSize) {
+				globalStyles += `\n  font-size: var(--text-${kebabName}-font-size);`;
+			}
+			if (style.lineHeight) {
+				globalStyles += `\n  line-height: var(--text-${kebabName}-line-height);`;
+			}
+			if (style.letterSpacing) {
+				globalStyles += `\n  letter-spacing: var(--text-${kebabName}-letter-spacing);`;
+			}
+			if (style.textTransform) {
+				globalStyles += `\n  text-transform: var(--text-${kebabName}-text-transform);`;
+			}
+			globalStyles += `\n}`;
+		}
+	}
+
+	// Generate utility classes for buttons
+	if (tokens.buttons) {
+		globalStyles += '\n\n/* Button Utilities */';
+
+		// Base button class
+		globalStyles += `\n.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-width: 1px;
+  border-style: solid;
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+  text-decoration: none;
+}`;
+
+		// Size classes
+		if (tokens.buttons.sizes) {
+			for (const sizeName of Object.keys(tokens.buttons.sizes)) {
+				globalStyles += `\n.btn-${sizeName} {
+  padding: var(--button-${sizeName}-padding-y) var(--button-${sizeName}-padding-x);
+  font-size: var(--button-${sizeName}-font-size);
+  line-height: var(--button-${sizeName}-line-height);
+  border-radius: var(--button-${sizeName}-border-radius);
+  gap: var(--button-${sizeName}-gap);
+}`;
+			}
+		}
+
+		// Variant classes
+		const variants = Object.keys(tokens.buttons).filter(key => key !== 'sizes');
+		for (const variantName of variants) {
+			globalStyles += `\n.btn-${variantName} {
+  background-color: var(--button-${variantName}-bg);
+  color: var(--button-${variantName}-text);
+  border-color: var(--button-${variantName}-border);
+}
+.btn-${variantName}:hover {
+  background-color: var(--button-${variantName}-bg-hover);
+  border-color: var(--button-${variantName}-border-hover);
+}`;
+		}
+	}
+
+	// Add responsive media queries for textStyles (OUTSIDE @theme block!)
+	if (tokens.textStyles) {
+		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];
+		const breakpointValues = {
+			sm: '640px',
+			md: '768px',
+			lg: '1024px',
+			xl: '1280px',
+			'2xl': '1536px'
+		};
+
+		for (const bp of breakpointKeys) {
+			const mediaQueryLines = [];
+
+			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
+				const kebabName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
+
+				// Font size
+				if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
+					mediaQueryLines.push(`    --text-${kebabName}-font-size: ${style.fontSize[bp]};`);
+				}
+
+				// Line height
+				if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
+					mediaQueryLines.push(`    --text-${kebabName}-line-height: ${style.lineHeight[bp]};`);
+				}
+
+				// Letter spacing
+				if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
+					mediaQueryLines.push(`    --text-${kebabName}-letter-spacing: ${style.letterSpacing[bp]};`);
+				}
+			}
+
+			if (mediaQueryLines.length > 0) {
+				globalStyles += `\n\n@media (min-width: ${breakpointValues[bp]}) {\n  :root {\n`;
+				globalStyles += mediaQueryLines.join('\n');
+				globalStyles += '\n  }\n}';
+			}
+		}
+	}
+
+	return { themeVars, globalStyles };
+}
+
+/**
+ * Generate Tailwind Config from Design Tokens (for Tailwind v3 - legacy)
+ */
+export function generateTailwindConfig(tokens) {
+	return {
+		theme: {
+			extend: {
+				colors: {
+					// Brand colors
+					primary: {
+						DEFAULT: tokens.colors?.primary || '#ea580c',
+						dark: tokens.colors?.primaryDark || '#c2410c',
+						light: tokens.colors?.primaryLight || '#fb923c'
+					},
+					secondary: {
+						DEFAULT: tokens.colors?.secondary || '#6366f1',
+						dark: tokens.colors?.secondaryDark || '#4f46e5',
+						light: tokens.colors?.secondaryLight || '#818cf8'
+					},
+					// Semantic colors
+					success: {
+						DEFAULT: tokens.colors?.success || '#10b981',
+						dark: tokens.colors?.successDark || '#059669'
+					},
+					warning: {
+						DEFAULT: tokens.colors?.warning || '#f59e0b',
+						dark: tokens.colors?.warningDark || '#d97706'
+					},
+					error: {
+						DEFAULT: tokens.colors?.error || '#ef4444',
+						dark: tokens.colors?.errorDark || '#dc2626'
+					},
+					info: {
+						DEFAULT: tokens.colors?.info || '#3b82f6',
+						dark: tokens.colors?.infoDark || '#2563eb'
+					}
+				},
+				fontFamily: {
+					heading: tokens.typography?.fontFamily?.heading?.split(',') || ['Inter', 'system-ui', 'sans-serif'],
+					body: tokens.typography?.fontFamily?.body?.split(',') || ['Inter', 'system-ui', 'sans-serif'],
+					mono: tokens.typography?.fontFamily?.mono?.split(',') || ['ui-monospace', 'monospace']
+				},
+				fontSize: tokens.typography?.fontSize || {},
+				fontWeight: tokens.typography?.fontWeight || {},
+				lineHeight: tokens.typography?.lineHeight || {},
+				letterSpacing: tokens.typography?.letterSpacing || {},
+				spacing: tokens.spacing || {},
+				borderRadius: tokens.borderRadius || {},
+				boxShadow: tokens.boxShadow || {},
+				maxWidth: tokens.container || {}
+			}
+		},
+		safelist: [
+			// Brand colors
+			'bg-primary', 'bg-primary-dark', 'bg-primary-light',
+			'bg-secondary', 'bg-secondary-dark', 'bg-secondary-light',
+			'text-primary', 'text-primary-dark', 'text-primary-light',
+			'text-secondary', 'text-secondary-dark', 'text-secondary-light',
+			'border-primary', 'border-secondary',
+			// Semantic colors
+			'bg-success', 'bg-warning', 'bg-error', 'bg-info',
+			'text-success', 'text-warning', 'text-error', 'text-info',
+			// Background tokens
+			'bg-base', 'bg-elevated', 'bg-lifted',
+			'bg-accent-base', 'bg-accent-elevated', 'bg-accent-lifted',
+			// Text tokens
+			'text-base', 'text-subtle', 'text-muted',
+			'text-accent-base', 'text-accent-subtle', 'text-accent-muted',
+			// Text styles
+			'text-display', 'text-heading-1', 'text-heading-2', 'text-heading-3',
+			'text-overline-display', 'text-overline-heading-1', 'text-overline-heading-2', 'text-overline-heading-3',
+			'text-lead', 'text-body', 'text-body-small',
+			'text-caption', 'text-label'
+		]
+	};
+}
+
+/**
+ * Generate CSS Variables from Design Tokens
+ */
+export function generateCSSFromTokens(tokens) {
+	const lines = [':root {'];
+
+	// Colors
+	for (const [key, value] of Object.entries(tokens.colors || {})) {
+		const cssVarName = `--color-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+		lines.push(`  ${cssVarName}: ${value};`);
+	}
+
+	// Typography - Font Families
+	for (const [key, value] of Object.entries(tokens.typography?.fontFamily || {})) {
+		lines.push(`  --font-${key}: ${value};`);
+	}
+
+	// Typography - Font Sizes
+	for (const [key, value] of Object.entries(tokens.typography?.fontSize || {})) {
+		lines.push(`  --text-${key}: ${value};`);
+	}
+
+	// Typography - Font Weights
+	for (const [key, value] of Object.entries(tokens.typography?.fontWeight || {})) {
+		lines.push(`  --font-${key}: ${value};`);
+	}
+
+	// Typography - Line Heights
+	for (const [key, value] of Object.entries(tokens.typography?.lineHeight || {})) {
+		lines.push(`  --leading-${key}: ${value};`);
+	}
+
+	// Typography - Letter Spacing
+	for (const [key, value] of Object.entries(tokens.typography?.letterSpacing || {})) {
+		lines.push(`  --tracking-${key}: ${value};`);
+	}
+
+	// Spacing
+	if (typeof tokens.spacing === 'object' && tokens.spacing !== null) {
+		// Object format: { '0': '0', '1': '0.25rem', '2': '0.5rem', ... }
+		for (const [key, value] of Object.entries(tokens.spacing)) {
+			lines.push(`  --spacing-${key.replace('.', '-')}: ${value};`);
+		}
+	} else if (typeof tokens.spacing === 'string') {
+		// String format (base unit): '0.25rem' - Tailwind v4 will auto-generate scale
+		// Output base spacing variable for Tailwind v4
+		lines.push(`  --spacing: ${tokens.spacing};`);
+	}
+
+	// Container
+	for (const [key, value] of Object.entries(tokens.container || {})) {
+		lines.push(`  --container-${key}: ${value};`);
+	}
+
+	// Border Width
+	if (typeof tokens.borderWidth === 'object' && tokens.borderWidth !== null) {
+		for (const [key, value] of Object.entries(tokens.borderWidth)) {
+			const varName = key === 'DEFAULT' ? '--border-width' : `--border-width-${key}`;
+			lines.push(`  ${varName}: ${value};`);
+		}
+	} else if (typeof tokens.borderWidth === 'string') {
+		lines.push(`  --border-width: ${tokens.borderWidth};`);
+	}
+
+	// Border Radius
+	if (typeof tokens.borderRadius === 'object' && tokens.borderRadius !== null) {
+		for (const [key, value] of Object.entries(tokens.borderRadius)) {
+			const varName = key === 'DEFAULT' ? '--radius' : `--radius-${key}`;
+			lines.push(`  ${varName}: ${value};`);
+		}
+	} else if (typeof tokens.borderRadius === 'string') {
+		lines.push(`  --radius: ${tokens.borderRadius};`);
+	}
+
+	// Box Shadow
+	for (const [key, value] of Object.entries(tokens.boxShadow || {})) {
+		const varName = key === 'DEFAULT' ? '--shadow' : `--shadow-${key}`;
+		lines.push(`  ${varName}: ${value};`);
+	}
+
+	lines.push('}');
+
+	// Add global body font-family as baseline
+	lines.push('');
+	lines.push('/* Global baseline font */');
+	lines.push('body {');
+	lines.push('  font-family: var(--font-body);');
+	lines.push('}');
+
+	// Generate utility classes for text styles
+	if (tokens.textStyles) {
+		lines.push('');
+		lines.push('/* Text Style Utilities */');
+		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
+			const kebabName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
+			const className = `text-${kebabName}`;
+
+			lines.push(`.${className} {`);
+			if (style.fontFamily) {
+				const fontVar = `--font-${style.fontFamily}`;
+				lines.push(`  font-family: var(${fontVar});`);
+			}
+			if (style.fontWeight) {
+				lines.push(`  font-weight: ${style.fontWeight};`);
+			}
+			if (style.fontSize) {
+				const fontSize = typeof style.fontSize === 'object' ? style.fontSize.base : style.fontSize;
+				lines.push(`  font-size: ${fontSize};`);
+			}
+			if (style.lineHeight) {
+				const lineHeight = typeof style.lineHeight === 'object' ? style.lineHeight.base : style.lineHeight;
+				lines.push(`  line-height: ${lineHeight};`);
+			}
+			if (style.letterSpacing) {
+				const letterSpacing = typeof style.letterSpacing === 'object' ? style.letterSpacing.base : style.letterSpacing;
+				lines.push(`  letter-spacing: ${letterSpacing};`);
+			}
+			if (style.textTransform) {
+				lines.push(`  text-transform: ${style.textTransform};`);
+			}
+			if (style.textColor) {
+				const colorVar = `--color-${style.textColor.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+				lines.push(`  color: var(${colorVar});`);
+			}
+			lines.push('}');
+		}
+
+		// Add responsive media queries for textStyles
+		const breakpointKeys = ['md', 'lg', 'xl', '2xl'];
+		const breakpointValues = {
+			md: '768px',
+			lg: '1024px',
+			xl: '1280px',
+			'2xl': '1536px'
+		};
+
+		for (const bp of breakpointKeys) {
+			const mediaQueryLines = [];
+
+			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
+				const kebabName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
+				const className = `text-${kebabName}`;
+				const hasResponsive = (
+					(style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) ||
+					(style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) ||
+					(style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp])
+				);
+
+				if (hasResponsive) {
+					mediaQueryLines.push(`  .${className} {`);
+					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
+						mediaQueryLines.push(`    font-size: ${style.fontSize[bp]};`);
+					}
+					if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
+						mediaQueryLines.push(`    line-height: ${style.lineHeight[bp]};`);
+					}
+					if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
+						mediaQueryLines.push(`    letter-spacing: ${style.letterSpacing[bp]};`);
+					}
+					mediaQueryLines.push(`  }`);
+				}
+			}
+
+			if (mediaQueryLines.length > 0) {
+				lines.push('');
+				lines.push(`@media (min-width: ${breakpointValues[bp]}) {`);
+				lines.push(...mediaQueryLines);
+				lines.push('}');
+			}
+		}
+	}
+
+	// Generate button utility classes
+	if (tokens.buttons) {
+		lines.push('');
+		lines.push('/* Button Utilities */');
+
+		// Helper to convert hex to rgba with opacity
+		const hexToRgba = (hex, alpha) => {
+			if (!hex || hex === 'transparent') return 'transparent';
+			hex = hex.replace('#', '');
+			const r = parseInt(hex.substring(0, 2), 16);
+			const g = parseInt(hex.substring(2, 4), 16);
+			const b = parseInt(hex.substring(4, 6), 16);
+			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+		};
+
+		// Shadow presets
+		const shadowPresets = {
+			none: 'none',
+			sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+			md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+			lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+			xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+			'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+		};
+
+		// Gradient direction mapping
+		const directionMap = {
+			'to-t': 'to top',
+			'to-tr': 'to top right',
+			'to-r': 'to right',
+			'to-br': 'to bottom right',
+			'to-b': 'to bottom',
+			'to-bl': 'to bottom left',
+			'to-l': 'to left',
+			'to-tl': 'to top left'
+		};
+
+		// Base button class
+		lines.push('.btn {');
+		lines.push('  display: inline-flex;');
+		lines.push('  align-items: center;');
+		lines.push('  justify-content: center;');
+		lines.push('  font-weight: 500;');
+		lines.push('  border-style: solid;');
+		lines.push('  transition: all 0.15s ease-in-out;');
+		lines.push('  cursor: pointer;');
+		lines.push('  text-decoration: none;');
+		lines.push('}');
+
+		// Size classes with direct values
+		if (tokens.buttons.sizes) {
+			for (const [sizeName, size] of Object.entries(tokens.buttons.sizes)) {
+				lines.push(`.btn-${sizeName} {`);
+				lines.push(`  padding: ${size.paddingY}px ${size.paddingX}px;`);
+				lines.push(`  font-size: ${size.fontSize}px;`);
+				// Calculate unitless line-height (lineHeight in px / fontSize in px)
+				const lineHeightRatio = size.lineHeight / size.fontSize;
+				lines.push(`  line-height: ${lineHeightRatio};`);
+				lines.push(`  min-height: ${size.minHeight}px;`);
+				lines.push(`  border-radius: ${size.borderRadius}px;`);
+				lines.push(`  border-width: ${size.borderWidth}px;`);
+				lines.push(`  gap: ${size.gap}px;`);
+				lines.push('}');
+
+				// Icon size
+				lines.push(`.btn-${sizeName} iconify-icon {`);
+				lines.push(`  font-size: ${size.iconSize}px;`);
+				lines.push('}');
+			}
+		}
+
+		// Variant classes with gradients, opacity, shadows
+		const variants = Object.keys(tokens.buttons).filter(key => key !== 'sizes');
+		for (const variantName of variants) {
+			const variant = tokens.buttons[variantName];
+
+			const bgColor = tokens.colors[variant.bgColor] || variant.bgColor;
+			const textColor = tokens.colors[variant.textColor] || variant.textColor;
+			const borderColor = tokens.colors[variant.borderColor] || variant.borderColor;
+			const opacity = (variant.opacity || 100) / 100;
+
+			lines.push(`.btn-${variantName} {`);
+
+			// Background with opacity and gradient support
+			if (variant.bgGradient) {
+				const fromColor = tokens.colors[variant.bgGradient.from] || variant.bgGradient.from;
+				const toColor = tokens.colors[variant.bgGradient.to] || variant.bgGradient.to;
+				const direction = directionMap[variant.bgGradient.direction] || 'to bottom right';
+				const fromRgba = hexToRgba(fromColor, opacity);
+				const toRgba = hexToRgba(toColor, opacity);
+				lines.push(`  background: linear-gradient(${direction}, ${fromRgba}, ${toRgba});`);
+			} else {
+				lines.push(`  background-color: ${hexToRgba(bgColor, opacity)};`);
+			}
+
+			lines.push(`  color: ${textColor};`);
+			lines.push(`  border-color: ${borderColor};`);
+
+			// Shadow
+			if (variant.shadow && variant.shadow !== 'none') {
+				lines.push(`  box-shadow: ${shadowPresets[variant.shadow]};`);
+			}
+
+			// Backdrop blur
+			if (variant.backdropBlur) {
+				lines.push(`  backdrop-filter: blur(${variant.backdropBlur}px);`);
+				lines.push(`  -webkit-backdrop-filter: blur(${variant.backdropBlur}px);`);
+			}
+
+			lines.push('}');
+
+			// Hover state
+			const bgColorHover = variant.bgColorHover ? (tokens.colors[variant.bgColorHover] || variant.bgColorHover) : bgColor;
+			const textColorHover = variant.textColorHover ? (tokens.colors[variant.textColorHover] || variant.textColorHover) : textColor;
+			const borderColorHover = variant.borderColorHover ? (tokens.colors[variant.borderColorHover] || variant.borderColorHover) : borderColor;
+			const opacityHover = (variant.opacityHover !== undefined ? variant.opacityHover : (variant.opacity || 100)) / 100;
+
+			lines.push(`.btn-${variantName}:hover {`);
+
+			// Hover background with opacity and gradient support
+			if (variant.bgGradientHover) {
+				const fromColor = tokens.colors[variant.bgGradientHover.from] || variant.bgGradientHover.from;
+				const toColor = tokens.colors[variant.bgGradientHover.to] || variant.bgGradientHover.to;
+				const direction = directionMap[variant.bgGradientHover.direction] || 'to bottom right';
+				const fromRgba = hexToRgba(fromColor, opacityHover);
+				const toRgba = hexToRgba(toColor, opacityHover);
+				lines.push(`  background: linear-gradient(${direction}, ${fromRgba}, ${toRgba});`);
+			} else if (variant.bgGradient && !variant.bgColorHover) {
+				// Keep gradient on hover if no hover color specified
+				const fromColor = tokens.colors[variant.bgGradient.from] || variant.bgGradient.from;
+				const toColor = tokens.colors[variant.bgGradient.to] || variant.bgGradient.to;
+				const direction = directionMap[variant.bgGradient.direction] || 'to bottom right';
+				const fromRgba = hexToRgba(fromColor, opacityHover);
+				const toRgba = hexToRgba(toColor, opacityHover);
+				lines.push(`  background: linear-gradient(${direction}, ${fromRgba}, ${toRgba});`);
+			} else {
+				lines.push(`  background-color: ${hexToRgba(bgColorHover, opacityHover)};`);
+			}
+
+			if (variant.textColorHover) {
+				lines.push(`  color: ${textColorHover};`);
+			}
+			lines.push(`  border-color: ${borderColorHover};`);
+
+			// Hover shadow
+			if (variant.shadowHover && variant.shadowHover !== 'none') {
+				lines.push(`  box-shadow: ${shadowPresets[variant.shadowHover]};`);
+			}
+
+			// Hover backdrop blur
+			if (variant.backdropBlurHover !== undefined && variant.backdropBlurHover !== null) {
+				if (variant.backdropBlurHover === 0) {
+					lines.push(`  backdrop-filter: none;`);
+					lines.push(`  -webkit-backdrop-filter: none;`);
+				} else {
+					lines.push(`  backdrop-filter: blur(${variant.backdropBlurHover}px);`);
+					lines.push(`  -webkit-backdrop-filter: blur(${variant.backdropBlurHover}px);`);
+				}
+			}
+
+			lines.push('}');
+		}
+	}
+
+	// Generate utility classes for semantic colors
+	if (tokens.colors) {
+		lines.push('');
+		lines.push('/* Semantic Color Utilities */');
+
+		// Background colors
+		const bgColors = [
+			'bgBase', 'bgElevated', 'bgLifted',
+			'bgAccentBase', 'bgAccentElevated', 'bgAccentLifted'
+		];
+		for (const colorKey of bgColors) {
+			if (tokens.colors[colorKey]) {
+				const kebabName = colorKey.replace(/([A-Z])/g, '-$1').toLowerCase().replace('bg-', '');
+				const className = `bg-${kebabName}`;
+				const colorVar = `--color-${colorKey.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+				lines.push(`.${className} {`);
+				lines.push(`  background-color: var(${colorVar});`);
+				lines.push('}');
+			}
+		}
+
+		// Text colors
+		const textColors = [
+			'textBase', 'textSubtle', 'textMuted',
+			'textAccentBase', 'textAccentSubtle', 'textAccentMuted'
+		];
+		for (const colorKey of textColors) {
+			if (tokens.colors[colorKey]) {
+				const kebabName = colorKey.replace(/([A-Z])/g, '-$1').toLowerCase().replace('text-', '');
+				const className = `text-${kebabName}`;
+				const colorVar = `--color-${colorKey.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+				lines.push(`.${className} {`);
+				lines.push(`  color: var(${colorVar});`);
+				lines.push('}');
+			}
+		}
+
+		// Border colors
+		const borderColors = [
+			'borderBase', 'borderSubtle', 'borderMuted'
+		];
+		for (const colorKey of borderColors) {
+			if (tokens.colors[colorKey]) {
+				const kebabName = colorKey.replace(/([A-Z])/g, '-$1').toLowerCase().replace('border-', '');
+				const className = `border-${kebabName}`;
+				const colorVar = `--color-${colorKey.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+				lines.push(`.${className} {`);
+				lines.push(`  border-color: var(${colorVar});`);
+				lines.push('}');
+			}
+		}
+	}
+
+	return lines.join('\n');
+}

package/src/index.js

@@ -5,6 +5,7 @@ import { bundleIsland, bundleComponentIslands } from './bundler.js';
 import { deduplicateCSS } from './css-deduplicator.js';
 import { markdownToHtml, processMarkdownProps } from './markdown.js';
 import TemplateProcessor, { templateProcessor } from './template-processor.js';
+import { defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens } from './design-tokens.js';
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
@@ -17,4 +18,4 @@ function getMotionRuntime() {
 	return readFileSync(join(__dirname, '../dist/motion-runtime.min.js'), 'utf-8');
 }
 
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, getMotionRuntime, TemplateProcessor, templateProcessor };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens };