@webmate-studio/builder 0.2.152 → 0.2.156

package/package.json

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

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

@@ -14,7 +14,8 @@ import {
 	BUTTON_SIZES,
 	calculateOnColor,
 	DEFAULT_SURFACE_TOKENS,
-	defaultDesignTokensV2
+	defaultDesignTokensV2,
+	normalizeShadowValue
 } from './design-tokens-v2.js';
 
 
@@ -536,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};`);
@@ -567,16 +573,58 @@ function generateButtonVariables(t, lines) {
 	}
 }
 
+/**
+ * Prüft ob ein Shadow-Wert echte Daten enthält.
+ */
+function hasShadow(val) {
+	if (!val || val === 'none') return false;
+	if (Array.isArray(val)) return val.length > 0;
+	return true;
+}
+
+/**
+ * Konvertiert strukturierte Shadow-Layer zu einem CSS box-shadow String.
+ */
+function resolveShadowToCSS(shadowValue, t) {
+	const normalized = normalizeShadowValue(shadowValue);
+	if (normalized === 'none' || !Array.isArray(normalized) || normalized.length === 0) return 'none';
+
+	return normalized.map(layer => {
+		const insetStr = layer.inset ? 'inset ' : '';
+		const colorResolved = resolveColorRef(layer.color, t);
+		const colorCSS = (layer.opacity != null && layer.opacity < 100)
+			? `color-mix(in srgb, ${colorResolved} ${layer.opacity}%, transparent)`
+			: colorResolved;
+		return `${insetStr}${layer.offsetX || 0}px ${layer.offsetY || 0}px ${layer.blur || 0}px ${layer.spread || 0}px ${colorCSS}`;
+	}).join(', ');
+}
+
 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.shadow && variant.shadow !== 'none') lines.push(`  --${prefix}-shadow: ${variant.shadow};`);
-	if (variant.shadowHover && variant.shadowHover !== 'none') lines.push(`  --${prefix}-shadow-hover: ${variant.shadowHover};`);
+	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.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};`);
 }
 
 /**
@@ -621,6 +669,7 @@ function generateButtonClasses(t) {
   white-space: nowrap;
   transition: var(--btn-transition);
   border: none;
+  --btn-font-scale: 1;
 }`;
 
 	// Disabled
@@ -632,17 +681,21 @@ 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);
+  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); }`;
 	}
 
@@ -656,7 +709,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
@@ -671,7 +724,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);
@@ -680,12 +733,28 @@ function generateVariantNormalCSS(variant, v) {
 	if (v.normal.border && v.normal.border !== 'none') {
 		css += `\n  border: var(--${p}-border);`;
 	}
-	if (v.normal.shadow && v.normal.shadow !== 'none') {
+	if (hasShadow(v.normal.shadow)) {
 		css += `\n  box-shadow: var(--${p}-shadow);`;
 	}
 	if (v.normal.textDecoration) {
 		css += `\n  text-decoration: ${v.normal.textDecoration};`;
 	}
+	// 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}';
 
@@ -697,20 +766,63 @@ function generateVariantNormalCSS(variant, v) {
 	if (v.normal.borderHover && v.normal.borderHover !== 'none') {
 		css += `\n  border: var(--${p}-border-hover);`;
 	}
-	if (v.normal.shadowHover && v.normal.shadowHover !== 'none') {
+	if (hasShadow(v.normal.shadowHover)) {
 		css += `\n  box-shadow: var(--${p}-shadow-hover);`;
 	}
 	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}';
 
 	// Focus
 	if (v.normal.focusRingColor) {
+		const g = t.buttons?.global || {};
+		const ringWidth = g.focusRingWidth || '2px';
+		const ringOffset = g.focusRingOffset || '2px';
+		const ringOpacity = g.focusRingOpacity;
+		const ringColor = (ringOpacity != null && ringOpacity < 1)
+			? `color-mix(in srgb, var(--${p}-focus-ring) ${Math.round(ringOpacity * 100)}%, transparent)`
+			: `var(--${p}-focus-ring)`;
 		css += `\n.${p}:focus-visible {
-  outline: 2px solid var(--${p}-focus-ring);
-  outline-offset: 2px;
+  outline: ${ringWidth} solid ${ringColor};
+  outline-offset: ${ringOffset};
 }`;
 	}
 
@@ -727,9 +839,28 @@ function generateVariantOnSurfaceCSS(variant, v, t) {
 	if (v.onSurface.border && v.onSurface.border !== 'none') {
 		css += `\n  border: var(--${osp}-border);`;
 	}
+	if (hasShadow(v.onSurface.shadow)) {
+		css += `\n  box-shadow: var(--${osp}-shadow);`;
+	}
 	if (v.onSurface.textDecoration) {
 		css += `\n  text-decoration: ${v.onSurface.textDecoration};`;
 	}
+	// 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}';
 
@@ -741,18 +872,65 @@ function generateVariantOnSurfaceCSS(variant, v, t) {
 	if (v.onSurface.borderHover && v.onSurface.borderHover !== 'none') {
 		css += `\n  border: var(--${osp}-border-hover);`;
 	}
+	if (hasShadow(v.onSurface.shadowHover)) {
+		css += `\n  box-shadow: var(--${osp}-shadow-hover);`;
+	}
 	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}';
 
 	// Focus (on-surface)
 	const focusColor = t.buttons.global?.onSurfaceFocusRingColor;
 	if (focusColor) {
+		const g = t.buttons?.global || {};
+		const ringWidth = g.focusRingWidth || '2px';
+		const ringOffset = g.focusRingOffset || '2px';
+		const ringOpacity = g.focusRingOpacity;
+		const resolvedFocus = resolveColorRef(focusColor, t);
+		const ringColor = (ringOpacity != null && ringOpacity < 1)
+			? `color-mix(in srgb, ${resolvedFocus} ${Math.round(ringOpacity * 100)}%, transparent)`
+			: resolvedFocus;
 		css += `\n.btn-on-surface.${p}:focus-visible {
-  outline: 2px solid ${resolveColorRef(focusColor, t)};
-  outline-offset: 2px;
+  outline: ${ringWidth} solid ${ringColor};
+  outline-offset: ${ringOffset};
 }`;
 	}
 

package/src/design-tokens-v2.js

@@ -679,6 +679,44 @@ export const BUTTON_VARIANTS = ['filled', 'tonal', 'outline', 'ghost', 'text', '
  */
 export const BUTTON_SIZES = ['sm', 'md', 'lg'];
 
+/**
+ * Shadow-Presets als strukturierte Layer-Arrays (Tailwind-orientiert).
+ */
+export const SHADOW_PRESETS = {
+	none: 'none',
+	sm: [
+		{ offsetX: 0, offsetY: 1, blur: 2, spread: 0, color: 'neutral-12', opacity: 5, inset: false }
+	],
+	md: [
+		{ offsetX: 0, offsetY: 4, blur: 6, spread: -1, color: 'neutral-12', opacity: 10, inset: false },
+		{ offsetX: 0, offsetY: 2, blur: 4, spread: -2, color: 'neutral-12', opacity: 10, inset: false }
+	],
+	lg: [
+		{ offsetX: 0, offsetY: 10, blur: 15, spread: -3, color: 'neutral-12', opacity: 20, inset: false },
+		{ offsetX: 0, offsetY: 4, blur: 6, spread: -4, color: 'neutral-12', opacity: 10, inset: false }
+	]
+};
+
+/**
+ * Erzeugt eine Standard-Schattenebene.
+ */
+export function createDefaultShadowLayer() {
+	return { offsetX: 0, offsetY: 4, blur: 6, spread: 0, color: 'neutral-12', opacity: 10, inset: false };
+}
+
+/**
+ * Normalisiert einen Shadow-Wert zu 'none' oder einem Array von Layer-Objekten.
+ * Akzeptiert: 'none', 'sm', 'md', 'lg', Array, null/undefined.
+ */
+export function normalizeShadowValue(val) {
+	if (!val || val === 'none') return 'none';
+	if (Array.isArray(val)) return val;
+	if (typeof val === 'string' && SHADOW_PRESETS[val] && SHADOW_PRESETS[val] !== 'none') {
+		return structuredClone(SHADOW_PRESETS[val]);
+	}
+	return 'none';
+}
+
 
 // ─── Default Token-Objekt ───────────────────────────────────────────────────
 
@@ -946,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',
@@ -958,6 +997,7 @@ export const defaultDesignTokensV2 = {
 				paddingX: '1.25rem',
 				paddingY: '0.625rem',
 				fontSize: '0.875rem',
+				fontFamily: null,
 				fontWeight: 500,
 				lineHeight: '1.4',
 				letterSpacing: '0em',
@@ -970,6 +1010,7 @@ export const defaultDesignTokensV2 = {
 				paddingX: '1.75rem',
 				paddingY: '0.875rem',
 				fontSize: '1rem',
+				fontFamily: null,
 				fontWeight: 600,
 				lineHeight: '1.4',
 				letterSpacing: '0em',
@@ -984,22 +1025,50 @@ 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,
+					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,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			},
@@ -1007,22 +1076,50 @@ 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,
+					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,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			},
@@ -1030,22 +1127,50 @@ 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,
+					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,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			},
@@ -1053,22 +1178,50 @@ 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,
+					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,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			},
@@ -1076,12 +1229,25 @@ 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,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					textDecoration: 'none',
 					textDecorationHover: 'underline',
 					focusRingColor: 'primary-8',
@@ -1090,8 +1256,25 @@ 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,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					textDecoration: 'none',
 					textDecorationHover: 'underline',
 					customCSS: null
@@ -1101,22 +1284,50 @@ 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,
+					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,
+					fontFamily: null,
+					fontSizeScale: 1,
+					fontWeight: null,
+					letterSpacing: 'normal',
+					textTransform: 'none',
 					customCSS: null
 				}
 			}