@webmate-studio/builder 0.2.143 → 0.2.145

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 +7 -4
  3. package/src/design-tokens-v2-migrate.js +3 -2
  4. package/src/design-tokens-v2.js +39 -20
  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.143",
3
+ "version": "0.2.145",
4
4
  "type": "module",
5
5
  "description": "Webmate Studio Component Builder",
6
6
  "keywords": [
package/src/design-tokens-v2-css.js CHANGED
@@ -139,8 +139,11 @@ function generateColorVariables(t, lines) {
139
139
  if (mapping.bgSubtle) lines.push(` --color-${world}-bg-subtle: var(--color-${world}-${mapping.bgSubtle});`);
140
140
  if (mapping.bgSubtleHover) lines.push(` --color-${world}-bg-subtle-hover: var(--color-${world}-${mapping.bgSubtleHover});`);
141
141
  if (mapping.text) lines.push(` --color-${world}-text: var(--color-${world}-${mapping.text});`);
142
+ if (mapping.textHover) lines.push(` --color-${world}-text-hover: var(--color-${world}-${mapping.textHover});`);
142
143
  if (mapping.border) lines.push(` --color-${world}-border: var(--color-${world}-${mapping.border});`);
143
- if (mapping.ring) lines.push(` --color-${world}-ring: var(--color-${world}-${mapping.ring});`);
144
+ if (mapping.borderHover) lines.push(` --color-${world}-border-hover: var(--color-${world}-${mapping.borderHover});`);
145
+ // ring zeigt auf border (kein eigenes Mapping nötig)
146
+ lines.push(` --color-${world}-ring: var(--color-${world}-border);`);
144
147
  }
145
148
  }
146
149
 
@@ -150,7 +153,6 @@ function generateColorVariables(t, lines) {
150
153
  if (surface.page) lines.push(` --color-surface-page: ${resolveColorRef(surface.page, t)};`);
151
154
  if (surface.elevated) lines.push(` --color-surface-elevated: ${resolveColorRef(surface.elevated, t)};`);
152
155
  if (surface.lifted) lines.push(` --color-surface-lifted: ${resolveColorRef(surface.lifted, t)};`);
153
- if (surface.overlay) lines.push(` --color-surface-overlay: ${resolveColorRef(surface.overlay, t)};`);
154
156
  lines.push(' /* text tokens */');
155
157
  if (surface.textDefault) lines.push(` --color-text-default: ${resolveColorRef(surface.textDefault, t)};`);
156
158
  if (surface.textSubtle) lines.push(` --color-text-subtle: ${resolveColorRef(surface.textSubtle, t)};`);
@@ -200,8 +202,10 @@ function generateColorUtilities(t) {
200
202
  { cls: `bg-${world}-subtle`, prop: 'background-color', varRef: `--color-${world}-bg-subtle` },
201
203
  { cls: `bg-${world}-subtle-hover`, prop: 'background-color', varRef: `--color-${world}-bg-subtle-hover` },
202
204
  { cls: `text-${world}`, prop: 'color', varRef: `--color-${world}-text` },
205
+ { cls: `text-${world}-hover`, prop: 'color', varRef: `--color-${world}-text-hover` },
203
206
  { cls: `text-on-${world}`, prop: 'color', varRef: `--color-on-${world}` },
204
207
  { cls: `border-${world}`, prop: 'border-color', varRef: `--color-${world}-border` },
208
+ { cls: `border-${world}-hover`, prop: 'border-color', varRef: `--color-${world}-border-hover` },
205
209
  { cls: `ring-${world}`, prop: '--tw-ring-color', varRef: `--color-${world}-ring` },
206
210
  { cls: `border-on-${world}`, prop: 'border-color', varRef: `--color-on-${world}` },
207
211
  ];
@@ -222,12 +226,11 @@ function generateColorUtilities(t) {
222
226
  }
223
227
  }
224
228
 
225
- // Surface Utilities: bg-page, bg-elevated, bg-lifted, bg-overlay
229
+ // Surface Utilities: bg-page, bg-elevated, bg-lifted
226
230
  const surfaceUtils = [
227
231
  { cls: 'bg-page', prop: 'background-color', varRef: '--color-surface-page' },
228
232
  { cls: 'bg-elevated', prop: 'background-color', varRef: '--color-surface-elevated' },
229
233
  { cls: 'bg-lifted', prop: 'background-color', varRef: '--color-surface-lifted' },
230
- { cls: 'bg-overlay', prop: 'background-color', varRef: '--color-surface-overlay' },
231
234
  ];
232
235
 
233
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,18 +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 = {
566
568
  bg: '9',
567
569
  bgHover: '10',
568
570
  bgSubtle: '3',
569
571
  bgSubtleHover: '4',
570
- text: '11',
572
+ text: '9',
573
+ textHover: '10',
571
574
  textOn: null, // Auto-berechnet
572
575
  border: '7',
573
- ring: '8'
576
+ borderHover: '8'
577
+ };
578
+
579
+ export const DEFAULT_STATUS_SEMANTIC_MAPPINGS = {
580
+ bg: '9',
581
+ bgHover: '10',
582
+ bgSubtle: '3',
583
+ bgSubtleHover: '4',
584
+ text: '11',
585
+ textHover: '12',
586
+ textOn: null,
587
+ border: '7',
588
+ borderHover: '8'
574
589
  };
575
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
+
576
596
 
577
597
  // ─── Surface & Text Tokens ─────────────────────────────────────────────────
578
598
 
@@ -585,7 +605,6 @@ export const DEFAULT_SURFACE_TOKENS = {
585
605
  page: 'neutral-1',
586
606
  elevated: 'neutral-2',
587
607
  lifted: 'neutral-3',
588
- overlay: 'neutral-1/80',
589
608
 
590
609
  textDefault: 'neutral-12',
591
610
  textSubtle: 'neutral-11',
@@ -597,20 +616,20 @@ export const DEFAULT_SURFACE_TOKENS = {
597
616
  };
598
617
 
599
618
  /**
600
- * Labels und Beschreibungen für den Editor.
619
+ * Surface Token Items für den Editor.
620
+ * Jedes Item mappt auf eine Neutral-Stufe.
601
621
  */
602
- export const SURFACE_TOKEN_META = {
603
- page: { label: 'Page', desc: 'Seitenhintergrund (body)', group: 'surface' },
604
- elevated: { label: 'Elevated', desc: 'Karten, Modals, Panels', group: 'surface' },
605
- lifted: { label: 'Lifted', desc: 'Element auf erhöhter Fläche', group: 'surface' },
606
- overlay: { label: 'Overlay', desc: 'Backdrop / Overlay', group: 'surface' },
607
- textDefault: { label: 'Default', desc: 'Standard-Textfarbe', group: 'text' },
608
- textSubtle: { label: 'Subtle', desc: 'Sekundärer Text', group: 'text' },
609
- textMuted: { label: 'Muted', desc: 'Platzhalter, deaktiviert', group: 'text' },
610
- borderDefault: { label: 'Default', desc: 'Standard-Rahmen', group: 'border' },
611
- borderSubtle: { label: 'Subtle', desc: 'Dezenter Rahmen', group: 'border' },
612
- borderStrong: { label: 'Strong', desc: 'Starker Rahmen (Inputs)', group: 'border' }
613
- };
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
+ ];
614
633
 
615
634
 
616
635
  // ─── Typografie ─────────────────────────────────────────────────────────────
@@ -710,10 +729,10 @@ export const defaultDesignTokensV2 = {
710
729
  primary: { ...DEFAULT_SEMANTIC_MAPPINGS },
711
730
  secondary: { ...DEFAULT_SEMANTIC_MAPPINGS },
712
731
  accent: { ...DEFAULT_SEMANTIC_MAPPINGS },
713
- success: { ...DEFAULT_SEMANTIC_MAPPINGS },
714
- warning: { ...DEFAULT_SEMANTIC_MAPPINGS },
715
- error: { ...DEFAULT_SEMANTIC_MAPPINGS },
716
- 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 }
717
736
  },
718
737
 
719
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 };