@webmate-studio/builder 0.2.135 → 0.2.136

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/design-tokens-v2.js +37 -31
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webmate-studio/builder",
3
- "version": "0.2.135",
3
+ "version": "0.2.136",
4
4
  "type": "module",
5
5
  "description": "Webmate Studio Component Builder",
6
6
  "keywords": [
package/src/design-tokens-v2.js CHANGED
@@ -22,25 +22,29 @@ export function generateColorScale(baseHex) {
22
22
  if (!rgb) return null;
23
23
 
24
24
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
25
+ const h = hsl.h;
26
+ const s = hsl.s;
27
+ const l = hsl.l;
25
28
 
26
29
  // 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
+ const isNeutral = s < 15;
31
+ const sFactor = isNeutral ? 0.15 : 1;
32
+ // Helle Stufen: leichter Hue-Shift für natürlichere Farbverläufe
33
+ const hShift = isNeutral ? 0 : -5;
30
34
 
31
35
  return {
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),
40
- 9: baseHex,
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
+ 1: isNeutral ? '#ffffff' : hslToHex(h + hShift, Math.min(s * 0.85, 70), 99),
37
+ 2: hslToHex(h + hShift, Math.min(s * 0.65 * sFactor, isNeutral ? 4 : 55), 97),
38
+ 3: hslToHex(h + hShift, Math.min(s * 0.72 * sFactor, isNeutral ? 5 : 60), 94),
39
+ 4: hslToHex(h + hShift, Math.min(s * 0.7 * sFactor, isNeutral ? 5 : 58), 89),
40
+ 5: hslToHex(h + hShift, Math.min(s * 0.68 * sFactor, isNeutral ? 5 : 55), 84),
41
+ 6: hslToHex(h - 2, Math.min(s * 0.63 * sFactor, isNeutral ? 5 : 52), 77),
42
+ 7: hslToHex(h - 1, Math.min(s * 0.6 * sFactor, isNeutral ? 5 : 50), 68),
43
+ 8: hslToHex(h, Math.min(s * 0.62 * sFactor, isNeutral ? 6 : 50), 53),
44
+ 9: baseHex,
45
+ 10: hslToHex(h + 2, Math.min(s * 1.3 * sFactor, isNeutral ? 8 : 100), Math.max(l - 7, 15)),
46
+ 11: hslToHex(h + 1, Math.min(s * 1.3 * sFactor, isNeutral ? 6 : 100), Math.max(l - 11, 20)),
47
+ 12: hslToHex(h - 5, Math.min(s * 0.55 * sFactor, isNeutral ? 4 : 45), isNeutral ? 13 : Math.max(l * 0.5, 15)),
44
48
  };
45
49
  }
46
50
 
@@ -53,27 +57,29 @@ export function generateDarkColorScale(baseHex) {
53
57
  if (!rgb) return null;
54
58
 
55
59
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
60
+ const h = hsl.h;
61
+ const s = hsl.s;
62
+ const l = hsl.l;
56
63
 
57
- // Neutral-Erkennung: gleiche Logik wie generateColorScale
58
- const isNeutral = hsl.s < 15;
59
- const sFactor = isNeutral ? 0.3 : 1;
64
+ const isNeutral = s < 15;
65
+ const sFactor = isNeutral ? 0.15 : 1;
60
66
 
61
67
  // Dark Mode: Basis etwas heller für bessere Sichtbarkeit
62
- const darkBase = hslToHex(hsl.h, Math.min(hsl.s * 1.1 * sFactor, 100), Math.min(hsl.l + 10, 65));
68
+ const darkBase = hslToHex(h, Math.min(s * 1.1 * sFactor, isNeutral ? 8 : 100), Math.min(l + 10, 65));
63
69
 
64
70
  return {
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),
73
- 9: darkBase,
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)),
71
+ 1: hslToHex(h, Math.min(s * 0.35 * sFactor, isNeutral ? 2 : 15), 8),
72
+ 2: hslToHex(h, Math.min(s * 0.4 * sFactor, isNeutral ? 3 : 18), 12),
73
+ 3: hslToHex(h, Math.min(s * 0.5 * sFactor, isNeutral ? 4 : 22), 18),
74
+ 4: hslToHex(h, Math.min(s * 0.55 * sFactor, isNeutral ? 4 : 28), 24),
75
+ 5: hslToHex(h, Math.min(s * 0.6 * sFactor, isNeutral ? 5 : 32), 30),
76
+ 6: hslToHex(h - 2, Math.min(s * 0.63 * sFactor, isNeutral ? 5 : 40), 38),
77
+ 7: hslToHex(h - 1, Math.min(s * 0.7 * sFactor, isNeutral ? 5 : 48), 48),
78
+ 8: hslToHex(h, Math.min(s * 0.8 * sFactor, isNeutral ? 6 : 55), 58),
79
+ 9: darkBase,
80
+ 10: hslToHex(h + 1, Math.min(s * 0.85 * sFactor, isNeutral ? 6 : 65), Math.min(l + 20, 75)),
81
+ 11: hslToHex(h + 2, Math.min(s * 0.6 * sFactor, isNeutral ? 5 : 50), Math.min(l + 35, 85)),
82
+ 12: hslToHex(h - 3, Math.min(s * 0.35 * sFactor, isNeutral ? 3 : 30), Math.min(l + 50, 95)),
77
83
  };
78
84
  }
79
85