@webmate-studio/builder 0.2.67 → 0.2.70

package/package.json

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

package/src/design-tokens.js

@@ -12,7 +12,25 @@ function generateSemanticColorUtilities(tokens) {
 	const colorMap = {
 		// Brand colors
 		'primary': 'primary',
+		'primaryDark': 'primary-dark',
+		'primaryLight': 'primary-light',
 		'secondary': 'secondary',
+		'secondaryDark': 'secondary-dark',
+		'secondaryLight': 'secondary-light',
+
+		// Semantic state colors
+		'success': 'success',
+		'successDark': 'success-dark',
+		'successLight': 'success-light',
+		'warning': 'warning',
+		'warningDark': 'warning-dark',
+		'warningLight': 'warning-light',
+		'error': 'error',
+		'errorDark': 'error-dark',
+		'errorLight': 'error-light',
+		'info': 'info',
+		'infoDark': 'info-dark',
+		'infoLight': 'info-light',
 
 		// Base semantic colors
 		'bgBase': 'default',
@@ -91,12 +109,16 @@ export const defaultDesignTokens = {
 		// Semantic Colors
 		success: '#10b981',
 		successDark: '#059669',
+		successLight: '#d1fae5',
 		warning: '#f59e0b',
 		warningDark: '#d97706',
+		warningLight: '#fef3c7',
 		error: '#ef4444',
 		errorDark: '#dc2626',
+		errorLight: '#fee2e2',
 		info: '#3b82f6',
 		infoDark: '#2563eb',
+		infoLight: '#dbeafe',
 
 		// Background Colors (Semantic)
 		bgBase: '#ffffff',
@@ -198,6 +220,33 @@ export const defaultDesignTokens = {
 			textTransform: 'none',
 			textColor: 'textBase'
 		},
+		heading4: {
+			fontFamily: 'heading',
+			fontSize: '1.5rem', // 24px
+			fontWeight: 600,
+			lineHeight: '1.3',
+			letterSpacing: '0em',
+			textTransform: 'none',
+			textColor: 'textBase'
+		},
+		heading5: {
+			fontFamily: 'heading',
+			fontSize: '1.25rem', // 20px
+			fontWeight: 600,
+			lineHeight: '1.3',
+			letterSpacing: '0em',
+			textTransform: 'none',
+			textColor: 'textBase'
+		},
+		heading6: {
+			fontFamily: 'heading',
+			fontSize: '1.125rem', // 18px
+			fontWeight: 600,
+			lineHeight: '1.3',
+			letterSpacing: '0em',
+			textTransform: 'none',
+			textColor: 'textBase'
+		},
 		overlineDisplay: {
 			fontFamily: 'body',
 			fontSize: '1rem', // 16px
@@ -234,6 +283,33 @@ export const defaultDesignTokens = {
 			textTransform: 'uppercase',
 			textColor: 'textAccentSubtle'
 		},
+		overlineHeading4: {
+			fontFamily: 'body',
+			fontSize: '0.75rem', // 12px
+			fontWeight: 500,
+			lineHeight: '1.5',
+			letterSpacing: '0.08em',
+			textTransform: 'uppercase',
+			textColor: 'textAccentSubtle'
+		},
+		overlineHeading5: {
+			fontFamily: 'body',
+			fontSize: '0.6875rem', // 11px
+			fontWeight: 500,
+			lineHeight: '1.5',
+			letterSpacing: '0.08em',
+			textTransform: 'uppercase',
+			textColor: 'textAccentMuted'
+		},
+		overlineHeading6: {
+			fontFamily: 'body',
+			fontSize: '0.625rem', // 10px
+			fontWeight: 500,
+			lineHeight: '1.5',
+			letterSpacing: '0.08em',
+			textTransform: 'uppercase',
+			textColor: 'textAccentMuted'
+		},
 		lead: {
 			fontFamily: 'body',
 			fontSize: '1.25rem', // 20px
@@ -454,12 +530,16 @@ export function generateTailwindV4Theme(tokens) {
 		// 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.successLight) lines.push(`  --color-success-light: ${tokens.colors.successLight};`);
 		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.warningLight) lines.push(`  --color-warning-light: ${tokens.colors.warningLight};`);
 		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.errorLight) lines.push(`  --color-error-light: ${tokens.colors.errorLight};`);
 		if (tokens.colors.info) lines.push(`  --color-info: ${tokens.colors.info};`);
 		if (tokens.colors.infoDark) lines.push(`  --color-info-dark: ${tokens.colors.infoDark};`);
+		if (tokens.colors.infoLight) lines.push(`  --color-info-light: ${tokens.colors.infoLight};`);
 
 		// Background colors (Semantic)
 		if (tokens.colors.bgBase) lines.push(`  --color-bg-base: ${tokens.colors.bgBase};`);
@@ -514,7 +594,13 @@ export function generateTailwindV4Theme(tokens) {
 	// 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-Z0-9])/g, '-$1').toLowerCase();
+			// Convert camelCase to kebab-case with numbers separated
+			// heading1 -> heading-1, overlineHeading2 -> overline-heading-2
+			const kebabName = styleName
+				.replace(/([A-Z])/g, '-$1') // Insert hyphen before capitals
+				.replace(/(\d+)/g, '-$1')    // Insert hyphen before numbers
+				.toLowerCase()
+				.replace(/^-/, '');          // Remove leading hyphen
 
 			// Font family (not responsive)
 			if (style.fontFamily) {
@@ -654,7 +740,11 @@ body {
 	if (tokens.textStyles) {
 		globalStyles += '\n\n/* Text Style Utilities */';
 		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
-			const kebabName = styleName.replace(/([A-Z0-9])/g, '-$1').toLowerCase();
+			const kebabName = styleName
+				.replace(/([A-Z])/g, '-$1')
+				.replace(/(\d+)/g, '-$1')
+				.toLowerCase()
+				.replace(/^-/, '');
 			const className = `text-${kebabName}`;
 
 			globalStyles += `\n.${className} {`;
@@ -744,7 +834,11 @@ body {
 			const mediaQueryLines = [];
 
 			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
-				const kebabName = styleName.replace(/([A-Z0-9])/g, '-$1').toLowerCase();
+				const kebabName = styleName
+					.replace(/([A-Z])/g, '-$1')
+					.replace(/(\d+)/g, '-$1')
+					.toLowerCase()
+					.replace(/^-/, '');
 
 				// Font size
 				if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
@@ -947,7 +1041,11 @@ export function generateCSSFromTokens(tokens) {
 		lines.push('');
 		lines.push('/* Text Style Utilities */');
 		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
-			const kebabName = styleName.replace(/([A-Z0-9])/g, '-$1').toLowerCase();
+			const kebabName = styleName
+				.replace(/([A-Z])/g, '-$1')
+				.replace(/(\d+)/g, '-$1')
+				.toLowerCase()
+				.replace(/^-/, '');
 			const className = `text-${kebabName}`;
 
 			lines.push(`.${className} {`);
@@ -993,7 +1091,11 @@ export function generateCSSFromTokens(tokens) {
 			const mediaQueryLines = [];
 
 			for (const [styleName, style] of Object.entries(tokens.textStyles)) {
-				const kebabName = styleName.replace(/([A-Z0-9])/g, '-$1').toLowerCase();
+				const kebabName = styleName
+					.replace(/([A-Z])/g, '-$1')
+					.replace(/(\d+)/g, '-$1')
+					.toLowerCase()
+					.replace(/^-/, '');
 				const className = `text-${kebabName}`;
 				const hasResponsive = (
 					(style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) ||