@putdotio/design 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN.md +8 -8
- package/README.md +1 -1
- package/dist/css/tokens.css +104 -87
- package/dist/figma/putio.tokens.json +89 -42
- package/dist/tokens.d.ts +1 -1
- package/dist/tokens.dtcg.json +301 -104
- package/dist/tokens.flat.json +347 -210
- package/dist/tokens.js +347 -210
- package/package.json +2 -2
- package/system/README.md +23 -21
- package/tokens/components.tokens.json +202 -7
- package/tokens/context.tokens.json +21 -21
- package/tokens/primitives.tokens.json +1 -1
- package/tokens/semantic.tokens.json +77 -75
- package/dist/tokens.ts +0 -2104
package/dist/tokens.js
CHANGED
|
@@ -9,12 +9,28 @@ export const tokens = {
|
|
|
9
9
|
"originalValue": "{color.brand.yellow}",
|
|
10
10
|
"description": "Primary command background."
|
|
11
11
|
},
|
|
12
|
+
"component.button.primary.backgroundHover": {
|
|
13
|
+
"cssName": "--button-primary-bg-hover",
|
|
14
|
+
"type": "color",
|
|
15
|
+
"mode": "light",
|
|
16
|
+
"value": "hsl(45, 89%, 58%)",
|
|
17
|
+
"originalValue": "{color.yellow.light.solidHover}",
|
|
18
|
+
"description": "Primary command hover background in light mode."
|
|
19
|
+
},
|
|
20
|
+
"component.button.primary.backgroundHoverDark": {
|
|
21
|
+
"cssName": "--button-primary-bg-hover",
|
|
22
|
+
"type": "color",
|
|
23
|
+
"mode": "dark",
|
|
24
|
+
"value": "hsl(45, 89%, 58%)",
|
|
25
|
+
"originalValue": "{color.yellow.dark.solidHover}",
|
|
26
|
+
"description": "Primary command hover background in dark mode."
|
|
27
|
+
},
|
|
12
28
|
"component.button.primary.foreground": {
|
|
13
29
|
"cssName": "--button-primary-fg",
|
|
14
30
|
"type": "color",
|
|
15
31
|
"mode": "global",
|
|
16
|
-
"value": "hsl(
|
|
17
|
-
"originalValue": "
|
|
32
|
+
"value": "hsl(38, 65%, 10%)",
|
|
33
|
+
"originalValue": "{component.alias.primaryForeground}",
|
|
18
34
|
"description": "Text or icon color on the yellow primary button."
|
|
19
35
|
},
|
|
20
36
|
"component.button.primary.radius": {
|
|
@@ -52,6 +68,102 @@ export const tokens = {
|
|
|
52
68
|
"value": "hsl(0, 0%, 93.0%)",
|
|
53
69
|
"originalValue": "{color.neutral.dark.text}"
|
|
54
70
|
},
|
|
71
|
+
"component.button.success.background": {
|
|
72
|
+
"cssName": "--button-success-bg",
|
|
73
|
+
"type": "color",
|
|
74
|
+
"mode": "light",
|
|
75
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
76
|
+
"originalValue": "{color.green.light.solid}",
|
|
77
|
+
"description": "Success command background in light mode."
|
|
78
|
+
},
|
|
79
|
+
"component.button.success.backgroundDark": {
|
|
80
|
+
"cssName": "--button-success-bg",
|
|
81
|
+
"type": "color",
|
|
82
|
+
"mode": "dark",
|
|
83
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
84
|
+
"originalValue": "{color.green.dark.solid}",
|
|
85
|
+
"description": "Success command background in dark mode."
|
|
86
|
+
},
|
|
87
|
+
"component.button.success.backgroundHover": {
|
|
88
|
+
"cssName": "--button-success-bg-hover",
|
|
89
|
+
"type": "color",
|
|
90
|
+
"mode": "light",
|
|
91
|
+
"value": "hsl(151, 58%, 37%)",
|
|
92
|
+
"originalValue": "{color.green.light.solidHover}",
|
|
93
|
+
"description": "Success command hover background in light mode. Step-10 hover companion to the green solid fill."
|
|
94
|
+
},
|
|
95
|
+
"component.button.success.backgroundHoverDark": {
|
|
96
|
+
"cssName": "--button-success-bg-hover",
|
|
97
|
+
"type": "color",
|
|
98
|
+
"mode": "dark",
|
|
99
|
+
"value": "hsl(151, 68%, 35%)",
|
|
100
|
+
"originalValue": "{color.green.dark.solidHover}",
|
|
101
|
+
"description": "Success command hover background in dark mode. Step-10 hover companion to the green solid fill."
|
|
102
|
+
},
|
|
103
|
+
"component.button.success.foreground": {
|
|
104
|
+
"cssName": "--button-success-fg",
|
|
105
|
+
"type": "color",
|
|
106
|
+
"mode": "global",
|
|
107
|
+
"value": "hsl(0, 0%, 100%)",
|
|
108
|
+
"originalValue": "{component.alias.successForeground}",
|
|
109
|
+
"description": "Text or icon color on success command backgrounds."
|
|
110
|
+
},
|
|
111
|
+
"component.button.danger.background": {
|
|
112
|
+
"cssName": "--button-danger-bg",
|
|
113
|
+
"type": "color",
|
|
114
|
+
"mode": "light",
|
|
115
|
+
"value": "hsl(358, 75%, 59%)",
|
|
116
|
+
"originalValue": "{color.red.light.solid}",
|
|
117
|
+
"description": "Destructive command background in light mode."
|
|
118
|
+
},
|
|
119
|
+
"component.button.danger.backgroundDark": {
|
|
120
|
+
"cssName": "--button-danger-bg",
|
|
121
|
+
"type": "color",
|
|
122
|
+
"mode": "dark",
|
|
123
|
+
"value": "hsl(358, 75%, 59%)",
|
|
124
|
+
"originalValue": "{color.red.dark.solid}",
|
|
125
|
+
"description": "Destructive command background in dark mode."
|
|
126
|
+
},
|
|
127
|
+
"component.button.danger.backgroundHover": {
|
|
128
|
+
"cssName": "--button-danger-bg-hover",
|
|
129
|
+
"type": "color",
|
|
130
|
+
"mode": "light",
|
|
131
|
+
"value": "hsl(357, 66%, 53%)",
|
|
132
|
+
"originalValue": "{color.red.light.solidHover}",
|
|
133
|
+
"description": "Destructive command hover background in light mode. Step-10 hover companion to the red solid fill."
|
|
134
|
+
},
|
|
135
|
+
"component.button.danger.backgroundHoverDark": {
|
|
136
|
+
"cssName": "--button-danger-bg-hover",
|
|
137
|
+
"type": "color",
|
|
138
|
+
"mode": "dark",
|
|
139
|
+
"value": "hsl(357, 67%, 53%)",
|
|
140
|
+
"originalValue": "{color.red.dark.solidHover}",
|
|
141
|
+
"description": "Destructive command hover background in dark mode. Step-10 hover companion to the red solid fill."
|
|
142
|
+
},
|
|
143
|
+
"component.button.danger.foreground": {
|
|
144
|
+
"cssName": "--button-danger-fg",
|
|
145
|
+
"type": "color",
|
|
146
|
+
"mode": "global",
|
|
147
|
+
"value": "hsl(0, 0%, 100%)",
|
|
148
|
+
"originalValue": "{component.alias.destructiveForeground}",
|
|
149
|
+
"description": "Text or icon color on destructive command backgrounds."
|
|
150
|
+
},
|
|
151
|
+
"component.button.info.backgroundHover": {
|
|
152
|
+
"cssName": "--button-info-bg-hover",
|
|
153
|
+
"type": "color",
|
|
154
|
+
"mode": "light",
|
|
155
|
+
"value": "hsl(0, 0%, 52.3%)",
|
|
156
|
+
"originalValue": "{color.neutral.light.solidHover}",
|
|
157
|
+
"description": "Neutral solid command hover background in light mode."
|
|
158
|
+
},
|
|
159
|
+
"component.button.info.backgroundHoverDark": {
|
|
160
|
+
"cssName": "--button-info-bg-hover",
|
|
161
|
+
"type": "color",
|
|
162
|
+
"mode": "dark",
|
|
163
|
+
"value": "hsl(0, 0%, 49.4%)",
|
|
164
|
+
"originalValue": "{color.neutral.dark.solidHover}",
|
|
165
|
+
"description": "Neutral solid command hover background in dark mode."
|
|
166
|
+
},
|
|
55
167
|
"component.input.background": {
|
|
56
168
|
"cssName": "--input-bg",
|
|
57
169
|
"type": "color",
|
|
@@ -324,22 +436,22 @@ export const tokens = {
|
|
|
324
436
|
"cssName": "--primary-foreground",
|
|
325
437
|
"type": "color",
|
|
326
438
|
"mode": "global",
|
|
327
|
-
"value": "hsl(
|
|
328
|
-
"originalValue": "hsl(
|
|
439
|
+
"value": "hsl(38, 65%, 10%)",
|
|
440
|
+
"originalValue": "hsl(38, 65%, 10%)"
|
|
329
441
|
},
|
|
330
442
|
"component.alias.success": {
|
|
331
443
|
"cssName": "--success",
|
|
332
444
|
"type": "color",
|
|
333
445
|
"mode": "light",
|
|
334
|
-
"value": "hsl(
|
|
335
|
-
"originalValue": "{color.green.light.
|
|
446
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
447
|
+
"originalValue": "{color.green.light.solid}"
|
|
336
448
|
},
|
|
337
449
|
"component.alias.successDark": {
|
|
338
450
|
"cssName": "--success",
|
|
339
451
|
"type": "color",
|
|
340
452
|
"mode": "dark",
|
|
341
|
-
"value": "hsl(151,
|
|
342
|
-
"originalValue": "{color.green.dark.
|
|
453
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
454
|
+
"originalValue": "{color.green.dark.solid}"
|
|
343
455
|
},
|
|
344
456
|
"component.alias.successForeground": {
|
|
345
457
|
"cssName": "--success-foreground",
|
|
@@ -352,15 +464,15 @@ export const tokens = {
|
|
|
352
464
|
"cssName": "--destructive",
|
|
353
465
|
"type": "color",
|
|
354
466
|
"mode": "light",
|
|
355
|
-
"value": "hsl(358,
|
|
356
|
-
"originalValue": "{color.red.light.
|
|
467
|
+
"value": "hsl(358, 75%, 59%)",
|
|
468
|
+
"originalValue": "{color.red.light.solid}"
|
|
357
469
|
},
|
|
358
470
|
"component.alias.destructiveDark": {
|
|
359
471
|
"cssName": "--destructive",
|
|
360
472
|
"type": "color",
|
|
361
473
|
"mode": "dark",
|
|
362
|
-
"value": "hsl(358,
|
|
363
|
-
"originalValue": "{color.red.dark.
|
|
474
|
+
"value": "hsl(358, 75%, 59%)",
|
|
475
|
+
"originalValue": "{color.red.dark.solid}"
|
|
364
476
|
},
|
|
365
477
|
"component.alias.destructiveForeground": {
|
|
366
478
|
"cssName": "--destructive-foreground",
|
|
@@ -369,10 +481,33 @@ export const tokens = {
|
|
|
369
481
|
"value": "hsl(0, 0%, 100%)",
|
|
370
482
|
"originalValue": "hsl(0, 0%, 100%)"
|
|
371
483
|
},
|
|
484
|
+
"component.alias.invertForeground": {
|
|
485
|
+
"cssName": "--invert-foreground",
|
|
486
|
+
"type": "color",
|
|
487
|
+
"mode": "light",
|
|
488
|
+
"value": "hsl(0, 0%, 100%)",
|
|
489
|
+
"originalValue": "{surface.light.appBg}",
|
|
490
|
+
"description": "Text or icon color on invert command backgrounds in light mode."
|
|
491
|
+
},
|
|
492
|
+
"component.alias.invertForegroundDark": {
|
|
493
|
+
"cssName": "--invert-foreground",
|
|
494
|
+
"type": "color",
|
|
495
|
+
"mode": "dark",
|
|
496
|
+
"value": "hsl(0, 0%, 8.5%)",
|
|
497
|
+
"originalValue": "{surface.dark.appBg}",
|
|
498
|
+
"description": "Text or icon color on invert command backgrounds in dark mode."
|
|
499
|
+
},
|
|
372
500
|
"component.alias.solidForeground": {
|
|
373
501
|
"cssName": "--solid-foreground",
|
|
374
502
|
"type": "color",
|
|
375
|
-
"mode": "
|
|
503
|
+
"mode": "light",
|
|
504
|
+
"value": "hsl(0, 0%, 0%)",
|
|
505
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
506
|
+
},
|
|
507
|
+
"component.alias.solidForegroundDark": {
|
|
508
|
+
"cssName": "--solid-foreground",
|
|
509
|
+
"type": "color",
|
|
510
|
+
"mode": "dark",
|
|
376
511
|
"value": "hsl(0, 0%, 100%)",
|
|
377
512
|
"originalValue": "hsl(0, 0%, 100%)"
|
|
378
513
|
},
|
|
@@ -513,14 +648,14 @@ export const tokens = {
|
|
|
513
648
|
"cssName": "--file-row-bg",
|
|
514
649
|
"type": "color",
|
|
515
650
|
"mode": "light",
|
|
516
|
-
"value": "
|
|
651
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
517
652
|
"originalValue": "{surface.light.listItemBg}"
|
|
518
653
|
},
|
|
519
654
|
"component.fileRow.backgroundDark": {
|
|
520
655
|
"cssName": "--file-row-bg",
|
|
521
656
|
"type": "color",
|
|
522
657
|
"mode": "dark",
|
|
523
|
-
"value": "
|
|
658
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
524
659
|
"originalValue": "{surface.dark.listItemBg}"
|
|
525
660
|
},
|
|
526
661
|
"component.fileRow.hoverBackground": {
|
|
@@ -562,120 +697,120 @@ export const tokens = {
|
|
|
562
697
|
"cssName": "--notification-danger-bg",
|
|
563
698
|
"type": "color",
|
|
564
699
|
"mode": "light",
|
|
565
|
-
"value": "hsl(
|
|
700
|
+
"value": "hsl(2, 100%, 96%)",
|
|
566
701
|
"originalValue": "{color.red.light.componentBg}"
|
|
567
702
|
},
|
|
568
703
|
"component.notification.dangerBackgroundDark": {
|
|
569
704
|
"cssName": "--notification-danger-bg",
|
|
570
705
|
"type": "color",
|
|
571
706
|
"mode": "dark",
|
|
572
|
-
"value": "hsl(
|
|
707
|
+
"value": "hsl(0, 55%, 15%)",
|
|
573
708
|
"originalValue": "{color.red.dark.componentBg}"
|
|
574
709
|
},
|
|
575
710
|
"context.tv.surface.0": {
|
|
576
711
|
"cssName": "--surf-0",
|
|
577
712
|
"type": "color",
|
|
578
713
|
"mode": "tv",
|
|
579
|
-
"value": "
|
|
580
|
-
"originalValue": "
|
|
714
|
+
"value": "hsl(0, 0%, 0%)",
|
|
715
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
581
716
|
},
|
|
582
717
|
"context.tv.surface.1": {
|
|
583
718
|
"cssName": "--surf-1",
|
|
584
719
|
"type": "color",
|
|
585
720
|
"mode": "tv",
|
|
586
|
-
"value": "
|
|
587
|
-
"originalValue": "
|
|
721
|
+
"value": "hsl(0, 0%, 3.9%)",
|
|
722
|
+
"originalValue": "hsl(0, 0%, 3.9%)"
|
|
588
723
|
},
|
|
589
724
|
"context.tv.surface.2": {
|
|
590
725
|
"cssName": "--surf-2",
|
|
591
726
|
"type": "color",
|
|
592
727
|
"mode": "tv",
|
|
593
|
-
"value": "
|
|
594
|
-
"originalValue": "
|
|
728
|
+
"value": "hsl(0, 0%, 8.6%)",
|
|
729
|
+
"originalValue": "hsl(0, 0%, 8.6%)"
|
|
595
730
|
},
|
|
596
731
|
"context.tv.surface.3": {
|
|
597
732
|
"cssName": "--surf-3",
|
|
598
733
|
"type": "color",
|
|
599
734
|
"mode": "tv",
|
|
600
|
-
"value": "
|
|
601
|
-
"originalValue": "
|
|
735
|
+
"value": "hsl(0, 0%, 12.2%)",
|
|
736
|
+
"originalValue": "hsl(0, 0%, 12.2%)"
|
|
602
737
|
},
|
|
603
738
|
"context.tv.text.primary": {
|
|
604
739
|
"cssName": "--text-1",
|
|
605
740
|
"type": "color",
|
|
606
741
|
"mode": "tv",
|
|
607
|
-
"value": "
|
|
608
|
-
"originalValue": "
|
|
742
|
+
"value": "hsl(0, 0%, 95.7%)",
|
|
743
|
+
"originalValue": "hsl(0, 0%, 95.7%)"
|
|
609
744
|
},
|
|
610
745
|
"context.tv.text.secondary": {
|
|
611
746
|
"cssName": "--text-2",
|
|
612
747
|
"type": "color",
|
|
613
748
|
"mode": "tv",
|
|
614
|
-
"value": "
|
|
615
|
-
"originalValue": "
|
|
749
|
+
"value": "hsla(0, 0%, 95.7%, 0.62)",
|
|
750
|
+
"originalValue": "hsla(0, 0%, 95.7%, 0.62)"
|
|
616
751
|
},
|
|
617
752
|
"context.tv.text.tertiary": {
|
|
618
753
|
"cssName": "--text-3",
|
|
619
754
|
"type": "color",
|
|
620
755
|
"mode": "tv",
|
|
621
|
-
"value": "
|
|
622
|
-
"originalValue": "
|
|
756
|
+
"value": "hsla(0, 0%, 95.7%, 0.38)",
|
|
757
|
+
"originalValue": "hsla(0, 0%, 95.7%, 0.38)"
|
|
623
758
|
},
|
|
624
759
|
"context.tv.glass.1": {
|
|
625
760
|
"cssName": "--glass-1-bg",
|
|
626
761
|
"type": "color",
|
|
627
762
|
"mode": "tv",
|
|
628
|
-
"value": "
|
|
629
|
-
"originalValue": "
|
|
763
|
+
"value": "hsla(0, 0%, 100%, 0.06)",
|
|
764
|
+
"originalValue": "hsla(0, 0%, 100%, 0.06)"
|
|
630
765
|
},
|
|
631
766
|
"context.tv.glass.2": {
|
|
632
767
|
"cssName": "--glass-2-bg",
|
|
633
768
|
"type": "color",
|
|
634
769
|
"mode": "tv",
|
|
635
|
-
"value": "
|
|
636
|
-
"originalValue": "
|
|
770
|
+
"value": "hsla(0, 0%, 100%, 0.10)",
|
|
771
|
+
"originalValue": "hsla(0, 0%, 100%, 0.10)"
|
|
637
772
|
},
|
|
638
773
|
"context.tv.glass.3": {
|
|
639
774
|
"cssName": "--glass-3-bg",
|
|
640
775
|
"type": "color",
|
|
641
776
|
"mode": "tv",
|
|
642
|
-
"value": "
|
|
643
|
-
"originalValue": "
|
|
777
|
+
"value": "hsla(0, 0%, 100%, 0.14)",
|
|
778
|
+
"originalValue": "hsla(0, 0%, 100%, 0.14)"
|
|
644
779
|
},
|
|
645
780
|
"context.tv.glass.border": {
|
|
646
781
|
"cssName": "--glass-border",
|
|
647
782
|
"type": "color",
|
|
648
783
|
"mode": "tv",
|
|
649
|
-
"value": "
|
|
650
|
-
"originalValue": "
|
|
784
|
+
"value": "hsla(0, 0%, 100%, 0.12)",
|
|
785
|
+
"originalValue": "hsla(0, 0%, 100%, 0.12)"
|
|
651
786
|
},
|
|
652
787
|
"context.tv.glass.borderStrong": {
|
|
653
788
|
"cssName": "--glass-border-strong",
|
|
654
789
|
"type": "color",
|
|
655
790
|
"mode": "tv",
|
|
656
|
-
"value": "
|
|
657
|
-
"originalValue": "
|
|
791
|
+
"value": "hsla(0, 0%, 100%, 0.22)",
|
|
792
|
+
"originalValue": "hsla(0, 0%, 100%, 0.22)"
|
|
658
793
|
},
|
|
659
794
|
"context.tv.focus.ring": {
|
|
660
795
|
"cssName": "--focus-ring",
|
|
661
796
|
"type": "color",
|
|
662
797
|
"mode": "tv",
|
|
663
|
-
"value": "
|
|
664
|
-
"originalValue": "
|
|
798
|
+
"value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
|
|
799
|
+
"originalValue": "hsla(44.7, 97.9%, 63.1%, 0.18)"
|
|
665
800
|
},
|
|
666
801
|
"context.tv.focus.liftShadow": {
|
|
667
802
|
"cssName": "--focus-shadow",
|
|
668
803
|
"type": "string",
|
|
669
804
|
"mode": "tv",
|
|
670
|
-
"value": "0 14px 30px
|
|
671
|
-
"originalValue": "0 14px 30px
|
|
805
|
+
"value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
|
|
806
|
+
"originalValue": "0 14px 30px hsla(0, 0%, 0%, 0.45)"
|
|
672
807
|
},
|
|
673
808
|
"context.tv.channelArt.production.posterBackground": {
|
|
674
809
|
"cssName": "--tv-channel-art-production-poster-bg",
|
|
675
810
|
"type": "color",
|
|
676
811
|
"mode": "tv",
|
|
677
|
-
"value": "
|
|
678
|
-
"originalValue": "
|
|
812
|
+
"value": "hsl(0, 0%, 20%)",
|
|
813
|
+
"originalValue": "hsl(0, 0%, 20%)"
|
|
679
814
|
},
|
|
680
815
|
"context.tv.channelArt.production.splashBackground": {
|
|
681
816
|
"cssName": "--tv-channel-art-production-splash-bg",
|
|
@@ -688,43 +823,43 @@ export const tokens = {
|
|
|
688
823
|
"cssName": "--tv-channel-art-development-bg",
|
|
689
824
|
"type": "color",
|
|
690
825
|
"mode": "tv",
|
|
691
|
-
"value": "
|
|
692
|
-
"originalValue": "
|
|
826
|
+
"value": "hsl(206.7, 78.8%, 52%)",
|
|
827
|
+
"originalValue": "hsl(206.7, 78.8%, 52%)"
|
|
693
828
|
},
|
|
694
829
|
"context.tv.channelArt.development.accent": {
|
|
695
830
|
"cssName": "--tv-channel-art-development-accent",
|
|
696
831
|
"type": "color",
|
|
697
832
|
"mode": "tv",
|
|
698
|
-
"value": "
|
|
699
|
-
"originalValue": "
|
|
833
|
+
"value": "hsl(206.3, 100%, 81.2%)",
|
|
834
|
+
"originalValue": "hsl(206.3, 100%, 81.2%)"
|
|
700
835
|
},
|
|
701
836
|
"context.tv.channelArt.development.grid": {
|
|
702
837
|
"cssName": "--tv-channel-art-development-grid",
|
|
703
838
|
"type": "color",
|
|
704
839
|
"mode": "tv",
|
|
705
|
-
"value": "
|
|
706
|
-
"originalValue": "
|
|
840
|
+
"value": "hsla(0, 0%, 100%, 0.18)",
|
|
841
|
+
"originalValue": "hsla(0, 0%, 100%, 0.18)"
|
|
707
842
|
},
|
|
708
843
|
"context.tv.channelArt.lab.background": {
|
|
709
844
|
"cssName": "--tv-channel-art-lab-bg",
|
|
710
845
|
"type": "color",
|
|
711
846
|
"mode": "tv",
|
|
712
|
-
"value": "
|
|
713
|
-
"originalValue": "
|
|
847
|
+
"value": "hsl(120, 20%, 4.9%)",
|
|
848
|
+
"originalValue": "hsl(120, 20%, 4.9%)"
|
|
714
849
|
},
|
|
715
850
|
"context.tv.channelArt.lab.foreground": {
|
|
716
851
|
"cssName": "--tv-channel-art-lab-fg",
|
|
717
852
|
"type": "color",
|
|
718
853
|
"mode": "tv",
|
|
719
|
-
"value": "
|
|
720
|
-
"originalValue": "
|
|
854
|
+
"value": "hsl(111.1, 100%, 94.7%)",
|
|
855
|
+
"originalValue": "hsl(111.1, 100%, 94.7%)"
|
|
721
856
|
},
|
|
722
857
|
"context.tv.channelArt.lab.accent": {
|
|
723
858
|
"cssName": "--tv-channel-art-lab-accent",
|
|
724
859
|
"type": "color",
|
|
725
860
|
"mode": "tv",
|
|
726
|
-
"value": "
|
|
727
|
-
"originalValue": "
|
|
861
|
+
"value": "hsl(110.6, 100%, 53.9%)",
|
|
862
|
+
"originalValue": "hsl(110.6, 100%, 53.9%)"
|
|
728
863
|
},
|
|
729
864
|
"color.brand.yellow": {
|
|
730
865
|
"cssName": "--yellow-solid",
|
|
@@ -732,7 +867,7 @@ export const tokens = {
|
|
|
732
867
|
"mode": "global",
|
|
733
868
|
"value": "hsl(44.7, 97.9%, 63.1%)",
|
|
734
869
|
"originalValue": "hsl(44.7, 97.9%, 63.1%)",
|
|
735
|
-
"description": "
|
|
870
|
+
"description": "put.io brand yellow (canonical hex #FDCE45). The resting brand fill is the same in light and dark modes."
|
|
736
871
|
},
|
|
737
872
|
"color.neutral.light.bg": {
|
|
738
873
|
"cssName": "--bg",
|
|
@@ -906,491 +1041,493 @@ export const tokens = {
|
|
|
906
1041
|
"cssName": "--green-bg",
|
|
907
1042
|
"type": "color",
|
|
908
1043
|
"mode": "light",
|
|
909
|
-
"value": "hsl(
|
|
910
|
-
"originalValue": "hsl(
|
|
1044
|
+
"value": "hsl(140, 60%, 99%)",
|
|
1045
|
+
"originalValue": "hsl(140, 60%, 99%)"
|
|
911
1046
|
},
|
|
912
1047
|
"color.green.light.bgSecondary": {
|
|
913
1048
|
"cssName": "--green-bg-secondary",
|
|
914
1049
|
"type": "color",
|
|
915
1050
|
"mode": "light",
|
|
916
|
-
"value": "hsl(
|
|
917
|
-
"originalValue": "hsl(
|
|
1051
|
+
"value": "hsl(140, 41%, 97%)",
|
|
1052
|
+
"originalValue": "hsl(140, 41%, 97%)"
|
|
918
1053
|
},
|
|
919
1054
|
"color.green.light.componentBg": {
|
|
920
1055
|
"cssName": "--green-component-bg",
|
|
921
1056
|
"type": "color",
|
|
922
1057
|
"mode": "light",
|
|
923
|
-
"value": "hsl(
|
|
924
|
-
"originalValue": "hsl(
|
|
1058
|
+
"value": "hsl(135, 53%, 93%)",
|
|
1059
|
+
"originalValue": "hsl(135, 53%, 93%)"
|
|
925
1060
|
},
|
|
926
1061
|
"color.green.light.componentBgHover": {
|
|
927
1062
|
"cssName": "--green-component-bg-hover",
|
|
928
1063
|
"type": "color",
|
|
929
1064
|
"mode": "light",
|
|
930
|
-
"value": "hsl(
|
|
931
|
-
"originalValue": "hsl(
|
|
1065
|
+
"value": "hsl(138, 58%, 89%)",
|
|
1066
|
+
"originalValue": "hsl(138, 58%, 89%)"
|
|
932
1067
|
},
|
|
933
1068
|
"color.green.light.componentBgActive": {
|
|
934
1069
|
"cssName": "--green-component-bg-active",
|
|
935
1070
|
"type": "color",
|
|
936
1071
|
"mode": "light",
|
|
937
|
-
"value": "hsl(
|
|
938
|
-
"originalValue": "hsl(
|
|
1072
|
+
"value": "hsl(140, 50%, 84%)",
|
|
1073
|
+
"originalValue": "hsl(140, 50%, 84%)"
|
|
939
1074
|
},
|
|
940
1075
|
"color.green.light.line": {
|
|
941
1076
|
"cssName": "--green-line",
|
|
942
1077
|
"type": "color",
|
|
943
1078
|
"mode": "light",
|
|
944
|
-
"value": "hsl(
|
|
945
|
-
"originalValue": "hsl(
|
|
1079
|
+
"value": "hsl(141, 47%, 77%)",
|
|
1080
|
+
"originalValue": "hsl(141, 47%, 77%)"
|
|
946
1081
|
},
|
|
947
1082
|
"color.green.light.border": {
|
|
948
1083
|
"cssName": "--green-border",
|
|
949
1084
|
"type": "color",
|
|
950
1085
|
"mode": "light",
|
|
951
|
-
"value": "hsl(
|
|
952
|
-
"originalValue": "hsl(
|
|
1086
|
+
"value": "hsl(140, 39%, 68%)",
|
|
1087
|
+
"originalValue": "hsl(140, 39%, 68%)"
|
|
953
1088
|
},
|
|
954
1089
|
"color.green.light.borderHover": {
|
|
955
1090
|
"cssName": "--green-border-hover",
|
|
956
1091
|
"type": "color",
|
|
957
1092
|
"mode": "light",
|
|
958
|
-
"value": "hsl(
|
|
959
|
-
"originalValue": "hsl(
|
|
1093
|
+
"value": "hsl(146, 39%, 55%)",
|
|
1094
|
+
"originalValue": "hsl(146, 39%, 55%)"
|
|
960
1095
|
},
|
|
961
1096
|
"color.green.light.solid": {
|
|
962
1097
|
"cssName": "--green-solid",
|
|
963
1098
|
"type": "color",
|
|
964
1099
|
"mode": "light",
|
|
965
|
-
"value": "hsl(151, 55
|
|
966
|
-
"originalValue": "hsl(151, 55
|
|
1100
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
1101
|
+
"originalValue": "hsl(151, 55%, 41.5%)"
|
|
967
1102
|
},
|
|
968
1103
|
"color.green.light.solidHover": {
|
|
969
1104
|
"cssName": "--green-solid-hover",
|
|
970
1105
|
"type": "color",
|
|
971
1106
|
"mode": "light",
|
|
972
|
-
"value": "hsl(
|
|
973
|
-
"originalValue": "hsl(
|
|
1107
|
+
"value": "hsl(151, 58%, 37%)",
|
|
1108
|
+
"originalValue": "hsl(151, 58%, 37%)"
|
|
974
1109
|
},
|
|
975
1110
|
"color.green.light.textSecondary": {
|
|
976
1111
|
"cssName": "--green-text-secondary",
|
|
977
1112
|
"type": "color",
|
|
978
1113
|
"mode": "light",
|
|
979
|
-
"value": "hsl(
|
|
980
|
-
"originalValue": "hsl(
|
|
1114
|
+
"value": "hsl(155, 100%, 25%)",
|
|
1115
|
+
"originalValue": "hsl(155, 100%, 25%)"
|
|
981
1116
|
},
|
|
982
1117
|
"color.green.light.text": {
|
|
983
1118
|
"cssName": "--green-text",
|
|
984
1119
|
"type": "color",
|
|
985
1120
|
"mode": "light",
|
|
986
|
-
"value": "hsl(
|
|
987
|
-
"originalValue": "hsl(
|
|
1121
|
+
"value": "hsl(146, 35%, 17%)",
|
|
1122
|
+
"originalValue": "hsl(146, 35%, 17%)"
|
|
988
1123
|
},
|
|
989
1124
|
"color.green.dark.bg": {
|
|
990
1125
|
"cssName": "--green-bg",
|
|
991
1126
|
"type": "color",
|
|
992
1127
|
"mode": "dark",
|
|
993
|
-
"value": "hsl(
|
|
994
|
-
"originalValue": "hsl(
|
|
1128
|
+
"value": "hsl(140, 13%, 6%)",
|
|
1129
|
+
"originalValue": "hsl(140, 13%, 6%)"
|
|
995
1130
|
},
|
|
996
1131
|
"color.green.dark.bgSecondary": {
|
|
997
1132
|
"cssName": "--green-bg-secondary",
|
|
998
1133
|
"type": "color",
|
|
999
1134
|
"mode": "dark",
|
|
1000
|
-
"value": "hsl(
|
|
1001
|
-
"originalValue": "hsl(
|
|
1135
|
+
"value": "hsl(149, 21%, 9%)",
|
|
1136
|
+
"originalValue": "hsl(149, 21%, 9%)"
|
|
1002
1137
|
},
|
|
1003
1138
|
"color.green.dark.componentBg": {
|
|
1004
1139
|
"cssName": "--green-component-bg",
|
|
1005
1140
|
"type": "color",
|
|
1006
1141
|
"mode": "dark",
|
|
1007
|
-
"value": "hsl(
|
|
1008
|
-
"originalValue": "hsl(
|
|
1142
|
+
"value": "hsl(151, 35%, 13%)",
|
|
1143
|
+
"originalValue": "hsl(151, 35%, 13%)"
|
|
1009
1144
|
},
|
|
1010
1145
|
"color.green.dark.componentBgHover": {
|
|
1011
1146
|
"cssName": "--green-component-bg-hover",
|
|
1012
1147
|
"type": "color",
|
|
1013
1148
|
"mode": "dark",
|
|
1014
|
-
"value": "hsl(
|
|
1015
|
-
"originalValue": "hsl(
|
|
1149
|
+
"value": "hsl(149, 49%, 16%)",
|
|
1150
|
+
"originalValue": "hsl(149, 49%, 16%)"
|
|
1016
1151
|
},
|
|
1017
1152
|
"color.green.dark.componentBgActive": {
|
|
1018
1153
|
"cssName": "--green-component-bg-active",
|
|
1019
1154
|
"type": "color",
|
|
1020
1155
|
"mode": "dark",
|
|
1021
|
-
"value": "hsl(
|
|
1022
|
-
"originalValue": "hsl(
|
|
1156
|
+
"value": "hsl(149, 46%, 19%)",
|
|
1157
|
+
"originalValue": "hsl(149, 46%, 19%)"
|
|
1023
1158
|
},
|
|
1024
1159
|
"color.green.dark.line": {
|
|
1025
1160
|
"cssName": "--green-line",
|
|
1026
1161
|
"type": "color",
|
|
1027
1162
|
"mode": "dark",
|
|
1028
|
-
"value": "hsl(
|
|
1029
|
-
"originalValue": "hsl(
|
|
1163
|
+
"value": "hsl(146, 42%, 24%)",
|
|
1164
|
+
"originalValue": "hsl(146, 42%, 24%)"
|
|
1030
1165
|
},
|
|
1031
1166
|
"color.green.dark.border": {
|
|
1032
1167
|
"cssName": "--green-border",
|
|
1033
1168
|
"type": "color",
|
|
1034
1169
|
"mode": "dark",
|
|
1035
|
-
"value": "hsl(
|
|
1036
|
-
"originalValue": "hsl(
|
|
1170
|
+
"value": "hsl(146, 41%, 29%)",
|
|
1171
|
+
"originalValue": "hsl(146, 41%, 29%)"
|
|
1037
1172
|
},
|
|
1038
1173
|
"color.green.dark.borderHover": {
|
|
1039
1174
|
"cssName": "--green-border-hover",
|
|
1040
1175
|
"type": "color",
|
|
1041
1176
|
"mode": "dark",
|
|
1042
|
-
"value": "hsl(
|
|
1043
|
-
"originalValue": "hsl(
|
|
1177
|
+
"value": "hsl(148, 43%, 34%)",
|
|
1178
|
+
"originalValue": "hsl(148, 43%, 34%)"
|
|
1044
1179
|
},
|
|
1045
1180
|
"color.green.dark.solid": {
|
|
1046
1181
|
"cssName": "--green-solid",
|
|
1047
1182
|
"type": "color",
|
|
1048
1183
|
"mode": "dark",
|
|
1049
|
-
"value": "hsl(151, 55
|
|
1050
|
-
"originalValue": "hsl(151, 55
|
|
1184
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
1185
|
+
"originalValue": "hsl(151, 55%, 41.5%)"
|
|
1051
1186
|
},
|
|
1052
1187
|
"color.green.dark.solidHover": {
|
|
1053
1188
|
"cssName": "--green-solid-hover",
|
|
1054
1189
|
"type": "color",
|
|
1055
1190
|
"mode": "dark",
|
|
1056
|
-
"value": "hsl(151,
|
|
1057
|
-
"originalValue": "hsl(151,
|
|
1191
|
+
"value": "hsl(151, 68%, 35%)",
|
|
1192
|
+
"originalValue": "hsl(151, 68%, 35%)"
|
|
1058
1193
|
},
|
|
1059
1194
|
"color.green.dark.textSecondary": {
|
|
1060
1195
|
"cssName": "--green-text-secondary",
|
|
1061
1196
|
"type": "color",
|
|
1062
1197
|
"mode": "dark",
|
|
1063
|
-
"value": "hsl(
|
|
1064
|
-
"originalValue": "hsl(
|
|
1198
|
+
"value": "hsl(146, 56%, 60%)",
|
|
1199
|
+
"originalValue": "hsl(146, 56%, 60%)"
|
|
1065
1200
|
},
|
|
1066
1201
|
"color.green.dark.text": {
|
|
1067
1202
|
"cssName": "--green-text",
|
|
1068
1203
|
"type": "color",
|
|
1069
1204
|
"mode": "dark",
|
|
1070
|
-
"value": "hsl(
|
|
1071
|
-
"originalValue": "hsl(
|
|
1205
|
+
"value": "hsl(142, 71%, 82%)",
|
|
1206
|
+
"originalValue": "hsl(142, 71%, 82%)"
|
|
1072
1207
|
},
|
|
1073
1208
|
"color.red.light.bg": {
|
|
1074
1209
|
"cssName": "--red-bg",
|
|
1075
1210
|
"type": "color",
|
|
1076
1211
|
"mode": "light",
|
|
1077
|
-
"value": "hsl(
|
|
1078
|
-
"originalValue": "hsl(
|
|
1212
|
+
"value": "hsl(0, 100%, 99%)",
|
|
1213
|
+
"originalValue": "hsl(0, 100%, 99%)"
|
|
1079
1214
|
},
|
|
1080
1215
|
"color.red.light.bgSecondary": {
|
|
1081
1216
|
"cssName": "--red-bg-secondary",
|
|
1082
1217
|
"type": "color",
|
|
1083
1218
|
"mode": "light",
|
|
1084
|
-
"value": "hsl(
|
|
1085
|
-
"originalValue": "hsl(
|
|
1219
|
+
"value": "hsl(0, 100%, 98%)",
|
|
1220
|
+
"originalValue": "hsl(0, 100%, 98%)"
|
|
1086
1221
|
},
|
|
1087
1222
|
"color.red.light.componentBg": {
|
|
1088
1223
|
"cssName": "--red-component-bg",
|
|
1089
1224
|
"type": "color",
|
|
1090
1225
|
"mode": "light",
|
|
1091
|
-
"value": "hsl(
|
|
1092
|
-
"originalValue": "hsl(
|
|
1226
|
+
"value": "hsl(2, 100%, 96%)",
|
|
1227
|
+
"originalValue": "hsl(2, 100%, 96%)"
|
|
1093
1228
|
},
|
|
1094
1229
|
"color.red.light.componentBgHover": {
|
|
1095
1230
|
"cssName": "--red-component-bg-hover",
|
|
1096
1231
|
"type": "color",
|
|
1097
1232
|
"mode": "light",
|
|
1098
|
-
"value": "hsl(
|
|
1099
|
-
"originalValue": "hsl(
|
|
1233
|
+
"value": "hsl(4, 100%, 93%)",
|
|
1234
|
+
"originalValue": "hsl(4, 100%, 93%)"
|
|
1100
1235
|
},
|
|
1101
1236
|
"color.red.light.componentBgActive": {
|
|
1102
1237
|
"cssName": "--red-component-bg-active",
|
|
1103
1238
|
"type": "color",
|
|
1104
1239
|
"mode": "light",
|
|
1105
|
-
"value": "hsl(
|
|
1106
|
-
"originalValue": "hsl(
|
|
1240
|
+
"value": "hsl(3, 100%, 89%)",
|
|
1241
|
+
"originalValue": "hsl(3, 100%, 89%)"
|
|
1107
1242
|
},
|
|
1108
1243
|
"color.red.light.line": {
|
|
1109
1244
|
"cssName": "--red-line",
|
|
1110
1245
|
"type": "color",
|
|
1111
1246
|
"mode": "light",
|
|
1112
|
-
"value": "hsl(
|
|
1113
|
-
"originalValue": "hsl(
|
|
1247
|
+
"value": "hsl(3, 97%, 86%)",
|
|
1248
|
+
"originalValue": "hsl(3, 97%, 86%)"
|
|
1114
1249
|
},
|
|
1115
1250
|
"color.red.light.border": {
|
|
1116
1251
|
"cssName": "--red-border",
|
|
1117
1252
|
"type": "color",
|
|
1118
1253
|
"mode": "light",
|
|
1119
|
-
"value": "hsl(
|
|
1120
|
-
"originalValue": "hsl(
|
|
1254
|
+
"value": "hsl(2, 81%, 80%)",
|
|
1255
|
+
"originalValue": "hsl(2, 81%, 80%)"
|
|
1121
1256
|
},
|
|
1122
1257
|
"color.red.light.borderHover": {
|
|
1123
1258
|
"cssName": "--red-border-hover",
|
|
1124
1259
|
"type": "color",
|
|
1125
1260
|
"mode": "light",
|
|
1126
|
-
"value": "hsl(
|
|
1127
|
-
"originalValue": "hsl(
|
|
1261
|
+
"value": "hsl(2, 71%, 73%)",
|
|
1262
|
+
"originalValue": "hsl(2, 71%, 73%)"
|
|
1128
1263
|
},
|
|
1129
1264
|
"color.red.light.solid": {
|
|
1130
1265
|
"cssName": "--red-solid",
|
|
1131
1266
|
"type": "color",
|
|
1132
1267
|
"mode": "light",
|
|
1133
|
-
"value": "hsl(358, 75
|
|
1134
|
-
"originalValue": "hsl(358, 75
|
|
1268
|
+
"value": "hsl(358, 75%, 59%)",
|
|
1269
|
+
"originalValue": "hsl(358, 75%, 59%)"
|
|
1135
1270
|
},
|
|
1136
1271
|
"color.red.light.solidHover": {
|
|
1137
1272
|
"cssName": "--red-solid-hover",
|
|
1138
1273
|
"type": "color",
|
|
1139
1274
|
"mode": "light",
|
|
1140
|
-
"value": "hsl(
|
|
1141
|
-
"originalValue": "hsl(
|
|
1275
|
+
"value": "hsl(357, 66%, 53%)",
|
|
1276
|
+
"originalValue": "hsl(357, 66%, 53%)"
|
|
1142
1277
|
},
|
|
1143
1278
|
"color.red.light.textSecondary": {
|
|
1144
1279
|
"cssName": "--red-text-secondary",
|
|
1145
1280
|
"type": "color",
|
|
1146
1281
|
"mode": "light",
|
|
1147
|
-
"value": "hsl(
|
|
1148
|
-
"originalValue": "hsl(
|
|
1282
|
+
"value": "hsl(355, 64%, 49%)",
|
|
1283
|
+
"originalValue": "hsl(355, 64%, 49%)"
|
|
1149
1284
|
},
|
|
1150
1285
|
"color.red.light.text": {
|
|
1151
1286
|
"cssName": "--red-text",
|
|
1152
1287
|
"type": "color",
|
|
1153
1288
|
"mode": "light",
|
|
1154
|
-
"value": "hsl(
|
|
1155
|
-
"originalValue": "hsl(
|
|
1289
|
+
"value": "hsl(358, 62%, 24%)",
|
|
1290
|
+
"originalValue": "hsl(358, 62%, 24%)"
|
|
1156
1291
|
},
|
|
1157
1292
|
"color.red.dark.bg": {
|
|
1158
1293
|
"cssName": "--red-bg",
|
|
1159
1294
|
"type": "color",
|
|
1160
1295
|
"mode": "dark",
|
|
1161
|
-
"value": "hsl(
|
|
1162
|
-
"originalValue": "hsl(
|
|
1296
|
+
"value": "hsl(8, 13%, 7%)",
|
|
1297
|
+
"originalValue": "hsl(8, 13%, 7%)"
|
|
1163
1298
|
},
|
|
1164
1299
|
"color.red.dark.bgSecondary": {
|
|
1165
1300
|
"cssName": "--red-bg-secondary",
|
|
1166
1301
|
"type": "color",
|
|
1167
1302
|
"mode": "dark",
|
|
1168
|
-
"value": "hsl(
|
|
1169
|
-
"originalValue": "hsl(
|
|
1303
|
+
"value": "hsl(4, 28%, 10%)",
|
|
1304
|
+
"originalValue": "hsl(4, 28%, 10%)"
|
|
1170
1305
|
},
|
|
1171
1306
|
"color.red.dark.componentBg": {
|
|
1172
1307
|
"cssName": "--red-component-bg",
|
|
1173
1308
|
"type": "color",
|
|
1174
1309
|
"mode": "dark",
|
|
1175
|
-
"value": "hsl(
|
|
1176
|
-
"originalValue": "hsl(
|
|
1310
|
+
"value": "hsl(0, 55%, 15%)",
|
|
1311
|
+
"originalValue": "hsl(0, 55%, 15%)"
|
|
1177
1312
|
},
|
|
1178
1313
|
"color.red.dark.componentBgHover": {
|
|
1179
1314
|
"cssName": "--red-component-bg-hover",
|
|
1180
1315
|
"type": "color",
|
|
1181
1316
|
"mode": "dark",
|
|
1182
|
-
"value": "hsl(
|
|
1183
|
-
"originalValue": "hsl(
|
|
1317
|
+
"value": "hsl(357, 70%, 19%)",
|
|
1318
|
+
"originalValue": "hsl(357, 70%, 19%)"
|
|
1184
1319
|
},
|
|
1185
1320
|
"color.red.dark.componentBgActive": {
|
|
1186
1321
|
"cssName": "--red-component-bg-active",
|
|
1187
1322
|
"type": "color",
|
|
1188
1323
|
"mode": "dark",
|
|
1189
|
-
"value": "hsl(
|
|
1190
|
-
"originalValue": "hsl(
|
|
1324
|
+
"value": "hsl(358, 62%, 24%)",
|
|
1325
|
+
"originalValue": "hsl(358, 62%, 24%)"
|
|
1191
1326
|
},
|
|
1192
1327
|
"color.red.dark.line": {
|
|
1193
1328
|
"cssName": "--red-line",
|
|
1194
1329
|
"type": "color",
|
|
1195
1330
|
"mode": "dark",
|
|
1196
|
-
"value": "hsl(
|
|
1197
|
-
"originalValue": "hsl(
|
|
1331
|
+
"value": "hsl(359, 52%, 30%)",
|
|
1332
|
+
"originalValue": "hsl(359, 52%, 30%)"
|
|
1198
1333
|
},
|
|
1199
1334
|
"color.red.dark.border": {
|
|
1200
1335
|
"cssName": "--red-border",
|
|
1201
1336
|
"type": "color",
|
|
1202
1337
|
"mode": "dark",
|
|
1203
|
-
"value": "hsl(
|
|
1204
|
-
"originalValue": "hsl(
|
|
1338
|
+
"value": "hsl(0, 46%, 38%)",
|
|
1339
|
+
"originalValue": "hsl(0, 46%, 38%)"
|
|
1205
1340
|
},
|
|
1206
1341
|
"color.red.dark.borderHover": {
|
|
1207
1342
|
"cssName": "--red-border-hover",
|
|
1208
1343
|
"type": "color",
|
|
1209
1344
|
"mode": "dark",
|
|
1210
|
-
"value": "hsl(
|
|
1211
|
-
"originalValue": "hsl(
|
|
1345
|
+
"value": "hsl(359, 45%, 49%)",
|
|
1346
|
+
"originalValue": "hsl(359, 45%, 49%)"
|
|
1212
1347
|
},
|
|
1213
1348
|
"color.red.dark.solid": {
|
|
1214
1349
|
"cssName": "--red-solid",
|
|
1215
1350
|
"type": "color",
|
|
1216
1351
|
"mode": "dark",
|
|
1217
|
-
"value": "hsl(358, 75
|
|
1218
|
-
"originalValue": "hsl(358, 75
|
|
1352
|
+
"value": "hsl(358, 75%, 59%)",
|
|
1353
|
+
"originalValue": "hsl(358, 75%, 59%)"
|
|
1219
1354
|
},
|
|
1220
1355
|
"color.red.dark.solidHover": {
|
|
1221
1356
|
"cssName": "--red-solid-hover",
|
|
1222
1357
|
"type": "color",
|
|
1223
1358
|
"mode": "dark",
|
|
1224
|
-
"value": "hsl(
|
|
1225
|
-
"originalValue": "hsl(
|
|
1359
|
+
"value": "hsl(357, 67%, 53%)",
|
|
1360
|
+
"originalValue": "hsl(357, 67%, 53%)"
|
|
1226
1361
|
},
|
|
1227
1362
|
"color.red.dark.textSecondary": {
|
|
1228
1363
|
"cssName": "--red-text-secondary",
|
|
1229
1364
|
"type": "color",
|
|
1230
1365
|
"mode": "dark",
|
|
1231
|
-
"value": "hsl(
|
|
1232
|
-
"originalValue": "hsl(
|
|
1366
|
+
"value": "hsl(2, 100%, 77%)",
|
|
1367
|
+
"originalValue": "hsl(2, 100%, 77%)"
|
|
1233
1368
|
},
|
|
1234
1369
|
"color.red.dark.text": {
|
|
1235
1370
|
"cssName": "--red-text",
|
|
1236
1371
|
"type": "color",
|
|
1237
1372
|
"mode": "dark",
|
|
1238
|
-
"value": "hsl(
|
|
1239
|
-
"originalValue": "hsl(
|
|
1373
|
+
"value": "hsl(5, 100%, 91%)",
|
|
1374
|
+
"originalValue": "hsl(5, 100%, 91%)"
|
|
1240
1375
|
},
|
|
1241
1376
|
"color.yellow.light.bg": {
|
|
1242
1377
|
"cssName": "--yellow-bg",
|
|
1243
1378
|
"type": "color",
|
|
1244
1379
|
"mode": "light",
|
|
1245
|
-
"value": "hsl(
|
|
1246
|
-
"originalValue": "hsl(
|
|
1380
|
+
"value": "hsl(45, 60%, 99%)",
|
|
1381
|
+
"originalValue": "hsl(45, 60%, 99%)"
|
|
1247
1382
|
},
|
|
1248
1383
|
"color.yellow.light.bgSecondary": {
|
|
1249
1384
|
"cssName": "--yellow-bg-secondary",
|
|
1250
1385
|
"type": "color",
|
|
1251
1386
|
"mode": "light",
|
|
1252
|
-
"value": "hsl(
|
|
1253
|
-
"originalValue": "hsl(
|
|
1387
|
+
"value": "hsl(53, 100%, 96%)",
|
|
1388
|
+
"originalValue": "hsl(53, 100%, 96%)"
|
|
1254
1389
|
},
|
|
1255
1390
|
"color.yellow.light.componentBg": {
|
|
1256
1391
|
"cssName": "--yellow-component-bg",
|
|
1257
1392
|
"type": "color",
|
|
1258
1393
|
"mode": "light",
|
|
1259
|
-
"value": "hsl(
|
|
1260
|
-
"originalValue": "hsl(
|
|
1394
|
+
"value": "hsl(52, 100%, 88%)",
|
|
1395
|
+
"originalValue": "hsl(52, 100%, 88%)"
|
|
1261
1396
|
},
|
|
1262
1397
|
"color.yellow.light.componentBgHover": {
|
|
1263
1398
|
"cssName": "--yellow-component-bg-hover",
|
|
1264
1399
|
"type": "color",
|
|
1265
1400
|
"mode": "light",
|
|
1266
|
-
"value": "hsl(
|
|
1267
|
-
"originalValue": "hsl(
|
|
1401
|
+
"value": "hsl(50, 100%, 82%)",
|
|
1402
|
+
"originalValue": "hsl(50, 100%, 82%)"
|
|
1268
1403
|
},
|
|
1269
1404
|
"color.yellow.light.componentBgActive": {
|
|
1270
1405
|
"cssName": "--yellow-component-bg-active",
|
|
1271
1406
|
"type": "color",
|
|
1272
1407
|
"mode": "light",
|
|
1273
|
-
"value": "hsl(
|
|
1274
|
-
"originalValue": "hsl(
|
|
1408
|
+
"value": "hsl(48, 100%, 76%)",
|
|
1409
|
+
"originalValue": "hsl(48, 100%, 76%)"
|
|
1275
1410
|
},
|
|
1276
1411
|
"color.yellow.light.line": {
|
|
1277
1412
|
"cssName": "--yellow-line",
|
|
1278
1413
|
"type": "color",
|
|
1279
1414
|
"mode": "light",
|
|
1280
|
-
"value": "hsl(
|
|
1281
|
-
"originalValue": "hsl(
|
|
1415
|
+
"value": "hsl(46, 87%, 73%)",
|
|
1416
|
+
"originalValue": "hsl(46, 87%, 73%)"
|
|
1282
1417
|
},
|
|
1283
1418
|
"color.yellow.light.border": {
|
|
1284
1419
|
"cssName": "--yellow-border",
|
|
1285
1420
|
"type": "color",
|
|
1286
1421
|
"mode": "light",
|
|
1287
|
-
"value": "hsl(
|
|
1288
|
-
"originalValue": "hsl(
|
|
1422
|
+
"value": "hsl(45, 67%, 67%)",
|
|
1423
|
+
"originalValue": "hsl(45, 67%, 67%)"
|
|
1289
1424
|
},
|
|
1290
1425
|
"color.yellow.light.borderHover": {
|
|
1291
1426
|
"cssName": "--yellow-border-hover",
|
|
1292
1427
|
"type": "color",
|
|
1293
1428
|
"mode": "light",
|
|
1294
|
-
"value": "hsl(
|
|
1295
|
-
"originalValue": "hsl(
|
|
1429
|
+
"value": "hsl(44, 58%, 56%)",
|
|
1430
|
+
"originalValue": "hsl(44, 58%, 56%)"
|
|
1296
1431
|
},
|
|
1297
1432
|
"color.yellow.light.solidHover": {
|
|
1298
1433
|
"cssName": "--yellow-solid-hover",
|
|
1299
1434
|
"type": "color",
|
|
1300
1435
|
"mode": "light",
|
|
1301
|
-
"value": "hsl(
|
|
1302
|
-
"originalValue": "
|
|
1436
|
+
"value": "hsl(45, 89%, 58%)",
|
|
1437
|
+
"originalValue": "hsl(45, 89%, 58%)",
|
|
1438
|
+
"description": "Primary-button hover yellow for light mode."
|
|
1303
1439
|
},
|
|
1304
1440
|
"color.yellow.light.textSecondary": {
|
|
1305
1441
|
"cssName": "--yellow-text-secondary",
|
|
1306
1442
|
"type": "color",
|
|
1307
1443
|
"mode": "light",
|
|
1308
|
-
"value": "hsl(
|
|
1309
|
-
"originalValue": "hsl(
|
|
1444
|
+
"value": "hsl(46, 100%, 29%)",
|
|
1445
|
+
"originalValue": "hsl(46, 100%, 29%)"
|
|
1310
1446
|
},
|
|
1311
1447
|
"color.yellow.light.text": {
|
|
1312
1448
|
"cssName": "--yellow-text",
|
|
1313
1449
|
"type": "color",
|
|
1314
1450
|
"mode": "light",
|
|
1315
|
-
"value": "hsl(
|
|
1316
|
-
"originalValue": "hsl(
|
|
1451
|
+
"value": "hsl(43, 32%, 21%)",
|
|
1452
|
+
"originalValue": "hsl(43, 32%, 21%)"
|
|
1317
1453
|
},
|
|
1318
1454
|
"color.yellow.dark.bg": {
|
|
1319
1455
|
"cssName": "--yellow-bg",
|
|
1320
1456
|
"type": "color",
|
|
1321
1457
|
"mode": "dark",
|
|
1322
|
-
"value": "hsl(
|
|
1323
|
-
"originalValue": "hsl(
|
|
1458
|
+
"value": "hsl(0, 0%, 0%)",
|
|
1459
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
1324
1460
|
},
|
|
1325
1461
|
"color.yellow.dark.bgSecondary": {
|
|
1326
1462
|
"cssName": "--yellow-bg-secondary",
|
|
1327
1463
|
"type": "color",
|
|
1328
1464
|
"mode": "dark",
|
|
1329
|
-
"value": "hsl(
|
|
1330
|
-
"originalValue": "hsl(
|
|
1465
|
+
"value": "hsl(38, 35%, 6%)",
|
|
1466
|
+
"originalValue": "hsl(38, 35%, 6%)"
|
|
1331
1467
|
},
|
|
1332
1468
|
"color.yellow.dark.componentBg": {
|
|
1333
1469
|
"cssName": "--yellow-component-bg",
|
|
1334
1470
|
"type": "color",
|
|
1335
1471
|
"mode": "dark",
|
|
1336
|
-
"value": "hsl(45,
|
|
1337
|
-
"originalValue": "hsl(45,
|
|
1472
|
+
"value": "hsl(45, 70%, 9%)",
|
|
1473
|
+
"originalValue": "hsl(45, 70%, 9%)"
|
|
1338
1474
|
},
|
|
1339
1475
|
"color.yellow.dark.componentBgHover": {
|
|
1340
1476
|
"cssName": "--yellow-component-bg-hover",
|
|
1341
1477
|
"type": "color",
|
|
1342
1478
|
"mode": "dark",
|
|
1343
|
-
"value": "hsl(
|
|
1344
|
-
"originalValue": "hsl(
|
|
1479
|
+
"value": "hsl(44, 100%, 11%)",
|
|
1480
|
+
"originalValue": "hsl(44, 100%, 11%)"
|
|
1345
1481
|
},
|
|
1346
1482
|
"color.yellow.dark.componentBgActive": {
|
|
1347
1483
|
"cssName": "--yellow-component-bg-active",
|
|
1348
1484
|
"type": "color",
|
|
1349
1485
|
"mode": "dark",
|
|
1350
|
-
"value": "hsl(
|
|
1351
|
-
"originalValue": "hsl(
|
|
1486
|
+
"value": "hsl(44, 100%, 14%)",
|
|
1487
|
+
"originalValue": "hsl(44, 100%, 14%)"
|
|
1352
1488
|
},
|
|
1353
1489
|
"color.yellow.dark.line": {
|
|
1354
1490
|
"cssName": "--yellow-line",
|
|
1355
1491
|
"type": "color",
|
|
1356
1492
|
"mode": "dark",
|
|
1357
|
-
"value": "hsl(
|
|
1358
|
-
"originalValue": "hsl(
|
|
1493
|
+
"value": "hsl(45, 71%, 19%)",
|
|
1494
|
+
"originalValue": "hsl(45, 71%, 19%)"
|
|
1359
1495
|
},
|
|
1360
1496
|
"color.yellow.dark.border": {
|
|
1361
1497
|
"cssName": "--yellow-border",
|
|
1362
1498
|
"type": "color",
|
|
1363
1499
|
"mode": "dark",
|
|
1364
|
-
"value": "hsl(
|
|
1365
|
-
"originalValue": "hsl(
|
|
1500
|
+
"value": "hsl(45, 53%, 26%)",
|
|
1501
|
+
"originalValue": "hsl(45, 53%, 26%)"
|
|
1366
1502
|
},
|
|
1367
1503
|
"color.yellow.dark.borderHover": {
|
|
1368
1504
|
"cssName": "--yellow-border-hover",
|
|
1369
1505
|
"type": "color",
|
|
1370
1506
|
"mode": "dark",
|
|
1371
|
-
"value": "hsl(
|
|
1372
|
-
"originalValue": "hsl(
|
|
1507
|
+
"value": "hsl(45, 49%, 34%)",
|
|
1508
|
+
"originalValue": "hsl(45, 49%, 34%)"
|
|
1373
1509
|
},
|
|
1374
1510
|
"color.yellow.dark.solidHover": {
|
|
1375
1511
|
"cssName": "--yellow-solid-hover",
|
|
1376
1512
|
"type": "color",
|
|
1377
1513
|
"mode": "dark",
|
|
1378
|
-
"value": "hsl(
|
|
1379
|
-
"originalValue": "
|
|
1514
|
+
"value": "hsl(45, 89%, 58%)",
|
|
1515
|
+
"originalValue": "hsl(45, 89%, 58%)",
|
|
1516
|
+
"description": "Primary-button hover yellow for dark mode."
|
|
1380
1517
|
},
|
|
1381
1518
|
"color.yellow.dark.textSecondary": {
|
|
1382
1519
|
"cssName": "--yellow-text-secondary",
|
|
1383
1520
|
"type": "color",
|
|
1384
1521
|
"mode": "dark",
|
|
1385
|
-
"value": "hsl(
|
|
1386
|
-
"originalValue": "hsl(
|
|
1522
|
+
"value": "hsl(45, 100%, 64%)",
|
|
1523
|
+
"originalValue": "hsl(45, 100%, 64%)"
|
|
1387
1524
|
},
|
|
1388
1525
|
"color.yellow.dark.text": {
|
|
1389
1526
|
"cssName": "--yellow-text",
|
|
1390
1527
|
"type": "color",
|
|
1391
1528
|
"mode": "dark",
|
|
1392
|
-
"value": "hsl(
|
|
1393
|
-
"originalValue": "hsl(
|
|
1529
|
+
"value": "hsl(46, 89%, 86%)",
|
|
1530
|
+
"originalValue": "hsl(46, 89%, 86%)"
|
|
1394
1531
|
},
|
|
1395
1532
|
"color.transfer.light.lime3": {
|
|
1396
1533
|
"cssName": "--lime-3",
|
|
@@ -1802,8 +1939,8 @@ export const tokens = {
|
|
|
1802
1939
|
"cssName": "--nav-item-bg",
|
|
1803
1940
|
"type": "color",
|
|
1804
1941
|
"mode": "light",
|
|
1805
|
-
"value": "
|
|
1806
|
-
"originalValue": "
|
|
1942
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
1943
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1807
1944
|
},
|
|
1808
1945
|
"surface.light.navItemBgHover": {
|
|
1809
1946
|
"cssName": "--nav-item-bg-hover",
|
|
@@ -1823,8 +1960,8 @@ export const tokens = {
|
|
|
1823
1960
|
"cssName": "--list-item-bg",
|
|
1824
1961
|
"type": "color",
|
|
1825
1962
|
"mode": "light",
|
|
1826
|
-
"value": "
|
|
1827
|
-
"originalValue": "
|
|
1963
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
1964
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1828
1965
|
},
|
|
1829
1966
|
"surface.light.listItemBgHover": {
|
|
1830
1967
|
"cssName": "--list-item-bg-hover",
|
|
@@ -1907,8 +2044,8 @@ export const tokens = {
|
|
|
1907
2044
|
"cssName": "--transparent",
|
|
1908
2045
|
"type": "color",
|
|
1909
2046
|
"mode": "light",
|
|
1910
|
-
"value": "
|
|
1911
|
-
"originalValue": "
|
|
2047
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
2048
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1912
2049
|
},
|
|
1913
2050
|
"surface.light.overlayInline": {
|
|
1914
2051
|
"cssName": "--overlay-inline",
|
|
@@ -1949,8 +2086,8 @@ export const tokens = {
|
|
|
1949
2086
|
"cssName": "--nav-item-bg",
|
|
1950
2087
|
"type": "color",
|
|
1951
2088
|
"mode": "dark",
|
|
1952
|
-
"value": "
|
|
1953
|
-
"originalValue": "
|
|
2089
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
2090
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1954
2091
|
},
|
|
1955
2092
|
"surface.dark.navItemBgHover": {
|
|
1956
2093
|
"cssName": "--nav-item-bg-hover",
|
|
@@ -1970,8 +2107,8 @@ export const tokens = {
|
|
|
1970
2107
|
"cssName": "--list-item-bg",
|
|
1971
2108
|
"type": "color",
|
|
1972
2109
|
"mode": "dark",
|
|
1973
|
-
"value": "
|
|
1974
|
-
"originalValue": "
|
|
2110
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
2111
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1975
2112
|
},
|
|
1976
2113
|
"surface.dark.listItemBgHover": {
|
|
1977
2114
|
"cssName": "--list-item-bg-hover",
|