@webmate-studio/builder 0.2.64 → 0.2.66

package/package.json

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

package/src/design-tokens.js

@@ -1,3 +1,71 @@
+/**
+ * Generate color utility classes (bg-*, text-*, border-*)
+ * ALL colors are available in ALL variants (text, bg, border)
+ * Used by both generateTailwindV4Theme and generateCSSFromTokens
+ */
+function generateSemanticColorUtilities(tokens) {
+	if (!tokens.colors) return '';
+
+	let utilities = '\n/* Color Utilities */';
+
+	// Map of all colors: token name -> utility class base name
+	const colorMap = {
+		// Brand colors
+		'primary': 'primary',
+		'secondary': 'secondary',
+
+		// Base semantic colors
+		'bgBase': 'default',
+		'bgElevated': 'elevated',
+		'bgLifted': 'lifted',
+		'textBase': 'default',
+		'textSubtle': 'subtle',
+		'textMuted': 'muted',
+		'borderBase': 'default',
+		'borderSubtle': 'subtle',
+		'borderMuted': 'muted',
+
+		// Accent colors
+		'bgAccentBase': 'accent-default',
+		'bgAccentElevated': 'accent-elevated',
+		'bgAccentLifted': 'accent-lifted',
+		'textAccentBase': 'accent-default',
+		'textAccentSubtle': 'accent-subtle',
+		'textAccentMuted': 'accent-muted',
+		'borderAccentBase': 'accent-default',
+		'borderAccentSubtle': 'accent-subtle',
+		'borderAccentMuted': 'accent-muted'
+	};
+
+	// Collect unique base names (deduplicate)
+	const processedNames = new Set();
+
+	for (const [tokenKey, baseName] of Object.entries(colorMap)) {
+		if (!tokens.colors[tokenKey]) continue;
+
+		// Skip if we already processed this base name
+		if (processedNames.has(baseName)) continue;
+		processedNames.add(baseName);
+
+		const colorVar = `--color-${tokenKey.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+
+		// Generate all three variants for every color
+		utilities += `\n.text-${baseName} {`;
+		utilities += `\n  color: var(${colorVar});`;
+		utilities += `\n}`;
+
+		utilities += `\n.bg-${baseName} {`;
+		utilities += `\n  background-color: var(${colorVar});`;
+		utilities += `\n}`;
+
+		utilities += `\n.border-${baseName} {`;
+		utilities += `\n  border-color: var(${colorVar});`;
+		utilities += `\n}`;
+	}
+
+	return utilities;
+}
+
 /**
  * Default Design Tokens für Website-Design
  * Tailwind v4 kompatibel - verwendet Base-Values wo möglich
@@ -49,7 +117,12 @@ export const defaultDesignTokens = {
 		// Border Colors (Semantic)
 		borderBase: '#d1d5db',      // slate-300 - Standard Border
 		borderSubtle: '#e5e7eb',    // slate-200 - Dezenter Border
-		borderMuted: '#f3f4f6'      // slate-100 - Sehr dezenter Border
+		borderMuted: '#f3f4f6',     // slate-100 - Sehr dezenter Border
+
+		// Border Colors (Accent)
+		borderAccentBase: '#8b5cf6',     // violet-500
+		borderAccentSubtle: '#a78bfa',   // violet-400
+		borderAccentMuted: '#c4b5fd'     // violet-300
 	},
 
 	typography: {
@@ -627,12 +700,16 @@ body {
 		// Size classes
 		if (tokens.buttons.sizes) {
 			for (const sizeName of Object.keys(tokens.buttons.sizes)) {
+				const size = tokens.buttons.sizes[sizeName];
+				// Calculate unitless line-height (lineHeight in px / fontSize in px)
+				const lineHeightRatio = size.lineHeight / size.fontSize;
+
 				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);
+  padding: ${size.paddingY}px ${size.paddingX}px;
+  font-size: ${size.fontSize}px;
+  line-height: ${lineHeightRatio};
+  border-radius: ${size.borderRadius}px;
+  gap: ${size.gap}px;
 }`;
 			}
 		}
@@ -693,6 +770,9 @@ body {
 		}
 	}
 
+	// Add semantic color utilities
+	globalStyles += generateSemanticColorUtilities(tokens);
+
 	return { themeVars, globalStyles };
 }
 
@@ -1000,7 +1080,9 @@ export function generateCSSFromTokens(tokens) {
 				lines.push(`.btn-${sizeName} {`);
 				lines.push(`  padding: ${size.paddingY}px ${size.paddingX}px;`);
 				lines.push(`  font-size: ${size.fontSize}px;`);
-				lines.push(`  line-height: ${size.lineHeight}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;`);
@@ -1107,57 +1189,10 @@ export function generateCSSFromTokens(tokens) {
 		}
 	}
 
-	// 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('}');
-			}
-		}
+	// Add semantic color utilities
+	const semanticUtilities = generateSemanticColorUtilities(tokens);
+	if (semanticUtilities) {
+		lines.push(semanticUtilities);
 	}
 
 	return lines.join('\n');