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