@syncupsuite/themes 0.3.1 → 0.4.0
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.
- package/dist/index.cjs +11080 -4492
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +11075 -4491
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/de-stijl/meta.json +50 -0
- package/src/de-stijl/tailwind.css +391 -0
- package/src/de-stijl/tokens.css +319 -0
- package/src/de-stijl/tokens.json +840 -0
- package/src/milanese-design/meta.json +50 -0
- package/src/milanese-design/tailwind.css +391 -0
- package/src/milanese-design/tokens.css +319 -0
- package/src/milanese-design/tokens.json +840 -0
- package/src/swiss-modernist/meta.json +62 -0
- package/src/swiss-modernist/tailwind.css +451 -0
- package/src/swiss-modernist/tokens.css +359 -0
- package/src/swiss-modernist/tokens.json +960 -0
- package/src/wiener-werkstaette/meta.json +44 -0
- package/src/wiener-werkstaette/tailwind.css +361 -0
- package/src/wiener-werkstaette/tokens.css +299 -0
- package/src/wiener-werkstaette/tokens.json +780 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "swiss-modernist",
|
|
3
|
+
"name": "Swiss Modernist",
|
|
4
|
+
"description": "Swiss Modernist — International Typographic Style from Zürich and Basel schools, 1950s–70s. Müller-Brockmann's grid precision, Helvetica, and disciplined color.",
|
|
5
|
+
"foundation": {
|
|
6
|
+
"story": "Josef Müller-Brockmann, Armin Hofmann, and Emil Ruder established the International Typographic Style at Zürich's Kunstgewerbeschule and Basel's Allgemeine Gewerbeschule. Helvetica arrived in 1957, designed to say nothing but the message itself. One typeface, one grid, one accent color — the rest is discipline.",
|
|
7
|
+
"philosophy": "Objectivity over expression. The grid is not a constraint — it is liberation. Typography carries the visual weight; color is used once, with surgical precision.",
|
|
8
|
+
"era": "Modernist — 1950s–1970s",
|
|
9
|
+
"harmonyMode": "monochromatic",
|
|
10
|
+
"radiusTendency": "none",
|
|
11
|
+
"typographyCategory": "neo-grotesque"
|
|
12
|
+
},
|
|
13
|
+
"seedColors": [
|
|
14
|
+
{
|
|
15
|
+
"hex": "#3B6EA5",
|
|
16
|
+
"name": "Himmelblau",
|
|
17
|
+
"tradition": "Sky blue recurring across Josef Müller-Brockmann's Zürich concert poster series, 1960–72. The structural color of the ITS canon.",
|
|
18
|
+
"source": "Josef Müller-Brockmann: Pioneer of Swiss Graphic Design, L. Müller"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"hex": "#C8202A",
|
|
22
|
+
"name": "Rotkreuz",
|
|
23
|
+
"tradition": "Red Cross red; Swiss national identity. The single vivid accent deployed against the neutral field — restraint is the principle.",
|
|
24
|
+
"source": "Swiss Graphic Design: Origins and Growth, R. Hollis"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"hex": "#64748B",
|
|
28
|
+
"name": "Bleigrau",
|
|
29
|
+
"tradition": "Lead gray (Blei = lead). The color of moveable type blocks before inking; the unprinted color of typographic infrastructure.",
|
|
30
|
+
"source": "Typography, E. Ruder"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"hex": "#8FA3B1",
|
|
34
|
+
"name": "Stahl",
|
|
35
|
+
"tradition": "Steel blue-gray from Swiss precision engineering and Alpine industrial heritage — the color of structural metal and machine casings.",
|
|
36
|
+
"source": "Grid Systems in Graphic Design, J. Müller-Brockmann"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"hex": "#4A7C59",
|
|
40
|
+
"name": "Alpenklee",
|
|
41
|
+
"tradition": "Alpine clover (Alpenklee). Nature as quiet counterpoint to industrial precision; from Swiss landscape graphic tradition.",
|
|
42
|
+
"source": "Armin Hofmann: His Work, Quest and Philosophy, A. Hofmann"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"hex": "#F5F3EE",
|
|
46
|
+
"name": "Elfenbein",
|
|
47
|
+
"tradition": "Ivory; the warm white of quality uncoated Swiss printing paper. The ground of all composition.",
|
|
48
|
+
"source": "Typographic Design: Form and Communication, R. Carter"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"hex": "#1A2530",
|
|
52
|
+
"name": "Russ",
|
|
53
|
+
"tradition": "Soot black (Russ = soot). The color of letterpress ink on uncoated paper — ink-black with depth, not flat digital black.",
|
|
54
|
+
"source": "The New Typography, J. Tschichold"
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
"validation": {
|
|
58
|
+
"schema": true,
|
|
59
|
+
"contrast": true,
|
|
60
|
+
"completeness": true
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -0,0 +1,451 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
@theme {
|
|
4
|
+
/* --- Colors --- */
|
|
5
|
+
/* Himmelblau 50 */
|
|
6
|
+
--color-himmelblau-50: #E9F7FF;
|
|
7
|
+
/* Himmelblau 100 */
|
|
8
|
+
--color-himmelblau-100: #C5DAF3;
|
|
9
|
+
/* Himmelblau 200 */
|
|
10
|
+
--color-himmelblau-200: #A2BFE0;
|
|
11
|
+
/* Himmelblau 300 */
|
|
12
|
+
--color-himmelblau-300: #7FA3CC;
|
|
13
|
+
/* Himmelblau 400 */
|
|
14
|
+
--color-himmelblau-400: #5D88B9;
|
|
15
|
+
/* Himmelblau 500 */
|
|
16
|
+
--color-himmelblau-500: #3B6EA5;
|
|
17
|
+
/* Himmelblau 600 */
|
|
18
|
+
--color-himmelblau-600: #245180;
|
|
19
|
+
/* Himmelblau 700 */
|
|
20
|
+
--color-himmelblau-700: #0D355C;
|
|
21
|
+
/* Himmelblau 800 */
|
|
22
|
+
--color-himmelblau-800: #001B3B;
|
|
23
|
+
/* Himmelblau 900 */
|
|
24
|
+
--color-himmelblau-900: #00041C;
|
|
25
|
+
/* Rotkreuz 50 */
|
|
26
|
+
--color-rotkreuz-50: #FFE9E4;
|
|
27
|
+
/* Rotkreuz 100 */
|
|
28
|
+
--color-rotkreuz-100: #FFC5BE;
|
|
29
|
+
/* Rotkreuz 200 */
|
|
30
|
+
--color-rotkreuz-200: #FCA099;
|
|
31
|
+
/* Rotkreuz 300 */
|
|
32
|
+
--color-rotkreuz-300: #EC7B74;
|
|
33
|
+
/* Rotkreuz 400 */
|
|
34
|
+
--color-rotkreuz-400: #DB5450;
|
|
35
|
+
/* Rotkreuz 500 */
|
|
36
|
+
--color-rotkreuz-500: #C8202A;
|
|
37
|
+
/* Rotkreuz 600 */
|
|
38
|
+
--color-rotkreuz-600: #9C0013;
|
|
39
|
+
/* Rotkreuz 700 */
|
|
40
|
+
--color-rotkreuz-700: #720000;
|
|
41
|
+
/* Rotkreuz 800 */
|
|
42
|
+
--color-rotkreuz-800: #4A0000;
|
|
43
|
+
/* Rotkreuz 900 */
|
|
44
|
+
--color-rotkreuz-900: #240000;
|
|
45
|
+
/* Bleigrau 50 */
|
|
46
|
+
--color-bleigrau-50: #F1F5FC;
|
|
47
|
+
/* Bleigrau 100 */
|
|
48
|
+
--color-bleigrau-100: #D3DAE5;
|
|
49
|
+
/* Bleigrau 200 */
|
|
50
|
+
--color-bleigrau-200: #B6C0CE;
|
|
51
|
+
/* Bleigrau 300 */
|
|
52
|
+
--color-bleigrau-300: #9AA6B7;
|
|
53
|
+
/* Bleigrau 400 */
|
|
54
|
+
--color-bleigrau-400: #7E8DA1;
|
|
55
|
+
/* Bleigrau 500 */
|
|
56
|
+
--color-bleigrau-500: #64748B;
|
|
57
|
+
/* Bleigrau 600 */
|
|
58
|
+
--color-bleigrau-600: #475569;
|
|
59
|
+
/* Bleigrau 700 */
|
|
60
|
+
--color-bleigrau-700: #2D3848;
|
|
61
|
+
/* Bleigrau 800 */
|
|
62
|
+
--color-bleigrau-800: #141D2A;
|
|
63
|
+
/* Bleigrau 900 */
|
|
64
|
+
--color-bleigrau-900: #02060F;
|
|
65
|
+
/* Stahl 50 */
|
|
66
|
+
--color-stahl-50: #F1F6FA;
|
|
67
|
+
/* Stahl 100 */
|
|
68
|
+
--color-stahl-100: #DCE5EB;
|
|
69
|
+
/* Stahl 200 */
|
|
70
|
+
--color-stahl-200: #C9D4DC;
|
|
71
|
+
/* Stahl 300 */
|
|
72
|
+
--color-stahl-300: #B5C3CE;
|
|
73
|
+
/* Stahl 400 */
|
|
74
|
+
--color-stahl-400: #A2B3BF;
|
|
75
|
+
/* Stahl 500 */
|
|
76
|
+
--color-stahl-500: #8FA3B1;
|
|
77
|
+
/* Stahl 600 */
|
|
78
|
+
--color-stahl-600: #667783;
|
|
79
|
+
/* Stahl 700 */
|
|
80
|
+
--color-stahl-700: #3F4D57;
|
|
81
|
+
/* Stahl 800 */
|
|
82
|
+
--color-stahl-800: #1C272F;
|
|
83
|
+
/* Stahl 900 */
|
|
84
|
+
--color-stahl-900: #02060B;
|
|
85
|
+
/* Alpenklee 50 */
|
|
86
|
+
--color-alpenklee-50: #ECF9EF;
|
|
87
|
+
/* Alpenklee 100 */
|
|
88
|
+
--color-alpenklee-100: #CADFCF;
|
|
89
|
+
/* Alpenklee 200 */
|
|
90
|
+
--color-alpenklee-200: #A9C6B0;
|
|
91
|
+
/* Alpenklee 300 */
|
|
92
|
+
--color-alpenklee-300: #89AD92;
|
|
93
|
+
/* Alpenklee 400 */
|
|
94
|
+
--color-alpenklee-400: #6A9475;
|
|
95
|
+
/* Alpenklee 500 */
|
|
96
|
+
--color-alpenklee-500: #4A7C59;
|
|
97
|
+
/* Alpenklee 600 */
|
|
98
|
+
--color-alpenklee-600: #315C3E;
|
|
99
|
+
/* Alpenklee 700 */
|
|
100
|
+
--color-alpenklee-700: #193E26;
|
|
101
|
+
/* Alpenklee 800 */
|
|
102
|
+
--color-alpenklee-800: #03230F;
|
|
103
|
+
/* Alpenklee 900 */
|
|
104
|
+
--color-alpenklee-900: #000A01;
|
|
105
|
+
/* Elfenbein 50 */
|
|
106
|
+
--color-elfenbein-50: #F5F5F4;
|
|
107
|
+
/* Elfenbein 100 */
|
|
108
|
+
--color-elfenbein-100: #F5F5F3;
|
|
109
|
+
/* Elfenbein 200 */
|
|
110
|
+
--color-elfenbein-200: #F5F4F1;
|
|
111
|
+
/* Elfenbein 300 */
|
|
112
|
+
--color-elfenbein-300: #F5F4F0;
|
|
113
|
+
/* Elfenbein 400 */
|
|
114
|
+
--color-elfenbein-400: #F5F3EF;
|
|
115
|
+
/* Elfenbein 500 */
|
|
116
|
+
--color-elfenbein-500: #F5F3EE;
|
|
117
|
+
/* Elfenbein 600 */
|
|
118
|
+
--color-elfenbein-600: #B0AFAA;
|
|
119
|
+
/* Elfenbein 700 */
|
|
120
|
+
--color-elfenbein-700: #706F6C;
|
|
121
|
+
/* Elfenbein 800 */
|
|
122
|
+
--color-elfenbein-800: #373633;
|
|
123
|
+
/* Elfenbein 900 */
|
|
124
|
+
--color-elfenbein-900: #060604;
|
|
125
|
+
/* Russ 50 */
|
|
126
|
+
--color-russ-50: #F2F6F9;
|
|
127
|
+
/* Russ 100 */
|
|
128
|
+
--color-russ-100: #C2C7CD;
|
|
129
|
+
/* Russ 200 */
|
|
130
|
+
--color-russ-200: #939BA3;
|
|
131
|
+
/* Russ 300 */
|
|
132
|
+
--color-russ-300: #68717A;
|
|
133
|
+
/* Russ 400 */
|
|
134
|
+
--color-russ-400: #3F4954;
|
|
135
|
+
/* Russ 500 */
|
|
136
|
+
--color-russ-500: #1A2530;
|
|
137
|
+
/* Russ 600 */
|
|
138
|
+
--color-russ-600: #131D26;
|
|
139
|
+
/* Russ 700 */
|
|
140
|
+
--color-russ-700: #0C151D;
|
|
141
|
+
/* Russ 800 */
|
|
142
|
+
--color-russ-800: #060D14;
|
|
143
|
+
/* Russ 900 */
|
|
144
|
+
--color-russ-900: #03060B;
|
|
145
|
+
/* Neutral 50 */
|
|
146
|
+
--color-neutral-50: #F4F9FF;
|
|
147
|
+
/* Neutral 100 */
|
|
148
|
+
--color-neutral-100: #EAEFF5;
|
|
149
|
+
/* Neutral 200 */
|
|
150
|
+
--color-neutral-200: #D9DFE5;
|
|
151
|
+
/* Neutral 300 */
|
|
152
|
+
--color-neutral-300: #C0C5CB;
|
|
153
|
+
/* Neutral 400 */
|
|
154
|
+
--color-neutral-400: #94999E;
|
|
155
|
+
/* Neutral 500 */
|
|
156
|
+
--color-neutral-500: #6B6F74;
|
|
157
|
+
/* Neutral 600 */
|
|
158
|
+
--color-neutral-600: #494E53;
|
|
159
|
+
/* Neutral 700 */
|
|
160
|
+
--color-neutral-700: #2F3338;
|
|
161
|
+
/* Neutral 800 */
|
|
162
|
+
--color-neutral-800: #171B1F;
|
|
163
|
+
/* Neutral 900 */
|
|
164
|
+
--color-neutral-900: #05080B;
|
|
165
|
+
/* Accent 50 */
|
|
166
|
+
--color-accent-50: #E9F7FF;
|
|
167
|
+
/* Accent 100 */
|
|
168
|
+
--color-accent-100: #CFE6FF;
|
|
169
|
+
/* Accent 200 */
|
|
170
|
+
--color-accent-200: #B6D4F6;
|
|
171
|
+
/* Accent 300 */
|
|
172
|
+
--color-accent-300: #9DC3EE;
|
|
173
|
+
/* Accent 400 */
|
|
174
|
+
--color-accent-400: #83B2E5;
|
|
175
|
+
/* Accent 500 */
|
|
176
|
+
--color-accent-500: #6AA1DC;
|
|
177
|
+
/* Accent 600 */
|
|
178
|
+
--color-accent-600: #4675A7;
|
|
179
|
+
/* Accent 700 */
|
|
180
|
+
--color-accent-700: #234C75;
|
|
181
|
+
/* Accent 800 */
|
|
182
|
+
--color-accent-800: #022647;
|
|
183
|
+
/* Accent 900 */
|
|
184
|
+
--color-accent-900: #00041D;
|
|
185
|
+
|
|
186
|
+
/* --- Spacing (8px grid) --- */
|
|
187
|
+
/* Spacing 0 (0px) */
|
|
188
|
+
--spacing-0: 0px;
|
|
189
|
+
/* Spacing 1 (4px) */
|
|
190
|
+
--spacing-1: 4px;
|
|
191
|
+
/* Spacing 2 (8px) */
|
|
192
|
+
--spacing-2: 8px;
|
|
193
|
+
/* Spacing 3 (12px) */
|
|
194
|
+
--spacing-3: 12px;
|
|
195
|
+
/* Spacing 4 (16px) */
|
|
196
|
+
--spacing-4: 16px;
|
|
197
|
+
/* Spacing 5 (20px) */
|
|
198
|
+
--spacing-5: 20px;
|
|
199
|
+
/* Spacing 6 (24px) */
|
|
200
|
+
--spacing-6: 24px;
|
|
201
|
+
/* Spacing 8 (32px) */
|
|
202
|
+
--spacing-8: 32px;
|
|
203
|
+
/* Spacing 10 (40px) */
|
|
204
|
+
--spacing-10: 40px;
|
|
205
|
+
/* Spacing 12 (48px) */
|
|
206
|
+
--spacing-12: 48px;
|
|
207
|
+
/* Spacing 16 (64px) */
|
|
208
|
+
--spacing-16: 64px;
|
|
209
|
+
/* Spacing 20 (80px) */
|
|
210
|
+
--spacing-20: 80px;
|
|
211
|
+
/* Spacing 0.5 (2px) */
|
|
212
|
+
--spacing-0-5: 2px;
|
|
213
|
+
/* Spacing 1.5 (6px) */
|
|
214
|
+
--spacing-1-5: 6px;
|
|
215
|
+
|
|
216
|
+
/* --- Font Families --- */
|
|
217
|
+
/* Heading font family */
|
|
218
|
+
--font-heading: "Inter", "Helvetica Neue", "Arial", sans-serif;
|
|
219
|
+
/* Body font family */
|
|
220
|
+
--font-body: "Inter", "Helvetica Neue", "Arial", sans-serif;
|
|
221
|
+
/* Monospace font family */
|
|
222
|
+
--font-mono: "JetBrains Mono", "SF Mono", monospace;
|
|
223
|
+
|
|
224
|
+
/* --- Font Sizes --- */
|
|
225
|
+
/* Font size xs */
|
|
226
|
+
--text-xs: 0.75rem;
|
|
227
|
+
/* Font size sm */
|
|
228
|
+
--text-sm: 0.875rem;
|
|
229
|
+
/* Font size base */
|
|
230
|
+
--text-base: 1rem;
|
|
231
|
+
/* Font size lg */
|
|
232
|
+
--text-lg: 1.125rem;
|
|
233
|
+
/* Font size xl */
|
|
234
|
+
--text-xl: 1.25rem;
|
|
235
|
+
/* Font size 2xl */
|
|
236
|
+
--text-2xl: 1.5rem;
|
|
237
|
+
/* Font size 3xl */
|
|
238
|
+
--text-3xl: 1.875rem;
|
|
239
|
+
/* Font size 4xl */
|
|
240
|
+
--text-4xl: 2.25rem;
|
|
241
|
+
|
|
242
|
+
/* --- Border Radius --- */
|
|
243
|
+
/* Border radius none */
|
|
244
|
+
--radius-none: 0px;
|
|
245
|
+
/* Border radius sm */
|
|
246
|
+
--radius-sm: 0px;
|
|
247
|
+
/* Border radius md */
|
|
248
|
+
--radius-md: 0px;
|
|
249
|
+
/* Border radius lg */
|
|
250
|
+
--radius-lg: 0px;
|
|
251
|
+
/* Border radius xl */
|
|
252
|
+
--radius-xl: 0px;
|
|
253
|
+
/* Border radius full */
|
|
254
|
+
--radius-full: 9999px;
|
|
255
|
+
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* === Semantic Color API — theme-aware Tailwind utilities === */
|
|
259
|
+
@theme {
|
|
260
|
+
--color-canvas: var(--background-canvas);
|
|
261
|
+
--color-surface: var(--background-surface);
|
|
262
|
+
--color-muted: var(--background-muted);
|
|
263
|
+
--color-foreground: var(--text-primary);
|
|
264
|
+
--color-foreground-secondary: var(--text-secondary);
|
|
265
|
+
--color-foreground-muted: var(--text-muted);
|
|
266
|
+
--color-foreground-inverse: var(--text-inverse);
|
|
267
|
+
--color-primary: var(--interactive-primary);
|
|
268
|
+
--color-primary-hover: var(--interactive-primary-hover);
|
|
269
|
+
--color-primary-active: var(--interactive-primary-active);
|
|
270
|
+
--color-border: var(--border-default);
|
|
271
|
+
--color-border-strong: var(--border-strong);
|
|
272
|
+
--color-error: var(--status-error);
|
|
273
|
+
--color-success: var(--status-success);
|
|
274
|
+
--color-warning: var(--status-warning);
|
|
275
|
+
--color-info: var(--status-info);
|
|
276
|
+
--color-ring: var(--focus-ring);
|
|
277
|
+
--color-focus-visible: var(--accessibility-focus-visible);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* Primitive aliases + light mode semantic tokens */
|
|
281
|
+
:root {
|
|
282
|
+
/* --primitive-color-* aliases → @theme --color-* (for semantic var() resolution) */
|
|
283
|
+
--primitive-color-himmelblau-50: var(--color-himmelblau-50);
|
|
284
|
+
--primitive-color-himmelblau-100: var(--color-himmelblau-100);
|
|
285
|
+
--primitive-color-himmelblau-200: var(--color-himmelblau-200);
|
|
286
|
+
--primitive-color-himmelblau-300: var(--color-himmelblau-300);
|
|
287
|
+
--primitive-color-himmelblau-400: var(--color-himmelblau-400);
|
|
288
|
+
--primitive-color-himmelblau-500: var(--color-himmelblau-500);
|
|
289
|
+
--primitive-color-himmelblau-600: var(--color-himmelblau-600);
|
|
290
|
+
--primitive-color-himmelblau-700: var(--color-himmelblau-700);
|
|
291
|
+
--primitive-color-himmelblau-800: var(--color-himmelblau-800);
|
|
292
|
+
--primitive-color-himmelblau-900: var(--color-himmelblau-900);
|
|
293
|
+
--primitive-color-rotkreuz-50: var(--color-rotkreuz-50);
|
|
294
|
+
--primitive-color-rotkreuz-100: var(--color-rotkreuz-100);
|
|
295
|
+
--primitive-color-rotkreuz-200: var(--color-rotkreuz-200);
|
|
296
|
+
--primitive-color-rotkreuz-300: var(--color-rotkreuz-300);
|
|
297
|
+
--primitive-color-rotkreuz-400: var(--color-rotkreuz-400);
|
|
298
|
+
--primitive-color-rotkreuz-500: var(--color-rotkreuz-500);
|
|
299
|
+
--primitive-color-rotkreuz-600: var(--color-rotkreuz-600);
|
|
300
|
+
--primitive-color-rotkreuz-700: var(--color-rotkreuz-700);
|
|
301
|
+
--primitive-color-rotkreuz-800: var(--color-rotkreuz-800);
|
|
302
|
+
--primitive-color-rotkreuz-900: var(--color-rotkreuz-900);
|
|
303
|
+
--primitive-color-bleigrau-50: var(--color-bleigrau-50);
|
|
304
|
+
--primitive-color-bleigrau-100: var(--color-bleigrau-100);
|
|
305
|
+
--primitive-color-bleigrau-200: var(--color-bleigrau-200);
|
|
306
|
+
--primitive-color-bleigrau-300: var(--color-bleigrau-300);
|
|
307
|
+
--primitive-color-bleigrau-400: var(--color-bleigrau-400);
|
|
308
|
+
--primitive-color-bleigrau-500: var(--color-bleigrau-500);
|
|
309
|
+
--primitive-color-bleigrau-600: var(--color-bleigrau-600);
|
|
310
|
+
--primitive-color-bleigrau-700: var(--color-bleigrau-700);
|
|
311
|
+
--primitive-color-bleigrau-800: var(--color-bleigrau-800);
|
|
312
|
+
--primitive-color-bleigrau-900: var(--color-bleigrau-900);
|
|
313
|
+
--primitive-color-stahl-50: var(--color-stahl-50);
|
|
314
|
+
--primitive-color-stahl-100: var(--color-stahl-100);
|
|
315
|
+
--primitive-color-stahl-200: var(--color-stahl-200);
|
|
316
|
+
--primitive-color-stahl-300: var(--color-stahl-300);
|
|
317
|
+
--primitive-color-stahl-400: var(--color-stahl-400);
|
|
318
|
+
--primitive-color-stahl-500: var(--color-stahl-500);
|
|
319
|
+
--primitive-color-stahl-600: var(--color-stahl-600);
|
|
320
|
+
--primitive-color-stahl-700: var(--color-stahl-700);
|
|
321
|
+
--primitive-color-stahl-800: var(--color-stahl-800);
|
|
322
|
+
--primitive-color-stahl-900: var(--color-stahl-900);
|
|
323
|
+
--primitive-color-alpenklee-50: var(--color-alpenklee-50);
|
|
324
|
+
--primitive-color-alpenklee-100: var(--color-alpenklee-100);
|
|
325
|
+
--primitive-color-alpenklee-200: var(--color-alpenklee-200);
|
|
326
|
+
--primitive-color-alpenklee-300: var(--color-alpenklee-300);
|
|
327
|
+
--primitive-color-alpenklee-400: var(--color-alpenklee-400);
|
|
328
|
+
--primitive-color-alpenklee-500: var(--color-alpenklee-500);
|
|
329
|
+
--primitive-color-alpenklee-600: var(--color-alpenklee-600);
|
|
330
|
+
--primitive-color-alpenklee-700: var(--color-alpenklee-700);
|
|
331
|
+
--primitive-color-alpenklee-800: var(--color-alpenklee-800);
|
|
332
|
+
--primitive-color-alpenklee-900: var(--color-alpenklee-900);
|
|
333
|
+
--primitive-color-elfenbein-50: var(--color-elfenbein-50);
|
|
334
|
+
--primitive-color-elfenbein-100: var(--color-elfenbein-100);
|
|
335
|
+
--primitive-color-elfenbein-200: var(--color-elfenbein-200);
|
|
336
|
+
--primitive-color-elfenbein-300: var(--color-elfenbein-300);
|
|
337
|
+
--primitive-color-elfenbein-400: var(--color-elfenbein-400);
|
|
338
|
+
--primitive-color-elfenbein-500: var(--color-elfenbein-500);
|
|
339
|
+
--primitive-color-elfenbein-600: var(--color-elfenbein-600);
|
|
340
|
+
--primitive-color-elfenbein-700: var(--color-elfenbein-700);
|
|
341
|
+
--primitive-color-elfenbein-800: var(--color-elfenbein-800);
|
|
342
|
+
--primitive-color-elfenbein-900: var(--color-elfenbein-900);
|
|
343
|
+
--primitive-color-russ-50: var(--color-russ-50);
|
|
344
|
+
--primitive-color-russ-100: var(--color-russ-100);
|
|
345
|
+
--primitive-color-russ-200: var(--color-russ-200);
|
|
346
|
+
--primitive-color-russ-300: var(--color-russ-300);
|
|
347
|
+
--primitive-color-russ-400: var(--color-russ-400);
|
|
348
|
+
--primitive-color-russ-500: var(--color-russ-500);
|
|
349
|
+
--primitive-color-russ-600: var(--color-russ-600);
|
|
350
|
+
--primitive-color-russ-700: var(--color-russ-700);
|
|
351
|
+
--primitive-color-russ-800: var(--color-russ-800);
|
|
352
|
+
--primitive-color-russ-900: var(--color-russ-900);
|
|
353
|
+
--primitive-color-neutral-50: var(--color-neutral-50);
|
|
354
|
+
--primitive-color-neutral-100: var(--color-neutral-100);
|
|
355
|
+
--primitive-color-neutral-200: var(--color-neutral-200);
|
|
356
|
+
--primitive-color-neutral-300: var(--color-neutral-300);
|
|
357
|
+
--primitive-color-neutral-400: var(--color-neutral-400);
|
|
358
|
+
--primitive-color-neutral-500: var(--color-neutral-500);
|
|
359
|
+
--primitive-color-neutral-600: var(--color-neutral-600);
|
|
360
|
+
--primitive-color-neutral-700: var(--color-neutral-700);
|
|
361
|
+
--primitive-color-neutral-800: var(--color-neutral-800);
|
|
362
|
+
--primitive-color-neutral-900: var(--color-neutral-900);
|
|
363
|
+
--primitive-color-accent-50: var(--color-accent-50);
|
|
364
|
+
--primitive-color-accent-100: var(--color-accent-100);
|
|
365
|
+
--primitive-color-accent-200: var(--color-accent-200);
|
|
366
|
+
--primitive-color-accent-300: var(--color-accent-300);
|
|
367
|
+
--primitive-color-accent-400: var(--color-accent-400);
|
|
368
|
+
--primitive-color-accent-500: var(--color-accent-500);
|
|
369
|
+
--primitive-color-accent-600: var(--color-accent-600);
|
|
370
|
+
--primitive-color-accent-700: var(--color-accent-700);
|
|
371
|
+
--primitive-color-accent-800: var(--color-accent-800);
|
|
372
|
+
--primitive-color-accent-900: var(--color-accent-900);
|
|
373
|
+
|
|
374
|
+
/* Semantic tokens */
|
|
375
|
+
/* Page background */
|
|
376
|
+
--background-canvas: var(--primitive-color-neutral-50);
|
|
377
|
+
/* Card/surface background */
|
|
378
|
+
--background-surface: #FFFFFF;
|
|
379
|
+
/* Muted background */
|
|
380
|
+
--background-muted: var(--primitive-color-neutral-100);
|
|
381
|
+
/* Primary text */
|
|
382
|
+
--text-primary: var(--primitive-color-neutral-900);
|
|
383
|
+
/* Secondary text */
|
|
384
|
+
--text-secondary: var(--primitive-color-neutral-600);
|
|
385
|
+
/* Muted/disabled text */
|
|
386
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
387
|
+
/* Text on dark backgrounds */
|
|
388
|
+
--text-inverse: var(--primitive-color-neutral-50);
|
|
389
|
+
/* Primary interactive (buttons, links) */
|
|
390
|
+
--interactive-primary: var(--primitive-color-himmelblau-500);
|
|
391
|
+
/* Primary interactive hover */
|
|
392
|
+
--interactive-primary-hover: var(--primitive-color-himmelblau-600);
|
|
393
|
+
/* Primary interactive active */
|
|
394
|
+
--interactive-primary-active: var(--primitive-color-himmelblau-700);
|
|
395
|
+
/* Default border */
|
|
396
|
+
--border-default: var(--primitive-color-neutral-200);
|
|
397
|
+
/* Strong border */
|
|
398
|
+
--border-strong: var(--primitive-color-neutral-400);
|
|
399
|
+
/* Error — WCAG-compliant red */
|
|
400
|
+
--status-error: #DC2626;
|
|
401
|
+
/* Success — WCAG-compliant green */
|
|
402
|
+
--status-success: #16A34A;
|
|
403
|
+
/* Warning — WCAG AA amber (4.5:1+ on white) */
|
|
404
|
+
--status-warning: #A16207;
|
|
405
|
+
/* Info status */
|
|
406
|
+
--status-info: var(--primitive-color-himmelblau-500);
|
|
407
|
+
/* Focus ring color */
|
|
408
|
+
--focus-ring: var(--primitive-color-himmelblau-500);
|
|
409
|
+
/* Keyboard focus indicator */
|
|
410
|
+
--accessibility-focus-visible: var(--primitive-color-himmelblau-500);
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* Dark mode semantic tokens */
|
|
414
|
+
[data-theme="dark"] {
|
|
415
|
+
/* Page background — dark */
|
|
416
|
+
--background-canvas: var(--primitive-color-neutral-900);
|
|
417
|
+
/* Card/surface — dark */
|
|
418
|
+
--background-surface: var(--primitive-color-neutral-800);
|
|
419
|
+
/* Muted background — dark */
|
|
420
|
+
--background-muted: var(--primitive-color-neutral-700);
|
|
421
|
+
/* Primary text — dark */
|
|
422
|
+
--text-primary: var(--primitive-color-neutral-50);
|
|
423
|
+
/* Secondary text — dark */
|
|
424
|
+
--text-secondary: var(--primitive-color-neutral-300);
|
|
425
|
+
/* Muted text — dark */
|
|
426
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
427
|
+
/* Text on light backgrounds — dark */
|
|
428
|
+
--text-inverse: var(--primitive-color-neutral-900);
|
|
429
|
+
/* Primary interactive — dark */
|
|
430
|
+
--interactive-primary: var(--primitive-color-himmelblau-400);
|
|
431
|
+
/* Primary hover — dark */
|
|
432
|
+
--interactive-primary-hover: var(--primitive-color-himmelblau-300);
|
|
433
|
+
/* Primary active — dark */
|
|
434
|
+
--interactive-primary-active: var(--primitive-color-himmelblau-200);
|
|
435
|
+
/* Default border — dark */
|
|
436
|
+
--border-default: var(--primitive-color-neutral-700);
|
|
437
|
+
/* Strong border — dark */
|
|
438
|
+
--border-strong: var(--primitive-color-neutral-500);
|
|
439
|
+
/* Error — WCAG-compliant red (dark) */
|
|
440
|
+
--status-error: #EF4444;
|
|
441
|
+
/* Success — WCAG-compliant green (dark) */
|
|
442
|
+
--status-success: #22C55E;
|
|
443
|
+
/* Warning — WCAG-compliant amber (dark) */
|
|
444
|
+
--status-warning: #EAB308;
|
|
445
|
+
/* Info — dark */
|
|
446
|
+
--status-info: var(--primitive-color-himmelblau-400);
|
|
447
|
+
/* Focus ring — dark */
|
|
448
|
+
--focus-ring: var(--primitive-color-himmelblau-400);
|
|
449
|
+
/* Keyboard focus — dark */
|
|
450
|
+
--accessibility-focus-visible: var(--primitive-color-himmelblau-400);
|
|
451
|
+
}
|