@webmate-studio/builder 0.2.101 → 0.2.102

package/package.json

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

package/src/design-tokens.js

@@ -1228,6 +1228,37 @@ 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
 		const breakpointKeys = ['sm', 'md', 'lg', 'xl', '2xl'];