@syncupsuite/themes 0.2.2 → 0.3.1

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 (39) hide show
  1. package/dist/index.cjs +11527 -1399
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +13 -1
  4. package/dist/index.d.ts +13 -1
  5. package/dist/index.js +11520 -1398
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/art-deco/meta.json +50 -0
  9. package/src/art-deco/tailwind.css +391 -0
  10. package/src/art-deco/tokens.css +319 -0
  11. package/src/art-deco/tokens.json +840 -0
  12. package/src/nihon-minimal/meta.json +44 -0
  13. package/src/nihon-minimal/tailwind.css +361 -0
  14. package/src/nihon-minimal/tokens.css +299 -0
  15. package/src/nihon-minimal/tokens.json +780 -0
  16. package/src/nihon-traditional/meta.json +1 -1
  17. package/src/nihon-traditional/tailwind.css +111 -89
  18. package/src/nihon-traditional/tokens.css +105 -91
  19. package/src/nihon-traditional/tokens.json +89 -89
  20. package/src/nordic-modern/meta.json +56 -0
  21. package/src/nordic-modern/tailwind.css +421 -0
  22. package/src/nordic-modern/tokens.css +339 -0
  23. package/src/nordic-modern/tokens.json +900 -0
  24. package/src/renaissance/meta.json +56 -0
  25. package/src/renaissance/tailwind.css +421 -0
  26. package/src/renaissance/tokens.css +339 -0
  27. package/src/renaissance/tokens.json +900 -0
  28. package/src/shuimo-modern/meta.json +56 -0
  29. package/src/shuimo-modern/tailwind.css +421 -0
  30. package/src/shuimo-modern/tokens.css +339 -0
  31. package/src/shuimo-modern/tokens.json +900 -0
  32. package/src/swiss-international/meta.json +1 -1
  33. package/src/swiss-international/tailwind.css +107 -85
  34. package/src/swiss-international/tokens.css +101 -87
  35. package/src/swiss-international/tokens.json +85 -85
  36. package/src/tang-imperial/meta.json +56 -0
  37. package/src/tang-imperial/tailwind.css +421 -0
  38. package/src/tang-imperial/tokens.css +339 -0
  39. package/src/tang-imperial/tokens.json +900 -0
package/src/swiss-international/meta.json CHANGED
@@ -50,7 +50,7 @@
50
50
  ],
51
51
  "validation": {
52
52
  "schema": true,
53
- "contrast": null,
53
+ "contrast": true,
54
54
  "completeness": true
55
55
  }
56
56
  }
package/src/swiss-international/tailwind.css CHANGED
@@ -3,165 +3,165 @@
3
3
  @theme {
4
4
  /* --- Colors --- */
5
5
  /* Schwarz 50 */
6
- --color-schwarz-50: #F2F2F2;
6
+ --color-schwarz-50: #F5F5F5;
7
7
  /* Schwarz 100 */
8
- --color-schwarz-100: #E6E6E6;
8
+ --color-schwarz-100: #C1C1C1;
9
9
  /* Schwarz 200 */
10
- --color-schwarz-200: #CCCCCC;
10
+ --color-schwarz-200: #909090;
11
11
  /* Schwarz 300 */
12
- --color-schwarz-300: #B3B3B3;
12
+ --color-schwarz-300: #626262;
13
13
  /* Schwarz 400 */
14
- --color-schwarz-400: #999999;
14
+ --color-schwarz-400: #373737;
15
15
  /* Schwarz 500 */
16
- --color-schwarz-500: #121212;
16
+ --color-schwarz-500: #111111;
17
17
  /* Schwarz 600 */
18
- --color-schwarz-600: #262626;
18
+ --color-schwarz-600: #0E0E0E;
19
19
  /* Schwarz 700 */
20
- --color-schwarz-700: #1A1A1A;
20
+ --color-schwarz-700: #0B0B0B;
21
21
  /* Schwarz 800 */
22
- --color-schwarz-800: #121212;
22
+ --color-schwarz-800: #080808;
23
23
  /* Schwarz 900 */
24
- --color-schwarz-900: #0A0A0A;
24
+ --color-schwarz-900: #060606;
25
25
  /* Weiss 50 */
26
- --color-weiss-50: #F2F2F2;
26
+ --color-weiss-50: #F5F5F5;
27
27
  /* Weiss 100 */
28
- --color-weiss-100: #E6E6E6;
28
+ --color-weiss-100: #F6F6F6;
29
29
  /* Weiss 200 */
30
- --color-weiss-200: #CCCCCC;
30
+ --color-weiss-200: #F7F7F7;
31
31
  /* Weiss 300 */
32
- --color-weiss-300: #B3B3B3;
32
+ --color-weiss-300: #F8F8F8;
33
33
  /* Weiss 400 */
34
- --color-weiss-400: #999999;
34
+ --color-weiss-400: #F9F9F9;
35
35
  /* Weiss 500 */
36
36
  --color-weiss-500: #FAFAFA;
37
37
  /* Weiss 600 */
38
- --color-weiss-600: #E6E6E6;
38
+ --color-weiss-600: #B4B4B4;
39
39
  /* Weiss 700 */
40
- --color-weiss-700: #CCCCCC;
40
+ --color-weiss-700: #727272;
41
41
  /* Weiss 800 */
42
- --color-weiss-800: #B3B3B3;
42
+ --color-weiss-800: #373737;
43
43
  /* Weiss 900 */
44
- --color-weiss-900: #999999;
44
+ --color-weiss-900: #060606;
45
45
  /* Rot (Signal Red) 50 */
46
- --color-rot-signal-red-50: #F5EFEF;
46
+ --color-rot-signal-red-50: #FFE8E1;
47
47
  /* Rot (Signal Red) 100 */
48
- --color-rot-signal-red-100: #ECE0DF;
48
+ --color-rot-signal-red-100: #FFC8BE;
49
49
  /* Rot (Signal Red) 200 */
50
- --color-rot-signal-red-200: #F5A5A3;
50
+ --color-rot-signal-red-200: #FFA79B;
51
51
  /* Rot (Signal Red) 300 */
52
- --color-rot-signal-red-300: #F07775;
52
+ --color-rot-signal-red-300: #FF8578;
53
53
  /* Rot (Signal Red) 400 */
54
- --color-rot-signal-red-400: #EB4A47;
54
+ --color-rot-signal-red-400: #F56055;
55
55
  /* Rot (Signal Red) 500 */
56
- --color-rot-signal-red-500: #E83430;
56
+ --color-rot-signal-red-500: #E8322E;
57
57
  /* Rot (Signal Red) 600 */
58
- --color-rot-signal-red-600: #D81B18;
58
+ --color-rot-signal-red-600: #B40510;
59
59
  /* Rot (Signal Red) 700 */
60
- --color-rot-signal-red-700: #AA1513;
60
+ --color-rot-signal-red-700: #820000;
61
61
  /* Rot (Signal Red) 800 */
62
- --color-rot-signal-red-800: #7C100E;
62
+ --color-rot-signal-red-800: #530000;
63
63
  /* Rot (Signal Red) 900 */
64
- --color-rot-signal-red-900: #4E0A09;
64
+ --color-rot-signal-red-900: #260000;
65
65
  /* Mittelgrau 50 */
66
- --color-mittelgrau-50: #F2F2F2;
66
+ --color-mittelgrau-50: #F5F5F5;
67
67
  /* Mittelgrau 100 */
68
- --color-mittelgrau-100: #E6E6E6;
68
+ --color-mittelgrau-100: #D8D8D8;
69
69
  /* Mittelgrau 200 */
70
- --color-mittelgrau-200: #CCCCCC;
70
+ --color-mittelgrau-200: #BDBDBD;
71
71
  /* Mittelgrau 300 */
72
- --color-mittelgrau-300: #B3B3B3;
72
+ --color-mittelgrau-300: #A2A2A2;
73
73
  /* Mittelgrau 400 */
74
- --color-mittelgrau-400: #999999;
74
+ --color-mittelgrau-400: #878787;
75
75
  /* Mittelgrau 500 */
76
76
  --color-mittelgrau-500: #6E6E6E;
77
77
  /* Mittelgrau 600 */
78
- --color-mittelgrau-600: #595959;
78
+ --color-mittelgrau-600: #515151;
79
79
  /* Mittelgrau 700 */
80
- --color-mittelgrau-700: #404040;
80
+ --color-mittelgrau-700: #353535;
81
81
  /* Mittelgrau 800 */
82
- --color-mittelgrau-800: #262626;
82
+ --color-mittelgrau-800: #1C1C1C;
83
83
  /* Mittelgrau 900 */
84
- --color-mittelgrau-900: #0D0D0D;
84
+ --color-mittelgrau-900: #060606;
85
85
  /* Hellgrau 50 */
86
- --color-hellgrau-50: #F2F2F2;
86
+ --color-hellgrau-50: #F5F5F5;
87
87
  /* Hellgrau 100 */
88
- --color-hellgrau-100: #E6E6E6;
88
+ --color-hellgrau-100: #EEEEEE;
89
89
  /* Hellgrau 200 */
90
- --color-hellgrau-200: #CCCCCC;
90
+ --color-hellgrau-200: #E8E8E8;
91
91
  /* Hellgrau 300 */
92
- --color-hellgrau-300: #B3B3B3;
92
+ --color-hellgrau-300: #E1E1E1;
93
93
  /* Hellgrau 400 */
94
- --color-hellgrau-400: #999999;
94
+ --color-hellgrau-400: #DBDBDB;
95
95
  /* Hellgrau 500 */
96
96
  --color-hellgrau-500: #D4D4D4;
97
97
  /* Hellgrau 600 */
98
- --color-hellgrau-600: #BFBFBF;
98
+ --color-hellgrau-600: #999999;
99
99
  /* Hellgrau 700 */
100
- --color-hellgrau-700: #A6A6A6;
100
+ --color-hellgrau-700: #626262;
101
101
  /* Hellgrau 800 */
102
- --color-hellgrau-800: #8C8C8C;
102
+ --color-hellgrau-800: #303030;
103
103
  /* Hellgrau 900 */
104
- --color-hellgrau-900: #737373;
104
+ --color-hellgrau-900: #060606;
105
105
  /* Dunkelblau 50 */
106
- --color-dunkelblau-50: #F0F2F4;
106
+ --color-dunkelblau-50: #EDF6FF;
107
107
  /* Dunkelblau 100 */
108
- --color-dunkelblau-100: #E1E5EA;
108
+ --color-dunkelblau-100: #BFCEDE;
109
109
  /* Dunkelblau 200 */
110
- --color-dunkelblau-200: #AFCBE9;
110
+ --color-dunkelblau-200: #93A6BD;
111
111
  /* Dunkelblau 300 */
112
- --color-dunkelblau-300: #88B1DD;
112
+ --color-dunkelblau-300: #69819C;
113
113
  /* Dunkelblau 400 */
114
- --color-dunkelblau-400: #6097D2;
114
+ --color-dunkelblau-400: #415C7B;
115
115
  /* Dunkelblau 500 */
116
- --color-dunkelblau-500: #1A3A5B;
116
+ --color-dunkelblau-500: #1A3A5C;
117
117
  /* Dunkelblau 600 */
118
- --color-dunkelblau-600: #11263C;
118
+ --color-dunkelblau-600: #0F2C49;
119
119
  /* Dunkelblau 700 */
120
- --color-dunkelblau-700: #111922;
120
+ --color-dunkelblau-700: #061E37;
121
121
  /* Dunkelblau 800 */
122
- --color-dunkelblau-800: #0C1218;
122
+ --color-dunkelblau-800: #011125;
123
123
  /* Dunkelblau 900 */
124
- --color-dunkelblau-900: #070A0E;
124
+ --color-dunkelblau-900: #000615;
125
125
  /* Neutral 50 */
126
- --color-neutral-50: #F8F7F7;
126
+ --color-neutral-50: #FBF8F1;
127
127
  /* Neutral 100 */
128
- --color-neutral-100: #F0EFEF;
128
+ --color-neutral-100: #F1EEE7;
129
129
  /* Neutral 200 */
130
- --color-neutral-200: #E1DFDF;
130
+ --color-neutral-200: #E0DED7;
131
131
  /* Neutral 300 */
132
- --color-neutral-300: #C9C5C5;
132
+ --color-neutral-300: #C6C4BD;
133
133
  /* Neutral 400 */
134
- --color-neutral-400: #A19B9B;
134
+ --color-neutral-400: #9B9891;
135
135
  /* Neutral 500 */
136
- --color-neutral-500: #797272;
136
+ --color-neutral-500: #716E68;
137
137
  /* Neutral 600 */
138
- --color-neutral-600: #5F5959;
138
+ --color-neutral-600: #4F4D47;
139
139
  /* Neutral 700 */
140
- --color-neutral-700: #444040;
140
+ --color-neutral-700: #35332D;
141
141
  /* Neutral 800 */
142
- --color-neutral-800: #2A2828;
142
+ --color-neutral-800: #1C1A15;
143
143
  /* Neutral 900 */
144
- --color-neutral-900: #151414;
144
+ --color-neutral-900: #090704;
145
145
  /* Accent 50 */
146
- --color-accent-50: #F3F2F2;
146
+ --color-accent-50: #FAF3F3;
147
147
  /* Accent 100 */
148
- --color-accent-100: #E7E4E4;
148
+ --color-accent-100: #D5CBCB;
149
149
  /* Accent 200 */
150
- --color-accent-200: #D4C4C4;
150
+ --color-accent-200: #B1A4A4;
151
151
  /* Accent 300 */
152
- --color-accent-300: #BEA7A7;
152
+ --color-accent-300: #8F7F7F;
153
153
  /* Accent 400 */
154
- --color-accent-400: #A88A8A;
154
+ --color-accent-400: #6E5B5B;
155
155
  /* Accent 500 */
156
- --color-accent-500: #4F3B3B;
156
+ --color-accent-500: #4E3A3A;
157
157
  /* Accent 600 */
158
- --color-accent-600: #382929;
158
+ --color-accent-600: #3C2B2B;
159
159
  /* Accent 700 */
160
- --color-accent-700: #1C1717;
160
+ --color-accent-700: #2B1C1C;
161
161
  /* Accent 800 */
162
- --color-accent-800: #131010;
162
+ --color-accent-800: #1A0F0F;
163
163
  /* Accent 900 */
164
- --color-accent-900: #0B0909;
164
+ --color-accent-900: #0B0404;
165
165
 
166
166
  /* --- Spacing (8px grid) --- */
167
167
  /* Spacing 0 (0px) */
@@ -235,6 +235,28 @@
235
235
 
236
236
  }
237
237
 
238
+ /* === Semantic Color API — theme-aware Tailwind utilities === */
239
+ @theme {
240
+ --color-canvas: var(--background-canvas);
241
+ --color-surface: var(--background-surface);
242
+ --color-muted: var(--background-muted);
243
+ --color-foreground: var(--text-primary);
244
+ --color-foreground-secondary: var(--text-secondary);
245
+ --color-foreground-muted: var(--text-muted);
246
+ --color-foreground-inverse: var(--text-inverse);
247
+ --color-primary: var(--interactive-primary);
248
+ --color-primary-hover: var(--interactive-primary-hover);
249
+ --color-primary-active: var(--interactive-primary-active);
250
+ --color-border: var(--border-default);
251
+ --color-border-strong: var(--border-strong);
252
+ --color-error: var(--status-error);
253
+ --color-success: var(--status-success);
254
+ --color-warning: var(--status-warning);
255
+ --color-info: var(--status-info);
256
+ --color-ring: var(--focus-ring);
257
+ --color-focus-visible: var(--accessibility-focus-visible);
258
+ }
259
+
238
260
  /* Primitive aliases + light mode semantic tokens */
239
261
  :root {
240
262
  /* --primitive-color-* aliases → @theme --color-* (for semantic var() resolution) */
@@ -348,8 +370,8 @@
348
370
  --status-error: #DC2626;
349
371
  /* Success — WCAG-compliant green */
350
372
  --status-success: #16A34A;
351
- /* Warning — WCAG-compliant amber */
352
- --status-warning: #CA8A04;
373
+ /* Warning — WCAG AA amber (4.5:1+ on white) */
374
+ --status-warning: #A16207;
353
375
  /* Info status */
354
376
  --status-info: var(--primitive-color-schwarz-500);
355
377
  /* Focus ring color */
@@ -375,11 +397,11 @@
375
397
  /* Text on light backgrounds — dark */
376
398
  --text-inverse: var(--primitive-color-neutral-900);
377
399
  /* Primary interactive — dark */
378
- --interactive-primary: var(--primitive-color-schwarz-400);
400
+ --interactive-primary: var(--primitive-color-rot-signal-red-400);
379
401
  /* Primary hover — dark */
380
- --interactive-primary-hover: var(--primitive-color-schwarz-300);
402
+ --interactive-primary-hover: var(--primitive-color-rot-signal-red-300);
381
403
  /* Primary active — dark */
382
- --interactive-primary-active: var(--primitive-color-schwarz-200);
404
+ --interactive-primary-active: var(--primitive-color-rot-signal-red-200);
383
405
  /* Default border — dark */
384
406
  --border-default: var(--primitive-color-neutral-700);
385
407
  /* Strong border — dark */
@@ -391,9 +413,9 @@
391
413
  /* Warning — WCAG-compliant amber (dark) */
392
414
  --status-warning: #EAB308;
393
415
  /* Info — dark */
394
- --status-info: var(--primitive-color-schwarz-400);
416
+ --status-info: var(--primitive-color-rot-signal-red-400);
395
417
  /* Focus ring — dark */
396
- --focus-ring: var(--primitive-color-schwarz-400);
418
+ --focus-ring: var(--primitive-color-rot-signal-red-400);
397
419
  /* Keyboard focus — dark */
398
- --accessibility-focus-visible: var(--primitive-color-schwarz-400);
420
+ --accessibility-focus-visible: var(--primitive-color-rot-signal-red-400);
399
421
  }
package/src/swiss-international/tokens.css CHANGED
@@ -1,168 +1,182 @@
1
- /* swiss-international-style — Design Tokens */
2
- /* Generated by @syncupsuite/transformers */
1
+ /* ═══════════════════════════════════════════════════════════════
2
+ * swiss-international-style — Design Tokens
3
+ * Generated by @syncupsuite/transformers
4
+ *
5
+ * CONSUMER API — Use these semantic tokens in your styles:
6
+ *
7
+ * Backgrounds: var(--background-canvas | surface | muted)
8
+ * Text: var(--text-primary | secondary | muted | inverse)
9
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
10
+ * Borders: var(--border-default | strong)
11
+ * Status: var(--status-error | success | warning | info)
12
+ * Focus: var(--focus-ring)
13
+ *
14
+ * Dark mode: Add [data-theme="dark"] to a parent element.
15
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
16
+ * ═══════════════════════════════════════════════════════════════ */
3
17
 
4
18
  :root {
5
19
  /* --- Primitive Colors --- */
6
20
  /* Schwarz 50 */
7
- --primitive-color-schwarz-50: #F2F2F2;
21
+ --primitive-color-schwarz-50: #F5F5F5;
8
22
  /* Schwarz 100 */
9
- --primitive-color-schwarz-100: #E6E6E6;
23
+ --primitive-color-schwarz-100: #C1C1C1;
10
24
  /* Schwarz 200 */
11
- --primitive-color-schwarz-200: #CCCCCC;
25
+ --primitive-color-schwarz-200: #909090;
12
26
  /* Schwarz 300 */
13
- --primitive-color-schwarz-300: #B3B3B3;
27
+ --primitive-color-schwarz-300: #626262;
14
28
  /* Schwarz 400 */
15
- --primitive-color-schwarz-400: #999999;
29
+ --primitive-color-schwarz-400: #373737;
16
30
  /* Schwarz 500 */
17
- --primitive-color-schwarz-500: #121212;
31
+ --primitive-color-schwarz-500: #111111;
18
32
  /* Schwarz 600 */
19
- --primitive-color-schwarz-600: #262626;
33
+ --primitive-color-schwarz-600: #0E0E0E;
20
34
  /* Schwarz 700 */
21
- --primitive-color-schwarz-700: #1A1A1A;
35
+ --primitive-color-schwarz-700: #0B0B0B;
22
36
  /* Schwarz 800 */
23
- --primitive-color-schwarz-800: #121212;
37
+ --primitive-color-schwarz-800: #080808;
24
38
  /* Schwarz 900 */
25
- --primitive-color-schwarz-900: #0A0A0A;
39
+ --primitive-color-schwarz-900: #060606;
26
40
  /* Weiss 50 */
27
- --primitive-color-weiss-50: #F2F2F2;
41
+ --primitive-color-weiss-50: #F5F5F5;
28
42
  /* Weiss 100 */
29
- --primitive-color-weiss-100: #E6E6E6;
43
+ --primitive-color-weiss-100: #F6F6F6;
30
44
  /* Weiss 200 */
31
- --primitive-color-weiss-200: #CCCCCC;
45
+ --primitive-color-weiss-200: #F7F7F7;
32
46
  /* Weiss 300 */
33
- --primitive-color-weiss-300: #B3B3B3;
47
+ --primitive-color-weiss-300: #F8F8F8;
34
48
  /* Weiss 400 */
35
- --primitive-color-weiss-400: #999999;
49
+ --primitive-color-weiss-400: #F9F9F9;
36
50
  /* Weiss 500 */
37
51
  --primitive-color-weiss-500: #FAFAFA;
38
52
  /* Weiss 600 */
39
- --primitive-color-weiss-600: #E6E6E6;
53
+ --primitive-color-weiss-600: #B4B4B4;
40
54
  /* Weiss 700 */
41
- --primitive-color-weiss-700: #CCCCCC;
55
+ --primitive-color-weiss-700: #727272;
42
56
  /* Weiss 800 */
43
- --primitive-color-weiss-800: #B3B3B3;
57
+ --primitive-color-weiss-800: #373737;
44
58
  /* Weiss 900 */
45
- --primitive-color-weiss-900: #999999;
59
+ --primitive-color-weiss-900: #060606;
46
60
  /* Rot (Signal Red) 50 */
47
- --primitive-color-rot-signal-red-50: #F5EFEF;
61
+ --primitive-color-rot-signal-red-50: #FFE8E1;
48
62
  /* Rot (Signal Red) 100 */
49
- --primitive-color-rot-signal-red-100: #ECE0DF;
63
+ --primitive-color-rot-signal-red-100: #FFC8BE;
50
64
  /* Rot (Signal Red) 200 */
51
- --primitive-color-rot-signal-red-200: #F5A5A3;
65
+ --primitive-color-rot-signal-red-200: #FFA79B;
52
66
  /* Rot (Signal Red) 300 */
53
- --primitive-color-rot-signal-red-300: #F07775;
67
+ --primitive-color-rot-signal-red-300: #FF8578;
54
68
  /* Rot (Signal Red) 400 */
55
- --primitive-color-rot-signal-red-400: #EB4A47;
69
+ --primitive-color-rot-signal-red-400: #F56055;
56
70
  /* Rot (Signal Red) 500 */
57
- --primitive-color-rot-signal-red-500: #E83430;
71
+ --primitive-color-rot-signal-red-500: #E8322E;
58
72
  /* Rot (Signal Red) 600 */
59
- --primitive-color-rot-signal-red-600: #D81B18;
73
+ --primitive-color-rot-signal-red-600: #B40510;
60
74
  /* Rot (Signal Red) 700 */
61
- --primitive-color-rot-signal-red-700: #AA1513;
75
+ --primitive-color-rot-signal-red-700: #820000;
62
76
  /* Rot (Signal Red) 800 */
63
- --primitive-color-rot-signal-red-800: #7C100E;
77
+ --primitive-color-rot-signal-red-800: #530000;
64
78
  /* Rot (Signal Red) 900 */
65
- --primitive-color-rot-signal-red-900: #4E0A09;
79
+ --primitive-color-rot-signal-red-900: #260000;
66
80
  /* Mittelgrau 50 */
67
- --primitive-color-mittelgrau-50: #F2F2F2;
81
+ --primitive-color-mittelgrau-50: #F5F5F5;
68
82
  /* Mittelgrau 100 */
69
- --primitive-color-mittelgrau-100: #E6E6E6;
83
+ --primitive-color-mittelgrau-100: #D8D8D8;
70
84
  /* Mittelgrau 200 */
71
- --primitive-color-mittelgrau-200: #CCCCCC;
85
+ --primitive-color-mittelgrau-200: #BDBDBD;
72
86
  /* Mittelgrau 300 */
73
- --primitive-color-mittelgrau-300: #B3B3B3;
87
+ --primitive-color-mittelgrau-300: #A2A2A2;
74
88
  /* Mittelgrau 400 */
75
- --primitive-color-mittelgrau-400: #999999;
89
+ --primitive-color-mittelgrau-400: #878787;
76
90
  /* Mittelgrau 500 */
77
91
  --primitive-color-mittelgrau-500: #6E6E6E;
78
92
  /* Mittelgrau 600 */
79
- --primitive-color-mittelgrau-600: #595959;
93
+ --primitive-color-mittelgrau-600: #515151;
80
94
  /* Mittelgrau 700 */
81
- --primitive-color-mittelgrau-700: #404040;
95
+ --primitive-color-mittelgrau-700: #353535;
82
96
  /* Mittelgrau 800 */
83
- --primitive-color-mittelgrau-800: #262626;
97
+ --primitive-color-mittelgrau-800: #1C1C1C;
84
98
  /* Mittelgrau 900 */
85
- --primitive-color-mittelgrau-900: #0D0D0D;
99
+ --primitive-color-mittelgrau-900: #060606;
86
100
  /* Hellgrau 50 */
87
- --primitive-color-hellgrau-50: #F2F2F2;
101
+ --primitive-color-hellgrau-50: #F5F5F5;
88
102
  /* Hellgrau 100 */
89
- --primitive-color-hellgrau-100: #E6E6E6;
103
+ --primitive-color-hellgrau-100: #EEEEEE;
90
104
  /* Hellgrau 200 */
91
- --primitive-color-hellgrau-200: #CCCCCC;
105
+ --primitive-color-hellgrau-200: #E8E8E8;
92
106
  /* Hellgrau 300 */
93
- --primitive-color-hellgrau-300: #B3B3B3;
107
+ --primitive-color-hellgrau-300: #E1E1E1;
94
108
  /* Hellgrau 400 */
95
- --primitive-color-hellgrau-400: #999999;
109
+ --primitive-color-hellgrau-400: #DBDBDB;
96
110
  /* Hellgrau 500 */
97
111
  --primitive-color-hellgrau-500: #D4D4D4;
98
112
  /* Hellgrau 600 */
99
- --primitive-color-hellgrau-600: #BFBFBF;
113
+ --primitive-color-hellgrau-600: #999999;
100
114
  /* Hellgrau 700 */
101
- --primitive-color-hellgrau-700: #A6A6A6;
115
+ --primitive-color-hellgrau-700: #626262;
102
116
  /* Hellgrau 800 */
103
- --primitive-color-hellgrau-800: #8C8C8C;
117
+ --primitive-color-hellgrau-800: #303030;
104
118
  /* Hellgrau 900 */
105
- --primitive-color-hellgrau-900: #737373;
119
+ --primitive-color-hellgrau-900: #060606;
106
120
  /* Dunkelblau 50 */
107
- --primitive-color-dunkelblau-50: #F0F2F4;
121
+ --primitive-color-dunkelblau-50: #EDF6FF;
108
122
  /* Dunkelblau 100 */
109
- --primitive-color-dunkelblau-100: #E1E5EA;
123
+ --primitive-color-dunkelblau-100: #BFCEDE;
110
124
  /* Dunkelblau 200 */
111
- --primitive-color-dunkelblau-200: #AFCBE9;
125
+ --primitive-color-dunkelblau-200: #93A6BD;
112
126
  /* Dunkelblau 300 */
113
- --primitive-color-dunkelblau-300: #88B1DD;
127
+ --primitive-color-dunkelblau-300: #69819C;
114
128
  /* Dunkelblau 400 */
115
- --primitive-color-dunkelblau-400: #6097D2;
129
+ --primitive-color-dunkelblau-400: #415C7B;
116
130
  /* Dunkelblau 500 */
117
- --primitive-color-dunkelblau-500: #1A3A5B;
131
+ --primitive-color-dunkelblau-500: #1A3A5C;
118
132
  /* Dunkelblau 600 */
119
- --primitive-color-dunkelblau-600: #11263C;
133
+ --primitive-color-dunkelblau-600: #0F2C49;
120
134
  /* Dunkelblau 700 */
121
- --primitive-color-dunkelblau-700: #111922;
135
+ --primitive-color-dunkelblau-700: #061E37;
122
136
  /* Dunkelblau 800 */
123
- --primitive-color-dunkelblau-800: #0C1218;
137
+ --primitive-color-dunkelblau-800: #011125;
124
138
  /* Dunkelblau 900 */
125
- --primitive-color-dunkelblau-900: #070A0E;
139
+ --primitive-color-dunkelblau-900: #000615;
126
140
  /* Neutral 50 */
127
- --primitive-color-neutral-50: #F8F7F7;
141
+ --primitive-color-neutral-50: #FBF8F1;
128
142
  /* Neutral 100 */
129
- --primitive-color-neutral-100: #F0EFEF;
143
+ --primitive-color-neutral-100: #F1EEE7;
130
144
  /* Neutral 200 */
131
- --primitive-color-neutral-200: #E1DFDF;
145
+ --primitive-color-neutral-200: #E0DED7;
132
146
  /* Neutral 300 */
133
- --primitive-color-neutral-300: #C9C5C5;
147
+ --primitive-color-neutral-300: #C6C4BD;
134
148
  /* Neutral 400 */
135
- --primitive-color-neutral-400: #A19B9B;
149
+ --primitive-color-neutral-400: #9B9891;
136
150
  /* Neutral 500 */
137
- --primitive-color-neutral-500: #797272;
151
+ --primitive-color-neutral-500: #716E68;
138
152
  /* Neutral 600 */
139
- --primitive-color-neutral-600: #5F5959;
153
+ --primitive-color-neutral-600: #4F4D47;
140
154
  /* Neutral 700 */
141
- --primitive-color-neutral-700: #444040;
155
+ --primitive-color-neutral-700: #35332D;
142
156
  /* Neutral 800 */
143
- --primitive-color-neutral-800: #2A2828;
157
+ --primitive-color-neutral-800: #1C1A15;
144
158
  /* Neutral 900 */
145
- --primitive-color-neutral-900: #151414;
159
+ --primitive-color-neutral-900: #090704;
146
160
  /* Accent 50 */
147
- --primitive-color-accent-50: #F3F2F2;
161
+ --primitive-color-accent-50: #FAF3F3;
148
162
  /* Accent 100 */
149
- --primitive-color-accent-100: #E7E4E4;
163
+ --primitive-color-accent-100: #D5CBCB;
150
164
  /* Accent 200 */
151
- --primitive-color-accent-200: #D4C4C4;
165
+ --primitive-color-accent-200: #B1A4A4;
152
166
  /* Accent 300 */
153
- --primitive-color-accent-300: #BEA7A7;
167
+ --primitive-color-accent-300: #8F7F7F;
154
168
  /* Accent 400 */
155
- --primitive-color-accent-400: #A88A8A;
169
+ --primitive-color-accent-400: #6E5B5B;
156
170
  /* Accent 500 */
157
- --primitive-color-accent-500: #4F3B3B;
171
+ --primitive-color-accent-500: #4E3A3A;
158
172
  /* Accent 600 */
159
- --primitive-color-accent-600: #382929;
173
+ --primitive-color-accent-600: #3C2B2B;
160
174
  /* Accent 700 */
161
- --primitive-color-accent-700: #1C1717;
175
+ --primitive-color-accent-700: #2B1C1C;
162
176
  /* Accent 800 */
163
- --primitive-color-accent-800: #131010;
177
+ --primitive-color-accent-800: #1A0F0F;
164
178
  /* Accent 900 */
165
- --primitive-color-accent-900: #0B0909;
179
+ --primitive-color-accent-900: #0B0404;
166
180
 
167
181
  /* --- Typography --- */
168
182
  /* Heading font family */
@@ -275,8 +289,8 @@
275
289
  --status-error: #DC2626;
276
290
  /* Success — WCAG-compliant green */
277
291
  --status-success: #16A34A;
278
- /* Warning — WCAG-compliant amber */
279
- --status-warning: #CA8A04;
292
+ /* Warning — WCAG AA amber (4.5:1+ on white) */
293
+ --status-warning: #A16207;
280
294
  /* Info status */
281
295
  --status-info: var(--primitive-color-schwarz-500);
282
296
  /* Focus ring color */
@@ -301,11 +315,11 @@
301
315
  /* Text on light backgrounds — dark */
302
316
  --text-inverse: var(--primitive-color-neutral-900);
303
317
  /* Primary interactive — dark */
304
- --interactive-primary: var(--primitive-color-schwarz-400);
318
+ --interactive-primary: var(--primitive-color-rot-signal-red-400);
305
319
  /* Primary hover — dark */
306
- --interactive-primary-hover: var(--primitive-color-schwarz-300);
320
+ --interactive-primary-hover: var(--primitive-color-rot-signal-red-300);
307
321
  /* Primary active — dark */
308
- --interactive-primary-active: var(--primitive-color-schwarz-200);
322
+ --interactive-primary-active: var(--primitive-color-rot-signal-red-200);
309
323
  /* Default border — dark */
310
324
  --border-default: var(--primitive-color-neutral-700);
311
325
  /* Strong border — dark */
@@ -317,9 +331,9 @@
317
331
  /* Warning — WCAG-compliant amber (dark) */
318
332
  --status-warning: #EAB308;
319
333
  /* Info — dark */
320
- --status-info: var(--primitive-color-schwarz-400);
334
+ --status-info: var(--primitive-color-rot-signal-red-400);
321
335
  /* Focus ring — dark */
322
- --focus-ring: var(--primitive-color-schwarz-400);
336
+ --focus-ring: var(--primitive-color-rot-signal-red-400);
323
337
  /* Keyboard focus — dark */
324
- --accessibility-focus-visible: var(--primitive-color-schwarz-400);
338
+ --accessibility-focus-visible: var(--primitive-color-rot-signal-red-400);
325
339
  }