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