@webmate-studio/builder 0.2.152 → 0.2.154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.152",
+  "version": "0.2.154",
   "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';
 
 
@@ -567,6 +568,32 @@ 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)};`);
@@ -574,8 +601,10 @@ function addButtonVariantVars(lines, prefix, variant, t) {
 	if (variant.textHover) lines.push(`  --${prefix}-text-hover: ${resolveColorRef(variant.textHover, 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};`);
+	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};`);
 	if (variant.focusRingColor) lines.push(`  --${prefix}-focus-ring: ${resolveColorRef(variant.focusRingColor, t)};`);
 }
 
@@ -680,7 +709,7 @@ 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) {
@@ -697,7 +726,7 @@ 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) {
@@ -708,9 +737,16 @@ function generateVariantNormalCSS(variant, v) {
 
 	// 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,6 +763,9 @@ 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};`;
 	}
@@ -741,6 +780,9 @@ 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};`;
 	}
@@ -750,9 +792,17 @@ function generateVariantOnSurfaceCSS(variant, v, t) {
 	// 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 ───────────────────────────────────────────────────
 
@@ -1000,6 +1038,8 @@ export const defaultDesignTokensV2 = {
 					textHover: 'neutral-12',
 					border: 'none',
 					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
 					customCSS: null
 				}
 			},
@@ -1023,6 +1063,8 @@ export const defaultDesignTokensV2 = {
 					textHover: 'on-primary',
 					border: 'none',
 					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
 					customCSS: null
 				}
 			},
@@ -1046,6 +1088,8 @@ export const defaultDesignTokensV2 = {
 					textHover: 'on-primary',
 					border: 'on-primary/40',
 					borderHover: 'on-primary/70',
+					shadow: 'none',
+					shadowHover: 'none',
 					customCSS: null
 				}
 			},
@@ -1069,6 +1113,8 @@ export const defaultDesignTokensV2 = {
 					textHover: 'on-primary',
 					border: 'none',
 					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
 					customCSS: null
 				}
 			},
@@ -1092,6 +1138,10 @@ export const defaultDesignTokensV2 = {
 					bgHover: 'transparent',
 					text: 'on-primary',
 					textHover: 'on-primary',
+					border: 'none',
+					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
 					textDecoration: 'none',
 					textDecorationHover: 'underline',
 					customCSS: null
@@ -1117,6 +1167,8 @@ export const defaultDesignTokensV2 = {
 					textHover: 'on-error',
 					border: 'none',
 					borderHover: 'none',
+					shadow: 'none',
+					shadowHover: 'none',
 					customCSS: null
 				}
 			}