@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.
@@ -14,9 +14,31 @@
14
14
  }
15
15
  }
16
16
  },
17
+ "backgroundHover": {
18
+ "$type": "color",
19
+ "$value": "{color.yellow.light.solidHover}",
20
+ "$description": "Primary command hover background in light mode.",
21
+ "$extensions": {
22
+ "putio": {
23
+ "cssName": "button-primary-bg-hover",
24
+ "mode": "light"
25
+ }
26
+ }
27
+ },
28
+ "backgroundHoverDark": {
29
+ "$type": "color",
30
+ "$value": "{color.yellow.dark.solidHover}",
31
+ "$description": "Primary command hover background in dark mode.",
32
+ "$extensions": {
33
+ "putio": {
34
+ "cssName": "button-primary-bg-hover",
35
+ "mode": "dark"
36
+ }
37
+ }
38
+ },
17
39
  "foreground": {
18
40
  "$type": "color",
19
- "$value": "hsl(0, 0%, 4.0%)",
41
+ "$value": "{component.alias.primaryForeground}",
20
42
  "$description": "Text or icon color on the yellow primary button.",
21
43
  "$extensions": {
22
44
  "putio": {
@@ -77,6 +99,144 @@
77
99
  }
78
100
  }
79
101
  }
102
+ },
103
+ "success": {
104
+ "background": {
105
+ "$type": "color",
106
+ "$value": "{color.green.light.solid}",
107
+ "$description": "Success command background in light mode.",
108
+ "$extensions": {
109
+ "putio": {
110
+ "cssName": "button-success-bg",
111
+ "mode": "light"
112
+ }
113
+ }
114
+ },
115
+ "backgroundDark": {
116
+ "$type": "color",
117
+ "$value": "{color.green.dark.solid}",
118
+ "$description": "Success command background in dark mode.",
119
+ "$extensions": {
120
+ "putio": {
121
+ "cssName": "button-success-bg",
122
+ "mode": "dark"
123
+ }
124
+ }
125
+ },
126
+ "backgroundHover": {
127
+ "$type": "color",
128
+ "$value": "{color.green.light.solidHover}",
129
+ "$description": "Success command hover background in light mode. Step-10 hover companion to the green solid fill.",
130
+ "$extensions": {
131
+ "putio": {
132
+ "cssName": "button-success-bg-hover",
133
+ "mode": "light"
134
+ }
135
+ }
136
+ },
137
+ "backgroundHoverDark": {
138
+ "$type": "color",
139
+ "$value": "{color.green.dark.solidHover}",
140
+ "$description": "Success command hover background in dark mode. Step-10 hover companion to the green solid fill.",
141
+ "$extensions": {
142
+ "putio": {
143
+ "cssName": "button-success-bg-hover",
144
+ "mode": "dark"
145
+ }
146
+ }
147
+ },
148
+ "foreground": {
149
+ "$type": "color",
150
+ "$value": "{component.alias.successForeground}",
151
+ "$description": "Text or icon color on success command backgrounds.",
152
+ "$extensions": {
153
+ "putio": {
154
+ "cssName": "button-success-fg",
155
+ "mode": "global"
156
+ }
157
+ }
158
+ }
159
+ },
160
+ "danger": {
161
+ "background": {
162
+ "$type": "color",
163
+ "$value": "{color.red.light.solid}",
164
+ "$description": "Destructive command background in light mode.",
165
+ "$extensions": {
166
+ "putio": {
167
+ "cssName": "button-danger-bg",
168
+ "mode": "light"
169
+ }
170
+ }
171
+ },
172
+ "backgroundDark": {
173
+ "$type": "color",
174
+ "$value": "{color.red.dark.solid}",
175
+ "$description": "Destructive command background in dark mode.",
176
+ "$extensions": {
177
+ "putio": {
178
+ "cssName": "button-danger-bg",
179
+ "mode": "dark"
180
+ }
181
+ }
182
+ },
183
+ "backgroundHover": {
184
+ "$type": "color",
185
+ "$value": "{color.red.light.solidHover}",
186
+ "$description": "Destructive command hover background in light mode. Step-10 hover companion to the red solid fill.",
187
+ "$extensions": {
188
+ "putio": {
189
+ "cssName": "button-danger-bg-hover",
190
+ "mode": "light"
191
+ }
192
+ }
193
+ },
194
+ "backgroundHoverDark": {
195
+ "$type": "color",
196
+ "$value": "{color.red.dark.solidHover}",
197
+ "$description": "Destructive command hover background in dark mode. Step-10 hover companion to the red solid fill.",
198
+ "$extensions": {
199
+ "putio": {
200
+ "cssName": "button-danger-bg-hover",
201
+ "mode": "dark"
202
+ }
203
+ }
204
+ },
205
+ "foreground": {
206
+ "$type": "color",
207
+ "$value": "{component.alias.destructiveForeground}",
208
+ "$description": "Text or icon color on destructive command backgrounds.",
209
+ "$extensions": {
210
+ "putio": {
211
+ "cssName": "button-danger-fg",
212
+ "mode": "global"
213
+ }
214
+ }
215
+ }
216
+ },
217
+ "info": {
218
+ "backgroundHover": {
219
+ "$type": "color",
220
+ "$value": "{color.neutral.light.solidHover}",
221
+ "$description": "Neutral solid command hover background in light mode.",
222
+ "$extensions": {
223
+ "putio": {
224
+ "cssName": "button-info-bg-hover",
225
+ "mode": "light"
226
+ }
227
+ }
228
+ },
229
+ "backgroundHoverDark": {
230
+ "$type": "color",
231
+ "$value": "{color.neutral.dark.solidHover}",
232
+ "$description": "Neutral solid command hover background in dark mode.",
233
+ "$extensions": {
234
+ "putio": {
235
+ "cssName": "button-info-bg-hover",
236
+ "mode": "dark"
237
+ }
238
+ }
239
+ }
80
240
  }
81
241
  },
82
242
  "input": {
@@ -491,7 +651,7 @@
491
651
  },
492
652
  "primaryForeground": {
493
653
  "$type": "color",
494
- "$value": "hsl(0, 0%, 0%)",
654
+ "$value": "hsl(38, 65%, 10%)",
495
655
  "$extensions": {
496
656
  "putio": {
497
657
  "cssName": "primary-foreground",
@@ -502,7 +662,7 @@
502
662
  },
503
663
  "success": {
504
664
  "$type": "color",
505
- "$value": "{color.green.light.textSecondary}",
665
+ "$value": "{color.green.light.solid}",
506
666
  "$extensions": {
507
667
  "putio": {
508
668
  "cssName": "success",
@@ -513,7 +673,7 @@
513
673
  },
514
674
  "successDark": {
515
675
  "$type": "color",
516
- "$value": "{color.green.dark.borderHover}",
676
+ "$value": "{color.green.dark.solid}",
517
677
  "$extensions": {
518
678
  "putio": {
519
679
  "cssName": "success",
@@ -535,7 +695,7 @@
535
695
  },
536
696
  "destructive": {
537
697
  "$type": "color",
538
- "$value": "{color.red.light.textSecondary}",
698
+ "$value": "{color.red.light.solid}",
539
699
  "$extensions": {
540
700
  "putio": {
541
701
  "cssName": "destructive",
@@ -546,7 +706,7 @@
546
706
  },
547
707
  "destructiveDark": {
548
708
  "$type": "color",
549
- "$value": "{color.red.dark.borderHover}",
709
+ "$value": "{color.red.dark.solid}",
550
710
  "$extensions": {
551
711
  "putio": {
552
712
  "cssName": "destructive",
@@ -566,13 +726,48 @@
566
726
  }
567
727
  }
568
728
  },
729
+ "invertForeground": {
730
+ "$type": "color",
731
+ "$value": "{surface.light.appBg}",
732
+ "$description": "Text or icon color on invert command backgrounds in light mode.",
733
+ "$extensions": {
734
+ "putio": {
735
+ "cssName": "invert-foreground",
736
+ "mode": "light",
737
+ "figma": false
738
+ }
739
+ }
740
+ },
741
+ "invertForegroundDark": {
742
+ "$type": "color",
743
+ "$value": "{surface.dark.appBg}",
744
+ "$description": "Text or icon color on invert command backgrounds in dark mode.",
745
+ "$extensions": {
746
+ "putio": {
747
+ "cssName": "invert-foreground",
748
+ "mode": "dark",
749
+ "figma": false
750
+ }
751
+ }
752
+ },
569
753
  "solidForeground": {
754
+ "$type": "color",
755
+ "$value": "hsl(0, 0%, 0%)",
756
+ "$extensions": {
757
+ "putio": {
758
+ "cssName": "solid-foreground",
759
+ "mode": "light",
760
+ "figma": false
761
+ }
762
+ }
763
+ },
764
+ "solidForegroundDark": {
570
765
  "$type": "color",
571
766
  "$value": "hsl(0, 0%, 100%)",
572
767
  "$extensions": {
573
768
  "putio": {
574
769
  "cssName": "solid-foreground",
575
- "mode": "global",
770
+ "mode": "dark",
576
771
  "figma": false
577
772
  }
578
773
  }
@@ -887,7 +1082,7 @@
887
1082
  "surface": {
888
1083
  "0": {
889
1084
  "$type": "color",
890
- "$value": "#000",
1085
+ "$value": "hsl(0, 0%, 0%)",
891
1086
  "$extensions": {
892
1087
  "putio": {
893
1088
  "cssName": "surf-0",
@@ -897,7 +1092,7 @@
897
1092
  },
898
1093
  "1": {
899
1094
  "$type": "color",
900
- "$value": "#0a0a0a",
1095
+ "$value": "hsl(0, 0%, 3.9%)",
901
1096
  "$extensions": {
902
1097
  "putio": {
903
1098
  "cssName": "surf-1",
@@ -907,7 +1102,7 @@
907
1102
  },
908
1103
  "2": {
909
1104
  "$type": "color",
910
- "$value": "#161616",
1105
+ "$value": "hsl(0, 0%, 8.6%)",
911
1106
  "$extensions": {
912
1107
  "putio": {
913
1108
  "cssName": "surf-2",
@@ -917,7 +1112,7 @@
917
1112
  },
918
1113
  "3": {
919
1114
  "$type": "color",
920
- "$value": "#1f1f1f",
1115
+ "$value": "hsl(0, 0%, 12.2%)",
921
1116
  "$extensions": {
922
1117
  "putio": {
923
1118
  "cssName": "surf-3",
@@ -929,7 +1124,7 @@
929
1124
  "text": {
930
1125
  "primary": {
931
1126
  "$type": "color",
932
- "$value": "#f4f4f4",
1127
+ "$value": "hsl(0, 0%, 95.7%)",
933
1128
  "$extensions": {
934
1129
  "putio": {
935
1130
  "cssName": "text-1",
@@ -939,7 +1134,7 @@
939
1134
  },
940
1135
  "secondary": {
941
1136
  "$type": "color",
942
- "$value": "rgba(244,244,244,0.62)",
1137
+ "$value": "hsla(0, 0%, 95.7%, 0.62)",
943
1138
  "$extensions": {
944
1139
  "putio": {
945
1140
  "cssName": "text-2",
@@ -949,7 +1144,7 @@
949
1144
  },
950
1145
  "tertiary": {
951
1146
  "$type": "color",
952
- "$value": "rgba(244,244,244,0.38)",
1147
+ "$value": "hsla(0, 0%, 95.7%, 0.38)",
953
1148
  "$extensions": {
954
1149
  "putio": {
955
1150
  "cssName": "text-3",
@@ -961,7 +1156,7 @@
961
1156
  "glass": {
962
1157
  "1": {
963
1158
  "$type": "color",
964
- "$value": "rgba(255,255,255,0.06)",
1159
+ "$value": "hsla(0, 0%, 100%, 0.06)",
965
1160
  "$extensions": {
966
1161
  "putio": {
967
1162
  "cssName": "glass-1-bg",
@@ -971,7 +1166,7 @@
971
1166
  },
972
1167
  "2": {
973
1168
  "$type": "color",
974
- "$value": "rgba(255,255,255,0.10)",
1169
+ "$value": "hsla(0, 0%, 100%, 0.10)",
975
1170
  "$extensions": {
976
1171
  "putio": {
977
1172
  "cssName": "glass-2-bg",
@@ -981,7 +1176,7 @@
981
1176
  },
982
1177
  "3": {
983
1178
  "$type": "color",
984
- "$value": "rgba(255,255,255,0.14)",
1179
+ "$value": "hsla(0, 0%, 100%, 0.14)",
985
1180
  "$extensions": {
986
1181
  "putio": {
987
1182
  "cssName": "glass-3-bg",
@@ -991,7 +1186,7 @@
991
1186
  },
992
1187
  "border": {
993
1188
  "$type": "color",
994
- "$value": "rgba(255,255,255,0.12)",
1189
+ "$value": "hsla(0, 0%, 100%, 0.12)",
995
1190
  "$extensions": {
996
1191
  "putio": {
997
1192
  "cssName": "glass-border",
@@ -1001,7 +1196,7 @@
1001
1196
  },
1002
1197
  "borderStrong": {
1003
1198
  "$type": "color",
1004
- "$value": "rgba(255,255,255,0.22)",
1199
+ "$value": "hsla(0, 0%, 100%, 0.22)",
1005
1200
  "$extensions": {
1006
1201
  "putio": {
1007
1202
  "cssName": "glass-border-strong",
@@ -1013,7 +1208,7 @@
1013
1208
  "focus": {
1014
1209
  "ring": {
1015
1210
  "$type": "color",
1016
- "$value": "rgba(253,206,69,0.18)",
1211
+ "$value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
1017
1212
  "$extensions": {
1018
1213
  "putio": {
1019
1214
  "cssName": "focus-ring",
@@ -1023,7 +1218,7 @@
1023
1218
  },
1024
1219
  "liftShadow": {
1025
1220
  "$type": "string",
1026
- "$value": "0 14px 30px rgba(0,0,0,0.45)",
1221
+ "$value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
1027
1222
  "$extensions": {
1028
1223
  "putio": {
1029
1224
  "cssName": "focus-shadow",
@@ -1036,7 +1231,7 @@
1036
1231
  "production": {
1037
1232
  "posterBackground": {
1038
1233
  "$type": "color",
1039
- "$value": "#333333",
1234
+ "$value": "hsl(0, 0%, 20%)",
1040
1235
  "$extensions": {
1041
1236
  "putio": {
1042
1237
  "cssName": "tv-channel-art-production-poster-bg",
@@ -1058,7 +1253,7 @@
1058
1253
  "development": {
1059
1254
  "background": {
1060
1255
  "$type": "color",
1061
- "$value": "#248FE5",
1256
+ "$value": "hsl(206.7, 78.8%, 52%)",
1062
1257
  "$extensions": {
1063
1258
  "putio": {
1064
1259
  "cssName": "tv-channel-art-development-bg",
@@ -1068,7 +1263,7 @@
1068
1263
  },
1069
1264
  "accent": {
1070
1265
  "$type": "color",
1071
- "$value": "#9FD5FF",
1266
+ "$value": "hsl(206.3, 100%, 81.2%)",
1072
1267
  "$extensions": {
1073
1268
  "putio": {
1074
1269
  "cssName": "tv-channel-art-development-accent",
@@ -1078,7 +1273,7 @@
1078
1273
  },
1079
1274
  "grid": {
1080
1275
  "$type": "color",
1081
- "$value": "rgba(255,255,255,0.18)",
1276
+ "$value": "hsla(0, 0%, 100%, 0.18)",
1082
1277
  "$extensions": {
1083
1278
  "putio": {
1084
1279
  "cssName": "tv-channel-art-development-grid",
@@ -1090,7 +1285,7 @@
1090
1285
  "lab": {
1091
1286
  "background": {
1092
1287
  "$type": "color",
1093
- "$value": "#0a0f0a",
1288
+ "$value": "hsl(120, 20%, 4.9%)",
1094
1289
  "$extensions": {
1095
1290
  "putio": {
1096
1291
  "cssName": "tv-channel-art-lab-bg",
@@ -1100,7 +1295,7 @@
1100
1295
  },
1101
1296
  "foreground": {
1102
1297
  "$type": "color",
1103
- "$value": "#e8ffe4",
1298
+ "$value": "hsl(111.1, 100%, 94.7%)",
1104
1299
  "$extensions": {
1105
1300
  "putio": {
1106
1301
  "cssName": "tv-channel-art-lab-fg",
@@ -1110,7 +1305,7 @@
1110
1305
  },
1111
1306
  "accent": {
1112
1307
  "$type": "color",
1113
- "$value": "#39FF14",
1308
+ "$value": "hsl(110.6, 100%, 53.9%)",
1114
1309
  "$extensions": {
1115
1310
  "putio": {
1116
1311
  "cssName": "tv-channel-art-lab-accent",
@@ -1127,7 +1322,7 @@
1127
1322
  "yellow": {
1128
1323
  "$type": "color",
1129
1324
  "$value": "hsl(44.7, 97.9%, 63.1%)",
1130
- "$description": "Sacred put.io brand yellow (canonical hex #FDCE45). Do not change or tint.",
1325
+ "$description": "put.io brand yellow (canonical hex #FDCE45). The resting brand fill is the same in light and dark modes.",
1131
1326
  "$extensions": {
1132
1327
  "putio": {
1133
1328
  "cssName": "yellow-solid",
@@ -1387,7 +1582,7 @@
1387
1582
  "light": {
1388
1583
  "bg": {
1389
1584
  "$type": "color",
1390
- "$value": "hsl(136, 50.0%, 98.9%)",
1585
+ "$value": "hsl(140, 60%, 99%)",
1391
1586
  "$extensions": {
1392
1587
  "putio": {
1393
1588
  "cssName": "green-bg",
@@ -1397,7 +1592,7 @@
1397
1592
  },
1398
1593
  "bgSecondary": {
1399
1594
  "$type": "color",
1400
- "$value": "hsl(138, 62.5%, 96.9%)",
1595
+ "$value": "hsl(140, 41%, 97%)",
1401
1596
  "$extensions": {
1402
1597
  "putio": {
1403
1598
  "cssName": "green-bg-secondary",
@@ -1407,7 +1602,7 @@
1407
1602
  },
1408
1603
  "componentBg": {
1409
1604
  "$type": "color",
1410
- "$value": "hsl(139, 55.2%, 94.5%)",
1605
+ "$value": "hsl(135, 53%, 93%)",
1411
1606
  "$extensions": {
1412
1607
  "putio": {
1413
1608
  "cssName": "green-component-bg",
@@ -1417,7 +1612,7 @@
1417
1612
  },
1418
1613
  "componentBgHover": {
1419
1614
  "$type": "color",
1420
- "$value": "hsl(140, 48.7%, 91.0%)",
1615
+ "$value": "hsl(138, 58%, 89%)",
1421
1616
  "$extensions": {
1422
1617
  "putio": {
1423
1618
  "cssName": "green-component-bg-hover",
@@ -1427,7 +1622,7 @@
1427
1622
  },
1428
1623
  "componentBgActive": {
1429
1624
  "$type": "color",
1430
- "$value": "hsl(141, 43.7%, 86.0%)",
1625
+ "$value": "hsl(140, 50%, 84%)",
1431
1626
  "$extensions": {
1432
1627
  "putio": {
1433
1628
  "cssName": "green-component-bg-active",
@@ -1437,7 +1632,7 @@
1437
1632
  },
1438
1633
  "line": {
1439
1634
  "$type": "color",
1440
- "$value": "hsl(143, 40.3%, 79.0%)",
1635
+ "$value": "hsl(141, 47%, 77%)",
1441
1636
  "$extensions": {
1442
1637
  "putio": {
1443
1638
  "cssName": "green-line",
@@ -1447,7 +1642,7 @@
1447
1642
  },
1448
1643
  "border": {
1449
1644
  "$type": "color",
1450
- "$value": "hsl(146, 38.5%, 69.0%)",
1645
+ "$value": "hsl(140, 39%, 68%)",
1451
1646
  "$extensions": {
1452
1647
  "putio": {
1453
1648
  "cssName": "green-border",
@@ -1457,7 +1652,7 @@
1457
1652
  },
1458
1653
  "borderHover": {
1459
1654
  "$type": "color",
1460
- "$value": "hsl(151, 40.2%, 54.1%)",
1655
+ "$value": "hsl(146, 39%, 55%)",
1461
1656
  "$extensions": {
1462
1657
  "putio": {
1463
1658
  "cssName": "green-border-hover",
@@ -1467,7 +1662,7 @@
1467
1662
  },
1468
1663
  "solid": {
1469
1664
  "$type": "color",
1470
- "$value": "hsl(151, 55.0%, 41.5%)",
1665
+ "$value": "hsl(151, 55%, 41.5%)",
1471
1666
  "$extensions": {
1472
1667
  "putio": {
1473
1668
  "cssName": "green-solid",
@@ -1477,7 +1672,7 @@
1477
1672
  },
1478
1673
  "solidHover": {
1479
1674
  "$type": "color",
1480
- "$value": "hsl(152, 57.5%, 37.6%)",
1675
+ "$value": "hsl(151, 58%, 37%)",
1481
1676
  "$extensions": {
1482
1677
  "putio": {
1483
1678
  "cssName": "green-solid-hover",
@@ -1487,7 +1682,7 @@
1487
1682
  },
1488
1683
  "textSecondary": {
1489
1684
  "$type": "color",
1490
- "$value": "hsl(153, 67.0%, 28.5%)",
1685
+ "$value": "hsl(155, 100%, 25%)",
1491
1686
  "$extensions": {
1492
1687
  "putio": {
1493
1688
  "cssName": "green-text-secondary",
@@ -1497,7 +1692,7 @@
1497
1692
  },
1498
1693
  "text": {
1499
1694
  "$type": "color",
1500
- "$value": "hsl(155, 40.0%, 14.0%)",
1695
+ "$value": "hsl(146, 35%, 17%)",
1501
1696
  "$extensions": {
1502
1697
  "putio": {
1503
1698
  "cssName": "green-text",
@@ -1509,7 +1704,7 @@
1509
1704
  "dark": {
1510
1705
  "bg": {
1511
1706
  "$type": "color",
1512
- "$value": "hsl(146, 30.0%, 7.4%)",
1707
+ "$value": "hsl(140, 13%, 6%)",
1513
1708
  "$extensions": {
1514
1709
  "putio": {
1515
1710
  "cssName": "green-bg",
@@ -1519,7 +1714,7 @@
1519
1714
  },
1520
1715
  "bgSecondary": {
1521
1716
  "$type": "color",
1522
- "$value": "hsl(155, 44.2%, 8.4%)",
1717
+ "$value": "hsl(149, 21%, 9%)",
1523
1718
  "$extensions": {
1524
1719
  "putio": {
1525
1720
  "cssName": "green-bg-secondary",
@@ -1529,7 +1724,7 @@
1529
1724
  },
1530
1725
  "componentBg": {
1531
1726
  "$type": "color",
1532
- "$value": "hsl(155, 46.7%, 10.9%)",
1727
+ "$value": "hsl(151, 35%, 13%)",
1533
1728
  "$extensions": {
1534
1729
  "putio": {
1535
1730
  "cssName": "green-component-bg",
@@ -1539,7 +1734,7 @@
1539
1734
  },
1540
1735
  "componentBgHover": {
1541
1736
  "$type": "color",
1542
- "$value": "hsl(154, 48.4%, 12.9%)",
1737
+ "$value": "hsl(149, 49%, 16%)",
1543
1738
  "$extensions": {
1544
1739
  "putio": {
1545
1740
  "cssName": "green-component-bg-hover",
@@ -1549,7 +1744,7 @@
1549
1744
  },
1550
1745
  "componentBgActive": {
1551
1746
  "$type": "color",
1552
- "$value": "hsl(154, 49.7%, 14.9%)",
1747
+ "$value": "hsl(149, 46%, 19%)",
1553
1748
  "$extensions": {
1554
1749
  "putio": {
1555
1750
  "cssName": "green-component-bg-active",
@@ -1559,7 +1754,7 @@
1559
1754
  },
1560
1755
  "line": {
1561
1756
  "$type": "color",
1562
- "$value": "hsl(154, 50.9%, 17.6%)",
1757
+ "$value": "hsl(146, 42%, 24%)",
1563
1758
  "$extensions": {
1564
1759
  "putio": {
1565
1760
  "cssName": "green-line",
@@ -1569,7 +1764,7 @@
1569
1764
  },
1570
1765
  "border": {
1571
1766
  "$type": "color",
1572
- "$value": "hsl(153, 51.8%, 21.8%)",
1767
+ "$value": "hsl(146, 41%, 29%)",
1573
1768
  "$extensions": {
1574
1769
  "putio": {
1575
1770
  "cssName": "green-border",
@@ -1579,7 +1774,7 @@
1579
1774
  },
1580
1775
  "borderHover": {
1581
1776
  "$type": "color",
1582
- "$value": "hsl(151, 51.7%, 28.4%)",
1777
+ "$value": "hsl(148, 43%, 34%)",
1583
1778
  "$extensions": {
1584
1779
  "putio": {
1585
1780
  "cssName": "green-border-hover",
@@ -1589,7 +1784,7 @@
1589
1784
  },
1590
1785
  "solid": {
1591
1786
  "$type": "color",
1592
- "$value": "hsl(151, 55.0%, 41.5%)",
1787
+ "$value": "hsl(151, 55%, 41.5%)",
1593
1788
  "$extensions": {
1594
1789
  "putio": {
1595
1790
  "cssName": "green-solid",
@@ -1599,7 +1794,7 @@
1599
1794
  },
1600
1795
  "solidHover": {
1601
1796
  "$type": "color",
1602
- "$value": "hsl(151, 49.3%, 46.5%)",
1797
+ "$value": "hsl(151, 68%, 35%)",
1603
1798
  "$extensions": {
1604
1799
  "putio": {
1605
1800
  "cssName": "green-solid-hover",
@@ -1609,7 +1804,7 @@
1609
1804
  },
1610
1805
  "textSecondary": {
1611
1806
  "$type": "color",
1612
- "$value": "hsl(151, 50.0%, 53.2%)",
1807
+ "$value": "hsl(146, 56%, 60%)",
1613
1808
  "$extensions": {
1614
1809
  "putio": {
1615
1810
  "cssName": "green-text-secondary",
@@ -1619,7 +1814,7 @@
1619
1814
  },
1620
1815
  "text": {
1621
1816
  "$type": "color",
1622
- "$value": "hsl(137, 72.0%, 94.0%)",
1817
+ "$value": "hsl(142, 71%, 82%)",
1623
1818
  "$extensions": {
1624
1819
  "putio": {
1625
1820
  "cssName": "green-text",
@@ -1633,7 +1828,7 @@
1633
1828
  "light": {
1634
1829
  "bg": {
1635
1830
  "$type": "color",
1636
- "$value": "hsl(359, 100%, 99.4%)",
1831
+ "$value": "hsl(0, 100%, 99%)",
1637
1832
  "$extensions": {
1638
1833
  "putio": {
1639
1834
  "cssName": "red-bg",
@@ -1643,7 +1838,7 @@
1643
1838
  },
1644
1839
  "bgSecondary": {
1645
1840
  "$type": "color",
1646
- "$value": "hsl(359, 100%, 98.6%)",
1841
+ "$value": "hsl(0, 100%, 98%)",
1647
1842
  "$extensions": {
1648
1843
  "putio": {
1649
1844
  "cssName": "red-bg-secondary",
@@ -1653,7 +1848,7 @@
1653
1848
  },
1654
1849
  "componentBg": {
1655
1850
  "$type": "color",
1656
- "$value": "hsl(360, 100%, 96.8%)",
1851
+ "$value": "hsl(2, 100%, 96%)",
1657
1852
  "$extensions": {
1658
1853
  "putio": {
1659
1854
  "cssName": "red-component-bg",
@@ -1663,7 +1858,7 @@
1663
1858
  },
1664
1859
  "componentBgHover": {
1665
1860
  "$type": "color",
1666
- "$value": "hsl(360, 97.9%, 94.8%)",
1861
+ "$value": "hsl(4, 100%, 93%)",
1667
1862
  "$extensions": {
1668
1863
  "putio": {
1669
1864
  "cssName": "red-component-bg-hover",
@@ -1673,7 +1868,7 @@
1673
1868
  },
1674
1869
  "componentBgActive": {
1675
1870
  "$type": "color",
1676
- "$value": "hsl(360, 90.2%, 91.9%)",
1871
+ "$value": "hsl(3, 100%, 89%)",
1677
1872
  "$extensions": {
1678
1873
  "putio": {
1679
1874
  "cssName": "red-component-bg-active",
@@ -1683,7 +1878,7 @@
1683
1878
  },
1684
1879
  "line": {
1685
1880
  "$type": "color",
1686
- "$value": "hsl(360, 81.7%, 87.8%)",
1881
+ "$value": "hsl(3, 97%, 86%)",
1687
1882
  "$extensions": {
1688
1883
  "putio": {
1689
1884
  "cssName": "red-line",
@@ -1693,7 +1888,7 @@
1693
1888
  },
1694
1889
  "border": {
1695
1890
  "$type": "color",
1696
- "$value": "hsl(359, 74.2%, 81.7%)",
1891
+ "$value": "hsl(2, 81%, 80%)",
1697
1892
  "$extensions": {
1698
1893
  "putio": {
1699
1894
  "cssName": "red-border",
@@ -1703,7 +1898,7 @@
1703
1898
  },
1704
1899
  "borderHover": {
1705
1900
  "$type": "color",
1706
- "$value": "hsl(359, 69.5%, 74.3%)",
1901
+ "$value": "hsl(2, 71%, 73%)",
1707
1902
  "$extensions": {
1708
1903
  "putio": {
1709
1904
  "cssName": "red-border-hover",
@@ -1713,7 +1908,7 @@
1713
1908
  },
1714
1909
  "solid": {
1715
1910
  "$type": "color",
1716
- "$value": "hsl(358, 75.0%, 59.0%)",
1911
+ "$value": "hsl(358, 75%, 59%)",
1717
1912
  "$extensions": {
1718
1913
  "putio": {
1719
1914
  "cssName": "red-solid",
@@ -1723,7 +1918,7 @@
1723
1918
  },
1724
1919
  "solidHover": {
1725
1920
  "$type": "color",
1726
- "$value": "hsl(358, 69.4%, 55.2%)",
1921
+ "$value": "hsl(357, 66%, 53%)",
1727
1922
  "$extensions": {
1728
1923
  "putio": {
1729
1924
  "cssName": "red-solid-hover",
@@ -1733,7 +1928,7 @@
1733
1928
  },
1734
1929
  "textSecondary": {
1735
1930
  "$type": "color",
1736
- "$value": "hsl(358, 65.0%, 48.7%)",
1931
+ "$value": "hsl(355, 64%, 49%)",
1737
1932
  "$extensions": {
1738
1933
  "putio": {
1739
1934
  "cssName": "red-text-secondary",
@@ -1743,7 +1938,7 @@
1743
1938
  },
1744
1939
  "text": {
1745
1940
  "$type": "color",
1746
- "$value": "hsl(354, 50.0%, 14.6%)",
1941
+ "$value": "hsl(358, 62%, 24%)",
1747
1942
  "$extensions": {
1748
1943
  "putio": {
1749
1944
  "cssName": "red-text",
@@ -1755,7 +1950,7 @@
1755
1950
  "dark": {
1756
1951
  "bg": {
1757
1952
  "$type": "color",
1758
- "$value": "hsl(353, 23.0%, 9.8%)",
1953
+ "$value": "hsl(8, 13%, 7%)",
1759
1954
  "$extensions": {
1760
1955
  "putio": {
1761
1956
  "cssName": "red-bg",
@@ -1765,7 +1960,7 @@
1765
1960
  },
1766
1961
  "bgSecondary": {
1767
1962
  "$type": "color",
1768
- "$value": "hsl(357, 34.4%, 12.0%)",
1963
+ "$value": "hsl(4, 28%, 10%)",
1769
1964
  "$extensions": {
1770
1965
  "putio": {
1771
1966
  "cssName": "red-bg-secondary",
@@ -1775,7 +1970,7 @@
1775
1970
  },
1776
1971
  "componentBg": {
1777
1972
  "$type": "color",
1778
- "$value": "hsl(356, 43.4%, 16.4%)",
1973
+ "$value": "hsl(0, 55%, 15%)",
1779
1974
  "$extensions": {
1780
1975
  "putio": {
1781
1976
  "cssName": "red-component-bg",
@@ -1785,7 +1980,7 @@
1785
1980
  },
1786
1981
  "componentBgHover": {
1787
1982
  "$type": "color",
1788
- "$value": "hsl(356, 47.6%, 19.2%)",
1983
+ "$value": "hsl(357, 70%, 19%)",
1789
1984
  "$extensions": {
1790
1985
  "putio": {
1791
1986
  "cssName": "red-component-bg-hover",
@@ -1795,7 +1990,7 @@
1795
1990
  },
1796
1991
  "componentBgActive": {
1797
1992
  "$type": "color",
1798
- "$value": "hsl(356, 51.1%, 21.9%)",
1993
+ "$value": "hsl(358, 62%, 24%)",
1799
1994
  "$extensions": {
1800
1995
  "putio": {
1801
1996
  "cssName": "red-component-bg-active",
@@ -1805,7 +2000,7 @@
1805
2000
  },
1806
2001
  "line": {
1807
2002
  "$type": "color",
1808
- "$value": "hsl(356, 55.2%, 25.9%)",
2003
+ "$value": "hsl(359, 52%, 30%)",
1809
2004
  "$extensions": {
1810
2005
  "putio": {
1811
2006
  "cssName": "red-line",
@@ -1815,7 +2010,7 @@
1815
2010
  },
1816
2011
  "border": {
1817
2012
  "$type": "color",
1818
- "$value": "hsl(357, 60.2%, 31.8%)",
2013
+ "$value": "hsl(0, 46%, 38%)",
1819
2014
  "$extensions": {
1820
2015
  "putio": {
1821
2016
  "cssName": "red-border",
@@ -1825,7 +2020,7 @@
1825
2020
  },
1826
2021
  "borderHover": {
1827
2022
  "$type": "color",
1828
- "$value": "hsl(358, 65.0%, 40.4%)",
2023
+ "$value": "hsl(359, 45%, 49%)",
1829
2024
  "$extensions": {
1830
2025
  "putio": {
1831
2026
  "cssName": "red-border-hover",
@@ -1835,7 +2030,7 @@
1835
2030
  },
1836
2031
  "solid": {
1837
2032
  "$type": "color",
1838
- "$value": "hsl(358, 75.0%, 59.0%)",
2033
+ "$value": "hsl(358, 75%, 59%)",
1839
2034
  "$extensions": {
1840
2035
  "putio": {
1841
2036
  "cssName": "red-solid",
@@ -1845,7 +2040,7 @@
1845
2040
  },
1846
2041
  "solidHover": {
1847
2042
  "$type": "color",
1848
- "$value": "hsl(358, 85.3%, 64.0%)",
2043
+ "$value": "hsl(357, 67%, 53%)",
1849
2044
  "$extensions": {
1850
2045
  "putio": {
1851
2046
  "cssName": "red-solid-hover",
@@ -1855,7 +2050,7 @@
1855
2050
  },
1856
2051
  "textSecondary": {
1857
2052
  "$type": "color",
1858
- "$value": "hsl(358, 100%, 69.5%)",
2053
+ "$value": "hsl(2, 100%, 77%)",
1859
2054
  "$extensions": {
1860
2055
  "putio": {
1861
2056
  "cssName": "red-text-secondary",
@@ -1865,7 +2060,7 @@
1865
2060
  },
1866
2061
  "text": {
1867
2062
  "$type": "color",
1868
- "$value": "hsl(351, 89.0%, 96.0%)",
2063
+ "$value": "hsl(5, 100%, 91%)",
1869
2064
  "$extensions": {
1870
2065
  "putio": {
1871
2066
  "cssName": "red-text",
@@ -1879,7 +2074,7 @@
1879
2074
  "light": {
1880
2075
  "bg": {
1881
2076
  "$type": "color",
1882
- "$value": "hsl(60, 54.0%, 98.5%)",
2077
+ "$value": "hsl(45, 60%, 99%)",
1883
2078
  "$extensions": {
1884
2079
  "putio": {
1885
2080
  "cssName": "yellow-bg",
@@ -1889,7 +2084,7 @@
1889
2084
  },
1890
2085
  "bgSecondary": {
1891
2086
  "$type": "color",
1892
- "$value": "hsl(52, 100%, 95.5%)",
2087
+ "$value": "hsl(53, 100%, 96%)",
1893
2088
  "$extensions": {
1894
2089
  "putio": {
1895
2090
  "cssName": "yellow-bg-secondary",
@@ -1899,7 +2094,7 @@
1899
2094
  },
1900
2095
  "componentBg": {
1901
2096
  "$type": "color",
1902
- "$value": "hsl(55, 100%, 90.9%)",
2097
+ "$value": "hsl(52, 100%, 88%)",
1903
2098
  "$extensions": {
1904
2099
  "putio": {
1905
2100
  "cssName": "yellow-component-bg",
@@ -1909,7 +2104,7 @@
1909
2104
  },
1910
2105
  "componentBgHover": {
1911
2106
  "$type": "color",
1912
- "$value": "hsl(54, 100%, 86.6%)",
2107
+ "$value": "hsl(50, 100%, 82%)",
1913
2108
  "$extensions": {
1914
2109
  "putio": {
1915
2110
  "cssName": "yellow-component-bg-hover",
@@ -1919,7 +2114,7 @@
1919
2114
  },
1920
2115
  "componentBgActive": {
1921
2116
  "$type": "color",
1922
- "$value": "hsl(52, 97.9%, 82.0%)",
2117
+ "$value": "hsl(48, 100%, 76%)",
1923
2118
  "$extensions": {
1924
2119
  "putio": {
1925
2120
  "cssName": "yellow-component-bg-active",
@@ -1929,7 +2124,7 @@
1929
2124
  },
1930
2125
  "line": {
1931
2126
  "$type": "color",
1932
- "$value": "hsl(50, 89.4%, 76.1%)",
2127
+ "$value": "hsl(46, 87%, 73%)",
1933
2128
  "$extensions": {
1934
2129
  "putio": {
1935
2130
  "cssName": "yellow-line",
@@ -1939,7 +2134,7 @@
1939
2134
  },
1940
2135
  "border": {
1941
2136
  "$type": "color",
1942
- "$value": "hsl(47, 80.4%, 68.0%)",
2137
+ "$value": "hsl(45, 67%, 67%)",
1943
2138
  "$extensions": {
1944
2139
  "putio": {
1945
2140
  "cssName": "yellow-border",
@@ -1949,7 +2144,7 @@
1949
2144
  },
1950
2145
  "borderHover": {
1951
2146
  "$type": "color",
1952
- "$value": "hsl(48, 100%, 46.1%)",
2147
+ "$value": "hsl(44, 58%, 56%)",
1953
2148
  "$extensions": {
1954
2149
  "putio": {
1955
2150
  "cssName": "yellow-border-hover",
@@ -1959,7 +2154,8 @@
1959
2154
  },
1960
2155
  "solidHover": {
1961
2156
  "$type": "color",
1962
- "$value": "{color.brand.yellow}",
2157
+ "$value": "hsl(45, 89%, 58%)",
2158
+ "$description": "Primary-button hover yellow for light mode.",
1963
2159
  "$extensions": {
1964
2160
  "putio": {
1965
2161
  "cssName": "yellow-solid-hover",
@@ -1969,7 +2165,7 @@
1969
2165
  },
1970
2166
  "textSecondary": {
1971
2167
  "$type": "color",
1972
- "$value": "hsl(42, 100%, 29.0%)",
2168
+ "$value": "hsl(46, 100%, 29%)",
1973
2169
  "$extensions": {
1974
2170
  "putio": {
1975
2171
  "cssName": "yellow-text-secondary",
@@ -1979,7 +2175,7 @@
1979
2175
  },
1980
2176
  "text": {
1981
2177
  "$type": "color",
1982
- "$value": "hsl(40, 55.0%, 13.5%)",
2178
+ "$value": "hsl(43, 32%, 21%)",
1983
2179
  "$extensions": {
1984
2180
  "putio": {
1985
2181
  "cssName": "yellow-text",
@@ -1991,7 +2187,7 @@
1991
2187
  "dark": {
1992
2188
  "bg": {
1993
2189
  "$type": "color",
1994
- "$value": "hsl(45, 100%, 5.5%)",
2190
+ "$value": "hsl(0, 0%, 0%)",
1995
2191
  "$extensions": {
1996
2192
  "putio": {
1997
2193
  "cssName": "yellow-bg",
@@ -2001,7 +2197,7 @@
2001
2197
  },
2002
2198
  "bgSecondary": {
2003
2199
  "$type": "color",
2004
- "$value": "hsl(46, 100%, 6.7%)",
2200
+ "$value": "hsl(38, 35%, 6%)",
2005
2201
  "$extensions": {
2006
2202
  "putio": {
2007
2203
  "cssName": "yellow-bg-secondary",
@@ -2011,7 +2207,7 @@
2011
2207
  },
2012
2208
  "componentBg": {
2013
2209
  "$type": "color",
2014
- "$value": "hsl(45, 100%, 8.7%)",
2210
+ "$value": "hsl(45, 70%, 9%)",
2015
2211
  "$extensions": {
2016
2212
  "putio": {
2017
2213
  "cssName": "yellow-component-bg",
@@ -2021,7 +2217,7 @@
2021
2217
  },
2022
2218
  "componentBgHover": {
2023
2219
  "$type": "color",
2024
- "$value": "hsl(45, 100%, 10.4%)",
2220
+ "$value": "hsl(44, 100%, 11%)",
2025
2221
  "$extensions": {
2026
2222
  "putio": {
2027
2223
  "cssName": "yellow-component-bg-hover",
@@ -2031,7 +2227,7 @@
2031
2227
  },
2032
2228
  "componentBgActive": {
2033
2229
  "$type": "color",
2034
- "$value": "hsl(47, 100%, 12.1%)",
2230
+ "$value": "hsl(44, 100%, 14%)",
2035
2231
  "$extensions": {
2036
2232
  "putio": {
2037
2233
  "cssName": "yellow-component-bg-active",
@@ -2041,7 +2237,7 @@
2041
2237
  },
2042
2238
  "line": {
2043
2239
  "$type": "color",
2044
- "$value": "hsl(49, 100%, 14.3%)",
2240
+ "$value": "hsl(45, 71%, 19%)",
2045
2241
  "$extensions": {
2046
2242
  "putio": {
2047
2243
  "cssName": "yellow-line",
@@ -2051,7 +2247,7 @@
2051
2247
  },
2052
2248
  "border": {
2053
2249
  "$type": "color",
2054
- "$value": "hsl(49, 90.3%, 18.4%)",
2250
+ "$value": "hsl(45, 53%, 26%)",
2055
2251
  "$extensions": {
2056
2252
  "putio": {
2057
2253
  "cssName": "yellow-border",
@@ -2061,7 +2257,7 @@
2061
2257
  },
2062
2258
  "borderHover": {
2063
2259
  "$type": "color",
2064
- "$value": "hsl(50, 100%, 22.0%)",
2260
+ "$value": "hsl(45, 49%, 34%)",
2065
2261
  "$extensions": {
2066
2262
  "putio": {
2067
2263
  "cssName": "yellow-border-hover",
@@ -2071,7 +2267,8 @@
2071
2267
  },
2072
2268
  "solidHover": {
2073
2269
  "$type": "color",
2074
- "$value": "{color.brand.yellow}",
2270
+ "$value": "hsl(45, 89%, 58%)",
2271
+ "$description": "Primary-button hover yellow for dark mode.",
2075
2272
  "$extensions": {
2076
2273
  "putio": {
2077
2274
  "cssName": "yellow-solid-hover",
@@ -2081,7 +2278,7 @@
2081
2278
  },
2082
2279
  "textSecondary": {
2083
2280
  "$type": "color",
2084
- "$value": "hsl(48, 100%, 47.0%)",
2281
+ "$value": "hsl(45, 100%, 64%)",
2085
2282
  "$extensions": {
2086
2283
  "putio": {
2087
2284
  "cssName": "yellow-text-secondary",
@@ -2091,7 +2288,7 @@
2091
2288
  },
2092
2289
  "text": {
2093
2290
  "$type": "color",
2094
- "$value": "hsl(53, 100%, 91.0%)",
2291
+ "$value": "hsl(46, 89%, 86%)",
2095
2292
  "$extensions": {
2096
2293
  "putio": {
2097
2294
  "cssName": "yellow-text",
@@ -2771,7 +2968,7 @@
2771
2968
  },
2772
2969
  "navItemBg": {
2773
2970
  "$type": "color",
2774
- "$value": "transparent",
2971
+ "$value": "hsla(0, 0%, 0%, 0)",
2775
2972
  "$extensions": {
2776
2973
  "putio": {
2777
2974
  "cssName": "nav-item-bg",
@@ -2801,7 +2998,7 @@
2801
2998
  },
2802
2999
  "listItemBg": {
2803
3000
  "$type": "color",
2804
- "$value": "transparent",
3001
+ "$value": "hsla(0, 0%, 0%, 0)",
2805
3002
  "$extensions": {
2806
3003
  "putio": {
2807
3004
  "cssName": "list-item-bg",
@@ -2921,7 +3118,7 @@
2921
3118
  },
2922
3119
  "transparent": {
2923
3120
  "$type": "color",
2924
- "$value": "transparent",
3121
+ "$value": "hsla(0, 0%, 0%, 0)",
2925
3122
  "$extensions": {
2926
3123
  "putio": {
2927
3124
  "cssName": "transparent",
@@ -2983,7 +3180,7 @@
2983
3180
  },
2984
3181
  "navItemBg": {
2985
3182
  "$type": "color",
2986
- "$value": "transparent",
3183
+ "$value": "hsla(0, 0%, 0%, 0)",
2987
3184
  "$extensions": {
2988
3185
  "putio": {
2989
3186
  "cssName": "nav-item-bg",
@@ -3013,7 +3210,7 @@
3013
3210
  },
3014
3211
  "listItemBg": {
3015
3212
  "$type": "color",
3016
- "$value": "transparent",
3213
+ "$value": "hsla(0, 0%, 0%, 0)",
3017
3214
  "$extensions": {
3018
3215
  "putio": {
3019
3216
  "cssName": "list-item-bg",