@webmate-studio/builder 0.2.134 → 0.2.135

package/package.json

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

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

@@ -13,6 +13,7 @@ import {
 	BUTTON_VARIANTS,
 	BUTTON_SIZES,
 	calculateOnColor,
+	DEFAULT_SURFACE_TOKENS,
 	defaultDesignTokensV2
 } from './design-tokens-v2.js';
 
@@ -142,6 +143,22 @@ function generateColorVariables(t, lines) {
 			if (mapping.ring) lines.push(`  --color-${world}-ring: var(--color-${world}-${mapping.ring});`);
 		}
 	}
+
+	// Surface, Text & Border Tokens
+	const surface = t.surface || DEFAULT_SURFACE_TOKENS;
+	lines.push('  /* surface tokens */');
+	if (surface.page) lines.push(`  --color-surface-page: ${resolveColorRef(surface.page, t)};`);
+	if (surface.elevated) lines.push(`  --color-surface-elevated: ${resolveColorRef(surface.elevated, t)};`);
+	if (surface.lifted) lines.push(`  --color-surface-lifted: ${resolveColorRef(surface.lifted, t)};`);
+	if (surface.overlay) lines.push(`  --color-surface-overlay: ${resolveColorRef(surface.overlay, t)};`);
+	lines.push('  /* text tokens */');
+	if (surface.textDefault) lines.push(`  --color-text-default: ${resolveColorRef(surface.textDefault, t)};`);
+	if (surface.textSubtle) lines.push(`  --color-text-subtle: ${resolveColorRef(surface.textSubtle, t)};`);
+	if (surface.textMuted) lines.push(`  --color-text-muted: ${resolveColorRef(surface.textMuted, t)};`);
+	lines.push('  /* border tokens */');
+	if (surface.borderDefault) lines.push(`  --color-border-default: ${resolveColorRef(surface.borderDefault, t)};`);
+	if (surface.borderSubtle) lines.push(`  --color-border-subtle: ${resolveColorRef(surface.borderSubtle, t)};`);
+	if (surface.borderStrong) lines.push(`  --color-border-strong: ${resolveColorRef(surface.borderStrong, t)};`);
 }
 
 
@@ -205,6 +222,42 @@ function generateColorUtilities(t) {
 		}
 	}
 
+	// Surface Utilities: bg-page, bg-elevated, bg-lifted, bg-overlay
+	const surfaceUtils = [
+		{ cls: 'bg-page', prop: 'background-color', varRef: '--color-surface-page' },
+		{ cls: 'bg-elevated', prop: 'background-color', varRef: '--color-surface-elevated' },
+		{ cls: 'bg-lifted', prop: 'background-color', varRef: '--color-surface-lifted' },
+		{ cls: 'bg-overlay', prop: 'background-color', varRef: '--color-surface-overlay' },
+	];
+
+	for (const { cls, prop, varRef } of surfaceUtils) {
+		css += `\n.${cls} { ${prop}: var(${varRef}); }`;
+	}
+
+	// Text Utilities: text-default, text-subtle, text-muted
+	const textUtils = [
+		{ cls: 'text-default', prop: 'color', varRef: '--color-text-default' },
+		{ cls: 'text-subtle', prop: 'color', varRef: '--color-text-subtle' },
+		{ cls: 'text-muted', prop: 'color', varRef: '--color-text-muted' },
+	];
+
+	for (const { cls, prop, varRef } of textUtils) {
+		css += `\n.${cls} { ${prop}: var(${varRef}); }`;
+		css += `\n.hover\\:${cls}:hover { ${prop}: var(${varRef}); }`;
+	}
+
+	// Border Utilities: border-default, border-subtle, border-strong
+	const borderUtils = [
+		{ cls: 'border-default', prop: 'border-color', varRef: '--color-border-default' },
+		{ cls: 'border-subtle', prop: 'border-color', varRef: '--color-border-subtle' },
+		{ cls: 'border-strong', prop: 'border-color', varRef: '--color-border-strong' },
+	];
+
+	for (const { cls, prop, varRef } of borderUtils) {
+		css += `\n.${cls} { ${prop}: var(${varRef}); }`;
+		css += `\n.hover\\:${cls}:hover { ${prop}: var(${varRef}); }`;
+	}
+
 	css += '\n}'; // Close @layer utilities
 	return css;
 }
@@ -686,8 +739,8 @@ function generateBaseStyles(t) {
 	return `\n/* Global baseline styles */
 body {
   font-family: ${fontFamily};
-  background-color: var(--color-neutral-1);
-  color: var(--color-neutral-12);
+  background-color: var(--color-surface-page);
+  color: var(--color-text-default);
 }`;
 }
 

package/src/design-tokens-v2.js

@@ -204,6 +204,45 @@ export const DEFAULT_SEMANTIC_MAPPINGS = {
 };
 
 
+// ─── Surface & Text Tokens ─────────────────────────────────────────────────
+
+/**
+ * Globale Surface-, Text- und Border-Aliase.
+ * Mappen semantische Konzepte (page, elevated, default, muted)
+ * auf Neutral-Stufen. Damit braucht der User kein Radix-Insiderwissen.
+ */
+export const DEFAULT_SURFACE_TOKENS = {
+	page: 'neutral-1',
+	elevated: 'neutral-2',
+	lifted: 'neutral-3',
+	overlay: 'neutral-1/80',
+
+	textDefault: 'neutral-12',
+	textSubtle: 'neutral-11',
+	textMuted: 'neutral-8',
+
+	borderDefault: 'neutral-6',
+	borderSubtle: 'neutral-4',
+	borderStrong: 'neutral-7'
+};
+
+/**
+ * Labels und Beschreibungen für den Editor.
+ */
+export const SURFACE_TOKEN_META = {
+	page:          { label: 'Page',           desc: 'Seitenhintergrund (body)', group: 'surface' },
+	elevated:      { label: 'Elevated',       desc: 'Karten, Modals, Panels', group: 'surface' },
+	lifted:        { label: 'Lifted',         desc: 'Element auf erhöhter Fläche', group: 'surface' },
+	overlay:       { label: 'Overlay',        desc: 'Backdrop / Overlay', group: 'surface' },
+	textDefault:   { label: 'Default',        desc: 'Standard-Textfarbe', group: 'text' },
+	textSubtle:    { label: 'Subtle',         desc: 'Sekundärer Text', group: 'text' },
+	textMuted:     { label: 'Muted',          desc: 'Platzhalter, deaktiviert', group: 'text' },
+	borderDefault: { label: 'Default',        desc: 'Standard-Rahmen', group: 'border' },
+	borderSubtle:  { label: 'Subtle',         desc: 'Dezenter Rahmen', group: 'border' },
+	borderStrong:  { label: 'Strong',         desc: 'Starker Rahmen (Inputs)', group: 'border' }
+};
+
+
 // ─── Typografie ─────────────────────────────────────────────────────────────
 
 /**
@@ -299,6 +338,8 @@ export const defaultDesignTokensV2 = {
 		info: { ...DEFAULT_SEMANTIC_MAPPINGS }
 	},
 
+	surface: { ...DEFAULT_SURFACE_TOKENS },
+
 	darkMode: {
 		enabled: false,
 		colors: null, // Wird bei Aktivierung auto-generiert