@syncupsuite/themes 0.1.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/LICENSE +21 -0
- package/dist/index.cjs +3364 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +7 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +3336 -0
- package/dist/index.js.map +1 -0
- package/package.json +62 -0
- package/src/nihon-traditional/meta.json +62 -0
- package/src/nihon-traditional/tailwind.css +336 -0
- package/src/nihon-traditional/tokens.css +345 -0
- package/src/nihon-traditional/tokens.json +960 -0
- package/src/swiss-international/meta.json +56 -0
- package/src/swiss-international/tailwind.css +316 -0
- package/src/swiss-international/tokens.css +325 -0
- package/src/swiss-international/tokens.json +900 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,3336 @@
|
|
|
1
|
+
// src/nihon-traditional/tokens.json
|
|
2
|
+
var tokens_default = {
|
|
3
|
+
$name: "nihon-no-iro-traditional",
|
|
4
|
+
$description: "Nihon no Dentou Iro (\u65E5\u672C\u306E\u4F1D\u7D71\u8272) \u2014 colors drawn from nature, seasons, and centuries of Japanese aesthetic refinement",
|
|
5
|
+
$extensions: {
|
|
6
|
+
"syncupsuite.foundation": {
|
|
7
|
+
story: "Japan's traditional color vocabulary spans over 1,000 named hues, each tied to a natural phenomenon, season, or material. These colors emerged through centuries of textile dyeing, ceramics, and woodblock printing. The palette embodies wabi-sabi \u2014 finding beauty in imperfection, impermanence, and depth.",
|
|
8
|
+
philosophy: "Wabi-sabi (\u4F98\u5BC2) \u2014 beauty in imperfection, asymmetry, and natural aging",
|
|
9
|
+
era: "Heian period (794\u20131185) through Edo period (1603\u20131868)",
|
|
10
|
+
harmonyMode: "golden-ratio",
|
|
11
|
+
radiusTendency: "subtle",
|
|
12
|
+
typographyCategory: "humanist-serif"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
primitive: {
|
|
16
|
+
color: {
|
|
17
|
+
hanada: {
|
|
18
|
+
"50": {
|
|
19
|
+
$type: "color",
|
|
20
|
+
$value: "#F1F2F4",
|
|
21
|
+
$description: "Hanada (\u7E39) 50"
|
|
22
|
+
},
|
|
23
|
+
"100": {
|
|
24
|
+
$type: "color",
|
|
25
|
+
$value: "#E2E5E9",
|
|
26
|
+
$description: "Hanada (\u7E39) 100"
|
|
27
|
+
},
|
|
28
|
+
"200": {
|
|
29
|
+
$type: "color",
|
|
30
|
+
$value: "#B7CBE1",
|
|
31
|
+
$description: "Hanada (\u7E39) 200"
|
|
32
|
+
},
|
|
33
|
+
"300": {
|
|
34
|
+
$type: "color",
|
|
35
|
+
$value: "#93B0D2",
|
|
36
|
+
$description: "Hanada (\u7E39) 300"
|
|
37
|
+
},
|
|
38
|
+
"400": {
|
|
39
|
+
$type: "color",
|
|
40
|
+
$value: "#6F96C3",
|
|
41
|
+
$description: "Hanada (\u7E39) 400"
|
|
42
|
+
},
|
|
43
|
+
"500": {
|
|
44
|
+
$type: "color",
|
|
45
|
+
$value: "#2D4A6C",
|
|
46
|
+
$description: "Hanada (\u7E39) 500",
|
|
47
|
+
$extensions: {
|
|
48
|
+
"syncupsuite.provenance": {
|
|
49
|
+
name: "Hanada (\u7E39)",
|
|
50
|
+
tradition: "Japanese indigo dyeing (ai-zome). One of the oldest dye traditions in Japan, using Persicaria tinctoria leaves.",
|
|
51
|
+
source: "The Colors of Japan (Nihon no Iro), Kyoto Traditional Arts Foundation",
|
|
52
|
+
isSeed: true
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"600": {
|
|
57
|
+
$type: "color",
|
|
58
|
+
$value: "#21374F",
|
|
59
|
+
$description: "Hanada (\u7E39) 600"
|
|
60
|
+
},
|
|
61
|
+
"700": {
|
|
62
|
+
$type: "color",
|
|
63
|
+
$value: "#171E26",
|
|
64
|
+
$description: "Hanada (\u7E39) 700"
|
|
65
|
+
},
|
|
66
|
+
"800": {
|
|
67
|
+
$type: "color",
|
|
68
|
+
$value: "#0D1216",
|
|
69
|
+
$description: "Hanada (\u7E39) 800"
|
|
70
|
+
},
|
|
71
|
+
"900": {
|
|
72
|
+
$type: "color",
|
|
73
|
+
$value: "#080A0D",
|
|
74
|
+
$description: "Hanada (\u7E39) 900"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"sakura-nezumi": {
|
|
78
|
+
"50": {
|
|
79
|
+
$type: "color",
|
|
80
|
+
$value: "#F3F2F2",
|
|
81
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 50"
|
|
82
|
+
},
|
|
83
|
+
"100": {
|
|
84
|
+
$type: "color",
|
|
85
|
+
$value: "#E7E5E4",
|
|
86
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 100"
|
|
87
|
+
},
|
|
88
|
+
"200": {
|
|
89
|
+
$type: "color",
|
|
90
|
+
$value: "#D2C8C6",
|
|
91
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 200"
|
|
92
|
+
},
|
|
93
|
+
"300": {
|
|
94
|
+
$type: "color",
|
|
95
|
+
$value: "#BCADA9",
|
|
96
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 300"
|
|
97
|
+
},
|
|
98
|
+
"400": {
|
|
99
|
+
$type: "color",
|
|
100
|
+
$value: "#A5918D",
|
|
101
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 400"
|
|
102
|
+
},
|
|
103
|
+
"500": {
|
|
104
|
+
$type: "color",
|
|
105
|
+
$value: "#B5A4A1",
|
|
106
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 500",
|
|
107
|
+
$extensions: {
|
|
108
|
+
"syncupsuite.provenance": {
|
|
109
|
+
name: "Sakura-nezumi (\u685C\u9F20)",
|
|
110
|
+
tradition: "A muted cherry-blossom grey, popular in Edo-period kimono textiles. Captures the fleeting quality of sakura.",
|
|
111
|
+
source: "Nihon no Dentou Iro (\u65E5\u672C\u306E\u4F1D\u7D71\u8272\u8F9E\u5178)",
|
|
112
|
+
isSeed: true
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
"600": {
|
|
117
|
+
$type: "color",
|
|
118
|
+
$value: "#A38F8A",
|
|
119
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 600"
|
|
120
|
+
},
|
|
121
|
+
"700": {
|
|
122
|
+
$type: "color",
|
|
123
|
+
$value: "#8C736E",
|
|
124
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 700"
|
|
125
|
+
},
|
|
126
|
+
"800": {
|
|
127
|
+
$type: "color",
|
|
128
|
+
$value: "#6F5C58",
|
|
129
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 800"
|
|
130
|
+
},
|
|
131
|
+
"900": {
|
|
132
|
+
$type: "color",
|
|
133
|
+
$value: "#534441",
|
|
134
|
+
$description: "Sakura-nezumi (\u685C\u9F20) 900"
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
"wasurenagusa-iro": {
|
|
138
|
+
"50": {
|
|
139
|
+
$type: "color",
|
|
140
|
+
$value: "#F1F3F4",
|
|
141
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 50"
|
|
142
|
+
},
|
|
143
|
+
"100": {
|
|
144
|
+
$type: "color",
|
|
145
|
+
$value: "#E2E6E9",
|
|
146
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 100"
|
|
147
|
+
},
|
|
148
|
+
"200": {
|
|
149
|
+
$type: "color",
|
|
150
|
+
$value: "#B6D0E2",
|
|
151
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 200"
|
|
152
|
+
},
|
|
153
|
+
"300": {
|
|
154
|
+
$type: "color",
|
|
155
|
+
$value: "#91B8D4",
|
|
156
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 300"
|
|
157
|
+
},
|
|
158
|
+
"400": {
|
|
159
|
+
$type: "color",
|
|
160
|
+
$value: "#6CA0C6",
|
|
161
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 400"
|
|
162
|
+
},
|
|
163
|
+
"500": {
|
|
164
|
+
$type: "color",
|
|
165
|
+
$value: "#7BAACC",
|
|
166
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 500",
|
|
167
|
+
$extensions: {
|
|
168
|
+
"syncupsuite.provenance": {
|
|
169
|
+
name: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272)",
|
|
170
|
+
tradition: "Forget-me-not blue. A contemplative tone from Meiji-era poetry and botanical illustration.",
|
|
171
|
+
source: "Dictionary of Traditional Japanese Colors",
|
|
172
|
+
isSeed: true
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
"600": {
|
|
177
|
+
$type: "color",
|
|
178
|
+
$value: "#5D97C0",
|
|
179
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 600"
|
|
180
|
+
},
|
|
181
|
+
"700": {
|
|
182
|
+
$type: "color",
|
|
183
|
+
$value: "#427EA9",
|
|
184
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 700"
|
|
185
|
+
},
|
|
186
|
+
"800": {
|
|
187
|
+
$type: "color",
|
|
188
|
+
$value: "#336384",
|
|
189
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 800"
|
|
190
|
+
},
|
|
191
|
+
"900": {
|
|
192
|
+
$type: "color",
|
|
193
|
+
$value: "#25475F",
|
|
194
|
+
$description: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 900"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
"kitsune-iro": {
|
|
198
|
+
"50": {
|
|
199
|
+
$type: "color",
|
|
200
|
+
$value: "#F4F3F1",
|
|
201
|
+
$description: "Kitsune-iro (\u72D0\u8272) 50"
|
|
202
|
+
},
|
|
203
|
+
"100": {
|
|
204
|
+
$type: "color",
|
|
205
|
+
$value: "#E9E7E2",
|
|
206
|
+
$description: "Kitsune-iro (\u72D0\u8272) 100"
|
|
207
|
+
},
|
|
208
|
+
"200": {
|
|
209
|
+
$type: "color",
|
|
210
|
+
$value: "#E2D4B6",
|
|
211
|
+
$description: "Kitsune-iro (\u72D0\u8272) 200"
|
|
212
|
+
},
|
|
213
|
+
"300": {
|
|
214
|
+
$type: "color",
|
|
215
|
+
$value: "#D4BF91",
|
|
216
|
+
$description: "Kitsune-iro (\u72D0\u8272) 300"
|
|
217
|
+
},
|
|
218
|
+
"400": {
|
|
219
|
+
$type: "color",
|
|
220
|
+
$value: "#C6A96C",
|
|
221
|
+
$description: "Kitsune-iro (\u72D0\u8272) 400"
|
|
222
|
+
},
|
|
223
|
+
"500": {
|
|
224
|
+
$type: "color",
|
|
225
|
+
$value: "#C6A96C",
|
|
226
|
+
$description: "Kitsune-iro (\u72D0\u8272) 500",
|
|
227
|
+
$extensions: {
|
|
228
|
+
"syncupsuite.provenance": {
|
|
229
|
+
name: "Kitsune-iro (\u72D0\u8272)",
|
|
230
|
+
tradition: "Fox color \u2014 the warm golden-brown of toasted rice and autumn fields. Used in lacquerware and ceramic glazes.",
|
|
231
|
+
source: "Nihon no Dentou Iro",
|
|
232
|
+
isSeed: true
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
"600": {
|
|
237
|
+
$type: "color",
|
|
238
|
+
$value: "#BA984F",
|
|
239
|
+
$description: "Kitsune-iro (\u72D0\u8272) 600"
|
|
240
|
+
},
|
|
241
|
+
"700": {
|
|
242
|
+
$type: "color",
|
|
243
|
+
$value: "#9A7C3C",
|
|
244
|
+
$description: "Kitsune-iro (\u72D0\u8272) 700"
|
|
245
|
+
},
|
|
246
|
+
"800": {
|
|
247
|
+
$type: "color",
|
|
248
|
+
$value: "#765F2E",
|
|
249
|
+
$description: "Kitsune-iro (\u72D0\u8272) 800"
|
|
250
|
+
},
|
|
251
|
+
"900": {
|
|
252
|
+
$type: "color",
|
|
253
|
+
$value: "#51411F",
|
|
254
|
+
$description: "Kitsune-iro (\u72D0\u8272) 900"
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
enji: {
|
|
258
|
+
"50": {
|
|
259
|
+
$type: "color",
|
|
260
|
+
$value: "#F4F0F1",
|
|
261
|
+
$description: "Enji (\u81D9\u8102) 50"
|
|
262
|
+
},
|
|
263
|
+
"100": {
|
|
264
|
+
$type: "color",
|
|
265
|
+
$value: "#E9E2E3",
|
|
266
|
+
$description: "Enji (\u81D9\u8102) 100"
|
|
267
|
+
},
|
|
268
|
+
"200": {
|
|
269
|
+
$type: "color",
|
|
270
|
+
$value: "#E3B5BA",
|
|
271
|
+
$description: "Enji (\u81D9\u8102) 200"
|
|
272
|
+
},
|
|
273
|
+
"300": {
|
|
274
|
+
$type: "color",
|
|
275
|
+
$value: "#D59098",
|
|
276
|
+
$description: "Enji (\u81D9\u8102) 300"
|
|
277
|
+
},
|
|
278
|
+
"400": {
|
|
279
|
+
$type: "color",
|
|
280
|
+
$value: "#C76B76",
|
|
281
|
+
$description: "Enji (\u81D9\u8102) 400"
|
|
282
|
+
},
|
|
283
|
+
"500": {
|
|
284
|
+
$type: "color",
|
|
285
|
+
$value: "#9B3B46",
|
|
286
|
+
$description: "Enji (\u81D9\u8102) 500",
|
|
287
|
+
$extensions: {
|
|
288
|
+
"syncupsuite.provenance": {
|
|
289
|
+
name: "Enji (\u81D9\u8102)",
|
|
290
|
+
tradition: "Cochineal-derived crimson, introduced via Chinese trade. Prized in formal court garments and temple textiles.",
|
|
291
|
+
source: "Colors in Japanese Art, PIE International",
|
|
292
|
+
isSeed: true
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
"600": {
|
|
297
|
+
$type: "color",
|
|
298
|
+
$value: "#7E3039",
|
|
299
|
+
$description: "Enji (\u81D9\u8102) 600"
|
|
300
|
+
},
|
|
301
|
+
"700": {
|
|
302
|
+
$type: "color",
|
|
303
|
+
$value: "#592228",
|
|
304
|
+
$description: "Enji (\u81D9\u8102) 700"
|
|
305
|
+
},
|
|
306
|
+
"800": {
|
|
307
|
+
$type: "color",
|
|
308
|
+
$value: "#2D1A1C",
|
|
309
|
+
$description: "Enji (\u81D9\u8102) 800"
|
|
310
|
+
},
|
|
311
|
+
"900": {
|
|
312
|
+
$type: "color",
|
|
313
|
+
$value: "#0D0708",
|
|
314
|
+
$description: "Enji (\u81D9\u8102) 900"
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
"rikyuu-nezumi": {
|
|
318
|
+
"50": {
|
|
319
|
+
$type: "color",
|
|
320
|
+
$value: "#F2F2F2",
|
|
321
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 50"
|
|
322
|
+
},
|
|
323
|
+
"100": {
|
|
324
|
+
$type: "color",
|
|
325
|
+
$value: "#E6E6E5",
|
|
326
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 100"
|
|
327
|
+
},
|
|
328
|
+
"200": {
|
|
329
|
+
$type: "color",
|
|
330
|
+
$value: "#CDCECA",
|
|
331
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 200"
|
|
332
|
+
},
|
|
333
|
+
"300": {
|
|
334
|
+
$type: "color",
|
|
335
|
+
$value: "#B4B6AF",
|
|
336
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 300"
|
|
337
|
+
},
|
|
338
|
+
"400": {
|
|
339
|
+
$type: "color",
|
|
340
|
+
$value: "#9A9D95",
|
|
341
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 400"
|
|
342
|
+
},
|
|
343
|
+
"500": {
|
|
344
|
+
$type: "color",
|
|
345
|
+
$value: "#797D73",
|
|
346
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 500",
|
|
347
|
+
$extensions: {
|
|
348
|
+
"syncupsuite.provenance": {
|
|
349
|
+
name: "Rikyuu-nezumi (\u5229\u4F11\u9F20)",
|
|
350
|
+
tradition: "Named after tea master Sen no Rikyuu. A green-tinted grey embodying tea ceremony restraint.",
|
|
351
|
+
source: "The Book of Tea Colors",
|
|
352
|
+
isSeed: true
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
"600": {
|
|
357
|
+
$type: "color",
|
|
358
|
+
$value: "#65675F",
|
|
359
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 600"
|
|
360
|
+
},
|
|
361
|
+
"700": {
|
|
362
|
+
$type: "color",
|
|
363
|
+
$value: "#4B4D47",
|
|
364
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 700"
|
|
365
|
+
},
|
|
366
|
+
"800": {
|
|
367
|
+
$type: "color",
|
|
368
|
+
$value: "#31322F",
|
|
369
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 800"
|
|
370
|
+
},
|
|
371
|
+
"900": {
|
|
372
|
+
$type: "color",
|
|
373
|
+
$value: "#171716",
|
|
374
|
+
$description: "Rikyuu-nezumi (\u5229\u4F11\u9F20) 900"
|
|
375
|
+
}
|
|
376
|
+
},
|
|
377
|
+
shironeri: {
|
|
378
|
+
"50": {
|
|
379
|
+
$type: "color",
|
|
380
|
+
$value: "#F4F3F0",
|
|
381
|
+
$description: "Shironeri (\u767D\u7DF4) 50"
|
|
382
|
+
},
|
|
383
|
+
"100": {
|
|
384
|
+
$type: "color",
|
|
385
|
+
$value: "#E9E7E2",
|
|
386
|
+
$description: "Shironeri (\u767D\u7DF4) 100"
|
|
387
|
+
},
|
|
388
|
+
"200": {
|
|
389
|
+
$type: "color",
|
|
390
|
+
$value: "#E5D6B3",
|
|
391
|
+
$description: "Shironeri (\u767D\u7DF4) 200"
|
|
392
|
+
},
|
|
393
|
+
"300": {
|
|
394
|
+
$type: "color",
|
|
395
|
+
$value: "#D8C18D",
|
|
396
|
+
$description: "Shironeri (\u767D\u7DF4) 300"
|
|
397
|
+
},
|
|
398
|
+
"400": {
|
|
399
|
+
$type: "color",
|
|
400
|
+
$value: "#CBAD67",
|
|
401
|
+
$description: "Shironeri (\u767D\u7DF4) 400"
|
|
402
|
+
},
|
|
403
|
+
"500": {
|
|
404
|
+
$type: "color",
|
|
405
|
+
$value: "#EBE9E5",
|
|
406
|
+
$description: "Shironeri (\u767D\u7DF4) 500",
|
|
407
|
+
$extensions: {
|
|
408
|
+
"syncupsuite.provenance": {
|
|
409
|
+
name: "Shironeri (\u767D\u7DF4)",
|
|
410
|
+
tradition: "Refined white \u2014 the color of raw silk after degumming. Not pure white, but warm and alive.",
|
|
411
|
+
source: "Nihon no Dentou Iro",
|
|
412
|
+
isSeed: true
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
},
|
|
416
|
+
"600": {
|
|
417
|
+
$type: "color",
|
|
418
|
+
$value: "#E9DCBE",
|
|
419
|
+
$description: "Shironeri (\u767D\u7DF4) 600"
|
|
420
|
+
},
|
|
421
|
+
"700": {
|
|
422
|
+
$type: "color",
|
|
423
|
+
$value: "#DCC898",
|
|
424
|
+
$description: "Shironeri (\u767D\u7DF4) 700"
|
|
425
|
+
},
|
|
426
|
+
"800": {
|
|
427
|
+
$type: "color",
|
|
428
|
+
$value: "#CFB372",
|
|
429
|
+
$description: "Shironeri (\u767D\u7DF4) 800"
|
|
430
|
+
},
|
|
431
|
+
"900": {
|
|
432
|
+
$type: "color",
|
|
433
|
+
$value: "#C29F4C",
|
|
434
|
+
$description: "Shironeri (\u767D\u7DF4) 900"
|
|
435
|
+
}
|
|
436
|
+
},
|
|
437
|
+
neutral: {
|
|
438
|
+
"50": {
|
|
439
|
+
$type: "color",
|
|
440
|
+
$value: "#F7F7F8",
|
|
441
|
+
$description: "Neutral 50"
|
|
442
|
+
},
|
|
443
|
+
"100": {
|
|
444
|
+
$type: "color",
|
|
445
|
+
$value: "#EFF0F0",
|
|
446
|
+
$description: "Neutral 100"
|
|
447
|
+
},
|
|
448
|
+
"200": {
|
|
449
|
+
$type: "color",
|
|
450
|
+
$value: "#DFE0E2",
|
|
451
|
+
$description: "Neutral 200"
|
|
452
|
+
},
|
|
453
|
+
"300": {
|
|
454
|
+
$type: "color",
|
|
455
|
+
$value: "#C5C7C9",
|
|
456
|
+
$description: "Neutral 300"
|
|
457
|
+
},
|
|
458
|
+
"400": {
|
|
459
|
+
$type: "color",
|
|
460
|
+
$value: "#9A9EA2",
|
|
461
|
+
$description: "Neutral 400"
|
|
462
|
+
},
|
|
463
|
+
"500": {
|
|
464
|
+
$type: "color",
|
|
465
|
+
$value: "#71757A",
|
|
466
|
+
$description: "Neutral 500"
|
|
467
|
+
},
|
|
468
|
+
"600": {
|
|
469
|
+
$type: "color",
|
|
470
|
+
$value: "#585C5F",
|
|
471
|
+
$description: "Neutral 600"
|
|
472
|
+
},
|
|
473
|
+
"700": {
|
|
474
|
+
$type: "color",
|
|
475
|
+
$value: "#404245",
|
|
476
|
+
$description: "Neutral 700"
|
|
477
|
+
},
|
|
478
|
+
"800": {
|
|
479
|
+
$type: "color",
|
|
480
|
+
$value: "#27292A",
|
|
481
|
+
$description: "Neutral 800"
|
|
482
|
+
},
|
|
483
|
+
"900": {
|
|
484
|
+
$type: "color",
|
|
485
|
+
$value: "#141415",
|
|
486
|
+
$description: "Neutral 900"
|
|
487
|
+
}
|
|
488
|
+
},
|
|
489
|
+
accent: {
|
|
490
|
+
"50": {
|
|
491
|
+
$type: "color",
|
|
492
|
+
$value: "#F3F4F1",
|
|
493
|
+
$description: "Accent 50"
|
|
494
|
+
},
|
|
495
|
+
"100": {
|
|
496
|
+
$type: "color",
|
|
497
|
+
$value: "#E7E9E2",
|
|
498
|
+
$description: "Accent 100"
|
|
499
|
+
},
|
|
500
|
+
"200": {
|
|
501
|
+
$type: "color",
|
|
502
|
+
$value: "#D7E1B7",
|
|
503
|
+
$description: "Accent 200"
|
|
504
|
+
},
|
|
505
|
+
"300": {
|
|
506
|
+
$type: "color",
|
|
507
|
+
$value: "#C3D293",
|
|
508
|
+
$description: "Accent 300"
|
|
509
|
+
},
|
|
510
|
+
"400": {
|
|
511
|
+
$type: "color",
|
|
512
|
+
$value: "#AFC36F",
|
|
513
|
+
$description: "Accent 400"
|
|
514
|
+
},
|
|
515
|
+
"500": {
|
|
516
|
+
$type: "color",
|
|
517
|
+
$value: "#5D6C2D",
|
|
518
|
+
$description: "Accent 500"
|
|
519
|
+
},
|
|
520
|
+
"600": {
|
|
521
|
+
$type: "color",
|
|
522
|
+
$value: "#444F21",
|
|
523
|
+
$description: "Accent 600"
|
|
524
|
+
},
|
|
525
|
+
"700": {
|
|
526
|
+
$type: "color",
|
|
527
|
+
$value: "#232617",
|
|
528
|
+
$description: "Accent 700"
|
|
529
|
+
},
|
|
530
|
+
"800": {
|
|
531
|
+
$type: "color",
|
|
532
|
+
$value: "#14160D",
|
|
533
|
+
$description: "Accent 800"
|
|
534
|
+
},
|
|
535
|
+
"900": {
|
|
536
|
+
$type: "color",
|
|
537
|
+
$value: "#0C0D08",
|
|
538
|
+
$description: "Accent 900"
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
},
|
|
542
|
+
typography: {
|
|
543
|
+
family: {
|
|
544
|
+
heading: {
|
|
545
|
+
$type: "fontFamily",
|
|
546
|
+
$value: '"Noto Serif JP", "Noto Serif", Georgia, serif',
|
|
547
|
+
$description: "Heading font family"
|
|
548
|
+
},
|
|
549
|
+
body: {
|
|
550
|
+
$type: "fontFamily",
|
|
551
|
+
$value: '"Noto Serif JP", "Noto Serif", Georgia, serif',
|
|
552
|
+
$description: "Body font family"
|
|
553
|
+
},
|
|
554
|
+
mono: {
|
|
555
|
+
$type: "fontFamily",
|
|
556
|
+
$value: '"JetBrains Mono", "Fira Code", monospace',
|
|
557
|
+
$description: "Monospace font family"
|
|
558
|
+
}
|
|
559
|
+
},
|
|
560
|
+
size: {
|
|
561
|
+
xs: {
|
|
562
|
+
$type: "dimension",
|
|
563
|
+
$value: "0.75rem",
|
|
564
|
+
$description: "Font size xs"
|
|
565
|
+
},
|
|
566
|
+
sm: {
|
|
567
|
+
$type: "dimension",
|
|
568
|
+
$value: "0.875rem",
|
|
569
|
+
$description: "Font size sm"
|
|
570
|
+
},
|
|
571
|
+
base: {
|
|
572
|
+
$type: "dimension",
|
|
573
|
+
$value: "1rem",
|
|
574
|
+
$description: "Font size base"
|
|
575
|
+
},
|
|
576
|
+
lg: {
|
|
577
|
+
$type: "dimension",
|
|
578
|
+
$value: "1.125rem",
|
|
579
|
+
$description: "Font size lg"
|
|
580
|
+
},
|
|
581
|
+
xl: {
|
|
582
|
+
$type: "dimension",
|
|
583
|
+
$value: "1.25rem",
|
|
584
|
+
$description: "Font size xl"
|
|
585
|
+
},
|
|
586
|
+
"2xl": {
|
|
587
|
+
$type: "dimension",
|
|
588
|
+
$value: "1.5rem",
|
|
589
|
+
$description: "Font size 2xl"
|
|
590
|
+
},
|
|
591
|
+
"3xl": {
|
|
592
|
+
$type: "dimension",
|
|
593
|
+
$value: "1.875rem",
|
|
594
|
+
$description: "Font size 3xl"
|
|
595
|
+
},
|
|
596
|
+
"4xl": {
|
|
597
|
+
$type: "dimension",
|
|
598
|
+
$value: "2.25rem",
|
|
599
|
+
$description: "Font size 4xl"
|
|
600
|
+
}
|
|
601
|
+
},
|
|
602
|
+
weight: {
|
|
603
|
+
normal: {
|
|
604
|
+
$type: "fontWeight",
|
|
605
|
+
$value: "400",
|
|
606
|
+
$description: "Font weight normal"
|
|
607
|
+
},
|
|
608
|
+
medium: {
|
|
609
|
+
$type: "fontWeight",
|
|
610
|
+
$value: "500",
|
|
611
|
+
$description: "Font weight medium"
|
|
612
|
+
},
|
|
613
|
+
semibold: {
|
|
614
|
+
$type: "fontWeight",
|
|
615
|
+
$value: "600",
|
|
616
|
+
$description: "Font weight semibold"
|
|
617
|
+
},
|
|
618
|
+
bold: {
|
|
619
|
+
$type: "fontWeight",
|
|
620
|
+
$value: "700",
|
|
621
|
+
$description: "Font weight bold"
|
|
622
|
+
}
|
|
623
|
+
},
|
|
624
|
+
lineHeight: {
|
|
625
|
+
tight: {
|
|
626
|
+
$type: "number",
|
|
627
|
+
$value: "1.25",
|
|
628
|
+
$description: "Line height tight"
|
|
629
|
+
},
|
|
630
|
+
normal: {
|
|
631
|
+
$type: "number",
|
|
632
|
+
$value: "1.5",
|
|
633
|
+
$description: "Line height normal"
|
|
634
|
+
},
|
|
635
|
+
relaxed: {
|
|
636
|
+
$type: "number",
|
|
637
|
+
$value: "1.75",
|
|
638
|
+
$description: "Line height relaxed"
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
},
|
|
642
|
+
spacing: {
|
|
643
|
+
"0": {
|
|
644
|
+
$type: "dimension",
|
|
645
|
+
$value: "0px",
|
|
646
|
+
$description: "Spacing 0 (0px)"
|
|
647
|
+
},
|
|
648
|
+
"1": {
|
|
649
|
+
$type: "dimension",
|
|
650
|
+
$value: "4px",
|
|
651
|
+
$description: "Spacing 1 (4px)"
|
|
652
|
+
},
|
|
653
|
+
"2": {
|
|
654
|
+
$type: "dimension",
|
|
655
|
+
$value: "8px",
|
|
656
|
+
$description: "Spacing 2 (8px)"
|
|
657
|
+
},
|
|
658
|
+
"3": {
|
|
659
|
+
$type: "dimension",
|
|
660
|
+
$value: "12px",
|
|
661
|
+
$description: "Spacing 3 (12px)"
|
|
662
|
+
},
|
|
663
|
+
"4": {
|
|
664
|
+
$type: "dimension",
|
|
665
|
+
$value: "16px",
|
|
666
|
+
$description: "Spacing 4 (16px)"
|
|
667
|
+
},
|
|
668
|
+
"5": {
|
|
669
|
+
$type: "dimension",
|
|
670
|
+
$value: "20px",
|
|
671
|
+
$description: "Spacing 5 (20px)"
|
|
672
|
+
},
|
|
673
|
+
"6": {
|
|
674
|
+
$type: "dimension",
|
|
675
|
+
$value: "24px",
|
|
676
|
+
$description: "Spacing 6 (24px)"
|
|
677
|
+
},
|
|
678
|
+
"8": {
|
|
679
|
+
$type: "dimension",
|
|
680
|
+
$value: "32px",
|
|
681
|
+
$description: "Spacing 8 (32px)"
|
|
682
|
+
},
|
|
683
|
+
"10": {
|
|
684
|
+
$type: "dimension",
|
|
685
|
+
$value: "40px",
|
|
686
|
+
$description: "Spacing 10 (40px)"
|
|
687
|
+
},
|
|
688
|
+
"12": {
|
|
689
|
+
$type: "dimension",
|
|
690
|
+
$value: "48px",
|
|
691
|
+
$description: "Spacing 12 (48px)"
|
|
692
|
+
},
|
|
693
|
+
"16": {
|
|
694
|
+
$type: "dimension",
|
|
695
|
+
$value: "64px",
|
|
696
|
+
$description: "Spacing 16 (64px)"
|
|
697
|
+
},
|
|
698
|
+
"20": {
|
|
699
|
+
$type: "dimension",
|
|
700
|
+
$value: "80px",
|
|
701
|
+
$description: "Spacing 20 (80px)"
|
|
702
|
+
},
|
|
703
|
+
"0.5": {
|
|
704
|
+
$type: "dimension",
|
|
705
|
+
$value: "2px",
|
|
706
|
+
$description: "Spacing 0.5 (2px)"
|
|
707
|
+
},
|
|
708
|
+
"1.5": {
|
|
709
|
+
$type: "dimension",
|
|
710
|
+
$value: "6px",
|
|
711
|
+
$description: "Spacing 1.5 (6px)"
|
|
712
|
+
}
|
|
713
|
+
},
|
|
714
|
+
radius: {
|
|
715
|
+
none: {
|
|
716
|
+
$type: "dimension",
|
|
717
|
+
$value: "0px",
|
|
718
|
+
$description: "Border radius none"
|
|
719
|
+
},
|
|
720
|
+
sm: {
|
|
721
|
+
$type: "dimension",
|
|
722
|
+
$value: "2px",
|
|
723
|
+
$description: "Border radius sm"
|
|
724
|
+
},
|
|
725
|
+
md: {
|
|
726
|
+
$type: "dimension",
|
|
727
|
+
$value: "4px",
|
|
728
|
+
$description: "Border radius md"
|
|
729
|
+
},
|
|
730
|
+
lg: {
|
|
731
|
+
$type: "dimension",
|
|
732
|
+
$value: "6px",
|
|
733
|
+
$description: "Border radius lg"
|
|
734
|
+
},
|
|
735
|
+
xl: {
|
|
736
|
+
$type: "dimension",
|
|
737
|
+
$value: "8px",
|
|
738
|
+
$description: "Border radius xl"
|
|
739
|
+
},
|
|
740
|
+
full: {
|
|
741
|
+
$type: "dimension",
|
|
742
|
+
$value: "9999px",
|
|
743
|
+
$description: "Border radius full"
|
|
744
|
+
}
|
|
745
|
+
}
|
|
746
|
+
},
|
|
747
|
+
semantic: {
|
|
748
|
+
light: {
|
|
749
|
+
background: {
|
|
750
|
+
canvas: {
|
|
751
|
+
$type: "color",
|
|
752
|
+
$value: "{primitive.color.neutral.50}",
|
|
753
|
+
$description: "Page background"
|
|
754
|
+
},
|
|
755
|
+
surface: {
|
|
756
|
+
$type: "color",
|
|
757
|
+
$value: "#FFFFFF",
|
|
758
|
+
$description: "Card/surface background"
|
|
759
|
+
},
|
|
760
|
+
muted: {
|
|
761
|
+
$type: "color",
|
|
762
|
+
$value: "{primitive.color.neutral.100}",
|
|
763
|
+
$description: "Muted background"
|
|
764
|
+
}
|
|
765
|
+
},
|
|
766
|
+
text: {
|
|
767
|
+
primary: {
|
|
768
|
+
$type: "color",
|
|
769
|
+
$value: "{primitive.color.neutral.900}",
|
|
770
|
+
$description: "Primary text"
|
|
771
|
+
},
|
|
772
|
+
secondary: {
|
|
773
|
+
$type: "color",
|
|
774
|
+
$value: "{primitive.color.neutral.600}",
|
|
775
|
+
$description: "Secondary text"
|
|
776
|
+
},
|
|
777
|
+
muted: {
|
|
778
|
+
$type: "color",
|
|
779
|
+
$value: "{primitive.color.neutral.500}",
|
|
780
|
+
$description: "Muted/disabled text"
|
|
781
|
+
},
|
|
782
|
+
inverse: {
|
|
783
|
+
$type: "color",
|
|
784
|
+
$value: "{primitive.color.neutral.50}",
|
|
785
|
+
$description: "Text on dark backgrounds"
|
|
786
|
+
}
|
|
787
|
+
},
|
|
788
|
+
interactive: {
|
|
789
|
+
primary: {
|
|
790
|
+
$type: "color",
|
|
791
|
+
$value: "{primitive.color.hanada.500}",
|
|
792
|
+
$description: "Primary interactive (buttons, links)"
|
|
793
|
+
},
|
|
794
|
+
"primary-hover": {
|
|
795
|
+
$type: "color",
|
|
796
|
+
$value: "{primitive.color.hanada.600}",
|
|
797
|
+
$description: "Primary interactive hover"
|
|
798
|
+
},
|
|
799
|
+
"primary-active": {
|
|
800
|
+
$type: "color",
|
|
801
|
+
$value: "{primitive.color.hanada.700}",
|
|
802
|
+
$description: "Primary interactive active"
|
|
803
|
+
}
|
|
804
|
+
},
|
|
805
|
+
border: {
|
|
806
|
+
default: {
|
|
807
|
+
$type: "color",
|
|
808
|
+
$value: "{primitive.color.neutral.200}",
|
|
809
|
+
$description: "Default border"
|
|
810
|
+
},
|
|
811
|
+
strong: {
|
|
812
|
+
$type: "color",
|
|
813
|
+
$value: "{primitive.color.neutral.400}",
|
|
814
|
+
$description: "Strong border"
|
|
815
|
+
}
|
|
816
|
+
},
|
|
817
|
+
status: {
|
|
818
|
+
error: {
|
|
819
|
+
$type: "color",
|
|
820
|
+
$value: "#DC2626",
|
|
821
|
+
$description: "Error \u2014 WCAG-compliant red"
|
|
822
|
+
},
|
|
823
|
+
success: {
|
|
824
|
+
$type: "color",
|
|
825
|
+
$value: "#16A34A",
|
|
826
|
+
$description: "Success \u2014 WCAG-compliant green"
|
|
827
|
+
},
|
|
828
|
+
warning: {
|
|
829
|
+
$type: "color",
|
|
830
|
+
$value: "#CA8A04",
|
|
831
|
+
$description: "Warning \u2014 WCAG-compliant amber"
|
|
832
|
+
},
|
|
833
|
+
info: {
|
|
834
|
+
$type: "color",
|
|
835
|
+
$value: "{primitive.color.hanada.500}",
|
|
836
|
+
$description: "Info status"
|
|
837
|
+
}
|
|
838
|
+
},
|
|
839
|
+
focus: {
|
|
840
|
+
ring: {
|
|
841
|
+
$type: "color",
|
|
842
|
+
$value: "{primitive.color.hanada.500}",
|
|
843
|
+
$description: "Focus ring color"
|
|
844
|
+
}
|
|
845
|
+
},
|
|
846
|
+
accessibility: {
|
|
847
|
+
"focus-visible": {
|
|
848
|
+
$type: "color",
|
|
849
|
+
$value: "{primitive.color.hanada.500}",
|
|
850
|
+
$description: "Keyboard focus indicator"
|
|
851
|
+
}
|
|
852
|
+
}
|
|
853
|
+
},
|
|
854
|
+
dark: {
|
|
855
|
+
background: {
|
|
856
|
+
canvas: {
|
|
857
|
+
$type: "color",
|
|
858
|
+
$value: "{primitive.color.neutral.900}",
|
|
859
|
+
$description: "Page background \u2014 dark"
|
|
860
|
+
},
|
|
861
|
+
surface: {
|
|
862
|
+
$type: "color",
|
|
863
|
+
$value: "{primitive.color.neutral.800}",
|
|
864
|
+
$description: "Card/surface \u2014 dark"
|
|
865
|
+
},
|
|
866
|
+
muted: {
|
|
867
|
+
$type: "color",
|
|
868
|
+
$value: "{primitive.color.neutral.700}",
|
|
869
|
+
$description: "Muted background \u2014 dark"
|
|
870
|
+
}
|
|
871
|
+
},
|
|
872
|
+
text: {
|
|
873
|
+
primary: {
|
|
874
|
+
$type: "color",
|
|
875
|
+
$value: "{primitive.color.neutral.50}",
|
|
876
|
+
$description: "Primary text \u2014 dark"
|
|
877
|
+
},
|
|
878
|
+
secondary: {
|
|
879
|
+
$type: "color",
|
|
880
|
+
$value: "{primitive.color.neutral.300}",
|
|
881
|
+
$description: "Secondary text \u2014 dark"
|
|
882
|
+
},
|
|
883
|
+
muted: {
|
|
884
|
+
$type: "color",
|
|
885
|
+
$value: "{primitive.color.neutral.500}",
|
|
886
|
+
$description: "Muted text \u2014 dark"
|
|
887
|
+
},
|
|
888
|
+
inverse: {
|
|
889
|
+
$type: "color",
|
|
890
|
+
$value: "{primitive.color.neutral.900}",
|
|
891
|
+
$description: "Text on light backgrounds \u2014 dark"
|
|
892
|
+
}
|
|
893
|
+
},
|
|
894
|
+
interactive: {
|
|
895
|
+
primary: {
|
|
896
|
+
$type: "color",
|
|
897
|
+
$value: "{primitive.color.hanada.400}",
|
|
898
|
+
$description: "Primary interactive \u2014 dark"
|
|
899
|
+
},
|
|
900
|
+
"primary-hover": {
|
|
901
|
+
$type: "color",
|
|
902
|
+
$value: "{primitive.color.hanada.300}",
|
|
903
|
+
$description: "Primary hover \u2014 dark"
|
|
904
|
+
},
|
|
905
|
+
"primary-active": {
|
|
906
|
+
$type: "color",
|
|
907
|
+
$value: "{primitive.color.hanada.200}",
|
|
908
|
+
$description: "Primary active \u2014 dark"
|
|
909
|
+
}
|
|
910
|
+
},
|
|
911
|
+
border: {
|
|
912
|
+
default: {
|
|
913
|
+
$type: "color",
|
|
914
|
+
$value: "{primitive.color.neutral.700}",
|
|
915
|
+
$description: "Default border \u2014 dark"
|
|
916
|
+
},
|
|
917
|
+
strong: {
|
|
918
|
+
$type: "color",
|
|
919
|
+
$value: "{primitive.color.neutral.500}",
|
|
920
|
+
$description: "Strong border \u2014 dark"
|
|
921
|
+
}
|
|
922
|
+
},
|
|
923
|
+
status: {
|
|
924
|
+
error: {
|
|
925
|
+
$type: "color",
|
|
926
|
+
$value: "#EF4444",
|
|
927
|
+
$description: "Error \u2014 WCAG-compliant red (dark)"
|
|
928
|
+
},
|
|
929
|
+
success: {
|
|
930
|
+
$type: "color",
|
|
931
|
+
$value: "#22C55E",
|
|
932
|
+
$description: "Success \u2014 WCAG-compliant green (dark)"
|
|
933
|
+
},
|
|
934
|
+
warning: {
|
|
935
|
+
$type: "color",
|
|
936
|
+
$value: "#EAB308",
|
|
937
|
+
$description: "Warning \u2014 WCAG-compliant amber (dark)"
|
|
938
|
+
},
|
|
939
|
+
info: {
|
|
940
|
+
$type: "color",
|
|
941
|
+
$value: "{primitive.color.hanada.400}",
|
|
942
|
+
$description: "Info \u2014 dark"
|
|
943
|
+
}
|
|
944
|
+
},
|
|
945
|
+
focus: {
|
|
946
|
+
ring: {
|
|
947
|
+
$type: "color",
|
|
948
|
+
$value: "{primitive.color.hanada.400}",
|
|
949
|
+
$description: "Focus ring \u2014 dark"
|
|
950
|
+
}
|
|
951
|
+
},
|
|
952
|
+
accessibility: {
|
|
953
|
+
"focus-visible": {
|
|
954
|
+
$type: "color",
|
|
955
|
+
$value: "{primitive.color.hanada.400}",
|
|
956
|
+
$description: "Keyboard focus \u2014 dark"
|
|
957
|
+
}
|
|
958
|
+
}
|
|
959
|
+
}
|
|
960
|
+
}
|
|
961
|
+
};
|
|
962
|
+
|
|
963
|
+
// src/nihon-traditional/meta.json
|
|
964
|
+
var meta_default = {
|
|
965
|
+
id: "nihon-no-iro-traditional",
|
|
966
|
+
name: "Nihon no Dentou Iro (\u65E5\u672C\u306E\u4F1D\u7D71\u8272)",
|
|
967
|
+
description: "Nihon no Dentou Iro (\u65E5\u672C\u306E\u4F1D\u7D71\u8272) \u2014 colors drawn from nature, seasons, and centuries of Japanese aesthetic refinement",
|
|
968
|
+
foundation: {
|
|
969
|
+
story: "Japan's traditional color vocabulary spans over 1,000 named hues, each tied to a natural phenomenon, season, or material. These colors emerged through centuries of textile dyeing, ceramics, and woodblock printing. The palette embodies wabi-sabi \u2014 finding beauty in imperfection, impermanence, and depth.",
|
|
970
|
+
philosophy: "Wabi-sabi (\u4F98\u5BC2) \u2014 beauty in imperfection, asymmetry, and natural aging",
|
|
971
|
+
era: "Heian period (794\u20131185) through Edo period (1603\u20131868)",
|
|
972
|
+
harmonyMode: "golden-ratio",
|
|
973
|
+
radiusTendency: "subtle",
|
|
974
|
+
typographyCategory: "humanist-serif"
|
|
975
|
+
},
|
|
976
|
+
seedColors: [
|
|
977
|
+
{
|
|
978
|
+
hex: "#2E4B6D",
|
|
979
|
+
name: "Hanada (\u7E39)",
|
|
980
|
+
tradition: "Japanese indigo dyeing (ai-zome). One of the oldest dye traditions in Japan, using Persicaria tinctoria leaves.",
|
|
981
|
+
source: "The Colors of Japan (Nihon no Iro), Kyoto Traditional Arts Foundation"
|
|
982
|
+
},
|
|
983
|
+
{
|
|
984
|
+
hex: "#B5A4A0",
|
|
985
|
+
name: "Sakura-nezumi (\u685C\u9F20)",
|
|
986
|
+
tradition: "A muted cherry-blossom grey, popular in Edo-period kimono textiles. Captures the fleeting quality of sakura.",
|
|
987
|
+
source: "Nihon no Dentou Iro (\u65E5\u672C\u306E\u4F1D\u7D71\u8272\u8F9E\u5178)"
|
|
988
|
+
},
|
|
989
|
+
{
|
|
990
|
+
hex: "#7BAACC",
|
|
991
|
+
name: "Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272)",
|
|
992
|
+
tradition: "Forget-me-not blue. A contemplative tone from Meiji-era poetry and botanical illustration.",
|
|
993
|
+
source: "Dictionary of Traditional Japanese Colors"
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
hex: "#C6A96C",
|
|
997
|
+
name: "Kitsune-iro (\u72D0\u8272)",
|
|
998
|
+
tradition: "Fox color \u2014 the warm golden-brown of toasted rice and autumn fields. Used in lacquerware and ceramic glazes.",
|
|
999
|
+
source: "Nihon no Dentou Iro"
|
|
1000
|
+
},
|
|
1001
|
+
{
|
|
1002
|
+
hex: "#9B3B47",
|
|
1003
|
+
name: "Enji (\u81D9\u8102)",
|
|
1004
|
+
tradition: "Cochineal-derived crimson, introduced via Chinese trade. Prized in formal court garments and temple textiles.",
|
|
1005
|
+
source: "Colors in Japanese Art, PIE International"
|
|
1006
|
+
},
|
|
1007
|
+
{
|
|
1008
|
+
hex: "#7A7D74",
|
|
1009
|
+
name: "Rikyuu-nezumi (\u5229\u4F11\u9F20)",
|
|
1010
|
+
tradition: "Named after tea master Sen no Rikyuu. A green-tinted grey embodying tea ceremony restraint.",
|
|
1011
|
+
source: "The Book of Tea Colors"
|
|
1012
|
+
},
|
|
1013
|
+
{
|
|
1014
|
+
hex: "#F3ECDC",
|
|
1015
|
+
name: "Shironeri (\u767D\u7DF4)",
|
|
1016
|
+
tradition: "Refined white \u2014 the color of raw silk after degumming. Not pure white, but warm and alive.",
|
|
1017
|
+
source: "Nihon no Dentou Iro"
|
|
1018
|
+
}
|
|
1019
|
+
],
|
|
1020
|
+
validation: {
|
|
1021
|
+
schema: true,
|
|
1022
|
+
contrast: true,
|
|
1023
|
+
completeness: true
|
|
1024
|
+
}
|
|
1025
|
+
};
|
|
1026
|
+
|
|
1027
|
+
// src/nihon-traditional/_css.ts
|
|
1028
|
+
var css = `/* nihon-no-iro-traditional \u2014 Design Tokens */
|
|
1029
|
+
/* Generated by @syncupsuite/transformers */
|
|
1030
|
+
|
|
1031
|
+
:root {
|
|
1032
|
+
/* --- Primitive Colors --- */
|
|
1033
|
+
/* Hanada (\u7E39) 50 */
|
|
1034
|
+
--primitive-color-hanada-50: #F1F2F4;
|
|
1035
|
+
/* Hanada (\u7E39) 100 */
|
|
1036
|
+
--primitive-color-hanada-100: #E2E5E9;
|
|
1037
|
+
/* Hanada (\u7E39) 200 */
|
|
1038
|
+
--primitive-color-hanada-200: #B7CBE1;
|
|
1039
|
+
/* Hanada (\u7E39) 300 */
|
|
1040
|
+
--primitive-color-hanada-300: #93B0D2;
|
|
1041
|
+
/* Hanada (\u7E39) 400 */
|
|
1042
|
+
--primitive-color-hanada-400: #6F96C3;
|
|
1043
|
+
/* Hanada (\u7E39) 500 */
|
|
1044
|
+
--primitive-color-hanada-500: #2D4A6C;
|
|
1045
|
+
/* Hanada (\u7E39) 600 */
|
|
1046
|
+
--primitive-color-hanada-600: #21374F;
|
|
1047
|
+
/* Hanada (\u7E39) 700 */
|
|
1048
|
+
--primitive-color-hanada-700: #171E26;
|
|
1049
|
+
/* Hanada (\u7E39) 800 */
|
|
1050
|
+
--primitive-color-hanada-800: #0D1216;
|
|
1051
|
+
/* Hanada (\u7E39) 900 */
|
|
1052
|
+
--primitive-color-hanada-900: #080A0D;
|
|
1053
|
+
/* Sakura-nezumi (\u685C\u9F20) 50 */
|
|
1054
|
+
--primitive-color-sakura-nezumi-50: #F3F2F2;
|
|
1055
|
+
/* Sakura-nezumi (\u685C\u9F20) 100 */
|
|
1056
|
+
--primitive-color-sakura-nezumi-100: #E7E5E4;
|
|
1057
|
+
/* Sakura-nezumi (\u685C\u9F20) 200 */
|
|
1058
|
+
--primitive-color-sakura-nezumi-200: #D2C8C6;
|
|
1059
|
+
/* Sakura-nezumi (\u685C\u9F20) 300 */
|
|
1060
|
+
--primitive-color-sakura-nezumi-300: #BCADA9;
|
|
1061
|
+
/* Sakura-nezumi (\u685C\u9F20) 400 */
|
|
1062
|
+
--primitive-color-sakura-nezumi-400: #A5918D;
|
|
1063
|
+
/* Sakura-nezumi (\u685C\u9F20) 500 */
|
|
1064
|
+
--primitive-color-sakura-nezumi-500: #B5A4A1;
|
|
1065
|
+
/* Sakura-nezumi (\u685C\u9F20) 600 */
|
|
1066
|
+
--primitive-color-sakura-nezumi-600: #A38F8A;
|
|
1067
|
+
/* Sakura-nezumi (\u685C\u9F20) 700 */
|
|
1068
|
+
--primitive-color-sakura-nezumi-700: #8C736E;
|
|
1069
|
+
/* Sakura-nezumi (\u685C\u9F20) 800 */
|
|
1070
|
+
--primitive-color-sakura-nezumi-800: #6F5C58;
|
|
1071
|
+
/* Sakura-nezumi (\u685C\u9F20) 900 */
|
|
1072
|
+
--primitive-color-sakura-nezumi-900: #534441;
|
|
1073
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 50 */
|
|
1074
|
+
--primitive-color-wasurenagusa-iro-50: #F1F3F4;
|
|
1075
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 100 */
|
|
1076
|
+
--primitive-color-wasurenagusa-iro-100: #E2E6E9;
|
|
1077
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 200 */
|
|
1078
|
+
--primitive-color-wasurenagusa-iro-200: #B6D0E2;
|
|
1079
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 300 */
|
|
1080
|
+
--primitive-color-wasurenagusa-iro-300: #91B8D4;
|
|
1081
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 400 */
|
|
1082
|
+
--primitive-color-wasurenagusa-iro-400: #6CA0C6;
|
|
1083
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 500 */
|
|
1084
|
+
--primitive-color-wasurenagusa-iro-500: #7BAACC;
|
|
1085
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 600 */
|
|
1086
|
+
--primitive-color-wasurenagusa-iro-600: #5D97C0;
|
|
1087
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 700 */
|
|
1088
|
+
--primitive-color-wasurenagusa-iro-700: #427EA9;
|
|
1089
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 800 */
|
|
1090
|
+
--primitive-color-wasurenagusa-iro-800: #336384;
|
|
1091
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 900 */
|
|
1092
|
+
--primitive-color-wasurenagusa-iro-900: #25475F;
|
|
1093
|
+
/* Kitsune-iro (\u72D0\u8272) 50 */
|
|
1094
|
+
--primitive-color-kitsune-iro-50: #F4F3F1;
|
|
1095
|
+
/* Kitsune-iro (\u72D0\u8272) 100 */
|
|
1096
|
+
--primitive-color-kitsune-iro-100: #E9E7E2;
|
|
1097
|
+
/* Kitsune-iro (\u72D0\u8272) 200 */
|
|
1098
|
+
--primitive-color-kitsune-iro-200: #E2D4B6;
|
|
1099
|
+
/* Kitsune-iro (\u72D0\u8272) 300 */
|
|
1100
|
+
--primitive-color-kitsune-iro-300: #D4BF91;
|
|
1101
|
+
/* Kitsune-iro (\u72D0\u8272) 400 */
|
|
1102
|
+
--primitive-color-kitsune-iro-400: #C6A96C;
|
|
1103
|
+
/* Kitsune-iro (\u72D0\u8272) 500 */
|
|
1104
|
+
--primitive-color-kitsune-iro-500: #C6A96C;
|
|
1105
|
+
/* Kitsune-iro (\u72D0\u8272) 600 */
|
|
1106
|
+
--primitive-color-kitsune-iro-600: #BA984F;
|
|
1107
|
+
/* Kitsune-iro (\u72D0\u8272) 700 */
|
|
1108
|
+
--primitive-color-kitsune-iro-700: #9A7C3C;
|
|
1109
|
+
/* Kitsune-iro (\u72D0\u8272) 800 */
|
|
1110
|
+
--primitive-color-kitsune-iro-800: #765F2E;
|
|
1111
|
+
/* Kitsune-iro (\u72D0\u8272) 900 */
|
|
1112
|
+
--primitive-color-kitsune-iro-900: #51411F;
|
|
1113
|
+
/* Enji (\u81D9\u8102) 50 */
|
|
1114
|
+
--primitive-color-enji-50: #F4F0F1;
|
|
1115
|
+
/* Enji (\u81D9\u8102) 100 */
|
|
1116
|
+
--primitive-color-enji-100: #E9E2E3;
|
|
1117
|
+
/* Enji (\u81D9\u8102) 200 */
|
|
1118
|
+
--primitive-color-enji-200: #E3B5BA;
|
|
1119
|
+
/* Enji (\u81D9\u8102) 300 */
|
|
1120
|
+
--primitive-color-enji-300: #D59098;
|
|
1121
|
+
/* Enji (\u81D9\u8102) 400 */
|
|
1122
|
+
--primitive-color-enji-400: #C76B76;
|
|
1123
|
+
/* Enji (\u81D9\u8102) 500 */
|
|
1124
|
+
--primitive-color-enji-500: #9B3B46;
|
|
1125
|
+
/* Enji (\u81D9\u8102) 600 */
|
|
1126
|
+
--primitive-color-enji-600: #7E3039;
|
|
1127
|
+
/* Enji (\u81D9\u8102) 700 */
|
|
1128
|
+
--primitive-color-enji-700: #592228;
|
|
1129
|
+
/* Enji (\u81D9\u8102) 800 */
|
|
1130
|
+
--primitive-color-enji-800: #2D1A1C;
|
|
1131
|
+
/* Enji (\u81D9\u8102) 900 */
|
|
1132
|
+
--primitive-color-enji-900: #0D0708;
|
|
1133
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 50 */
|
|
1134
|
+
--primitive-color-rikyuu-nezumi-50: #F2F2F2;
|
|
1135
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 100 */
|
|
1136
|
+
--primitive-color-rikyuu-nezumi-100: #E6E6E5;
|
|
1137
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 200 */
|
|
1138
|
+
--primitive-color-rikyuu-nezumi-200: #CDCECA;
|
|
1139
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 300 */
|
|
1140
|
+
--primitive-color-rikyuu-nezumi-300: #B4B6AF;
|
|
1141
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 400 */
|
|
1142
|
+
--primitive-color-rikyuu-nezumi-400: #9A9D95;
|
|
1143
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 500 */
|
|
1144
|
+
--primitive-color-rikyuu-nezumi-500: #797D73;
|
|
1145
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 600 */
|
|
1146
|
+
--primitive-color-rikyuu-nezumi-600: #65675F;
|
|
1147
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 700 */
|
|
1148
|
+
--primitive-color-rikyuu-nezumi-700: #4B4D47;
|
|
1149
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 800 */
|
|
1150
|
+
--primitive-color-rikyuu-nezumi-800: #31322F;
|
|
1151
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 900 */
|
|
1152
|
+
--primitive-color-rikyuu-nezumi-900: #171716;
|
|
1153
|
+
/* Shironeri (\u767D\u7DF4) 50 */
|
|
1154
|
+
--primitive-color-shironeri-50: #F4F3F0;
|
|
1155
|
+
/* Shironeri (\u767D\u7DF4) 100 */
|
|
1156
|
+
--primitive-color-shironeri-100: #E9E7E2;
|
|
1157
|
+
/* Shironeri (\u767D\u7DF4) 200 */
|
|
1158
|
+
--primitive-color-shironeri-200: #E5D6B3;
|
|
1159
|
+
/* Shironeri (\u767D\u7DF4) 300 */
|
|
1160
|
+
--primitive-color-shironeri-300: #D8C18D;
|
|
1161
|
+
/* Shironeri (\u767D\u7DF4) 400 */
|
|
1162
|
+
--primitive-color-shironeri-400: #CBAD67;
|
|
1163
|
+
/* Shironeri (\u767D\u7DF4) 500 */
|
|
1164
|
+
--primitive-color-shironeri-500: #EBE9E5;
|
|
1165
|
+
/* Shironeri (\u767D\u7DF4) 600 */
|
|
1166
|
+
--primitive-color-shironeri-600: #E9DCBE;
|
|
1167
|
+
/* Shironeri (\u767D\u7DF4) 700 */
|
|
1168
|
+
--primitive-color-shironeri-700: #DCC898;
|
|
1169
|
+
/* Shironeri (\u767D\u7DF4) 800 */
|
|
1170
|
+
--primitive-color-shironeri-800: #CFB372;
|
|
1171
|
+
/* Shironeri (\u767D\u7DF4) 900 */
|
|
1172
|
+
--primitive-color-shironeri-900: #C29F4C;
|
|
1173
|
+
/* Neutral 50 */
|
|
1174
|
+
--primitive-color-neutral-50: #F7F7F8;
|
|
1175
|
+
/* Neutral 100 */
|
|
1176
|
+
--primitive-color-neutral-100: #EFF0F0;
|
|
1177
|
+
/* Neutral 200 */
|
|
1178
|
+
--primitive-color-neutral-200: #DFE0E2;
|
|
1179
|
+
/* Neutral 300 */
|
|
1180
|
+
--primitive-color-neutral-300: #C5C7C9;
|
|
1181
|
+
/* Neutral 400 */
|
|
1182
|
+
--primitive-color-neutral-400: #9A9EA2;
|
|
1183
|
+
/* Neutral 500 */
|
|
1184
|
+
--primitive-color-neutral-500: #71757A;
|
|
1185
|
+
/* Neutral 600 */
|
|
1186
|
+
--primitive-color-neutral-600: #585C5F;
|
|
1187
|
+
/* Neutral 700 */
|
|
1188
|
+
--primitive-color-neutral-700: #404245;
|
|
1189
|
+
/* Neutral 800 */
|
|
1190
|
+
--primitive-color-neutral-800: #27292A;
|
|
1191
|
+
/* Neutral 900 */
|
|
1192
|
+
--primitive-color-neutral-900: #141415;
|
|
1193
|
+
/* Accent 50 */
|
|
1194
|
+
--primitive-color-accent-50: #F3F4F1;
|
|
1195
|
+
/* Accent 100 */
|
|
1196
|
+
--primitive-color-accent-100: #E7E9E2;
|
|
1197
|
+
/* Accent 200 */
|
|
1198
|
+
--primitive-color-accent-200: #D7E1B7;
|
|
1199
|
+
/* Accent 300 */
|
|
1200
|
+
--primitive-color-accent-300: #C3D293;
|
|
1201
|
+
/* Accent 400 */
|
|
1202
|
+
--primitive-color-accent-400: #AFC36F;
|
|
1203
|
+
/* Accent 500 */
|
|
1204
|
+
--primitive-color-accent-500: #5D6C2D;
|
|
1205
|
+
/* Accent 600 */
|
|
1206
|
+
--primitive-color-accent-600: #444F21;
|
|
1207
|
+
/* Accent 700 */
|
|
1208
|
+
--primitive-color-accent-700: #232617;
|
|
1209
|
+
/* Accent 800 */
|
|
1210
|
+
--primitive-color-accent-800: #14160D;
|
|
1211
|
+
/* Accent 900 */
|
|
1212
|
+
--primitive-color-accent-900: #0C0D08;
|
|
1213
|
+
|
|
1214
|
+
/* --- Typography --- */
|
|
1215
|
+
/* Heading font family */
|
|
1216
|
+
--primitive-typography-family-heading: "Noto Serif JP", "Noto Serif", Georgia, serif;
|
|
1217
|
+
/* Body font family */
|
|
1218
|
+
--primitive-typography-family-body: "Noto Serif JP", "Noto Serif", Georgia, serif;
|
|
1219
|
+
/* Monospace font family */
|
|
1220
|
+
--primitive-typography-family-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
1221
|
+
/* Font size xs */
|
|
1222
|
+
--primitive-typography-size-xs: 0.75rem;
|
|
1223
|
+
/* Font size sm */
|
|
1224
|
+
--primitive-typography-size-sm: 0.875rem;
|
|
1225
|
+
/* Font size base */
|
|
1226
|
+
--primitive-typography-size-base: 1rem;
|
|
1227
|
+
/* Font size lg */
|
|
1228
|
+
--primitive-typography-size-lg: 1.125rem;
|
|
1229
|
+
/* Font size xl */
|
|
1230
|
+
--primitive-typography-size-xl: 1.25rem;
|
|
1231
|
+
/* Font size 2xl */
|
|
1232
|
+
--primitive-typography-size-2xl: 1.5rem;
|
|
1233
|
+
/* Font size 3xl */
|
|
1234
|
+
--primitive-typography-size-3xl: 1.875rem;
|
|
1235
|
+
/* Font size 4xl */
|
|
1236
|
+
--primitive-typography-size-4xl: 2.25rem;
|
|
1237
|
+
/* Font weight normal */
|
|
1238
|
+
--primitive-typography-weight-normal: 400;
|
|
1239
|
+
/* Font weight medium */
|
|
1240
|
+
--primitive-typography-weight-medium: 500;
|
|
1241
|
+
/* Font weight semibold */
|
|
1242
|
+
--primitive-typography-weight-semibold: 600;
|
|
1243
|
+
/* Font weight bold */
|
|
1244
|
+
--primitive-typography-weight-bold: 700;
|
|
1245
|
+
/* Line height tight */
|
|
1246
|
+
--primitive-typography-lineHeight-tight: 1.25;
|
|
1247
|
+
/* Line height normal */
|
|
1248
|
+
--primitive-typography-lineHeight-normal: 1.5;
|
|
1249
|
+
/* Line height relaxed */
|
|
1250
|
+
--primitive-typography-lineHeight-relaxed: 1.75;
|
|
1251
|
+
|
|
1252
|
+
/* --- Spacing --- */
|
|
1253
|
+
/* Spacing 0 (0px) */
|
|
1254
|
+
--primitive-spacing-0: 0px;
|
|
1255
|
+
/* Spacing 1 (4px) */
|
|
1256
|
+
--primitive-spacing-1: 4px;
|
|
1257
|
+
/* Spacing 2 (8px) */
|
|
1258
|
+
--primitive-spacing-2: 8px;
|
|
1259
|
+
/* Spacing 3 (12px) */
|
|
1260
|
+
--primitive-spacing-3: 12px;
|
|
1261
|
+
/* Spacing 4 (16px) */
|
|
1262
|
+
--primitive-spacing-4: 16px;
|
|
1263
|
+
/* Spacing 5 (20px) */
|
|
1264
|
+
--primitive-spacing-5: 20px;
|
|
1265
|
+
/* Spacing 6 (24px) */
|
|
1266
|
+
--primitive-spacing-6: 24px;
|
|
1267
|
+
/* Spacing 8 (32px) */
|
|
1268
|
+
--primitive-spacing-8: 32px;
|
|
1269
|
+
/* Spacing 10 (40px) */
|
|
1270
|
+
--primitive-spacing-10: 40px;
|
|
1271
|
+
/* Spacing 12 (48px) */
|
|
1272
|
+
--primitive-spacing-12: 48px;
|
|
1273
|
+
/* Spacing 16 (64px) */
|
|
1274
|
+
--primitive-spacing-16: 64px;
|
|
1275
|
+
/* Spacing 20 (80px) */
|
|
1276
|
+
--primitive-spacing-20: 80px;
|
|
1277
|
+
/* Spacing 0.5 (2px) */
|
|
1278
|
+
--primitive-spacing-0-5: 2px;
|
|
1279
|
+
/* Spacing 1.5 (6px) */
|
|
1280
|
+
--primitive-spacing-1-5: 6px;
|
|
1281
|
+
|
|
1282
|
+
/* --- Border Radius --- */
|
|
1283
|
+
/* Border radius none */
|
|
1284
|
+
--primitive-radius-none: 0px;
|
|
1285
|
+
/* Border radius sm */
|
|
1286
|
+
--primitive-radius-sm: 2px;
|
|
1287
|
+
/* Border radius md */
|
|
1288
|
+
--primitive-radius-md: 4px;
|
|
1289
|
+
/* Border radius lg */
|
|
1290
|
+
--primitive-radius-lg: 6px;
|
|
1291
|
+
/* Border radius xl */
|
|
1292
|
+
--primitive-radius-xl: 8px;
|
|
1293
|
+
/* Border radius full */
|
|
1294
|
+
--primitive-radius-full: 9999px;
|
|
1295
|
+
|
|
1296
|
+
/* --- Semantic Tokens (Light) --- */
|
|
1297
|
+
/* Page background */
|
|
1298
|
+
--background-canvas: var(--primitive-color-neutral-50);
|
|
1299
|
+
/* Card/surface background */
|
|
1300
|
+
--background-surface: #FFFFFF;
|
|
1301
|
+
/* Muted background */
|
|
1302
|
+
--background-muted: var(--primitive-color-neutral-100);
|
|
1303
|
+
/* Primary text */
|
|
1304
|
+
--text-primary: var(--primitive-color-neutral-900);
|
|
1305
|
+
/* Secondary text */
|
|
1306
|
+
--text-secondary: var(--primitive-color-neutral-600);
|
|
1307
|
+
/* Muted/disabled text */
|
|
1308
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
1309
|
+
/* Text on dark backgrounds */
|
|
1310
|
+
--text-inverse: var(--primitive-color-neutral-50);
|
|
1311
|
+
/* Primary interactive (buttons, links) */
|
|
1312
|
+
--interactive-primary: var(--primitive-color-hanada-500);
|
|
1313
|
+
/* Primary interactive hover */
|
|
1314
|
+
--interactive-primary-hover: var(--primitive-color-hanada-600);
|
|
1315
|
+
/* Primary interactive active */
|
|
1316
|
+
--interactive-primary-active: var(--primitive-color-hanada-700);
|
|
1317
|
+
/* Default border */
|
|
1318
|
+
--border-default: var(--primitive-color-neutral-200);
|
|
1319
|
+
/* Strong border */
|
|
1320
|
+
--border-strong: var(--primitive-color-neutral-400);
|
|
1321
|
+
/* Error \u2014 WCAG-compliant red */
|
|
1322
|
+
--status-error: #DC2626;
|
|
1323
|
+
/* Success \u2014 WCAG-compliant green */
|
|
1324
|
+
--status-success: #16A34A;
|
|
1325
|
+
/* Warning \u2014 WCAG-compliant amber */
|
|
1326
|
+
--status-warning: #CA8A04;
|
|
1327
|
+
/* Info status */
|
|
1328
|
+
--status-info: var(--primitive-color-hanada-500);
|
|
1329
|
+
/* Focus ring color */
|
|
1330
|
+
--focus-ring: var(--primitive-color-hanada-500);
|
|
1331
|
+
/* Keyboard focus indicator */
|
|
1332
|
+
--accessibility-focus-visible: var(--primitive-color-hanada-500);
|
|
1333
|
+
}
|
|
1334
|
+
|
|
1335
|
+
[data-theme="dark"] {
|
|
1336
|
+
/* Page background \u2014 dark */
|
|
1337
|
+
--background-canvas: var(--primitive-color-neutral-900);
|
|
1338
|
+
/* Card/surface \u2014 dark */
|
|
1339
|
+
--background-surface: var(--primitive-color-neutral-800);
|
|
1340
|
+
/* Muted background \u2014 dark */
|
|
1341
|
+
--background-muted: var(--primitive-color-neutral-700);
|
|
1342
|
+
/* Primary text \u2014 dark */
|
|
1343
|
+
--text-primary: var(--primitive-color-neutral-50);
|
|
1344
|
+
/* Secondary text \u2014 dark */
|
|
1345
|
+
--text-secondary: var(--primitive-color-neutral-300);
|
|
1346
|
+
/* Muted text \u2014 dark */
|
|
1347
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
1348
|
+
/* Text on light backgrounds \u2014 dark */
|
|
1349
|
+
--text-inverse: var(--primitive-color-neutral-900);
|
|
1350
|
+
/* Primary interactive \u2014 dark */
|
|
1351
|
+
--interactive-primary: var(--primitive-color-hanada-400);
|
|
1352
|
+
/* Primary hover \u2014 dark */
|
|
1353
|
+
--interactive-primary-hover: var(--primitive-color-hanada-300);
|
|
1354
|
+
/* Primary active \u2014 dark */
|
|
1355
|
+
--interactive-primary-active: var(--primitive-color-hanada-200);
|
|
1356
|
+
/* Default border \u2014 dark */
|
|
1357
|
+
--border-default: var(--primitive-color-neutral-700);
|
|
1358
|
+
/* Strong border \u2014 dark */
|
|
1359
|
+
--border-strong: var(--primitive-color-neutral-500);
|
|
1360
|
+
/* Error \u2014 WCAG-compliant red (dark) */
|
|
1361
|
+
--status-error: #EF4444;
|
|
1362
|
+
/* Success \u2014 WCAG-compliant green (dark) */
|
|
1363
|
+
--status-success: #22C55E;
|
|
1364
|
+
/* Warning \u2014 WCAG-compliant amber (dark) */
|
|
1365
|
+
--status-warning: #EAB308;
|
|
1366
|
+
/* Info \u2014 dark */
|
|
1367
|
+
--status-info: var(--primitive-color-hanada-400);
|
|
1368
|
+
/* Focus ring \u2014 dark */
|
|
1369
|
+
--focus-ring: var(--primitive-color-hanada-400);
|
|
1370
|
+
/* Keyboard focus \u2014 dark */
|
|
1371
|
+
--accessibility-focus-visible: var(--primitive-color-hanada-400);
|
|
1372
|
+
}
|
|
1373
|
+
`;
|
|
1374
|
+
var tailwindCss = `@import "tailwindcss";
|
|
1375
|
+
|
|
1376
|
+
@theme {
|
|
1377
|
+
/* --- Colors --- */
|
|
1378
|
+
/* Hanada (\u7E39) 50 */
|
|
1379
|
+
--color-hanada-50: #F1F2F4;
|
|
1380
|
+
/* Hanada (\u7E39) 100 */
|
|
1381
|
+
--color-hanada-100: #E2E5E9;
|
|
1382
|
+
/* Hanada (\u7E39) 200 */
|
|
1383
|
+
--color-hanada-200: #B7CBE1;
|
|
1384
|
+
/* Hanada (\u7E39) 300 */
|
|
1385
|
+
--color-hanada-300: #93B0D2;
|
|
1386
|
+
/* Hanada (\u7E39) 400 */
|
|
1387
|
+
--color-hanada-400: #6F96C3;
|
|
1388
|
+
/* Hanada (\u7E39) 500 */
|
|
1389
|
+
--color-hanada-500: #2D4A6C;
|
|
1390
|
+
/* Hanada (\u7E39) 600 */
|
|
1391
|
+
--color-hanada-600: #21374F;
|
|
1392
|
+
/* Hanada (\u7E39) 700 */
|
|
1393
|
+
--color-hanada-700: #171E26;
|
|
1394
|
+
/* Hanada (\u7E39) 800 */
|
|
1395
|
+
--color-hanada-800: #0D1216;
|
|
1396
|
+
/* Hanada (\u7E39) 900 */
|
|
1397
|
+
--color-hanada-900: #080A0D;
|
|
1398
|
+
/* Sakura-nezumi (\u685C\u9F20) 50 */
|
|
1399
|
+
--color-sakura-nezumi-50: #F3F2F2;
|
|
1400
|
+
/* Sakura-nezumi (\u685C\u9F20) 100 */
|
|
1401
|
+
--color-sakura-nezumi-100: #E7E5E4;
|
|
1402
|
+
/* Sakura-nezumi (\u685C\u9F20) 200 */
|
|
1403
|
+
--color-sakura-nezumi-200: #D2C8C6;
|
|
1404
|
+
/* Sakura-nezumi (\u685C\u9F20) 300 */
|
|
1405
|
+
--color-sakura-nezumi-300: #BCADA9;
|
|
1406
|
+
/* Sakura-nezumi (\u685C\u9F20) 400 */
|
|
1407
|
+
--color-sakura-nezumi-400: #A5918D;
|
|
1408
|
+
/* Sakura-nezumi (\u685C\u9F20) 500 */
|
|
1409
|
+
--color-sakura-nezumi-500: #B5A4A1;
|
|
1410
|
+
/* Sakura-nezumi (\u685C\u9F20) 600 */
|
|
1411
|
+
--color-sakura-nezumi-600: #A38F8A;
|
|
1412
|
+
/* Sakura-nezumi (\u685C\u9F20) 700 */
|
|
1413
|
+
--color-sakura-nezumi-700: #8C736E;
|
|
1414
|
+
/* Sakura-nezumi (\u685C\u9F20) 800 */
|
|
1415
|
+
--color-sakura-nezumi-800: #6F5C58;
|
|
1416
|
+
/* Sakura-nezumi (\u685C\u9F20) 900 */
|
|
1417
|
+
--color-sakura-nezumi-900: #534441;
|
|
1418
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 50 */
|
|
1419
|
+
--color-wasurenagusa-iro-50: #F1F3F4;
|
|
1420
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 100 */
|
|
1421
|
+
--color-wasurenagusa-iro-100: #E2E6E9;
|
|
1422
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 200 */
|
|
1423
|
+
--color-wasurenagusa-iro-200: #B6D0E2;
|
|
1424
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 300 */
|
|
1425
|
+
--color-wasurenagusa-iro-300: #91B8D4;
|
|
1426
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 400 */
|
|
1427
|
+
--color-wasurenagusa-iro-400: #6CA0C6;
|
|
1428
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 500 */
|
|
1429
|
+
--color-wasurenagusa-iro-500: #7BAACC;
|
|
1430
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 600 */
|
|
1431
|
+
--color-wasurenagusa-iro-600: #5D97C0;
|
|
1432
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 700 */
|
|
1433
|
+
--color-wasurenagusa-iro-700: #427EA9;
|
|
1434
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 800 */
|
|
1435
|
+
--color-wasurenagusa-iro-800: #336384;
|
|
1436
|
+
/* Wasurenagusa-iro (\u52FF\u5FD8\u8349\u8272) 900 */
|
|
1437
|
+
--color-wasurenagusa-iro-900: #25475F;
|
|
1438
|
+
/* Kitsune-iro (\u72D0\u8272) 50 */
|
|
1439
|
+
--color-kitsune-iro-50: #F4F3F1;
|
|
1440
|
+
/* Kitsune-iro (\u72D0\u8272) 100 */
|
|
1441
|
+
--color-kitsune-iro-100: #E9E7E2;
|
|
1442
|
+
/* Kitsune-iro (\u72D0\u8272) 200 */
|
|
1443
|
+
--color-kitsune-iro-200: #E2D4B6;
|
|
1444
|
+
/* Kitsune-iro (\u72D0\u8272) 300 */
|
|
1445
|
+
--color-kitsune-iro-300: #D4BF91;
|
|
1446
|
+
/* Kitsune-iro (\u72D0\u8272) 400 */
|
|
1447
|
+
--color-kitsune-iro-400: #C6A96C;
|
|
1448
|
+
/* Kitsune-iro (\u72D0\u8272) 500 */
|
|
1449
|
+
--color-kitsune-iro-500: #C6A96C;
|
|
1450
|
+
/* Kitsune-iro (\u72D0\u8272) 600 */
|
|
1451
|
+
--color-kitsune-iro-600: #BA984F;
|
|
1452
|
+
/* Kitsune-iro (\u72D0\u8272) 700 */
|
|
1453
|
+
--color-kitsune-iro-700: #9A7C3C;
|
|
1454
|
+
/* Kitsune-iro (\u72D0\u8272) 800 */
|
|
1455
|
+
--color-kitsune-iro-800: #765F2E;
|
|
1456
|
+
/* Kitsune-iro (\u72D0\u8272) 900 */
|
|
1457
|
+
--color-kitsune-iro-900: #51411F;
|
|
1458
|
+
/* Enji (\u81D9\u8102) 50 */
|
|
1459
|
+
--color-enji-50: #F4F0F1;
|
|
1460
|
+
/* Enji (\u81D9\u8102) 100 */
|
|
1461
|
+
--color-enji-100: #E9E2E3;
|
|
1462
|
+
/* Enji (\u81D9\u8102) 200 */
|
|
1463
|
+
--color-enji-200: #E3B5BA;
|
|
1464
|
+
/* Enji (\u81D9\u8102) 300 */
|
|
1465
|
+
--color-enji-300: #D59098;
|
|
1466
|
+
/* Enji (\u81D9\u8102) 400 */
|
|
1467
|
+
--color-enji-400: #C76B76;
|
|
1468
|
+
/* Enji (\u81D9\u8102) 500 */
|
|
1469
|
+
--color-enji-500: #9B3B46;
|
|
1470
|
+
/* Enji (\u81D9\u8102) 600 */
|
|
1471
|
+
--color-enji-600: #7E3039;
|
|
1472
|
+
/* Enji (\u81D9\u8102) 700 */
|
|
1473
|
+
--color-enji-700: #592228;
|
|
1474
|
+
/* Enji (\u81D9\u8102) 800 */
|
|
1475
|
+
--color-enji-800: #2D1A1C;
|
|
1476
|
+
/* Enji (\u81D9\u8102) 900 */
|
|
1477
|
+
--color-enji-900: #0D0708;
|
|
1478
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 50 */
|
|
1479
|
+
--color-rikyuu-nezumi-50: #F2F2F2;
|
|
1480
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 100 */
|
|
1481
|
+
--color-rikyuu-nezumi-100: #E6E6E5;
|
|
1482
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 200 */
|
|
1483
|
+
--color-rikyuu-nezumi-200: #CDCECA;
|
|
1484
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 300 */
|
|
1485
|
+
--color-rikyuu-nezumi-300: #B4B6AF;
|
|
1486
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 400 */
|
|
1487
|
+
--color-rikyuu-nezumi-400: #9A9D95;
|
|
1488
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 500 */
|
|
1489
|
+
--color-rikyuu-nezumi-500: #797D73;
|
|
1490
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 600 */
|
|
1491
|
+
--color-rikyuu-nezumi-600: #65675F;
|
|
1492
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 700 */
|
|
1493
|
+
--color-rikyuu-nezumi-700: #4B4D47;
|
|
1494
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 800 */
|
|
1495
|
+
--color-rikyuu-nezumi-800: #31322F;
|
|
1496
|
+
/* Rikyuu-nezumi (\u5229\u4F11\u9F20) 900 */
|
|
1497
|
+
--color-rikyuu-nezumi-900: #171716;
|
|
1498
|
+
/* Shironeri (\u767D\u7DF4) 50 */
|
|
1499
|
+
--color-shironeri-50: #F4F3F0;
|
|
1500
|
+
/* Shironeri (\u767D\u7DF4) 100 */
|
|
1501
|
+
--color-shironeri-100: #E9E7E2;
|
|
1502
|
+
/* Shironeri (\u767D\u7DF4) 200 */
|
|
1503
|
+
--color-shironeri-200: #E5D6B3;
|
|
1504
|
+
/* Shironeri (\u767D\u7DF4) 300 */
|
|
1505
|
+
--color-shironeri-300: #D8C18D;
|
|
1506
|
+
/* Shironeri (\u767D\u7DF4) 400 */
|
|
1507
|
+
--color-shironeri-400: #CBAD67;
|
|
1508
|
+
/* Shironeri (\u767D\u7DF4) 500 */
|
|
1509
|
+
--color-shironeri-500: #EBE9E5;
|
|
1510
|
+
/* Shironeri (\u767D\u7DF4) 600 */
|
|
1511
|
+
--color-shironeri-600: #E9DCBE;
|
|
1512
|
+
/* Shironeri (\u767D\u7DF4) 700 */
|
|
1513
|
+
--color-shironeri-700: #DCC898;
|
|
1514
|
+
/* Shironeri (\u767D\u7DF4) 800 */
|
|
1515
|
+
--color-shironeri-800: #CFB372;
|
|
1516
|
+
/* Shironeri (\u767D\u7DF4) 900 */
|
|
1517
|
+
--color-shironeri-900: #C29F4C;
|
|
1518
|
+
/* Neutral 50 */
|
|
1519
|
+
--color-neutral-50: #F7F7F8;
|
|
1520
|
+
/* Neutral 100 */
|
|
1521
|
+
--color-neutral-100: #EFF0F0;
|
|
1522
|
+
/* Neutral 200 */
|
|
1523
|
+
--color-neutral-200: #DFE0E2;
|
|
1524
|
+
/* Neutral 300 */
|
|
1525
|
+
--color-neutral-300: #C5C7C9;
|
|
1526
|
+
/* Neutral 400 */
|
|
1527
|
+
--color-neutral-400: #9A9EA2;
|
|
1528
|
+
/* Neutral 500 */
|
|
1529
|
+
--color-neutral-500: #71757A;
|
|
1530
|
+
/* Neutral 600 */
|
|
1531
|
+
--color-neutral-600: #585C5F;
|
|
1532
|
+
/* Neutral 700 */
|
|
1533
|
+
--color-neutral-700: #404245;
|
|
1534
|
+
/* Neutral 800 */
|
|
1535
|
+
--color-neutral-800: #27292A;
|
|
1536
|
+
/* Neutral 900 */
|
|
1537
|
+
--color-neutral-900: #141415;
|
|
1538
|
+
/* Accent 50 */
|
|
1539
|
+
--color-accent-50: #F3F4F1;
|
|
1540
|
+
/* Accent 100 */
|
|
1541
|
+
--color-accent-100: #E7E9E2;
|
|
1542
|
+
/* Accent 200 */
|
|
1543
|
+
--color-accent-200: #D7E1B7;
|
|
1544
|
+
/* Accent 300 */
|
|
1545
|
+
--color-accent-300: #C3D293;
|
|
1546
|
+
/* Accent 400 */
|
|
1547
|
+
--color-accent-400: #AFC36F;
|
|
1548
|
+
/* Accent 500 */
|
|
1549
|
+
--color-accent-500: #5D6C2D;
|
|
1550
|
+
/* Accent 600 */
|
|
1551
|
+
--color-accent-600: #444F21;
|
|
1552
|
+
/* Accent 700 */
|
|
1553
|
+
--color-accent-700: #232617;
|
|
1554
|
+
/* Accent 800 */
|
|
1555
|
+
--color-accent-800: #14160D;
|
|
1556
|
+
/* Accent 900 */
|
|
1557
|
+
--color-accent-900: #0C0D08;
|
|
1558
|
+
|
|
1559
|
+
/* --- Spacing (8px grid) --- */
|
|
1560
|
+
/* Spacing 0 (0px) */
|
|
1561
|
+
--spacing-0: 0px;
|
|
1562
|
+
/* Spacing 1 (4px) */
|
|
1563
|
+
--spacing-1: 4px;
|
|
1564
|
+
/* Spacing 2 (8px) */
|
|
1565
|
+
--spacing-2: 8px;
|
|
1566
|
+
/* Spacing 3 (12px) */
|
|
1567
|
+
--spacing-3: 12px;
|
|
1568
|
+
/* Spacing 4 (16px) */
|
|
1569
|
+
--spacing-4: 16px;
|
|
1570
|
+
/* Spacing 5 (20px) */
|
|
1571
|
+
--spacing-5: 20px;
|
|
1572
|
+
/* Spacing 6 (24px) */
|
|
1573
|
+
--spacing-6: 24px;
|
|
1574
|
+
/* Spacing 8 (32px) */
|
|
1575
|
+
--spacing-8: 32px;
|
|
1576
|
+
/* Spacing 10 (40px) */
|
|
1577
|
+
--spacing-10: 40px;
|
|
1578
|
+
/* Spacing 12 (48px) */
|
|
1579
|
+
--spacing-12: 48px;
|
|
1580
|
+
/* Spacing 16 (64px) */
|
|
1581
|
+
--spacing-16: 64px;
|
|
1582
|
+
/* Spacing 20 (80px) */
|
|
1583
|
+
--spacing-20: 80px;
|
|
1584
|
+
/* Spacing 0.5 (2px) */
|
|
1585
|
+
--spacing-0.5: 2px;
|
|
1586
|
+
/* Spacing 1.5 (6px) */
|
|
1587
|
+
--spacing-1.5: 6px;
|
|
1588
|
+
|
|
1589
|
+
/* --- Font Families --- */
|
|
1590
|
+
/* Heading font family */
|
|
1591
|
+
--font-heading: "Noto Serif JP", "Noto Serif", Georgia, serif;
|
|
1592
|
+
/* Body font family */
|
|
1593
|
+
--font-body: "Noto Serif JP", "Noto Serif", Georgia, serif;
|
|
1594
|
+
/* Monospace font family */
|
|
1595
|
+
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
1596
|
+
|
|
1597
|
+
/* --- Font Sizes --- */
|
|
1598
|
+
/* Font size xs */
|
|
1599
|
+
--text-xs: 0.75rem;
|
|
1600
|
+
/* Font size sm */
|
|
1601
|
+
--text-sm: 0.875rem;
|
|
1602
|
+
/* Font size base */
|
|
1603
|
+
--text-base: 1rem;
|
|
1604
|
+
/* Font size lg */
|
|
1605
|
+
--text-lg: 1.125rem;
|
|
1606
|
+
/* Font size xl */
|
|
1607
|
+
--text-xl: 1.25rem;
|
|
1608
|
+
/* Font size 2xl */
|
|
1609
|
+
--text-2xl: 1.5rem;
|
|
1610
|
+
/* Font size 3xl */
|
|
1611
|
+
--text-3xl: 1.875rem;
|
|
1612
|
+
/* Font size 4xl */
|
|
1613
|
+
--text-4xl: 2.25rem;
|
|
1614
|
+
|
|
1615
|
+
/* --- Border Radius --- */
|
|
1616
|
+
/* Border radius none */
|
|
1617
|
+
--radius-none: 0px;
|
|
1618
|
+
/* Border radius sm */
|
|
1619
|
+
--radius-sm: 2px;
|
|
1620
|
+
/* Border radius md */
|
|
1621
|
+
--radius-md: 4px;
|
|
1622
|
+
/* Border radius lg */
|
|
1623
|
+
--radius-lg: 6px;
|
|
1624
|
+
/* Border radius xl */
|
|
1625
|
+
--radius-xl: 8px;
|
|
1626
|
+
/* Border radius full */
|
|
1627
|
+
--radius-full: 9999px;
|
|
1628
|
+
|
|
1629
|
+
}
|
|
1630
|
+
|
|
1631
|
+
/* Light mode semantic tokens (default) */
|
|
1632
|
+
:root {
|
|
1633
|
+
/* Page background */
|
|
1634
|
+
--background-canvas: var(--primitive-color-neutral-50);
|
|
1635
|
+
/* Card/surface background */
|
|
1636
|
+
--background-surface: #FFFFFF;
|
|
1637
|
+
/* Muted background */
|
|
1638
|
+
--background-muted: var(--primitive-color-neutral-100);
|
|
1639
|
+
/* Primary text */
|
|
1640
|
+
--text-primary: var(--primitive-color-neutral-900);
|
|
1641
|
+
/* Secondary text */
|
|
1642
|
+
--text-secondary: var(--primitive-color-neutral-600);
|
|
1643
|
+
/* Muted/disabled text */
|
|
1644
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
1645
|
+
/* Text on dark backgrounds */
|
|
1646
|
+
--text-inverse: var(--primitive-color-neutral-50);
|
|
1647
|
+
/* Primary interactive (buttons, links) */
|
|
1648
|
+
--interactive-primary: var(--primitive-color-hanada-500);
|
|
1649
|
+
/* Primary interactive hover */
|
|
1650
|
+
--interactive-primary-hover: var(--primitive-color-hanada-600);
|
|
1651
|
+
/* Primary interactive active */
|
|
1652
|
+
--interactive-primary-active: var(--primitive-color-hanada-700);
|
|
1653
|
+
/* Default border */
|
|
1654
|
+
--border-default: var(--primitive-color-neutral-200);
|
|
1655
|
+
/* Strong border */
|
|
1656
|
+
--border-strong: var(--primitive-color-neutral-400);
|
|
1657
|
+
/* Error \u2014 WCAG-compliant red */
|
|
1658
|
+
--status-error: #DC2626;
|
|
1659
|
+
/* Success \u2014 WCAG-compliant green */
|
|
1660
|
+
--status-success: #16A34A;
|
|
1661
|
+
/* Warning \u2014 WCAG-compliant amber */
|
|
1662
|
+
--status-warning: #CA8A04;
|
|
1663
|
+
/* Info status */
|
|
1664
|
+
--status-info: var(--primitive-color-hanada-500);
|
|
1665
|
+
/* Focus ring color */
|
|
1666
|
+
--focus-ring: var(--primitive-color-hanada-500);
|
|
1667
|
+
/* Keyboard focus indicator */
|
|
1668
|
+
--accessibility-focus-visible: var(--primitive-color-hanada-500);
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1671
|
+
/* Dark mode semantic tokens */
|
|
1672
|
+
[data-theme="dark"] {
|
|
1673
|
+
/* Page background \u2014 dark */
|
|
1674
|
+
--background-canvas: var(--primitive-color-neutral-900);
|
|
1675
|
+
/* Card/surface \u2014 dark */
|
|
1676
|
+
--background-surface: var(--primitive-color-neutral-800);
|
|
1677
|
+
/* Muted background \u2014 dark */
|
|
1678
|
+
--background-muted: var(--primitive-color-neutral-700);
|
|
1679
|
+
/* Primary text \u2014 dark */
|
|
1680
|
+
--text-primary: var(--primitive-color-neutral-50);
|
|
1681
|
+
/* Secondary text \u2014 dark */
|
|
1682
|
+
--text-secondary: var(--primitive-color-neutral-300);
|
|
1683
|
+
/* Muted text \u2014 dark */
|
|
1684
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
1685
|
+
/* Text on light backgrounds \u2014 dark */
|
|
1686
|
+
--text-inverse: var(--primitive-color-neutral-900);
|
|
1687
|
+
/* Primary interactive \u2014 dark */
|
|
1688
|
+
--interactive-primary: var(--primitive-color-hanada-400);
|
|
1689
|
+
/* Primary hover \u2014 dark */
|
|
1690
|
+
--interactive-primary-hover: var(--primitive-color-hanada-300);
|
|
1691
|
+
/* Primary active \u2014 dark */
|
|
1692
|
+
--interactive-primary-active: var(--primitive-color-hanada-200);
|
|
1693
|
+
/* Default border \u2014 dark */
|
|
1694
|
+
--border-default: var(--primitive-color-neutral-700);
|
|
1695
|
+
/* Strong border \u2014 dark */
|
|
1696
|
+
--border-strong: var(--primitive-color-neutral-500);
|
|
1697
|
+
/* Error \u2014 WCAG-compliant red (dark) */
|
|
1698
|
+
--status-error: #EF4444;
|
|
1699
|
+
/* Success \u2014 WCAG-compliant green (dark) */
|
|
1700
|
+
--status-success: #22C55E;
|
|
1701
|
+
/* Warning \u2014 WCAG-compliant amber (dark) */
|
|
1702
|
+
--status-warning: #EAB308;
|
|
1703
|
+
/* Info \u2014 dark */
|
|
1704
|
+
--status-info: var(--primitive-color-hanada-400);
|
|
1705
|
+
/* Focus ring \u2014 dark */
|
|
1706
|
+
--focus-ring: var(--primitive-color-hanada-400);
|
|
1707
|
+
/* Keyboard focus \u2014 dark */
|
|
1708
|
+
--accessibility-focus-visible: var(--primitive-color-hanada-400);
|
|
1709
|
+
}
|
|
1710
|
+
`;
|
|
1711
|
+
|
|
1712
|
+
// src/nihon-traditional/index.ts
|
|
1713
|
+
var nihonTraditional = {
|
|
1714
|
+
tokens: tokens_default,
|
|
1715
|
+
css,
|
|
1716
|
+
tailwindCss,
|
|
1717
|
+
meta: meta_default
|
|
1718
|
+
};
|
|
1719
|
+
|
|
1720
|
+
// src/swiss-international/tokens.json
|
|
1721
|
+
var tokens_default2 = {
|
|
1722
|
+
$name: "swiss-international-style",
|
|
1723
|
+
$description: "Swiss International Typographic Style \u2014 precision, clarity, grid-based order from the Basel and Zurich schools",
|
|
1724
|
+
$extensions: {
|
|
1725
|
+
"syncupsuite.foundation": {
|
|
1726
|
+
story: "Born from the Basel and Zurich schools of the 1950s, Swiss International Style prioritized objective clarity over decorative expression. Designers like Josef M\xFCller-Brockmann and Armin Hofmann established principles of grid-based composition, asymmetric layouts, and sans-serif typography that became the global standard for corporate and informational design.",
|
|
1727
|
+
philosophy: "Sachlichkeit (Objectivity) \u2014 form follows function with mathematical precision",
|
|
1728
|
+
era: "1950s\u2013present",
|
|
1729
|
+
harmonyMode: "monochromatic",
|
|
1730
|
+
radiusTendency: "none",
|
|
1731
|
+
typographyCategory: "neo-grotesque"
|
|
1732
|
+
}
|
|
1733
|
+
},
|
|
1734
|
+
primitive: {
|
|
1735
|
+
color: {
|
|
1736
|
+
schwarz: {
|
|
1737
|
+
"50": {
|
|
1738
|
+
$type: "color",
|
|
1739
|
+
$value: "#F2F2F2",
|
|
1740
|
+
$description: "Schwarz 50"
|
|
1741
|
+
},
|
|
1742
|
+
"100": {
|
|
1743
|
+
$type: "color",
|
|
1744
|
+
$value: "#E6E6E6",
|
|
1745
|
+
$description: "Schwarz 100"
|
|
1746
|
+
},
|
|
1747
|
+
"200": {
|
|
1748
|
+
$type: "color",
|
|
1749
|
+
$value: "#CCCCCC",
|
|
1750
|
+
$description: "Schwarz 200"
|
|
1751
|
+
},
|
|
1752
|
+
"300": {
|
|
1753
|
+
$type: "color",
|
|
1754
|
+
$value: "#B3B3B3",
|
|
1755
|
+
$description: "Schwarz 300"
|
|
1756
|
+
},
|
|
1757
|
+
"400": {
|
|
1758
|
+
$type: "color",
|
|
1759
|
+
$value: "#999999",
|
|
1760
|
+
$description: "Schwarz 400"
|
|
1761
|
+
},
|
|
1762
|
+
"500": {
|
|
1763
|
+
$type: "color",
|
|
1764
|
+
$value: "#121212",
|
|
1765
|
+
$description: "Schwarz 500",
|
|
1766
|
+
$extensions: {
|
|
1767
|
+
"syncupsuite.provenance": {
|
|
1768
|
+
name: "Schwarz",
|
|
1769
|
+
tradition: "Pure typographic black. The foundation of Swiss poster design and Helvetica specimens.",
|
|
1770
|
+
source: "Swiss Graphic Design: The Origins and Growth of an International Style, R. Hollis",
|
|
1771
|
+
isSeed: true
|
|
1772
|
+
}
|
|
1773
|
+
}
|
|
1774
|
+
},
|
|
1775
|
+
"600": {
|
|
1776
|
+
$type: "color",
|
|
1777
|
+
$value: "#262626",
|
|
1778
|
+
$description: "Schwarz 600"
|
|
1779
|
+
},
|
|
1780
|
+
"700": {
|
|
1781
|
+
$type: "color",
|
|
1782
|
+
$value: "#1A1A1A",
|
|
1783
|
+
$description: "Schwarz 700"
|
|
1784
|
+
},
|
|
1785
|
+
"800": {
|
|
1786
|
+
$type: "color",
|
|
1787
|
+
$value: "#121212",
|
|
1788
|
+
$description: "Schwarz 800"
|
|
1789
|
+
},
|
|
1790
|
+
"900": {
|
|
1791
|
+
$type: "color",
|
|
1792
|
+
$value: "#0A0A0A",
|
|
1793
|
+
$description: "Schwarz 900"
|
|
1794
|
+
}
|
|
1795
|
+
},
|
|
1796
|
+
weiss: {
|
|
1797
|
+
"50": {
|
|
1798
|
+
$type: "color",
|
|
1799
|
+
$value: "#F2F2F2",
|
|
1800
|
+
$description: "Weiss 50"
|
|
1801
|
+
},
|
|
1802
|
+
"100": {
|
|
1803
|
+
$type: "color",
|
|
1804
|
+
$value: "#E6E6E6",
|
|
1805
|
+
$description: "Weiss 100"
|
|
1806
|
+
},
|
|
1807
|
+
"200": {
|
|
1808
|
+
$type: "color",
|
|
1809
|
+
$value: "#CCCCCC",
|
|
1810
|
+
$description: "Weiss 200"
|
|
1811
|
+
},
|
|
1812
|
+
"300": {
|
|
1813
|
+
$type: "color",
|
|
1814
|
+
$value: "#B3B3B3",
|
|
1815
|
+
$description: "Weiss 300"
|
|
1816
|
+
},
|
|
1817
|
+
"400": {
|
|
1818
|
+
$type: "color",
|
|
1819
|
+
$value: "#999999",
|
|
1820
|
+
$description: "Weiss 400"
|
|
1821
|
+
},
|
|
1822
|
+
"500": {
|
|
1823
|
+
$type: "color",
|
|
1824
|
+
$value: "#FAFAFA",
|
|
1825
|
+
$description: "Weiss 500",
|
|
1826
|
+
$extensions: {
|
|
1827
|
+
"syncupsuite.provenance": {
|
|
1828
|
+
name: "Weiss",
|
|
1829
|
+
tradition: "Paper white. The generous whitespace that gives Swiss design its breathing room.",
|
|
1830
|
+
source: "Grid Systems in Graphic Design, Josef M\xFCller-Brockmann",
|
|
1831
|
+
isSeed: true
|
|
1832
|
+
}
|
|
1833
|
+
}
|
|
1834
|
+
},
|
|
1835
|
+
"600": {
|
|
1836
|
+
$type: "color",
|
|
1837
|
+
$value: "#E6E6E6",
|
|
1838
|
+
$description: "Weiss 600"
|
|
1839
|
+
},
|
|
1840
|
+
"700": {
|
|
1841
|
+
$type: "color",
|
|
1842
|
+
$value: "#CCCCCC",
|
|
1843
|
+
$description: "Weiss 700"
|
|
1844
|
+
},
|
|
1845
|
+
"800": {
|
|
1846
|
+
$type: "color",
|
|
1847
|
+
$value: "#B3B3B3",
|
|
1848
|
+
$description: "Weiss 800"
|
|
1849
|
+
},
|
|
1850
|
+
"900": {
|
|
1851
|
+
$type: "color",
|
|
1852
|
+
$value: "#999999",
|
|
1853
|
+
$description: "Weiss 900"
|
|
1854
|
+
}
|
|
1855
|
+
},
|
|
1856
|
+
"rot-signal-red": {
|
|
1857
|
+
"50": {
|
|
1858
|
+
$type: "color",
|
|
1859
|
+
$value: "#F5EFEF",
|
|
1860
|
+
$description: "Rot (Signal Red) 50"
|
|
1861
|
+
},
|
|
1862
|
+
"100": {
|
|
1863
|
+
$type: "color",
|
|
1864
|
+
$value: "#ECE0DF",
|
|
1865
|
+
$description: "Rot (Signal Red) 100"
|
|
1866
|
+
},
|
|
1867
|
+
"200": {
|
|
1868
|
+
$type: "color",
|
|
1869
|
+
$value: "#F5A5A3",
|
|
1870
|
+
$description: "Rot (Signal Red) 200"
|
|
1871
|
+
},
|
|
1872
|
+
"300": {
|
|
1873
|
+
$type: "color",
|
|
1874
|
+
$value: "#F07775",
|
|
1875
|
+
$description: "Rot (Signal Red) 300"
|
|
1876
|
+
},
|
|
1877
|
+
"400": {
|
|
1878
|
+
$type: "color",
|
|
1879
|
+
$value: "#EB4A47",
|
|
1880
|
+
$description: "Rot (Signal Red) 400"
|
|
1881
|
+
},
|
|
1882
|
+
"500": {
|
|
1883
|
+
$type: "color",
|
|
1884
|
+
$value: "#E83430",
|
|
1885
|
+
$description: "Rot (Signal Red) 500",
|
|
1886
|
+
$extensions: {
|
|
1887
|
+
"syncupsuite.provenance": {
|
|
1888
|
+
name: "Rot (Signal Red)",
|
|
1889
|
+
tradition: "The accent of Swiss rail (SBB/CFF), national flag, and M\xFCller-Brockmann concert posters. Pure signal with no ambiguity.",
|
|
1890
|
+
source: "Swiss Style: The Graphic Design of Swiss International Style",
|
|
1891
|
+
isSeed: true
|
|
1892
|
+
}
|
|
1893
|
+
}
|
|
1894
|
+
},
|
|
1895
|
+
"600": {
|
|
1896
|
+
$type: "color",
|
|
1897
|
+
$value: "#D81B18",
|
|
1898
|
+
$description: "Rot (Signal Red) 600"
|
|
1899
|
+
},
|
|
1900
|
+
"700": {
|
|
1901
|
+
$type: "color",
|
|
1902
|
+
$value: "#AA1513",
|
|
1903
|
+
$description: "Rot (Signal Red) 700"
|
|
1904
|
+
},
|
|
1905
|
+
"800": {
|
|
1906
|
+
$type: "color",
|
|
1907
|
+
$value: "#7C100E",
|
|
1908
|
+
$description: "Rot (Signal Red) 800"
|
|
1909
|
+
},
|
|
1910
|
+
"900": {
|
|
1911
|
+
$type: "color",
|
|
1912
|
+
$value: "#4E0A09",
|
|
1913
|
+
$description: "Rot (Signal Red) 900"
|
|
1914
|
+
}
|
|
1915
|
+
},
|
|
1916
|
+
mittelgrau: {
|
|
1917
|
+
"50": {
|
|
1918
|
+
$type: "color",
|
|
1919
|
+
$value: "#F2F2F2",
|
|
1920
|
+
$description: "Mittelgrau 50"
|
|
1921
|
+
},
|
|
1922
|
+
"100": {
|
|
1923
|
+
$type: "color",
|
|
1924
|
+
$value: "#E6E6E6",
|
|
1925
|
+
$description: "Mittelgrau 100"
|
|
1926
|
+
},
|
|
1927
|
+
"200": {
|
|
1928
|
+
$type: "color",
|
|
1929
|
+
$value: "#CCCCCC",
|
|
1930
|
+
$description: "Mittelgrau 200"
|
|
1931
|
+
},
|
|
1932
|
+
"300": {
|
|
1933
|
+
$type: "color",
|
|
1934
|
+
$value: "#B3B3B3",
|
|
1935
|
+
$description: "Mittelgrau 300"
|
|
1936
|
+
},
|
|
1937
|
+
"400": {
|
|
1938
|
+
$type: "color",
|
|
1939
|
+
$value: "#999999",
|
|
1940
|
+
$description: "Mittelgrau 400"
|
|
1941
|
+
},
|
|
1942
|
+
"500": {
|
|
1943
|
+
$type: "color",
|
|
1944
|
+
$value: "#6E6E6E",
|
|
1945
|
+
$description: "Mittelgrau 500",
|
|
1946
|
+
$extensions: {
|
|
1947
|
+
"syncupsuite.provenance": {
|
|
1948
|
+
name: "Mittelgrau",
|
|
1949
|
+
tradition: "Mid-grey for secondary information hierarchy. Swiss design uses grey to create clear visual levels.",
|
|
1950
|
+
source: "Typographic Design: Form and Communication, R. Carter",
|
|
1951
|
+
isSeed: true
|
|
1952
|
+
}
|
|
1953
|
+
}
|
|
1954
|
+
},
|
|
1955
|
+
"600": {
|
|
1956
|
+
$type: "color",
|
|
1957
|
+
$value: "#595959",
|
|
1958
|
+
$description: "Mittelgrau 600"
|
|
1959
|
+
},
|
|
1960
|
+
"700": {
|
|
1961
|
+
$type: "color",
|
|
1962
|
+
$value: "#404040",
|
|
1963
|
+
$description: "Mittelgrau 700"
|
|
1964
|
+
},
|
|
1965
|
+
"800": {
|
|
1966
|
+
$type: "color",
|
|
1967
|
+
$value: "#262626",
|
|
1968
|
+
$description: "Mittelgrau 800"
|
|
1969
|
+
},
|
|
1970
|
+
"900": {
|
|
1971
|
+
$type: "color",
|
|
1972
|
+
$value: "#0D0D0D",
|
|
1973
|
+
$description: "Mittelgrau 900"
|
|
1974
|
+
}
|
|
1975
|
+
},
|
|
1976
|
+
hellgrau: {
|
|
1977
|
+
"50": {
|
|
1978
|
+
$type: "color",
|
|
1979
|
+
$value: "#F2F2F2",
|
|
1980
|
+
$description: "Hellgrau 50"
|
|
1981
|
+
},
|
|
1982
|
+
"100": {
|
|
1983
|
+
$type: "color",
|
|
1984
|
+
$value: "#E6E6E6",
|
|
1985
|
+
$description: "Hellgrau 100"
|
|
1986
|
+
},
|
|
1987
|
+
"200": {
|
|
1988
|
+
$type: "color",
|
|
1989
|
+
$value: "#CCCCCC",
|
|
1990
|
+
$description: "Hellgrau 200"
|
|
1991
|
+
},
|
|
1992
|
+
"300": {
|
|
1993
|
+
$type: "color",
|
|
1994
|
+
$value: "#B3B3B3",
|
|
1995
|
+
$description: "Hellgrau 300"
|
|
1996
|
+
},
|
|
1997
|
+
"400": {
|
|
1998
|
+
$type: "color",
|
|
1999
|
+
$value: "#999999",
|
|
2000
|
+
$description: "Hellgrau 400"
|
|
2001
|
+
},
|
|
2002
|
+
"500": {
|
|
2003
|
+
$type: "color",
|
|
2004
|
+
$value: "#D4D4D4",
|
|
2005
|
+
$description: "Hellgrau 500",
|
|
2006
|
+
$extensions: {
|
|
2007
|
+
"syncupsuite.provenance": {
|
|
2008
|
+
name: "Hellgrau",
|
|
2009
|
+
tradition: "Light grey for borders, dividers, and subtle structural elements in grid systems.",
|
|
2010
|
+
source: "Swiss Graphic Design",
|
|
2011
|
+
isSeed: true
|
|
2012
|
+
}
|
|
2013
|
+
}
|
|
2014
|
+
},
|
|
2015
|
+
"600": {
|
|
2016
|
+
$type: "color",
|
|
2017
|
+
$value: "#BFBFBF",
|
|
2018
|
+
$description: "Hellgrau 600"
|
|
2019
|
+
},
|
|
2020
|
+
"700": {
|
|
2021
|
+
$type: "color",
|
|
2022
|
+
$value: "#A6A6A6",
|
|
2023
|
+
$description: "Hellgrau 700"
|
|
2024
|
+
},
|
|
2025
|
+
"800": {
|
|
2026
|
+
$type: "color",
|
|
2027
|
+
$value: "#8C8C8C",
|
|
2028
|
+
$description: "Hellgrau 800"
|
|
2029
|
+
},
|
|
2030
|
+
"900": {
|
|
2031
|
+
$type: "color",
|
|
2032
|
+
$value: "#737373",
|
|
2033
|
+
$description: "Hellgrau 900"
|
|
2034
|
+
}
|
|
2035
|
+
},
|
|
2036
|
+
dunkelblau: {
|
|
2037
|
+
"50": {
|
|
2038
|
+
$type: "color",
|
|
2039
|
+
$value: "#F0F2F4",
|
|
2040
|
+
$description: "Dunkelblau 50"
|
|
2041
|
+
},
|
|
2042
|
+
"100": {
|
|
2043
|
+
$type: "color",
|
|
2044
|
+
$value: "#E1E5EA",
|
|
2045
|
+
$description: "Dunkelblau 100"
|
|
2046
|
+
},
|
|
2047
|
+
"200": {
|
|
2048
|
+
$type: "color",
|
|
2049
|
+
$value: "#AFCBE9",
|
|
2050
|
+
$description: "Dunkelblau 200"
|
|
2051
|
+
},
|
|
2052
|
+
"300": {
|
|
2053
|
+
$type: "color",
|
|
2054
|
+
$value: "#88B1DD",
|
|
2055
|
+
$description: "Dunkelblau 300"
|
|
2056
|
+
},
|
|
2057
|
+
"400": {
|
|
2058
|
+
$type: "color",
|
|
2059
|
+
$value: "#6097D2",
|
|
2060
|
+
$description: "Dunkelblau 400"
|
|
2061
|
+
},
|
|
2062
|
+
"500": {
|
|
2063
|
+
$type: "color",
|
|
2064
|
+
$value: "#1A3A5B",
|
|
2065
|
+
$description: "Dunkelblau 500",
|
|
2066
|
+
$extensions: {
|
|
2067
|
+
"syncupsuite.provenance": {
|
|
2068
|
+
name: "Dunkelblau",
|
|
2069
|
+
tradition: "Swiss corporate blue. Used in banking, insurance, and institutional communications for trust and authority.",
|
|
2070
|
+
source: "Corporate Design, Wally Olins",
|
|
2071
|
+
isSeed: true
|
|
2072
|
+
}
|
|
2073
|
+
}
|
|
2074
|
+
},
|
|
2075
|
+
"600": {
|
|
2076
|
+
$type: "color",
|
|
2077
|
+
$value: "#11263C",
|
|
2078
|
+
$description: "Dunkelblau 600"
|
|
2079
|
+
},
|
|
2080
|
+
"700": {
|
|
2081
|
+
$type: "color",
|
|
2082
|
+
$value: "#111922",
|
|
2083
|
+
$description: "Dunkelblau 700"
|
|
2084
|
+
},
|
|
2085
|
+
"800": {
|
|
2086
|
+
$type: "color",
|
|
2087
|
+
$value: "#0C1218",
|
|
2088
|
+
$description: "Dunkelblau 800"
|
|
2089
|
+
},
|
|
2090
|
+
"900": {
|
|
2091
|
+
$type: "color",
|
|
2092
|
+
$value: "#070A0E",
|
|
2093
|
+
$description: "Dunkelblau 900"
|
|
2094
|
+
}
|
|
2095
|
+
},
|
|
2096
|
+
neutral: {
|
|
2097
|
+
"50": {
|
|
2098
|
+
$type: "color",
|
|
2099
|
+
$value: "#F8F7F7",
|
|
2100
|
+
$description: "Neutral 50"
|
|
2101
|
+
},
|
|
2102
|
+
"100": {
|
|
2103
|
+
$type: "color",
|
|
2104
|
+
$value: "#F0EFEF",
|
|
2105
|
+
$description: "Neutral 100"
|
|
2106
|
+
},
|
|
2107
|
+
"200": {
|
|
2108
|
+
$type: "color",
|
|
2109
|
+
$value: "#E1DFDF",
|
|
2110
|
+
$description: "Neutral 200"
|
|
2111
|
+
},
|
|
2112
|
+
"300": {
|
|
2113
|
+
$type: "color",
|
|
2114
|
+
$value: "#C9C5C5",
|
|
2115
|
+
$description: "Neutral 300"
|
|
2116
|
+
},
|
|
2117
|
+
"400": {
|
|
2118
|
+
$type: "color",
|
|
2119
|
+
$value: "#A19B9B",
|
|
2120
|
+
$description: "Neutral 400"
|
|
2121
|
+
},
|
|
2122
|
+
"500": {
|
|
2123
|
+
$type: "color",
|
|
2124
|
+
$value: "#797272",
|
|
2125
|
+
$description: "Neutral 500"
|
|
2126
|
+
},
|
|
2127
|
+
"600": {
|
|
2128
|
+
$type: "color",
|
|
2129
|
+
$value: "#5F5959",
|
|
2130
|
+
$description: "Neutral 600"
|
|
2131
|
+
},
|
|
2132
|
+
"700": {
|
|
2133
|
+
$type: "color",
|
|
2134
|
+
$value: "#444040",
|
|
2135
|
+
$description: "Neutral 700"
|
|
2136
|
+
},
|
|
2137
|
+
"800": {
|
|
2138
|
+
$type: "color",
|
|
2139
|
+
$value: "#2A2828",
|
|
2140
|
+
$description: "Neutral 800"
|
|
2141
|
+
},
|
|
2142
|
+
"900": {
|
|
2143
|
+
$type: "color",
|
|
2144
|
+
$value: "#151414",
|
|
2145
|
+
$description: "Neutral 900"
|
|
2146
|
+
}
|
|
2147
|
+
},
|
|
2148
|
+
accent: {
|
|
2149
|
+
"50": {
|
|
2150
|
+
$type: "color",
|
|
2151
|
+
$value: "#F3F2F2",
|
|
2152
|
+
$description: "Accent 50"
|
|
2153
|
+
},
|
|
2154
|
+
"100": {
|
|
2155
|
+
$type: "color",
|
|
2156
|
+
$value: "#E7E4E4",
|
|
2157
|
+
$description: "Accent 100"
|
|
2158
|
+
},
|
|
2159
|
+
"200": {
|
|
2160
|
+
$type: "color",
|
|
2161
|
+
$value: "#D4C4C4",
|
|
2162
|
+
$description: "Accent 200"
|
|
2163
|
+
},
|
|
2164
|
+
"300": {
|
|
2165
|
+
$type: "color",
|
|
2166
|
+
$value: "#BEA7A7",
|
|
2167
|
+
$description: "Accent 300"
|
|
2168
|
+
},
|
|
2169
|
+
"400": {
|
|
2170
|
+
$type: "color",
|
|
2171
|
+
$value: "#A88A8A",
|
|
2172
|
+
$description: "Accent 400"
|
|
2173
|
+
},
|
|
2174
|
+
"500": {
|
|
2175
|
+
$type: "color",
|
|
2176
|
+
$value: "#4F3B3B",
|
|
2177
|
+
$description: "Accent 500"
|
|
2178
|
+
},
|
|
2179
|
+
"600": {
|
|
2180
|
+
$type: "color",
|
|
2181
|
+
$value: "#382929",
|
|
2182
|
+
$description: "Accent 600"
|
|
2183
|
+
},
|
|
2184
|
+
"700": {
|
|
2185
|
+
$type: "color",
|
|
2186
|
+
$value: "#1C1717",
|
|
2187
|
+
$description: "Accent 700"
|
|
2188
|
+
},
|
|
2189
|
+
"800": {
|
|
2190
|
+
$type: "color",
|
|
2191
|
+
$value: "#131010",
|
|
2192
|
+
$description: "Accent 800"
|
|
2193
|
+
},
|
|
2194
|
+
"900": {
|
|
2195
|
+
$type: "color",
|
|
2196
|
+
$value: "#0B0909",
|
|
2197
|
+
$description: "Accent 900"
|
|
2198
|
+
}
|
|
2199
|
+
}
|
|
2200
|
+
},
|
|
2201
|
+
typography: {
|
|
2202
|
+
family: {
|
|
2203
|
+
heading: {
|
|
2204
|
+
$type: "fontFamily",
|
|
2205
|
+
$value: '"Inter", "Helvetica Neue", "Arial", sans-serif',
|
|
2206
|
+
$description: "Heading font family"
|
|
2207
|
+
},
|
|
2208
|
+
body: {
|
|
2209
|
+
$type: "fontFamily",
|
|
2210
|
+
$value: '"Inter", "Helvetica Neue", "Arial", sans-serif',
|
|
2211
|
+
$description: "Body font family"
|
|
2212
|
+
},
|
|
2213
|
+
mono: {
|
|
2214
|
+
$type: "fontFamily",
|
|
2215
|
+
$value: '"JetBrains Mono", "SF Mono", monospace',
|
|
2216
|
+
$description: "Monospace font family"
|
|
2217
|
+
}
|
|
2218
|
+
},
|
|
2219
|
+
size: {
|
|
2220
|
+
xs: {
|
|
2221
|
+
$type: "dimension",
|
|
2222
|
+
$value: "0.75rem",
|
|
2223
|
+
$description: "Font size xs"
|
|
2224
|
+
},
|
|
2225
|
+
sm: {
|
|
2226
|
+
$type: "dimension",
|
|
2227
|
+
$value: "0.875rem",
|
|
2228
|
+
$description: "Font size sm"
|
|
2229
|
+
},
|
|
2230
|
+
base: {
|
|
2231
|
+
$type: "dimension",
|
|
2232
|
+
$value: "1rem",
|
|
2233
|
+
$description: "Font size base"
|
|
2234
|
+
},
|
|
2235
|
+
lg: {
|
|
2236
|
+
$type: "dimension",
|
|
2237
|
+
$value: "1.125rem",
|
|
2238
|
+
$description: "Font size lg"
|
|
2239
|
+
},
|
|
2240
|
+
xl: {
|
|
2241
|
+
$type: "dimension",
|
|
2242
|
+
$value: "1.25rem",
|
|
2243
|
+
$description: "Font size xl"
|
|
2244
|
+
},
|
|
2245
|
+
"2xl": {
|
|
2246
|
+
$type: "dimension",
|
|
2247
|
+
$value: "1.5rem",
|
|
2248
|
+
$description: "Font size 2xl"
|
|
2249
|
+
},
|
|
2250
|
+
"3xl": {
|
|
2251
|
+
$type: "dimension",
|
|
2252
|
+
$value: "1.875rem",
|
|
2253
|
+
$description: "Font size 3xl"
|
|
2254
|
+
},
|
|
2255
|
+
"4xl": {
|
|
2256
|
+
$type: "dimension",
|
|
2257
|
+
$value: "2.25rem",
|
|
2258
|
+
$description: "Font size 4xl"
|
|
2259
|
+
}
|
|
2260
|
+
},
|
|
2261
|
+
weight: {
|
|
2262
|
+
normal: {
|
|
2263
|
+
$type: "fontWeight",
|
|
2264
|
+
$value: "400",
|
|
2265
|
+
$description: "Font weight normal"
|
|
2266
|
+
},
|
|
2267
|
+
medium: {
|
|
2268
|
+
$type: "fontWeight",
|
|
2269
|
+
$value: "500",
|
|
2270
|
+
$description: "Font weight medium"
|
|
2271
|
+
},
|
|
2272
|
+
semibold: {
|
|
2273
|
+
$type: "fontWeight",
|
|
2274
|
+
$value: "600",
|
|
2275
|
+
$description: "Font weight semibold"
|
|
2276
|
+
},
|
|
2277
|
+
bold: {
|
|
2278
|
+
$type: "fontWeight",
|
|
2279
|
+
$value: "700",
|
|
2280
|
+
$description: "Font weight bold"
|
|
2281
|
+
}
|
|
2282
|
+
},
|
|
2283
|
+
lineHeight: {
|
|
2284
|
+
tight: {
|
|
2285
|
+
$type: "number",
|
|
2286
|
+
$value: "1.25",
|
|
2287
|
+
$description: "Line height tight"
|
|
2288
|
+
},
|
|
2289
|
+
normal: {
|
|
2290
|
+
$type: "number",
|
|
2291
|
+
$value: "1.5",
|
|
2292
|
+
$description: "Line height normal"
|
|
2293
|
+
},
|
|
2294
|
+
relaxed: {
|
|
2295
|
+
$type: "number",
|
|
2296
|
+
$value: "1.75",
|
|
2297
|
+
$description: "Line height relaxed"
|
|
2298
|
+
}
|
|
2299
|
+
}
|
|
2300
|
+
},
|
|
2301
|
+
spacing: {
|
|
2302
|
+
"0": {
|
|
2303
|
+
$type: "dimension",
|
|
2304
|
+
$value: "0px",
|
|
2305
|
+
$description: "Spacing 0 (0px)"
|
|
2306
|
+
},
|
|
2307
|
+
"1": {
|
|
2308
|
+
$type: "dimension",
|
|
2309
|
+
$value: "4px",
|
|
2310
|
+
$description: "Spacing 1 (4px)"
|
|
2311
|
+
},
|
|
2312
|
+
"2": {
|
|
2313
|
+
$type: "dimension",
|
|
2314
|
+
$value: "8px",
|
|
2315
|
+
$description: "Spacing 2 (8px)"
|
|
2316
|
+
},
|
|
2317
|
+
"3": {
|
|
2318
|
+
$type: "dimension",
|
|
2319
|
+
$value: "12px",
|
|
2320
|
+
$description: "Spacing 3 (12px)"
|
|
2321
|
+
},
|
|
2322
|
+
"4": {
|
|
2323
|
+
$type: "dimension",
|
|
2324
|
+
$value: "16px",
|
|
2325
|
+
$description: "Spacing 4 (16px)"
|
|
2326
|
+
},
|
|
2327
|
+
"5": {
|
|
2328
|
+
$type: "dimension",
|
|
2329
|
+
$value: "20px",
|
|
2330
|
+
$description: "Spacing 5 (20px)"
|
|
2331
|
+
},
|
|
2332
|
+
"6": {
|
|
2333
|
+
$type: "dimension",
|
|
2334
|
+
$value: "24px",
|
|
2335
|
+
$description: "Spacing 6 (24px)"
|
|
2336
|
+
},
|
|
2337
|
+
"8": {
|
|
2338
|
+
$type: "dimension",
|
|
2339
|
+
$value: "32px",
|
|
2340
|
+
$description: "Spacing 8 (32px)"
|
|
2341
|
+
},
|
|
2342
|
+
"10": {
|
|
2343
|
+
$type: "dimension",
|
|
2344
|
+
$value: "40px",
|
|
2345
|
+
$description: "Spacing 10 (40px)"
|
|
2346
|
+
},
|
|
2347
|
+
"12": {
|
|
2348
|
+
$type: "dimension",
|
|
2349
|
+
$value: "48px",
|
|
2350
|
+
$description: "Spacing 12 (48px)"
|
|
2351
|
+
},
|
|
2352
|
+
"16": {
|
|
2353
|
+
$type: "dimension",
|
|
2354
|
+
$value: "64px",
|
|
2355
|
+
$description: "Spacing 16 (64px)"
|
|
2356
|
+
},
|
|
2357
|
+
"20": {
|
|
2358
|
+
$type: "dimension",
|
|
2359
|
+
$value: "80px",
|
|
2360
|
+
$description: "Spacing 20 (80px)"
|
|
2361
|
+
},
|
|
2362
|
+
"0.5": {
|
|
2363
|
+
$type: "dimension",
|
|
2364
|
+
$value: "2px",
|
|
2365
|
+
$description: "Spacing 0.5 (2px)"
|
|
2366
|
+
},
|
|
2367
|
+
"1.5": {
|
|
2368
|
+
$type: "dimension",
|
|
2369
|
+
$value: "6px",
|
|
2370
|
+
$description: "Spacing 1.5 (6px)"
|
|
2371
|
+
}
|
|
2372
|
+
},
|
|
2373
|
+
radius: {
|
|
2374
|
+
none: {
|
|
2375
|
+
$type: "dimension",
|
|
2376
|
+
$value: "0px",
|
|
2377
|
+
$description: "Border radius none"
|
|
2378
|
+
},
|
|
2379
|
+
sm: {
|
|
2380
|
+
$type: "dimension",
|
|
2381
|
+
$value: "0px",
|
|
2382
|
+
$description: "Border radius sm"
|
|
2383
|
+
},
|
|
2384
|
+
md: {
|
|
2385
|
+
$type: "dimension",
|
|
2386
|
+
$value: "0px",
|
|
2387
|
+
$description: "Border radius md"
|
|
2388
|
+
},
|
|
2389
|
+
lg: {
|
|
2390
|
+
$type: "dimension",
|
|
2391
|
+
$value: "0px",
|
|
2392
|
+
$description: "Border radius lg"
|
|
2393
|
+
},
|
|
2394
|
+
xl: {
|
|
2395
|
+
$type: "dimension",
|
|
2396
|
+
$value: "0px",
|
|
2397
|
+
$description: "Border radius xl"
|
|
2398
|
+
},
|
|
2399
|
+
full: {
|
|
2400
|
+
$type: "dimension",
|
|
2401
|
+
$value: "9999px",
|
|
2402
|
+
$description: "Border radius full"
|
|
2403
|
+
}
|
|
2404
|
+
}
|
|
2405
|
+
},
|
|
2406
|
+
semantic: {
|
|
2407
|
+
light: {
|
|
2408
|
+
background: {
|
|
2409
|
+
canvas: {
|
|
2410
|
+
$type: "color",
|
|
2411
|
+
$value: "{primitive.color.neutral.50}",
|
|
2412
|
+
$description: "Page background"
|
|
2413
|
+
},
|
|
2414
|
+
surface: {
|
|
2415
|
+
$type: "color",
|
|
2416
|
+
$value: "#FFFFFF",
|
|
2417
|
+
$description: "Card/surface background"
|
|
2418
|
+
},
|
|
2419
|
+
muted: {
|
|
2420
|
+
$type: "color",
|
|
2421
|
+
$value: "{primitive.color.neutral.100}",
|
|
2422
|
+
$description: "Muted background"
|
|
2423
|
+
}
|
|
2424
|
+
},
|
|
2425
|
+
text: {
|
|
2426
|
+
primary: {
|
|
2427
|
+
$type: "color",
|
|
2428
|
+
$value: "{primitive.color.neutral.900}",
|
|
2429
|
+
$description: "Primary text"
|
|
2430
|
+
},
|
|
2431
|
+
secondary: {
|
|
2432
|
+
$type: "color",
|
|
2433
|
+
$value: "{primitive.color.neutral.600}",
|
|
2434
|
+
$description: "Secondary text"
|
|
2435
|
+
},
|
|
2436
|
+
muted: {
|
|
2437
|
+
$type: "color",
|
|
2438
|
+
$value: "{primitive.color.neutral.500}",
|
|
2439
|
+
$description: "Muted/disabled text"
|
|
2440
|
+
},
|
|
2441
|
+
inverse: {
|
|
2442
|
+
$type: "color",
|
|
2443
|
+
$value: "{primitive.color.neutral.50}",
|
|
2444
|
+
$description: "Text on dark backgrounds"
|
|
2445
|
+
}
|
|
2446
|
+
},
|
|
2447
|
+
interactive: {
|
|
2448
|
+
primary: {
|
|
2449
|
+
$type: "color",
|
|
2450
|
+
$value: "{primitive.color.schwarz.500}",
|
|
2451
|
+
$description: "Primary interactive (buttons, links)"
|
|
2452
|
+
},
|
|
2453
|
+
"primary-hover": {
|
|
2454
|
+
$type: "color",
|
|
2455
|
+
$value: "{primitive.color.schwarz.600}",
|
|
2456
|
+
$description: "Primary interactive hover"
|
|
2457
|
+
},
|
|
2458
|
+
"primary-active": {
|
|
2459
|
+
$type: "color",
|
|
2460
|
+
$value: "{primitive.color.schwarz.700}",
|
|
2461
|
+
$description: "Primary interactive active"
|
|
2462
|
+
}
|
|
2463
|
+
},
|
|
2464
|
+
border: {
|
|
2465
|
+
default: {
|
|
2466
|
+
$type: "color",
|
|
2467
|
+
$value: "{primitive.color.neutral.200}",
|
|
2468
|
+
$description: "Default border"
|
|
2469
|
+
},
|
|
2470
|
+
strong: {
|
|
2471
|
+
$type: "color",
|
|
2472
|
+
$value: "{primitive.color.neutral.400}",
|
|
2473
|
+
$description: "Strong border"
|
|
2474
|
+
}
|
|
2475
|
+
},
|
|
2476
|
+
status: {
|
|
2477
|
+
error: {
|
|
2478
|
+
$type: "color",
|
|
2479
|
+
$value: "#DC2626",
|
|
2480
|
+
$description: "Error \u2014 WCAG-compliant red"
|
|
2481
|
+
},
|
|
2482
|
+
success: {
|
|
2483
|
+
$type: "color",
|
|
2484
|
+
$value: "#16A34A",
|
|
2485
|
+
$description: "Success \u2014 WCAG-compliant green"
|
|
2486
|
+
},
|
|
2487
|
+
warning: {
|
|
2488
|
+
$type: "color",
|
|
2489
|
+
$value: "#CA8A04",
|
|
2490
|
+
$description: "Warning \u2014 WCAG-compliant amber"
|
|
2491
|
+
},
|
|
2492
|
+
info: {
|
|
2493
|
+
$type: "color",
|
|
2494
|
+
$value: "{primitive.color.schwarz.500}",
|
|
2495
|
+
$description: "Info status"
|
|
2496
|
+
}
|
|
2497
|
+
},
|
|
2498
|
+
focus: {
|
|
2499
|
+
ring: {
|
|
2500
|
+
$type: "color",
|
|
2501
|
+
$value: "{primitive.color.schwarz.500}",
|
|
2502
|
+
$description: "Focus ring color"
|
|
2503
|
+
}
|
|
2504
|
+
},
|
|
2505
|
+
accessibility: {
|
|
2506
|
+
"focus-visible": {
|
|
2507
|
+
$type: "color",
|
|
2508
|
+
$value: "{primitive.color.schwarz.500}",
|
|
2509
|
+
$description: "Keyboard focus indicator"
|
|
2510
|
+
}
|
|
2511
|
+
}
|
|
2512
|
+
},
|
|
2513
|
+
dark: {
|
|
2514
|
+
background: {
|
|
2515
|
+
canvas: {
|
|
2516
|
+
$type: "color",
|
|
2517
|
+
$value: "{primitive.color.neutral.900}",
|
|
2518
|
+
$description: "Page background \u2014 dark"
|
|
2519
|
+
},
|
|
2520
|
+
surface: {
|
|
2521
|
+
$type: "color",
|
|
2522
|
+
$value: "{primitive.color.neutral.800}",
|
|
2523
|
+
$description: "Card/surface \u2014 dark"
|
|
2524
|
+
},
|
|
2525
|
+
muted: {
|
|
2526
|
+
$type: "color",
|
|
2527
|
+
$value: "{primitive.color.neutral.700}",
|
|
2528
|
+
$description: "Muted background \u2014 dark"
|
|
2529
|
+
}
|
|
2530
|
+
},
|
|
2531
|
+
text: {
|
|
2532
|
+
primary: {
|
|
2533
|
+
$type: "color",
|
|
2534
|
+
$value: "{primitive.color.neutral.50}",
|
|
2535
|
+
$description: "Primary text \u2014 dark"
|
|
2536
|
+
},
|
|
2537
|
+
secondary: {
|
|
2538
|
+
$type: "color",
|
|
2539
|
+
$value: "{primitive.color.neutral.300}",
|
|
2540
|
+
$description: "Secondary text \u2014 dark"
|
|
2541
|
+
},
|
|
2542
|
+
muted: {
|
|
2543
|
+
$type: "color",
|
|
2544
|
+
$value: "{primitive.color.neutral.500}",
|
|
2545
|
+
$description: "Muted text \u2014 dark"
|
|
2546
|
+
},
|
|
2547
|
+
inverse: {
|
|
2548
|
+
$type: "color",
|
|
2549
|
+
$value: "{primitive.color.neutral.900}",
|
|
2550
|
+
$description: "Text on light backgrounds \u2014 dark"
|
|
2551
|
+
}
|
|
2552
|
+
},
|
|
2553
|
+
interactive: {
|
|
2554
|
+
primary: {
|
|
2555
|
+
$type: "color",
|
|
2556
|
+
$value: "{primitive.color.schwarz.400}",
|
|
2557
|
+
$description: "Primary interactive \u2014 dark"
|
|
2558
|
+
},
|
|
2559
|
+
"primary-hover": {
|
|
2560
|
+
$type: "color",
|
|
2561
|
+
$value: "{primitive.color.schwarz.300}",
|
|
2562
|
+
$description: "Primary hover \u2014 dark"
|
|
2563
|
+
},
|
|
2564
|
+
"primary-active": {
|
|
2565
|
+
$type: "color",
|
|
2566
|
+
$value: "{primitive.color.schwarz.200}",
|
|
2567
|
+
$description: "Primary active \u2014 dark"
|
|
2568
|
+
}
|
|
2569
|
+
},
|
|
2570
|
+
border: {
|
|
2571
|
+
default: {
|
|
2572
|
+
$type: "color",
|
|
2573
|
+
$value: "{primitive.color.neutral.700}",
|
|
2574
|
+
$description: "Default border \u2014 dark"
|
|
2575
|
+
},
|
|
2576
|
+
strong: {
|
|
2577
|
+
$type: "color",
|
|
2578
|
+
$value: "{primitive.color.neutral.500}",
|
|
2579
|
+
$description: "Strong border \u2014 dark"
|
|
2580
|
+
}
|
|
2581
|
+
},
|
|
2582
|
+
status: {
|
|
2583
|
+
error: {
|
|
2584
|
+
$type: "color",
|
|
2585
|
+
$value: "#EF4444",
|
|
2586
|
+
$description: "Error \u2014 WCAG-compliant red (dark)"
|
|
2587
|
+
},
|
|
2588
|
+
success: {
|
|
2589
|
+
$type: "color",
|
|
2590
|
+
$value: "#22C55E",
|
|
2591
|
+
$description: "Success \u2014 WCAG-compliant green (dark)"
|
|
2592
|
+
},
|
|
2593
|
+
warning: {
|
|
2594
|
+
$type: "color",
|
|
2595
|
+
$value: "#EAB308",
|
|
2596
|
+
$description: "Warning \u2014 WCAG-compliant amber (dark)"
|
|
2597
|
+
},
|
|
2598
|
+
info: {
|
|
2599
|
+
$type: "color",
|
|
2600
|
+
$value: "{primitive.color.schwarz.400}",
|
|
2601
|
+
$description: "Info \u2014 dark"
|
|
2602
|
+
}
|
|
2603
|
+
},
|
|
2604
|
+
focus: {
|
|
2605
|
+
ring: {
|
|
2606
|
+
$type: "color",
|
|
2607
|
+
$value: "{primitive.color.schwarz.400}",
|
|
2608
|
+
$description: "Focus ring \u2014 dark"
|
|
2609
|
+
}
|
|
2610
|
+
},
|
|
2611
|
+
accessibility: {
|
|
2612
|
+
"focus-visible": {
|
|
2613
|
+
$type: "color",
|
|
2614
|
+
$value: "{primitive.color.schwarz.400}",
|
|
2615
|
+
$description: "Keyboard focus \u2014 dark"
|
|
2616
|
+
}
|
|
2617
|
+
}
|
|
2618
|
+
}
|
|
2619
|
+
}
|
|
2620
|
+
};
|
|
2621
|
+
|
|
2622
|
+
// src/swiss-international/meta.json
|
|
2623
|
+
var meta_default2 = {
|
|
2624
|
+
id: "swiss-international-style",
|
|
2625
|
+
name: "Swiss International Typographic Style",
|
|
2626
|
+
description: "Swiss International Typographic Style \u2014 precision, clarity, grid-based order from the Basel and Zurich schools",
|
|
2627
|
+
foundation: {
|
|
2628
|
+
story: "Born from the Basel and Zurich schools of the 1950s, Swiss International Style prioritized objective clarity over decorative expression. Designers like Josef M\xFCller-Brockmann and Armin Hofmann established principles of grid-based composition, asymmetric layouts, and sans-serif typography that became the global standard for corporate and informational design.",
|
|
2629
|
+
philosophy: "Sachlichkeit (Objectivity) \u2014 form follows function with mathematical precision",
|
|
2630
|
+
era: "1950s\u2013present",
|
|
2631
|
+
harmonyMode: "monochromatic",
|
|
2632
|
+
radiusTendency: "none",
|
|
2633
|
+
typographyCategory: "neo-grotesque"
|
|
2634
|
+
},
|
|
2635
|
+
seedColors: [
|
|
2636
|
+
{
|
|
2637
|
+
hex: "#111111",
|
|
2638
|
+
name: "Schwarz",
|
|
2639
|
+
tradition: "Pure typographic black. The foundation of Swiss poster design and Helvetica specimens.",
|
|
2640
|
+
source: "Swiss Graphic Design: The Origins and Growth of an International Style, R. Hollis"
|
|
2641
|
+
},
|
|
2642
|
+
{
|
|
2643
|
+
hex: "#FAFAFA",
|
|
2644
|
+
name: "Weiss",
|
|
2645
|
+
tradition: "Paper white. The generous whitespace that gives Swiss design its breathing room.",
|
|
2646
|
+
source: "Grid Systems in Graphic Design, Josef M\xFCller-Brockmann"
|
|
2647
|
+
},
|
|
2648
|
+
{
|
|
2649
|
+
hex: "#E8322E",
|
|
2650
|
+
name: "Rot (Signal Red)",
|
|
2651
|
+
tradition: "The accent of Swiss rail (SBB/CFF), national flag, and M\xFCller-Brockmann concert posters. Pure signal with no ambiguity.",
|
|
2652
|
+
source: "Swiss Style: The Graphic Design of Swiss International Style"
|
|
2653
|
+
},
|
|
2654
|
+
{
|
|
2655
|
+
hex: "#6E6E6E",
|
|
2656
|
+
name: "Mittelgrau",
|
|
2657
|
+
tradition: "Mid-grey for secondary information hierarchy. Swiss design uses grey to create clear visual levels.",
|
|
2658
|
+
source: "Typographic Design: Form and Communication, R. Carter"
|
|
2659
|
+
},
|
|
2660
|
+
{
|
|
2661
|
+
hex: "#D4D4D4",
|
|
2662
|
+
name: "Hellgrau",
|
|
2663
|
+
tradition: "Light grey for borders, dividers, and subtle structural elements in grid systems.",
|
|
2664
|
+
source: "Swiss Graphic Design"
|
|
2665
|
+
},
|
|
2666
|
+
{
|
|
2667
|
+
hex: "#1A3A5C",
|
|
2668
|
+
name: "Dunkelblau",
|
|
2669
|
+
tradition: "Swiss corporate blue. Used in banking, insurance, and institutional communications for trust and authority.",
|
|
2670
|
+
source: "Corporate Design, Wally Olins"
|
|
2671
|
+
}
|
|
2672
|
+
],
|
|
2673
|
+
validation: {
|
|
2674
|
+
schema: true,
|
|
2675
|
+
contrast: true,
|
|
2676
|
+
completeness: true
|
|
2677
|
+
}
|
|
2678
|
+
};
|
|
2679
|
+
|
|
2680
|
+
// src/swiss-international/_css.ts
|
|
2681
|
+
var css2 = `/* swiss-international-style \u2014 Design Tokens */
|
|
2682
|
+
/* Generated by @syncupsuite/transformers */
|
|
2683
|
+
|
|
2684
|
+
:root {
|
|
2685
|
+
/* --- Primitive Colors --- */
|
|
2686
|
+
/* Schwarz 50 */
|
|
2687
|
+
--primitive-color-schwarz-50: #F2F2F2;
|
|
2688
|
+
/* Schwarz 100 */
|
|
2689
|
+
--primitive-color-schwarz-100: #E6E6E6;
|
|
2690
|
+
/* Schwarz 200 */
|
|
2691
|
+
--primitive-color-schwarz-200: #CCCCCC;
|
|
2692
|
+
/* Schwarz 300 */
|
|
2693
|
+
--primitive-color-schwarz-300: #B3B3B3;
|
|
2694
|
+
/* Schwarz 400 */
|
|
2695
|
+
--primitive-color-schwarz-400: #999999;
|
|
2696
|
+
/* Schwarz 500 */
|
|
2697
|
+
--primitive-color-schwarz-500: #121212;
|
|
2698
|
+
/* Schwarz 600 */
|
|
2699
|
+
--primitive-color-schwarz-600: #262626;
|
|
2700
|
+
/* Schwarz 700 */
|
|
2701
|
+
--primitive-color-schwarz-700: #1A1A1A;
|
|
2702
|
+
/* Schwarz 800 */
|
|
2703
|
+
--primitive-color-schwarz-800: #121212;
|
|
2704
|
+
/* Schwarz 900 */
|
|
2705
|
+
--primitive-color-schwarz-900: #0A0A0A;
|
|
2706
|
+
/* Weiss 50 */
|
|
2707
|
+
--primitive-color-weiss-50: #F2F2F2;
|
|
2708
|
+
/* Weiss 100 */
|
|
2709
|
+
--primitive-color-weiss-100: #E6E6E6;
|
|
2710
|
+
/* Weiss 200 */
|
|
2711
|
+
--primitive-color-weiss-200: #CCCCCC;
|
|
2712
|
+
/* Weiss 300 */
|
|
2713
|
+
--primitive-color-weiss-300: #B3B3B3;
|
|
2714
|
+
/* Weiss 400 */
|
|
2715
|
+
--primitive-color-weiss-400: #999999;
|
|
2716
|
+
/* Weiss 500 */
|
|
2717
|
+
--primitive-color-weiss-500: #FAFAFA;
|
|
2718
|
+
/* Weiss 600 */
|
|
2719
|
+
--primitive-color-weiss-600: #E6E6E6;
|
|
2720
|
+
/* Weiss 700 */
|
|
2721
|
+
--primitive-color-weiss-700: #CCCCCC;
|
|
2722
|
+
/* Weiss 800 */
|
|
2723
|
+
--primitive-color-weiss-800: #B3B3B3;
|
|
2724
|
+
/* Weiss 900 */
|
|
2725
|
+
--primitive-color-weiss-900: #999999;
|
|
2726
|
+
/* Rot (Signal Red) 50 */
|
|
2727
|
+
--primitive-color-rot-signal-red-50: #F5EFEF;
|
|
2728
|
+
/* Rot (Signal Red) 100 */
|
|
2729
|
+
--primitive-color-rot-signal-red-100: #ECE0DF;
|
|
2730
|
+
/* Rot (Signal Red) 200 */
|
|
2731
|
+
--primitive-color-rot-signal-red-200: #F5A5A3;
|
|
2732
|
+
/* Rot (Signal Red) 300 */
|
|
2733
|
+
--primitive-color-rot-signal-red-300: #F07775;
|
|
2734
|
+
/* Rot (Signal Red) 400 */
|
|
2735
|
+
--primitive-color-rot-signal-red-400: #EB4A47;
|
|
2736
|
+
/* Rot (Signal Red) 500 */
|
|
2737
|
+
--primitive-color-rot-signal-red-500: #E83430;
|
|
2738
|
+
/* Rot (Signal Red) 600 */
|
|
2739
|
+
--primitive-color-rot-signal-red-600: #D81B18;
|
|
2740
|
+
/* Rot (Signal Red) 700 */
|
|
2741
|
+
--primitive-color-rot-signal-red-700: #AA1513;
|
|
2742
|
+
/* Rot (Signal Red) 800 */
|
|
2743
|
+
--primitive-color-rot-signal-red-800: #7C100E;
|
|
2744
|
+
/* Rot (Signal Red) 900 */
|
|
2745
|
+
--primitive-color-rot-signal-red-900: #4E0A09;
|
|
2746
|
+
/* Mittelgrau 50 */
|
|
2747
|
+
--primitive-color-mittelgrau-50: #F2F2F2;
|
|
2748
|
+
/* Mittelgrau 100 */
|
|
2749
|
+
--primitive-color-mittelgrau-100: #E6E6E6;
|
|
2750
|
+
/* Mittelgrau 200 */
|
|
2751
|
+
--primitive-color-mittelgrau-200: #CCCCCC;
|
|
2752
|
+
/* Mittelgrau 300 */
|
|
2753
|
+
--primitive-color-mittelgrau-300: #B3B3B3;
|
|
2754
|
+
/* Mittelgrau 400 */
|
|
2755
|
+
--primitive-color-mittelgrau-400: #999999;
|
|
2756
|
+
/* Mittelgrau 500 */
|
|
2757
|
+
--primitive-color-mittelgrau-500: #6E6E6E;
|
|
2758
|
+
/* Mittelgrau 600 */
|
|
2759
|
+
--primitive-color-mittelgrau-600: #595959;
|
|
2760
|
+
/* Mittelgrau 700 */
|
|
2761
|
+
--primitive-color-mittelgrau-700: #404040;
|
|
2762
|
+
/* Mittelgrau 800 */
|
|
2763
|
+
--primitive-color-mittelgrau-800: #262626;
|
|
2764
|
+
/* Mittelgrau 900 */
|
|
2765
|
+
--primitive-color-mittelgrau-900: #0D0D0D;
|
|
2766
|
+
/* Hellgrau 50 */
|
|
2767
|
+
--primitive-color-hellgrau-50: #F2F2F2;
|
|
2768
|
+
/* Hellgrau 100 */
|
|
2769
|
+
--primitive-color-hellgrau-100: #E6E6E6;
|
|
2770
|
+
/* Hellgrau 200 */
|
|
2771
|
+
--primitive-color-hellgrau-200: #CCCCCC;
|
|
2772
|
+
/* Hellgrau 300 */
|
|
2773
|
+
--primitive-color-hellgrau-300: #B3B3B3;
|
|
2774
|
+
/* Hellgrau 400 */
|
|
2775
|
+
--primitive-color-hellgrau-400: #999999;
|
|
2776
|
+
/* Hellgrau 500 */
|
|
2777
|
+
--primitive-color-hellgrau-500: #D4D4D4;
|
|
2778
|
+
/* Hellgrau 600 */
|
|
2779
|
+
--primitive-color-hellgrau-600: #BFBFBF;
|
|
2780
|
+
/* Hellgrau 700 */
|
|
2781
|
+
--primitive-color-hellgrau-700: #A6A6A6;
|
|
2782
|
+
/* Hellgrau 800 */
|
|
2783
|
+
--primitive-color-hellgrau-800: #8C8C8C;
|
|
2784
|
+
/* Hellgrau 900 */
|
|
2785
|
+
--primitive-color-hellgrau-900: #737373;
|
|
2786
|
+
/* Dunkelblau 50 */
|
|
2787
|
+
--primitive-color-dunkelblau-50: #F0F2F4;
|
|
2788
|
+
/* Dunkelblau 100 */
|
|
2789
|
+
--primitive-color-dunkelblau-100: #E1E5EA;
|
|
2790
|
+
/* Dunkelblau 200 */
|
|
2791
|
+
--primitive-color-dunkelblau-200: #AFCBE9;
|
|
2792
|
+
/* Dunkelblau 300 */
|
|
2793
|
+
--primitive-color-dunkelblau-300: #88B1DD;
|
|
2794
|
+
/* Dunkelblau 400 */
|
|
2795
|
+
--primitive-color-dunkelblau-400: #6097D2;
|
|
2796
|
+
/* Dunkelblau 500 */
|
|
2797
|
+
--primitive-color-dunkelblau-500: #1A3A5B;
|
|
2798
|
+
/* Dunkelblau 600 */
|
|
2799
|
+
--primitive-color-dunkelblau-600: #11263C;
|
|
2800
|
+
/* Dunkelblau 700 */
|
|
2801
|
+
--primitive-color-dunkelblau-700: #111922;
|
|
2802
|
+
/* Dunkelblau 800 */
|
|
2803
|
+
--primitive-color-dunkelblau-800: #0C1218;
|
|
2804
|
+
/* Dunkelblau 900 */
|
|
2805
|
+
--primitive-color-dunkelblau-900: #070A0E;
|
|
2806
|
+
/* Neutral 50 */
|
|
2807
|
+
--primitive-color-neutral-50: #F8F7F7;
|
|
2808
|
+
/* Neutral 100 */
|
|
2809
|
+
--primitive-color-neutral-100: #F0EFEF;
|
|
2810
|
+
/* Neutral 200 */
|
|
2811
|
+
--primitive-color-neutral-200: #E1DFDF;
|
|
2812
|
+
/* Neutral 300 */
|
|
2813
|
+
--primitive-color-neutral-300: #C9C5C5;
|
|
2814
|
+
/* Neutral 400 */
|
|
2815
|
+
--primitive-color-neutral-400: #A19B9B;
|
|
2816
|
+
/* Neutral 500 */
|
|
2817
|
+
--primitive-color-neutral-500: #797272;
|
|
2818
|
+
/* Neutral 600 */
|
|
2819
|
+
--primitive-color-neutral-600: #5F5959;
|
|
2820
|
+
/* Neutral 700 */
|
|
2821
|
+
--primitive-color-neutral-700: #444040;
|
|
2822
|
+
/* Neutral 800 */
|
|
2823
|
+
--primitive-color-neutral-800: #2A2828;
|
|
2824
|
+
/* Neutral 900 */
|
|
2825
|
+
--primitive-color-neutral-900: #151414;
|
|
2826
|
+
/* Accent 50 */
|
|
2827
|
+
--primitive-color-accent-50: #F3F2F2;
|
|
2828
|
+
/* Accent 100 */
|
|
2829
|
+
--primitive-color-accent-100: #E7E4E4;
|
|
2830
|
+
/* Accent 200 */
|
|
2831
|
+
--primitive-color-accent-200: #D4C4C4;
|
|
2832
|
+
/* Accent 300 */
|
|
2833
|
+
--primitive-color-accent-300: #BEA7A7;
|
|
2834
|
+
/* Accent 400 */
|
|
2835
|
+
--primitive-color-accent-400: #A88A8A;
|
|
2836
|
+
/* Accent 500 */
|
|
2837
|
+
--primitive-color-accent-500: #4F3B3B;
|
|
2838
|
+
/* Accent 600 */
|
|
2839
|
+
--primitive-color-accent-600: #382929;
|
|
2840
|
+
/* Accent 700 */
|
|
2841
|
+
--primitive-color-accent-700: #1C1717;
|
|
2842
|
+
/* Accent 800 */
|
|
2843
|
+
--primitive-color-accent-800: #131010;
|
|
2844
|
+
/* Accent 900 */
|
|
2845
|
+
--primitive-color-accent-900: #0B0909;
|
|
2846
|
+
|
|
2847
|
+
/* --- Typography --- */
|
|
2848
|
+
/* Heading font family */
|
|
2849
|
+
--primitive-typography-family-heading: "Inter", "Helvetica Neue", "Arial", sans-serif;
|
|
2850
|
+
/* Body font family */
|
|
2851
|
+
--primitive-typography-family-body: "Inter", "Helvetica Neue", "Arial", sans-serif;
|
|
2852
|
+
/* Monospace font family */
|
|
2853
|
+
--primitive-typography-family-mono: "JetBrains Mono", "SF Mono", monospace;
|
|
2854
|
+
/* Font size xs */
|
|
2855
|
+
--primitive-typography-size-xs: 0.75rem;
|
|
2856
|
+
/* Font size sm */
|
|
2857
|
+
--primitive-typography-size-sm: 0.875rem;
|
|
2858
|
+
/* Font size base */
|
|
2859
|
+
--primitive-typography-size-base: 1rem;
|
|
2860
|
+
/* Font size lg */
|
|
2861
|
+
--primitive-typography-size-lg: 1.125rem;
|
|
2862
|
+
/* Font size xl */
|
|
2863
|
+
--primitive-typography-size-xl: 1.25rem;
|
|
2864
|
+
/* Font size 2xl */
|
|
2865
|
+
--primitive-typography-size-2xl: 1.5rem;
|
|
2866
|
+
/* Font size 3xl */
|
|
2867
|
+
--primitive-typography-size-3xl: 1.875rem;
|
|
2868
|
+
/* Font size 4xl */
|
|
2869
|
+
--primitive-typography-size-4xl: 2.25rem;
|
|
2870
|
+
/* Font weight normal */
|
|
2871
|
+
--primitive-typography-weight-normal: 400;
|
|
2872
|
+
/* Font weight medium */
|
|
2873
|
+
--primitive-typography-weight-medium: 500;
|
|
2874
|
+
/* Font weight semibold */
|
|
2875
|
+
--primitive-typography-weight-semibold: 600;
|
|
2876
|
+
/* Font weight bold */
|
|
2877
|
+
--primitive-typography-weight-bold: 700;
|
|
2878
|
+
/* Line height tight */
|
|
2879
|
+
--primitive-typography-lineHeight-tight: 1.25;
|
|
2880
|
+
/* Line height normal */
|
|
2881
|
+
--primitive-typography-lineHeight-normal: 1.5;
|
|
2882
|
+
/* Line height relaxed */
|
|
2883
|
+
--primitive-typography-lineHeight-relaxed: 1.75;
|
|
2884
|
+
|
|
2885
|
+
/* --- Spacing --- */
|
|
2886
|
+
/* Spacing 0 (0px) */
|
|
2887
|
+
--primitive-spacing-0: 0px;
|
|
2888
|
+
/* Spacing 1 (4px) */
|
|
2889
|
+
--primitive-spacing-1: 4px;
|
|
2890
|
+
/* Spacing 2 (8px) */
|
|
2891
|
+
--primitive-spacing-2: 8px;
|
|
2892
|
+
/* Spacing 3 (12px) */
|
|
2893
|
+
--primitive-spacing-3: 12px;
|
|
2894
|
+
/* Spacing 4 (16px) */
|
|
2895
|
+
--primitive-spacing-4: 16px;
|
|
2896
|
+
/* Spacing 5 (20px) */
|
|
2897
|
+
--primitive-spacing-5: 20px;
|
|
2898
|
+
/* Spacing 6 (24px) */
|
|
2899
|
+
--primitive-spacing-6: 24px;
|
|
2900
|
+
/* Spacing 8 (32px) */
|
|
2901
|
+
--primitive-spacing-8: 32px;
|
|
2902
|
+
/* Spacing 10 (40px) */
|
|
2903
|
+
--primitive-spacing-10: 40px;
|
|
2904
|
+
/* Spacing 12 (48px) */
|
|
2905
|
+
--primitive-spacing-12: 48px;
|
|
2906
|
+
/* Spacing 16 (64px) */
|
|
2907
|
+
--primitive-spacing-16: 64px;
|
|
2908
|
+
/* Spacing 20 (80px) */
|
|
2909
|
+
--primitive-spacing-20: 80px;
|
|
2910
|
+
/* Spacing 0.5 (2px) */
|
|
2911
|
+
--primitive-spacing-0-5: 2px;
|
|
2912
|
+
/* Spacing 1.5 (6px) */
|
|
2913
|
+
--primitive-spacing-1-5: 6px;
|
|
2914
|
+
|
|
2915
|
+
/* --- Border Radius --- */
|
|
2916
|
+
/* Border radius none */
|
|
2917
|
+
--primitive-radius-none: 0px;
|
|
2918
|
+
/* Border radius sm */
|
|
2919
|
+
--primitive-radius-sm: 0px;
|
|
2920
|
+
/* Border radius md */
|
|
2921
|
+
--primitive-radius-md: 0px;
|
|
2922
|
+
/* Border radius lg */
|
|
2923
|
+
--primitive-radius-lg: 0px;
|
|
2924
|
+
/* Border radius xl */
|
|
2925
|
+
--primitive-radius-xl: 0px;
|
|
2926
|
+
/* Border radius full */
|
|
2927
|
+
--primitive-radius-full: 9999px;
|
|
2928
|
+
|
|
2929
|
+
/* --- Semantic Tokens (Light) --- */
|
|
2930
|
+
/* Page background */
|
|
2931
|
+
--background-canvas: var(--primitive-color-neutral-50);
|
|
2932
|
+
/* Card/surface background */
|
|
2933
|
+
--background-surface: #FFFFFF;
|
|
2934
|
+
/* Muted background */
|
|
2935
|
+
--background-muted: var(--primitive-color-neutral-100);
|
|
2936
|
+
/* Primary text */
|
|
2937
|
+
--text-primary: var(--primitive-color-neutral-900);
|
|
2938
|
+
/* Secondary text */
|
|
2939
|
+
--text-secondary: var(--primitive-color-neutral-600);
|
|
2940
|
+
/* Muted/disabled text */
|
|
2941
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
2942
|
+
/* Text on dark backgrounds */
|
|
2943
|
+
--text-inverse: var(--primitive-color-neutral-50);
|
|
2944
|
+
/* Primary interactive (buttons, links) */
|
|
2945
|
+
--interactive-primary: var(--primitive-color-schwarz-500);
|
|
2946
|
+
/* Primary interactive hover */
|
|
2947
|
+
--interactive-primary-hover: var(--primitive-color-schwarz-600);
|
|
2948
|
+
/* Primary interactive active */
|
|
2949
|
+
--interactive-primary-active: var(--primitive-color-schwarz-700);
|
|
2950
|
+
/* Default border */
|
|
2951
|
+
--border-default: var(--primitive-color-neutral-200);
|
|
2952
|
+
/* Strong border */
|
|
2953
|
+
--border-strong: var(--primitive-color-neutral-400);
|
|
2954
|
+
/* Error \u2014 WCAG-compliant red */
|
|
2955
|
+
--status-error: #DC2626;
|
|
2956
|
+
/* Success \u2014 WCAG-compliant green */
|
|
2957
|
+
--status-success: #16A34A;
|
|
2958
|
+
/* Warning \u2014 WCAG-compliant amber */
|
|
2959
|
+
--status-warning: #CA8A04;
|
|
2960
|
+
/* Info status */
|
|
2961
|
+
--status-info: var(--primitive-color-schwarz-500);
|
|
2962
|
+
/* Focus ring color */
|
|
2963
|
+
--focus-ring: var(--primitive-color-schwarz-500);
|
|
2964
|
+
/* Keyboard focus indicator */
|
|
2965
|
+
--accessibility-focus-visible: var(--primitive-color-schwarz-500);
|
|
2966
|
+
}
|
|
2967
|
+
|
|
2968
|
+
[data-theme="dark"] {
|
|
2969
|
+
/* Page background \u2014 dark */
|
|
2970
|
+
--background-canvas: var(--primitive-color-neutral-900);
|
|
2971
|
+
/* Card/surface \u2014 dark */
|
|
2972
|
+
--background-surface: var(--primitive-color-neutral-800);
|
|
2973
|
+
/* Muted background \u2014 dark */
|
|
2974
|
+
--background-muted: var(--primitive-color-neutral-700);
|
|
2975
|
+
/* Primary text \u2014 dark */
|
|
2976
|
+
--text-primary: var(--primitive-color-neutral-50);
|
|
2977
|
+
/* Secondary text \u2014 dark */
|
|
2978
|
+
--text-secondary: var(--primitive-color-neutral-300);
|
|
2979
|
+
/* Muted text \u2014 dark */
|
|
2980
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
2981
|
+
/* Text on light backgrounds \u2014 dark */
|
|
2982
|
+
--text-inverse: var(--primitive-color-neutral-900);
|
|
2983
|
+
/* Primary interactive \u2014 dark */
|
|
2984
|
+
--interactive-primary: var(--primitive-color-schwarz-400);
|
|
2985
|
+
/* Primary hover \u2014 dark */
|
|
2986
|
+
--interactive-primary-hover: var(--primitive-color-schwarz-300);
|
|
2987
|
+
/* Primary active \u2014 dark */
|
|
2988
|
+
--interactive-primary-active: var(--primitive-color-schwarz-200);
|
|
2989
|
+
/* Default border \u2014 dark */
|
|
2990
|
+
--border-default: var(--primitive-color-neutral-700);
|
|
2991
|
+
/* Strong border \u2014 dark */
|
|
2992
|
+
--border-strong: var(--primitive-color-neutral-500);
|
|
2993
|
+
/* Error \u2014 WCAG-compliant red (dark) */
|
|
2994
|
+
--status-error: #EF4444;
|
|
2995
|
+
/* Success \u2014 WCAG-compliant green (dark) */
|
|
2996
|
+
--status-success: #22C55E;
|
|
2997
|
+
/* Warning \u2014 WCAG-compliant amber (dark) */
|
|
2998
|
+
--status-warning: #EAB308;
|
|
2999
|
+
/* Info \u2014 dark */
|
|
3000
|
+
--status-info: var(--primitive-color-schwarz-400);
|
|
3001
|
+
/* Focus ring \u2014 dark */
|
|
3002
|
+
--focus-ring: var(--primitive-color-schwarz-400);
|
|
3003
|
+
/* Keyboard focus \u2014 dark */
|
|
3004
|
+
--accessibility-focus-visible: var(--primitive-color-schwarz-400);
|
|
3005
|
+
}
|
|
3006
|
+
`;
|
|
3007
|
+
var tailwindCss2 = `@import "tailwindcss";
|
|
3008
|
+
|
|
3009
|
+
@theme {
|
|
3010
|
+
/* --- Colors --- */
|
|
3011
|
+
/* Schwarz 50 */
|
|
3012
|
+
--color-schwarz-50: #F2F2F2;
|
|
3013
|
+
/* Schwarz 100 */
|
|
3014
|
+
--color-schwarz-100: #E6E6E6;
|
|
3015
|
+
/* Schwarz 200 */
|
|
3016
|
+
--color-schwarz-200: #CCCCCC;
|
|
3017
|
+
/* Schwarz 300 */
|
|
3018
|
+
--color-schwarz-300: #B3B3B3;
|
|
3019
|
+
/* Schwarz 400 */
|
|
3020
|
+
--color-schwarz-400: #999999;
|
|
3021
|
+
/* Schwarz 500 */
|
|
3022
|
+
--color-schwarz-500: #121212;
|
|
3023
|
+
/* Schwarz 600 */
|
|
3024
|
+
--color-schwarz-600: #262626;
|
|
3025
|
+
/* Schwarz 700 */
|
|
3026
|
+
--color-schwarz-700: #1A1A1A;
|
|
3027
|
+
/* Schwarz 800 */
|
|
3028
|
+
--color-schwarz-800: #121212;
|
|
3029
|
+
/* Schwarz 900 */
|
|
3030
|
+
--color-schwarz-900: #0A0A0A;
|
|
3031
|
+
/* Weiss 50 */
|
|
3032
|
+
--color-weiss-50: #F2F2F2;
|
|
3033
|
+
/* Weiss 100 */
|
|
3034
|
+
--color-weiss-100: #E6E6E6;
|
|
3035
|
+
/* Weiss 200 */
|
|
3036
|
+
--color-weiss-200: #CCCCCC;
|
|
3037
|
+
/* Weiss 300 */
|
|
3038
|
+
--color-weiss-300: #B3B3B3;
|
|
3039
|
+
/* Weiss 400 */
|
|
3040
|
+
--color-weiss-400: #999999;
|
|
3041
|
+
/* Weiss 500 */
|
|
3042
|
+
--color-weiss-500: #FAFAFA;
|
|
3043
|
+
/* Weiss 600 */
|
|
3044
|
+
--color-weiss-600: #E6E6E6;
|
|
3045
|
+
/* Weiss 700 */
|
|
3046
|
+
--color-weiss-700: #CCCCCC;
|
|
3047
|
+
/* Weiss 800 */
|
|
3048
|
+
--color-weiss-800: #B3B3B3;
|
|
3049
|
+
/* Weiss 900 */
|
|
3050
|
+
--color-weiss-900: #999999;
|
|
3051
|
+
/* Rot (Signal Red) 50 */
|
|
3052
|
+
--color-rot-signal-red-50: #F5EFEF;
|
|
3053
|
+
/* Rot (Signal Red) 100 */
|
|
3054
|
+
--color-rot-signal-red-100: #ECE0DF;
|
|
3055
|
+
/* Rot (Signal Red) 200 */
|
|
3056
|
+
--color-rot-signal-red-200: #F5A5A3;
|
|
3057
|
+
/* Rot (Signal Red) 300 */
|
|
3058
|
+
--color-rot-signal-red-300: #F07775;
|
|
3059
|
+
/* Rot (Signal Red) 400 */
|
|
3060
|
+
--color-rot-signal-red-400: #EB4A47;
|
|
3061
|
+
/* Rot (Signal Red) 500 */
|
|
3062
|
+
--color-rot-signal-red-500: #E83430;
|
|
3063
|
+
/* Rot (Signal Red) 600 */
|
|
3064
|
+
--color-rot-signal-red-600: #D81B18;
|
|
3065
|
+
/* Rot (Signal Red) 700 */
|
|
3066
|
+
--color-rot-signal-red-700: #AA1513;
|
|
3067
|
+
/* Rot (Signal Red) 800 */
|
|
3068
|
+
--color-rot-signal-red-800: #7C100E;
|
|
3069
|
+
/* Rot (Signal Red) 900 */
|
|
3070
|
+
--color-rot-signal-red-900: #4E0A09;
|
|
3071
|
+
/* Mittelgrau 50 */
|
|
3072
|
+
--color-mittelgrau-50: #F2F2F2;
|
|
3073
|
+
/* Mittelgrau 100 */
|
|
3074
|
+
--color-mittelgrau-100: #E6E6E6;
|
|
3075
|
+
/* Mittelgrau 200 */
|
|
3076
|
+
--color-mittelgrau-200: #CCCCCC;
|
|
3077
|
+
/* Mittelgrau 300 */
|
|
3078
|
+
--color-mittelgrau-300: #B3B3B3;
|
|
3079
|
+
/* Mittelgrau 400 */
|
|
3080
|
+
--color-mittelgrau-400: #999999;
|
|
3081
|
+
/* Mittelgrau 500 */
|
|
3082
|
+
--color-mittelgrau-500: #6E6E6E;
|
|
3083
|
+
/* Mittelgrau 600 */
|
|
3084
|
+
--color-mittelgrau-600: #595959;
|
|
3085
|
+
/* Mittelgrau 700 */
|
|
3086
|
+
--color-mittelgrau-700: #404040;
|
|
3087
|
+
/* Mittelgrau 800 */
|
|
3088
|
+
--color-mittelgrau-800: #262626;
|
|
3089
|
+
/* Mittelgrau 900 */
|
|
3090
|
+
--color-mittelgrau-900: #0D0D0D;
|
|
3091
|
+
/* Hellgrau 50 */
|
|
3092
|
+
--color-hellgrau-50: #F2F2F2;
|
|
3093
|
+
/* Hellgrau 100 */
|
|
3094
|
+
--color-hellgrau-100: #E6E6E6;
|
|
3095
|
+
/* Hellgrau 200 */
|
|
3096
|
+
--color-hellgrau-200: #CCCCCC;
|
|
3097
|
+
/* Hellgrau 300 */
|
|
3098
|
+
--color-hellgrau-300: #B3B3B3;
|
|
3099
|
+
/* Hellgrau 400 */
|
|
3100
|
+
--color-hellgrau-400: #999999;
|
|
3101
|
+
/* Hellgrau 500 */
|
|
3102
|
+
--color-hellgrau-500: #D4D4D4;
|
|
3103
|
+
/* Hellgrau 600 */
|
|
3104
|
+
--color-hellgrau-600: #BFBFBF;
|
|
3105
|
+
/* Hellgrau 700 */
|
|
3106
|
+
--color-hellgrau-700: #A6A6A6;
|
|
3107
|
+
/* Hellgrau 800 */
|
|
3108
|
+
--color-hellgrau-800: #8C8C8C;
|
|
3109
|
+
/* Hellgrau 900 */
|
|
3110
|
+
--color-hellgrau-900: #737373;
|
|
3111
|
+
/* Dunkelblau 50 */
|
|
3112
|
+
--color-dunkelblau-50: #F0F2F4;
|
|
3113
|
+
/* Dunkelblau 100 */
|
|
3114
|
+
--color-dunkelblau-100: #E1E5EA;
|
|
3115
|
+
/* Dunkelblau 200 */
|
|
3116
|
+
--color-dunkelblau-200: #AFCBE9;
|
|
3117
|
+
/* Dunkelblau 300 */
|
|
3118
|
+
--color-dunkelblau-300: #88B1DD;
|
|
3119
|
+
/* Dunkelblau 400 */
|
|
3120
|
+
--color-dunkelblau-400: #6097D2;
|
|
3121
|
+
/* Dunkelblau 500 */
|
|
3122
|
+
--color-dunkelblau-500: #1A3A5B;
|
|
3123
|
+
/* Dunkelblau 600 */
|
|
3124
|
+
--color-dunkelblau-600: #11263C;
|
|
3125
|
+
/* Dunkelblau 700 */
|
|
3126
|
+
--color-dunkelblau-700: #111922;
|
|
3127
|
+
/* Dunkelblau 800 */
|
|
3128
|
+
--color-dunkelblau-800: #0C1218;
|
|
3129
|
+
/* Dunkelblau 900 */
|
|
3130
|
+
--color-dunkelblau-900: #070A0E;
|
|
3131
|
+
/* Neutral 50 */
|
|
3132
|
+
--color-neutral-50: #F8F7F7;
|
|
3133
|
+
/* Neutral 100 */
|
|
3134
|
+
--color-neutral-100: #F0EFEF;
|
|
3135
|
+
/* Neutral 200 */
|
|
3136
|
+
--color-neutral-200: #E1DFDF;
|
|
3137
|
+
/* Neutral 300 */
|
|
3138
|
+
--color-neutral-300: #C9C5C5;
|
|
3139
|
+
/* Neutral 400 */
|
|
3140
|
+
--color-neutral-400: #A19B9B;
|
|
3141
|
+
/* Neutral 500 */
|
|
3142
|
+
--color-neutral-500: #797272;
|
|
3143
|
+
/* Neutral 600 */
|
|
3144
|
+
--color-neutral-600: #5F5959;
|
|
3145
|
+
/* Neutral 700 */
|
|
3146
|
+
--color-neutral-700: #444040;
|
|
3147
|
+
/* Neutral 800 */
|
|
3148
|
+
--color-neutral-800: #2A2828;
|
|
3149
|
+
/* Neutral 900 */
|
|
3150
|
+
--color-neutral-900: #151414;
|
|
3151
|
+
/* Accent 50 */
|
|
3152
|
+
--color-accent-50: #F3F2F2;
|
|
3153
|
+
/* Accent 100 */
|
|
3154
|
+
--color-accent-100: #E7E4E4;
|
|
3155
|
+
/* Accent 200 */
|
|
3156
|
+
--color-accent-200: #D4C4C4;
|
|
3157
|
+
/* Accent 300 */
|
|
3158
|
+
--color-accent-300: #BEA7A7;
|
|
3159
|
+
/* Accent 400 */
|
|
3160
|
+
--color-accent-400: #A88A8A;
|
|
3161
|
+
/* Accent 500 */
|
|
3162
|
+
--color-accent-500: #4F3B3B;
|
|
3163
|
+
/* Accent 600 */
|
|
3164
|
+
--color-accent-600: #382929;
|
|
3165
|
+
/* Accent 700 */
|
|
3166
|
+
--color-accent-700: #1C1717;
|
|
3167
|
+
/* Accent 800 */
|
|
3168
|
+
--color-accent-800: #131010;
|
|
3169
|
+
/* Accent 900 */
|
|
3170
|
+
--color-accent-900: #0B0909;
|
|
3171
|
+
|
|
3172
|
+
/* --- Spacing (8px grid) --- */
|
|
3173
|
+
/* Spacing 0 (0px) */
|
|
3174
|
+
--spacing-0: 0px;
|
|
3175
|
+
/* Spacing 1 (4px) */
|
|
3176
|
+
--spacing-1: 4px;
|
|
3177
|
+
/* Spacing 2 (8px) */
|
|
3178
|
+
--spacing-2: 8px;
|
|
3179
|
+
/* Spacing 3 (12px) */
|
|
3180
|
+
--spacing-3: 12px;
|
|
3181
|
+
/* Spacing 4 (16px) */
|
|
3182
|
+
--spacing-4: 16px;
|
|
3183
|
+
/* Spacing 5 (20px) */
|
|
3184
|
+
--spacing-5: 20px;
|
|
3185
|
+
/* Spacing 6 (24px) */
|
|
3186
|
+
--spacing-6: 24px;
|
|
3187
|
+
/* Spacing 8 (32px) */
|
|
3188
|
+
--spacing-8: 32px;
|
|
3189
|
+
/* Spacing 10 (40px) */
|
|
3190
|
+
--spacing-10: 40px;
|
|
3191
|
+
/* Spacing 12 (48px) */
|
|
3192
|
+
--spacing-12: 48px;
|
|
3193
|
+
/* Spacing 16 (64px) */
|
|
3194
|
+
--spacing-16: 64px;
|
|
3195
|
+
/* Spacing 20 (80px) */
|
|
3196
|
+
--spacing-20: 80px;
|
|
3197
|
+
/* Spacing 0.5 (2px) */
|
|
3198
|
+
--spacing-0.5: 2px;
|
|
3199
|
+
/* Spacing 1.5 (6px) */
|
|
3200
|
+
--spacing-1.5: 6px;
|
|
3201
|
+
|
|
3202
|
+
/* --- Font Families --- */
|
|
3203
|
+
/* Heading font family */
|
|
3204
|
+
--font-heading: "Inter", "Helvetica Neue", "Arial", sans-serif;
|
|
3205
|
+
/* Body font family */
|
|
3206
|
+
--font-body: "Inter", "Helvetica Neue", "Arial", sans-serif;
|
|
3207
|
+
/* Monospace font family */
|
|
3208
|
+
--font-mono: "JetBrains Mono", "SF Mono", monospace;
|
|
3209
|
+
|
|
3210
|
+
/* --- Font Sizes --- */
|
|
3211
|
+
/* Font size xs */
|
|
3212
|
+
--text-xs: 0.75rem;
|
|
3213
|
+
/* Font size sm */
|
|
3214
|
+
--text-sm: 0.875rem;
|
|
3215
|
+
/* Font size base */
|
|
3216
|
+
--text-base: 1rem;
|
|
3217
|
+
/* Font size lg */
|
|
3218
|
+
--text-lg: 1.125rem;
|
|
3219
|
+
/* Font size xl */
|
|
3220
|
+
--text-xl: 1.25rem;
|
|
3221
|
+
/* Font size 2xl */
|
|
3222
|
+
--text-2xl: 1.5rem;
|
|
3223
|
+
/* Font size 3xl */
|
|
3224
|
+
--text-3xl: 1.875rem;
|
|
3225
|
+
/* Font size 4xl */
|
|
3226
|
+
--text-4xl: 2.25rem;
|
|
3227
|
+
|
|
3228
|
+
/* --- Border Radius --- */
|
|
3229
|
+
/* Border radius none */
|
|
3230
|
+
--radius-none: 0px;
|
|
3231
|
+
/* Border radius sm */
|
|
3232
|
+
--radius-sm: 0px;
|
|
3233
|
+
/* Border radius md */
|
|
3234
|
+
--radius-md: 0px;
|
|
3235
|
+
/* Border radius lg */
|
|
3236
|
+
--radius-lg: 0px;
|
|
3237
|
+
/* Border radius xl */
|
|
3238
|
+
--radius-xl: 0px;
|
|
3239
|
+
/* Border radius full */
|
|
3240
|
+
--radius-full: 9999px;
|
|
3241
|
+
|
|
3242
|
+
}
|
|
3243
|
+
|
|
3244
|
+
/* Light mode semantic tokens (default) */
|
|
3245
|
+
:root {
|
|
3246
|
+
/* Page background */
|
|
3247
|
+
--background-canvas: var(--primitive-color-neutral-50);
|
|
3248
|
+
/* Card/surface background */
|
|
3249
|
+
--background-surface: #FFFFFF;
|
|
3250
|
+
/* Muted background */
|
|
3251
|
+
--background-muted: var(--primitive-color-neutral-100);
|
|
3252
|
+
/* Primary text */
|
|
3253
|
+
--text-primary: var(--primitive-color-neutral-900);
|
|
3254
|
+
/* Secondary text */
|
|
3255
|
+
--text-secondary: var(--primitive-color-neutral-600);
|
|
3256
|
+
/* Muted/disabled text */
|
|
3257
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
3258
|
+
/* Text on dark backgrounds */
|
|
3259
|
+
--text-inverse: var(--primitive-color-neutral-50);
|
|
3260
|
+
/* Primary interactive (buttons, links) */
|
|
3261
|
+
--interactive-primary: var(--primitive-color-schwarz-500);
|
|
3262
|
+
/* Primary interactive hover */
|
|
3263
|
+
--interactive-primary-hover: var(--primitive-color-schwarz-600);
|
|
3264
|
+
/* Primary interactive active */
|
|
3265
|
+
--interactive-primary-active: var(--primitive-color-schwarz-700);
|
|
3266
|
+
/* Default border */
|
|
3267
|
+
--border-default: var(--primitive-color-neutral-200);
|
|
3268
|
+
/* Strong border */
|
|
3269
|
+
--border-strong: var(--primitive-color-neutral-400);
|
|
3270
|
+
/* Error \u2014 WCAG-compliant red */
|
|
3271
|
+
--status-error: #DC2626;
|
|
3272
|
+
/* Success \u2014 WCAG-compliant green */
|
|
3273
|
+
--status-success: #16A34A;
|
|
3274
|
+
/* Warning \u2014 WCAG-compliant amber */
|
|
3275
|
+
--status-warning: #CA8A04;
|
|
3276
|
+
/* Info status */
|
|
3277
|
+
--status-info: var(--primitive-color-schwarz-500);
|
|
3278
|
+
/* Focus ring color */
|
|
3279
|
+
--focus-ring: var(--primitive-color-schwarz-500);
|
|
3280
|
+
/* Keyboard focus indicator */
|
|
3281
|
+
--accessibility-focus-visible: var(--primitive-color-schwarz-500);
|
|
3282
|
+
}
|
|
3283
|
+
|
|
3284
|
+
/* Dark mode semantic tokens */
|
|
3285
|
+
[data-theme="dark"] {
|
|
3286
|
+
/* Page background \u2014 dark */
|
|
3287
|
+
--background-canvas: var(--primitive-color-neutral-900);
|
|
3288
|
+
/* Card/surface \u2014 dark */
|
|
3289
|
+
--background-surface: var(--primitive-color-neutral-800);
|
|
3290
|
+
/* Muted background \u2014 dark */
|
|
3291
|
+
--background-muted: var(--primitive-color-neutral-700);
|
|
3292
|
+
/* Primary text \u2014 dark */
|
|
3293
|
+
--text-primary: var(--primitive-color-neutral-50);
|
|
3294
|
+
/* Secondary text \u2014 dark */
|
|
3295
|
+
--text-secondary: var(--primitive-color-neutral-300);
|
|
3296
|
+
/* Muted text \u2014 dark */
|
|
3297
|
+
--text-muted: var(--primitive-color-neutral-500);
|
|
3298
|
+
/* Text on light backgrounds \u2014 dark */
|
|
3299
|
+
--text-inverse: var(--primitive-color-neutral-900);
|
|
3300
|
+
/* Primary interactive \u2014 dark */
|
|
3301
|
+
--interactive-primary: var(--primitive-color-schwarz-400);
|
|
3302
|
+
/* Primary hover \u2014 dark */
|
|
3303
|
+
--interactive-primary-hover: var(--primitive-color-schwarz-300);
|
|
3304
|
+
/* Primary active \u2014 dark */
|
|
3305
|
+
--interactive-primary-active: var(--primitive-color-schwarz-200);
|
|
3306
|
+
/* Default border \u2014 dark */
|
|
3307
|
+
--border-default: var(--primitive-color-neutral-700);
|
|
3308
|
+
/* Strong border \u2014 dark */
|
|
3309
|
+
--border-strong: var(--primitive-color-neutral-500);
|
|
3310
|
+
/* Error \u2014 WCAG-compliant red (dark) */
|
|
3311
|
+
--status-error: #EF4444;
|
|
3312
|
+
/* Success \u2014 WCAG-compliant green (dark) */
|
|
3313
|
+
--status-success: #22C55E;
|
|
3314
|
+
/* Warning \u2014 WCAG-compliant amber (dark) */
|
|
3315
|
+
--status-warning: #EAB308;
|
|
3316
|
+
/* Info \u2014 dark */
|
|
3317
|
+
--status-info: var(--primitive-color-schwarz-400);
|
|
3318
|
+
/* Focus ring \u2014 dark */
|
|
3319
|
+
--focus-ring: var(--primitive-color-schwarz-400);
|
|
3320
|
+
/* Keyboard focus \u2014 dark */
|
|
3321
|
+
--accessibility-focus-visible: var(--primitive-color-schwarz-400);
|
|
3322
|
+
}
|
|
3323
|
+
`;
|
|
3324
|
+
|
|
3325
|
+
// src/swiss-international/index.ts
|
|
3326
|
+
var swissInternational = {
|
|
3327
|
+
tokens: tokens_default2,
|
|
3328
|
+
css: css2,
|
|
3329
|
+
tailwindCss: tailwindCss2,
|
|
3330
|
+
meta: meta_default2
|
|
3331
|
+
};
|
|
3332
|
+
export {
|
|
3333
|
+
nihonTraditional,
|
|
3334
|
+
swissInternational
|
|
3335
|
+
};
|
|
3336
|
+
//# sourceMappingURL=index.js.map
|