@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/nordic-modern/tailwind.css ADDED
@@ -0,0 +1,421 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme {
4
+ /* --- Colors --- */
5
+ /* Fjordblå 50 */
6
+ --color-fjordbl-50: #EAF7FF;
7
+ /* Fjordblå 100 */
8
+ --color-fjordbl-100: #C2D7E8;
9
+ /* Fjordblå 200 */
10
+ --color-fjordbl-200: #9CB8CE;
11
+ /* Fjordblå 300 */
12
+ --color-fjordbl-300: #769AB5;
13
+ /* Fjordblå 400 */
14
+ --color-fjordbl-400: #517C9C;
15
+ /* Fjordblå 500 */
16
+ --color-fjordbl-500: #2B5F83;
17
+ /* Fjordblå 600 */
18
+ --color-fjordbl-600: #184665;
19
+ /* Fjordblå 700 */
20
+ --color-fjordbl-700: #052F49;
21
+ /* Fjordblå 800 */
22
+ --color-fjordbl-800: #001A2F;
23
+ /* Fjordblå 900 */
24
+ --color-fjordbl-900: #000616;
25
+ /* Bjørkehvit (Birch White) 50 */
26
+ --color-bj-rkehvit-birch-white-50: #F6F5F4;
27
+ /* Bjørkehvit (Birch White) 100 */
28
+ --color-bj-rkehvit-birch-white-100: #F5F4F3;
29
+ /* Bjørkehvit (Birch White) 200 */
30
+ --color-bj-rkehvit-birch-white-200: #F5F4F2;
31
+ /* Bjørkehvit (Birch White) 300 */
32
+ --color-bj-rkehvit-birch-white-300: #F5F3F0;
33
+ /* Bjørkehvit (Birch White) 400 */
34
+ --color-bj-rkehvit-birch-white-400: #F5F3EF;
35
+ /* Bjørkehvit (Birch White) 500 */
36
+ --color-bj-rkehvit-birch-white-500: #F5F2EE;
37
+ /* Bjørkehvit (Birch White) 600 */
38
+ --color-bj-rkehvit-birch-white-600: #B0AEAB;
39
+ /* Bjørkehvit (Birch White) 700 */
40
+ --color-bj-rkehvit-birch-white-700: #716F6C;
41
+ /* Bjørkehvit (Birch White) 800 */
42
+ --color-bj-rkehvit-birch-white-800: #373533;
43
+ /* Bjørkehvit (Birch White) 900 */
44
+ --color-bj-rkehvit-birch-white-900: #060605;
45
+ /* Mosegrønn (Moss Green) 50 */
46
+ --color-mosegr-nn-moss-green-50: #EFF8F0;
47
+ /* Mosegrønn (Moss Green) 100 */
48
+ --color-mosegr-nn-moss-green-100: #D0DDD1;
49
+ /* Mosegrønn (Moss Green) 200 */
50
+ --color-mosegr-nn-moss-green-200: #B2C4B3;
51
+ /* Mosegrønn (Moss Green) 300 */
52
+ --color-mosegr-nn-moss-green-300: #95AB96;
53
+ /* Mosegrønn (Moss Green) 400 */
54
+ --color-mosegr-nn-moss-green-400: #789279;
55
+ /* Mosegrønn (Moss Green) 500 */
56
+ --color-mosegr-nn-moss-green-500: #5C7A5E;
57
+ /* Mosegrønn (Moss Green) 600 */
58
+ --color-mosegr-nn-moss-green-600: #415A43;
59
+ /* Mosegrønn (Moss Green) 700 */
60
+ --color-mosegr-nn-moss-green-700: #273D29;
61
+ /* Mosegrønn (Moss Green) 800 */
62
+ --color-mosegr-nn-moss-green-800: #0F2111;
63
+ /* Mosegrønn (Moss Green) 900 */
64
+ --color-mosegr-nn-moss-green-900: #000801;
65
+ /* Multebær (Cloudberry) 50 */
66
+ --color-multeb-r-cloudberry-50: #FFF1E1;
67
+ /* Multebær (Cloudberry) 100 */
68
+ --color-multeb-r-cloudberry-100: #F8DBC1;
69
+ /* Multebær (Cloudberry) 200 */
70
+ --color-multeb-r-cloudberry-200: #EBC4A1;
71
+ /* Multebær (Cloudberry) 300 */
72
+ --color-multeb-r-cloudberry-300: #DEAE81;
73
+ /* Multebær (Cloudberry) 400 */
74
+ --color-multeb-r-cloudberry-400: #D19760;
75
+ /* Multebær (Cloudberry) 500 */
76
+ --color-multeb-r-cloudberry-500: #C4813C;
77
+ /* Multebær (Cloudberry) 600 */
78
+ --color-multeb-r-cloudberry-600: #945B1B;
79
+ /* Multebær (Cloudberry) 700 */
80
+ --color-multeb-r-cloudberry-700: #673700;
81
+ /* Multebær (Cloudberry) 800 */
82
+ --color-multeb-r-cloudberry-800: #3D1600;
83
+ /* Multebær (Cloudberry) 900 */
84
+ --color-multeb-r-cloudberry-900: #160000;
85
+ /* Granitt (Granite) 50 */
86
+ --color-granitt-granite-50: #F4F5F6;
87
+ /* Granitt (Granite) 100 */
88
+ --color-granitt-granite-100: #DBDCDE;
89
+ /* Granitt (Granite) 200 */
90
+ --color-granitt-granite-200: #C1C3C6;
91
+ /* Granitt (Granite) 300 */
92
+ --color-granitt-granite-300: #A9ABAF;
93
+ /* Granitt (Granite) 400 */
94
+ --color-granitt-granite-400: #919498;
95
+ /* Granitt (Granite) 500 */
96
+ --color-granitt-granite-500: #7A7D82;
97
+ /* Granitt (Granite) 600 */
98
+ --color-granitt-granite-600: #595B60;
99
+ /* Granitt (Granite) 700 */
100
+ --color-granitt-granite-700: #3A3C3F;
101
+ /* Granitt (Granite) 800 */
102
+ --color-granitt-granite-800: #1D1F21;
103
+ /* Granitt (Granite) 900 */
104
+ --color-granitt-granite-900: #050607;
105
+ /* Nordlys (Northern Light) 50 */
106
+ --color-nordlys-northern-light-50: #E7F9F9;
107
+ /* Nordlys (Northern Light) 100 */
108
+ --color-nordlys-northern-light-100: #C3E0DF;
109
+ /* Nordlys (Northern Light) 200 */
110
+ --color-nordlys-northern-light-200: #9FC7C6;
111
+ /* Nordlys (Northern Light) 300 */
112
+ --color-nordlys-northern-light-300: #7BAEAD;
113
+ /* Nordlys (Northern Light) 400 */
114
+ --color-nordlys-northern-light-400: #579695;
115
+ /* Nordlys (Northern Light) 500 */
116
+ --color-nordlys-northern-light-500: #2E7E7E;
117
+ /* Nordlys (Northern Light) 600 */
118
+ --color-nordlys-northern-light-600: #135E5E;
119
+ /* Nordlys (Northern Light) 700 */
120
+ --color-nordlys-northern-light-700: #003F40;
121
+ /* Nordlys (Northern Light) 800 */
122
+ --color-nordlys-northern-light-800: #002324;
123
+ /* Nordlys (Northern Light) 900 */
124
+ --color-nordlys-northern-light-900: #000A0B;
125
+ /* Neutral 50 */
126
+ --color-neutral-50: #F3F9FF;
127
+ /* Neutral 100 */
128
+ --color-neutral-100: #E9EFF5;
129
+ /* Neutral 200 */
130
+ --color-neutral-200: #D8DFE4;
131
+ /* Neutral 300 */
132
+ --color-neutral-300: #BFC5CA;
133
+ /* Neutral 400 */
134
+ --color-neutral-400: #93999E;
135
+ /* Neutral 500 */
136
+ --color-neutral-500: #6A6F74;
137
+ /* Neutral 600 */
138
+ --color-neutral-600: #484E52;
139
+ /* Neutral 700 */
140
+ --color-neutral-700: #2E3438;
141
+ /* Neutral 800 */
142
+ --color-neutral-800: #171B1F;
143
+ /* Neutral 900 */
144
+ --color-neutral-900: #05080B;
145
+ /* Accent 50 */
146
+ --color-accent-50: #EDF4FF;
147
+ /* Accent 100 */
148
+ --color-accent-100: #C1CCF1;
149
+ /* Accent 200 */
150
+ --color-accent-200: #97A4D6;
151
+ /* Accent 300 */
152
+ --color-accent-300: #707EBB;
153
+ /* Accent 400 */
154
+ --color-accent-400: #4B589F;
155
+ /* Accent 500 */
156
+ --color-accent-500: #2A3283;
157
+ /* Accent 600 */
158
+ --color-accent-600: #1E236A;
159
+ /* Accent 700 */
160
+ --color-accent-700: #121551;
161
+ /* Accent 800 */
162
+ --color-accent-800: #08073A;
163
+ /* Accent 900 */
164
+ --color-accent-900: #030024;
165
+
166
+ /* --- Spacing (8px grid) --- */
167
+ /* Spacing 0 (0px) */
168
+ --spacing-0: 0px;
169
+ /* Spacing 1 (4px) */
170
+ --spacing-1: 4px;
171
+ /* Spacing 2 (8px) */
172
+ --spacing-2: 8px;
173
+ /* Spacing 3 (12px) */
174
+ --spacing-3: 12px;
175
+ /* Spacing 4 (16px) */
176
+ --spacing-4: 16px;
177
+ /* Spacing 5 (20px) */
178
+ --spacing-5: 20px;
179
+ /* Spacing 6 (24px) */
180
+ --spacing-6: 24px;
181
+ /* Spacing 8 (32px) */
182
+ --spacing-8: 32px;
183
+ /* Spacing 10 (40px) */
184
+ --spacing-10: 40px;
185
+ /* Spacing 12 (48px) */
186
+ --spacing-12: 48px;
187
+ /* Spacing 16 (64px) */
188
+ --spacing-16: 64px;
189
+ /* Spacing 20 (80px) */
190
+ --spacing-20: 80px;
191
+ /* Spacing 0.5 (2px) */
192
+ --spacing-0-5: 2px;
193
+ /* Spacing 1.5 (6px) */
194
+ --spacing-1-5: 6px;
195
+
196
+ /* --- Font Families --- */
197
+ /* Heading font family */
198
+ --font-heading: "Inter", "Futura", system-ui, sans-serif;
199
+ /* Body font family */
200
+ --font-body: "Inter", system-ui, sans-serif;
201
+ /* Monospace font family */
202
+ --font-mono: "JetBrains Mono", "Fira Code", monospace;
203
+
204
+ /* --- Font Sizes --- */
205
+ /* Font size xs */
206
+ --text-xs: 0.75rem;
207
+ /* Font size sm */
208
+ --text-sm: 0.875rem;
209
+ /* Font size base */
210
+ --text-base: 1rem;
211
+ /* Font size lg */
212
+ --text-lg: 1.125rem;
213
+ /* Font size xl */
214
+ --text-xl: 1.25rem;
215
+ /* Font size 2xl */
216
+ --text-2xl: 1.5rem;
217
+ /* Font size 3xl */
218
+ --text-3xl: 1.875rem;
219
+ /* Font size 4xl */
220
+ --text-4xl: 2.25rem;
221
+
222
+ /* --- Border Radius --- */
223
+ /* Border radius none */
224
+ --radius-none: 0px;
225
+ /* Border radius sm */
226
+ --radius-sm: 4px;
227
+ /* Border radius md */
228
+ --radius-md: 8px;
229
+ /* Border radius lg */
230
+ --radius-lg: 12px;
231
+ /* Border radius xl */
232
+ --radius-xl: 16px;
233
+ /* Border radius full */
234
+ --radius-full: 9999px;
235
+
236
+ }
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
+
260
+ /* Primitive aliases + light mode semantic tokens */
261
+ :root {
262
+ /* --primitive-color-* aliases → @theme --color-* (for semantic var() resolution) */
263
+ --primitive-color-fjordbl-50: var(--color-fjordbl-50);
264
+ --primitive-color-fjordbl-100: var(--color-fjordbl-100);
265
+ --primitive-color-fjordbl-200: var(--color-fjordbl-200);
266
+ --primitive-color-fjordbl-300: var(--color-fjordbl-300);
267
+ --primitive-color-fjordbl-400: var(--color-fjordbl-400);
268
+ --primitive-color-fjordbl-500: var(--color-fjordbl-500);
269
+ --primitive-color-fjordbl-600: var(--color-fjordbl-600);
270
+ --primitive-color-fjordbl-700: var(--color-fjordbl-700);
271
+ --primitive-color-fjordbl-800: var(--color-fjordbl-800);
272
+ --primitive-color-fjordbl-900: var(--color-fjordbl-900);
273
+ --primitive-color-bj-rkehvit-birch-white-50: var(--color-bj-rkehvit-birch-white-50);
274
+ --primitive-color-bj-rkehvit-birch-white-100: var(--color-bj-rkehvit-birch-white-100);
275
+ --primitive-color-bj-rkehvit-birch-white-200: var(--color-bj-rkehvit-birch-white-200);
276
+ --primitive-color-bj-rkehvit-birch-white-300: var(--color-bj-rkehvit-birch-white-300);
277
+ --primitive-color-bj-rkehvit-birch-white-400: var(--color-bj-rkehvit-birch-white-400);
278
+ --primitive-color-bj-rkehvit-birch-white-500: var(--color-bj-rkehvit-birch-white-500);
279
+ --primitive-color-bj-rkehvit-birch-white-600: var(--color-bj-rkehvit-birch-white-600);
280
+ --primitive-color-bj-rkehvit-birch-white-700: var(--color-bj-rkehvit-birch-white-700);
281
+ --primitive-color-bj-rkehvit-birch-white-800: var(--color-bj-rkehvit-birch-white-800);
282
+ --primitive-color-bj-rkehvit-birch-white-900: var(--color-bj-rkehvit-birch-white-900);
283
+ --primitive-color-mosegr-nn-moss-green-50: var(--color-mosegr-nn-moss-green-50);
284
+ --primitive-color-mosegr-nn-moss-green-100: var(--color-mosegr-nn-moss-green-100);
285
+ --primitive-color-mosegr-nn-moss-green-200: var(--color-mosegr-nn-moss-green-200);
286
+ --primitive-color-mosegr-nn-moss-green-300: var(--color-mosegr-nn-moss-green-300);
287
+ --primitive-color-mosegr-nn-moss-green-400: var(--color-mosegr-nn-moss-green-400);
288
+ --primitive-color-mosegr-nn-moss-green-500: var(--color-mosegr-nn-moss-green-500);
289
+ --primitive-color-mosegr-nn-moss-green-600: var(--color-mosegr-nn-moss-green-600);
290
+ --primitive-color-mosegr-nn-moss-green-700: var(--color-mosegr-nn-moss-green-700);
291
+ --primitive-color-mosegr-nn-moss-green-800: var(--color-mosegr-nn-moss-green-800);
292
+ --primitive-color-mosegr-nn-moss-green-900: var(--color-mosegr-nn-moss-green-900);
293
+ --primitive-color-multeb-r-cloudberry-50: var(--color-multeb-r-cloudberry-50);
294
+ --primitive-color-multeb-r-cloudberry-100: var(--color-multeb-r-cloudberry-100);
295
+ --primitive-color-multeb-r-cloudberry-200: var(--color-multeb-r-cloudberry-200);
296
+ --primitive-color-multeb-r-cloudberry-300: var(--color-multeb-r-cloudberry-300);
297
+ --primitive-color-multeb-r-cloudberry-400: var(--color-multeb-r-cloudberry-400);
298
+ --primitive-color-multeb-r-cloudberry-500: var(--color-multeb-r-cloudberry-500);
299
+ --primitive-color-multeb-r-cloudberry-600: var(--color-multeb-r-cloudberry-600);
300
+ --primitive-color-multeb-r-cloudberry-700: var(--color-multeb-r-cloudberry-700);
301
+ --primitive-color-multeb-r-cloudberry-800: var(--color-multeb-r-cloudberry-800);
302
+ --primitive-color-multeb-r-cloudberry-900: var(--color-multeb-r-cloudberry-900);
303
+ --primitive-color-granitt-granite-50: var(--color-granitt-granite-50);
304
+ --primitive-color-granitt-granite-100: var(--color-granitt-granite-100);
305
+ --primitive-color-granitt-granite-200: var(--color-granitt-granite-200);
306
+ --primitive-color-granitt-granite-300: var(--color-granitt-granite-300);
307
+ --primitive-color-granitt-granite-400: var(--color-granitt-granite-400);
308
+ --primitive-color-granitt-granite-500: var(--color-granitt-granite-500);
309
+ --primitive-color-granitt-granite-600: var(--color-granitt-granite-600);
310
+ --primitive-color-granitt-granite-700: var(--color-granitt-granite-700);
311
+ --primitive-color-granitt-granite-800: var(--color-granitt-granite-800);
312
+ --primitive-color-granitt-granite-900: var(--color-granitt-granite-900);
313
+ --primitive-color-nordlys-northern-light-50: var(--color-nordlys-northern-light-50);
314
+ --primitive-color-nordlys-northern-light-100: var(--color-nordlys-northern-light-100);
315
+ --primitive-color-nordlys-northern-light-200: var(--color-nordlys-northern-light-200);
316
+ --primitive-color-nordlys-northern-light-300: var(--color-nordlys-northern-light-300);
317
+ --primitive-color-nordlys-northern-light-400: var(--color-nordlys-northern-light-400);
318
+ --primitive-color-nordlys-northern-light-500: var(--color-nordlys-northern-light-500);
319
+ --primitive-color-nordlys-northern-light-600: var(--color-nordlys-northern-light-600);
320
+ --primitive-color-nordlys-northern-light-700: var(--color-nordlys-northern-light-700);
321
+ --primitive-color-nordlys-northern-light-800: var(--color-nordlys-northern-light-800);
322
+ --primitive-color-nordlys-northern-light-900: var(--color-nordlys-northern-light-900);
323
+ --primitive-color-neutral-50: var(--color-neutral-50);
324
+ --primitive-color-neutral-100: var(--color-neutral-100);
325
+ --primitive-color-neutral-200: var(--color-neutral-200);
326
+ --primitive-color-neutral-300: var(--color-neutral-300);
327
+ --primitive-color-neutral-400: var(--color-neutral-400);
328
+ --primitive-color-neutral-500: var(--color-neutral-500);
329
+ --primitive-color-neutral-600: var(--color-neutral-600);
330
+ --primitive-color-neutral-700: var(--color-neutral-700);
331
+ --primitive-color-neutral-800: var(--color-neutral-800);
332
+ --primitive-color-neutral-900: var(--color-neutral-900);
333
+ --primitive-color-accent-50: var(--color-accent-50);
334
+ --primitive-color-accent-100: var(--color-accent-100);
335
+ --primitive-color-accent-200: var(--color-accent-200);
336
+ --primitive-color-accent-300: var(--color-accent-300);
337
+ --primitive-color-accent-400: var(--color-accent-400);
338
+ --primitive-color-accent-500: var(--color-accent-500);
339
+ --primitive-color-accent-600: var(--color-accent-600);
340
+ --primitive-color-accent-700: var(--color-accent-700);
341
+ --primitive-color-accent-800: var(--color-accent-800);
342
+ --primitive-color-accent-900: var(--color-accent-900);
343
+
344
+ /* Semantic tokens */
345
+ /* Page background */
346
+ --background-canvas: var(--primitive-color-neutral-50);
347
+ /* Card/surface background */
348
+ --background-surface: #FFFFFF;
349
+ /* Muted background */
350
+ --background-muted: var(--primitive-color-neutral-100);
351
+ /* Primary text */
352
+ --text-primary: var(--primitive-color-neutral-900);
353
+ /* Secondary text */
354
+ --text-secondary: var(--primitive-color-neutral-600);
355
+ /* Muted/disabled text */
356
+ --text-muted: var(--primitive-color-neutral-500);
357
+ /* Text on dark backgrounds */
358
+ --text-inverse: var(--primitive-color-neutral-50);
359
+ /* Primary interactive (buttons, links) */
360
+ --interactive-primary: var(--primitive-color-fjordbl-500);
361
+ /* Primary interactive hover */
362
+ --interactive-primary-hover: var(--primitive-color-fjordbl-600);
363
+ /* Primary interactive active */
364
+ --interactive-primary-active: var(--primitive-color-fjordbl-700);
365
+ /* Default border */
366
+ --border-default: var(--primitive-color-neutral-200);
367
+ /* Strong border */
368
+ --border-strong: var(--primitive-color-neutral-400);
369
+ /* Error — WCAG-compliant red */
370
+ --status-error: #DC2626;
371
+ /* Success — WCAG-compliant green */
372
+ --status-success: #16A34A;
373
+ /* Warning — WCAG AA amber (4.5:1+ on white) */
374
+ --status-warning: #A16207;
375
+ /* Info status */
376
+ --status-info: var(--primitive-color-fjordbl-500);
377
+ /* Focus ring color */
378
+ --focus-ring: var(--primitive-color-fjordbl-500);
379
+ /* Keyboard focus indicator */
380
+ --accessibility-focus-visible: var(--primitive-color-fjordbl-500);
381
+ }
382
+
383
+ /* Dark mode semantic tokens */
384
+ [data-theme="dark"] {
385
+ /* Page background — dark */
386
+ --background-canvas: var(--primitive-color-neutral-900);
387
+ /* Card/surface — dark */
388
+ --background-surface: var(--primitive-color-neutral-800);
389
+ /* Muted background — dark */
390
+ --background-muted: var(--primitive-color-neutral-700);
391
+ /* Primary text — dark */
392
+ --text-primary: var(--primitive-color-neutral-50);
393
+ /* Secondary text — dark */
394
+ --text-secondary: var(--primitive-color-neutral-300);
395
+ /* Muted text — dark */
396
+ --text-muted: var(--primitive-color-neutral-500);
397
+ /* Text on light backgrounds — dark */
398
+ --text-inverse: var(--primitive-color-neutral-900);
399
+ /* Primary interactive — dark */
400
+ --interactive-primary: var(--primitive-color-fjordbl-400);
401
+ /* Primary hover — dark */
402
+ --interactive-primary-hover: var(--primitive-color-fjordbl-300);
403
+ /* Primary active — dark */
404
+ --interactive-primary-active: var(--primitive-color-fjordbl-200);
405
+ /* Default border — dark */
406
+ --border-default: var(--primitive-color-neutral-700);
407
+ /* Strong border — dark */
408
+ --border-strong: var(--primitive-color-neutral-500);
409
+ /* Error — WCAG-compliant red (dark) */
410
+ --status-error: #EF4444;
411
+ /* Success — WCAG-compliant green (dark) */
412
+ --status-success: #22C55E;
413
+ /* Warning — WCAG-compliant amber (dark) */
414
+ --status-warning: #EAB308;
415
+ /* Info — dark */
416
+ --status-info: var(--primitive-color-fjordbl-400);
417
+ /* Focus ring — dark */
418
+ --focus-ring: var(--primitive-color-fjordbl-400);
419
+ /* Keyboard focus — dark */
420
+ --accessibility-focus-visible: var(--primitive-color-fjordbl-400);
421
+ }