@orange-halo/tokens 1.0.0 → 2.0.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/contrast-pairs.json +35 -0
- package/contrast.js +59 -0
- package/dist/themes/dark.css +59 -119
- package/dist/themes/dark.json +783 -0
- package/dist/themes/light.css +10 -9
- package/dist/tokens.css +133 -71
- package/dist/tokens.js +119 -55
- package/dist/tokens.json +162 -46
- package/package.json +8 -4
- package/tokens/component.tokens.json +81 -37
- package/tokens/global.tokens.json +836 -156
- package/tokens/semantic.tokens.json +704 -138
- package/tokens/themes/dark.tokens.json +66 -51
- package/tokens/themes/light.tokens.json +0 -57
|
@@ -1,230 +1,910 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$description": "Global Design Tokens — Orange Halo Visual DNA. Warm, playful, personal.",
|
|
3
3
|
"color": {
|
|
4
|
-
"$description": "Warm
|
|
4
|
+
"$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
|
|
5
5
|
"orange": {
|
|
6
6
|
"$description": "Primary brand orange — vibrant and accessible",
|
|
7
|
-
"50": {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
7
|
+
"50": {
|
|
8
|
+
"$type": "color",
|
|
9
|
+
"$value": "#FFF3E0"
|
|
10
|
+
},
|
|
11
|
+
"100": {
|
|
12
|
+
"$type": "color",
|
|
13
|
+
"$value": "#FFE0B2"
|
|
14
|
+
},
|
|
15
|
+
"200": {
|
|
16
|
+
"$type": "color",
|
|
17
|
+
"$value": "#FFCC80"
|
|
18
|
+
},
|
|
19
|
+
"300": {
|
|
20
|
+
"$type": "color",
|
|
21
|
+
"$value": "#FFB74D"
|
|
22
|
+
},
|
|
23
|
+
"400": {
|
|
24
|
+
"$type": "color",
|
|
25
|
+
"$value": "#FFA726"
|
|
26
|
+
},
|
|
27
|
+
"500": {
|
|
28
|
+
"$type": "color",
|
|
29
|
+
"$value": "#FF9800"
|
|
30
|
+
},
|
|
31
|
+
"600": {
|
|
32
|
+
"$type": "color",
|
|
33
|
+
"$value": "#FB8C00"
|
|
34
|
+
},
|
|
35
|
+
"700": {
|
|
36
|
+
"$type": "color",
|
|
37
|
+
"$value": "#F57C00"
|
|
38
|
+
},
|
|
39
|
+
"800": {
|
|
40
|
+
"$type": "color",
|
|
41
|
+
"$value": "#EF6C00"
|
|
42
|
+
},
|
|
43
|
+
"900": {
|
|
44
|
+
"$type": "color",
|
|
45
|
+
"$value": "#C54300",
|
|
46
|
+
"$description": "Primary brand — 5.0:1 with white text, 4.7:1 on cream. Chosen for contrast: do not lighten."
|
|
47
|
+
},
|
|
48
|
+
"950": {
|
|
49
|
+
"$type": "color",
|
|
50
|
+
"$value": "#9E3500",
|
|
51
|
+
"$description": "Hover/active — 7.1:1 with white text, 6.6:1 on cream"
|
|
52
|
+
}
|
|
18
53
|
},
|
|
19
54
|
"honey": {
|
|
20
55
|
"$description": "Warm highlight — golden warmth for accents and feedback",
|
|
21
|
-
"50": {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"
|
|
56
|
+
"50": {
|
|
57
|
+
"$type": "color",
|
|
58
|
+
"$value": "#FEFAEE"
|
|
59
|
+
},
|
|
60
|
+
"100": {
|
|
61
|
+
"$type": "color",
|
|
62
|
+
"$value": "#FDF3D4"
|
|
63
|
+
},
|
|
64
|
+
"200": {
|
|
65
|
+
"$type": "color",
|
|
66
|
+
"$value": "#FBE7A8"
|
|
67
|
+
},
|
|
68
|
+
"300": {
|
|
69
|
+
"$type": "color",
|
|
70
|
+
"$value": "#F8D56F"
|
|
71
|
+
},
|
|
72
|
+
"400": {
|
|
73
|
+
"$type": "color",
|
|
74
|
+
"$value": "#E8A838",
|
|
75
|
+
"$description": "Signature honey"
|
|
76
|
+
},
|
|
77
|
+
"500": {
|
|
78
|
+
"$type": "color",
|
|
79
|
+
"$value": "#D4922C"
|
|
80
|
+
},
|
|
81
|
+
"600": {
|
|
82
|
+
"$type": "color",
|
|
83
|
+
"$value": "#B87A24"
|
|
84
|
+
},
|
|
85
|
+
"700": {
|
|
86
|
+
"$type": "color",
|
|
87
|
+
"$value": "#8C5E1C",
|
|
88
|
+
"$description": "5.3:1 on cream"
|
|
89
|
+
},
|
|
90
|
+
"800": {
|
|
91
|
+
"$type": "color",
|
|
92
|
+
"$value": "#6B4815"
|
|
93
|
+
},
|
|
94
|
+
"900": {
|
|
95
|
+
"$type": "color",
|
|
96
|
+
"$value": "#3D3529",
|
|
97
|
+
"$description": "Dark theme warning tint"
|
|
98
|
+
}
|
|
30
99
|
},
|
|
31
100
|
"terracotta": {
|
|
32
101
|
"$description": "Deep accent — earthy depth for active states and emphasis",
|
|
33
|
-
"50": {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
"
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"
|
|
42
|
-
|
|
102
|
+
"50": {
|
|
103
|
+
"$type": "color",
|
|
104
|
+
"$value": "#FBF5F0"
|
|
105
|
+
},
|
|
106
|
+
"100": {
|
|
107
|
+
"$type": "color",
|
|
108
|
+
"$value": "#F5E8DE"
|
|
109
|
+
},
|
|
110
|
+
"200": {
|
|
111
|
+
"$type": "color",
|
|
112
|
+
"$value": "#E8CDBF"
|
|
113
|
+
},
|
|
114
|
+
"300": {
|
|
115
|
+
"$type": "color",
|
|
116
|
+
"$value": "#D4A88F"
|
|
117
|
+
},
|
|
118
|
+
"400": {
|
|
119
|
+
"$type": "color",
|
|
120
|
+
"$value": "#BF8060"
|
|
121
|
+
},
|
|
122
|
+
"500": {
|
|
123
|
+
"$type": "color",
|
|
124
|
+
"$value": "#A0522D",
|
|
125
|
+
"$description": "Signature terracotta — WCAG AA (5.3:1)"
|
|
126
|
+
},
|
|
127
|
+
"600": {
|
|
128
|
+
"$type": "color",
|
|
129
|
+
"$value": "#8B4726"
|
|
130
|
+
},
|
|
131
|
+
"700": {
|
|
132
|
+
"$type": "color",
|
|
133
|
+
"$value": "#6F3920"
|
|
134
|
+
},
|
|
135
|
+
"800": {
|
|
136
|
+
"$type": "color",
|
|
137
|
+
"$value": "#5A2F1A"
|
|
138
|
+
},
|
|
139
|
+
"900": {
|
|
140
|
+
"$type": "color",
|
|
141
|
+
"$value": "#452414"
|
|
142
|
+
}
|
|
43
143
|
},
|
|
44
144
|
"eucalyptus": {
|
|
45
|
-
"$description": "
|
|
46
|
-
"50": {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"
|
|
55
|
-
|
|
145
|
+
"$description": "Reserve palette — not used by semantic tokens",
|
|
146
|
+
"50": {
|
|
147
|
+
"$type": "color",
|
|
148
|
+
"$value": "#F0F6F6"
|
|
149
|
+
},
|
|
150
|
+
"100": {
|
|
151
|
+
"$type": "color",
|
|
152
|
+
"$value": "#E0EBEB"
|
|
153
|
+
},
|
|
154
|
+
"200": {
|
|
155
|
+
"$type": "color",
|
|
156
|
+
"$value": "#C2D7D7"
|
|
157
|
+
},
|
|
158
|
+
"300": {
|
|
159
|
+
"$type": "color",
|
|
160
|
+
"$value": "#9EBEBE"
|
|
161
|
+
},
|
|
162
|
+
"400": {
|
|
163
|
+
"$type": "color",
|
|
164
|
+
"$value": "#7AA3A4"
|
|
165
|
+
},
|
|
166
|
+
"500": {
|
|
167
|
+
"$type": "color",
|
|
168
|
+
"$value": "#5F8A8B",
|
|
169
|
+
"$description": "3.6:1 on cream — UI and large text only"
|
|
170
|
+
},
|
|
171
|
+
"600": {
|
|
172
|
+
"$type": "color",
|
|
173
|
+
"$value": "#4D7172"
|
|
174
|
+
},
|
|
175
|
+
"700": {
|
|
176
|
+
"$type": "color",
|
|
177
|
+
"$value": "#3F5C5D",
|
|
178
|
+
"$description": "6.8:1 on cream"
|
|
179
|
+
},
|
|
180
|
+
"800": {
|
|
181
|
+
"$type": "color",
|
|
182
|
+
"$value": "#344A4B"
|
|
183
|
+
},
|
|
184
|
+
"900": {
|
|
185
|
+
"$type": "color",
|
|
186
|
+
"$value": "#2A3C3D"
|
|
187
|
+
}
|
|
56
188
|
},
|
|
57
189
|
"warm": {
|
|
58
190
|
"$description": "Warm neutral scale — cream to walnut, no blue-gray",
|
|
59
|
-
"cream": {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"
|
|
65
|
-
|
|
66
|
-
|
|
191
|
+
"cream": {
|
|
192
|
+
"$type": "color",
|
|
193
|
+
"$value": "#FAF7F2",
|
|
194
|
+
"$description": "Base background — warm off-white"
|
|
195
|
+
},
|
|
196
|
+
"linen": {
|
|
197
|
+
"$type": "color",
|
|
198
|
+
"$value": "#F5F0E8",
|
|
199
|
+
"$description": "Raised surface"
|
|
200
|
+
},
|
|
201
|
+
"dawn": {
|
|
202
|
+
"$type": "color",
|
|
203
|
+
"$value": "#FFFBF5",
|
|
204
|
+
"$description": "Sunlit gradient — top"
|
|
205
|
+
},
|
|
206
|
+
"shell": {
|
|
207
|
+
"$type": "color",
|
|
208
|
+
"$value": "#FDF6EE",
|
|
209
|
+
"$description": "Sunlit gradient — middle"
|
|
210
|
+
},
|
|
211
|
+
"biscuit": {
|
|
212
|
+
"$type": "color",
|
|
213
|
+
"$value": "#F8EFE4",
|
|
214
|
+
"$description": "Sunlit gradient — bottom"
|
|
215
|
+
},
|
|
216
|
+
"parchment": {
|
|
217
|
+
"$type": "color",
|
|
218
|
+
"$value": "#EDE8DF",
|
|
219
|
+
"$description": "Inset surface"
|
|
220
|
+
},
|
|
221
|
+
"sand": {
|
|
222
|
+
"$type": "color",
|
|
223
|
+
"$value": "#E2DCD2",
|
|
224
|
+
"$description": "Borders, dividers"
|
|
225
|
+
},
|
|
226
|
+
"dune": {
|
|
227
|
+
"$type": "color",
|
|
228
|
+
"$value": "#C9C1B4",
|
|
229
|
+
"$description": "Decorative only — 1.7:1 on cream, never for control borders"
|
|
230
|
+
},
|
|
231
|
+
"stone": {
|
|
232
|
+
"$type": "color",
|
|
233
|
+
"$value": "#A09080",
|
|
234
|
+
"$description": "Dark theme control borders — 4.9:1 on cocoa"
|
|
235
|
+
},
|
|
236
|
+
"taupe": {
|
|
237
|
+
"$type": "color",
|
|
238
|
+
"$value": "#8A7A68",
|
|
239
|
+
"$description": "Dark theme borders — 3.7:1 on cocoa, 3.0:1 on walnut"
|
|
240
|
+
},
|
|
241
|
+
"driftwood": {
|
|
242
|
+
"$type": "color",
|
|
243
|
+
"$value": "#6B5D4D",
|
|
244
|
+
"$description": "Secondary text — 6.0:1 on cream"
|
|
245
|
+
},
|
|
246
|
+
"bark": {
|
|
247
|
+
"$type": "color",
|
|
248
|
+
"$value": "#52463A",
|
|
249
|
+
"$description": "Emphasis text — 8.6:1 on cream"
|
|
250
|
+
},
|
|
251
|
+
"hickory": {
|
|
252
|
+
"$type": "color",
|
|
253
|
+
"$value": "#4A3F33",
|
|
254
|
+
"$description": "Dark theme hover and highlight surface"
|
|
255
|
+
},
|
|
256
|
+
"chestnut": {
|
|
257
|
+
"$type": "color",
|
|
258
|
+
"$value": "#44382C",
|
|
259
|
+
"$description": "Dark theme sunlit surface"
|
|
260
|
+
},
|
|
261
|
+
"walnut": {
|
|
262
|
+
"$type": "color",
|
|
263
|
+
"$value": "#3D3229",
|
|
264
|
+
"$description": "Primary text — 11.7:1 on cream. Dark theme raised surface"
|
|
265
|
+
},
|
|
266
|
+
"mocha": {
|
|
267
|
+
"$type": "color",
|
|
268
|
+
"$value": "#352E28",
|
|
269
|
+
"$description": "Dark theme pressed and disabled surface"
|
|
270
|
+
},
|
|
271
|
+
"cocoa": {
|
|
272
|
+
"$type": "color",
|
|
273
|
+
"$value": "#2A2420",
|
|
274
|
+
"$description": "Dark theme page background"
|
|
275
|
+
},
|
|
276
|
+
"espresso": {
|
|
277
|
+
"$type": "color",
|
|
278
|
+
"$value": "#1F1A17",
|
|
279
|
+
"$description": "Dark theme inset surface"
|
|
280
|
+
}
|
|
67
281
|
},
|
|
68
282
|
"green": {
|
|
69
283
|
"$description": "Success — warm-tinted green",
|
|
70
|
-
"50": {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
"
|
|
284
|
+
"50": {
|
|
285
|
+
"$type": "color",
|
|
286
|
+
"$value": "#F0F7F1"
|
|
287
|
+
},
|
|
288
|
+
"100": {
|
|
289
|
+
"$type": "color",
|
|
290
|
+
"$value": "#D9EDD9"
|
|
291
|
+
},
|
|
292
|
+
"300": {
|
|
293
|
+
"$type": "color",
|
|
294
|
+
"$value": "#7AB87C",
|
|
295
|
+
"$description": "Dark theme success — 6.5:1 with cocoa text"
|
|
296
|
+
},
|
|
297
|
+
"500": {
|
|
298
|
+
"$type": "color",
|
|
299
|
+
"$value": "#5A9A5C"
|
|
300
|
+
},
|
|
301
|
+
"600": {
|
|
302
|
+
"$type": "color",
|
|
303
|
+
"$value": "#4A8A4C",
|
|
304
|
+
"$description": "3.9:1 on cream — icons and UI only, not text"
|
|
305
|
+
},
|
|
306
|
+
"700": {
|
|
307
|
+
"$type": "color",
|
|
308
|
+
"$value": "#3D7340",
|
|
309
|
+
"$description": "Success text — 5.3:1 on cream, 5.2:1 on green.50"
|
|
310
|
+
},
|
|
311
|
+
"900": {
|
|
312
|
+
"$type": "color",
|
|
313
|
+
"$value": "#2A3629",
|
|
314
|
+
"$description": "Dark theme success tint"
|
|
315
|
+
}
|
|
75
316
|
},
|
|
76
317
|
"red": {
|
|
77
318
|
"$description": "Error — warm-tinted red",
|
|
78
|
-
"50": {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
"
|
|
319
|
+
"50": {
|
|
320
|
+
"$type": "color",
|
|
321
|
+
"$value": "#FDF4F3"
|
|
322
|
+
},
|
|
323
|
+
"100": {
|
|
324
|
+
"$type": "color",
|
|
325
|
+
"$value": "#F9E0DC"
|
|
326
|
+
},
|
|
327
|
+
"300": {
|
|
328
|
+
"$type": "color",
|
|
329
|
+
"$value": "#E08F8D",
|
|
330
|
+
"$description": "Dark theme error — 6.2:1 with cocoa text"
|
|
331
|
+
},
|
|
332
|
+
"500": {
|
|
333
|
+
"$type": "color",
|
|
334
|
+
"$value": "#C75450"
|
|
335
|
+
},
|
|
336
|
+
"600": {
|
|
337
|
+
"$type": "color",
|
|
338
|
+
"$value": "#B54540",
|
|
339
|
+
"$description": "5.1:1 on cream"
|
|
340
|
+
},
|
|
341
|
+
"700": {
|
|
342
|
+
"$type": "color",
|
|
343
|
+
"$value": "#943836",
|
|
344
|
+
"$description": "Hover/active state"
|
|
345
|
+
},
|
|
346
|
+
"900": {
|
|
347
|
+
"$type": "color",
|
|
348
|
+
"$value": "#3D2A29",
|
|
349
|
+
"$description": "Dark theme error tint"
|
|
350
|
+
}
|
|
83
351
|
},
|
|
84
352
|
"blue": {
|
|
85
353
|
"$description": "Blue accent — modern counterbalance for CTAs",
|
|
86
|
-
"50": {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
"
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
"
|
|
95
|
-
|
|
96
|
-
|
|
354
|
+
"50": {
|
|
355
|
+
"$type": "color",
|
|
356
|
+
"$value": "#EEF4F9"
|
|
357
|
+
},
|
|
358
|
+
"100": {
|
|
359
|
+
"$type": "color",
|
|
360
|
+
"$value": "#D6E4F0"
|
|
361
|
+
},
|
|
362
|
+
"200": {
|
|
363
|
+
"$type": "color",
|
|
364
|
+
"$value": "#A0B4C8"
|
|
365
|
+
},
|
|
366
|
+
"300": {
|
|
367
|
+
"$type": "color",
|
|
368
|
+
"$value": "#7A9AB8"
|
|
369
|
+
},
|
|
370
|
+
"400": {
|
|
371
|
+
"$type": "color",
|
|
372
|
+
"$value": "#5A82A8"
|
|
373
|
+
},
|
|
374
|
+
"500": {
|
|
375
|
+
"$type": "color",
|
|
376
|
+
"$value": "#3D5A80",
|
|
377
|
+
"$description": "Signature accent — 7.1:1 with white text, 6.6:1 on cream"
|
|
378
|
+
},
|
|
379
|
+
"600": {
|
|
380
|
+
"$type": "color",
|
|
381
|
+
"$value": "#354F70",
|
|
382
|
+
"$description": "Hover state"
|
|
383
|
+
},
|
|
384
|
+
"700": {
|
|
385
|
+
"$type": "color",
|
|
386
|
+
"$value": "#2E4460",
|
|
387
|
+
"$description": "Active state"
|
|
388
|
+
},
|
|
389
|
+
"800": {
|
|
390
|
+
"$type": "color",
|
|
391
|
+
"$value": "#253850"
|
|
392
|
+
}
|
|
393
|
+
},
|
|
394
|
+
"white": {
|
|
395
|
+
"$type": "color",
|
|
396
|
+
"$value": "#FFFFFF",
|
|
397
|
+
"$description": "Pure white for inputs/highlights"
|
|
398
|
+
}
|
|
97
399
|
},
|
|
98
400
|
"font": {
|
|
99
401
|
"family": {
|
|
100
402
|
"$description": "Bricolage Grotesque — playful, crafted, warm",
|
|
101
|
-
"sans": {
|
|
102
|
-
|
|
103
|
-
|
|
403
|
+
"sans": {
|
|
404
|
+
"$type": "fontFamily",
|
|
405
|
+
"$value": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif"
|
|
406
|
+
},
|
|
407
|
+
"display": {
|
|
408
|
+
"$type": "fontFamily",
|
|
409
|
+
"$value": "'Bricolage Grotesque', 'General Sans', sans-serif"
|
|
410
|
+
},
|
|
411
|
+
"mono": {
|
|
412
|
+
"$type": "fontFamily",
|
|
413
|
+
"$value": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
|
|
414
|
+
}
|
|
104
415
|
},
|
|
105
416
|
"size": {
|
|
106
417
|
"$description": "Slightly expressive type scale",
|
|
107
|
-
"xs": {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
"
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
418
|
+
"xs": {
|
|
419
|
+
"$type": "dimension",
|
|
420
|
+
"$value": "0.75rem",
|
|
421
|
+
"$description": "12px"
|
|
422
|
+
},
|
|
423
|
+
"sm": {
|
|
424
|
+
"$type": "dimension",
|
|
425
|
+
"$value": "0.875rem",
|
|
426
|
+
"$description": "14px"
|
|
427
|
+
},
|
|
428
|
+
"base": {
|
|
429
|
+
"$type": "dimension",
|
|
430
|
+
"$value": "1rem",
|
|
431
|
+
"$description": "16px"
|
|
432
|
+
},
|
|
433
|
+
"lg": {
|
|
434
|
+
"$type": "dimension",
|
|
435
|
+
"$value": "1.125rem",
|
|
436
|
+
"$description": "18px"
|
|
437
|
+
},
|
|
438
|
+
"xl": {
|
|
439
|
+
"$type": "dimension",
|
|
440
|
+
"$value": "1.25rem",
|
|
441
|
+
"$description": "20px"
|
|
442
|
+
},
|
|
443
|
+
"2xl": {
|
|
444
|
+
"$type": "dimension",
|
|
445
|
+
"$value": "1.625rem",
|
|
446
|
+
"$description": "26px"
|
|
447
|
+
},
|
|
448
|
+
"3xl": {
|
|
449
|
+
"$type": "dimension",
|
|
450
|
+
"$value": "2rem",
|
|
451
|
+
"$description": "32px"
|
|
452
|
+
},
|
|
453
|
+
"4xl": {
|
|
454
|
+
"$type": "dimension",
|
|
455
|
+
"$value": "2.625rem",
|
|
456
|
+
"$description": "42px"
|
|
457
|
+
},
|
|
458
|
+
"5xl": {
|
|
459
|
+
"$type": "dimension",
|
|
460
|
+
"$value": "3.25rem",
|
|
461
|
+
"$description": "52px"
|
|
462
|
+
}
|
|
116
463
|
},
|
|
117
464
|
"weight": {
|
|
118
465
|
"$description": "Font weights for hierarchy",
|
|
119
|
-
"normal": {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
466
|
+
"normal": {
|
|
467
|
+
"$type": "fontWeight",
|
|
468
|
+
"$value": "400"
|
|
469
|
+
},
|
|
470
|
+
"medium": {
|
|
471
|
+
"$type": "fontWeight",
|
|
472
|
+
"$value": "500"
|
|
473
|
+
},
|
|
474
|
+
"semibold": {
|
|
475
|
+
"$type": "fontWeight",
|
|
476
|
+
"$value": "600"
|
|
477
|
+
},
|
|
478
|
+
"bold": {
|
|
479
|
+
"$type": "fontWeight",
|
|
480
|
+
"$value": "700"
|
|
481
|
+
}
|
|
123
482
|
},
|
|
124
483
|
"lineHeight": {
|
|
125
484
|
"$description": "Generous line heights for readability",
|
|
126
|
-
"none": {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
"
|
|
131
|
-
|
|
485
|
+
"none": {
|
|
486
|
+
"$type": "number",
|
|
487
|
+
"$value": 1
|
|
488
|
+
},
|
|
489
|
+
"tight": {
|
|
490
|
+
"$type": "number",
|
|
491
|
+
"$value": 1.25
|
|
492
|
+
},
|
|
493
|
+
"snug": {
|
|
494
|
+
"$type": "number",
|
|
495
|
+
"$value": 1.35
|
|
496
|
+
},
|
|
497
|
+
"normal": {
|
|
498
|
+
"$type": "number",
|
|
499
|
+
"$value": 1.5
|
|
500
|
+
},
|
|
501
|
+
"relaxed": {
|
|
502
|
+
"$type": "number",
|
|
503
|
+
"$value": 1.65
|
|
504
|
+
},
|
|
505
|
+
"loose": {
|
|
506
|
+
"$type": "number",
|
|
507
|
+
"$value": 1.8
|
|
508
|
+
}
|
|
132
509
|
},
|
|
133
510
|
"letterSpacing": {
|
|
134
511
|
"$description": "Letter spacing — loose for small, tight for display",
|
|
135
|
-
"tighter": {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
"
|
|
512
|
+
"tighter": {
|
|
513
|
+
"$type": "dimension",
|
|
514
|
+
"$value": "-0.02em"
|
|
515
|
+
},
|
|
516
|
+
"tight": {
|
|
517
|
+
"$type": "dimension",
|
|
518
|
+
"$value": "-0.01em"
|
|
519
|
+
},
|
|
520
|
+
"normal": {
|
|
521
|
+
"$type": "dimension",
|
|
522
|
+
"$value": "0"
|
|
523
|
+
},
|
|
524
|
+
"wide": {
|
|
525
|
+
"$type": "dimension",
|
|
526
|
+
"$value": "0.01em"
|
|
527
|
+
},
|
|
528
|
+
"wider": {
|
|
529
|
+
"$type": "dimension",
|
|
530
|
+
"$value": "0.02em"
|
|
531
|
+
},
|
|
532
|
+
"widest": {
|
|
533
|
+
"$type": "dimension",
|
|
534
|
+
"$value": "0.05em",
|
|
535
|
+
"$description": "Uppercase labels: hero eyebrows, footer headings"
|
|
536
|
+
}
|
|
140
537
|
}
|
|
141
538
|
},
|
|
142
539
|
"spacing": {
|
|
143
540
|
"$description": "Generous spacing — breathing room, not dense",
|
|
144
|
-
"0": {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
"
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
"
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
"
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
541
|
+
"0": {
|
|
542
|
+
"$type": "dimension",
|
|
543
|
+
"$value": "0"
|
|
544
|
+
},
|
|
545
|
+
"px": {
|
|
546
|
+
"$type": "dimension",
|
|
547
|
+
"$value": "1px"
|
|
548
|
+
},
|
|
549
|
+
"0-5": {
|
|
550
|
+
"$type": "dimension",
|
|
551
|
+
"$value": "0.125rem",
|
|
552
|
+
"$description": "2px"
|
|
553
|
+
},
|
|
554
|
+
"1": {
|
|
555
|
+
"$type": "dimension",
|
|
556
|
+
"$value": "0.25rem",
|
|
557
|
+
"$description": "4px"
|
|
558
|
+
},
|
|
559
|
+
"1-5": {
|
|
560
|
+
"$type": "dimension",
|
|
561
|
+
"$value": "0.375rem",
|
|
562
|
+
"$description": "6px"
|
|
563
|
+
},
|
|
564
|
+
"2": {
|
|
565
|
+
"$type": "dimension",
|
|
566
|
+
"$value": "0.5rem",
|
|
567
|
+
"$description": "8px"
|
|
568
|
+
},
|
|
569
|
+
"2-5": {
|
|
570
|
+
"$type": "dimension",
|
|
571
|
+
"$value": "0.625rem",
|
|
572
|
+
"$description": "10px"
|
|
573
|
+
},
|
|
574
|
+
"3": {
|
|
575
|
+
"$type": "dimension",
|
|
576
|
+
"$value": "0.75rem",
|
|
577
|
+
"$description": "12px"
|
|
578
|
+
},
|
|
579
|
+
"3-5": {
|
|
580
|
+
"$type": "dimension",
|
|
581
|
+
"$value": "0.875rem",
|
|
582
|
+
"$description": "14px"
|
|
583
|
+
},
|
|
584
|
+
"4": {
|
|
585
|
+
"$type": "dimension",
|
|
586
|
+
"$value": "1rem",
|
|
587
|
+
"$description": "16px"
|
|
588
|
+
},
|
|
589
|
+
"5": {
|
|
590
|
+
"$type": "dimension",
|
|
591
|
+
"$value": "1.25rem",
|
|
592
|
+
"$description": "20px"
|
|
593
|
+
},
|
|
594
|
+
"6": {
|
|
595
|
+
"$type": "dimension",
|
|
596
|
+
"$value": "1.5rem",
|
|
597
|
+
"$description": "24px"
|
|
598
|
+
},
|
|
599
|
+
"7": {
|
|
600
|
+
"$type": "dimension",
|
|
601
|
+
"$value": "1.75rem",
|
|
602
|
+
"$description": "28px"
|
|
603
|
+
},
|
|
604
|
+
"8": {
|
|
605
|
+
"$type": "dimension",
|
|
606
|
+
"$value": "2rem",
|
|
607
|
+
"$description": "32px"
|
|
608
|
+
},
|
|
609
|
+
"10": {
|
|
610
|
+
"$type": "dimension",
|
|
611
|
+
"$value": "2.5rem",
|
|
612
|
+
"$description": "40px"
|
|
613
|
+
},
|
|
614
|
+
"12": {
|
|
615
|
+
"$type": "dimension",
|
|
616
|
+
"$value": "3rem",
|
|
617
|
+
"$description": "48px"
|
|
618
|
+
},
|
|
619
|
+
"16": {
|
|
620
|
+
"$type": "dimension",
|
|
621
|
+
"$value": "4rem",
|
|
622
|
+
"$description": "64px"
|
|
623
|
+
},
|
|
624
|
+
"20": {
|
|
625
|
+
"$type": "dimension",
|
|
626
|
+
"$value": "5rem",
|
|
627
|
+
"$description": "80px"
|
|
628
|
+
}
|
|
162
629
|
},
|
|
163
630
|
"radius": {
|
|
164
631
|
"$description": "Friendly and soft — not sharp, not overly pill-shaped",
|
|
165
|
-
"none": {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
"
|
|
170
|
-
|
|
171
|
-
|
|
632
|
+
"none": {
|
|
633
|
+
"$type": "dimension",
|
|
634
|
+
"$value": "0"
|
|
635
|
+
},
|
|
636
|
+
"xs": {
|
|
637
|
+
"$type": "dimension",
|
|
638
|
+
"$value": "4px",
|
|
639
|
+
"$description": "Small details, chips"
|
|
640
|
+
},
|
|
641
|
+
"sm": {
|
|
642
|
+
"$type": "dimension",
|
|
643
|
+
"$value": "6px",
|
|
644
|
+
"$description": "Buttons, inputs"
|
|
645
|
+
},
|
|
646
|
+
"md": {
|
|
647
|
+
"$type": "dimension",
|
|
648
|
+
"$value": "10px",
|
|
649
|
+
"$description": "Cards, panels"
|
|
650
|
+
},
|
|
651
|
+
"lg": {
|
|
652
|
+
"$type": "dimension",
|
|
653
|
+
"$value": "14px",
|
|
654
|
+
"$description": "Modals, large containers"
|
|
655
|
+
},
|
|
656
|
+
"xl": {
|
|
657
|
+
"$type": "dimension",
|
|
658
|
+
"$value": "20px",
|
|
659
|
+
"$description": "Hero elements"
|
|
660
|
+
},
|
|
661
|
+
"full": {
|
|
662
|
+
"$type": "dimension",
|
|
663
|
+
"$value": "9999px",
|
|
664
|
+
"$description": "Avatars, pills"
|
|
665
|
+
}
|
|
172
666
|
},
|
|
173
667
|
"shadow": {
|
|
174
668
|
"$description": "Warm, low-contrast shadows — never harsh",
|
|
175
|
-
"none": {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
"
|
|
180
|
-
|
|
669
|
+
"none": {
|
|
670
|
+
"$type": "shadow",
|
|
671
|
+
"$value": "none"
|
|
672
|
+
},
|
|
673
|
+
"soft": {
|
|
674
|
+
"$type": "shadow",
|
|
675
|
+
"$value": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)",
|
|
676
|
+
"$description": "Cards, raised elements"
|
|
677
|
+
},
|
|
678
|
+
"medium": {
|
|
679
|
+
"$type": "shadow",
|
|
680
|
+
"$value": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)",
|
|
681
|
+
"$description": "Dropdowns, popovers"
|
|
682
|
+
},
|
|
683
|
+
"strong": {
|
|
684
|
+
"$type": "shadow",
|
|
685
|
+
"$value": "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)",
|
|
686
|
+
"$description": "Modals, dialogs"
|
|
687
|
+
},
|
|
688
|
+
"glow": {
|
|
689
|
+
"$type": "shadow",
|
|
690
|
+
"$value": "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)",
|
|
691
|
+
"$description": "Focus ring — warm and friendly"
|
|
692
|
+
},
|
|
693
|
+
"inset": {
|
|
694
|
+
"$type": "shadow",
|
|
695
|
+
"$value": "inset 0 1px 3px rgba(61, 50, 41, 0.08)",
|
|
696
|
+
"$description": "Inputs, wells"
|
|
697
|
+
},
|
|
181
698
|
"chunky": {
|
|
182
699
|
"$description": "Offset chunky shadows for playful tactile feel",
|
|
183
|
-
"primary": {
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
700
|
+
"primary": {
|
|
701
|
+
"$type": "color",
|
|
702
|
+
"$value": "#E8C4A0",
|
|
703
|
+
"$description": "Warm peach for primary buttons"
|
|
704
|
+
},
|
|
705
|
+
"secondary": {
|
|
706
|
+
"$type": "color",
|
|
707
|
+
"$value": "#D4C4B0",
|
|
708
|
+
"$description": "Neutral tan for secondary/form elements"
|
|
709
|
+
},
|
|
710
|
+
"accent": {
|
|
711
|
+
"$type": "color",
|
|
712
|
+
"$value": "#A0B4C8",
|
|
713
|
+
"$description": "Blue offset shadow for accent buttons — decorative"
|
|
714
|
+
},
|
|
715
|
+
"error": {
|
|
716
|
+
"$type": "color",
|
|
717
|
+
"$value": "rgba(181, 69, 64, 0.3)",
|
|
718
|
+
"$description": "Error state shadow"
|
|
719
|
+
}
|
|
187
720
|
}
|
|
188
721
|
},
|
|
189
722
|
"gradient": {
|
|
190
723
|
"$description": "Soft, nostalgic gradients — never high-contrast or flashy",
|
|
191
|
-
"sunlit": {
|
|
192
|
-
|
|
193
|
-
|
|
724
|
+
"sunlit": {
|
|
725
|
+
"$type": "string",
|
|
726
|
+
"$value": "linear-gradient(180deg, {color.warm.dawn} 0%, {color.warm.shell} 30%, {color.warm.biscuit} 100%)",
|
|
727
|
+
"$description": "Gentle warmth for surfaces — same stops as the sunlit card"
|
|
728
|
+
},
|
|
729
|
+
"warm": {
|
|
730
|
+
"$type": "string",
|
|
731
|
+
"$value": "linear-gradient(135deg, #C54300 0%, #FF9800 100%)",
|
|
732
|
+
"$description": "Brand emphasis"
|
|
733
|
+
},
|
|
734
|
+
"nostalgic": {
|
|
735
|
+
"$type": "string",
|
|
736
|
+
"$value": "linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%)",
|
|
737
|
+
"$description": "Subtle retro depth"
|
|
738
|
+
}
|
|
194
739
|
},
|
|
195
740
|
"motion": {
|
|
196
741
|
"$description": "Subtle and playful — relaxed easing, never snappy",
|
|
197
742
|
"duration": {
|
|
198
|
-
"quick": {
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
743
|
+
"quick": {
|
|
744
|
+
"$type": "duration",
|
|
745
|
+
"$value": "100ms",
|
|
746
|
+
"$description": "Micro-interactions (color shifts)"
|
|
747
|
+
},
|
|
748
|
+
"snappy": {
|
|
749
|
+
"$type": "duration",
|
|
750
|
+
"$value": "150ms",
|
|
751
|
+
"$description": "Button/input transitions"
|
|
752
|
+
},
|
|
753
|
+
"gentle": {
|
|
754
|
+
"$type": "duration",
|
|
755
|
+
"$value": "200ms",
|
|
756
|
+
"$description": "Standard interactions (hover, focus)"
|
|
757
|
+
},
|
|
758
|
+
"relaxed": {
|
|
759
|
+
"$type": "duration",
|
|
760
|
+
"$value": "300ms",
|
|
761
|
+
"$description": "Larger transitions (panels)"
|
|
762
|
+
},
|
|
763
|
+
"slow": {
|
|
764
|
+
"$type": "duration",
|
|
765
|
+
"$value": "400ms",
|
|
766
|
+
"$description": "Emphasis animations"
|
|
767
|
+
}
|
|
203
768
|
},
|
|
204
769
|
"easing": {
|
|
205
|
-
"gentle": {
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
770
|
+
"gentle": {
|
|
771
|
+
"$type": "cubicBezier",
|
|
772
|
+
"$value": [
|
|
773
|
+
0.4,
|
|
774
|
+
0,
|
|
775
|
+
0.2,
|
|
776
|
+
1
|
|
777
|
+
],
|
|
778
|
+
"$description": "Default — smooth and natural"
|
|
779
|
+
},
|
|
780
|
+
"out": {
|
|
781
|
+
"$type": "cubicBezier",
|
|
782
|
+
"$value": [
|
|
783
|
+
0,
|
|
784
|
+
0,
|
|
785
|
+
0.2,
|
|
786
|
+
1
|
|
787
|
+
],
|
|
788
|
+
"$description": "Enters and reveals"
|
|
789
|
+
},
|
|
790
|
+
"in": {
|
|
791
|
+
"$type": "cubicBezier",
|
|
792
|
+
"$value": [
|
|
793
|
+
0.4,
|
|
794
|
+
0,
|
|
795
|
+
1,
|
|
796
|
+
1
|
|
797
|
+
],
|
|
798
|
+
"$description": "Exits"
|
|
799
|
+
},
|
|
800
|
+
"playful": {
|
|
801
|
+
"$type": "cubicBezier",
|
|
802
|
+
"$value": [
|
|
803
|
+
0.34,
|
|
804
|
+
1.3,
|
|
805
|
+
0.64,
|
|
806
|
+
1
|
|
807
|
+
],
|
|
808
|
+
"$description": "Celebrations — slight overshoot"
|
|
809
|
+
}
|
|
209
810
|
}
|
|
210
811
|
},
|
|
211
812
|
"border": {
|
|
212
813
|
"width": {
|
|
213
814
|
"$description": "Border widths",
|
|
214
|
-
"0": {
|
|
215
|
-
|
|
216
|
-
|
|
815
|
+
"0": {
|
|
816
|
+
"$type": "dimension",
|
|
817
|
+
"$value": "0"
|
|
818
|
+
},
|
|
819
|
+
"1": {
|
|
820
|
+
"$type": "dimension",
|
|
821
|
+
"$value": "1px"
|
|
822
|
+
},
|
|
823
|
+
"2": {
|
|
824
|
+
"$type": "dimension",
|
|
825
|
+
"$value": "2px"
|
|
826
|
+
},
|
|
827
|
+
"chunky": {
|
|
828
|
+
"$type": "dimension",
|
|
829
|
+
"$value": "2.5px",
|
|
830
|
+
"$description": "Signature chunky frame for controls and feedback"
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
},
|
|
834
|
+
"size": {
|
|
835
|
+
"$description": "Fixed layout sizes: content widths and viewport breakpoints",
|
|
836
|
+
"container": {
|
|
837
|
+
"$description": "Content max-widths",
|
|
838
|
+
"sm": {
|
|
839
|
+
"$type": "dimension",
|
|
840
|
+
"$value": "640px"
|
|
841
|
+
},
|
|
842
|
+
"md": {
|
|
843
|
+
"$type": "dimension",
|
|
844
|
+
"$value": "768px"
|
|
845
|
+
},
|
|
846
|
+
"lg": {
|
|
847
|
+
"$type": "dimension",
|
|
848
|
+
"$value": "1024px"
|
|
849
|
+
},
|
|
850
|
+
"xl": {
|
|
851
|
+
"$type": "dimension",
|
|
852
|
+
"$value": "1280px"
|
|
853
|
+
}
|
|
854
|
+
},
|
|
855
|
+
"breakpoint": {
|
|
856
|
+
"$description": "Viewport widths for @media queries. CSS can't read custom properties in a media query, so components write the value; check:tokens fails any (min|max)-width that isn't one of these (or one pixel either side, for adjoining ranges).",
|
|
857
|
+
"xs": {
|
|
858
|
+
"$type": "dimension",
|
|
859
|
+
"$value": "480px"
|
|
860
|
+
},
|
|
861
|
+
"sm": {
|
|
862
|
+
"$type": "dimension",
|
|
863
|
+
"$value": "640px"
|
|
864
|
+
},
|
|
865
|
+
"md": {
|
|
866
|
+
"$type": "dimension",
|
|
867
|
+
"$value": "768px"
|
|
868
|
+
},
|
|
869
|
+
"lg": {
|
|
870
|
+
"$type": "dimension",
|
|
871
|
+
"$value": "1024px"
|
|
872
|
+
}
|
|
217
873
|
}
|
|
218
874
|
},
|
|
219
875
|
"zIndex": {
|
|
220
876
|
"$description": "Z-index layering",
|
|
221
|
-
"0": {
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
"
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
877
|
+
"0": {
|
|
878
|
+
"$type": "number",
|
|
879
|
+
"$value": 0
|
|
880
|
+
},
|
|
881
|
+
"10": {
|
|
882
|
+
"$type": "number",
|
|
883
|
+
"$value": 10
|
|
884
|
+
},
|
|
885
|
+
"20": {
|
|
886
|
+
"$type": "number",
|
|
887
|
+
"$value": 20
|
|
888
|
+
},
|
|
889
|
+
"dropdown": {
|
|
890
|
+
"$type": "number",
|
|
891
|
+
"$value": 1000
|
|
892
|
+
},
|
|
893
|
+
"sticky": {
|
|
894
|
+
"$type": "number",
|
|
895
|
+
"$value": 1100
|
|
896
|
+
},
|
|
897
|
+
"modal": {
|
|
898
|
+
"$type": "number",
|
|
899
|
+
"$value": 1200
|
|
900
|
+
},
|
|
901
|
+
"popover": {
|
|
902
|
+
"$type": "number",
|
|
903
|
+
"$value": 1300
|
|
904
|
+
},
|
|
905
|
+
"tooltip": {
|
|
906
|
+
"$type": "number",
|
|
907
|
+
"$value": 1400
|
|
908
|
+
}
|
|
229
909
|
}
|
|
230
910
|
}
|