@webmate-studio/builder 0.2.144 → 0.2.146

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/design-tokens-v2-css.js +1 -3
  3. package/src/design-tokens-v2-migrate.js +3 -2
  4. package/src/design-tokens-v2.js +39 -21
  5. package/src/index.js +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webmate-studio/builder",
3
- "version": "0.2.144",
3
+ "version": "0.2.146",
4
4
  "type": "module",
5
5
  "description": "Webmate Studio Component Builder",
6
6
  "keywords": [
package/src/design-tokens-v2-css.js CHANGED
@@ -153,7 +153,6 @@ function generateColorVariables(t, lines) {
153
153
  if (surface.page) lines.push(` --color-surface-page: ${resolveColorRef(surface.page, t)};`);
154
154
  if (surface.elevated) lines.push(` --color-surface-elevated: ${resolveColorRef(surface.elevated, t)};`);
155
155
  if (surface.lifted) lines.push(` --color-surface-lifted: ${resolveColorRef(surface.lifted, t)};`);
156
- if (surface.overlay) lines.push(` --color-surface-overlay: ${resolveColorRef(surface.overlay, t)};`);
157
156
  lines.push(' /* text tokens */');
158
157
  if (surface.textDefault) lines.push(` --color-text-default: ${resolveColorRef(surface.textDefault, t)};`);
159
158
  if (surface.textSubtle) lines.push(` --color-text-subtle: ${resolveColorRef(surface.textSubtle, t)};`);
@@ -227,12 +226,11 @@ function generateColorUtilities(t) {
227
226
  }
228
227
  }
229
228
 
230
- // Surface Utilities: bg-page, bg-elevated, bg-lifted, bg-overlay
229
+ // Surface Utilities: bg-page, bg-elevated, bg-lifted
231
230
  const surfaceUtils = [
232
231
  { cls: 'bg-page', prop: 'background-color', varRef: '--color-surface-page' },
233
232
  { cls: 'bg-elevated', prop: 'background-color', varRef: '--color-surface-elevated' },
234
233
  { cls: 'bg-lifted', prop: 'background-color', varRef: '--color-surface-lifted' },
235
- { cls: 'bg-overlay', prop: 'background-color', varRef: '--color-surface-overlay' },
236
234
  ];
237
235
 
238
236
  for (const { cls, prop, varRef } of surfaceUtils) {
package/src/design-tokens-v2-migrate.js CHANGED
@@ -17,7 +17,8 @@ import {
17
17
  BUTTON_VARIANTS,
18
18
  BUTTON_SIZES,
19
19
  DEFAULT_SEMANTIC_MAPPINGS,
20
- DEFAULT_TEXT_ALIASES
20
+ DEFAULT_TEXT_ALIASES,
21
+ getDefaultMappingsForWorld
21
22
  } from './design-tokens-v2.js';
22
23
 
23
24
 
@@ -81,7 +82,7 @@ export function validateDesignTokensV2(tokens) {
81
82
  if (!v2.semanticMappings) v2.semanticMappings = {};
82
83
  for (const world of SEMANTIC_COLOR_WORLDS) {
83
84
  if (!v2.semanticMappings[world]) {
84
- v2.semanticMappings[world] = { ...DEFAULT_SEMANTIC_MAPPINGS };
85
+ v2.semanticMappings[world] = { ...getDefaultMappingsForWorld(world) };
85
86
  }
86
87
  }
87
88
 
package/src/design-tokens-v2.js CHANGED
@@ -561,19 +561,38 @@ export const SEMANTIC_COLOR_WORLDS = ['primary', 'secondary', 'accent', 'success
561
561
 
562
562
  /**
563
563
  * Semantische Utility-Defaults: Welche Stufe mappt auf welchen Alias.
564
+ * Brand-Farben: text = Base (Step 9) für Überschriften, Links, Badges.
565
+ * Status-Farben: text = dunklere Stufe (Step 11) für bessere Lesbarkeit.
564
566
  */
565
567
  export const DEFAULT_SEMANTIC_MAPPINGS = {
568
+ bg: '9',
569
+ bgHover: '10',
570
+ bgSubtle: '3',
571
+ bgSubtleHover: '4',
572
+ text: '9',
573
+ textHover: '10',
574
+ textOn: null, // Auto-berechnet
575
+ border: '7',
576
+ borderHover: '8'
577
+ };
578
+
579
+ export const DEFAULT_STATUS_SEMANTIC_MAPPINGS = {
566
580
  bg: '9',
567
581
  bgHover: '10',
568
582
  bgSubtle: '3',
569
583
  bgSubtleHover: '4',
570
584
  text: '11',
571
585
  textHover: '12',
572
- textOn: null, // Auto-berechnet
586
+ textOn: null,
573
587
  border: '7',
574
588
  borderHover: '8'
575
589
  };
576
590
 
591
+ /** Gibt die richtigen Defaults für eine Farbwelt zurück. */
592
+ export function getDefaultMappingsForWorld(world) {
593
+ return STATUS_COLOR_WORLDS.includes(world) ? DEFAULT_STATUS_SEMANTIC_MAPPINGS : DEFAULT_SEMANTIC_MAPPINGS;
594
+ }
595
+
577
596
 
578
597
  // ─── Surface & Text Tokens ─────────────────────────────────────────────────
579
598
 
@@ -586,11 +605,10 @@ export const DEFAULT_SURFACE_TOKENS = {
586
605
  page: 'neutral-1',
587
606
  elevated: 'neutral-2',
588
607
  lifted: 'neutral-3',
589
- overlay: 'neutral-1/80',
590
608
 
591
609
  textDefault: 'neutral-12',
592
- textSubtle: 'neutral-11',
593
- textMuted: 'neutral-8',
610
+ textSubtle: 'neutral-9',
611
+ textMuted: 'neutral-7',
594
612
 
595
613
  borderDefault: 'neutral-6',
596
614
  borderSubtle: 'neutral-4',
@@ -598,20 +616,20 @@ export const DEFAULT_SURFACE_TOKENS = {
598
616
  };
599
617
 
600
618
  /**
601
- * Labels und Beschreibungen für den Editor.
619
+ * Surface Token Items für den Editor.
620
+ * Referenzformat: "{world}-{step}", z.B. "neutral-12" oder "primary-3".
602
621
  */
603
- export const SURFACE_TOKEN_META = {
604
- page: { label: 'Page', desc: 'Seitenhintergrund (body)', group: 'surface' },
605
- elevated: { label: 'Elevated', desc: 'Karten, Modals, Panels', group: 'surface' },
606
- lifted: { label: 'Lifted', desc: 'Element auf erhöhter Fläche', group: 'surface' },
607
- overlay: { label: 'Overlay', desc: 'Backdrop / Overlay', group: 'surface' },
608
- textDefault: { label: 'Default', desc: 'Standard-Textfarbe', group: 'text' },
609
- textSubtle: { label: 'Subtle', desc: 'Sekundärer Text', group: 'text' },
610
- textMuted: { label: 'Muted', desc: 'Platzhalter, deaktiviert', group: 'text' },
611
- borderDefault: { label: 'Default', desc: 'Standard-Rahmen', group: 'border' },
612
- borderSubtle: { label: 'Subtle', desc: 'Dezenter Rahmen', group: 'border' },
613
- borderStrong: { label: 'Strong', desc: 'Starker Rahmen (Inputs)', group: 'border' }
614
- };
622
+ export const SURFACE_TOKEN_ITEMS = [
623
+ { key: 'page', css: 'bg-page', type: 'bg' },
624
+ { key: 'elevated', css: 'bg-elevated', type: 'bg' },
625
+ { key: 'lifted', css: 'bg-lifted', type: 'bg' },
626
+ { key: 'textDefault', css: 'text-default', type: 'text' },
627
+ { key: 'textSubtle', css: 'text-subtle', type: 'text' },
628
+ { key: 'textMuted', css: 'text-muted', type: 'text' },
629
+ { key: 'borderDefault', css: 'border-default', type: 'border' },
630
+ { key: 'borderSubtle', css: 'border-subtle', type: 'border' },
631
+ { key: 'borderStrong', css: 'border-strong', type: 'border' },
632
+ ];
615
633
 
616
634
 
617
635
  // ─── Typografie ─────────────────────────────────────────────────────────────
@@ -711,10 +729,10 @@ export const defaultDesignTokensV2 = {
711
729
  primary: { ...DEFAULT_SEMANTIC_MAPPINGS },
712
730
  secondary: { ...DEFAULT_SEMANTIC_MAPPINGS },
713
731
  accent: { ...DEFAULT_SEMANTIC_MAPPINGS },
714
- success: { ...DEFAULT_SEMANTIC_MAPPINGS },
715
- warning: { ...DEFAULT_SEMANTIC_MAPPINGS },
716
- error: { ...DEFAULT_SEMANTIC_MAPPINGS },
717
- info: { ...DEFAULT_SEMANTIC_MAPPINGS }
732
+ success: { ...DEFAULT_STATUS_SEMANTIC_MAPPINGS },
733
+ warning: { ...DEFAULT_STATUS_SEMANTIC_MAPPINGS },
734
+ error: { ...DEFAULT_STATUS_SEMANTIC_MAPPINGS },
735
+ info: { ...DEFAULT_STATUS_SEMANTIC_MAPPINGS }
718
736
  },
719
737
 
720
738
  surface: { ...DEFAULT_SURFACE_TOKENS },
package/src/index.js CHANGED
@@ -9,7 +9,7 @@ import { SafeHtml } from './safe-html.js';
9
9
  import { defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports } from './design-tokens.js';
10
10
 
11
11
  // V2 Design Tokens
12
- import { defaultDesignTokensV2, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_TEXT_ALIASES } from './design-tokens-v2.js';
12
+ import { defaultDesignTokensV2, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_STATUS_SEMANTIC_MAPPINGS, getDefaultMappingsForWorld, DEFAULT_TEXT_ALIASES } from './design-tokens-v2.js';
13
13
  import { generateTailwindV4ThemeV2, generateCSSFromTokensV2, generateFontImportsV2 } from './design-tokens-v2-css.js';
14
14
  import { migrateDesignTokensV1toV2, validateDesignTokensV2 } from './design-tokens-v2-migrate.js';
15
15
 
@@ -29,4 +29,4 @@ function getMotionRuntime() {
29
29
  export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports };
30
30
 
31
31
  // V2 exports
32
- export { defaultDesignTokensV2, generateTailwindV4ThemeV2, generateCSSFromTokensV2, generateFontImportsV2, migrateDesignTokensV1toV2, validateDesignTokensV2, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_TEXT_ALIASES };
32
+ export { defaultDesignTokensV2, generateTailwindV4ThemeV2, generateCSSFromTokensV2, generateFontImportsV2, migrateDesignTokensV1toV2, validateDesignTokensV2, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_STATUS_SEMANTIC_MAPPINGS, getDefaultMappingsForWorld, DEFAULT_TEXT_ALIASES };