@adobe/spectrum-tokens 12.0.0-beta.43 → 12.0.0-beta.46

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/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
- # [12.0.0-beta.43](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.42...v12.0.0-beta.43) (2022-07-14)
1
+ # [12.0.0-beta.46](https://github.com/adobe/spectrum-tokens/compare/v12.0.0-beta.45...v12.0.0-beta.46) (2022-08-24)
2
2
 
3
3
 
4
- ### Bug Fixes
4
+ ### Features
5
5
 
6
- * update help text icon spacing ([#55](https://github.com/adobe/spectrum-tokens/issues/55)) ([67df19b](https://github.com/adobe/spectrum-tokens/commit/67df19bf39a71f6dbd0df9b64642e057fb1c9295))
6
+ * added overlay-color and overlay-opacity values ([#58](https://github.com/adobe/spectrum-tokens/issues/58)) ([798d22d](https://github.com/adobe/spectrum-tokens/commit/798d22d531c4d2c783fc55f6c3c3748e90a6b879))
@@ -256,6 +256,7 @@
256
256
  "orange-700": "rgb(228, 111, 0)",
257
257
  "orange-800": "rgb(203, 93, 0)",
258
258
  "orange-900": "rgb(177, 76, 0)",
259
+ "overlay-color": "rgb(0, 0, 0)",
259
260
  "positive-background-color-default": "rgb(0, 122, 77)",
260
261
  "positive-background-color-down": "rgb(0, 81, 50)",
261
262
  "positive-background-color-hover": "rgb(0, 101, 62)",
@@ -595,6 +596,7 @@
595
596
  "orange-700": "rgb(225, 109, 0)",
596
597
  "orange-800": "rgb(244, 129, 12)",
597
598
  "orange-900": "rgb(254, 154, 46)",
599
+ "overlay-color": "rgb(0, 0, 0)",
598
600
  "positive-background-color-default": "rgb(67, 199, 143)",
599
601
  "positive-background-color-down": "rgb(129, 233, 184)",
600
602
  "positive-background-color-hover": "rgb(94, 217, 162)",
@@ -934,6 +936,7 @@
934
936
  "orange-700": "rgb(210, 98, 0)",
935
937
  "orange-800": "rgb(232, 116, 0)",
936
938
  "orange-900": "rgb(249, 137, 23)",
939
+ "overlay-color": "rgb(0, 0, 0)",
937
940
  "positive-background-color-default": "rgb(52, 187, 132)",
938
941
  "positive-background-color-down": "rgb(103, 222, 168)",
939
942
  "positive-background-color-hover": "rgb(75, 205, 149)",
@@ -1144,6 +1147,7 @@
1144
1147
  "in-line-alert-minimum-width": "320px",
1145
1148
  "line-height-100": "1.3",
1146
1149
  "line-height-200": "1.5",
1150
+ "overlay-opacity": "0.6",
1147
1151
  "popover-tip-height": "8px",
1148
1152
  "popover-tip-width": "16px",
1149
1153
  "popover-top-to-content-area": "4px",
@@ -1159,15 +1163,15 @@
1159
1163
  "progress-circle-thickness-large": "4px",
1160
1164
  "progress-circle-thickness-medium": "3px",
1161
1165
  "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",
1166
+ "radio-button-control-size-extra-large": "18px",
1167
+ "radio-button-control-size-large": "16px",
1168
+ "radio-button-control-size-medium": "14px",
1165
1169
  "radio-button-control-size-small": "12px",
1166
1170
  "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",
1171
+ "radio-button-top-to-control-extra-large": "15px",
1172
+ "radio-button-top-to-control-large": "12px",
1173
+ "radio-button-top-to-control-medium": "9px",
1174
+ "radio-button-top-to-control-small": "6px",
1171
1175
  "spacing-100": "8px",
1172
1176
  "spacing-1000": "96px",
1173
1177
  "spacing-200": "12px",
@@ -1188,6 +1192,14 @@
1188
1192
  "status-light-top-to-dot-large": "15px",
1189
1193
  "status-light-top-to-dot-medium": "12px",
1190
1194
  "status-light-top-to-dot-small": "8px",
1195
+ "swatch-size-extra-small": "16px",
1196
+ "swatch-size-large": "40px",
1197
+ "swatch-size-medium": "32px",
1198
+ "swatch-size-small": "24px",
1199
+ "swatch-slash-thickness-extra-small": "2px",
1200
+ "swatch-slash-thickness-large": "5px",
1201
+ "swatch-slash-thickness-medium": "4px",
1202
+ "swatch-slash-thickness-small": "3px",
1191
1203
  "switch-control-height-extra-large": "18px",
1192
1204
  "switch-control-height-large": "16px",
1193
1205
  "switch-control-height-medium": "14px",
@@ -72,6 +72,23 @@
72
72
  "ref": "{black}",
73
73
  "value": "rgb(0, 0, 0)"
74
74
  },
75
+ "overlay-color": {
76
+ "ref": "{black}",
77
+ "value": "rgb(0, 0, 0)"
78
+ },
79
+ "overlay-opacity": {
80
+ "sets": {
81
+ "light": {
82
+ "value": "0.4"
83
+ },
84
+ "dark": {
85
+ "value": "0.5"
86
+ },
87
+ "darkest": {
88
+ "value": "0.6"
89
+ }
90
+ }
91
+ },
75
92
  "neutral-content-color-default": {
76
93
  "ref": "{gray-800}",
77
94
  "sets": {
@@ -8308,6 +8325,61 @@
8308
8325
  }
8309
8326
  }
8310
8327
  },
8328
+ "swatch-size-extra-small": {
8329
+ "sets": {
8330
+ "desktop": {
8331
+ "value": "16px"
8332
+ },
8333
+ "mobile": {
8334
+ "value": "20px"
8335
+ }
8336
+ }
8337
+ },
8338
+ "swatch-size-small": {
8339
+ "sets": {
8340
+ "desktop": {
8341
+ "value": "24px"
8342
+ },
8343
+ "mobile": {
8344
+ "value": "30px"
8345
+ }
8346
+ }
8347
+ },
8348
+ "swatch-size-medium": {
8349
+ "sets": {
8350
+ "desktop": {
8351
+ "value": "32px"
8352
+ },
8353
+ "mobile": {
8354
+ "value": "40px"
8355
+ }
8356
+ }
8357
+ },
8358
+ "swatch-size-large": {
8359
+ "sets": {
8360
+ "desktop": {
8361
+ "value": "40px"
8362
+ },
8363
+ "mobile": {
8364
+ "value": "50px"
8365
+ }
8366
+ }
8367
+ },
8368
+ "swatch-rectangle-width-multiplier": {
8369
+ "value": "2"
8370
+ },
8371
+ "swatch-slash-thickness-extra-small": {
8372
+ "value": "2px"
8373
+ },
8374
+ "swatch-slash-thickness-small": {
8375
+ "value": "3px"
8376
+ },
8377
+ "swatch-slash-thickness-medium": {
8378
+ "value": "4px"
8379
+ },
8380
+ "swatch-slash-thickness-large": {
8381
+ "value": "5px"
8382
+ },
8311
8383
  "progress-bar-minimum-width": {
8312
8384
  "sets": {
8313
8385
  "desktop": {
@@ -8455,11 +8527,13 @@
8455
8527
  "radio-button-control-size-medium": {
8456
8528
  "sets": {
8457
8529
  "spectrum": {
8458
- "desktop": {
8459
- "value": "14px"
8460
- },
8461
- "mobile": {
8462
- "value": "18px"
8530
+ "sets": {
8531
+ "desktop": {
8532
+ "value": "14px"
8533
+ },
8534
+ "mobile": {
8535
+ "value": "18px"
8536
+ }
8463
8537
  }
8464
8538
  },
8465
8539
  "express": {
@@ -8477,11 +8551,13 @@
8477
8551
  "radio-button-control-size-large": {
8478
8552
  "sets": {
8479
8553
  "spectrum": {
8480
- "desktop": {
8481
- "value": "16px"
8482
- },
8483
- "mobile": {
8484
- "value": "20px"
8554
+ "sets": {
8555
+ "desktop": {
8556
+ "value": "16px"
8557
+ },
8558
+ "mobile": {
8559
+ "value": "20px"
8560
+ }
8485
8561
  }
8486
8562
  },
8487
8563
  "express": {
@@ -8499,11 +8575,13 @@
8499
8575
  "radio-button-control-size-extra-large": {
8500
8576
  "sets": {
8501
8577
  "spectrum": {
8502
- "desktop": {
8503
- "value": "18px"
8504
- },
8505
- "mobile": {
8506
- "value": "22px"
8578
+ "sets": {
8579
+ "desktop": {
8580
+ "value": "18px"
8581
+ },
8582
+ "mobile": {
8583
+ "value": "22px"
8584
+ }
8507
8585
  }
8508
8586
  },
8509
8587
  "express": {
@@ -8521,11 +8599,13 @@
8521
8599
  "radio-button-top-to-control-small": {
8522
8600
  "sets": {
8523
8601
  "spectrum": {
8524
- "desktop": {
8525
- "value": "6px"
8526
- },
8527
- "mobile": {
8528
- "value": "7px"
8602
+ "sets": {
8603
+ "desktop": {
8604
+ "value": "6px"
8605
+ },
8606
+ "mobile": {
8607
+ "value": "7px"
8608
+ }
8529
8609
  }
8530
8610
  },
8531
8611
  "express": {
@@ -8543,11 +8623,13 @@
8543
8623
  "radio-button-top-to-control-medium": {
8544
8624
  "sets": {
8545
8625
  "spectrum": {
8546
- "desktop": {
8547
- "value": "9px"
8548
- },
8549
- "mobile": {
8550
- "value": "11px"
8626
+ "sets": {
8627
+ "desktop": {
8628
+ "value": "9px"
8629
+ },
8630
+ "mobile": {
8631
+ "value": "11px"
8632
+ }
8551
8633
  }
8552
8634
  },
8553
8635
  "express": {
@@ -8565,11 +8647,13 @@
8565
8647
  "radio-button-top-to-control-large": {
8566
8648
  "sets": {
8567
8649
  "spectrum": {
8568
- "desktop": {
8569
- "value": "12px"
8570
- },
8571
- "mobile": {
8572
- "value": "15px"
8650
+ "sets": {
8651
+ "desktop": {
8652
+ "value": "12px"
8653
+ },
8654
+ "mobile": {
8655
+ "value": "15px"
8656
+ }
8573
8657
  }
8574
8658
  },
8575
8659
  "express": {
@@ -8587,11 +8671,13 @@
8587
8671
  "radio-button-top-to-control-extra-large": {
8588
8672
  "sets": {
8589
8673
  "spectrum": {
8590
- "desktop": {
8591
- "value": "15px"
8592
- },
8593
- "mobile": {
8594
- "value": "19px"
8674
+ "sets": {
8675
+ "desktop": {
8676
+ "value": "15px"
8677
+ },
8678
+ "mobile": {
8679
+ "value": "19px"
8680
+ }
8595
8681
  }
8596
8682
  },
8597
8683
  "express": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adobe/spectrum-tokens",
3
- "version": "12.0.0-beta.43",
3
+ "version": "12.0.0-beta.46",
4
4
  "description": "",
5
5
  "main": "config.js",
6
6
  "scripts": {
@@ -59,7 +59,22 @@
59
59
  "static-black-focus-ring-color": {
60
60
  "value": "{black}"
61
61
  },
62
-
62
+ "overlay-color": {
63
+ "value": "{black}"
64
+ },
65
+ "overlay-opacity": {
66
+ "sets": {
67
+ "light": {
68
+ "value": "0.4"
69
+ },
70
+ "dark": {
71
+ "value": "0.5"
72
+ },
73
+ "darkest": {
74
+ "value": "0.6"
75
+ }
76
+ }
77
+ },
63
78
  "neutral-content-color-default": {
64
79
  "value": "{gray-800}"
65
80
  },
@@ -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"
@@ -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
  }