@webmate-studio/builder 0.2.101 → 0.2.103

package/package.json

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

package/src/design-tokens.js

@@ -913,6 +913,7 @@ body {
 		}
 
 		// Generate responsive variants (sm:, md:, lg:, xl:, 2xl:) for Tailwind compatibility
+		// These allow switching to a different text style at a breakpoint: class="text-body lg:text-lead"
 		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];
 		const breakpointValues = {
 			sm: '640px',
@@ -930,28 +931,54 @@ body {
 					.toLowerCase()
 					.replace(/^-/, '');
 				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) {
-					// Generate Tailwind-compatible breakpoint class: md:text-body
-					globalStyles += `\n@media (min-width: ${breakpointValues[bp]}) {`;
-					globalStyles += `\n  .${bp}\\:${className} {`;
-					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
-						globalStyles += `\n    font-size: ${style.fontSize[bp]};`;
-					}
-					if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
-						globalStyles += `\n    line-height: ${style.lineHeight[bp]};`;
-					}
-					if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
-						globalStyles += `\n    letter-spacing: ${style.letterSpacing[bp]};`;
-					}
-					globalStyles += `\n  }`;
-					globalStyles += `\n}`;
+				// Generate Tailwind-compatible breakpoint class: md:text-body
+				// Apply ALL properties of the text style, not just responsive values
+				globalStyles += `\n@media (min-width: ${breakpointValues[bp]}) {`;
+				globalStyles += `\n  .${bp}\\:${className} {`;
+
+				// Font family
+				if (style.fontFamily) {
+					globalStyles += `\n    font-family: var(--text-${kebabName}-font-family);`;
+				}
+
+				// Font weight
+				if (style.fontWeight) {
+					globalStyles += `\n    font-weight: var(--text-${kebabName}-font-weight);`;
+				}
+
+				// Font style
+				if (style.fontStyle) {
+					globalStyles += `\n    font-style: var(--text-${kebabName}-font-style);`;
+				}
+
+				// Font size (use CSS variable which is responsive)
+				if (style.fontSize) {
+					globalStyles += `\n    font-size: var(--text-${kebabName}-font-size);`;
+				}
+
+				// Line height (use CSS variable which is responsive)
+				if (style.lineHeight) {
+					globalStyles += `\n    line-height: var(--text-${kebabName}-line-height);`;
+				}
+
+				// Letter spacing (use CSS variable which is responsive)
+				if (style.letterSpacing) {
+					globalStyles += `\n    letter-spacing: var(--text-${kebabName}-letter-spacing);`;
+				}
+
+				// Text transform
+				if (style.textTransform) {
+					globalStyles += `\n    text-transform: var(--text-${kebabName}-text-transform);`;
 				}
+
+				// Text color
+				if (style.textColor) {
+					globalStyles += `\n    color: var(--text-${kebabName}-color);`;
+				}
+
+				globalStyles += `\n  }`;
+				globalStyles += `\n}`;
 			}
 		}
 	}
@@ -1228,8 +1255,40 @@ export function generateCSSFromTokens(tokens) {
 				lines.push(`    color: var(${colorVar});`);
 			}
 			lines.push(`  }`);
+
+			// Add intrinsic responsive values (if the style itself has responsive values)
+			const intrinsicBreakpoints = ['sm', 'md', 'lg', 'xl', '2xl'];
+			for (const bp of intrinsicBreakpoints) {
+				const hasIntrinsicResponsive = (
+					(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 (hasIntrinsicResponsive) {
+					const bpValue = intrinsicBreakpoints.indexOf(bp) === 0 ? '640px' :
+					                intrinsicBreakpoints.indexOf(bp) === 1 ? '768px' :
+					                intrinsicBreakpoints.indexOf(bp) === 2 ? '1024px' :
+					                intrinsicBreakpoints.indexOf(bp) === 3 ? '1280px' : '1536px';
+
+					lines.push(`  @media (min-width: ${bpValue}) {`);
+					lines.push(`    .${className} {`);
+					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
+						lines.push(`      font-size: ${style.fontSize[bp]};`);
+					}
+					if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
+						lines.push(`      line-height: ${style.lineHeight[bp]};`);
+					}
+					if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
+						lines.push(`      letter-spacing: ${style.letterSpacing[bp]};`);
+					}
+					lines.push(`    }`);
+					lines.push(`  }`);
+				}
+			}
 		}
 		// Generate responsive variants (md:, lg:, xl:, 2xl:) for Tailwind compatibility
+		// These allow switching to a different text style at a breakpoint: class="text-body lg:text-lead"
 		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];
 		const breakpointValues = {
 			sm: '640px',
@@ -1247,28 +1306,60 @@ export function generateCSSFromTokens(tokens) {
 					.toLowerCase()
 					.replace(/^-/, '');
 				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) {
-					// Generate Tailwind-compatible breakpoint class: md:text-body
-					lines.push(`  .${bp}\\:${className} {`);
-					lines.push(`    @media (min-width: ${breakpointValues[bp]}) {`);
-					if (style.fontSize && typeof style.fontSize === 'object' && style.fontSize[bp]) {
-						lines.push(`      font-size: ${style.fontSize[bp]};`);
-					}
-					if (style.lineHeight && typeof style.lineHeight === 'object' && style.lineHeight[bp]) {
-						lines.push(`      line-height: ${style.lineHeight[bp]};`);
-					}
-					if (style.letterSpacing && typeof style.letterSpacing === 'object' && style.letterSpacing[bp]) {
-						lines.push(`      letter-spacing: ${style.letterSpacing[bp]};`);
-					}
-					lines.push(`    }`);
-					lines.push(`  }`);
+				// Generate Tailwind-compatible breakpoint class: md:text-body
+				// Apply ALL properties of the text style, not just responsive values
+				lines.push(`  .${bp}\\:${className} {`);
+				lines.push(`    @media (min-width: ${breakpointValues[bp]}) {`);
+
+				// Font family
+				if (style.fontFamily) {
+					const fontVar = `--font-${style.fontFamily}`;
+					lines.push(`      font-family: var(${fontVar});`);
+				}
+
+				// Font weight
+				if (style.fontWeight) {
+					lines.push(`      font-weight: ${style.fontWeight};`);
+				}
+
+				// Font size (use breakpoint value if available, otherwise base)
+				if (style.fontSize) {
+					const fontSize = typeof style.fontSize === 'object'
+						? (style.fontSize[bp] || style.fontSize.base)
+						: style.fontSize;
+					lines.push(`      font-size: ${fontSize};`);
 				}
+
+				// Line height (use breakpoint value if available, otherwise base)
+				if (style.lineHeight) {
+					const lineHeight = typeof style.lineHeight === 'object'
+						? (style.lineHeight[bp] || style.lineHeight.base)
+						: style.lineHeight;
+					lines.push(`      line-height: ${lineHeight};`);
+				}
+
+				// Letter spacing (use breakpoint value if available, otherwise base)
+				if (style.letterSpacing) {
+					const letterSpacing = typeof style.letterSpacing === 'object'
+						? (style.letterSpacing[bp] || style.letterSpacing.base)
+						: style.letterSpacing;
+					lines.push(`      letter-spacing: ${letterSpacing};`);
+				}
+
+				// Text transform
+				if (style.textTransform) {
+					lines.push(`      text-transform: ${style.textTransform};`);
+				}
+
+				// Text color
+				if (style.textColor) {
+					const colorVar = `--color-${style.textColor.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+					lines.push(`      color: var(${colorVar});`);
+				}
+
+				lines.push(`    }`);
+				lines.push(`  }`);
 			}
 		}