@webmate-studio/builder 0.2.132 → 0.2.133

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 (3) hide show
  1. package/package.json +2 -2
  2. package/src/design-tokens-v2-migrate.js +20 -17
  3. package/src/design-tokens-v2.js +37 -38
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webmate-studio/builder",
3
- "version": "0.2.132",
3
+ "version": "0.2.133",
4
4
  "type": "module",
5
5
  "description": "Webmate Studio Component Builder",
6
6
  "keywords": [
@@ -40,7 +40,7 @@
40
40
  "access": "public"
41
41
  },
42
42
  "dependencies": {
43
- "@webmate-studio/builder": "^0.2.62",
43
+ "@webmate-studio/builder": "^0.2.132",
44
44
  "@webmate-studio/core": "^0.2.7",
45
45
  "@webmate-studio/parser": "^0.2.8",
46
46
  "dom-serializer": "^2.0.0",
package/src/design-tokens-v2-migrate.js CHANGED
@@ -170,28 +170,31 @@ function migrateColors(v1, v2) {
170
170
  };
171
171
  }
172
172
 
173
- // Neutral: V1 hat keine Neutral-Skala → Defaults behalten
174
- // Aber wir können die V1 Hintergrund-/Text-Werte als Hinweis nehmen
173
+ // Neutral: V1 hat keine explizite Neutral-Basisfarbe.
174
+ // Wir leiten sie aus den V1-Hintergrund-/Text-Farben ab.
175
175
  if (v1.colors.bgBody && v1.colors.textBase) {
176
- // Prüfe ob das ein helles oder dunkles Theme ist
177
176
  const bgIsLight = isLightColor(v1.colors.bgBody);
178
177
  if (!bgIsLight) {
179
- // Dunkles Theme → invertierte Neutral-Skala
180
- v2.colors.neutral.scale = {
181
- 1: v1.colors.bgBody || '#0F172A',
182
- 2: v1.colors.bgBase || '#1E293B',
183
- 3: v1.colors.bgElevated || '#334155',
184
- 4: '#475569',
185
- 5: '#64748B',
186
- 6: '#78859B',
187
- 7: '#94A3B8',
188
- 8: v1.colors.textMuted || '#A8B5C7',
189
- 9: '#CBD5E1',
190
- 10: '#D5DDE7',
191
- 11: v1.colors.textSubtle || '#E2E8F0',
192
- 12: v1.colors.textBase || '#F8FAFC'
178
+ // Dunkles Theme → invertierte Neutral-Skala (manuell, da generateColorScale für Light optimiert ist)
179
+ v2.colors.neutral = {
180
+ base: '#94A3B8', // Slate-400 als Basis für dunkle Themes
181
+ scale: {
182
+ 1: v1.colors.bgBody || '#0F172A',
183
+ 2: v1.colors.bgBase || '#1E293B',
184
+ 3: v1.colors.bgElevated || '#334155',
185
+ 4: '#475569',
186
+ 5: '#64748B',
187
+ 6: '#78859B',
188
+ 7: '#94A3B8',
189
+ 8: v1.colors.textMuted || '#A8B5C7',
190
+ 9: '#CBD5E1',
191
+ 10: '#D5DDE7',
192
+ 11: v1.colors.textSubtle || '#E2E8F0',
193
+ 12: v1.colors.textBase || '#F8FAFC'
194
+ }
193
195
  };
194
196
  }
197
+ // Helles Theme → Default-Neutral (auto-generiert aus #6B7280) bleibt
195
198
  }
196
199
  }
197
200
 
package/src/design-tokens-v2.js CHANGED
@@ -13,6 +13,9 @@
13
13
  /**
14
14
  * Generiert eine 12-Stufen-Farbskala aus einer Basisfarbe.
15
15
  * Stufe 9 = Basisfarbe. Stufen 1-8 heller, 10-12 dunkler.
16
+ *
17
+ * Für Neutral-Töne (niedrige Sättigung) wird die Sättigung automatisch
18
+ * stark gedämpft, damit echte Grautöne entstehen statt verfärbter Pastelltöne.
16
19
  */
17
20
  export function generateColorScale(baseHex) {
18
21
  const rgb = hexToRgb(baseHex);
@@ -20,19 +23,24 @@ export function generateColorScale(baseHex) {
20
23
 
21
24
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
22
25
 
26
+ // Neutral-Erkennung: Basis mit niedriger Sättigung (<15%)
27
+ // bekommt deutlich reduzierte Sättigung über die gesamte Skala
28
+ const isNeutral = hsl.s < 15;
29
+ const sFactor = isNeutral ? 0.3 : 1; // Sättigung auf 30% für Neutraltöne
30
+
23
31
  return {
24
- 1: hslToHex(hsl.h, Math.max(hsl.s * 0.15, 2), 97),
25
- 2: hslToHex(hsl.h, Math.max(hsl.s * 0.2, 3), 95),
26
- 3: hslToHex(hsl.h, Math.max(hsl.s * 0.3, 5), 91),
27
- 4: hslToHex(hsl.h, Math.max(hsl.s * 0.4, 7), 86),
28
- 5: hslToHex(hsl.h, Math.max(hsl.s * 0.5, 9), 80),
29
- 6: hslToHex(hsl.h, hsl.s * 0.65, 70),
30
- 7: hslToHex(hsl.h, hsl.s * 0.8, 58),
31
- 8: hslToHex(hsl.h, hsl.s * 0.9, 48),
32
+ 1: hslToHex(hsl.h, Math.max(hsl.s * 0.15 * sFactor, isNeutral ? 0 : 2), 97),
33
+ 2: hslToHex(hsl.h, Math.max(hsl.s * 0.2 * sFactor, isNeutral ? 0.5 : 3), 95),
34
+ 3: hslToHex(hsl.h, Math.max(hsl.s * 0.3 * sFactor, isNeutral ? 1 : 5), 91),
35
+ 4: hslToHex(hsl.h, Math.max(hsl.s * 0.4 * sFactor, isNeutral ? 1.5 : 7), 86),
36
+ 5: hslToHex(hsl.h, Math.max(hsl.s * 0.5 * sFactor, isNeutral ? 2 : 9), 80),
37
+ 6: hslToHex(hsl.h, hsl.s * 0.65 * sFactor, 70),
38
+ 7: hslToHex(hsl.h, hsl.s * 0.8 * sFactor, 58),
39
+ 8: hslToHex(hsl.h, hsl.s * 0.9 * sFactor, 48),
32
40
  9: baseHex,
33
- 10: hslToHex(hsl.h, Math.min(hsl.s * 1.05, 100), Math.max(hsl.l - 8, 10)),
34
- 11: hslToHex(hsl.h, Math.min(hsl.s * 0.9, 100), Math.max(hsl.l - 20, 15)),
35
- 12: hslToHex(hsl.h, Math.min(hsl.s * 0.7, 80), Math.max(hsl.l - 35, 8)),
41
+ 10: hslToHex(hsl.h, Math.min(hsl.s * 1.05 * sFactor, 100), Math.max(hsl.l - 8, 10)),
42
+ 11: hslToHex(hsl.h, Math.min(hsl.s * 0.9 * sFactor, 100), Math.max(hsl.l - 20, 15)),
43
+ 12: hslToHex(hsl.h, Math.min(hsl.s * 0.7 * sFactor, 80), Math.max(hsl.l - 35, 8)),
36
44
  };
37
45
  }
38
46
 
@@ -46,22 +54,26 @@ export function generateDarkColorScale(baseHex) {
46
54
 
47
55
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
48
56
 
57
+ // Neutral-Erkennung: gleiche Logik wie generateColorScale
58
+ const isNeutral = hsl.s < 15;
59
+ const sFactor = isNeutral ? 0.3 : 1;
60
+
49
61
  // Dark Mode: Basis etwas heller für bessere Sichtbarkeit
50
- const darkBase = hslToHex(hsl.h, Math.min(hsl.s * 1.1, 100), Math.min(hsl.l + 10, 65));
62
+ const darkBase = hslToHex(hsl.h, Math.min(hsl.s * 1.1 * sFactor, 100), Math.min(hsl.l + 10, 65));
51
63
 
52
64
  return {
53
- 1: hslToHex(hsl.h, Math.max(hsl.s * 0.3, 5), 8),
54
- 2: hslToHex(hsl.h, Math.max(hsl.s * 0.35, 6), 12),
55
- 3: hslToHex(hsl.h, Math.max(hsl.s * 0.45, 8), 18),
56
- 4: hslToHex(hsl.h, Math.max(hsl.s * 0.55, 10), 24),
57
- 5: hslToHex(hsl.h, Math.max(hsl.s * 0.6, 12), 30),
58
- 6: hslToHex(hsl.h, hsl.s * 0.65, 38),
59
- 7: hslToHex(hsl.h, hsl.s * 0.75, 48),
60
- 8: hslToHex(hsl.h, hsl.s * 0.85, 58),
65
+ 1: hslToHex(hsl.h, Math.max(hsl.s * 0.3 * sFactor, isNeutral ? 0 : 5), 8),
66
+ 2: hslToHex(hsl.h, Math.max(hsl.s * 0.35 * sFactor, isNeutral ? 0.5 : 6), 12),
67
+ 3: hslToHex(hsl.h, Math.max(hsl.s * 0.45 * sFactor, isNeutral ? 1 : 8), 18),
68
+ 4: hslToHex(hsl.h, Math.max(hsl.s * 0.55 * sFactor, isNeutral ? 1.5 : 10), 24),
69
+ 5: hslToHex(hsl.h, Math.max(hsl.s * 0.6 * sFactor, isNeutral ? 2 : 12), 30),
70
+ 6: hslToHex(hsl.h, hsl.s * 0.65 * sFactor, 38),
71
+ 7: hslToHex(hsl.h, hsl.s * 0.75 * sFactor, 48),
72
+ 8: hslToHex(hsl.h, hsl.s * 0.85 * sFactor, 58),
61
73
  9: darkBase,
62
- 10: hslToHex(hsl.h, Math.min(hsl.s * 1.0, 100), Math.min(hsl.l + 20, 75)),
63
- 11: hslToHex(hsl.h, Math.min(hsl.s * 0.7, 80), Math.min(hsl.l + 35, 85)),
64
- 12: hslToHex(hsl.h, Math.min(hsl.s * 0.4, 50), Math.min(hsl.l + 50, 95)),
74
+ 10: hslToHex(hsl.h, Math.min(hsl.s * 1.0 * sFactor, 100), Math.min(hsl.l + 20, 75)),
75
+ 11: hslToHex(hsl.h, Math.min(hsl.s * 0.7 * sFactor, 80), Math.min(hsl.l + 35, 85)),
76
+ 12: hslToHex(hsl.h, Math.min(hsl.s * 0.4 * sFactor, 50), Math.min(hsl.l + 50, 95)),
65
77
  };
66
78
  }
67
79
 
@@ -272,21 +284,8 @@ export const defaultDesignTokensV2 = {
272
284
  scale: generateColorScale('#2563EB')
273
285
  },
274
286
  neutral: {
275
- base: null, // Neutral hat keine Basisfarbe
276
- scale: {
277
- 1: '#FFFFFF',
278
- 2: '#F9FAFB',
279
- 3: '#F3F4F6',
280
- 4: '#E5E7EB',
281
- 5: '#D1D5DB',
282
- 6: '#C0C5CD',
283
- 7: '#9CA3AF',
284
- 8: '#6B7280',
285
- 9: '#4B5563',
286
- 10: '#374151',
287
- 11: '#1F2937',
288
- 12: '#111827'
289
- }
287
+ base: '#6B7280', // Kühles Grau — gibt dem Design System seinen Charakter
288
+ scale: generateColorScale('#6B7280')
290
289
  }
291
290
  },
292
291