@webmate-studio/builder 0.2.81 → 0.2.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.81",
+  "version": "0.2.83",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [
@@ -23,6 +23,7 @@
     ".": "./src/index.js",
     "./build-service.js": "./build-service.js",
     "./src/css-deduplicator.js": "./src/css-deduplicator.js",
+    "./src/design-tokens.js": "./src/design-tokens.js",
     "./dist/motion-runtime.min.js": "./dist/motion-runtime.min.js"
   },
   "bin": {

package/src/design-tokens.js

@@ -7,6 +7,7 @@ function generateSemanticColorUtilities(tokens) {
 	if (!tokens.colors) return '';
 
 	let utilities = '\n/* Color Utilities */';
+	utilities += '\n@layer components {';
 
 	// Map of all colors: token name -> utility class base name
 	const colorMap = {
@@ -120,6 +121,8 @@ function generateSemanticColorUtilities(tokens) {
 		}
 	}
 
+	utilities += '\n}'; // Close @layer components
+
 	return utilities;
 }
 
@@ -1091,9 +1094,11 @@ export function generateCSSFromTokens(tokens) {
 	lines.push('}');
 
 	// Generate utility classes for text styles
+	// Wrap in @layer components so Tailwind utilities (@layer utilities) can override them
 	if (tokens.textStyles) {
 		lines.push('');
 		lines.push('/* Text Style Utilities */');
+		lines.push('@layer components {');
 		for (const [styleName, style] of Object.entries(tokens.textStyles)) {
 			const kebabName = styleName
 				.replace(/([A-Z])/g, '-$1')
@@ -1102,35 +1107,36 @@ export function generateCSSFromTokens(tokens) {
 				.replace(/^-/, '');
 			const className = `text-${kebabName}`;
 
-			lines.push(`.${className} {`);
+			lines.push(`  .${className} {`);
 			if (style.fontFamily) {
 				const fontVar = `--font-${style.fontFamily}`;
-				lines.push(`  font-family: var(${fontVar});`);
+				lines.push(`    font-family: var(${fontVar});`);
 			}
 			if (style.fontWeight) {
-				lines.push(`  font-weight: ${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};`);
+				lines.push(`    font-size: ${fontSize};`);
 			}
 			if (style.lineHeight) {
 				const lineHeight = typeof style.lineHeight === 'object' ? style.lineHeight.base : style.lineHeight;
-				lines.push(`  line-height: ${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};`);
+				lines.push(`    letter-spacing: ${letterSpacing};`);
 			}
 			if (style.textTransform) {
-				lines.push(`  text-transform: ${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(`    color: var(${colorVar});`);
 			}
-			lines.push('}');
+			lines.push(`  }`);
 		}
+		lines.push('}'); // Close @layer components
 
 		// Add responsive media queries for textStyles
 		const breakpointKeys = ['md', 'lg', 'xl', '2xl'];
@@ -1158,24 +1164,26 @@ export function generateCSSFromTokens(tokens) {
 				);
 
 				if (hasResponsive) {
-					mediaQueryLines.push(`  .${className} {`);
+					mediaQueryLines.push(`    .${className} {`);
 					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
-						mediaQueryLines.push(`    font-size: ${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]};`);
+						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(`      letter-spacing: ${style.letterSpacing[bp]};`);
 					}
-					mediaQueryLines.push(`  }`);
+					mediaQueryLines.push(`    }`);
 				}
 			}
 
 			if (mediaQueryLines.length > 0) {
 				lines.push('');
-				lines.push(`@media (min-width: ${breakpointValues[bp]}) {`);
+				lines.push(`@layer components {`);
+				lines.push(`  @media (min-width: ${breakpointValues[bp]}) {`);
 				lines.push(...mediaQueryLines);
+				lines.push(`  }`);
 				lines.push('}');
 			}
 		}