@adobe/spectrum-tokens 12.0.0-beta.42 → 12.0.0-beta.45

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 (5) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/dist/json/drover.json +18 -10
  3. package/dist/json/variables.json +110 -41
  4. package/package.json +1 -1
  5. package/src/component-layout.json +161 -92
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
- # [12.0.0-beta.42](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.41...v12.0.0-beta.42) (2022-07-14)
1
+ # [12.0.0-beta.45](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.44...v12.0.0-beta.45) (2022-08-16)
2
2
 
3
3
 
4
4
  ### Features
5
5
 
6
- * add popover and tag tokens ([#54](https://github.com/adobe/spectrum-tokens/issues/54)) ([3cf9620](https://github.com/adobe/spectrum-tokens/commit/3cf9620613111eb1ad2796403e159bc2037dc759))
6
+ * add swatch tokens ([#57](https://github.com/adobe/spectrum-tokens/issues/57)) ([4cfe076](https://github.com/adobe/spectrum-tokens/commit/4cfe076ae264739ce21a7622d1d2b8b50cfede40))
package/dist/json/drover.json CHANGED
@@ -1137,9 +1137,9 @@
1137
1137
  "font-size-75": "12px",
1138
1138
  "font-size-800": "32px",
1139
1139
  "font-size-900": "36px",
1140
- "help-text-top-to-workflow-icon-extra-large": "13px",
1141
- "help-text-top-to-workflow-icon-large": "10px",
1142
- "help-text-top-to-workflow-icon-medium": "7px",
1140
+ "help-text-top-to-workflow-icon-extra-large": "9px",
1141
+ "help-text-top-to-workflow-icon-large": "6px",
1142
+ "help-text-top-to-workflow-icon-medium": "3px",
1143
1143
  "help-text-top-to-workflow-icon-small": "4px",
1144
1144
  "in-line-alert-minimum-width": "320px",
1145
1145
  "line-height-100": "1.3",
@@ -1159,15 +1159,15 @@
1159
1159
  "progress-circle-thickness-large": "4px",
1160
1160
  "progress-circle-thickness-medium": "3px",
1161
1161
  "progress-circle-thickness-small": "2px",
1162
- "radio-button-control-size-extra-large-desktop": "18px",
1163
- "radio-button-control-size-large-desktop": "16px",
1164
- "radio-button-control-size-medium-desktop": "14px",
1162
+ "radio-button-control-size-extra-large": "18px",
1163
+ "radio-button-control-size-large": "16px",
1164
+ "radio-button-control-size-medium": "14px",
1165
1165
  "radio-button-control-size-small": "12px",
1166
1166
  "radio-button-selection-indicator": "4px",
1167
- "radio-button-top-to-control-extra-large-desktop": "15px",
1168
- "radio-button-top-to-control-large-desktop": "12px",
1169
- "radio-button-top-to-control-medium-desktop": "9px",
1170
- "radio-button-top-to-control-small-desktop": "6px",
1167
+ "radio-button-top-to-control-extra-large": "15px",
1168
+ "radio-button-top-to-control-large": "12px",
1169
+ "radio-button-top-to-control-medium": "9px",
1170
+ "radio-button-top-to-control-small": "6px",
1171
1171
  "spacing-100": "8px",
1172
1172
  "spacing-1000": "96px",
1173
1173
  "spacing-200": "12px",
@@ -1188,6 +1188,14 @@
1188
1188
  "status-light-top-to-dot-large": "15px",
1189
1189
  "status-light-top-to-dot-medium": "12px",
1190
1190
  "status-light-top-to-dot-small": "8px",
1191
+ "swatch-size-extra-small": "16px",
1192
+ "swatch-size-large": "40px",
1193
+ "swatch-size-medium": "32px",
1194
+ "swatch-size-small": "24px",
1195
+ "swatch-slash-thickness-extra-small": "2px",
1196
+ "swatch-slash-thickness-large": "5px",
1197
+ "swatch-slash-thickness-medium": "4px",
1198
+ "swatch-slash-thickness-small": "3px",
1191
1199
  "switch-control-height-extra-large": "18px",
1192
1200
  "switch-control-height-large": "16px",
1193
1201
  "switch-control-height-medium": "14px",
package/dist/json/variables.json CHANGED
@@ -8271,30 +8271,30 @@
8271
8271
  "help-text-top-to-workflow-icon-medium": {
8272
8272
  "sets": {
8273
8273
  "desktop": {
8274
- "value": "7px"
8274
+ "value": "3px"
8275
8275
  },
8276
8276
  "mobile": {
8277
- "value": "9px"
8277
+ "value": "4px"
8278
8278
  }
8279
8279
  }
8280
8280
  },
8281
8281
  "help-text-top-to-workflow-icon-large": {
8282
8282
  "sets": {
8283
8283
  "desktop": {
8284
- "value": "10px"
8284
+ "value": "6px"
8285
8285
  },
8286
8286
  "mobile": {
8287
- "value": "13px"
8287
+ "value": "8px"
8288
8288
  }
8289
8289
  }
8290
8290
  },
8291
8291
  "help-text-top-to-workflow-icon-extra-large": {
8292
8292
  "sets": {
8293
8293
  "desktop": {
8294
- "value": "13px"
8294
+ "value": "9px"
8295
8295
  },
8296
8296
  "mobile": {
8297
- "value": "16px"
8297
+ "value": "11px"
8298
8298
  }
8299
8299
  }
8300
8300
  },
@@ -8308,6 +8308,61 @@
8308
8308
  }
8309
8309
  }
8310
8310
  },
8311
+ "swatch-size-extra-small": {
8312
+ "sets": {
8313
+ "desktop": {
8314
+ "value": "16px"
8315
+ },
8316
+ "mobile": {
8317
+ "value": "20px"
8318
+ }
8319
+ }
8320
+ },
8321
+ "swatch-size-small": {
8322
+ "sets": {
8323
+ "desktop": {
8324
+ "value": "24px"
8325
+ },
8326
+ "mobile": {
8327
+ "value": "30px"
8328
+ }
8329
+ }
8330
+ },
8331
+ "swatch-size-medium": {
8332
+ "sets": {
8333
+ "desktop": {
8334
+ "value": "32px"
8335
+ },
8336
+ "mobile": {
8337
+ "value": "40px"
8338
+ }
8339
+ }
8340
+ },
8341
+ "swatch-size-large": {
8342
+ "sets": {
8343
+ "desktop": {
8344
+ "value": "40px"
8345
+ },
8346
+ "mobile": {
8347
+ "value": "50px"
8348
+ }
8349
+ }
8350
+ },
8351
+ "swatch-rectangle-width-multiplier": {
8352
+ "value": "2"
8353
+ },
8354
+ "swatch-slash-thickness-extra-small": {
8355
+ "value": "2px"
8356
+ },
8357
+ "swatch-slash-thickness-small": {
8358
+ "value": "3px"
8359
+ },
8360
+ "swatch-slash-thickness-medium": {
8361
+ "value": "4px"
8362
+ },
8363
+ "swatch-slash-thickness-large": {
8364
+ "value": "5px"
8365
+ },
8311
8366
  "progress-bar-minimum-width": {
8312
8367
  "sets": {
8313
8368
  "desktop": {
@@ -8455,11 +8510,13 @@
8455
8510
  "radio-button-control-size-medium": {
8456
8511
  "sets": {
8457
8512
  "spectrum": {
8458
- "desktop": {
8459
- "value": "14px"
8460
- },
8461
- "mobile": {
8462
- "value": "18px"
8513
+ "sets": {
8514
+ "desktop": {
8515
+ "value": "14px"
8516
+ },
8517
+ "mobile": {
8518
+ "value": "18px"
8519
+ }
8463
8520
  }
8464
8521
  },
8465
8522
  "express": {
@@ -8477,11 +8534,13 @@
8477
8534
  "radio-button-control-size-large": {
8478
8535
  "sets": {
8479
8536
  "spectrum": {
8480
- "desktop": {
8481
- "value": "16px"
8482
- },
8483
- "mobile": {
8484
- "value": "20px"
8537
+ "sets": {
8538
+ "desktop": {
8539
+ "value": "16px"
8540
+ },
8541
+ "mobile": {
8542
+ "value": "20px"
8543
+ }
8485
8544
  }
8486
8545
  },
8487
8546
  "express": {
@@ -8499,11 +8558,13 @@
8499
8558
  "radio-button-control-size-extra-large": {
8500
8559
  "sets": {
8501
8560
  "spectrum": {
8502
- "desktop": {
8503
- "value": "18px"
8504
- },
8505
- "mobile": {
8506
- "value": "22px"
8561
+ "sets": {
8562
+ "desktop": {
8563
+ "value": "18px"
8564
+ },
8565
+ "mobile": {
8566
+ "value": "22px"
8567
+ }
8507
8568
  }
8508
8569
  },
8509
8570
  "express": {
@@ -8521,11 +8582,13 @@
8521
8582
  "radio-button-top-to-control-small": {
8522
8583
  "sets": {
8523
8584
  "spectrum": {
8524
- "desktop": {
8525
- "value": "6px"
8526
- },
8527
- "mobile": {
8528
- "value": "7px"
8585
+ "sets": {
8586
+ "desktop": {
8587
+ "value": "6px"
8588
+ },
8589
+ "mobile": {
8590
+ "value": "7px"
8591
+ }
8529
8592
  }
8530
8593
  },
8531
8594
  "express": {
@@ -8543,11 +8606,13 @@
8543
8606
  "radio-button-top-to-control-medium": {
8544
8607
  "sets": {
8545
8608
  "spectrum": {
8546
- "desktop": {
8547
- "value": "9px"
8548
- },
8549
- "mobile": {
8550
- "value": "11px"
8609
+ "sets": {
8610
+ "desktop": {
8611
+ "value": "9px"
8612
+ },
8613
+ "mobile": {
8614
+ "value": "11px"
8615
+ }
8551
8616
  }
8552
8617
  },
8553
8618
  "express": {
@@ -8565,11 +8630,13 @@
8565
8630
  "radio-button-top-to-control-large": {
8566
8631
  "sets": {
8567
8632
  "spectrum": {
8568
- "desktop": {
8569
- "value": "12px"
8570
- },
8571
- "mobile": {
8572
- "value": "15px"
8633
+ "sets": {
8634
+ "desktop": {
8635
+ "value": "12px"
8636
+ },
8637
+ "mobile": {
8638
+ "value": "15px"
8639
+ }
8573
8640
  }
8574
8641
  },
8575
8642
  "express": {
@@ -8587,11 +8654,13 @@
8587
8654
  "radio-button-top-to-control-extra-large": {
8588
8655
  "sets": {
8589
8656
  "spectrum": {
8590
- "desktop": {
8591
- "value": "15px"
8592
- },
8593
- "mobile": {
8594
- "value": "19px"
8657
+ "sets": {
8658
+ "desktop": {
8659
+ "value": "15px"
8660
+ },
8661
+ "mobile": {
8662
+ "value": "19px"
8663
+ }
8595
8664
  }
8596
8665
  },
8597
8666
  "express": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adobe/spectrum-tokens",
3
- "version": "12.0.0-beta.42",
3
+ "version": "12.0.0-beta.45",
4
4
  "description": "",
5
5
  "main": "config.js",
6
6
  "scripts": {
package/src/component-layout.json CHANGED
@@ -491,7 +491,7 @@
491
491
  }
492
492
  }
493
493
  },
494
- "action-button-edge-to-hold-icon-extra-small":{
494
+ "action-button-edge-to-hold-icon-extra-small": {
495
495
  "sets": {
496
496
  "desktop": {
497
497
  "value": "3px"
@@ -879,30 +879,30 @@
879
879
  "help-text-top-to-workflow-icon-medium": {
880
880
  "sets": {
881
881
  "desktop": {
882
- "value": "7px"
882
+ "value": "3px"
883
883
  },
884
884
  "mobile": {
885
- "value": "9px"
885
+ "value": "4px"
886
886
  }
887
887
  }
888
888
  },
889
889
  "help-text-top-to-workflow-icon-large": {
890
890
  "sets": {
891
891
  "desktop": {
892
- "value": "10px"
892
+ "value": "6px"
893
893
  },
894
894
  "mobile": {
895
- "value": "13px"
895
+ "value": "8px"
896
896
  }
897
897
  }
898
898
  },
899
899
  "help-text-top-to-workflow-icon-extra-large": {
900
900
  "sets": {
901
901
  "desktop": {
902
- "value": "13px"
902
+ "value": "9px"
903
903
  },
904
904
  "mobile": {
905
- "value": "16px"
905
+ "value": "11px"
906
906
  }
907
907
  }
908
908
  },
@@ -918,6 +918,62 @@
918
918
  }
919
919
  },
920
920
 
921
+ "swatch-size-extra-small": {
922
+ "sets": {
923
+ "desktop": {
924
+ "value": "16px"
925
+ },
926
+ "mobile": {
927
+ "value": "20px"
928
+ }
929
+ }
930
+ },
931
+ "swatch-size-small": {
932
+ "sets": {
933
+ "desktop": {
934
+ "value": "24px"
935
+ },
936
+ "mobile": {
937
+ "value": "30px"
938
+ }
939
+ }
940
+ },
941
+ "swatch-size-medium": {
942
+ "sets": {
943
+ "desktop": {
944
+ "value": "32px"
945
+ },
946
+ "mobile": {
947
+ "value": "40px"
948
+ }
949
+ }
950
+ },
951
+ "swatch-size-large": {
952
+ "sets": {
953
+ "desktop": {
954
+ "value": "40px"
955
+ },
956
+ "mobile": {
957
+ "value": "50px"
958
+ }
959
+ }
960
+ },
961
+ "swatch-rectangle-width-multiplier": {
962
+ "value": "2"
963
+ },
964
+ "swatch-slash-thickness-extra-small": {
965
+ "value": "2px"
966
+ },
967
+ "swatch-slash-thickness-small": {
968
+ "value": "3px"
969
+ },
970
+ "swatch-slash-thickness-medium": {
971
+ "value": "4px"
972
+ },
973
+ "swatch-slash-thickness-large": {
974
+ "value": "5px"
975
+ },
976
+
921
977
  "progress-bar-minimum-width": {
922
978
  "sets": {
923
979
  "desktop": {
@@ -927,57 +983,57 @@
927
983
  "value": "48px"
928
984
  }
929
985
  }
930
- },
931
- "progress-bar-maximum-width": {
932
- "sets": {
933
- "desktop": {
934
- "value": "768px"
935
- },
936
- "mobile": {
937
- "value": "768px"
938
- }
986
+ },
987
+ "progress-bar-maximum-width": {
988
+ "sets": {
989
+ "desktop": {
990
+ "value": "768px"
991
+ },
992
+ "mobile": {
993
+ "value": "768px"
939
994
  }
940
- },
941
- "progress-bar-thickness-small": {
942
- "sets": {
943
- "desktop": {
944
- "value": "4px"
945
- },
946
- "mobile": {
947
- "value": "5px"
948
- }
995
+ }
996
+ },
997
+ "progress-bar-thickness-small": {
998
+ "sets": {
999
+ "desktop": {
1000
+ "value": "4px"
1001
+ },
1002
+ "mobile": {
1003
+ "value": "5px"
949
1004
  }
950
- },
951
- "progress-bar-thickness-medium": {
952
- "sets": {
953
- "desktop": {
954
- "value": "6px"
955
- },
956
- "mobile": {
957
- "value": "8px"
958
- }
1005
+ }
1006
+ },
1007
+ "progress-bar-thickness-medium": {
1008
+ "sets": {
1009
+ "desktop": {
1010
+ "value": "6px"
1011
+ },
1012
+ "mobile": {
1013
+ "value": "8px"
959
1014
  }
960
- },
961
- "progress-bar-thickness-large": {
962
- "sets": {
963
- "desktop": {
964
- "value": "8px"
965
- },
966
- "mobile": {
967
- "value": "10px"
968
- }
1015
+ }
1016
+ },
1017
+ "progress-bar-thickness-large": {
1018
+ "sets": {
1019
+ "desktop": {
1020
+ "value": "8px"
1021
+ },
1022
+ "mobile": {
1023
+ "value": "10px"
969
1024
  }
970
- },
971
- "progress-bar-thickness-extra-large": {
972
- "sets": {
973
- "desktop": {
974
- "value": "10px"
975
- },
976
- "mobile": {
977
- "value": "13px"
978
- }
1025
+ }
1026
+ },
1027
+ "progress-bar-thickness-extra-large": {
1028
+ "sets": {
1029
+ "desktop": {
1030
+ "value": "10px"
1031
+ },
1032
+ "mobile": {
1033
+ "value": "13px"
979
1034
  }
980
- },
1035
+ }
1036
+ },
981
1037
 
982
1038
  "progress-circle-size-small": {
983
1039
  "sets": {
@@ -1042,7 +1098,7 @@
1042
1098
 
1043
1099
  "radio-button-control-size-small": {
1044
1100
  "sets": {
1045
- "spectrum":{
1101
+ "spectrum": {
1046
1102
  "sets": {
1047
1103
  "desktop": {
1048
1104
  "value": "12px"
@@ -1052,7 +1108,7 @@
1052
1108
  }
1053
1109
  }
1054
1110
  },
1055
- "express":{
1111
+ "express": {
1056
1112
  "sets": {
1057
1113
  "desktop": {
1058
1114
  "value": "14px"
@@ -1067,11 +1123,13 @@
1067
1123
  "radio-button-control-size-medium": {
1068
1124
  "sets": {
1069
1125
  "spectrum": {
1070
- "desktop": {
1071
- "value": "14px"
1072
- },
1073
- "mobile": {
1074
- "value": "18px"
1126
+ "sets": {
1127
+ "desktop": {
1128
+ "value": "14px"
1129
+ },
1130
+ "mobile": {
1131
+ "value": "18px"
1132
+ }
1075
1133
  }
1076
1134
  },
1077
1135
  "express": {
@@ -1088,12 +1146,14 @@
1088
1146
  },
1089
1147
  "radio-button-control-size-large": {
1090
1148
  "sets": {
1091
- "spectrum":{
1092
- "desktop": {
1093
- "value": "16px"
1094
- },
1095
- "mobile": {
1096
- "value": "20px"
1149
+ "spectrum": {
1150
+ "sets": {
1151
+ "desktop": {
1152
+ "value": "16px"
1153
+ },
1154
+ "mobile": {
1155
+ "value": "20px"
1156
+ }
1097
1157
  }
1098
1158
  },
1099
1159
  "express": {
@@ -1111,11 +1171,13 @@
1111
1171
  "radio-button-control-size-extra-large": {
1112
1172
  "sets": {
1113
1173
  "spectrum": {
1114
- "desktop": {
1115
- "value": "18px"
1116
- },
1117
- "mobile": {
1118
- "value": "22px"
1174
+ "sets": {
1175
+ "desktop": {
1176
+ "value": "18px"
1177
+ },
1178
+ "mobile": {
1179
+ "value": "22px"
1180
+ }
1119
1181
  }
1120
1182
  },
1121
1183
  "express": {
@@ -1133,11 +1195,13 @@
1133
1195
  "radio-button-top-to-control-small": {
1134
1196
  "sets": {
1135
1197
  "spectrum": {
1136
- "desktop": {
1137
- "value": "6px"
1138
- },
1139
- "mobile": {
1140
- "value": "7px"
1198
+ "sets": {
1199
+ "desktop": {
1200
+ "value": "6px"
1201
+ },
1202
+ "mobile": {
1203
+ "value": "7px"
1204
+ }
1141
1205
  }
1142
1206
  },
1143
1207
  "express": {
@@ -1155,11 +1219,13 @@
1155
1219
  "radio-button-top-to-control-medium": {
1156
1220
  "sets": {
1157
1221
  "spectrum": {
1158
- "desktop": {
1159
- "value": "9px"
1160
- },
1161
- "mobile": {
1162
- "value": "11px"
1222
+ "sets": {
1223
+ "desktop": {
1224
+ "value": "9px"
1225
+ },
1226
+ "mobile": {
1227
+ "value": "11px"
1228
+ }
1163
1229
  }
1164
1230
  },
1165
1231
  "express": {
@@ -1177,11 +1243,13 @@
1177
1243
  "radio-button-top-to-control-large": {
1178
1244
  "sets": {
1179
1245
  "spectrum": {
1180
- "desktop": {
1181
- "value": "12px"
1182
- },
1183
- "mobile": {
1184
- "value": "15px"
1246
+ "sets": {
1247
+ "desktop": {
1248
+ "value": "12px"
1249
+ },
1250
+ "mobile": {
1251
+ "value": "15px"
1252
+ }
1185
1253
  }
1186
1254
  },
1187
1255
  "express": {
@@ -1199,11 +1267,13 @@
1199
1267
  "radio-button-top-to-control-extra-large": {
1200
1268
  "sets": {
1201
1269
  "spectrum": {
1202
- "desktop": {
1203
- "value": "15px"
1204
- },
1205
- "mobile": {
1206
- "value": "19px"
1270
+ "sets": {
1271
+ "desktop": {
1272
+ "value": "15px"
1273
+ },
1274
+ "mobile": {
1275
+ "value": "19px"
1276
+ }
1207
1277
  }
1208
1278
  },
1209
1279
  "express": {
@@ -1735,5 +1805,4 @@
1735
1805
  }
1736
1806
  }
1737
1807
  }
1738
-
1739
1808
  }