@webmate-studio/builder 0.2.157 → 0.2.159

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.157",
+  "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)};`);
@@ -652,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 ─────────────────────────────────────────────────────────
 

package/src/design-tokens-v2.js

@@ -1399,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 ──────────────────────────────────────────────────────────────
 
 /**