@putdotio/design 1.1.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/tokens.ts DELETED
@@ -1,2104 +0,0 @@
1
- // Do not edit directly. Generated from tokens/**/*.tokens.json.
2
-
3
- export const tokens = {
4
- "component.button.primary.background": {
5
- "cssName": "--button-primary-bg",
6
- "type": "color",
7
- "mode": "global",
8
- "value": "hsl(44.7, 97.9%, 63.1%)",
9
- "originalValue": "{color.brand.yellow}",
10
- "description": "Primary command background."
11
- },
12
- "component.button.primary.foreground": {
13
- "cssName": "--button-primary-fg",
14
- "type": "color",
15
- "mode": "global",
16
- "value": "hsl(0, 0%, 4.0%)",
17
- "originalValue": "hsl(0, 0%, 4.0%)",
18
- "description": "Text or icon color on the yellow primary button."
19
- },
20
- "component.button.primary.radius": {
21
- "cssName": "--button-radius",
22
- "type": "dimension",
23
- "mode": "global",
24
- "value": "6px",
25
- "originalValue": "{radius.default}"
26
- },
27
- "component.button.secondary.background": {
28
- "cssName": "--button-secondary-bg",
29
- "type": "color",
30
- "mode": "light",
31
- "value": "hsl(0, 0%, 95.1%)",
32
- "originalValue": "{color.neutral.light.componentBg}"
33
- },
34
- "component.button.secondary.backgroundDark": {
35
- "cssName": "--button-secondary-bg",
36
- "type": "color",
37
- "mode": "dark",
38
- "value": "hsl(0, 0%, 13.6%)",
39
- "originalValue": "{color.neutral.dark.componentBg}"
40
- },
41
- "component.button.secondary.foreground": {
42
- "cssName": "--button-secondary-fg",
43
- "type": "color",
44
- "mode": "light",
45
- "value": "hsl(0, 0%, 9.0%)",
46
- "originalValue": "{color.neutral.light.text}"
47
- },
48
- "component.button.secondary.foregroundDark": {
49
- "cssName": "--button-secondary-fg",
50
- "type": "color",
51
- "mode": "dark",
52
- "value": "hsl(0, 0%, 93.0%)",
53
- "originalValue": "{color.neutral.dark.text}"
54
- },
55
- "component.input.background": {
56
- "cssName": "--input-bg",
57
- "type": "color",
58
- "mode": "light",
59
- "value": "hsl(0, 0%, 100%)",
60
- "originalValue": "{surface.light.appBg}"
61
- },
62
- "component.input.backgroundDark": {
63
- "cssName": "--input-bg",
64
- "type": "color",
65
- "mode": "dark",
66
- "value": "hsl(0, 0%, 8.5%)",
67
- "originalValue": "{surface.dark.appBg}"
68
- },
69
- "component.input.border": {
70
- "cssName": "--input-border",
71
- "type": "color",
72
- "mode": "light",
73
- "value": "hsl(0, 0%, 85.8%)",
74
- "originalValue": "{color.neutral.light.border}"
75
- },
76
- "component.input.borderDark": {
77
- "cssName": "--input-border",
78
- "type": "color",
79
- "mode": "dark",
80
- "value": "hsl(0, 0%, 24.3%)",
81
- "originalValue": "{color.neutral.dark.border}"
82
- },
83
- "component.input.radius": {
84
- "cssName": "--input-radius",
85
- "type": "dimension",
86
- "mode": "global",
87
- "value": "6px",
88
- "originalValue": "{radius.default}"
89
- },
90
- "component.field.background": {
91
- "cssName": "--field-bg",
92
- "type": "color",
93
- "mode": "light",
94
- "value": "hsl(0, 0%, 100%)",
95
- "originalValue": "{surface.light.appBg}",
96
- "description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel."
97
- },
98
- "component.field.backgroundDark": {
99
- "cssName": "--field-bg",
100
- "type": "color",
101
- "mode": "dark",
102
- "value": "hsl(0, 0%, 8.5%)",
103
- "originalValue": "{surface.dark.appBg}",
104
- "description": "Dark-mode form-control fill."
105
- },
106
- "component.field.backgroundDisabled": {
107
- "cssName": "--field-bg-disabled",
108
- "type": "color",
109
- "mode": "light",
110
- "value": "hsl(0, 0%, 97.3%)",
111
- "originalValue": "{color.neutral.light.bgSecondary}",
112
- "description": "Disabled form-control fill."
113
- },
114
- "component.field.backgroundDisabledDark": {
115
- "cssName": "--field-bg-disabled",
116
- "type": "color",
117
- "mode": "dark",
118
- "value": "hsl(0, 0%, 11.0%)",
119
- "originalValue": "{color.neutral.dark.bgSecondary}",
120
- "description": "Dark-mode disabled form-control fill."
121
- },
122
- "component.field.border": {
123
- "cssName": "--field-border",
124
- "type": "color",
125
- "mode": "light",
126
- "value": "hsl(0, 0%, 85.8%)",
127
- "originalValue": "{color.neutral.light.border}",
128
- "description": "Resting form-control border."
129
- },
130
- "component.field.borderDark": {
131
- "cssName": "--field-border",
132
- "type": "color",
133
- "mode": "dark",
134
- "value": "hsl(0, 0%, 24.3%)",
135
- "originalValue": "{color.neutral.dark.border}",
136
- "description": "Dark-mode resting form-control border."
137
- },
138
- "component.field.borderHover": {
139
- "cssName": "--field-border-hover",
140
- "type": "color",
141
- "mode": "light",
142
- "value": "hsl(0, 0%, 78.0%)",
143
- "originalValue": "{color.neutral.light.borderHover}",
144
- "description": "Hover form-control border."
145
- },
146
- "component.field.borderHoverDark": {
147
- "cssName": "--field-border-hover",
148
- "type": "color",
149
- "mode": "dark",
150
- "value": "hsl(0, 0%, 31.2%)",
151
- "originalValue": "{color.neutral.dark.borderHover}",
152
- "description": "Dark-mode hover form-control border."
153
- },
154
- "component.field.borderFocus": {
155
- "cssName": "--field-border-focus",
156
- "type": "color",
157
- "mode": "light",
158
- "value": "hsl(0, 0%, 78.0%)",
159
- "originalValue": "{color.neutral.light.borderHover}",
160
- "description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow."
161
- },
162
- "component.field.borderFocusDark": {
163
- "cssName": "--field-border-focus",
164
- "type": "color",
165
- "mode": "dark",
166
- "value": "hsl(0, 0%, 31.2%)",
167
- "originalValue": "{color.neutral.dark.borderHover}",
168
- "description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow."
169
- },
170
- "component.field.text": {
171
- "cssName": "--field-text",
172
- "type": "color",
173
- "mode": "light",
174
- "value": "hsl(0, 0%, 9.0%)",
175
- "originalValue": "{color.neutral.light.text}",
176
- "description": "Form-control text color."
177
- },
178
- "component.field.textDark": {
179
- "cssName": "--field-text",
180
- "type": "color",
181
- "mode": "dark",
182
- "value": "hsl(0, 0%, 93.0%)",
183
- "originalValue": "{color.neutral.dark.text}",
184
- "description": "Dark-mode form-control text color."
185
- },
186
- "component.field.placeholder": {
187
- "cssName": "--field-placeholder",
188
- "type": "color",
189
- "mode": "light",
190
- "value": "hsl(0, 0%, 43.5%)",
191
- "originalValue": "{color.neutral.light.textSecondary}",
192
- "description": "Form-control placeholder color."
193
- },
194
- "component.field.placeholderDark": {
195
- "cssName": "--field-placeholder",
196
- "type": "color",
197
- "mode": "dark",
198
- "value": "hsl(0, 0%, 62.8%)",
199
- "originalValue": "{color.neutral.dark.textSecondary}",
200
- "description": "Dark-mode form-control placeholder color."
201
- },
202
- "component.field.ring": {
203
- "cssName": "--field-ring",
204
- "type": "string",
205
- "mode": "light",
206
- "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
207
- "originalValue": "0 0 0 1px {color.neutral.light.borderHover}",
208
- "description": "Quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
209
- },
210
- "component.field.ringDark": {
211
- "cssName": "--field-ring",
212
- "type": "string",
213
- "mode": "dark",
214
- "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
215
- "originalValue": "0 0 0 1px {color.neutral.dark.borderHover}",
216
- "description": "Dark-mode quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
217
- },
218
- "component.panel.background": {
219
- "cssName": "--panel-bg",
220
- "type": "color",
221
- "mode": "light",
222
- "value": "hsl(0, 0%, 95.1%)",
223
- "originalValue": "{color.neutral.light.componentBg}",
224
- "description": "Raised panel background on the app background surface."
225
- },
226
- "component.panel.backgroundDark": {
227
- "cssName": "--panel-bg",
228
- "type": "color",
229
- "mode": "dark",
230
- "value": "hsl(0, 0%, 13.6%)",
231
- "originalValue": "{color.neutral.dark.componentBg}",
232
- "description": "Dark-mode raised panel background on the app background surface."
233
- },
234
- "component.panel.border": {
235
- "cssName": "--panel-border",
236
- "type": "color",
237
- "mode": "light",
238
- "value": "hsl(0, 0%, 88.7%)",
239
- "originalValue": "{color.neutral.light.line}",
240
- "description": "Raised panel hairline border."
241
- },
242
- "component.panel.borderDark": {
243
- "cssName": "--panel-border",
244
- "type": "color",
245
- "mode": "dark",
246
- "value": "hsl(0, 0%, 20.5%)",
247
- "originalValue": "{color.neutral.dark.line}",
248
- "description": "Dark-mode raised panel hairline border."
249
- },
250
- "component.panel.radius": {
251
- "cssName": "--panel-radius",
252
- "type": "dimension",
253
- "mode": "global",
254
- "value": "10px",
255
- "originalValue": "{radius.lg}",
256
- "description": "Raised panel radius."
257
- },
258
- "component.panel.shadow": {
259
- "cssName": "--panel-shadow",
260
- "type": "string",
261
- "mode": "light",
262
- "value": "0 4px 12px hsla(0, 0%, 0%, 0.08)",
263
- "originalValue": "{elevation.md}",
264
- "description": "Raised panel shadow."
265
- },
266
- "component.panel.shadowDark": {
267
- "cssName": "--panel-shadow",
268
- "type": "string",
269
- "mode": "dark",
270
- "value": "0 4px 12px hsla(0, 0%, 0%, 0.5)",
271
- "originalValue": "{surface.dark.shadowMd}",
272
- "description": "Dark-mode raised panel shadow."
273
- },
274
- "component.alias.background": {
275
- "cssName": "--background",
276
- "type": "color",
277
- "mode": "light",
278
- "value": "hsl(0, 0%, 99.0%)",
279
- "originalValue": "{color.neutral.light.bg}"
280
- },
281
- "component.alias.backgroundDark": {
282
- "cssName": "--background",
283
- "type": "color",
284
- "mode": "dark",
285
- "value": "hsl(0, 0%, 8.5%)",
286
- "originalValue": "{color.neutral.dark.bg}"
287
- },
288
- "component.alias.foreground": {
289
- "cssName": "--foreground",
290
- "type": "color",
291
- "mode": "light",
292
- "value": "hsl(0, 0%, 9.0%)",
293
- "originalValue": "{color.neutral.light.text}"
294
- },
295
- "component.alias.foregroundDark": {
296
- "cssName": "--foreground",
297
- "type": "color",
298
- "mode": "dark",
299
- "value": "hsl(0, 0%, 93.0%)",
300
- "originalValue": "{color.neutral.dark.text}"
301
- },
302
- "component.alias.foregroundMuted": {
303
- "cssName": "--foreground-muted",
304
- "type": "color",
305
- "mode": "light",
306
- "value": "hsl(0, 0%, 43.5%)",
307
- "originalValue": "{color.neutral.light.textSecondary}"
308
- },
309
- "component.alias.foregroundMutedDark": {
310
- "cssName": "--foreground-muted",
311
- "type": "color",
312
- "mode": "dark",
313
- "value": "hsl(0, 0%, 62.8%)",
314
- "originalValue": "{color.neutral.dark.textSecondary}"
315
- },
316
- "component.alias.primary": {
317
- "cssName": "--primary",
318
- "type": "color",
319
- "mode": "global",
320
- "value": "hsl(44.7, 97.9%, 63.1%)",
321
- "originalValue": "{color.brand.yellow}"
322
- },
323
- "component.alias.primaryForeground": {
324
- "cssName": "--primary-foreground",
325
- "type": "color",
326
- "mode": "global",
327
- "value": "hsl(0, 0%, 0%)",
328
- "originalValue": "hsl(0, 0%, 0%)"
329
- },
330
- "component.alias.success": {
331
- "cssName": "--success",
332
- "type": "color",
333
- "mode": "light",
334
- "value": "hsl(153, 67.0%, 28.5%)",
335
- "originalValue": "{color.green.light.textSecondary}"
336
- },
337
- "component.alias.successDark": {
338
- "cssName": "--success",
339
- "type": "color",
340
- "mode": "dark",
341
- "value": "hsl(151, 51.7%, 28.4%)",
342
- "originalValue": "{color.green.dark.borderHover}"
343
- },
344
- "component.alias.successForeground": {
345
- "cssName": "--success-foreground",
346
- "type": "color",
347
- "mode": "global",
348
- "value": "hsl(0, 0%, 100%)",
349
- "originalValue": "hsl(0, 0%, 100%)"
350
- },
351
- "component.alias.destructive": {
352
- "cssName": "--destructive",
353
- "type": "color",
354
- "mode": "light",
355
- "value": "hsl(358, 65.0%, 48.7%)",
356
- "originalValue": "{color.red.light.textSecondary}"
357
- },
358
- "component.alias.destructiveDark": {
359
- "cssName": "--destructive",
360
- "type": "color",
361
- "mode": "dark",
362
- "value": "hsl(358, 65.0%, 40.4%)",
363
- "originalValue": "{color.red.dark.borderHover}"
364
- },
365
- "component.alias.destructiveForeground": {
366
- "cssName": "--destructive-foreground",
367
- "type": "color",
368
- "mode": "global",
369
- "value": "hsl(0, 0%, 100%)",
370
- "originalValue": "hsl(0, 0%, 100%)"
371
- },
372
- "component.alias.solidForeground": {
373
- "cssName": "--solid-foreground",
374
- "type": "color",
375
- "mode": "global",
376
- "value": "hsl(0, 0%, 100%)",
377
- "originalValue": "hsl(0, 0%, 100%)"
378
- },
379
- "component.alias.muted": {
380
- "cssName": "--muted",
381
- "type": "color",
382
- "mode": "light",
383
- "value": "hsl(0, 0%, 97.3%)",
384
- "originalValue": "{color.neutral.light.bgSecondary}"
385
- },
386
- "component.alias.mutedDark": {
387
- "cssName": "--muted",
388
- "type": "color",
389
- "mode": "dark",
390
- "value": "hsl(0, 0%, 11.0%)",
391
- "originalValue": "{color.neutral.dark.bgSecondary}"
392
- },
393
- "component.alias.mutedForeground": {
394
- "cssName": "--muted-foreground",
395
- "type": "color",
396
- "mode": "light",
397
- "value": "hsl(0, 0%, 43.5%)",
398
- "originalValue": "{color.neutral.light.textSecondary}"
399
- },
400
- "component.alias.mutedForegroundDark": {
401
- "cssName": "--muted-foreground",
402
- "type": "color",
403
- "mode": "dark",
404
- "value": "hsl(0, 0%, 62.8%)",
405
- "originalValue": "{color.neutral.dark.textSecondary}"
406
- },
407
- "component.alias.accent": {
408
- "cssName": "--accent",
409
- "type": "color",
410
- "mode": "light",
411
- "value": "hsl(0, 0%, 95.1%)",
412
- "originalValue": "{color.neutral.light.componentBg}"
413
- },
414
- "component.alias.accentDark": {
415
- "cssName": "--accent",
416
- "type": "color",
417
- "mode": "dark",
418
- "value": "hsl(0, 0%, 13.6%)",
419
- "originalValue": "{color.neutral.dark.componentBg}"
420
- },
421
- "component.alias.accentForeground": {
422
- "cssName": "--accent-foreground",
423
- "type": "color",
424
- "mode": "light",
425
- "value": "hsl(0, 0%, 9.0%)",
426
- "originalValue": "{color.neutral.light.text}"
427
- },
428
- "component.alias.accentForegroundDark": {
429
- "cssName": "--accent-foreground",
430
- "type": "color",
431
- "mode": "dark",
432
- "value": "hsl(0, 0%, 93.0%)",
433
- "originalValue": "{color.neutral.dark.text}"
434
- },
435
- "component.alias.card": {
436
- "cssName": "--card",
437
- "type": "color",
438
- "mode": "light",
439
- "value": "hsl(0, 0%, 95.1%)",
440
- "originalValue": "{color.neutral.light.componentBg}"
441
- },
442
- "component.alias.cardDark": {
443
- "cssName": "--card",
444
- "type": "color",
445
- "mode": "dark",
446
- "value": "hsl(0, 0%, 13.6%)",
447
- "originalValue": "{color.neutral.dark.componentBg}"
448
- },
449
- "component.alias.cardForeground": {
450
- "cssName": "--card-foreground",
451
- "type": "color",
452
- "mode": "light",
453
- "value": "hsl(0, 0%, 9.0%)",
454
- "originalValue": "{color.neutral.light.text}"
455
- },
456
- "component.alias.cardForegroundDark": {
457
- "cssName": "--card-foreground",
458
- "type": "color",
459
- "mode": "dark",
460
- "value": "hsl(0, 0%, 93.0%)",
461
- "originalValue": "{color.neutral.dark.text}"
462
- },
463
- "component.alias.popover": {
464
- "cssName": "--popover",
465
- "type": "color",
466
- "mode": "light",
467
- "value": "hsl(0, 0%, 95.1%)",
468
- "originalValue": "{color.neutral.light.componentBg}"
469
- },
470
- "component.alias.popoverDark": {
471
- "cssName": "--popover",
472
- "type": "color",
473
- "mode": "dark",
474
- "value": "hsl(0, 0%, 13.6%)",
475
- "originalValue": "{color.neutral.dark.componentBg}"
476
- },
477
- "component.alias.popoverForeground": {
478
- "cssName": "--popover-foreground",
479
- "type": "color",
480
- "mode": "light",
481
- "value": "hsl(0, 0%, 9.0%)",
482
- "originalValue": "{color.neutral.light.text}"
483
- },
484
- "component.alias.popoverForegroundDark": {
485
- "cssName": "--popover-foreground",
486
- "type": "color",
487
- "mode": "dark",
488
- "value": "hsl(0, 0%, 93.0%)",
489
- "originalValue": "{color.neutral.dark.text}"
490
- },
491
- "component.alias.input": {
492
- "cssName": "--input",
493
- "type": "color",
494
- "mode": "light",
495
- "value": "hsl(0, 0%, 85.8%)",
496
- "originalValue": "{color.neutral.light.border}"
497
- },
498
- "component.alias.inputDark": {
499
- "cssName": "--input",
500
- "type": "color",
501
- "mode": "dark",
502
- "value": "hsl(0, 0%, 24.3%)",
503
- "originalValue": "{color.neutral.dark.border}"
504
- },
505
- "component.alias.ring": {
506
- "cssName": "--ring",
507
- "type": "color",
508
- "mode": "global",
509
- "value": "hsla(47, 100%, 65%, 0.35)",
510
- "originalValue": "{elevation.focusColor}"
511
- },
512
- "component.fileRow.background": {
513
- "cssName": "--file-row-bg",
514
- "type": "color",
515
- "mode": "light",
516
- "value": "transparent",
517
- "originalValue": "{surface.light.listItemBg}"
518
- },
519
- "component.fileRow.backgroundDark": {
520
- "cssName": "--file-row-bg",
521
- "type": "color",
522
- "mode": "dark",
523
- "value": "transparent",
524
- "originalValue": "{surface.dark.listItemBg}"
525
- },
526
- "component.fileRow.hoverBackground": {
527
- "cssName": "--file-row-bg-hover",
528
- "type": "color",
529
- "mode": "light",
530
- "value": "hsl(0, 0%, 97.3%)",
531
- "originalValue": "{surface.light.listItemBgHover}"
532
- },
533
- "component.fileRow.hoverBackgroundDark": {
534
- "cssName": "--file-row-bg-hover",
535
- "type": "color",
536
- "mode": "dark",
537
- "value": "hsl(0, 0%, 11.0%)",
538
- "originalValue": "{surface.dark.listItemBgHover}"
539
- },
540
- "component.fileRow.icon": {
541
- "cssName": "--file-row-icon",
542
- "type": "color",
543
- "mode": "global",
544
- "value": "hsl(44.7, 97.9%, 63.1%)",
545
- "originalValue": "{color.brand.yellow}"
546
- },
547
- "component.notification.infoBackground": {
548
- "cssName": "--notification-info-bg",
549
- "type": "color",
550
- "mode": "light",
551
- "value": "hsl(0, 0%, 97.3%)",
552
- "originalValue": "{color.neutral.light.bgSecondary}"
553
- },
554
- "component.notification.infoBackgroundDark": {
555
- "cssName": "--notification-info-bg",
556
- "type": "color",
557
- "mode": "dark",
558
- "value": "hsl(0, 0%, 13.6%)",
559
- "originalValue": "{color.neutral.dark.componentBg}"
560
- },
561
- "component.notification.dangerBackground": {
562
- "cssName": "--notification-danger-bg",
563
- "type": "color",
564
- "mode": "light",
565
- "value": "hsl(360, 100%, 96.8%)",
566
- "originalValue": "{color.red.light.componentBg}"
567
- },
568
- "component.notification.dangerBackgroundDark": {
569
- "cssName": "--notification-danger-bg",
570
- "type": "color",
571
- "mode": "dark",
572
- "value": "hsl(356, 43.4%, 16.4%)",
573
- "originalValue": "{color.red.dark.componentBg}"
574
- },
575
- "context.tv.surface.0": {
576
- "cssName": "--surf-0",
577
- "type": "color",
578
- "mode": "tv",
579
- "value": "#000",
580
- "originalValue": "#000"
581
- },
582
- "context.tv.surface.1": {
583
- "cssName": "--surf-1",
584
- "type": "color",
585
- "mode": "tv",
586
- "value": "#0a0a0a",
587
- "originalValue": "#0a0a0a"
588
- },
589
- "context.tv.surface.2": {
590
- "cssName": "--surf-2",
591
- "type": "color",
592
- "mode": "tv",
593
- "value": "#161616",
594
- "originalValue": "#161616"
595
- },
596
- "context.tv.surface.3": {
597
- "cssName": "--surf-3",
598
- "type": "color",
599
- "mode": "tv",
600
- "value": "#1f1f1f",
601
- "originalValue": "#1f1f1f"
602
- },
603
- "context.tv.text.primary": {
604
- "cssName": "--text-1",
605
- "type": "color",
606
- "mode": "tv",
607
- "value": "#f4f4f4",
608
- "originalValue": "#f4f4f4"
609
- },
610
- "context.tv.text.secondary": {
611
- "cssName": "--text-2",
612
- "type": "color",
613
- "mode": "tv",
614
- "value": "rgba(244,244,244,0.62)",
615
- "originalValue": "rgba(244,244,244,0.62)"
616
- },
617
- "context.tv.text.tertiary": {
618
- "cssName": "--text-3",
619
- "type": "color",
620
- "mode": "tv",
621
- "value": "rgba(244,244,244,0.38)",
622
- "originalValue": "rgba(244,244,244,0.38)"
623
- },
624
- "context.tv.glass.1": {
625
- "cssName": "--glass-1-bg",
626
- "type": "color",
627
- "mode": "tv",
628
- "value": "rgba(255,255,255,0.06)",
629
- "originalValue": "rgba(255,255,255,0.06)"
630
- },
631
- "context.tv.glass.2": {
632
- "cssName": "--glass-2-bg",
633
- "type": "color",
634
- "mode": "tv",
635
- "value": "rgba(255,255,255,0.10)",
636
- "originalValue": "rgba(255,255,255,0.10)"
637
- },
638
- "context.tv.glass.3": {
639
- "cssName": "--glass-3-bg",
640
- "type": "color",
641
- "mode": "tv",
642
- "value": "rgba(255,255,255,0.14)",
643
- "originalValue": "rgba(255,255,255,0.14)"
644
- },
645
- "context.tv.glass.border": {
646
- "cssName": "--glass-border",
647
- "type": "color",
648
- "mode": "tv",
649
- "value": "rgba(255,255,255,0.12)",
650
- "originalValue": "rgba(255,255,255,0.12)"
651
- },
652
- "context.tv.glass.borderStrong": {
653
- "cssName": "--glass-border-strong",
654
- "type": "color",
655
- "mode": "tv",
656
- "value": "rgba(255,255,255,0.22)",
657
- "originalValue": "rgba(255,255,255,0.22)"
658
- },
659
- "context.tv.focus.ring": {
660
- "cssName": "--focus-ring",
661
- "type": "color",
662
- "mode": "tv",
663
- "value": "rgba(253,206,69,0.18)",
664
- "originalValue": "rgba(253,206,69,0.18)"
665
- },
666
- "context.tv.focus.liftShadow": {
667
- "cssName": "--focus-shadow",
668
- "type": "string",
669
- "mode": "tv",
670
- "value": "0 14px 30px rgba(0,0,0,0.45)",
671
- "originalValue": "0 14px 30px rgba(0,0,0,0.45)"
672
- },
673
- "context.tv.channelArt.production.posterBackground": {
674
- "cssName": "--tv-channel-art-production-poster-bg",
675
- "type": "color",
676
- "mode": "tv",
677
- "value": "#333333",
678
- "originalValue": "#333333"
679
- },
680
- "context.tv.channelArt.production.splashBackground": {
681
- "cssName": "--tv-channel-art-production-splash-bg",
682
- "type": "color",
683
- "mode": "tv",
684
- "value": "hsl(0, 0%, 8.5%)",
685
- "originalValue": "{color.neutral.dark.bg}"
686
- },
687
- "context.tv.channelArt.development.background": {
688
- "cssName": "--tv-channel-art-development-bg",
689
- "type": "color",
690
- "mode": "tv",
691
- "value": "#248FE5",
692
- "originalValue": "#248FE5"
693
- },
694
- "context.tv.channelArt.development.accent": {
695
- "cssName": "--tv-channel-art-development-accent",
696
- "type": "color",
697
- "mode": "tv",
698
- "value": "#9FD5FF",
699
- "originalValue": "#9FD5FF"
700
- },
701
- "context.tv.channelArt.development.grid": {
702
- "cssName": "--tv-channel-art-development-grid",
703
- "type": "color",
704
- "mode": "tv",
705
- "value": "rgba(255,255,255,0.18)",
706
- "originalValue": "rgba(255,255,255,0.18)"
707
- },
708
- "context.tv.channelArt.lab.background": {
709
- "cssName": "--tv-channel-art-lab-bg",
710
- "type": "color",
711
- "mode": "tv",
712
- "value": "#0a0f0a",
713
- "originalValue": "#0a0f0a"
714
- },
715
- "context.tv.channelArt.lab.foreground": {
716
- "cssName": "--tv-channel-art-lab-fg",
717
- "type": "color",
718
- "mode": "tv",
719
- "value": "#e8ffe4",
720
- "originalValue": "#e8ffe4"
721
- },
722
- "context.tv.channelArt.lab.accent": {
723
- "cssName": "--tv-channel-art-lab-accent",
724
- "type": "color",
725
- "mode": "tv",
726
- "value": "#39FF14",
727
- "originalValue": "#39FF14"
728
- },
729
- "color.brand.yellow": {
730
- "cssName": "--yellow-solid",
731
- "type": "color",
732
- "mode": "global",
733
- "value": "hsl(44.7, 97.9%, 63.1%)",
734
- "originalValue": "hsl(44.7, 97.9%, 63.1%)",
735
- "description": "Sacred put.io brand yellow (canonical hex #FDCE45). Do not change or tint."
736
- },
737
- "color.neutral.light.bg": {
738
- "cssName": "--bg",
739
- "type": "color",
740
- "mode": "light",
741
- "value": "hsl(0, 0%, 99.0%)",
742
- "originalValue": "hsl(0, 0%, 99.0%)"
743
- },
744
- "color.neutral.light.bgSecondary": {
745
- "cssName": "--bg-secondary",
746
- "type": "color",
747
- "mode": "light",
748
- "value": "hsl(0, 0%, 97.3%)",
749
- "originalValue": "hsl(0, 0%, 97.3%)"
750
- },
751
- "color.neutral.light.componentBg": {
752
- "cssName": "--component-bg",
753
- "type": "color",
754
- "mode": "light",
755
- "value": "hsl(0, 0%, 95.1%)",
756
- "originalValue": "hsl(0, 0%, 95.1%)"
757
- },
758
- "color.neutral.light.componentBgHover": {
759
- "cssName": "--component-bg-hover",
760
- "type": "color",
761
- "mode": "light",
762
- "value": "hsl(0, 0%, 93.0%)",
763
- "originalValue": "hsl(0, 0%, 93.0%)"
764
- },
765
- "color.neutral.light.componentBgActive": {
766
- "cssName": "--component-bg-active",
767
- "type": "color",
768
- "mode": "light",
769
- "value": "hsl(0, 0%, 90.9%)",
770
- "originalValue": "hsl(0, 0%, 90.9%)"
771
- },
772
- "color.neutral.light.line": {
773
- "cssName": "--line",
774
- "type": "color",
775
- "mode": "light",
776
- "value": "hsl(0, 0%, 88.7%)",
777
- "originalValue": "hsl(0, 0%, 88.7%)"
778
- },
779
- "color.neutral.light.border": {
780
- "cssName": "--border",
781
- "type": "color",
782
- "mode": "light",
783
- "value": "hsl(0, 0%, 85.8%)",
784
- "originalValue": "hsl(0, 0%, 85.8%)"
785
- },
786
- "color.neutral.light.borderHover": {
787
- "cssName": "--border-hover",
788
- "type": "color",
789
- "mode": "light",
790
- "value": "hsl(0, 0%, 78.0%)",
791
- "originalValue": "hsl(0, 0%, 78.0%)"
792
- },
793
- "color.neutral.light.solid": {
794
- "cssName": "--solid",
795
- "type": "color",
796
- "mode": "light",
797
- "value": "hsl(0, 0%, 56.1%)",
798
- "originalValue": "hsl(0, 0%, 56.1%)"
799
- },
800
- "color.neutral.light.solidHover": {
801
- "cssName": "--solid-hover",
802
- "type": "color",
803
- "mode": "light",
804
- "value": "hsl(0, 0%, 52.3%)",
805
- "originalValue": "hsl(0, 0%, 52.3%)"
806
- },
807
- "color.neutral.light.textSecondary": {
808
- "cssName": "--text-secondary",
809
- "type": "color",
810
- "mode": "light",
811
- "value": "hsl(0, 0%, 43.5%)",
812
- "originalValue": "hsl(0, 0%, 43.5%)"
813
- },
814
- "color.neutral.light.text": {
815
- "cssName": "--text",
816
- "type": "color",
817
- "mode": "light",
818
- "value": "hsl(0, 0%, 9.0%)",
819
- "originalValue": "hsl(0, 0%, 9.0%)"
820
- },
821
- "color.neutral.dark.bg": {
822
- "cssName": "--bg",
823
- "type": "color",
824
- "mode": "dark",
825
- "value": "hsl(0, 0%, 8.5%)",
826
- "originalValue": "hsl(0, 0%, 8.5%)"
827
- },
828
- "color.neutral.dark.bgSecondary": {
829
- "cssName": "--bg-secondary",
830
- "type": "color",
831
- "mode": "dark",
832
- "value": "hsl(0, 0%, 11.0%)",
833
- "originalValue": "hsl(0, 0%, 11.0%)"
834
- },
835
- "color.neutral.dark.componentBg": {
836
- "cssName": "--component-bg",
837
- "type": "color",
838
- "mode": "dark",
839
- "value": "hsl(0, 0%, 13.6%)",
840
- "originalValue": "hsl(0, 0%, 13.6%)"
841
- },
842
- "color.neutral.dark.componentBgHover": {
843
- "cssName": "--component-bg-hover",
844
- "type": "color",
845
- "mode": "dark",
846
- "value": "hsl(0, 0%, 15.8%)",
847
- "originalValue": "hsl(0, 0%, 15.8%)"
848
- },
849
- "color.neutral.dark.componentBgActive": {
850
- "cssName": "--component-bg-active",
851
- "type": "color",
852
- "mode": "dark",
853
- "value": "hsl(0, 0%, 17.9%)",
854
- "originalValue": "hsl(0, 0%, 17.9%)"
855
- },
856
- "color.neutral.dark.line": {
857
- "cssName": "--line",
858
- "type": "color",
859
- "mode": "dark",
860
- "value": "hsl(0, 0%, 20.5%)",
861
- "originalValue": "hsl(0, 0%, 20.5%)"
862
- },
863
- "color.neutral.dark.border": {
864
- "cssName": "--border",
865
- "type": "color",
866
- "mode": "dark",
867
- "value": "hsl(0, 0%, 24.3%)",
868
- "originalValue": "hsl(0, 0%, 24.3%)"
869
- },
870
- "color.neutral.dark.borderHover": {
871
- "cssName": "--border-hover",
872
- "type": "color",
873
- "mode": "dark",
874
- "value": "hsl(0, 0%, 31.2%)",
875
- "originalValue": "hsl(0, 0%, 31.2%)"
876
- },
877
- "color.neutral.dark.solid": {
878
- "cssName": "--solid",
879
- "type": "color",
880
- "mode": "dark",
881
- "value": "hsl(0, 0%, 43.9%)",
882
- "originalValue": "hsl(0, 0%, 43.9%)"
883
- },
884
- "color.neutral.dark.solidHover": {
885
- "cssName": "--solid-hover",
886
- "type": "color",
887
- "mode": "dark",
888
- "value": "hsl(0, 0%, 49.4%)",
889
- "originalValue": "hsl(0, 0%, 49.4%)"
890
- },
891
- "color.neutral.dark.textSecondary": {
892
- "cssName": "--text-secondary",
893
- "type": "color",
894
- "mode": "dark",
895
- "value": "hsl(0, 0%, 62.8%)",
896
- "originalValue": "hsl(0, 0%, 62.8%)"
897
- },
898
- "color.neutral.dark.text": {
899
- "cssName": "--text",
900
- "type": "color",
901
- "mode": "dark",
902
- "value": "hsl(0, 0%, 93.0%)",
903
- "originalValue": "hsl(0, 0%, 93.0%)"
904
- },
905
- "color.green.light.bg": {
906
- "cssName": "--green-bg",
907
- "type": "color",
908
- "mode": "light",
909
- "value": "hsl(136, 50.0%, 98.9%)",
910
- "originalValue": "hsl(136, 50.0%, 98.9%)"
911
- },
912
- "color.green.light.bgSecondary": {
913
- "cssName": "--green-bg-secondary",
914
- "type": "color",
915
- "mode": "light",
916
- "value": "hsl(138, 62.5%, 96.9%)",
917
- "originalValue": "hsl(138, 62.5%, 96.9%)"
918
- },
919
- "color.green.light.componentBg": {
920
- "cssName": "--green-component-bg",
921
- "type": "color",
922
- "mode": "light",
923
- "value": "hsl(139, 55.2%, 94.5%)",
924
- "originalValue": "hsl(139, 55.2%, 94.5%)"
925
- },
926
- "color.green.light.componentBgHover": {
927
- "cssName": "--green-component-bg-hover",
928
- "type": "color",
929
- "mode": "light",
930
- "value": "hsl(140, 48.7%, 91.0%)",
931
- "originalValue": "hsl(140, 48.7%, 91.0%)"
932
- },
933
- "color.green.light.componentBgActive": {
934
- "cssName": "--green-component-bg-active",
935
- "type": "color",
936
- "mode": "light",
937
- "value": "hsl(141, 43.7%, 86.0%)",
938
- "originalValue": "hsl(141, 43.7%, 86.0%)"
939
- },
940
- "color.green.light.line": {
941
- "cssName": "--green-line",
942
- "type": "color",
943
- "mode": "light",
944
- "value": "hsl(143, 40.3%, 79.0%)",
945
- "originalValue": "hsl(143, 40.3%, 79.0%)"
946
- },
947
- "color.green.light.border": {
948
- "cssName": "--green-border",
949
- "type": "color",
950
- "mode": "light",
951
- "value": "hsl(146, 38.5%, 69.0%)",
952
- "originalValue": "hsl(146, 38.5%, 69.0%)"
953
- },
954
- "color.green.light.borderHover": {
955
- "cssName": "--green-border-hover",
956
- "type": "color",
957
- "mode": "light",
958
- "value": "hsl(151, 40.2%, 54.1%)",
959
- "originalValue": "hsl(151, 40.2%, 54.1%)"
960
- },
961
- "color.green.light.solid": {
962
- "cssName": "--green-solid",
963
- "type": "color",
964
- "mode": "light",
965
- "value": "hsl(151, 55.0%, 41.5%)",
966
- "originalValue": "hsl(151, 55.0%, 41.5%)"
967
- },
968
- "color.green.light.solidHover": {
969
- "cssName": "--green-solid-hover",
970
- "type": "color",
971
- "mode": "light",
972
- "value": "hsl(152, 57.5%, 37.6%)",
973
- "originalValue": "hsl(152, 57.5%, 37.6%)"
974
- },
975
- "color.green.light.textSecondary": {
976
- "cssName": "--green-text-secondary",
977
- "type": "color",
978
- "mode": "light",
979
- "value": "hsl(153, 67.0%, 28.5%)",
980
- "originalValue": "hsl(153, 67.0%, 28.5%)"
981
- },
982
- "color.green.light.text": {
983
- "cssName": "--green-text",
984
- "type": "color",
985
- "mode": "light",
986
- "value": "hsl(155, 40.0%, 14.0%)",
987
- "originalValue": "hsl(155, 40.0%, 14.0%)"
988
- },
989
- "color.green.dark.bg": {
990
- "cssName": "--green-bg",
991
- "type": "color",
992
- "mode": "dark",
993
- "value": "hsl(146, 30.0%, 7.4%)",
994
- "originalValue": "hsl(146, 30.0%, 7.4%)"
995
- },
996
- "color.green.dark.bgSecondary": {
997
- "cssName": "--green-bg-secondary",
998
- "type": "color",
999
- "mode": "dark",
1000
- "value": "hsl(155, 44.2%, 8.4%)",
1001
- "originalValue": "hsl(155, 44.2%, 8.4%)"
1002
- },
1003
- "color.green.dark.componentBg": {
1004
- "cssName": "--green-component-bg",
1005
- "type": "color",
1006
- "mode": "dark",
1007
- "value": "hsl(155, 46.7%, 10.9%)",
1008
- "originalValue": "hsl(155, 46.7%, 10.9%)"
1009
- },
1010
- "color.green.dark.componentBgHover": {
1011
- "cssName": "--green-component-bg-hover",
1012
- "type": "color",
1013
- "mode": "dark",
1014
- "value": "hsl(154, 48.4%, 12.9%)",
1015
- "originalValue": "hsl(154, 48.4%, 12.9%)"
1016
- },
1017
- "color.green.dark.componentBgActive": {
1018
- "cssName": "--green-component-bg-active",
1019
- "type": "color",
1020
- "mode": "dark",
1021
- "value": "hsl(154, 49.7%, 14.9%)",
1022
- "originalValue": "hsl(154, 49.7%, 14.9%)"
1023
- },
1024
- "color.green.dark.line": {
1025
- "cssName": "--green-line",
1026
- "type": "color",
1027
- "mode": "dark",
1028
- "value": "hsl(154, 50.9%, 17.6%)",
1029
- "originalValue": "hsl(154, 50.9%, 17.6%)"
1030
- },
1031
- "color.green.dark.border": {
1032
- "cssName": "--green-border",
1033
- "type": "color",
1034
- "mode": "dark",
1035
- "value": "hsl(153, 51.8%, 21.8%)",
1036
- "originalValue": "hsl(153, 51.8%, 21.8%)"
1037
- },
1038
- "color.green.dark.borderHover": {
1039
- "cssName": "--green-border-hover",
1040
- "type": "color",
1041
- "mode": "dark",
1042
- "value": "hsl(151, 51.7%, 28.4%)",
1043
- "originalValue": "hsl(151, 51.7%, 28.4%)"
1044
- },
1045
- "color.green.dark.solid": {
1046
- "cssName": "--green-solid",
1047
- "type": "color",
1048
- "mode": "dark",
1049
- "value": "hsl(151, 55.0%, 41.5%)",
1050
- "originalValue": "hsl(151, 55.0%, 41.5%)"
1051
- },
1052
- "color.green.dark.solidHover": {
1053
- "cssName": "--green-solid-hover",
1054
- "type": "color",
1055
- "mode": "dark",
1056
- "value": "hsl(151, 49.3%, 46.5%)",
1057
- "originalValue": "hsl(151, 49.3%, 46.5%)"
1058
- },
1059
- "color.green.dark.textSecondary": {
1060
- "cssName": "--green-text-secondary",
1061
- "type": "color",
1062
- "mode": "dark",
1063
- "value": "hsl(151, 50.0%, 53.2%)",
1064
- "originalValue": "hsl(151, 50.0%, 53.2%)"
1065
- },
1066
- "color.green.dark.text": {
1067
- "cssName": "--green-text",
1068
- "type": "color",
1069
- "mode": "dark",
1070
- "value": "hsl(137, 72.0%, 94.0%)",
1071
- "originalValue": "hsl(137, 72.0%, 94.0%)"
1072
- },
1073
- "color.red.light.bg": {
1074
- "cssName": "--red-bg",
1075
- "type": "color",
1076
- "mode": "light",
1077
- "value": "hsl(359, 100%, 99.4%)",
1078
- "originalValue": "hsl(359, 100%, 99.4%)"
1079
- },
1080
- "color.red.light.bgSecondary": {
1081
- "cssName": "--red-bg-secondary",
1082
- "type": "color",
1083
- "mode": "light",
1084
- "value": "hsl(359, 100%, 98.6%)",
1085
- "originalValue": "hsl(359, 100%, 98.6%)"
1086
- },
1087
- "color.red.light.componentBg": {
1088
- "cssName": "--red-component-bg",
1089
- "type": "color",
1090
- "mode": "light",
1091
- "value": "hsl(360, 100%, 96.8%)",
1092
- "originalValue": "hsl(360, 100%, 96.8%)"
1093
- },
1094
- "color.red.light.componentBgHover": {
1095
- "cssName": "--red-component-bg-hover",
1096
- "type": "color",
1097
- "mode": "light",
1098
- "value": "hsl(360, 97.9%, 94.8%)",
1099
- "originalValue": "hsl(360, 97.9%, 94.8%)"
1100
- },
1101
- "color.red.light.componentBgActive": {
1102
- "cssName": "--red-component-bg-active",
1103
- "type": "color",
1104
- "mode": "light",
1105
- "value": "hsl(360, 90.2%, 91.9%)",
1106
- "originalValue": "hsl(360, 90.2%, 91.9%)"
1107
- },
1108
- "color.red.light.line": {
1109
- "cssName": "--red-line",
1110
- "type": "color",
1111
- "mode": "light",
1112
- "value": "hsl(360, 81.7%, 87.8%)",
1113
- "originalValue": "hsl(360, 81.7%, 87.8%)"
1114
- },
1115
- "color.red.light.border": {
1116
- "cssName": "--red-border",
1117
- "type": "color",
1118
- "mode": "light",
1119
- "value": "hsl(359, 74.2%, 81.7%)",
1120
- "originalValue": "hsl(359, 74.2%, 81.7%)"
1121
- },
1122
- "color.red.light.borderHover": {
1123
- "cssName": "--red-border-hover",
1124
- "type": "color",
1125
- "mode": "light",
1126
- "value": "hsl(359, 69.5%, 74.3%)",
1127
- "originalValue": "hsl(359, 69.5%, 74.3%)"
1128
- },
1129
- "color.red.light.solid": {
1130
- "cssName": "--red-solid",
1131
- "type": "color",
1132
- "mode": "light",
1133
- "value": "hsl(358, 75.0%, 59.0%)",
1134
- "originalValue": "hsl(358, 75.0%, 59.0%)"
1135
- },
1136
- "color.red.light.solidHover": {
1137
- "cssName": "--red-solid-hover",
1138
- "type": "color",
1139
- "mode": "light",
1140
- "value": "hsl(358, 69.4%, 55.2%)",
1141
- "originalValue": "hsl(358, 69.4%, 55.2%)"
1142
- },
1143
- "color.red.light.textSecondary": {
1144
- "cssName": "--red-text-secondary",
1145
- "type": "color",
1146
- "mode": "light",
1147
- "value": "hsl(358, 65.0%, 48.7%)",
1148
- "originalValue": "hsl(358, 65.0%, 48.7%)"
1149
- },
1150
- "color.red.light.text": {
1151
- "cssName": "--red-text",
1152
- "type": "color",
1153
- "mode": "light",
1154
- "value": "hsl(354, 50.0%, 14.6%)",
1155
- "originalValue": "hsl(354, 50.0%, 14.6%)"
1156
- },
1157
- "color.red.dark.bg": {
1158
- "cssName": "--red-bg",
1159
- "type": "color",
1160
- "mode": "dark",
1161
- "value": "hsl(353, 23.0%, 9.8%)",
1162
- "originalValue": "hsl(353, 23.0%, 9.8%)"
1163
- },
1164
- "color.red.dark.bgSecondary": {
1165
- "cssName": "--red-bg-secondary",
1166
- "type": "color",
1167
- "mode": "dark",
1168
- "value": "hsl(357, 34.4%, 12.0%)",
1169
- "originalValue": "hsl(357, 34.4%, 12.0%)"
1170
- },
1171
- "color.red.dark.componentBg": {
1172
- "cssName": "--red-component-bg",
1173
- "type": "color",
1174
- "mode": "dark",
1175
- "value": "hsl(356, 43.4%, 16.4%)",
1176
- "originalValue": "hsl(356, 43.4%, 16.4%)"
1177
- },
1178
- "color.red.dark.componentBgHover": {
1179
- "cssName": "--red-component-bg-hover",
1180
- "type": "color",
1181
- "mode": "dark",
1182
- "value": "hsl(356, 47.6%, 19.2%)",
1183
- "originalValue": "hsl(356, 47.6%, 19.2%)"
1184
- },
1185
- "color.red.dark.componentBgActive": {
1186
- "cssName": "--red-component-bg-active",
1187
- "type": "color",
1188
- "mode": "dark",
1189
- "value": "hsl(356, 51.1%, 21.9%)",
1190
- "originalValue": "hsl(356, 51.1%, 21.9%)"
1191
- },
1192
- "color.red.dark.line": {
1193
- "cssName": "--red-line",
1194
- "type": "color",
1195
- "mode": "dark",
1196
- "value": "hsl(356, 55.2%, 25.9%)",
1197
- "originalValue": "hsl(356, 55.2%, 25.9%)"
1198
- },
1199
- "color.red.dark.border": {
1200
- "cssName": "--red-border",
1201
- "type": "color",
1202
- "mode": "dark",
1203
- "value": "hsl(357, 60.2%, 31.8%)",
1204
- "originalValue": "hsl(357, 60.2%, 31.8%)"
1205
- },
1206
- "color.red.dark.borderHover": {
1207
- "cssName": "--red-border-hover",
1208
- "type": "color",
1209
- "mode": "dark",
1210
- "value": "hsl(358, 65.0%, 40.4%)",
1211
- "originalValue": "hsl(358, 65.0%, 40.4%)"
1212
- },
1213
- "color.red.dark.solid": {
1214
- "cssName": "--red-solid",
1215
- "type": "color",
1216
- "mode": "dark",
1217
- "value": "hsl(358, 75.0%, 59.0%)",
1218
- "originalValue": "hsl(358, 75.0%, 59.0%)"
1219
- },
1220
- "color.red.dark.solidHover": {
1221
- "cssName": "--red-solid-hover",
1222
- "type": "color",
1223
- "mode": "dark",
1224
- "value": "hsl(358, 85.3%, 64.0%)",
1225
- "originalValue": "hsl(358, 85.3%, 64.0%)"
1226
- },
1227
- "color.red.dark.textSecondary": {
1228
- "cssName": "--red-text-secondary",
1229
- "type": "color",
1230
- "mode": "dark",
1231
- "value": "hsl(358, 100%, 69.5%)",
1232
- "originalValue": "hsl(358, 100%, 69.5%)"
1233
- },
1234
- "color.red.dark.text": {
1235
- "cssName": "--red-text",
1236
- "type": "color",
1237
- "mode": "dark",
1238
- "value": "hsl(351, 89.0%, 96.0%)",
1239
- "originalValue": "hsl(351, 89.0%, 96.0%)"
1240
- },
1241
- "color.yellow.light.bg": {
1242
- "cssName": "--yellow-bg",
1243
- "type": "color",
1244
- "mode": "light",
1245
- "value": "hsl(60, 54.0%, 98.5%)",
1246
- "originalValue": "hsl(60, 54.0%, 98.5%)"
1247
- },
1248
- "color.yellow.light.bgSecondary": {
1249
- "cssName": "--yellow-bg-secondary",
1250
- "type": "color",
1251
- "mode": "light",
1252
- "value": "hsl(52, 100%, 95.5%)",
1253
- "originalValue": "hsl(52, 100%, 95.5%)"
1254
- },
1255
- "color.yellow.light.componentBg": {
1256
- "cssName": "--yellow-component-bg",
1257
- "type": "color",
1258
- "mode": "light",
1259
- "value": "hsl(55, 100%, 90.9%)",
1260
- "originalValue": "hsl(55, 100%, 90.9%)"
1261
- },
1262
- "color.yellow.light.componentBgHover": {
1263
- "cssName": "--yellow-component-bg-hover",
1264
- "type": "color",
1265
- "mode": "light",
1266
- "value": "hsl(54, 100%, 86.6%)",
1267
- "originalValue": "hsl(54, 100%, 86.6%)"
1268
- },
1269
- "color.yellow.light.componentBgActive": {
1270
- "cssName": "--yellow-component-bg-active",
1271
- "type": "color",
1272
- "mode": "light",
1273
- "value": "hsl(52, 97.9%, 82.0%)",
1274
- "originalValue": "hsl(52, 97.9%, 82.0%)"
1275
- },
1276
- "color.yellow.light.line": {
1277
- "cssName": "--yellow-line",
1278
- "type": "color",
1279
- "mode": "light",
1280
- "value": "hsl(50, 89.4%, 76.1%)",
1281
- "originalValue": "hsl(50, 89.4%, 76.1%)"
1282
- },
1283
- "color.yellow.light.border": {
1284
- "cssName": "--yellow-border",
1285
- "type": "color",
1286
- "mode": "light",
1287
- "value": "hsl(47, 80.4%, 68.0%)",
1288
- "originalValue": "hsl(47, 80.4%, 68.0%)"
1289
- },
1290
- "color.yellow.light.borderHover": {
1291
- "cssName": "--yellow-border-hover",
1292
- "type": "color",
1293
- "mode": "light",
1294
- "value": "hsl(48, 100%, 46.1%)",
1295
- "originalValue": "hsl(48, 100%, 46.1%)"
1296
- },
1297
- "color.yellow.light.solidHover": {
1298
- "cssName": "--yellow-solid-hover",
1299
- "type": "color",
1300
- "mode": "light",
1301
- "value": "hsl(44.7, 97.9%, 63.1%)",
1302
- "originalValue": "{color.brand.yellow}"
1303
- },
1304
- "color.yellow.light.textSecondary": {
1305
- "cssName": "--yellow-text-secondary",
1306
- "type": "color",
1307
- "mode": "light",
1308
- "value": "hsl(42, 100%, 29.0%)",
1309
- "originalValue": "hsl(42, 100%, 29.0%)"
1310
- },
1311
- "color.yellow.light.text": {
1312
- "cssName": "--yellow-text",
1313
- "type": "color",
1314
- "mode": "light",
1315
- "value": "hsl(40, 55.0%, 13.5%)",
1316
- "originalValue": "hsl(40, 55.0%, 13.5%)"
1317
- },
1318
- "color.yellow.dark.bg": {
1319
- "cssName": "--yellow-bg",
1320
- "type": "color",
1321
- "mode": "dark",
1322
- "value": "hsl(45, 100%, 5.5%)",
1323
- "originalValue": "hsl(45, 100%, 5.5%)"
1324
- },
1325
- "color.yellow.dark.bgSecondary": {
1326
- "cssName": "--yellow-bg-secondary",
1327
- "type": "color",
1328
- "mode": "dark",
1329
- "value": "hsl(46, 100%, 6.7%)",
1330
- "originalValue": "hsl(46, 100%, 6.7%)"
1331
- },
1332
- "color.yellow.dark.componentBg": {
1333
- "cssName": "--yellow-component-bg",
1334
- "type": "color",
1335
- "mode": "dark",
1336
- "value": "hsl(45, 100%, 8.7%)",
1337
- "originalValue": "hsl(45, 100%, 8.7%)"
1338
- },
1339
- "color.yellow.dark.componentBgHover": {
1340
- "cssName": "--yellow-component-bg-hover",
1341
- "type": "color",
1342
- "mode": "dark",
1343
- "value": "hsl(45, 100%, 10.4%)",
1344
- "originalValue": "hsl(45, 100%, 10.4%)"
1345
- },
1346
- "color.yellow.dark.componentBgActive": {
1347
- "cssName": "--yellow-component-bg-active",
1348
- "type": "color",
1349
- "mode": "dark",
1350
- "value": "hsl(47, 100%, 12.1%)",
1351
- "originalValue": "hsl(47, 100%, 12.1%)"
1352
- },
1353
- "color.yellow.dark.line": {
1354
- "cssName": "--yellow-line",
1355
- "type": "color",
1356
- "mode": "dark",
1357
- "value": "hsl(49, 100%, 14.3%)",
1358
- "originalValue": "hsl(49, 100%, 14.3%)"
1359
- },
1360
- "color.yellow.dark.border": {
1361
- "cssName": "--yellow-border",
1362
- "type": "color",
1363
- "mode": "dark",
1364
- "value": "hsl(49, 90.3%, 18.4%)",
1365
- "originalValue": "hsl(49, 90.3%, 18.4%)"
1366
- },
1367
- "color.yellow.dark.borderHover": {
1368
- "cssName": "--yellow-border-hover",
1369
- "type": "color",
1370
- "mode": "dark",
1371
- "value": "hsl(50, 100%, 22.0%)",
1372
- "originalValue": "hsl(50, 100%, 22.0%)"
1373
- },
1374
- "color.yellow.dark.solidHover": {
1375
- "cssName": "--yellow-solid-hover",
1376
- "type": "color",
1377
- "mode": "dark",
1378
- "value": "hsl(44.7, 97.9%, 63.1%)",
1379
- "originalValue": "{color.brand.yellow}"
1380
- },
1381
- "color.yellow.dark.textSecondary": {
1382
- "cssName": "--yellow-text-secondary",
1383
- "type": "color",
1384
- "mode": "dark",
1385
- "value": "hsl(48, 100%, 47.0%)",
1386
- "originalValue": "hsl(48, 100%, 47.0%)"
1387
- },
1388
- "color.yellow.dark.text": {
1389
- "cssName": "--yellow-text",
1390
- "type": "color",
1391
- "mode": "dark",
1392
- "value": "hsl(53, 100%, 91.0%)",
1393
- "originalValue": "hsl(53, 100%, 91.0%)"
1394
- },
1395
- "color.transfer.light.lime3": {
1396
- "cssName": "--lime-3",
1397
- "type": "color",
1398
- "mode": "light",
1399
- "value": "hsl(85, 76.0%, 92.3%)",
1400
- "originalValue": "hsl(85, 76.0%, 92.3%)"
1401
- },
1402
- "color.transfer.dark.lime3": {
1403
- "cssName": "--lime-3",
1404
- "type": "color",
1405
- "mode": "dark",
1406
- "value": "hsl(85, 45%, 12%)",
1407
- "originalValue": "hsl(85, 45%, 12%)"
1408
- },
1409
- "elevation.shadowColor": {
1410
- "cssName": "--shadow-color",
1411
- "type": "color",
1412
- "mode": "global",
1413
- "value": "hsl(0, 0%, 78.0%)",
1414
- "originalValue": "hsl(0, 0%, 78.0%)"
1415
- },
1416
- "elevation.color": {
1417
- "cssName": "--shadow",
1418
- "type": "color",
1419
- "mode": "global",
1420
- "value": "hsl(0, 0%, 78.0%)",
1421
- "originalValue": "hsl(0, 0%, 78.0%)"
1422
- },
1423
- "elevation.sm": {
1424
- "cssName": "--shadow-sm",
1425
- "type": "string",
1426
- "mode": "global",
1427
- "value": "0 1px 2px hsla(0, 0%, 0%, 0.05)",
1428
- "originalValue": "0 1px 2px hsla(0, 0%, 0%, 0.05)"
1429
- },
1430
- "elevation.md": {
1431
- "cssName": "--shadow-md",
1432
- "type": "string",
1433
- "mode": "global",
1434
- "value": "0 4px 12px hsla(0, 0%, 0%, 0.08)",
1435
- "originalValue": "0 4px 12px hsla(0, 0%, 0%, 0.08)"
1436
- },
1437
- "elevation.lg": {
1438
- "cssName": "--shadow-lg",
1439
- "type": "string",
1440
- "mode": "global",
1441
- "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
1442
- "originalValue": "0 16px 40px hsla(0, 0%, 0%, 0.12)"
1443
- },
1444
- "elevation.focusColor": {
1445
- "cssName": "--shadow-focus-color",
1446
- "type": "color",
1447
- "mode": "global",
1448
- "value": "hsla(47, 100%, 65%, 0.35)",
1449
- "originalValue": "hsla(47, 100%, 65%, 0.35)"
1450
- },
1451
- "elevation.focus": {
1452
- "cssName": "--shadow-focus",
1453
- "type": "string",
1454
- "mode": "global",
1455
- "value": "0 0 0 3px hsla(47, 100%, 65%, 0.35)",
1456
- "originalValue": "0 0 0 3px {elevation.focusColor}"
1457
- },
1458
- "typography.fontFamily.sans": {
1459
- "cssName": "--font-sans",
1460
- "type": "fontFamily",
1461
- "mode": "global",
1462
- "value": "\"GT America\", sans-serif",
1463
- "originalValue": "\"GT America\", sans-serif"
1464
- },
1465
- "typography.fontFamily.display": {
1466
- "cssName": "--font-display",
1467
- "type": "fontFamily",
1468
- "mode": "global",
1469
- "value": "\"GT America\", sans-serif",
1470
- "originalValue": "\"GT America\", sans-serif"
1471
- },
1472
- "typography.fontFamily.uiMono": {
1473
- "cssName": "--font-ui-mono",
1474
- "type": "fontFamily",
1475
- "mode": "global",
1476
- "value": "\"GT America Mono\", monospace",
1477
- "originalValue": "\"GT America Mono\", monospace"
1478
- },
1479
- "typography.fontFamily.mono": {
1480
- "cssName": "--font-mono",
1481
- "type": "fontFamily",
1482
- "mode": "global",
1483
- "value": "\"Berkeley Mono\", \"GT America Mono\", monospace",
1484
- "originalValue": "\"Berkeley Mono\", \"GT America Mono\", monospace"
1485
- },
1486
- "typography.fontSize.xs": {
1487
- "cssName": "--fs-xs",
1488
- "type": "dimension",
1489
- "mode": "global",
1490
- "value": "0.75rem",
1491
- "originalValue": "0.75rem"
1492
- },
1493
- "typography.fontSize.sm": {
1494
- "cssName": "--fs-sm",
1495
- "type": "dimension",
1496
- "mode": "global",
1497
- "value": "0.8125rem",
1498
- "originalValue": "0.8125rem"
1499
- },
1500
- "typography.fontSize.base": {
1501
- "cssName": "--fs-base",
1502
- "type": "dimension",
1503
- "mode": "global",
1504
- "value": "0.875rem",
1505
- "originalValue": "0.875rem"
1506
- },
1507
- "typography.fontSize.md": {
1508
- "cssName": "--fs-md",
1509
- "type": "dimension",
1510
- "mode": "global",
1511
- "value": "1rem",
1512
- "originalValue": "1rem"
1513
- },
1514
- "typography.fontSize.lg": {
1515
- "cssName": "--fs-lg",
1516
- "type": "dimension",
1517
- "mode": "global",
1518
- "value": "1.125rem",
1519
- "originalValue": "1.125rem"
1520
- },
1521
- "typography.fontSize.xl": {
1522
- "cssName": "--fs-xl",
1523
- "type": "dimension",
1524
- "mode": "global",
1525
- "value": "1.5rem",
1526
- "originalValue": "1.5rem"
1527
- },
1528
- "typography.fontSize.2xl": {
1529
- "cssName": "--fs-2xl",
1530
- "type": "dimension",
1531
- "mode": "global",
1532
- "value": "2rem",
1533
- "originalValue": "2rem"
1534
- },
1535
- "typography.fontSize.3xl": {
1536
- "cssName": "--fs-3xl",
1537
- "type": "dimension",
1538
- "mode": "global",
1539
- "value": "3rem",
1540
- "originalValue": "3rem"
1541
- },
1542
- "typography.fontSize.4xl": {
1543
- "cssName": "--fs-4xl",
1544
- "type": "dimension",
1545
- "mode": "global",
1546
- "value": "4rem",
1547
- "originalValue": "4rem"
1548
- },
1549
- "typography.fontSize.display": {
1550
- "cssName": "--fs-display",
1551
- "type": "dimension",
1552
- "mode": "global",
1553
- "value": "6rem",
1554
- "originalValue": "6rem"
1555
- },
1556
- "typography.lineHeight.tight": {
1557
- "cssName": "--lh-tight",
1558
- "type": "number",
1559
- "mode": "global",
1560
- "value": "1.1",
1561
- "originalValue": "1.1"
1562
- },
1563
- "typography.lineHeight.snug": {
1564
- "cssName": "--lh-snug",
1565
- "type": "number",
1566
- "mode": "global",
1567
- "value": "1.25",
1568
- "originalValue": "1.25"
1569
- },
1570
- "typography.lineHeight.normal": {
1571
- "cssName": "--lh-normal",
1572
- "type": "number",
1573
- "mode": "global",
1574
- "value": "1.45",
1575
- "originalValue": "1.45"
1576
- },
1577
- "typography.lineHeight.loose": {
1578
- "cssName": "--lh-loose",
1579
- "type": "number",
1580
- "mode": "global",
1581
- "value": "1.6",
1582
- "originalValue": "1.6"
1583
- },
1584
- "typography.fontWeight.regular": {
1585
- "cssName": "--fw-regular",
1586
- "type": "fontWeight",
1587
- "mode": "global",
1588
- "value": "400",
1589
- "originalValue": "400"
1590
- },
1591
- "typography.fontWeight.medium": {
1592
- "cssName": "--fw-medium",
1593
- "type": "fontWeight",
1594
- "mode": "global",
1595
- "value": "500",
1596
- "originalValue": "500"
1597
- },
1598
- "typography.fontWeight.bold": {
1599
- "cssName": "--fw-bold",
1600
- "type": "fontWeight",
1601
- "mode": "global",
1602
- "value": "700",
1603
- "originalValue": "700"
1604
- },
1605
- "typography.fontWeight.black": {
1606
- "cssName": "--fw-black",
1607
- "type": "fontWeight",
1608
- "mode": "global",
1609
- "value": "900",
1610
- "originalValue": "900"
1611
- },
1612
- "typography.letterSpacing.tight": {
1613
- "cssName": "--tracking-tight",
1614
- "type": "dimension",
1615
- "mode": "global",
1616
- "value": "-0.02em",
1617
- "originalValue": "-0.02em"
1618
- },
1619
- "typography.letterSpacing.normal": {
1620
- "cssName": "--tracking-normal",
1621
- "type": "number",
1622
- "mode": "global",
1623
- "value": "0",
1624
- "originalValue": "0"
1625
- },
1626
- "typography.letterSpacing.wide": {
1627
- "cssName": "--tracking-wide",
1628
- "type": "dimension",
1629
- "mode": "global",
1630
- "value": "0.02em",
1631
- "originalValue": "0.02em"
1632
- },
1633
- "typography.letterSpacing.uppercase": {
1634
- "cssName": "--tracking-uppercase",
1635
- "type": "dimension",
1636
- "mode": "global",
1637
- "value": "0.08em",
1638
- "originalValue": "0.08em"
1639
- },
1640
- "spacing.0": {
1641
- "cssName": "--space-0",
1642
- "type": "dimension",
1643
- "mode": "global",
1644
- "value": "0",
1645
- "originalValue": "0"
1646
- },
1647
- "spacing.1": {
1648
- "cssName": "--space-1",
1649
- "type": "dimension",
1650
- "mode": "global",
1651
- "value": "4px",
1652
- "originalValue": "4px"
1653
- },
1654
- "spacing.2": {
1655
- "cssName": "--space-2",
1656
- "type": "dimension",
1657
- "mode": "global",
1658
- "value": "8px",
1659
- "originalValue": "8px"
1660
- },
1661
- "spacing.3": {
1662
- "cssName": "--space-3",
1663
- "type": "dimension",
1664
- "mode": "global",
1665
- "value": "16px",
1666
- "originalValue": "16px"
1667
- },
1668
- "spacing.4": {
1669
- "cssName": "--space-4",
1670
- "type": "dimension",
1671
- "mode": "global",
1672
- "value": "32px",
1673
- "originalValue": "32px"
1674
- },
1675
- "spacing.5": {
1676
- "cssName": "--space-5",
1677
- "type": "dimension",
1678
- "mode": "global",
1679
- "value": "64px",
1680
- "originalValue": "64px"
1681
- },
1682
- "spacing.6": {
1683
- "cssName": "--space-6",
1684
- "type": "dimension",
1685
- "mode": "global",
1686
- "value": "128px",
1687
- "originalValue": "128px"
1688
- },
1689
- "spacing.7": {
1690
- "cssName": "--space-7",
1691
- "type": "dimension",
1692
- "mode": "global",
1693
- "value": "256px",
1694
- "originalValue": "256px"
1695
- },
1696
- "spacing.8": {
1697
- "cssName": "--space-8",
1698
- "type": "dimension",
1699
- "mode": "global",
1700
- "value": "512px",
1701
- "originalValue": "512px"
1702
- },
1703
- "radius.sm": {
1704
- "cssName": "--radius-sm",
1705
- "type": "dimension",
1706
- "mode": "global",
1707
- "value": "4px",
1708
- "originalValue": "4px"
1709
- },
1710
- "radius.default": {
1711
- "cssName": "--radius",
1712
- "type": "dimension",
1713
- "mode": "global",
1714
- "value": "6px",
1715
- "originalValue": "6px"
1716
- },
1717
- "radius.md": {
1718
- "cssName": "--radius-md",
1719
- "type": "dimension",
1720
- "mode": "global",
1721
- "value": "8px",
1722
- "originalValue": "8px"
1723
- },
1724
- "radius.lg": {
1725
- "cssName": "--radius-lg",
1726
- "type": "dimension",
1727
- "mode": "global",
1728
- "value": "10px",
1729
- "originalValue": "10px"
1730
- },
1731
- "radius.pill": {
1732
- "cssName": "--radius-pill",
1733
- "type": "dimension",
1734
- "mode": "global",
1735
- "value": "999px",
1736
- "originalValue": "999px"
1737
- },
1738
- "border.width": {
1739
- "cssName": "--border-width",
1740
- "type": "dimension",
1741
- "mode": "global",
1742
- "value": "1px",
1743
- "originalValue": "1px"
1744
- },
1745
- "motion.easing.out": {
1746
- "cssName": "--ease-out",
1747
- "type": "cubicBezier",
1748
- "mode": "global",
1749
- "value": "cubic-bezier(0.22, 1, 0.36, 1)",
1750
- "originalValue": "cubic-bezier(0.22, 1, 0.36, 1)"
1751
- },
1752
- "motion.easing.inOut": {
1753
- "cssName": "--ease-in-out",
1754
- "type": "cubicBezier",
1755
- "mode": "global",
1756
- "value": "cubic-bezier(0.65, 0, 0.35, 1)",
1757
- "originalValue": "cubic-bezier(0.65, 0, 0.35, 1)"
1758
- },
1759
- "motion.duration.fast": {
1760
- "cssName": "--dur-fast",
1761
- "type": "duration",
1762
- "mode": "global",
1763
- "value": "120ms",
1764
- "originalValue": "120ms"
1765
- },
1766
- "motion.duration.base": {
1767
- "cssName": "--dur-base",
1768
- "type": "duration",
1769
- "mode": "global",
1770
- "value": "200ms",
1771
- "originalValue": "200ms"
1772
- },
1773
- "motion.duration.slow": {
1774
- "cssName": "--dur-slow",
1775
- "type": "duration",
1776
- "mode": "global",
1777
- "value": "320ms",
1778
- "originalValue": "320ms"
1779
- },
1780
- "surface.light.htmlBg": {
1781
- "cssName": "--html-bg",
1782
- "type": "color",
1783
- "mode": "light",
1784
- "value": "hsl(0, 0%, 97.3%)",
1785
- "originalValue": "hsl(0, 0%, 97.3%)"
1786
- },
1787
- "surface.light.appBg": {
1788
- "cssName": "--app-bg",
1789
- "type": "color",
1790
- "mode": "light",
1791
- "value": "hsl(0, 0%, 100%)",
1792
- "originalValue": "hsl(0, 0%, 100%)"
1793
- },
1794
- "surface.light.navBg": {
1795
- "cssName": "--nav-bg",
1796
- "type": "color",
1797
- "mode": "light",
1798
- "value": "hsl(0, 0%, 100%)",
1799
- "originalValue": "hsl(0, 0%, 100%)"
1800
- },
1801
- "surface.light.navItemBg": {
1802
- "cssName": "--nav-item-bg",
1803
- "type": "color",
1804
- "mode": "light",
1805
- "value": "transparent",
1806
- "originalValue": "transparent"
1807
- },
1808
- "surface.light.navItemBgHover": {
1809
- "cssName": "--nav-item-bg-hover",
1810
- "type": "color",
1811
- "mode": "light",
1812
- "value": "hsl(0, 0%, 95.1%)",
1813
- "originalValue": "hsl(0, 0%, 95.1%)"
1814
- },
1815
- "surface.light.navItemBgActive": {
1816
- "cssName": "--nav-item-bg-active",
1817
- "type": "color",
1818
- "mode": "light",
1819
- "value": "hsl(0, 0%, 95.1%)",
1820
- "originalValue": "hsl(0, 0%, 95.1%)"
1821
- },
1822
- "surface.light.listItemBg": {
1823
- "cssName": "--list-item-bg",
1824
- "type": "color",
1825
- "mode": "light",
1826
- "value": "transparent",
1827
- "originalValue": "transparent"
1828
- },
1829
- "surface.light.listItemBgHover": {
1830
- "cssName": "--list-item-bg-hover",
1831
- "type": "color",
1832
- "mode": "light",
1833
- "value": "hsl(0, 0%, 97.3%)",
1834
- "originalValue": "hsl(0, 0%, 97.3%)"
1835
- },
1836
- "surface.light.listItemBgActive": {
1837
- "cssName": "--list-item-bg-active",
1838
- "type": "color",
1839
- "mode": "light",
1840
- "value": "hsl(0, 0%, 97.3%)",
1841
- "originalValue": "hsl(0, 0%, 97.3%)"
1842
- },
1843
- "surface.light.listItemBorder": {
1844
- "cssName": "--list-item-border",
1845
- "type": "color",
1846
- "mode": "light",
1847
- "value": "hsl(0, 0%, 90.9%)",
1848
- "originalValue": "hsl(0, 0%, 90.9%)"
1849
- },
1850
- "surface.light.segmentedControlBg": {
1851
- "cssName": "--segmented-control-bg",
1852
- "type": "color",
1853
- "mode": "light",
1854
- "value": "hsl(0, 0%, 95.1%)",
1855
- "originalValue": "hsl(0, 0%, 95.1%)"
1856
- },
1857
- "surface.light.segmentedControlBgActive": {
1858
- "cssName": "--segmented-control-bg-active",
1859
- "type": "color",
1860
- "mode": "light",
1861
- "value": "hsl(0, 0%, 100%)",
1862
- "originalValue": "hsl(0, 0%, 100%)"
1863
- },
1864
- "surface.light.transferListItemCompletingBg": {
1865
- "cssName": "--transfer-list-item-completing-bg",
1866
- "type": "color",
1867
- "mode": "light",
1868
- "value": "hsl(85, 76.0%, 92.3%)",
1869
- "originalValue": "hsl(85, 76.0%, 92.3%)"
1870
- },
1871
- "surface.light.transferListItemDownloadingBg": {
1872
- "cssName": "--transfer-list-item-downloading-bg",
1873
- "type": "color",
1874
- "mode": "light",
1875
- "value": "hsl(85, 76.0%, 92.3%)",
1876
- "originalValue": "hsl(85, 76.0%, 92.3%)"
1877
- },
1878
- "surface.light.transferListItemFinishedBg": {
1879
- "cssName": "--transfer-list-item-finished-bg",
1880
- "type": "color",
1881
- "mode": "light",
1882
- "value": "hsl(0, 0%, 97.3%)",
1883
- "originalValue": "hsl(0, 0%, 97.3%)"
1884
- },
1885
- "surface.light.transferListItemPassiveBg": {
1886
- "cssName": "--transfer-list-item-passive-bg",
1887
- "type": "color",
1888
- "mode": "light",
1889
- "value": "hsl(0, 0%, 99.0%)",
1890
- "originalValue": "hsl(0, 0%, 99.0%)"
1891
- },
1892
- "surface.light.hiContrast": {
1893
- "cssName": "--hi-contrast",
1894
- "type": "color",
1895
- "mode": "light",
1896
- "value": "hsl(0, 0%, 9.0%)",
1897
- "originalValue": "hsl(0, 0%, 9.0%)"
1898
- },
1899
- "surface.light.loContrast": {
1900
- "cssName": "--lo-contrast",
1901
- "type": "color",
1902
- "mode": "light",
1903
- "value": "hsl(0, 0%, 99.0%)",
1904
- "originalValue": "hsl(0, 0%, 99.0%)"
1905
- },
1906
- "surface.light.transparent": {
1907
- "cssName": "--transparent",
1908
- "type": "color",
1909
- "mode": "light",
1910
- "value": "transparent",
1911
- "originalValue": "transparent"
1912
- },
1913
- "surface.light.overlayInline": {
1914
- "cssName": "--overlay-inline",
1915
- "type": "color",
1916
- "mode": "light",
1917
- "value": "hsla(0, 0%, 0%, 0.047)",
1918
- "originalValue": "hsla(0, 0%, 0%, 0.047)"
1919
- },
1920
- "surface.light.overlayFull": {
1921
- "cssName": "--overlay-full",
1922
- "type": "color",
1923
- "mode": "light",
1924
- "value": "hsla(0, 0%, 0%, 0.439)",
1925
- "originalValue": "hsla(0, 0%, 0%, 0.439)"
1926
- },
1927
- "surface.dark.htmlBg": {
1928
- "cssName": "--html-bg",
1929
- "type": "color",
1930
- "mode": "dark",
1931
- "value": "hsl(0, 0%, 0%)",
1932
- "originalValue": "hsl(0, 0%, 0%)"
1933
- },
1934
- "surface.dark.appBg": {
1935
- "cssName": "--app-bg",
1936
- "type": "color",
1937
- "mode": "dark",
1938
- "value": "hsl(0, 0%, 8.5%)",
1939
- "originalValue": "hsl(0, 0%, 8.5%)"
1940
- },
1941
- "surface.dark.navBg": {
1942
- "cssName": "--nav-bg",
1943
- "type": "color",
1944
- "mode": "dark",
1945
- "value": "hsl(0, 0%, 8.5%)",
1946
- "originalValue": "hsl(0, 0%, 8.5%)"
1947
- },
1948
- "surface.dark.navItemBg": {
1949
- "cssName": "--nav-item-bg",
1950
- "type": "color",
1951
- "mode": "dark",
1952
- "value": "transparent",
1953
- "originalValue": "transparent"
1954
- },
1955
- "surface.dark.navItemBgHover": {
1956
- "cssName": "--nav-item-bg-hover",
1957
- "type": "color",
1958
- "mode": "dark",
1959
- "value": "hsl(0, 0%, 13.6%)",
1960
- "originalValue": "hsl(0, 0%, 13.6%)"
1961
- },
1962
- "surface.dark.navItemBgActive": {
1963
- "cssName": "--nav-item-bg-active",
1964
- "type": "color",
1965
- "mode": "dark",
1966
- "value": "hsl(0, 0%, 13.6%)",
1967
- "originalValue": "hsl(0, 0%, 13.6%)"
1968
- },
1969
- "surface.dark.listItemBg": {
1970
- "cssName": "--list-item-bg",
1971
- "type": "color",
1972
- "mode": "dark",
1973
- "value": "transparent",
1974
- "originalValue": "transparent"
1975
- },
1976
- "surface.dark.listItemBgHover": {
1977
- "cssName": "--list-item-bg-hover",
1978
- "type": "color",
1979
- "mode": "dark",
1980
- "value": "hsl(0, 0%, 11.0%)",
1981
- "originalValue": "hsl(0, 0%, 11.0%)"
1982
- },
1983
- "surface.dark.listItemBgActive": {
1984
- "cssName": "--list-item-bg-active",
1985
- "type": "color",
1986
- "mode": "dark",
1987
- "value": "hsl(0, 0%, 11.0%)",
1988
- "originalValue": "hsl(0, 0%, 11.0%)"
1989
- },
1990
- "surface.dark.listItemBorder": {
1991
- "cssName": "--list-item-border",
1992
- "type": "color",
1993
- "mode": "dark",
1994
- "value": "hsl(0, 0%, 17.9%)",
1995
- "originalValue": "hsl(0, 0%, 17.9%)"
1996
- },
1997
- "surface.dark.segmentedControlBg": {
1998
- "cssName": "--segmented-control-bg",
1999
- "type": "color",
2000
- "mode": "dark",
2001
- "value": "hsl(0, 0%, 8.5%)",
2002
- "originalValue": "hsl(0, 0%, 8.5%)"
2003
- },
2004
- "surface.dark.segmentedControlBgActive": {
2005
- "cssName": "--segmented-control-bg-active",
2006
- "type": "color",
2007
- "mode": "dark",
2008
- "value": "hsl(0, 0%, 13.6%)",
2009
- "originalValue": "hsl(0, 0%, 13.6%)"
2010
- },
2011
- "surface.dark.transferListItemCompletingBg": {
2012
- "cssName": "--transfer-list-item-completing-bg",
2013
- "type": "color",
2014
- "mode": "dark",
2015
- "value": "hsl(0, 0%, 13.6%)",
2016
- "originalValue": "hsl(0, 0%, 13.6%)"
2017
- },
2018
- "surface.dark.transferListItemDownloadingBg": {
2019
- "cssName": "--transfer-list-item-downloading-bg",
2020
- "type": "color",
2021
- "mode": "dark",
2022
- "value": "hsl(0, 0%, 13.6%)",
2023
- "originalValue": "hsl(0, 0%, 13.6%)"
2024
- },
2025
- "surface.dark.transferListItemFinishedBg": {
2026
- "cssName": "--transfer-list-item-finished-bg",
2027
- "type": "color",
2028
- "mode": "dark",
2029
- "value": "hsl(0, 0%, 11.0%)",
2030
- "originalValue": "hsl(0, 0%, 11.0%)"
2031
- },
2032
- "surface.dark.transferListItemPassiveBg": {
2033
- "cssName": "--transfer-list-item-passive-bg",
2034
- "type": "color",
2035
- "mode": "dark",
2036
- "value": "hsl(0, 0%, 11.0%)",
2037
- "originalValue": "hsl(0, 0%, 11.0%)"
2038
- },
2039
- "surface.dark.hiContrast": {
2040
- "cssName": "--hi-contrast",
2041
- "type": "color",
2042
- "mode": "dark",
2043
- "value": "hsl(0, 0%, 93.0%)",
2044
- "originalValue": "hsl(0, 0%, 93.0%)"
2045
- },
2046
- "surface.dark.loContrast": {
2047
- "cssName": "--lo-contrast",
2048
- "type": "color",
2049
- "mode": "dark",
2050
- "value": "hsl(0, 0%, 8.5%)",
2051
- "originalValue": "hsl(0, 0%, 8.5%)"
2052
- },
2053
- "surface.dark.overlayInline": {
2054
- "cssName": "--overlay-inline",
2055
- "type": "color",
2056
- "mode": "dark",
2057
- "value": "hsla(0, 0%, 0%, 0.439)",
2058
- "originalValue": "hsla(0, 0%, 0%, 0.439)"
2059
- },
2060
- "surface.dark.overlayFull": {
2061
- "cssName": "--overlay-full",
2062
- "type": "color",
2063
- "mode": "dark",
2064
- "value": "hsla(0, 0%, 0%, 0.565)",
2065
- "originalValue": "hsla(0, 0%, 0%, 0.565)"
2066
- },
2067
- "surface.dark.shadowColor": {
2068
- "cssName": "--shadow-color",
2069
- "type": "color",
2070
- "mode": "dark",
2071
- "value": "hsl(0, 0%, 0%)",
2072
- "originalValue": "hsl(0, 0%, 0%)"
2073
- },
2074
- "surface.dark.shadow": {
2075
- "cssName": "--shadow",
2076
- "type": "color",
2077
- "mode": "dark",
2078
- "value": "hsl(0, 0%, 0%)",
2079
- "originalValue": "hsl(0, 0%, 0%)"
2080
- },
2081
- "surface.dark.shadowSm": {
2082
- "cssName": "--shadow-sm",
2083
- "type": "string",
2084
- "mode": "dark",
2085
- "value": "0 1px 2px hsla(0, 0%, 0%, 0.4)",
2086
- "originalValue": "0 1px 2px hsla(0, 0%, 0%, 0.4)"
2087
- },
2088
- "surface.dark.shadowMd": {
2089
- "cssName": "--shadow-md",
2090
- "type": "string",
2091
- "mode": "dark",
2092
- "value": "0 4px 12px hsla(0, 0%, 0%, 0.5)",
2093
- "originalValue": "0 4px 12px hsla(0, 0%, 0%, 0.5)"
2094
- },
2095
- "surface.dark.shadowLg": {
2096
- "cssName": "--shadow-lg",
2097
- "type": "string",
2098
- "mode": "dark",
2099
- "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
2100
- "originalValue": "0 16px 40px hsla(0, 0%, 0%, 0.6)"
2101
- }
2102
- } as const;
2103
-
2104
- export type PutioTokenName = keyof typeof tokens;