@putdotio/design 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/DESIGN.md +20 -8
  2. package/dist/css/tokens.css +142 -31
  3. package/dist/figma/putio.tokens.json +229 -16
  4. package/dist/tokens.d.ts +3 -1
  5. package/dist/tokens.dtcg.json +1439 -244
  6. package/dist/tokens.flat.json +989 -167
  7. package/dist/tokens.js +989 -167
  8. package/package.json +6 -4
  9. package/system/README.md +120 -19
  10. package/tokens/components.tokens.json +963 -5
  11. package/tokens/context.tokens.json +136 -120
  12. package/tokens/foundation.css +30 -20
  13. package/tokens/primitives.tokens.json +138 -23
  14. package/tokens/semantic.tokens.json +28 -27
package/tokens/semantic.tokens.json CHANGED
@@ -453,7 +453,7 @@
453
453
  },
454
454
  "solid": {
455
455
  "$type": "color",
456
- "$value": "hsl(151, 55%, 41.5%)",
456
+ "$value": "{color.green.light.solid}",
457
457
  "$extensions": {
458
458
  "putio": {
459
459
  "cssName": "green-solid",
@@ -699,7 +699,7 @@
699
699
  },
700
700
  "solid": {
701
701
  "$type": "color",
702
- "$value": "hsl(358, 75%, 59%)",
702
+ "$value": "{color.red.light.solid}",
703
703
  "$extensions": {
704
704
  "putio": {
705
705
  "cssName": "red-solid",
@@ -936,7 +936,7 @@
936
936
  },
937
937
  "solidHover": {
938
938
  "$type": "color",
939
- "$value": "hsl(45, 89%, 58%)",
939
+ "$value": "{color.yellow.light.solidHover}",
940
940
  "$description": "Primary-button hover yellow for dark mode.",
941
941
  "$extensions": {
942
942
  "putio": {
@@ -998,7 +998,7 @@
998
998
  "light": {
999
999
  "htmlBg": {
1000
1000
  "$type": "color",
1001
- "$value": "hsl(0, 0%, 97.3%)",
1001
+ "$value": "{color.neutral.light.bgSecondary}",
1002
1002
  "$extensions": {
1003
1003
  "putio": {
1004
1004
  "cssName": "html-bg",
@@ -1018,7 +1018,7 @@
1018
1018
  },
1019
1019
  "navBg": {
1020
1020
  "$type": "color",
1021
- "$value": "hsl(0, 0%, 100%)",
1021
+ "$value": "{surface.light.appBg}",
1022
1022
  "$extensions": {
1023
1023
  "putio": {
1024
1024
  "cssName": "nav-bg",
@@ -1038,7 +1038,7 @@
1038
1038
  },
1039
1039
  "navItemBgHover": {
1040
1040
  "$type": "color",
1041
- "$value": "hsl(0, 0%, 95.1%)",
1041
+ "$value": "{color.neutral.light.componentBg}",
1042
1042
  "$extensions": {
1043
1043
  "putio": {
1044
1044
  "cssName": "nav-item-bg-hover",
@@ -1048,7 +1048,7 @@
1048
1048
  },
1049
1049
  "navItemBgActive": {
1050
1050
  "$type": "color",
1051
- "$value": "hsl(0, 0%, 95.1%)",
1051
+ "$value": "{color.neutral.light.componentBg}",
1052
1052
  "$extensions": {
1053
1053
  "putio": {
1054
1054
  "cssName": "nav-item-bg-active",
@@ -1068,7 +1068,7 @@
1068
1068
  },
1069
1069
  "listItemBgHover": {
1070
1070
  "$type": "color",
1071
- "$value": "hsl(0, 0%, 97.3%)",
1071
+ "$value": "{color.neutral.light.bgSecondary}",
1072
1072
  "$extensions": {
1073
1073
  "putio": {
1074
1074
  "cssName": "list-item-bg-hover",
@@ -1078,7 +1078,7 @@
1078
1078
  },
1079
1079
  "listItemBgActive": {
1080
1080
  "$type": "color",
1081
- "$value": "hsl(0, 0%, 97.3%)",
1081
+ "$value": "{color.neutral.light.bgSecondary}",
1082
1082
  "$extensions": {
1083
1083
  "putio": {
1084
1084
  "cssName": "list-item-bg-active",
@@ -1098,7 +1098,7 @@
1098
1098
  },
1099
1099
  "segmentedControlBg": {
1100
1100
  "$type": "color",
1101
- "$value": "hsl(0, 0%, 95.1%)",
1101
+ "$value": "{color.neutral.light.componentBg}",
1102
1102
  "$extensions": {
1103
1103
  "putio": {
1104
1104
  "cssName": "segmented-control-bg",
@@ -1108,7 +1108,7 @@
1108
1108
  },
1109
1109
  "segmentedControlBgActive": {
1110
1110
  "$type": "color",
1111
- "$value": "hsl(0, 0%, 100%)",
1111
+ "$value": "{surface.light.appBg}",
1112
1112
  "$extensions": {
1113
1113
  "putio": {
1114
1114
  "cssName": "segmented-control-bg-active",
@@ -1118,7 +1118,7 @@
1118
1118
  },
1119
1119
  "transferListItemCompletingBg": {
1120
1120
  "$type": "color",
1121
- "$value": "hsl(85, 76.0%, 92.3%)",
1121
+ "$value": "{color.transfer.light.lime3}",
1122
1122
  "$extensions": {
1123
1123
  "putio": {
1124
1124
  "cssName": "transfer-list-item-completing-bg",
@@ -1128,7 +1128,7 @@
1128
1128
  },
1129
1129
  "transferListItemDownloadingBg": {
1130
1130
  "$type": "color",
1131
- "$value": "hsl(85, 76.0%, 92.3%)",
1131
+ "$value": "{color.transfer.light.lime3}",
1132
1132
  "$extensions": {
1133
1133
  "putio": {
1134
1134
  "cssName": "transfer-list-item-downloading-bg",
@@ -1138,7 +1138,7 @@
1138
1138
  },
1139
1139
  "transferListItemFinishedBg": {
1140
1140
  "$type": "color",
1141
- "$value": "hsl(0, 0%, 97.3%)",
1141
+ "$value": "{color.neutral.light.bgSecondary}",
1142
1142
  "$extensions": {
1143
1143
  "putio": {
1144
1144
  "cssName": "transfer-list-item-finished-bg",
@@ -1158,7 +1158,7 @@
1158
1158
  },
1159
1159
  "hiContrast": {
1160
1160
  "$type": "color",
1161
- "$value": "hsl(0, 0%, 9.0%)",
1161
+ "$value": "{color.neutral.light.text}",
1162
1162
  "$extensions": {
1163
1163
  "putio": {
1164
1164
  "cssName": "hi-contrast",
@@ -1168,7 +1168,7 @@
1168
1168
  },
1169
1169
  "loContrast": {
1170
1170
  "$type": "color",
1171
- "$value": "hsl(0, 0%, 99.0%)",
1171
+ "$value": "{color.neutral.light.bg}",
1172
1172
  "$extensions": {
1173
1173
  "putio": {
1174
1174
  "cssName": "lo-contrast",
@@ -1230,7 +1230,7 @@
1230
1230
  },
1231
1231
  "navBg": {
1232
1232
  "$type": "color",
1233
- "$value": "hsl(0, 0%, 8.5%)",
1233
+ "$value": "{surface.dark.appBg}",
1234
1234
  "$extensions": {
1235
1235
  "putio": {
1236
1236
  "cssName": "nav-bg",
@@ -1250,7 +1250,7 @@
1250
1250
  },
1251
1251
  "navItemBgHover": {
1252
1252
  "$type": "color",
1253
- "$value": "hsl(0, 0%, 13.6%)",
1253
+ "$value": "{color.neutral.dark.componentBg}",
1254
1254
  "$extensions": {
1255
1255
  "putio": {
1256
1256
  "cssName": "nav-item-bg-hover",
@@ -1260,7 +1260,7 @@
1260
1260
  },
1261
1261
  "navItemBgActive": {
1262
1262
  "$type": "color",
1263
- "$value": "hsl(0, 0%, 13.6%)",
1263
+ "$value": "{color.neutral.dark.componentBg}",
1264
1264
  "$extensions": {
1265
1265
  "putio": {
1266
1266
  "cssName": "nav-item-bg-active",
@@ -1280,7 +1280,7 @@
1280
1280
  },
1281
1281
  "listItemBgHover": {
1282
1282
  "$type": "color",
1283
- "$value": "hsl(0, 0%, 11.0%)",
1283
+ "$value": "{color.neutral.dark.bgSecondary}",
1284
1284
  "$extensions": {
1285
1285
  "putio": {
1286
1286
  "cssName": "list-item-bg-hover",
@@ -1290,7 +1290,7 @@
1290
1290
  },
1291
1291
  "listItemBgActive": {
1292
1292
  "$type": "color",
1293
- "$value": "hsl(0, 0%, 11.0%)",
1293
+ "$value": "{color.neutral.dark.bgSecondary}",
1294
1294
  "$extensions": {
1295
1295
  "putio": {
1296
1296
  "cssName": "list-item-bg-active",
@@ -1310,7 +1310,7 @@
1310
1310
  },
1311
1311
  "segmentedControlBg": {
1312
1312
  "$type": "color",
1313
- "$value": "hsl(0, 0%, 8.5%)",
1313
+ "$value": "{surface.dark.appBg}",
1314
1314
  "$extensions": {
1315
1315
  "putio": {
1316
1316
  "cssName": "segmented-control-bg",
@@ -1320,7 +1320,7 @@
1320
1320
  },
1321
1321
  "segmentedControlBgActive": {
1322
1322
  "$type": "color",
1323
- "$value": "hsl(0, 0%, 13.6%)",
1323
+ "$value": "{color.neutral.dark.componentBg}",
1324
1324
  "$extensions": {
1325
1325
  "putio": {
1326
1326
  "cssName": "segmented-control-bg-active",
@@ -1350,7 +1350,7 @@
1350
1350
  },
1351
1351
  "transferListItemFinishedBg": {
1352
1352
  "$type": "color",
1353
- "$value": "hsl(0, 0%, 11.0%)",
1353
+ "$value": "{color.neutral.dark.bgSecondary}",
1354
1354
  "$extensions": {
1355
1355
  "putio": {
1356
1356
  "cssName": "transfer-list-item-finished-bg",
@@ -1370,7 +1370,7 @@
1370
1370
  },
1371
1371
  "hiContrast": {
1372
1372
  "$type": "color",
1373
- "$value": "hsl(0, 0%, 93.0%)",
1373
+ "$value": "{color.neutral.dark.text}",
1374
1374
  "$extensions": {
1375
1375
  "putio": {
1376
1376
  "cssName": "hi-contrast",
@@ -1380,7 +1380,7 @@
1380
1380
  },
1381
1381
  "loContrast": {
1382
1382
  "$type": "color",
1383
- "$value": "hsl(0, 0%, 8.5%)",
1383
+ "$value": "{color.neutral.dark.bg}",
1384
1384
  "$extensions": {
1385
1385
  "putio": {
1386
1386
  "cssName": "lo-contrast",
@@ -1420,7 +1420,8 @@
1420
1420
  },
1421
1421
  "shadow": {
1422
1422
  "$type": "color",
1423
- "$value": "hsl(0, 0%, 0%)",
1423
+ "$value": "{surface.dark.shadowColor}",
1424
+ "$description": "Compat name kept for existing web consumers — alias of surface.dark.shadowColor so the two can never drift.",
1424
1425
  "$extensions": {
1425
1426
  "putio": {
1426
1427
  "cssName": "shadow",