@webmate-studio/builder 0.2.156 → 0.2.159

package/package.json

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

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

@@ -15,7 +15,8 @@ import {
 	calculateOnColor,
 	DEFAULT_SURFACE_TOKENS,
 	defaultDesignTokensV2,
-	normalizeShadowValue
+	normalizeShadowValue,
+	isGradientValue
 } from './design-tokens-v2.js';
 
 
@@ -600,9 +601,9 @@ 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.bg) lines.push(`  --${prefix}-bg: ${resolveBackgroundValue(variant.bg, t)};`);
+	if (variant.bgHover) lines.push(`  --${prefix}-bg-hover: ${resolveBackgroundValue(variant.bgHover, t)};`);
+	if (variant.bgActive) lines.push(`  --${prefix}-bg-active: ${resolveBackgroundValue(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)};`);
@@ -616,6 +617,8 @@ function addButtonVariantVars(lines, prefix, variant, t) {
 	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';
@@ -650,6 +653,49 @@ function resolveColorRef(ref, t) {
 	return `var(--color-${ref})`;
 }
 
+/**
+ * Löst einen Hintergrundwert auf — entweder Farbreferenz (String) oder Gradient (Object).
+ * String → delegiert an resolveColorRef()
+ * Object → buildGradientCSS()
+ */
+function resolveBackgroundValue(val, t) {
+	if (!val) return 'none';
+	if (isGradientValue(val)) return buildGradientCSS(val, t);
+	return resolveColorRef(val, t);
+}
+
+/**
+ * Baut einen CSS-Gradient-String aus einem Gradient-Objekt.
+ * Unterstützt linear-gradient, radial-gradient und conic-gradient.
+ */
+function buildGradientCSS(gradient, t) {
+	const stops = (gradient.stops || []).map(stop => {
+		const color = resolveColorRef(stop.color, t);
+		const colorCSS = (stop.opacity != null && stop.opacity < 100)
+			? `color-mix(in srgb, ${color} ${stop.opacity}%, transparent)`
+			: color;
+		return `${colorCSS} ${stop.position}%`;
+	}).join(', ');
+
+	switch (gradient.type) {
+		case 'radial': {
+			const shape = gradient.shape || 'circle';
+			const size = gradient.size || 'farthest-corner';
+			const pos = gradient.position || 'center';
+			return `radial-gradient(${shape} ${size} at ${pos}, ${stops})`;
+		}
+		case 'conic': {
+			const fromAngle = gradient.fromAngle || 0;
+			const pos = gradient.position || 'center';
+			return `conic-gradient(from ${fromAngle}deg at ${pos}, ${stops})`;
+		}
+		default: { // linear
+			const angle = gradient.angle ?? 135;
+			return `linear-gradient(${angle}deg, ${stops})`;
+		}
+	}
+}
+
 
 // ─── Button-Klassen ─────────────────────────────────────────────────────────
 
@@ -684,7 +730,9 @@ function generateButtonClasses(t) {
 		const s = t.buttons.sizes?.[size];
 		if (!s) continue;
 		css += `\n.btn-${size} {
-  padding: var(--btn-${size}-padding-y) var(--btn-${size}-padding-x);
+  --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);
@@ -739,6 +787,13 @@ function generateVariantNormalCSS(variant, v, t) {
 	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);`;
@@ -845,6 +900,13 @@ 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);`;

package/src/design-tokens-v2.js

@@ -1039,6 +1039,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1064,6 +1066,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1090,6 +1094,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1115,6 +1121,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1141,6 +1149,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1166,6 +1176,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1192,6 +1204,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1217,6 +1231,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1243,6 +1259,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: '0rem',
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1270,6 +1288,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: '0rem',
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1298,6 +1318,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1323,6 +1345,8 @@ export const defaultDesignTokensV2 = {
 					hoverY: 0,
 					activeScale: 0.97,
 					activeY: 0,
+					paddingX: null,
+					paddingY: null,
 					fontFamily: null,
 					fontSizeScale: 1,
 					fontWeight: null,
@@ -1375,6 +1399,56 @@ export const defaultDesignTokensV2 = {
 };
 
 
+// ─── Gradient-Hilfsfunktionen ───────────────────────────────────────────────
+
+/**
+ * Position-Keywords für radial/conic Gradients.
+ */
+export const GRADIENT_POSITIONS = [
+	'center', 'top', 'right', 'bottom', 'left',
+	'top left', 'top right', 'bottom left', 'bottom right'
+];
+
+/**
+ * Size-Keywords für radial Gradients.
+ */
+export const RADIAL_SIZES = [
+	'farthest-corner', 'closest-side', 'farthest-side', 'closest-corner'
+];
+
+/**
+ * Prüft ob ein Wert ein Gradient-Objekt ist (statt einer Farbreferenz-String).
+ */
+export function isGradientValue(val) {
+	return val != null && typeof val === 'object' && val.type && Array.isArray(val.stops);
+}
+
+/**
+ * Erzeugt einen Standard-Gradient-Stop.
+ */
+export function createDefaultGradientStop(position = 0) {
+	return { color: 'primary-9', position, opacity: 100 };
+}
+
+/**
+ * Erzeugt ein Standard-Gradient-Objekt mit 2 Stops.
+ */
+export function createDefaultGradient() {
+	return {
+		type: 'linear',
+		angle: 135,
+		shape: 'circle',
+		position: 'center',
+		size: 'farthest-corner',
+		fromAngle: 0,
+		stops: [
+			{ color: 'primary-9', position: 0, opacity: 100 },
+			{ color: 'primary-6', position: 100, opacity: 100 }
+		]
+	};
+}
+
+
 // ─── Erkennung ──────────────────────────────────────────────────────────────
 
 /**