@webmate-studio/builder 0.2.154 → 0.2.157

package/package.json

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

package/src/design-tokens-v2-css.js

@@ -537,6 +537,11 @@ function generateButtonVariables(t, lines) {
 			lines.push(`  --btn-${size}-padding-x: ${s.paddingX};`);
 			lines.push(`  --btn-${size}-padding-y: ${s.paddingY};`);
 			lines.push(`  --btn-${size}-font-size: ${s.fontSize};`);
+			if (s.fontFamily) {
+				const fontDef = t.typography?.fonts?.find(f => f.name === s.fontFamily);
+				const fallback = fontDef?.fallback || 'sans-serif';
+				lines.push(`  --btn-${size}-font-family: "${s.fontFamily}", ${fallback};`);
+			}
 			lines.push(`  --btn-${size}-font-weight: ${s.fontWeight};`);
 			lines.push(`  --btn-${size}-line-height: ${s.lineHeight};`);
 			lines.push(`  --btn-${size}-letter-spacing: ${s.letterSpacing};`);
@@ -597,15 +602,31 @@ function resolveShadowToCSS(shadowValue, t) {
 function addButtonVariantVars(lines, prefix, variant, t) {
 	if (variant.bg) lines.push(`  --${prefix}-bg: ${resolveColorRef(variant.bg, t)};`);
 	if (variant.bgHover) lines.push(`  --${prefix}-bg-hover: ${resolveColorRef(variant.bgHover, t)};`);
+	if (variant.bgActive) lines.push(`  --${prefix}-bg-active: ${resolveColorRef(variant.bgActive, t)};`);
 	if (variant.text) lines.push(`  --${prefix}-text: ${resolveColorRef(variant.text, t)};`);
 	if (variant.textHover) lines.push(`  --${prefix}-text-hover: ${resolveColorRef(variant.textHover, t)};`);
+	if (variant.textActive) lines.push(`  --${prefix}-text-active: ${resolveColorRef(variant.textActive, t)};`);
 	if (variant.border && variant.border !== 'none') lines.push(`  --${prefix}-border: 1px solid ${resolveColorRef(variant.border, t)};`);
 	if (variant.borderHover && variant.borderHover !== 'none') lines.push(`  --${prefix}-border-hover: 1px solid ${resolveColorRef(variant.borderHover, t)};`);
+	if (variant.borderActive && variant.borderActive !== 'none') lines.push(`  --${prefix}-border-active: 1px solid ${resolveColorRef(variant.borderActive, t)};`);
 	const shadowCSS = resolveShadowToCSS(variant.shadow, t);
 	if (shadowCSS !== 'none') lines.push(`  --${prefix}-shadow: ${shadowCSS};`);
 	const shadowHoverCSS = resolveShadowToCSS(variant.shadowHover, t);
 	if (shadowHoverCSS !== 'none') lines.push(`  --${prefix}-shadow-hover: ${shadowHoverCSS};`);
+	const shadowActiveCSS = resolveShadowToCSS(variant.shadowActive, t);
+	if (shadowActiveCSS !== 'none') lines.push(`  --${prefix}-shadow-active: ${shadowActiveCSS};`);
 	if (variant.focusRingColor) lines.push(`  --${prefix}-focus-ring: ${resolveColorRef(variant.focusRingColor, t)};`);
+	if (variant.paddingX != null) lines.push(`  --${prefix}-padding-x: ${variant.paddingX};`);
+	if (variant.paddingY != null) lines.push(`  --${prefix}-padding-y: ${variant.paddingY};`);
+	if (variant.fontFamily) {
+		const fontDef = t.typography?.fonts?.find(f => f.name === variant.fontFamily);
+		const fallback = fontDef?.fallback || 'sans-serif';
+		lines.push(`  --${prefix}-font-family: "${variant.fontFamily}", ${fallback};`);
+	}
+	if (variant.fontSizeScale != null && variant.fontSizeScale !== 1) lines.push(`  --${prefix}-font-scale: ${variant.fontSizeScale};`);
+	if (variant.fontWeight) lines.push(`  --${prefix}-font-weight: ${variant.fontWeight};`);
+	if (variant.letterSpacing && variant.letterSpacing !== 'normal') lines.push(`  --${prefix}-letter-spacing: ${variant.letterSpacing};`);
+	if (variant.textTransform && variant.textTransform !== 'none') lines.push(`  --${prefix}-text-transform: ${variant.textTransform};`);
 }
 
 /**
@@ -650,6 +671,7 @@ function generateButtonClasses(t) {
   white-space: nowrap;
   transition: var(--btn-transition);
   border: none;
+  --btn-font-scale: 1;
 }`;
 
 	// Disabled
@@ -661,17 +683,23 @@ function generateButtonClasses(t) {
 
 	// Size classes
 	for (const size of BUTTON_SIZES) {
-		if (!t.buttons.sizes?.[size]) continue;
+		const s = t.buttons.sizes?.[size];
+		if (!s) continue;
 		css += `\n.btn-${size} {
-  padding: var(--btn-${size}-padding-y) var(--btn-${size}-padding-x);
-  font-size: var(--btn-${size}-font-size);
+  --btn-padding-x: var(--btn-${size}-padding-x);
+  --btn-padding-y: var(--btn-${size}-padding-y);
+  padding: var(--btn-padding-y) var(--btn-padding-x);
+  font-size: calc(var(--btn-${size}-font-size) * var(--btn-font-scale, 1));
   font-weight: var(--btn-${size}-font-weight);
   line-height: var(--btn-${size}-line-height);
   letter-spacing: var(--btn-${size}-letter-spacing);
   border-radius: var(--btn-${size}-border-radius);
   min-height: var(--btn-${size}-min-height);
-  gap: var(--btn-${size}-gap);
-}`;
+  gap: var(--btn-${size}-gap);`;
+		if (s.fontFamily) {
+			css += `\n  font-family: var(--btn-${size}-font-family);`;
+		}
+		css += '\n}';
 		css += `\n.btn-${size} iconify-icon { font-size: var(--btn-${size}-icon-size); }`;
 	}
 
@@ -685,7 +713,7 @@ function generateButtonClasses(t) {
 			// customCSS Escape-Hatch
 			css += generateCustomCSSBlock(`btn-${variant}`, v.normal.customCSS);
 		} else if (v.normal) {
-			css += generateVariantNormalCSS(variant, v);
+			css += generateVariantNormalCSS(variant, v, t);
 		}
 
 		// On-surface mode
@@ -700,7 +728,7 @@ function generateButtonClasses(t) {
 	return css;
 }
 
-function generateVariantNormalCSS(variant, v) {
+function generateVariantNormalCSS(variant, v, t) {
 	const p = `btn-${variant}`;
 	let css = `\n.${p} {
   background: var(--${p}-bg);
@@ -715,6 +743,29 @@ function generateVariantNormalCSS(variant, v) {
 	if (v.normal.textDecoration) {
 		css += `\n  text-decoration: ${v.normal.textDecoration};`;
 	}
+	// Padding overrides (variant overrides size)
+	if (v.normal.paddingX != null) {
+		css += `\n  --btn-padding-x: var(--${p}-padding-x);`;
+	}
+	if (v.normal.paddingY != null) {
+		css += `\n  --btn-padding-y: var(--${p}-padding-y);`;
+	}
+	// Typography overrides
+	if (v.normal.fontFamily) {
+		css += `\n  font-family: var(--${p}-font-family);`;
+	}
+	if (v.normal.fontSizeScale != null && v.normal.fontSizeScale !== 1) {
+		css += `\n  --btn-font-scale: var(--${p}-font-scale, 1);`;
+	}
+	if (v.normal.fontWeight) {
+		css += `\n  font-weight: var(--${p}-font-weight);`;
+	}
+	if (v.normal.letterSpacing && v.normal.letterSpacing !== 'normal') {
+		css += `\n  letter-spacing: var(--${p}-letter-spacing);`;
+	}
+	if (v.normal.textTransform && v.normal.textTransform !== 'none') {
+		css += `\n  text-transform: var(--${p}-text-transform);`;
+	}
 
 	css += '\n}';
 
@@ -732,6 +783,42 @@ function generateVariantNormalCSS(variant, v) {
 	if (v.normal.textDecorationHover) {
 		css += `\n  text-decoration: ${v.normal.textDecorationHover};`;
 	}
+	// Transform (scale + translateY)
+	{
+		const scale = v.normal.hoverScale ?? 1;
+		const y = v.normal.hoverY ?? 0;
+		const parts = [];
+		if (scale !== 1) parts.push(`scale(${scale})`);
+		if (y !== 0) parts.push(`translateY(${y}px)`);
+		if (parts.length > 0) {
+			css += `\n  transform: ${parts.join(' ')};`;
+		}
+	}
+
+	css += '\n}';
+
+	// Active
+	css += `\n.${p}:active {
+  background: var(--${p}-bg-active);
+  color: var(--${p}-text-active);`;
+
+	if (v.normal.borderActive && v.normal.borderActive !== 'none') {
+		css += `\n  border: var(--${p}-border-active);`;
+	}
+	if (hasShadow(v.normal.shadowActive)) {
+		css += `\n  box-shadow: var(--${p}-shadow-active);`;
+	}
+	// Transform (scale + translateY)
+	{
+		const scale = v.normal.activeScale ?? 1;
+		const y = v.normal.activeY ?? 0;
+		const parts = [];
+		if (scale !== 1) parts.push(`scale(${scale})`);
+		if (y !== 0) parts.push(`translateY(${y}px)`);
+		if (parts.length > 0) {
+			css += `\n  transform: ${parts.join(' ')};`;
+		}
+	}
 
 	css += '\n}';
 
@@ -769,6 +856,29 @@ function generateVariantOnSurfaceCSS(variant, v, t) {
 	if (v.onSurface.textDecoration) {
 		css += `\n  text-decoration: ${v.onSurface.textDecoration};`;
 	}
+	// Padding overrides (variant overrides size)
+	if (v.onSurface.paddingX != null) {
+		css += `\n  --btn-padding-x: var(--${osp}-padding-x);`;
+	}
+	if (v.onSurface.paddingY != null) {
+		css += `\n  --btn-padding-y: var(--${osp}-padding-y);`;
+	}
+	// Typography overrides
+	if (v.onSurface.fontFamily) {
+		css += `\n  font-family: var(--${osp}-font-family);`;
+	}
+	if (v.onSurface.fontSizeScale != null && v.onSurface.fontSizeScale !== 1) {
+		css += `\n  --btn-font-scale: var(--${osp}-font-scale, 1);`;
+	}
+	if (v.onSurface.fontWeight) {
+		css += `\n  font-weight: var(--${osp}-font-weight);`;
+	}
+	if (v.onSurface.letterSpacing && v.onSurface.letterSpacing !== 'normal') {
+		css += `\n  letter-spacing: var(--${osp}-letter-spacing);`;
+	}
+	if (v.onSurface.textTransform && v.onSurface.textTransform !== 'none') {
+		css += `\n  text-transform: var(--${osp}-text-transform);`;
+	}
 
 	css += '\n}';
 
@@ -786,6 +896,42 @@ function generateVariantOnSurfaceCSS(variant, v, t) {
 	if (v.onSurface.textDecorationHover) {
 		css += `\n  text-decoration: ${v.onSurface.textDecorationHover};`;
 	}
+	// Transform (scale + translateY)
+	{
+		const scale = v.onSurface.hoverScale ?? 1;
+		const y = v.onSurface.hoverY ?? 0;
+		const parts = [];
+		if (scale !== 1) parts.push(`scale(${scale})`);
+		if (y !== 0) parts.push(`translateY(${y}px)`);
+		if (parts.length > 0) {
+			css += `\n  transform: ${parts.join(' ')};`;
+		}
+	}
+
+	css += '\n}';
+
+	// Active
+	css += `\n.btn-on-surface.${p}:active {
+  background: var(--${osp}-bg-active);
+  color: var(--${osp}-text-active);`;
+
+	if (v.onSurface.borderActive && v.onSurface.borderActive !== 'none') {
+		css += `\n  border: var(--${osp}-border-active);`;
+	}
+	if (hasShadow(v.onSurface.shadowActive)) {
+		css += `\n  box-shadow: var(--${osp}-shadow-active);`;
+	}
+	// Transform (scale + translateY)
+	{
+		const scale = v.onSurface.activeScale ?? 1;
+		const y = v.onSurface.activeY ?? 0;
+		const parts = [];
+		if (scale !== 1) parts.push(`scale(${scale})`);
+		if (y !== 0) parts.push(`translateY(${y}px)`);
+		if (parts.length > 0) {
+			css += `\n  transform: ${parts.join(' ')};`;
+		}
+	}
 
 	css += '\n}';
 

package/src/design-tokens-v2.js

@@ -984,6 +984,7 @@ export const defaultDesignTokensV2 = {
 				paddingX: '0.75rem',
 				paddingY: '0.375rem',
 				fontSize: '0.8125rem',
+				fontFamily: null,
 				fontWeight: 500,
 				lineHeight: '1.4',
 				letterSpacing: '0.01em',
@@ -996,6 +997,7 @@ export const defaultDesignTokensV2 = {
 				paddingX: '1.25rem',
 				paddingY: '0.625rem',
 				fontSize: '0.875rem',
+				fontFamily: null,
 				fontWeight: 500,
 				lineHeight: '1.4',
 				letterSpacing: '0em',
@@ -1008,6 +1010,7 @@ export const defaultDesignTokensV2 = {
 				paddingX: '1.75rem',
 				paddingY: '0.875rem',
 				fontSize: '1rem',
+				fontFamily: null,
 				fontWeight: 600,
 				lineHeight: '1.4',
 				letterSpacing: '0em',
@@ -1022,24 +1025,54 @@ export const defaultDesignTokensV2 = {
 				normal: {
 					bg: 'primary-9',
 					bgHover: 'primary-10',
+					bgActive: 'primary-11',
 					text: 'on-primary',
 					textHover: 'on-primary',
+					textActive: 'on-primary',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					focusRingColor: 'primary-8',
 					customCSS: null
 				},
 				onSurface: {
 					bg: 'neutral-1',
 					bgHover: 'neutral-2',
+					bgActive: 'neutral-3',
 					text: 'neutral-12',
 					textHover: 'neutral-12',
+					textActive: 'neutral-12',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			},
@@ -1047,24 +1080,54 @@ export const defaultDesignTokensV2 = {
 				normal: {
 					bg: 'primary-3',
 					bgHover: 'primary-4',
+					bgActive: 'primary-5',
 					text: 'primary-11',
 					textHover: 'primary-12',
+					textActive: 'primary-12',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					focusRingColor: 'primary-8',
 					customCSS: null
 				},
 				onSurface: {
 					bg: 'neutral-1/15',
 					bgHover: 'neutral-1/25',
+					bgActive: 'neutral-1/35',
 					text: 'on-primary',
 					textHover: 'on-primary',
+					textActive: 'on-primary',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			},
@@ -1072,24 +1135,54 @@ export const defaultDesignTokensV2 = {
 				normal: {
 					bg: 'transparent',
 					bgHover: 'primary-3',
+					bgActive: 'primary-4',
 					text: 'primary-11',
 					textHover: 'primary-12',
+					textActive: 'primary-12',
 					border: 'primary-7',
 					borderHover: 'primary-8',
+					borderActive: 'primary-9',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					focusRingColor: 'primary-8',
 					customCSS: null
 				},
 				onSurface: {
 					bg: 'transparent',
 					bgHover: 'neutral-1/15',
+					bgActive: 'neutral-1/25',
 					text: 'on-primary',
 					textHover: 'on-primary',
+					textActive: 'on-primary',
 					border: 'on-primary/40',
 					borderHover: 'on-primary/70',
+					borderActive: 'on-primary/90',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			},
@@ -1097,24 +1190,54 @@ export const defaultDesignTokensV2 = {
 				normal: {
 					bg: 'transparent',
 					bgHover: 'neutral-3',
+					bgActive: 'neutral-4',
 					text: 'primary-11',
 					textHover: 'primary-12',
+					textActive: 'primary-12',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					focusRingColor: 'primary-8',
 					customCSS: null
 				},
 				onSurface: {
 					bg: 'transparent',
 					bgHover: 'neutral-1/15',
+					bgActive: 'neutral-1/25',
 					text: 'on-primary',
 					textHover: 'on-primary',
+					textActive: 'on-primary',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			},
@@ -1122,12 +1245,27 @@ export const defaultDesignTokensV2 = {
 				normal: {
 					bg: 'transparent',
 					bgHover: 'transparent',
+					bgActive: 'transparent',
 					text: 'primary-11',
 					textHover: 'primary-12',
+					textActive: 'primary-12',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: '0rem',
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					textDecoration: 'none',
 					textDecorationHover: 'underline',
 					focusRingColor: 'primary-8',
@@ -1136,12 +1274,27 @@ export const defaultDesignTokensV2 = {
 				onSurface: {
 					bg: 'transparent',
 					bgHover: 'transparent',
+					bgActive: 'transparent',
 					text: 'on-primary',
 					textHover: 'on-primary',
+					textActive: 'on-primary',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: '0rem',
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					textDecoration: 'none',
 					textDecorationHover: 'underline',
 					customCSS: null
@@ -1151,24 +1304,54 @@ export const defaultDesignTokensV2 = {
 				normal: {
 					bg: 'error-9',
 					bgHover: 'error-10',
+					bgActive: 'error-11',
 					text: 'on-error',
 					textHover: 'on-error',
+					textActive: 'on-error',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					focusRingColor: 'error-8',
 					customCSS: null
 				},
 				onSurface: {
 					bg: 'error-9',
 					bgHover: 'error-10',
+					bgActive: 'error-11',
 					text: 'on-error',
 					textHover: 'on-error',
+					textActive: 'on-error',
 					border: 'none',
 					borderHover: 'none',
+					borderActive: 'none',
 					shadow: 'none',
 					shadowHover: 'none',
+					shadowActive: 'none',
+					hoverScale: 1,
+					hoverY: 0,
+					activeScale: 0.97,
+					activeY: 0,
+					paddingX: null,
+					paddingY: null,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			}