@webmate-studio/builder 0.2.67 → 0.2.68

package/package.json

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

package/src/design-tokens.js

@@ -12,7 +12,21 @@ 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',
+		'warning': 'warning',
+		'warningDark': 'warning-dark',
+		'error': 'error',
+		'errorDark': 'error-dark',
+		'info': 'info',
+		'infoDark': 'info-dark',
 
 		// Base semantic colors
 		'bgBase': 'default',
@@ -198,6 +212,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 +275,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
@@ -514,7 +582,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 +728,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 +822,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 +1029,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 +1079,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]) ||