@spectrum-web-components/styles 0.39.4 → 0.40.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 (3) hide show
  1. package/package.json +3 -3
  2. package/tokens/express/global-vars.css +147 -169
  3. package/tokens/spectrum/global-vars.css +131 -154
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "0.39.4",
3
+ "version": "0.40.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -104,7 +104,7 @@
104
104
  "lit-html"
105
105
  ],
106
106
  "dependencies": {
107
- "@spectrum-web-components/base": "^0.39.4"
107
+ "@spectrum-web-components/base": "^0.40.0"
108
108
  },
109
109
  "devDependencies": {
110
110
  "@spectrum-css/commons": "^8.0.0",
@@ -118,5 +118,5 @@
118
118
  "./**/*.css"
119
119
  ],
120
120
  "style": "all-medium-lightest.css",
121
- "gitHead": "f745c90e8e9ea85ff10be025e058b14cc925ec9f"
121
+ "gitHead": "24d5569a839da94892ecfd125428779587ffb1f5"
122
122
  }
package/tokens/express/global-vars.css CHANGED
@@ -1076,6 +1076,38 @@
1076
1076
  --system-spectrum-picker-border-color-key-focus: transparent;
1077
1077
  }
1078
1078
 
1079
+ :host,
1080
+ :root {
1081
+ --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var(
1082
+ --spectrum-gray-200
1083
+ );
1084
+ --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(
1085
+ --spectrum-gray-300
1086
+ );
1087
+ --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(
1088
+ --spectrum-gray-400
1089
+ );
1090
+ --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(
1091
+ --spectrum-gray-300
1092
+ );
1093
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none;
1094
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(
1095
+ --spectrum-corner-radius-75
1096
+ );
1097
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var(
1098
+ --spectrum-corner-radius-200
1099
+ );
1100
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var(
1101
+ --spectrum-corner-radius-75
1102
+ );
1103
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px;
1104
+ }
1105
+
1106
+ :host,
1107
+ :root {
1108
+ --system-spectrum-popover-border-width: 0;
1109
+ }
1110
+
1079
1111
  :host,
1080
1112
  :root {
1081
1113
  --system-spectrum-radio-button-border-color-default: var(
@@ -1097,6 +1129,111 @@
1097
1129
  --spectrum-accent-color-1000
1098
1130
  );
1099
1131
  }
1132
+ :host,
1133
+ :root {
1134
+ --system-spectrum-search-border-radius: calc(
1135
+ var(--spectrum-component-height-100) / 2
1136
+ );
1137
+ --system-spectrum-search-edge-to-visual: var(
1138
+ --spectrum-component-pill-edge-to-visual-100
1139
+ );
1140
+ --system-spectrum-search-border-color-default: var(--spectrum-gray-400);
1141
+ --system-spectrum-search-border-color-hover: var(--spectrum-gray-500);
1142
+ --system-spectrum-search-border-color-focus: var(--spectrum-gray-800);
1143
+ --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
1144
+ --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
1145
+ --system-spectrum-search-sizes-border-radius: calc(
1146
+ var(--spectrum-component-height-75) / 2
1147
+ );
1148
+ --system-spectrum-search-sizes-edge-to-visual: var(
1149
+ --spectrum-component-pill-edge-to-visual-75
1150
+ );
1151
+ --system-spectrum-search-sizem-border-radius: calc(
1152
+ var(--spectrum-component-height-100) / 2
1153
+ );
1154
+ --system-spectrum-search-sizem-edge-to-visual: var(
1155
+ --spectrum-component-pill-edge-to-visual-100
1156
+ );
1157
+ --system-spectrum-search-sizel-border-radius: calc(
1158
+ var(--spectrum-component-height-200) / 2
1159
+ );
1160
+ --system-spectrum-search-sizel-edge-to-visual: var(
1161
+ --spectrum-component-pill-edge-to-visual-200
1162
+ );
1163
+ --system-spectrum-search-sizexl-border-radius: calc(
1164
+ var(--spectrum-component-height-300) / 2
1165
+ );
1166
+ --system-spectrum-search-sizexl-edge-to-visual: var(
1167
+ --spectrum-component-pill-edge-to-visual-300
1168
+ );
1169
+ }
1170
+
1171
+ :host,
1172
+ :root {
1173
+ --system-spectrum-slider-track-color: var(--spectrum-gray-200);
1174
+ --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600);
1175
+ --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300);
1176
+ --system-spectrum-slider-ramp-track-color-disabled: var(
1177
+ --spectrum-gray-200
1178
+ );
1179
+ --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50);
1180
+ --system-spectrum-slider-handle-background-color-disabled: var(
1181
+ --spectrum-gray-50
1182
+ );
1183
+ --system-spectrum-slider-ramp-handle-background-color: var(
1184
+ --spectrum-gray-50
1185
+ );
1186
+ --system-spectrum-slider-ticks-handle-background-color: var(
1187
+ --spectrum-gray-50
1188
+ );
1189
+ --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800);
1190
+ --system-spectrum-slider-handle-disabled-background-color: var(
1191
+ --spectrum-gray-50
1192
+ );
1193
+ --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
1194
+ --system-spectrum-slider-handle-border-color-hover: var(
1195
+ --spectrum-gray-900
1196
+ );
1197
+ --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
1198
+ --system-spectrum-slider-handle-border-color-key-focus: var(
1199
+ --spectrum-gray-900
1200
+ );
1201
+ --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
1202
+ --spectrum-focus-indicator-color
1203
+ );
1204
+ }
1205
+
1206
+ :host,
1207
+ :root {
1208
+ --system-spectrum-stepper-border-width: var(--spectrum-border-width-200);
1209
+ --system-spectrum-stepper-buttons-border-style: solid;
1210
+ --system-spectrum-stepper-buttons-border-width: var(
1211
+ --spectrum-border-width-200
1212
+ );
1213
+ --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
1214
+ --system-spectrum-stepper-border-color: var(--spectrum-gray-400);
1215
+ --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
1216
+ --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
1217
+ --system-spectrum-stepper-border-color-focus-hover: var(
1218
+ --spectrum-gray-900
1219
+ );
1220
+ --system-spectrum-stepper-border-color-keyboard-focus: var(
1221
+ --spectrum-gray-900
1222
+ );
1223
+ --system-spectrum-stepper-button-border-radius-reset: var(
1224
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding
1225
+ );
1226
+ --system-spectrum-stepper-button-background-color-focus: var(
1227
+ --spectrum-gray-400
1228
+ );
1229
+ --system-spectrum-stepper-button-background-color-keyboard-focus: var(
1230
+ --spectrum-gray-300
1231
+ );
1232
+ --system-spectrum-stepper-disabled-buttons-background-color: var(
1233
+ --spectrum-disabled-background-color
1234
+ );
1235
+ --system-spectrum-stepper-disabled-buttons-border-width: 0;
1236
+ }
1100
1237
 
1101
1238
  :host,
1102
1239
  :root {
@@ -1124,6 +1261,11 @@
1124
1261
  );
1125
1262
  }
1126
1263
 
1264
+ :host,
1265
+ :root {
1266
+ --system-spectrum-tabs-font-weight: var(--spectrum-bold-font-weight);
1267
+ }
1268
+
1127
1269
  :host,
1128
1270
  :root {
1129
1271
  --system-spectrum-tag-border-color: var(--spectrum-gray-300);
@@ -1200,114 +1342,6 @@
1200
1342
  );
1201
1343
  }
1202
1344
 
1203
- :host,
1204
- :root {
1205
- --system-spectrum-toast-background-color-default: var(
1206
- --spectrum-neutral-background-color-default
1207
- );
1208
- }
1209
-
1210
- :host,
1211
- :root {
1212
- --system-spectrum-tooltip-backgound-color-default-neutral: var(
1213
- --spectrum-neutral-background-color-default
1214
- );
1215
- }
1216
-
1217
- :host,
1218
- :root {
1219
- --system-spectrum-picker-background-color-default: var(--spectrum-gray-200);
1220
- --system-spectrum-picker-background-color-default-open: var(
1221
- --spectrum-gray-300
1222
- );
1223
- --system-spectrum-picker-background-color-active: var(--spectrum-gray-400);
1224
- --system-spectrum-picker-background-color-hover: var(--spectrum-gray-300);
1225
- --system-spectrum-picker-background-color-hover-open: var(
1226
- --spectrum-gray-300
1227
- );
1228
- --system-spectrum-picker-background-color-key-focus: var(
1229
- --spectrum-gray-300
1230
- );
1231
- --system-spectrum-picker-border-color-default: transparent;
1232
- --system-spectrum-picker-border-color-default-open: transparent;
1233
- --system-spectrum-picker-border-color-hover: transparent;
1234
- --system-spectrum-picker-border-color-hover-open: transparent;
1235
- --system-spectrum-picker-border-color-active: transparent;
1236
- --system-spectrum-picker-border-color-key-focus: transparent;
1237
- }
1238
-
1239
- :host,
1240
- :root {
1241
- --system-spectrum-slider-track-color: var(--spectrum-gray-200);
1242
- --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600);
1243
- --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300);
1244
- --system-spectrum-slider-ramp-track-color-disabled: var(
1245
- --spectrum-gray-200
1246
- );
1247
- --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50);
1248
- --system-spectrum-slider-handle-background-color-disabled: var(
1249
- --spectrum-gray-50
1250
- );
1251
- --system-spectrum-slider-ramp-handle-background-color: var(
1252
- --spectrum-gray-50
1253
- );
1254
- --system-spectrum-slider-ticks-handle-background-color: var(
1255
- --spectrum-gray-50
1256
- );
1257
- --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800);
1258
- --system-spectrum-slider-handle-disabled-background-color: var(
1259
- --spectrum-gray-50
1260
- );
1261
- --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
1262
- --system-spectrum-slider-handle-border-color-hover: var(
1263
- --spectrum-gray-900
1264
- );
1265
- --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
1266
- --system-spectrum-slider-handle-border-color-key-focus: var(
1267
- --spectrum-gray-900
1268
- );
1269
- --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
1270
- --spectrum-focus-indicator-color
1271
- );
1272
- }
1273
-
1274
- :host,
1275
- :root {
1276
- --system-spectrum-popover-border-width: 0;
1277
- }
1278
-
1279
- :host,
1280
- :root {
1281
- --system-spectrum-stepper-border-width: var(--spectrum-border-width-200);
1282
- --system-spectrum-stepper-buttons-border-style: solid;
1283
- --system-spectrum-stepper-buttons-border-width: var(
1284
- --spectrum-border-width-200
1285
- );
1286
- --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
1287
- --system-spectrum-stepper-border-color: var(--spectrum-gray-400);
1288
- --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
1289
- --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
1290
- --system-spectrum-stepper-border-color-focus-hover: var(
1291
- --spectrum-gray-900
1292
- );
1293
- --system-spectrum-stepper-border-color-keyboard-focus: var(
1294
- --spectrum-gray-900
1295
- );
1296
- --system-spectrum-stepper-button-border-radius-reset: var(
1297
- --spectrum-in-field-button-fill-stacked-inner-border-rounding
1298
- );
1299
- --system-spectrum-stepper-button-background-color-focus: var(
1300
- --spectrum-gray-400
1301
- );
1302
- --system-spectrum-stepper-button-background-color-keyboard-focus: var(
1303
- --spectrum-gray-300
1304
- );
1305
- --system-spectrum-stepper-disabled-buttons-background-color: var(
1306
- --spectrum-disabled-background-color
1307
- );
1308
- --system-spectrum-stepper-disabled-buttons-border-width: 0;
1309
- }
1310
-
1311
1345
  :host,
1312
1346
  :root {
1313
1347
  --system-spectrum-textfield-border-color: var(--spectrum-gray-400);
@@ -1321,73 +1355,17 @@
1321
1355
  );
1322
1356
  --system-spectrum-textfield-border-width: var(--spectrum-border-width-200);
1323
1357
  }
1324
- :host,
1325
- :root {
1326
- --system-spectrum-search-border-radius: calc(
1327
- var(--spectrum-component-height-100) / 2
1328
- );
1329
- --system-spectrum-search-edge-to-visual: var(
1330
- --spectrum-component-pill-edge-to-visual-100
1331
- );
1332
- --system-spectrum-search-border-color-default: var(--spectrum-gray-400);
1333
- --system-spectrum-search-border-color-hover: var(--spectrum-gray-500);
1334
- --system-spectrum-search-border-color-focus: var(--spectrum-gray-800);
1335
- --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
1336
- --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
1337
- --system-spectrum-search-sizes-border-radius: calc(
1338
- var(--spectrum-component-height-75) / 2
1339
- );
1340
- --system-spectrum-search-sizes-edge-to-visual: var(
1341
- --spectrum-component-pill-edge-to-visual-75
1342
- );
1343
- --system-spectrum-search-sizem-border-radius: calc(
1344
- var(--spectrum-component-height-100) / 2
1345
- );
1346
- --system-spectrum-search-sizem-edge-to-visual: var(
1347
- --spectrum-component-pill-edge-to-visual-100
1348
- );
1349
- --system-spectrum-search-sizel-border-radius: calc(
1350
- var(--spectrum-component-height-200) / 2
1351
- );
1352
- --system-spectrum-search-sizel-edge-to-visual: var(
1353
- --spectrum-component-pill-edge-to-visual-200
1354
- );
1355
- --system-spectrum-search-sizexl-border-radius: calc(
1356
- var(--spectrum-component-height-300) / 2
1357
- );
1358
- --system-spectrum-search-sizexl-edge-to-visual: var(
1359
- --spectrum-component-pill-edge-to-visual-300
1360
- );
1361
- }
1362
1358
 
1363
1359
  :host,
1364
1360
  :root {
1365
- --system-spectrum-tabs-font-weight: var(--spectrum-bold-font-weight);
1361
+ --system-spectrum-toast-background-color-default: var(
1362
+ --spectrum-neutral-background-color-default
1363
+ );
1366
1364
  }
1367
1365
 
1368
1366
  :host,
1369
1367
  :root {
1370
- --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var(
1371
- --spectrum-gray-200
1372
- );
1373
- --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(
1374
- --spectrum-gray-300
1375
- );
1376
- --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(
1377
- --spectrum-gray-400
1378
- );
1379
- --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(
1380
- --spectrum-gray-300
1381
- );
1382
- --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none;
1383
- --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(
1384
- --spectrum-corner-radius-75
1385
- );
1386
- --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var(
1387
- --spectrum-corner-radius-200
1388
- );
1389
- --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var(
1390
- --spectrum-corner-radius-75
1368
+ --system-spectrum-tooltip-backgound-color-default-neutral: var(
1369
+ --spectrum-neutral-background-color-default
1391
1370
  );
1392
- --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px;
1393
1371
  }
package/tokens/spectrum/global-vars.css CHANGED
@@ -1090,6 +1090,34 @@
1090
1090
  --system-spectrum-picker-border-color-active: var(--spectrum-gray-700);
1091
1091
  --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
1092
1092
  }
1093
+ :host,
1094
+ :root {
1095
+ --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var(
1096
+ --spectrum-gray-75
1097
+ );
1098
+ --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(
1099
+ --spectrum-gray-200
1100
+ );
1101
+ --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(
1102
+ --spectrum-gray-300
1103
+ );
1104
+ --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(
1105
+ --spectrum-gray-200
1106
+ );
1107
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit;
1108
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(
1109
+ --spectrum-corner-radius-100
1110
+ );
1111
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0;
1112
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0;
1113
+ --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var(
1114
+ --spectrum-border-width-100
1115
+ );
1116
+ }
1117
+ :host,
1118
+ :root {
1119
+ --system-spectrum-popover-border-width: var(--spectrum-border-width-100);
1120
+ }
1093
1121
 
1094
1122
  :host,
1095
1123
  :root {
@@ -1112,6 +1140,99 @@
1112
1140
  --spectrum-accent-color-1000
1113
1141
  );
1114
1142
  }
1143
+ :host,
1144
+ :root {
1145
+ --system-spectrum-search-border-radius: var(--spectrum-corner-radius-100);
1146
+ --system-spectrum-search-edge-to-visual: var(
1147
+ --spectrum-component-edge-to-visual-100
1148
+ );
1149
+ --system-spectrum-search-border-color-default: var(--spectrum-gray-500);
1150
+ --system-spectrum-search-border-color-hover: var(--spectrum-gray-600);
1151
+ --system-spectrum-search-border-color-focus: var(--spectrum-gray-800);
1152
+ --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
1153
+ --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
1154
+ --system-spectrum-search-sizes-border-radius: var(
1155
+ --spectrum-corner-radius-100
1156
+ );
1157
+ --system-spectrum-search-sizes-edge-to-visual: var(
1158
+ --spectrum-component-edge-to-visual-75
1159
+ );
1160
+ --system-spectrum-search-sizem-border-radius: var(
1161
+ --spectrum-corner-radius-100
1162
+ );
1163
+ --system-spectrum-search-sizem-edge-to-visual: var(
1164
+ --spectrum-component-edge-to-visual-100
1165
+ );
1166
+ --system-spectrum-search-sizel-border-radius: var(
1167
+ --spectrum-corner-radius-100
1168
+ );
1169
+ --system-spectrum-search-sizel-edge-to-visual: var(
1170
+ --spectrum-component-edge-to-visual-200
1171
+ );
1172
+ --system-spectrum-search-sizexl-border-radius: var(
1173
+ --spectrum-corner-radius-100
1174
+ );
1175
+ --system-spectrum-search-sizexl-edge-to-visual: var(
1176
+ --spectrum-component-edge-to-visual-300
1177
+ );
1178
+ }
1179
+
1180
+ :host,
1181
+ :root {
1182
+ --system-spectrum-slider-track-color: var(--spectrum-gray-300);
1183
+ --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700);
1184
+ --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
1185
+ --system-spectrum-slider-ramp-track-color-disabled: var(
1186
+ --spectrum-gray-200
1187
+ );
1188
+ --system-spectrum-slider-handle-background-color: transparent;
1189
+ --system-spectrum-slider-handle-background-color-disabled: transparent;
1190
+ --system-spectrum-slider-ramp-handle-background-color: var(
1191
+ --spectrum-gray-100
1192
+ );
1193
+ --system-spectrum-slider-ticks-handle-background-color: var(
1194
+ --spectrum-gray-100
1195
+ );
1196
+ --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700);
1197
+ --system-spectrum-slider-handle-disabled-background-color: var(
1198
+ --spectrum-gray-100
1199
+ );
1200
+ --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
1201
+ --system-spectrum-slider-handle-border-color-hover: var(
1202
+ --spectrum-gray-800
1203
+ );
1204
+ --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
1205
+ --system-spectrum-slider-handle-border-color-key-focus: var(
1206
+ --spectrum-gray-800
1207
+ );
1208
+ --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
1209
+ --spectrum-focus-indicator-color
1210
+ );
1211
+ }
1212
+
1213
+ :host,
1214
+ :root {
1215
+ --system-spectrum-stepper-border-width: var(--spectrum-border-width-100);
1216
+ --system-spectrum-stepper-buttons-border-style: none;
1217
+ --system-spectrum-stepper-buttons-border-width: 0;
1218
+ --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
1219
+ --system-spectrum-stepper-border-color: var(--spectrum-gray-500);
1220
+ --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
1221
+ --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
1222
+ --system-spectrum-stepper-border-color-focus-hover: var(
1223
+ --spectrum-gray-800
1224
+ );
1225
+ --system-spectrum-stepper-border-color-keyboard-focus: var(
1226
+ --spectrum-gray-900
1227
+ );
1228
+ --system-spectrum-stepper-button-border-radius-reset: 0px;
1229
+ --system-spectrum-stepper-button-background-color-focus: var(
1230
+ --spectrum-gray-300
1231
+ );
1232
+ --system-spectrum-stepper-button-background-color-keyboard-focus: var(
1233
+ --spectrum-gray-200
1234
+ );
1235
+ }
1115
1236
 
1116
1237
  :host,
1117
1238
  :root {
@@ -1138,6 +1259,11 @@
1138
1259
  --spectrum-gray-800
1139
1260
  );
1140
1261
  }
1262
+
1263
+ :host,
1264
+ :root {
1265
+ --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight);
1266
+ }
1141
1267
  :host,
1142
1268
  :root {
1143
1269
  --system-spectrum-tag-border-color: var(--spectrum-gray-700);
@@ -1214,103 +1340,6 @@
1214
1340
  );
1215
1341
  }
1216
1342
  :host,
1217
- :root {
1218
- --system-spectrum-toast-background-color-default: var(
1219
- --spectrum-neutral-subdued-background-color-default
1220
- );
1221
- }
1222
- :host,
1223
- :root {
1224
- --system-spectrum-tooltip-backgound-color-default-neutral: var(
1225
- --spectrum-neutral-subdued-background-color-default
1226
- );
1227
- }
1228
-
1229
- :host,
1230
- :root {
1231
- --system-spectrum-picker-background-color-default: var(--spectrum-gray-75);
1232
- --system-spectrum-picker-background-color-default-open: var(
1233
- --spectrum-gray-200
1234
- );
1235
- --system-spectrum-picker-background-color-active: var(--spectrum-gray-300);
1236
- --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200);
1237
- --system-spectrum-picker-background-color-hover-open: var(
1238
- --spectrum-gray-200
1239
- );
1240
- --system-spectrum-picker-background-color-key-focus: var(
1241
- --spectrum-gray-200
1242
- );
1243
- --system-spectrum-picker-border-color-default: var(--spectrum-gray-500);
1244
- --system-spectrum-picker-border-color-default-open: var(
1245
- --spectrum-gray-500
1246
- );
1247
- --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600);
1248
- --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600);
1249
- --system-spectrum-picker-border-color-active: var(--spectrum-gray-700);
1250
- --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
1251
- }
1252
-
1253
- :host,
1254
- :root {
1255
- --system-spectrum-slider-track-color: var(--spectrum-gray-300);
1256
- --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700);
1257
- --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
1258
- --system-spectrum-slider-ramp-track-color-disabled: var(
1259
- --spectrum-gray-200
1260
- );
1261
- --system-spectrum-slider-handle-background-color: transparent;
1262
- --system-spectrum-slider-handle-background-color-disabled: transparent;
1263
- --system-spectrum-slider-ramp-handle-background-color: var(
1264
- --spectrum-gray-100
1265
- );
1266
- --system-spectrum-slider-ticks-handle-background-color: var(
1267
- --spectrum-gray-100
1268
- );
1269
- --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700);
1270
- --system-spectrum-slider-handle-disabled-background-color: var(
1271
- --spectrum-gray-100
1272
- );
1273
- --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
1274
- --system-spectrum-slider-handle-border-color-hover: var(
1275
- --spectrum-gray-800
1276
- );
1277
- --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
1278
- --system-spectrum-slider-handle-border-color-key-focus: var(
1279
- --spectrum-gray-800
1280
- );
1281
- --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
1282
- --spectrum-focus-indicator-color
1283
- );
1284
- }
1285
- :host,
1286
- :root {
1287
- --system-spectrum-popover-border-width: var(--spectrum-border-width-100);
1288
- }
1289
-
1290
- :host,
1291
- :root {
1292
- --system-spectrum-stepper-border-width: var(--spectrum-border-width-100);
1293
- --system-spectrum-stepper-buttons-border-style: none;
1294
- --system-spectrum-stepper-buttons-border-width: 0;
1295
- --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
1296
- --system-spectrum-stepper-border-color: var(--spectrum-gray-500);
1297
- --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
1298
- --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
1299
- --system-spectrum-stepper-border-color-focus-hover: var(
1300
- --spectrum-gray-800
1301
- );
1302
- --system-spectrum-stepper-border-color-keyboard-focus: var(
1303
- --spectrum-gray-900
1304
- );
1305
- --system-spectrum-stepper-button-border-radius-reset: 0px;
1306
- --system-spectrum-stepper-button-background-color-focus: var(
1307
- --spectrum-gray-300
1308
- );
1309
- --system-spectrum-stepper-button-background-color-keyboard-focus: var(
1310
- --spectrum-gray-200
1311
- );
1312
- }
1313
- :host,
1314
1343
  :root {
1315
1344
  --system-spectrum-textfield-border-color: var(--spectrum-gray-500);
1316
1345
  --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
@@ -1323,68 +1352,16 @@
1323
1352
  );
1324
1353
  --system-spectrum-textfield-border-width: var(--spectrum-border-width-100);
1325
1354
  }
1355
+
1326
1356
  :host,
1327
1357
  :root {
1328
- --system-spectrum-search-border-radius: var(--spectrum-corner-radius-100);
1329
- --system-spectrum-search-edge-to-visual: var(
1330
- --spectrum-component-edge-to-visual-100
1331
- );
1332
- --system-spectrum-search-border-color-default: var(--spectrum-gray-500);
1333
- --system-spectrum-search-border-color-hover: var(--spectrum-gray-600);
1334
- --system-spectrum-search-border-color-focus: var(--spectrum-gray-800);
1335
- --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
1336
- --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
1337
- --system-spectrum-search-sizes-border-radius: var(
1338
- --spectrum-corner-radius-100
1339
- );
1340
- --system-spectrum-search-sizes-edge-to-visual: var(
1341
- --spectrum-component-edge-to-visual-75
1342
- );
1343
- --system-spectrum-search-sizem-border-radius: var(
1344
- --spectrum-corner-radius-100
1345
- );
1346
- --system-spectrum-search-sizem-edge-to-visual: var(
1347
- --spectrum-component-edge-to-visual-100
1348
- );
1349
- --system-spectrum-search-sizel-border-radius: var(
1350
- --spectrum-corner-radius-100
1351
- );
1352
- --system-spectrum-search-sizel-edge-to-visual: var(
1353
- --spectrum-component-edge-to-visual-200
1354
- );
1355
- --system-spectrum-search-sizexl-border-radius: var(
1356
- --spectrum-corner-radius-100
1357
- );
1358
- --system-spectrum-search-sizexl-edge-to-visual: var(
1359
- --spectrum-component-edge-to-visual-300
1358
+ --system-spectrum-toast-background-color-default: var(
1359
+ --spectrum-neutral-subdued-background-color-default
1360
1360
  );
1361
1361
  }
1362
1362
  :host,
1363
1363
  :root {
1364
- --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight);
1365
- }
1366
-
1367
- :host,
1368
- :root {
1369
- --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var(
1370
- --spectrum-gray-75
1371
- );
1372
- --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var(
1373
- --spectrum-gray-200
1374
- );
1375
- --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var(
1376
- --spectrum-gray-300
1377
- );
1378
- --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var(
1379
- --spectrum-gray-200
1380
- );
1381
- --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit;
1382
- --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var(
1383
- --spectrum-corner-radius-100
1384
- );
1385
- --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0;
1386
- --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0;
1387
- --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var(
1388
- --spectrum-border-width-100
1364
+ --system-spectrum-tooltip-backgound-color-default-neutral: var(
1365
+ --spectrum-neutral-subdued-background-color-default
1389
1366
  );
1390
1367
  }