@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.
Files changed (17) hide show
  1. package/DESIGN.md +111 -0
  2. package/LICENSE +21 -0
  3. package/README.md +57 -0
  4. package/dist/css/tokens.css +366 -0
  5. package/dist/figma/putio.tokens.json +591 -0
  6. package/dist/tokens.d.ts +14 -0
  7. package/dist/tokens.dtcg.json +2462 -0
  8. package/dist/tokens.flat.json +1622 -0
  9. package/dist/tokens.js +1624 -0
  10. package/dist/tokens.ts +1626 -0
  11. package/package.json +65 -0
  12. package/system/README.md +84 -0
  13. package/tokens/components.tokens.json +229 -0
  14. package/tokens/context.tokens.json +155 -0
  15. package/tokens/foundation.css +133 -0
  16. package/tokens/primitives.tokens.json +628 -0
  17. package/tokens/semantic.tokens.json +1461 -0
package/tokens/semantic.tokens.json ADDED
@@ -0,0 +1,1461 @@
1
+ {
2
+ "$description": "Semantic app, brand, status, and surface tokens for light and dark modes.",
3
+ "color": {
4
+ "neutral": {
5
+ "light": {
6
+ "bg": {
7
+ "$type": "color",
8
+ "$value": "hsl(0, 0%, 99.0%)",
9
+ "$extensions": {
10
+ "putio": {
11
+ "cssName": "bg",
12
+ "mode": "light"
13
+ }
14
+ }
15
+ },
16
+ "bgSecondary": {
17
+ "$type": "color",
18
+ "$value": "hsl(0, 0%, 97.3%)",
19
+ "$extensions": {
20
+ "putio": {
21
+ "cssName": "bg-secondary",
22
+ "mode": "light"
23
+ }
24
+ }
25
+ },
26
+ "componentBg": {
27
+ "$type": "color",
28
+ "$value": "hsl(0, 0%, 95.1%)",
29
+ "$extensions": {
30
+ "putio": {
31
+ "cssName": "component-bg",
32
+ "mode": "light"
33
+ }
34
+ }
35
+ },
36
+ "componentBgHover": {
37
+ "$type": "color",
38
+ "$value": "hsl(0, 0%, 93.0%)",
39
+ "$extensions": {
40
+ "putio": {
41
+ "cssName": "component-bg-hover",
42
+ "mode": "light"
43
+ }
44
+ }
45
+ },
46
+ "componentBgActive": {
47
+ "$type": "color",
48
+ "$value": "hsl(0, 0%, 90.9%)",
49
+ "$extensions": {
50
+ "putio": {
51
+ "cssName": "component-bg-active",
52
+ "mode": "light"
53
+ }
54
+ }
55
+ },
56
+ "line": {
57
+ "$type": "color",
58
+ "$value": "hsl(0, 0%, 88.7%)",
59
+ "$extensions": {
60
+ "putio": {
61
+ "cssName": "line",
62
+ "mode": "light"
63
+ }
64
+ }
65
+ },
66
+ "border": {
67
+ "$type": "color",
68
+ "$value": "hsl(0, 0%, 85.8%)",
69
+ "$extensions": {
70
+ "putio": {
71
+ "cssName": "border",
72
+ "mode": "light"
73
+ }
74
+ }
75
+ },
76
+ "borderHover": {
77
+ "$type": "color",
78
+ "$value": "hsl(0, 0%, 78.0%)",
79
+ "$extensions": {
80
+ "putio": {
81
+ "cssName": "border-hover",
82
+ "mode": "light"
83
+ }
84
+ }
85
+ },
86
+ "solid": {
87
+ "$type": "color",
88
+ "$value": "hsl(0, 0%, 56.1%)",
89
+ "$extensions": {
90
+ "putio": {
91
+ "cssName": "solid",
92
+ "mode": "light"
93
+ }
94
+ }
95
+ },
96
+ "solidHover": {
97
+ "$type": "color",
98
+ "$value": "hsl(0, 0%, 52.3%)",
99
+ "$extensions": {
100
+ "putio": {
101
+ "cssName": "solid-hover",
102
+ "mode": "light"
103
+ }
104
+ }
105
+ },
106
+ "textSecondary": {
107
+ "$type": "color",
108
+ "$value": "hsl(0, 0%, 43.5%)",
109
+ "$extensions": {
110
+ "putio": {
111
+ "cssName": "text-secondary",
112
+ "mode": "light"
113
+ }
114
+ }
115
+ },
116
+ "text": {
117
+ "$type": "color",
118
+ "$value": "hsl(0, 0%, 9.0%)",
119
+ "$extensions": {
120
+ "putio": {
121
+ "cssName": "text",
122
+ "mode": "light"
123
+ }
124
+ }
125
+ }
126
+ },
127
+ "dark": {
128
+ "bg": {
129
+ "$type": "color",
130
+ "$value": "hsl(0, 0%, 8.5%)",
131
+ "$extensions": {
132
+ "putio": {
133
+ "cssName": "bg",
134
+ "mode": "dark"
135
+ }
136
+ }
137
+ },
138
+ "bgSecondary": {
139
+ "$type": "color",
140
+ "$value": "hsl(0, 0%, 11.0%)",
141
+ "$extensions": {
142
+ "putio": {
143
+ "cssName": "bg-secondary",
144
+ "mode": "dark"
145
+ }
146
+ }
147
+ },
148
+ "componentBg": {
149
+ "$type": "color",
150
+ "$value": "hsl(0, 0%, 13.6%)",
151
+ "$extensions": {
152
+ "putio": {
153
+ "cssName": "component-bg",
154
+ "mode": "dark"
155
+ }
156
+ }
157
+ },
158
+ "componentBgHover": {
159
+ "$type": "color",
160
+ "$value": "hsl(0, 0%, 15.8%)",
161
+ "$extensions": {
162
+ "putio": {
163
+ "cssName": "component-bg-hover",
164
+ "mode": "dark"
165
+ }
166
+ }
167
+ },
168
+ "componentBgActive": {
169
+ "$type": "color",
170
+ "$value": "hsl(0, 0%, 17.9%)",
171
+ "$extensions": {
172
+ "putio": {
173
+ "cssName": "component-bg-active",
174
+ "mode": "dark"
175
+ }
176
+ }
177
+ },
178
+ "line": {
179
+ "$type": "color",
180
+ "$value": "hsl(0, 0%, 20.5%)",
181
+ "$extensions": {
182
+ "putio": {
183
+ "cssName": "line",
184
+ "mode": "dark"
185
+ }
186
+ }
187
+ },
188
+ "border": {
189
+ "$type": "color",
190
+ "$value": "hsl(0, 0%, 24.3%)",
191
+ "$extensions": {
192
+ "putio": {
193
+ "cssName": "border",
194
+ "mode": "dark"
195
+ }
196
+ }
197
+ },
198
+ "borderHover": {
199
+ "$type": "color",
200
+ "$value": "hsl(0, 0%, 31.2%)",
201
+ "$extensions": {
202
+ "putio": {
203
+ "cssName": "border-hover",
204
+ "mode": "dark"
205
+ }
206
+ }
207
+ },
208
+ "solid": {
209
+ "$type": "color",
210
+ "$value": "hsl(0, 0%, 43.9%)",
211
+ "$extensions": {
212
+ "putio": {
213
+ "cssName": "solid",
214
+ "mode": "dark"
215
+ }
216
+ }
217
+ },
218
+ "solidHover": {
219
+ "$type": "color",
220
+ "$value": "hsl(0, 0%, 49.4%)",
221
+ "$extensions": {
222
+ "putio": {
223
+ "cssName": "solid-hover",
224
+ "mode": "dark"
225
+ }
226
+ }
227
+ },
228
+ "textSecondary": {
229
+ "$type": "color",
230
+ "$value": "hsl(0, 0%, 62.8%)",
231
+ "$extensions": {
232
+ "putio": {
233
+ "cssName": "text-secondary",
234
+ "mode": "dark"
235
+ }
236
+ }
237
+ },
238
+ "text": {
239
+ "$type": "color",
240
+ "$value": "hsl(0, 0%, 93.0%)",
241
+ "$extensions": {
242
+ "putio": {
243
+ "cssName": "text",
244
+ "mode": "dark"
245
+ }
246
+ }
247
+ }
248
+ }
249
+ },
250
+ "green": {
251
+ "light": {
252
+ "bg": {
253
+ "$type": "color",
254
+ "$value": "hsl(136, 50.0%, 98.9%)",
255
+ "$extensions": {
256
+ "putio": {
257
+ "cssName": "green-bg",
258
+ "mode": "light"
259
+ }
260
+ }
261
+ },
262
+ "bgSecondary": {
263
+ "$type": "color",
264
+ "$value": "hsl(138, 62.5%, 96.9%)",
265
+ "$extensions": {
266
+ "putio": {
267
+ "cssName": "green-bg-secondary",
268
+ "mode": "light"
269
+ }
270
+ }
271
+ },
272
+ "componentBg": {
273
+ "$type": "color",
274
+ "$value": "hsl(139, 55.2%, 94.5%)",
275
+ "$extensions": {
276
+ "putio": {
277
+ "cssName": "green-component-bg",
278
+ "mode": "light"
279
+ }
280
+ }
281
+ },
282
+ "componentBgHover": {
283
+ "$type": "color",
284
+ "$value": "hsl(140, 48.7%, 91.0%)",
285
+ "$extensions": {
286
+ "putio": {
287
+ "cssName": "green-component-bg-hover",
288
+ "mode": "light"
289
+ }
290
+ }
291
+ },
292
+ "componentBgActive": {
293
+ "$type": "color",
294
+ "$value": "hsl(141, 43.7%, 86.0%)",
295
+ "$extensions": {
296
+ "putio": {
297
+ "cssName": "green-component-bg-active",
298
+ "mode": "light"
299
+ }
300
+ }
301
+ },
302
+ "line": {
303
+ "$type": "color",
304
+ "$value": "hsl(143, 40.3%, 79.0%)",
305
+ "$extensions": {
306
+ "putio": {
307
+ "cssName": "green-line",
308
+ "mode": "light"
309
+ }
310
+ }
311
+ },
312
+ "border": {
313
+ "$type": "color",
314
+ "$value": "hsl(146, 38.5%, 69.0%)",
315
+ "$extensions": {
316
+ "putio": {
317
+ "cssName": "green-border",
318
+ "mode": "light"
319
+ }
320
+ }
321
+ },
322
+ "borderHover": {
323
+ "$type": "color",
324
+ "$value": "hsl(151, 40.2%, 54.1%)",
325
+ "$extensions": {
326
+ "putio": {
327
+ "cssName": "green-border-hover",
328
+ "mode": "light"
329
+ }
330
+ }
331
+ },
332
+ "solid": {
333
+ "$type": "color",
334
+ "$value": "hsl(151, 55.0%, 41.5%)",
335
+ "$extensions": {
336
+ "putio": {
337
+ "cssName": "green-solid",
338
+ "mode": "light"
339
+ }
340
+ }
341
+ },
342
+ "solidHover": {
343
+ "$type": "color",
344
+ "$value": "hsl(152, 57.5%, 37.6%)",
345
+ "$extensions": {
346
+ "putio": {
347
+ "cssName": "green-solid-hover",
348
+ "mode": "light"
349
+ }
350
+ }
351
+ },
352
+ "textSecondary": {
353
+ "$type": "color",
354
+ "$value": "hsl(153, 67.0%, 28.5%)",
355
+ "$extensions": {
356
+ "putio": {
357
+ "cssName": "green-text-secondary",
358
+ "mode": "light"
359
+ }
360
+ }
361
+ },
362
+ "text": {
363
+ "$type": "color",
364
+ "$value": "hsl(155, 40.0%, 14.0%)",
365
+ "$extensions": {
366
+ "putio": {
367
+ "cssName": "green-text",
368
+ "mode": "light"
369
+ }
370
+ }
371
+ }
372
+ },
373
+ "dark": {
374
+ "bg": {
375
+ "$type": "color",
376
+ "$value": "hsl(146, 30.0%, 7.4%)",
377
+ "$extensions": {
378
+ "putio": {
379
+ "cssName": "green-bg",
380
+ "mode": "dark"
381
+ }
382
+ }
383
+ },
384
+ "bgSecondary": {
385
+ "$type": "color",
386
+ "$value": "hsl(155, 44.2%, 8.4%)",
387
+ "$extensions": {
388
+ "putio": {
389
+ "cssName": "green-bg-secondary",
390
+ "mode": "dark"
391
+ }
392
+ }
393
+ },
394
+ "componentBg": {
395
+ "$type": "color",
396
+ "$value": "hsl(155, 46.7%, 10.9%)",
397
+ "$extensions": {
398
+ "putio": {
399
+ "cssName": "green-component-bg",
400
+ "mode": "dark"
401
+ }
402
+ }
403
+ },
404
+ "componentBgHover": {
405
+ "$type": "color",
406
+ "$value": "hsl(154, 48.4%, 12.9%)",
407
+ "$extensions": {
408
+ "putio": {
409
+ "cssName": "green-component-bg-hover",
410
+ "mode": "dark"
411
+ }
412
+ }
413
+ },
414
+ "componentBgActive": {
415
+ "$type": "color",
416
+ "$value": "hsl(154, 49.7%, 14.9%)",
417
+ "$extensions": {
418
+ "putio": {
419
+ "cssName": "green-component-bg-active",
420
+ "mode": "dark"
421
+ }
422
+ }
423
+ },
424
+ "line": {
425
+ "$type": "color",
426
+ "$value": "hsl(154, 50.9%, 17.6%)",
427
+ "$extensions": {
428
+ "putio": {
429
+ "cssName": "green-line",
430
+ "mode": "dark"
431
+ }
432
+ }
433
+ },
434
+ "border": {
435
+ "$type": "color",
436
+ "$value": "hsl(153, 51.8%, 21.8%)",
437
+ "$extensions": {
438
+ "putio": {
439
+ "cssName": "green-border",
440
+ "mode": "dark"
441
+ }
442
+ }
443
+ },
444
+ "borderHover": {
445
+ "$type": "color",
446
+ "$value": "hsl(151, 51.7%, 28.4%)",
447
+ "$extensions": {
448
+ "putio": {
449
+ "cssName": "green-border-hover",
450
+ "mode": "dark"
451
+ }
452
+ }
453
+ },
454
+ "solid": {
455
+ "$type": "color",
456
+ "$value": "hsl(151, 55.0%, 41.5%)",
457
+ "$extensions": {
458
+ "putio": {
459
+ "cssName": "green-solid",
460
+ "mode": "dark"
461
+ }
462
+ }
463
+ },
464
+ "solidHover": {
465
+ "$type": "color",
466
+ "$value": "hsl(151, 49.3%, 46.5%)",
467
+ "$extensions": {
468
+ "putio": {
469
+ "cssName": "green-solid-hover",
470
+ "mode": "dark"
471
+ }
472
+ }
473
+ },
474
+ "textSecondary": {
475
+ "$type": "color",
476
+ "$value": "hsl(151, 50.0%, 53.2%)",
477
+ "$extensions": {
478
+ "putio": {
479
+ "cssName": "green-text-secondary",
480
+ "mode": "dark"
481
+ }
482
+ }
483
+ },
484
+ "text": {
485
+ "$type": "color",
486
+ "$value": "hsl(137, 72.0%, 94.0%)",
487
+ "$extensions": {
488
+ "putio": {
489
+ "cssName": "green-text",
490
+ "mode": "dark"
491
+ }
492
+ }
493
+ }
494
+ }
495
+ },
496
+ "red": {
497
+ "light": {
498
+ "bg": {
499
+ "$type": "color",
500
+ "$value": "hsl(359, 100%, 99.4%)",
501
+ "$extensions": {
502
+ "putio": {
503
+ "cssName": "red-bg",
504
+ "mode": "light"
505
+ }
506
+ }
507
+ },
508
+ "bgSecondary": {
509
+ "$type": "color",
510
+ "$value": "hsl(359, 100%, 98.6%)",
511
+ "$extensions": {
512
+ "putio": {
513
+ "cssName": "red-bg-secondary",
514
+ "mode": "light"
515
+ }
516
+ }
517
+ },
518
+ "componentBg": {
519
+ "$type": "color",
520
+ "$value": "hsl(360, 100%, 96.8%)",
521
+ "$extensions": {
522
+ "putio": {
523
+ "cssName": "red-component-bg",
524
+ "mode": "light"
525
+ }
526
+ }
527
+ },
528
+ "componentBgHover": {
529
+ "$type": "color",
530
+ "$value": "hsl(360, 97.9%, 94.8%)",
531
+ "$extensions": {
532
+ "putio": {
533
+ "cssName": "red-component-bg-hover",
534
+ "mode": "light"
535
+ }
536
+ }
537
+ },
538
+ "componentBgActive": {
539
+ "$type": "color",
540
+ "$value": "hsl(360, 90.2%, 91.9%)",
541
+ "$extensions": {
542
+ "putio": {
543
+ "cssName": "red-component-bg-active",
544
+ "mode": "light"
545
+ }
546
+ }
547
+ },
548
+ "line": {
549
+ "$type": "color",
550
+ "$value": "hsl(360, 81.7%, 87.8%)",
551
+ "$extensions": {
552
+ "putio": {
553
+ "cssName": "red-line",
554
+ "mode": "light"
555
+ }
556
+ }
557
+ },
558
+ "border": {
559
+ "$type": "color",
560
+ "$value": "hsl(359, 74.2%, 81.7%)",
561
+ "$extensions": {
562
+ "putio": {
563
+ "cssName": "red-border",
564
+ "mode": "light"
565
+ }
566
+ }
567
+ },
568
+ "borderHover": {
569
+ "$type": "color",
570
+ "$value": "hsl(359, 69.5%, 74.3%)",
571
+ "$extensions": {
572
+ "putio": {
573
+ "cssName": "red-border-hover",
574
+ "mode": "light"
575
+ }
576
+ }
577
+ },
578
+ "solid": {
579
+ "$type": "color",
580
+ "$value": "hsl(358, 75.0%, 59.0%)",
581
+ "$extensions": {
582
+ "putio": {
583
+ "cssName": "red-solid",
584
+ "mode": "light"
585
+ }
586
+ }
587
+ },
588
+ "solidHover": {
589
+ "$type": "color",
590
+ "$value": "hsl(358, 69.4%, 55.2%)",
591
+ "$extensions": {
592
+ "putio": {
593
+ "cssName": "red-solid-hover",
594
+ "mode": "light"
595
+ }
596
+ }
597
+ },
598
+ "textSecondary": {
599
+ "$type": "color",
600
+ "$value": "hsl(358, 65.0%, 48.7%)",
601
+ "$extensions": {
602
+ "putio": {
603
+ "cssName": "red-text-secondary",
604
+ "mode": "light"
605
+ }
606
+ }
607
+ },
608
+ "text": {
609
+ "$type": "color",
610
+ "$value": "hsl(354, 50.0%, 14.6%)",
611
+ "$extensions": {
612
+ "putio": {
613
+ "cssName": "red-text",
614
+ "mode": "light"
615
+ }
616
+ }
617
+ }
618
+ },
619
+ "dark": {
620
+ "bg": {
621
+ "$type": "color",
622
+ "$value": "hsl(353, 23.0%, 9.8%)",
623
+ "$extensions": {
624
+ "putio": {
625
+ "cssName": "red-bg",
626
+ "mode": "dark"
627
+ }
628
+ }
629
+ },
630
+ "bgSecondary": {
631
+ "$type": "color",
632
+ "$value": "hsl(357, 34.4%, 12.0%)",
633
+ "$extensions": {
634
+ "putio": {
635
+ "cssName": "red-bg-secondary",
636
+ "mode": "dark"
637
+ }
638
+ }
639
+ },
640
+ "componentBg": {
641
+ "$type": "color",
642
+ "$value": "hsl(356, 43.4%, 16.4%)",
643
+ "$extensions": {
644
+ "putio": {
645
+ "cssName": "red-component-bg",
646
+ "mode": "dark"
647
+ }
648
+ }
649
+ },
650
+ "componentBgHover": {
651
+ "$type": "color",
652
+ "$value": "hsl(356, 47.6%, 19.2%)",
653
+ "$extensions": {
654
+ "putio": {
655
+ "cssName": "red-component-bg-hover",
656
+ "mode": "dark"
657
+ }
658
+ }
659
+ },
660
+ "componentBgActive": {
661
+ "$type": "color",
662
+ "$value": "hsl(356, 51.1%, 21.9%)",
663
+ "$extensions": {
664
+ "putio": {
665
+ "cssName": "red-component-bg-active",
666
+ "mode": "dark"
667
+ }
668
+ }
669
+ },
670
+ "line": {
671
+ "$type": "color",
672
+ "$value": "hsl(356, 55.2%, 25.9%)",
673
+ "$extensions": {
674
+ "putio": {
675
+ "cssName": "red-line",
676
+ "mode": "dark"
677
+ }
678
+ }
679
+ },
680
+ "border": {
681
+ "$type": "color",
682
+ "$value": "hsl(357, 60.2%, 31.8%)",
683
+ "$extensions": {
684
+ "putio": {
685
+ "cssName": "red-border",
686
+ "mode": "dark"
687
+ }
688
+ }
689
+ },
690
+ "borderHover": {
691
+ "$type": "color",
692
+ "$value": "hsl(358, 65.0%, 40.4%)",
693
+ "$extensions": {
694
+ "putio": {
695
+ "cssName": "red-border-hover",
696
+ "mode": "dark"
697
+ }
698
+ }
699
+ },
700
+ "solid": {
701
+ "$type": "color",
702
+ "$value": "hsl(358, 75.0%, 59.0%)",
703
+ "$extensions": {
704
+ "putio": {
705
+ "cssName": "red-solid",
706
+ "mode": "dark"
707
+ }
708
+ }
709
+ },
710
+ "solidHover": {
711
+ "$type": "color",
712
+ "$value": "hsl(358, 85.3%, 64.0%)",
713
+ "$extensions": {
714
+ "putio": {
715
+ "cssName": "red-solid-hover",
716
+ "mode": "dark"
717
+ }
718
+ }
719
+ },
720
+ "textSecondary": {
721
+ "$type": "color",
722
+ "$value": "hsl(358, 100%, 69.5%)",
723
+ "$extensions": {
724
+ "putio": {
725
+ "cssName": "red-text-secondary",
726
+ "mode": "dark"
727
+ }
728
+ }
729
+ },
730
+ "text": {
731
+ "$type": "color",
732
+ "$value": "hsl(351, 89.0%, 96.0%)",
733
+ "$extensions": {
734
+ "putio": {
735
+ "cssName": "red-text",
736
+ "mode": "dark"
737
+ }
738
+ }
739
+ }
740
+ }
741
+ },
742
+ "yellow": {
743
+ "light": {
744
+ "bg": {
745
+ "$type": "color",
746
+ "$value": "hsl(60, 54.0%, 98.5%)",
747
+ "$extensions": {
748
+ "putio": {
749
+ "cssName": "yellow-bg",
750
+ "mode": "light"
751
+ }
752
+ }
753
+ },
754
+ "bgSecondary": {
755
+ "$type": "color",
756
+ "$value": "hsl(52, 100%, 95.5%)",
757
+ "$extensions": {
758
+ "putio": {
759
+ "cssName": "yellow-bg-secondary",
760
+ "mode": "light"
761
+ }
762
+ }
763
+ },
764
+ "componentBg": {
765
+ "$type": "color",
766
+ "$value": "hsl(55, 100%, 90.9%)",
767
+ "$extensions": {
768
+ "putio": {
769
+ "cssName": "yellow-component-bg",
770
+ "mode": "light"
771
+ }
772
+ }
773
+ },
774
+ "componentBgHover": {
775
+ "$type": "color",
776
+ "$value": "hsl(54, 100%, 86.6%)",
777
+ "$extensions": {
778
+ "putio": {
779
+ "cssName": "yellow-component-bg-hover",
780
+ "mode": "light"
781
+ }
782
+ }
783
+ },
784
+ "componentBgActive": {
785
+ "$type": "color",
786
+ "$value": "hsl(52, 97.9%, 82.0%)",
787
+ "$extensions": {
788
+ "putio": {
789
+ "cssName": "yellow-component-bg-active",
790
+ "mode": "light"
791
+ }
792
+ }
793
+ },
794
+ "line": {
795
+ "$type": "color",
796
+ "$value": "hsl(50, 89.4%, 76.1%)",
797
+ "$extensions": {
798
+ "putio": {
799
+ "cssName": "yellow-line",
800
+ "mode": "light"
801
+ }
802
+ }
803
+ },
804
+ "border": {
805
+ "$type": "color",
806
+ "$value": "hsl(47, 80.4%, 68.0%)",
807
+ "$extensions": {
808
+ "putio": {
809
+ "cssName": "yellow-border",
810
+ "mode": "light"
811
+ }
812
+ }
813
+ },
814
+ "borderHover": {
815
+ "$type": "color",
816
+ "$value": "hsl(48, 100%, 46.1%)",
817
+ "$extensions": {
818
+ "putio": {
819
+ "cssName": "yellow-border-hover",
820
+ "mode": "light"
821
+ }
822
+ }
823
+ },
824
+ "solidHover": {
825
+ "$type": "color",
826
+ "$value": "{color.brand.yellow}",
827
+ "$extensions": {
828
+ "putio": {
829
+ "cssName": "yellow-solid-hover",
830
+ "mode": "light"
831
+ }
832
+ }
833
+ },
834
+ "textSecondary": {
835
+ "$type": "color",
836
+ "$value": "hsl(42, 100%, 29.0%)",
837
+ "$extensions": {
838
+ "putio": {
839
+ "cssName": "yellow-text-secondary",
840
+ "mode": "light"
841
+ }
842
+ }
843
+ },
844
+ "text": {
845
+ "$type": "color",
846
+ "$value": "hsl(40, 55.0%, 13.5%)",
847
+ "$extensions": {
848
+ "putio": {
849
+ "cssName": "yellow-text",
850
+ "mode": "light"
851
+ }
852
+ }
853
+ }
854
+ },
855
+ "dark": {
856
+ "bg": {
857
+ "$type": "color",
858
+ "$value": "hsl(45, 100%, 5.5%)",
859
+ "$extensions": {
860
+ "putio": {
861
+ "cssName": "yellow-bg",
862
+ "mode": "dark"
863
+ }
864
+ }
865
+ },
866
+ "bgSecondary": {
867
+ "$type": "color",
868
+ "$value": "hsl(46, 100%, 6.7%)",
869
+ "$extensions": {
870
+ "putio": {
871
+ "cssName": "yellow-bg-secondary",
872
+ "mode": "dark"
873
+ }
874
+ }
875
+ },
876
+ "componentBg": {
877
+ "$type": "color",
878
+ "$value": "hsl(45, 100%, 8.7%)",
879
+ "$extensions": {
880
+ "putio": {
881
+ "cssName": "yellow-component-bg",
882
+ "mode": "dark"
883
+ }
884
+ }
885
+ },
886
+ "componentBgHover": {
887
+ "$type": "color",
888
+ "$value": "hsl(45, 100%, 10.4%)",
889
+ "$extensions": {
890
+ "putio": {
891
+ "cssName": "yellow-component-bg-hover",
892
+ "mode": "dark"
893
+ }
894
+ }
895
+ },
896
+ "componentBgActive": {
897
+ "$type": "color",
898
+ "$value": "hsl(47, 100%, 12.1%)",
899
+ "$extensions": {
900
+ "putio": {
901
+ "cssName": "yellow-component-bg-active",
902
+ "mode": "dark"
903
+ }
904
+ }
905
+ },
906
+ "line": {
907
+ "$type": "color",
908
+ "$value": "hsl(49, 100%, 14.3%)",
909
+ "$extensions": {
910
+ "putio": {
911
+ "cssName": "yellow-line",
912
+ "mode": "dark"
913
+ }
914
+ }
915
+ },
916
+ "border": {
917
+ "$type": "color",
918
+ "$value": "hsl(49, 90.3%, 18.4%)",
919
+ "$extensions": {
920
+ "putio": {
921
+ "cssName": "yellow-border",
922
+ "mode": "dark"
923
+ }
924
+ }
925
+ },
926
+ "borderHover": {
927
+ "$type": "color",
928
+ "$value": "hsl(50, 100%, 22.0%)",
929
+ "$extensions": {
930
+ "putio": {
931
+ "cssName": "yellow-border-hover",
932
+ "mode": "dark"
933
+ }
934
+ }
935
+ },
936
+ "solidHover": {
937
+ "$type": "color",
938
+ "$value": "{color.brand.yellow}",
939
+ "$extensions": {
940
+ "putio": {
941
+ "cssName": "yellow-solid-hover",
942
+ "mode": "dark"
943
+ }
944
+ }
945
+ },
946
+ "textSecondary": {
947
+ "$type": "color",
948
+ "$value": "hsl(48, 100%, 47.0%)",
949
+ "$extensions": {
950
+ "putio": {
951
+ "cssName": "yellow-text-secondary",
952
+ "mode": "dark"
953
+ }
954
+ }
955
+ },
956
+ "text": {
957
+ "$type": "color",
958
+ "$value": "hsl(53, 100%, 91.0%)",
959
+ "$extensions": {
960
+ "putio": {
961
+ "cssName": "yellow-text",
962
+ "mode": "dark"
963
+ }
964
+ }
965
+ }
966
+ }
967
+ },
968
+ "transfer": {
969
+ "light": {
970
+ "lime3": {
971
+ "$type": "color",
972
+ "$value": "hsl(85, 76.0%, 92.3%)",
973
+ "$extensions": {
974
+ "putio": {
975
+ "cssName": "lime-3",
976
+ "mode": "light"
977
+ }
978
+ }
979
+ }
980
+ },
981
+ "dark": {
982
+ "lime3": {
983
+ "$type": "color",
984
+ "$value": "hsl(85, 45%, 12%)",
985
+ "$extensions": {
986
+ "putio": {
987
+ "cssName": "lime-3",
988
+ "mode": "dark"
989
+ }
990
+ }
991
+ }
992
+ }
993
+ }
994
+ },
995
+ "surface": {
996
+ "light": {
997
+ "htmlBg": {
998
+ "$type": "color",
999
+ "$value": "hsl(0, 0%, 97.3%)",
1000
+ "$extensions": {
1001
+ "putio": {
1002
+ "cssName": "html-bg",
1003
+ "mode": "light"
1004
+ }
1005
+ }
1006
+ },
1007
+ "appBg": {
1008
+ "$type": "color",
1009
+ "$value": "white",
1010
+ "$extensions": {
1011
+ "putio": {
1012
+ "cssName": "app-bg",
1013
+ "mode": "light"
1014
+ }
1015
+ }
1016
+ },
1017
+ "navBg": {
1018
+ "$type": "color",
1019
+ "$value": "white",
1020
+ "$extensions": {
1021
+ "putio": {
1022
+ "cssName": "nav-bg",
1023
+ "mode": "light"
1024
+ }
1025
+ }
1026
+ },
1027
+ "navItemBg": {
1028
+ "$type": "color",
1029
+ "$value": "transparent",
1030
+ "$extensions": {
1031
+ "putio": {
1032
+ "cssName": "nav-item-bg",
1033
+ "mode": "light"
1034
+ }
1035
+ }
1036
+ },
1037
+ "navItemBgHover": {
1038
+ "$type": "color",
1039
+ "$value": "hsl(0, 0%, 95.1%)",
1040
+ "$extensions": {
1041
+ "putio": {
1042
+ "cssName": "nav-item-bg-hover",
1043
+ "mode": "light"
1044
+ }
1045
+ }
1046
+ },
1047
+ "navItemBgActive": {
1048
+ "$type": "color",
1049
+ "$value": "hsl(0, 0%, 95.1%)",
1050
+ "$extensions": {
1051
+ "putio": {
1052
+ "cssName": "nav-item-bg-active",
1053
+ "mode": "light"
1054
+ }
1055
+ }
1056
+ },
1057
+ "listItemBg": {
1058
+ "$type": "color",
1059
+ "$value": "transparent",
1060
+ "$extensions": {
1061
+ "putio": {
1062
+ "cssName": "list-item-bg",
1063
+ "mode": "light"
1064
+ }
1065
+ }
1066
+ },
1067
+ "listItemBgHover": {
1068
+ "$type": "color",
1069
+ "$value": "hsl(0, 0%, 97.3%)",
1070
+ "$extensions": {
1071
+ "putio": {
1072
+ "cssName": "list-item-bg-hover",
1073
+ "mode": "light"
1074
+ }
1075
+ }
1076
+ },
1077
+ "listItemBgActive": {
1078
+ "$type": "color",
1079
+ "$value": "hsl(0, 0%, 97.3%)",
1080
+ "$extensions": {
1081
+ "putio": {
1082
+ "cssName": "list-item-bg-active",
1083
+ "mode": "light"
1084
+ }
1085
+ }
1086
+ },
1087
+ "listItemBorder": {
1088
+ "$type": "color",
1089
+ "$value": "hsl(0, 0%, 90.9%)",
1090
+ "$extensions": {
1091
+ "putio": {
1092
+ "cssName": "list-item-border",
1093
+ "mode": "light"
1094
+ }
1095
+ }
1096
+ },
1097
+ "segmentedControlBg": {
1098
+ "$type": "color",
1099
+ "$value": "hsl(0, 0%, 95.1%)",
1100
+ "$extensions": {
1101
+ "putio": {
1102
+ "cssName": "segmented-control-bg",
1103
+ "mode": "light"
1104
+ }
1105
+ }
1106
+ },
1107
+ "segmentedControlBgActive": {
1108
+ "$type": "color",
1109
+ "$value": "white",
1110
+ "$extensions": {
1111
+ "putio": {
1112
+ "cssName": "segmented-control-bg-active",
1113
+ "mode": "light"
1114
+ }
1115
+ }
1116
+ },
1117
+ "transferListItemCompletingBg": {
1118
+ "$type": "color",
1119
+ "$value": "hsl(85, 76.0%, 92.3%)",
1120
+ "$extensions": {
1121
+ "putio": {
1122
+ "cssName": "transfer-list-item-completing-bg",
1123
+ "mode": "light"
1124
+ }
1125
+ }
1126
+ },
1127
+ "transferListItemDownloadingBg": {
1128
+ "$type": "color",
1129
+ "$value": "hsl(85, 76.0%, 92.3%)",
1130
+ "$extensions": {
1131
+ "putio": {
1132
+ "cssName": "transfer-list-item-downloading-bg",
1133
+ "mode": "light"
1134
+ }
1135
+ }
1136
+ },
1137
+ "transferListItemFinishedBg": {
1138
+ "$type": "color",
1139
+ "$value": "hsl(0, 0%, 97.3%)",
1140
+ "$extensions": {
1141
+ "putio": {
1142
+ "cssName": "transfer-list-item-finished-bg",
1143
+ "mode": "light"
1144
+ }
1145
+ }
1146
+ },
1147
+ "transferListItemPassiveBg": {
1148
+ "$type": "color",
1149
+ "$value": "hsl(0, 0%, 99.0%)",
1150
+ "$extensions": {
1151
+ "putio": {
1152
+ "cssName": "transfer-list-item-passive-bg",
1153
+ "mode": "light"
1154
+ }
1155
+ }
1156
+ },
1157
+ "hiContrast": {
1158
+ "$type": "color",
1159
+ "$value": "hsl(0, 0%, 9.0%)",
1160
+ "$extensions": {
1161
+ "putio": {
1162
+ "cssName": "hi-contrast",
1163
+ "mode": "light"
1164
+ }
1165
+ }
1166
+ },
1167
+ "loContrast": {
1168
+ "$type": "color",
1169
+ "$value": "hsl(0, 0%, 99.0%)",
1170
+ "$extensions": {
1171
+ "putio": {
1172
+ "cssName": "lo-contrast",
1173
+ "mode": "light"
1174
+ }
1175
+ }
1176
+ },
1177
+ "transparent": {
1178
+ "$type": "color",
1179
+ "$value": "transparent",
1180
+ "$extensions": {
1181
+ "putio": {
1182
+ "cssName": "transparent",
1183
+ "mode": "light"
1184
+ }
1185
+ }
1186
+ },
1187
+ "overlayInline": {
1188
+ "$type": "color",
1189
+ "$value": "hsla(0, 0%, 0%, 0.047)",
1190
+ "$extensions": {
1191
+ "putio": {
1192
+ "cssName": "overlay-inline",
1193
+ "mode": "light"
1194
+ }
1195
+ }
1196
+ },
1197
+ "overlayFull": {
1198
+ "$type": "color",
1199
+ "$value": "hsla(0, 0%, 0%, 0.439)",
1200
+ "$extensions": {
1201
+ "putio": {
1202
+ "cssName": "overlay-full",
1203
+ "mode": "light"
1204
+ }
1205
+ }
1206
+ }
1207
+ },
1208
+ "dark": {
1209
+ "htmlBg": {
1210
+ "$type": "color",
1211
+ "$value": "black",
1212
+ "$extensions": {
1213
+ "putio": {
1214
+ "cssName": "html-bg",
1215
+ "mode": "dark"
1216
+ }
1217
+ }
1218
+ },
1219
+ "appBg": {
1220
+ "$type": "color",
1221
+ "$value": "hsl(0, 0%, 8.5%)",
1222
+ "$extensions": {
1223
+ "putio": {
1224
+ "cssName": "app-bg",
1225
+ "mode": "dark"
1226
+ }
1227
+ }
1228
+ },
1229
+ "navBg": {
1230
+ "$type": "color",
1231
+ "$value": "hsl(0, 0%, 8.5%)",
1232
+ "$extensions": {
1233
+ "putio": {
1234
+ "cssName": "nav-bg",
1235
+ "mode": "dark"
1236
+ }
1237
+ }
1238
+ },
1239
+ "navItemBg": {
1240
+ "$type": "color",
1241
+ "$value": "transparent",
1242
+ "$extensions": {
1243
+ "putio": {
1244
+ "cssName": "nav-item-bg",
1245
+ "mode": "dark"
1246
+ }
1247
+ }
1248
+ },
1249
+ "navItemBgHover": {
1250
+ "$type": "color",
1251
+ "$value": "hsl(0, 0%, 13.6%)",
1252
+ "$extensions": {
1253
+ "putio": {
1254
+ "cssName": "nav-item-bg-hover",
1255
+ "mode": "dark"
1256
+ }
1257
+ }
1258
+ },
1259
+ "navItemBgActive": {
1260
+ "$type": "color",
1261
+ "$value": "hsl(0, 0%, 13.6%)",
1262
+ "$extensions": {
1263
+ "putio": {
1264
+ "cssName": "nav-item-bg-active",
1265
+ "mode": "dark"
1266
+ }
1267
+ }
1268
+ },
1269
+ "listItemBg": {
1270
+ "$type": "color",
1271
+ "$value": "transparent",
1272
+ "$extensions": {
1273
+ "putio": {
1274
+ "cssName": "list-item-bg",
1275
+ "mode": "dark"
1276
+ }
1277
+ }
1278
+ },
1279
+ "listItemBgHover": {
1280
+ "$type": "color",
1281
+ "$value": "hsl(0, 0%, 11.0%)",
1282
+ "$extensions": {
1283
+ "putio": {
1284
+ "cssName": "list-item-bg-hover",
1285
+ "mode": "dark"
1286
+ }
1287
+ }
1288
+ },
1289
+ "listItemBgActive": {
1290
+ "$type": "color",
1291
+ "$value": "hsl(0, 0%, 11.0%)",
1292
+ "$extensions": {
1293
+ "putio": {
1294
+ "cssName": "list-item-bg-active",
1295
+ "mode": "dark"
1296
+ }
1297
+ }
1298
+ },
1299
+ "listItemBorder": {
1300
+ "$type": "color",
1301
+ "$value": "hsl(0, 0%, 17.9%)",
1302
+ "$extensions": {
1303
+ "putio": {
1304
+ "cssName": "list-item-border",
1305
+ "mode": "dark"
1306
+ }
1307
+ }
1308
+ },
1309
+ "segmentedControlBg": {
1310
+ "$type": "color",
1311
+ "$value": "hsl(0, 0%, 8.5%)",
1312
+ "$extensions": {
1313
+ "putio": {
1314
+ "cssName": "segmented-control-bg",
1315
+ "mode": "dark"
1316
+ }
1317
+ }
1318
+ },
1319
+ "segmentedControlBgActive": {
1320
+ "$type": "color",
1321
+ "$value": "hsl(0, 0%, 13.6%)",
1322
+ "$extensions": {
1323
+ "putio": {
1324
+ "cssName": "segmented-control-bg-active",
1325
+ "mode": "dark"
1326
+ }
1327
+ }
1328
+ },
1329
+ "transferListItemCompletingBg": {
1330
+ "$type": "color",
1331
+ "$value": "hsl(0, 0%, 13.6%)",
1332
+ "$extensions": {
1333
+ "putio": {
1334
+ "cssName": "transfer-list-item-completing-bg",
1335
+ "mode": "dark"
1336
+ }
1337
+ }
1338
+ },
1339
+ "transferListItemDownloadingBg": {
1340
+ "$type": "color",
1341
+ "$value": "hsl(0, 0%, 13.6%)",
1342
+ "$extensions": {
1343
+ "putio": {
1344
+ "cssName": "transfer-list-item-downloading-bg",
1345
+ "mode": "dark"
1346
+ }
1347
+ }
1348
+ },
1349
+ "transferListItemFinishedBg": {
1350
+ "$type": "color",
1351
+ "$value": "hsl(0, 0%, 11.0%)",
1352
+ "$extensions": {
1353
+ "putio": {
1354
+ "cssName": "transfer-list-item-finished-bg",
1355
+ "mode": "dark"
1356
+ }
1357
+ }
1358
+ },
1359
+ "transferListItemPassiveBg": {
1360
+ "$type": "color",
1361
+ "$value": "hsl(0, 0%, 11.0%)",
1362
+ "$extensions": {
1363
+ "putio": {
1364
+ "cssName": "transfer-list-item-passive-bg",
1365
+ "mode": "dark"
1366
+ }
1367
+ }
1368
+ },
1369
+ "hiContrast": {
1370
+ "$type": "color",
1371
+ "$value": "hsl(0, 0%, 93.0%)",
1372
+ "$extensions": {
1373
+ "putio": {
1374
+ "cssName": "hi-contrast",
1375
+ "mode": "dark"
1376
+ }
1377
+ }
1378
+ },
1379
+ "loContrast": {
1380
+ "$type": "color",
1381
+ "$value": "hsl(0, 0%, 8.5%)",
1382
+ "$extensions": {
1383
+ "putio": {
1384
+ "cssName": "lo-contrast",
1385
+ "mode": "dark"
1386
+ }
1387
+ }
1388
+ },
1389
+ "overlayInline": {
1390
+ "$type": "color",
1391
+ "$value": "hsla(0, 0%, 0%, 0.439)",
1392
+ "$extensions": {
1393
+ "putio": {
1394
+ "cssName": "overlay-inline",
1395
+ "mode": "dark"
1396
+ }
1397
+ }
1398
+ },
1399
+ "overlayFull": {
1400
+ "$type": "color",
1401
+ "$value": "hsla(0, 0%, 0%, 0.565)",
1402
+ "$extensions": {
1403
+ "putio": {
1404
+ "cssName": "overlay-full",
1405
+ "mode": "dark"
1406
+ }
1407
+ }
1408
+ },
1409
+ "shadowColor": {
1410
+ "$type": "color",
1411
+ "$value": "black",
1412
+ "$extensions": {
1413
+ "putio": {
1414
+ "cssName": "shadow-color",
1415
+ "mode": "dark"
1416
+ }
1417
+ }
1418
+ },
1419
+ "shadow": {
1420
+ "$type": "color",
1421
+ "$value": "black",
1422
+ "$extensions": {
1423
+ "putio": {
1424
+ "cssName": "shadow",
1425
+ "mode": "dark"
1426
+ }
1427
+ }
1428
+ },
1429
+ "shadowSm": {
1430
+ "$type": "string",
1431
+ "$value": "0 1px 2px hsla(0, 0%, 0%, 0.4)",
1432
+ "$extensions": {
1433
+ "putio": {
1434
+ "cssName": "shadow-sm",
1435
+ "mode": "dark"
1436
+ }
1437
+ }
1438
+ },
1439
+ "shadowMd": {
1440
+ "$type": "string",
1441
+ "$value": "0 4px 12px hsla(0, 0%, 0%, 0.5)",
1442
+ "$extensions": {
1443
+ "putio": {
1444
+ "cssName": "shadow-md",
1445
+ "mode": "dark"
1446
+ }
1447
+ }
1448
+ },
1449
+ "shadowLg": {
1450
+ "$type": "string",
1451
+ "$value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
1452
+ "$extensions": {
1453
+ "putio": {
1454
+ "cssName": "shadow-lg",
1455
+ "mode": "dark"
1456
+ }
1457
+ }
1458
+ }
1459
+ }
1460
+ }
1461
+ }