@webmate-studio/builder 0.2.157 → 0.2.160

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.157",
+  "version": "0.2.160",
   "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';
 
 
@@ -52,6 +53,7 @@ export function generateTailwindV4ThemeV2(tokens) {
 	globalStyles += generateTextAliasClasses(t);
 	globalStyles += generateTextResponsiveVariants(t);
 	globalStyles += generateButtonClasses(t);
+	globalStyles += generateSpacingStyles(t);
 	globalStyles += generateResponsiveMediaQueries(responsiveLines);
 
 	return { themeVars, globalStyles };
@@ -600,9 +602,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 +654,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 ─────────────────────────────────────────────────────────
 
@@ -978,6 +1023,11 @@ function generateLayoutVariables(t, lines) {
 	if (t.borderWidth) lines.push(`  --border-width: ${t.borderWidth};`);
 	if (t.borderRadius) lines.push(`  --radius: ${t.borderRadius};`);
 
+	if (t.spacing?.component) {
+		lines.push(`  /* component spacing */`);
+		lines.push(`  --spacing-component: ${t.spacing.component.base || '3rem'};`);
+	}
+
 	if (t.breakpoints) {
 		lines.push('  /* breakpoints */');
 		for (const [key, value] of Object.entries(t.breakpoints)) {
@@ -987,6 +1037,42 @@ function generateLayoutVariables(t, lines) {
 }
 
 
+// ─── Component Spacing ──────────────────────────────────────────────────────
+
+function generateSpacingStyles(t) {
+	if (!t.spacing?.component) return '';
+
+	const breakpoints = {
+		sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px'
+	};
+
+	let css = '\n\n/* Component Spacing */';
+	css += '\n.component-wrapper {';
+	css += '\n  display: flex;';
+	css += '\n  flex-direction: column;';
+	css += '\n}';
+	css += '\n.component-wrapper > * + * {';
+	css += '\n  margin-top: var(--spacing-component);';
+	css += '\n}';
+
+	// Spacing-Modi
+	css += '\n[data-spacing="none"] { margin-top: 0 !important; }';
+	css += '\n[data-spacing="half"] { margin-top: calc(var(--spacing-component) / 2) !important; }';
+	css += '\n[data-spacing="double"] { margin-top: calc(var(--spacing-component) * 2) !important; }';
+
+	// Responsive Overrides
+	for (const [bp, minWidth] of Object.entries(breakpoints)) {
+		if (t.spacing.component[bp]) {
+			css += `\n@media (min-width: ${minWidth}) {`;
+			css += `\n  :root { --spacing-component: ${t.spacing.component[bp]}; }`;
+			css += '\n}';
+		}
+	}
+
+	return css;
+}
+
+
 // ─── Basis-Styles ───────────────────────────────────────────────────────────
 
 function generateBaseStyles(t) {

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 ──────────────────────────────────────────────────────────────
 
 /**