@spectrum-web-components/styles 0.34.1-rc.0 → 0.35.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 (13) hide show
  1. package/express/spectrum-core-global.css +0 -3
  2. package/package.json +6 -6
  3. package/tokens/express/global-vars.css +34 -71
  4. package/tokens/global-vars.css +59 -0
  5. package/tokens/large-vars.css +67 -0
  6. package/tokens/medium-vars.css +67 -0
  7. package/tokens/spectrum/custom-dark-vars.css +28 -0
  8. package/tokens/spectrum/custom-darkest-vars.css +30 -0
  9. package/tokens/spectrum/custom-large-vars.css +4 -0
  10. package/tokens/spectrum/custom-light-vars.css +29 -0
  11. package/tokens/spectrum/custom-medium-vars.css +4 -0
  12. package/tokens/spectrum/custom-vars.css +11 -10
  13. package/tokens/spectrum/global-vars.css +38 -68
package/express/spectrum-core-global.css CHANGED
@@ -2621,7 +2621,4 @@ governing permissions and limitations under the License.
2621
2621
  --spectrum-colorcontrol-checkerboard-dark-color: var(
2622
2622
  --spectrum-global-color-static-gray-200
2623
2623
  );
2624
- --spectrum-slide-label-text-size: var(
2625
- --spectrum-global-dimension-font-size-100
2626
- );
2627
2624
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "0.34.1-rc.0+1647bfed5",
3
+ "version": "0.35.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -104,13 +104,13 @@
104
104
  "lit-html"
105
105
  ],
106
106
  "dependencies": {
107
- "@spectrum-web-components/base": "^0.34.1-rc.0+1647bfed5"
107
+ "@spectrum-web-components/base": "^0.35.0"
108
108
  },
109
109
  "devDependencies": {
110
110
  "@spectrum-css/commons": "^7.0.8",
111
- "@spectrum-css/expressvars": "^3.0.8",
112
- "@spectrum-css/tokens": "^10.2.0",
113
- "@spectrum-css/typography": "^5.0.23",
111
+ "@spectrum-css/expressvars": "^3.0.9",
112
+ "@spectrum-css/tokens": "^11.0.1",
113
+ "@spectrum-css/typography": "^5.0.28",
114
114
  "@spectrum-css/vars": "^9.0.8"
115
115
  },
116
116
  "customElements": "custom-elements.json",
@@ -118,5 +118,5 @@
118
118
  "./**/*.css"
119
119
  ],
120
120
  "style": "all-medium-lightest.css",
121
- "gitHead": "1647bfed54cb29f3513343cd0d2c2d9e73e1c508"
121
+ "gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
122
122
  }
package/tokens/express/global-vars.css CHANGED
@@ -27,6 +27,16 @@ governing permissions and limitations under the License.
27
27
  );
28
28
  --spectrum-slider-track-thickness: 4px;
29
29
  --spectrum-slider-handle-gap: 0px;
30
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px;
31
+ --spectrum-in-field-button-edge-to-fill: 4px;
32
+ --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px;
33
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px;
34
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px;
35
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px;
36
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px;
37
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px;
38
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px;
39
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px;
30
40
  --spectrum-border-width-100: 2px;
31
41
  --spectrum-accent-color-100: var(--spectrum-indigo-100);
32
42
  --spectrum-accent-color-200: var(--spectrum-indigo-200);
@@ -73,18 +83,6 @@ governing permissions and limitations under the License.
73
83
  --system-spectrum-actionbutton-border-color-hover: transparent;
74
84
  --system-spectrum-actionbutton-border-color-down: transparent;
75
85
  --system-spectrum-actionbutton-border-color-focus: transparent;
76
- --system-spectrum-actionbutton-content-color-default: var(
77
- --spectrum-neutral-content-color-default
78
- );
79
- --system-spectrum-actionbutton-content-color-hover: var(
80
- --spectrum-neutral-content-color-hover
81
- );
82
- --system-spectrum-actionbutton-content-color-down: var(
83
- --spectrum-neutral-content-color-down
84
- );
85
- --system-spectrum-actionbutton-content-color-focus: var(
86
- --spectrum-neutral-content-color-key-focus
87
- );
88
86
  --system-spectrum-actionbutton-background-color-disabled: var(
89
87
  --spectrum-disabled-background-color
90
88
  );
@@ -94,13 +92,13 @@ governing permissions and limitations under the License.
94
92
  );
95
93
  --system-spectrum-actionbutton-quiet-background-color-default: transparent;
96
94
  --system-spectrum-actionbutton-quiet-background-color-hover: var(
97
- --spectrum-gray-200
95
+ --spectrum-gray-300
98
96
  );
99
97
  --system-spectrum-actionbutton-quiet-background-color-down: var(
100
- --spectrum-gray-300
98
+ --spectrum-gray-400
101
99
  );
102
100
  --system-spectrum-actionbutton-quiet-background-color-focus: var(
103
- --spectrum-gray-200
101
+ --spectrum-gray-300
104
102
  );
105
103
  --system-spectrum-actionbutton-quiet-border-color-default: transparent;
106
104
  --system-spectrum-actionbutton-quiet-border-color-hover: transparent;
@@ -108,50 +106,14 @@ governing permissions and limitations under the License.
108
106
  --system-spectrum-actionbutton-quiet-border-color-focus: transparent;
109
107
  --system-spectrum-actionbutton-quiet-background-color-disabled: transparent;
110
108
  --system-spectrum-actionbutton-quiet-border-color-disabled: transparent;
111
- --system-spectrum-actionbutton-selected-background-color-default: var(
112
- --spectrum-neutral-background-color-default
113
- );
114
- --system-spectrum-actionbutton-selected-background-color-hover: var(
115
- --spectrum-neutral-background-color-hover
116
- );
117
- --system-spectrum-actionbutton-selected-background-color-down: var(
118
- --spectrum-neutral-background-color-down
119
- );
120
- --system-spectrum-actionbutton-selected-background-color-focus: var(
121
- --spectrum-neutral-background-color-key-focus
122
- );
123
109
  --system-spectrum-actionbutton-selected-border-color-default: transparent;
124
110
  --system-spectrum-actionbutton-selected-border-color-hover: transparent;
125
111
  --system-spectrum-actionbutton-selected-border-color-down: transparent;
126
112
  --system-spectrum-actionbutton-selected-border-color-focus: transparent;
127
- --system-spectrum-actionbutton-selected-content-color-default: var(
128
- --spectrum-white
129
- );
130
- --system-spectrum-actionbutton-selected-content-color-hover: var(
131
- --spectrum-white
132
- );
133
- --system-spectrum-actionbutton-selected-content-color-down: var(
134
- --spectrum-white
135
- );
136
- --system-spectrum-actionbutton-selected-content-color-focus: var(
137
- --spectrum-white
138
- );
139
113
  --system-spectrum-actionbutton-selected-background-color-disabled: var(
140
114
  --spectrum-disabled-background-color
141
115
  );
142
116
  --system-spectrum-actionbutton-selected-border-color-disabled: transparent;
143
- --system-spectrum-actionbutton-selected-emphasized-background-color-default: var(
144
- --spectrum-accent-background-color-default
145
- );
146
- --system-spectrum-actionbutton-selected-emphasized-background-color-hover: var(
147
- --spectrum-accent-background-color-hover
148
- );
149
- --system-spectrum-actionbutton-selected-emphasized-background-color-down: var(
150
- --spectrum-accent-background-color-down
151
- );
152
- --system-spectrum-actionbutton-selected-emphasized-background-color-focus: var(
153
- --spectrum-accent-background-color-key-focus
154
- );
155
117
  --system-spectrum-actionbutton-staticblack-quiet-border-color-default: transparent;
156
118
  --system-spectrum-actionbutton-staticwhite-quiet-border-color-default: transparent;
157
119
  --system-spectrum-actionbutton-staticblack-quiet-border-color-hover: transparent;
@@ -200,34 +162,34 @@ governing permissions and limitations under the License.
200
162
  --system-spectrum-actionbutton-staticblack-content-color-disabled: var(
201
163
  --spectrum-disabled-static-black-content-color
202
164
  );
203
- --system-spectrum-actionbutton-staticblack-selected-background-color-default: var(
165
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default: var(
204
166
  --spectrum-transparent-black-800
205
167
  );
206
- --system-spectrum-actionbutton-staticblack-selected-background-color-hover: var(
168
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var(
207
169
  --spectrum-transparent-black-900
208
170
  );
209
- --system-spectrum-actionbutton-staticblack-selected-background-color-down: var(
171
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var(
210
172
  --spectrum-transparent-black-900
211
173
  );
212
- --system-spectrum-actionbutton-staticblack-selected-background-color-focus: var(
174
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var(
213
175
  --spectrum-transparent-black-900
214
176
  );
215
- --system-spectrum-actionbutton-staticblack-selected-border-color-disabled: transparent;
216
- --system-spectrum-actionbutton-staticblack-selected-content-color-default: var(
177
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var(
217
178
  --spectrum-white
218
179
  );
219
- --system-spectrum-actionbutton-staticblack-selected-content-color-hover: var(
180
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var(
220
181
  --spectrum-white
221
182
  );
222
- --system-spectrum-actionbutton-staticblack-selected-content-color-down: var(
183
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var(
223
184
  --spectrum-white
224
185
  );
225
- --system-spectrum-actionbutton-staticblack-selected-content-color-focus: var(
186
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var(
226
187
  --spectrum-white
227
188
  );
228
- --system-spectrum-actionbutton-staticblack-selected-background-color-disabled: var(
189
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var(
229
190
  --spectrum-disabled-static-black-background-color
230
191
  );
192
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent;
231
193
  --system-spectrum-actionbutton-staticwhite-background-color-default: var(
232
194
  --spectrum-transparent-white-200
233
195
  );
@@ -266,34 +228,34 @@ governing permissions and limitations under the License.
266
228
  --system-spectrum-actionbutton-staticwhite-content-color-disabled: var(
267
229
  --spectrum-disabled-static-white-content-color
268
230
  );
269
- --system-spectrum-actionbutton-staticwhite-selected-background-color-default: var(
231
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default: var(
270
232
  --spectrum-transparent-white-800
271
233
  );
272
- --system-spectrum-actionbutton-staticwhite-selected-background-color-hover: var(
234
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var(
273
235
  --spectrum-transparent-white-900
274
236
  );
275
- --system-spectrum-actionbutton-staticwhite-selected-background-color-down: var(
237
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var(
276
238
  --spectrum-transparent-white-900
277
239
  );
278
- --system-spectrum-actionbutton-staticwhite-selected-background-color-focus: var(
240
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var(
279
241
  --spectrum-transparent-white-900
280
242
  );
281
- --system-spectrum-actionbutton-staticwhite-selected-content-color-default: var(
243
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var(
282
244
  --spectrum-black
283
245
  );
284
- --system-spectrum-actionbutton-staticwhite-selected-content-color-hover: var(
246
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var(
285
247
  --spectrum-black
286
248
  );
287
- --system-spectrum-actionbutton-staticwhite-selected-content-color-down: var(
249
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var(
288
250
  --spectrum-black
289
251
  );
290
- --system-spectrum-actionbutton-staticwhite-selected-content-color-focus: var(
252
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var(
291
253
  --spectrum-black
292
254
  );
293
- --system-spectrum-actionbutton-staticwhite-selected-background-color-disabled: var(
255
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var(
294
256
  --spectrum-disabled-static-white-background-color
295
257
  );
296
- --system-spectrum-actionbutton-staticwhite-selected-border-color-disabled: transparent;
258
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent;
297
259
  }
298
260
 
299
261
  :host,
@@ -1249,6 +1211,7 @@ governing permissions and limitations under the License.
1249
1211
  --spectrum-component-pill-edge-to-visual-200
1250
1212
  );
1251
1213
  }
1214
+
1252
1215
  :host,
1253
1216
  :root {
1254
1217
  --system-spectrum-tooltip-backgound-color-default-neutral: var(
package/tokens/global-vars.css CHANGED
@@ -129,6 +129,19 @@ governing permissions and limitations under the License.
129
129
  --spectrum-floating-action-button-shadow-color: var(
130
130
  --spectrum-floating-action-button-drop-shadow-color
131
131
  );
132
+ --spectrum-table-row-hover-color: var(--spectrum-gray-900);
133
+ --spectrum-table-row-hover-opacity: 0.07;
134
+ --spectrum-table-selected-row-background-color: var(
135
+ --spectrum-informative-background-color-default
136
+ );
137
+ --spectrum-table-selected-row-background-opacity: 0.1;
138
+ --spectrum-table-selected-row-background-color-non-emphasized: var(
139
+ --spectrum-neutral-background-color-selected-default
140
+ );
141
+ --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1;
142
+ --spectrum-table-row-down-opacity: 0.1;
143
+ --spectrum-table-selected-row-background-opacity-hover: 0.15;
144
+ --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15;
132
145
  --spectrum-white-rgb: 255, 255, 255;
133
146
  --spectrum-white: rgba(var(--spectrum-white-rgb));
134
147
  --spectrum-transparent-white-100-rgb: 255, 255, 255;
@@ -322,6 +335,43 @@ governing permissions and limitations under the License.
322
335
  --spectrum-color-handle-drop-shadow-x: 0;
323
336
  --spectrum-color-handle-drop-shadow-y: 0;
324
337
  --spectrum-color-handle-drop-shadow-blur: 0;
338
+ --spectrum-table-row-height-small-compact: var(
339
+ --spectrum-component-height-75
340
+ );
341
+ --spectrum-table-row-height-medium-compact: var(
342
+ --spectrum-component-height-100
343
+ );
344
+ --spectrum-table-row-height-large-compact: var(
345
+ --spectrum-component-height-200
346
+ );
347
+ --spectrum-table-row-height-extra-large-compact: var(
348
+ --spectrum-component-height-300
349
+ );
350
+ --spectrum-table-row-top-to-text-small-compact: var(
351
+ --spectrum-component-top-to-text-75
352
+ );
353
+ --spectrum-table-row-top-to-text-medium-compact: var(
354
+ --spectrum-component-top-to-text-100
355
+ );
356
+ --spectrum-table-row-top-to-text-large-compact: var(
357
+ --spectrum-component-top-to-text-200
358
+ );
359
+ --spectrum-table-row-top-to-text-extra-large-compact: var(
360
+ --spectrum-component-top-to-text-300
361
+ );
362
+ --spectrum-table-row-bottom-to-text-small-compact: var(
363
+ --spectrum-component-bottom-to-text-75
364
+ );
365
+ --spectrum-table-row-bottom-to-text-medium-compact: var(
366
+ --spectrum-component-bottom-to-text-100
367
+ );
368
+ --spectrum-table-row-bottom-to-text-large-compact: var(
369
+ --spectrum-component-bottom-to-text-200
370
+ );
371
+ --spectrum-table-row-bottom-to-text-extra-large-compact: var(
372
+ --spectrum-component-bottom-to-text-300
373
+ );
374
+ --spectrum-table-border-divider-width: 1px;
325
375
  --spectrum-tab-item-height-small: var(--spectrum-component-height-200);
326
376
  --spectrum-tab-item-height-medium: var(--spectrum-component-height-300);
327
377
  --spectrum-tab-item-height-large: var(--spectrum-component-height-400);
@@ -341,6 +391,15 @@ governing permissions and limitations under the License.
341
391
  --spectrum-component-height-300
342
392
  );
343
393
  --spectrum-tab-item-start-to-edge-quiet: 0px;
394
+ --spectrum-in-field-button-width-stacked-small: 20px;
395
+ --spectrum-in-field-button-width-stacked-medium: 28px;
396
+ --spectrum-in-field-button-width-stacked-large: 36px;
397
+ --spectrum-in-field-button-width-stacked-extra-large: 44px;
398
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px;
399
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px;
400
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px;
401
+ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px;
402
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px;
344
403
  --spectrum-android-elevation: 2dp;
345
404
  --spectrum-spacing-50: 2px;
346
405
  --spectrum-spacing-75: 4px;
package/tokens/large-vars.css CHANGED
@@ -206,6 +206,72 @@ governing permissions and limitations under the License.
206
206
  --spectrum-accordion-content-area-bottom-to-content: 20px;
207
207
  --spectrum-color-handle-size: 20px;
208
208
  --spectrum-color-handle-size-key-focus: 40px;
209
+ --spectrum-table-column-header-row-top-to-text-small: 10px;
210
+ --spectrum-table-column-header-row-top-to-text-medium: 9px;
211
+ --spectrum-table-column-header-row-top-to-text-large: 13px;
212
+ --spectrum-table-column-header-row-top-to-text-extra-large: 16px;
213
+ --spectrum-table-column-header-row-bottom-to-text-small: 11px;
214
+ --spectrum-table-column-header-row-bottom-to-text-medium: 10px;
215
+ --spectrum-table-column-header-row-bottom-to-text-large: 13px;
216
+ --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px;
217
+ --spectrum-table-row-height-small-regular: 40px;
218
+ --spectrum-table-row-height-medium-regular: 50px;
219
+ --spectrum-table-row-height-large-regular: 60px;
220
+ --spectrum-table-row-height-extra-large-regular: 70px;
221
+ --spectrum-table-row-height-small-spacious: 50px;
222
+ --spectrum-table-row-height-medium-spacious: 60px;
223
+ --spectrum-table-row-height-large-spacious: 70px;
224
+ --spectrum-table-row-height-extra-large-spacious: 80px;
225
+ --spectrum-table-row-top-to-text-small-regular: 10px;
226
+ --spectrum-table-row-top-to-text-medium-regular: 14px;
227
+ --spectrum-table-row-top-to-text-large-regular: 18px;
228
+ --spectrum-table-row-top-to-text-extra-large-regular: 21px;
229
+ --spectrum-table-row-bottom-to-text-small-regular: 11px;
230
+ --spectrum-table-row-bottom-to-text-medium-regular: 15px;
231
+ --spectrum-table-row-bottom-to-text-large-regular: 18px;
232
+ --spectrum-table-row-bottom-to-text-extra-large-regular: 22px;
233
+ --spectrum-table-row-top-to-text-small-spacious: 15px;
234
+ --spectrum-table-row-top-to-text-medium-spacious: 18px;
235
+ --spectrum-table-row-top-to-text-large-spacious: 23px;
236
+ --spectrum-table-row-top-to-text-extra-large-spacious: 26px;
237
+ --spectrum-table-row-bottom-to-text-small-spacious: 16px;
238
+ --spectrum-table-row-bottom-to-text-medium-spacious: 18px;
239
+ --spectrum-table-row-bottom-to-text-large-spacious: 23px;
240
+ --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px;
241
+ --spectrum-table-edge-to-content: 16px;
242
+ --spectrum-table-checkbox-to-text: 30px;
243
+ --spectrum-table-header-row-checkbox-to-top-small: 14px;
244
+ --spectrum-table-header-row-checkbox-to-top-medium: 13px;
245
+ --spectrum-table-header-row-checkbox-to-top-large: 17px;
246
+ --spectrum-table-header-row-checkbox-to-top-extra-large: 21px;
247
+ --spectrum-table-row-checkbox-to-top-small-compact: 9px;
248
+ --spectrum-table-row-checkbox-to-top-small-regular: 14px;
249
+ --spectrum-table-row-checkbox-to-top-small-spacious: 19px;
250
+ --spectrum-table-row-checkbox-to-top-medium-compact: 13px;
251
+ --spectrum-table-row-checkbox-to-top-medium-regular: 18px;
252
+ --spectrum-table-row-checkbox-to-top-medium-spacious: 23px;
253
+ --spectrum-table-row-checkbox-to-top-large-compact: 17px;
254
+ --spectrum-table-row-checkbox-to-top-large-regular: 22px;
255
+ --spectrum-table-row-checkbox-to-top-large-spacious: 27px;
256
+ --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px;
257
+ --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px;
258
+ --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px;
259
+ --spectrum-table-section-header-row-height-small: 30px;
260
+ --spectrum-table-section-header-row-height-medium: 40px;
261
+ --spectrum-table-section-header-row-height-large: 50px;
262
+ --spectrum-table-section-header-row-height-extra-large: 60px;
263
+ --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px;
264
+ --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px;
265
+ --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px;
266
+ --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px;
267
+ --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px;
268
+ --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px;
269
+ --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px;
270
+ --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px;
271
+ --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px;
272
+ --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px;
273
+ --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px;
274
+ --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px;
209
275
  --spectrum-tab-item-to-tab-item-horizontal-small: 27px;
210
276
  --spectrum-tab-item-to-tab-item-horizontal-medium: 30px;
211
277
  --spectrum-tab-item-to-tab-item-horizontal-large: 33px;
@@ -255,6 +321,7 @@ governing permissions and limitations under the License.
255
321
  --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px;
256
322
  --spectrum-side-navigation-item-to-item: 5px;
257
323
  --spectrum-side-navigation-item-to-header: 20px;
324
+ --spectrum-side-navigation-bottom-to-text: 10px;
258
325
  --spectrum-tray-top-to-content-area: 5px;
259
326
  --spectrum-workflow-icon-size-50: 18px;
260
327
  --spectrum-workflow-icon-size-75: 20px;
package/tokens/medium-vars.css CHANGED
@@ -203,6 +203,72 @@ governing permissions and limitations under the License.
203
203
  --spectrum-accordion-content-area-bottom-to-content: 16px;
204
204
  --spectrum-color-handle-size: 16px;
205
205
  --spectrum-color-handle-size-key-focus: 32px;
206
+ --spectrum-table-column-header-row-top-to-text-small: 8px;
207
+ --spectrum-table-column-header-row-top-to-text-medium: 7px;
208
+ --spectrum-table-column-header-row-top-to-text-large: 10px;
209
+ --spectrum-table-column-header-row-top-to-text-extra-large: 13px;
210
+ --spectrum-table-column-header-row-bottom-to-text-small: 9px;
211
+ --spectrum-table-column-header-row-bottom-to-text-medium: 8px;
212
+ --spectrum-table-column-header-row-bottom-to-text-large: 10px;
213
+ --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px;
214
+ --spectrum-table-row-height-small-regular: 32px;
215
+ --spectrum-table-row-height-medium-regular: 40px;
216
+ --spectrum-table-row-height-large-regular: 48px;
217
+ --spectrum-table-row-height-extra-large-regular: 56px;
218
+ --spectrum-table-row-height-small-spacious: 40px;
219
+ --spectrum-table-row-height-medium-spacious: 48px;
220
+ --spectrum-table-row-height-large-spacious: 56px;
221
+ --spectrum-table-row-height-extra-large-spacious: 64px;
222
+ --spectrum-table-row-top-to-text-small-regular: 8px;
223
+ --spectrum-table-row-top-to-text-medium-regular: 11px;
224
+ --spectrum-table-row-top-to-text-large-regular: 14px;
225
+ --spectrum-table-row-top-to-text-extra-large-regular: 17px;
226
+ --spectrum-table-row-bottom-to-text-small-regular: 9px;
227
+ --spectrum-table-row-bottom-to-text-medium-regular: 12px;
228
+ --spectrum-table-row-bottom-to-text-large-regular: 14px;
229
+ --spectrum-table-row-bottom-to-text-extra-large-regular: 17px;
230
+ --spectrum-table-row-top-to-text-small-spacious: 12px;
231
+ --spectrum-table-row-top-to-text-medium-spacious: 15px;
232
+ --spectrum-table-row-top-to-text-large-spacious: 18px;
233
+ --spectrum-table-row-top-to-text-extra-large-spacious: 21px;
234
+ --spectrum-table-row-bottom-to-text-small-spacious: 13px;
235
+ --spectrum-table-row-bottom-to-text-medium-spacious: 16px;
236
+ --spectrum-table-row-bottom-to-text-large-spacious: 18px;
237
+ --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px;
238
+ --spectrum-table-edge-to-content: 16px;
239
+ --spectrum-table-checkbox-to-text: 24px;
240
+ --spectrum-table-header-row-checkbox-to-top-small: 10px;
241
+ --spectrum-table-header-row-checkbox-to-top-medium: 9px;
242
+ --spectrum-table-header-row-checkbox-to-top-large: 12px;
243
+ --spectrum-table-header-row-checkbox-to-top-extra-large: 15px;
244
+ --spectrum-table-row-checkbox-to-top-small-compact: 6px;
245
+ --spectrum-table-row-checkbox-to-top-small-regular: 10px;
246
+ --spectrum-table-row-checkbox-to-top-small-spacious: 14px;
247
+ --spectrum-table-row-checkbox-to-top-medium-compact: 9px;
248
+ --spectrum-table-row-checkbox-to-top-medium-regular: 13px;
249
+ --spectrum-table-row-checkbox-to-top-medium-spacious: 17px;
250
+ --spectrum-table-row-checkbox-to-top-large-compact: 12px;
251
+ --spectrum-table-row-checkbox-to-top-large-regular: 16px;
252
+ --spectrum-table-row-checkbox-to-top-large-spacious: 20px;
253
+ --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px;
254
+ --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px;
255
+ --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px;
256
+ --spectrum-table-section-header-row-height-small: 24px;
257
+ --spectrum-table-section-header-row-height-medium: 32px;
258
+ --spectrum-table-section-header-row-height-large: 40px;
259
+ --spectrum-table-section-header-row-height-extra-large: 48px;
260
+ --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px;
261
+ --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px;
262
+ --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px;
263
+ --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px;
264
+ --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px;
265
+ --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px;
266
+ --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px;
267
+ --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px;
268
+ --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px;
269
+ --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px;
270
+ --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px;
271
+ --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px;
206
272
  --spectrum-tab-item-to-tab-item-horizontal-small: 21px;
207
273
  --spectrum-tab-item-to-tab-item-horizontal-medium: 24px;
208
274
  --spectrum-tab-item-to-tab-item-horizontal-large: 27px;
@@ -252,6 +318,7 @@ governing permissions and limitations under the License.
252
318
  --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px;
253
319
  --spectrum-side-navigation-item-to-item: 4px;
254
320
  --spectrum-side-navigation-item-to-header: 16px;
321
+ --spectrum-side-navigation-bottom-to-text: 8px;
255
322
  --spectrum-tray-top-to-content-area: 4px;
256
323
  --spectrum-workflow-icon-size-50: 14px;
257
324
  --spectrum-workflow-icon-size-75: 16px;
package/tokens/spectrum/custom-dark-vars.css CHANGED
@@ -32,4 +32,32 @@ governing permissions and limitations under the License.
32
32
  --spectrum-drop-zone-background-color-rgb: var(
33
33
  --spectrum-blue-900-rgb
34
34
  ); /* var(--spectrum-accent-color-900);*/
35
+
36
+ --spectrum-calendar-day-background-color-selected: rgba(
37
+ var(--spectrum-blue-800-rgb),
38
+ 0.15
39
+ );
40
+ --spectrum-calendar-day-background-color-hover: rgba(
41
+ var(--spectrum-white-rgb),
42
+ 0.07
43
+ );
44
+ --spectrum-calendar-day-today-background-color-selected-hover: rgba(
45
+ var(--spectrum-blue-800-rgb),
46
+ 0.25
47
+ );
48
+ --spectrum-calendar-day-background-color-selected-hover: rgba(
49
+ var(--spectrum-blue-800-rgb),
50
+ 0.25
51
+ );
52
+ --spectrum-calendar-day-background-color-down: var(
53
+ --spectrum-transparent-white-200
54
+ );
55
+ --spectrum-calendar-day-background-color-cap-selected: rgba(
56
+ var(--spectrum-blue-800-rgb),
57
+ 0.25
58
+ );
59
+ --spectrum-calendar-day-background-color-key-focus: var(
60
+ --spectrum-transparent-white-600
61
+ );
62
+ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
35
63
  }
package/tokens/spectrum/custom-darkest-vars.css CHANGED
@@ -32,4 +32,34 @@ governing permissions and limitations under the License.
32
32
  --spectrum-drop-zone-background-color-rgb: var(
33
33
  --spectrum-blue-900-rgb
34
34
  ); /* var(--spectrum-accent-color-900);*/
35
+
36
+ --spectrum-calendar-day-background-color-selected: rgba(
37
+ var(--spectrum-blue-800-rgb),
38
+ 0.2
39
+ );
40
+ --spectrum-calendar-day-background-color-hover: rgba(
41
+ var(--spectrum-white-rgb),
42
+ 0.08
43
+ );
44
+ --spectrum-calendar-day-today-background-color-selected-hover: rgba(
45
+ var(--spectrum-blue-800-rgb),
46
+ 0.3
47
+ );
48
+ --spectrum-calendar-day-background-color-selected-hover: rgba(
49
+ var(--spectrum-blue-800-rgb),
50
+ 0.3
51
+ );
52
+ --spectrum-calendar-day-background-color-down: rgba(
53
+ var(--spectrum-white-rgb),
54
+ 0.15
55
+ );
56
+ --spectrum-calendar-day-background-color-cap-selected: rgba(
57
+ var(--spectrum-blue-800-rgb),
58
+ 0.3
59
+ );
60
+ --spectrum-calendar-day-background-color-key-focus: rgba(
61
+ var(--spectrum-white-rgb),
62
+ 0.08
63
+ );
64
+ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
35
65
  }
package/tokens/spectrum/custom-large-vars.css CHANGED
@@ -59,4 +59,8 @@ governing permissions and limitations under the License.
59
59
  --spectrum-alert-banner-text-to-button-vertical: var(
60
60
  --spectrum-spacing-200
61
61
  );
62
+
63
+ --spectrum-sidenav-heading-top-margin: 30px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is updated */
64
+ --spectrum-sidenav-heading-bottom-margin: 10px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is added */
65
+ --spectrum-sidenav-bottom-to-label: 10px; /* TODO replace with updated var(--spectrum-component-bottom-to-text-100); */
62
66
  }
package/tokens/spectrum/custom-light-vars.css CHANGED
@@ -32,4 +32,33 @@ governing permissions and limitations under the License.
32
32
  --spectrum-drop-zone-background-color-rgb: var(
33
33
  --spectrum-blue-800-rgb
34
34
  ); /* var(--spectrum-accent-color-800);*/
35
+
36
+ --spectrum-calendar-day-background-color-selected: rgba(
37
+ var(--spectrum-blue-900-rgb),
38
+ 0.1
39
+ );
40
+ --spectrum-calendar-day-background-color-hover: rgba(
41
+ var(--spectrum-black-rgb),
42
+ 0.06
43
+ );
44
+ --spectrum-calendar-day-today-background-color-selected-hover: rgba(
45
+ var(--spectrum-blue-900-rgb),
46
+ 0.2
47
+ );
48
+ --spectrum-calendar-day-background-color-selected-hover: rgba(
49
+ var(--spectrum-blue-900-rgb),
50
+ 0.2
51
+ );
52
+ --spectrum-calendar-day-background-color-down: var(
53
+ --spectrum-transparent-black-200
54
+ );
55
+ --spectrum-calendar-day-background-color-cap-selected: rgba(
56
+ var(--spectrum-blue-900-rgb),
57
+ 0.2
58
+ );
59
+ --spectrum-calendar-day-background-color-key-focus: rgba(
60
+ var(--spectrum-black-rgb),
61
+ 0.06
62
+ );
63
+ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
35
64
  }
package/tokens/spectrum/custom-medium-vars.css CHANGED
@@ -59,4 +59,8 @@ governing permissions and limitations under the License.
59
59
  --spectrum-alert-banner-text-to-button-vertical: var(
60
60
  --spectrum-spacing-100
61
61
  );
62
+
63
+ --spectrum-sidenav-heading-top-margin: 24px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is updated */
64
+ --spectrum-sidenav-heading-bottom-margin: 8px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is added */
65
+ --spectrum-sidenav-bottom-to-label: 8px; /* TODO replace with updated var(--spectrum-component-bottom-to-text-100); */
62
66
  }
package/tokens/spectrum/custom-vars.css CHANGED
@@ -32,20 +32,21 @@ governing permissions and limitations under the License.
32
32
  --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
33
33
  --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
34
34
 
35
- --spectrum-sans-serif-font: var(--spectrum-sans-serif-font-family);
36
- --spectrum-sans-font-family-stack: var(--spectrum-sans-serif-font),
37
- adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
38
- 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
35
+ --spectrum-sans-font-family-stack: adobe-clean,
36
+ var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system,
37
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
38
+ 'Lucida Grande', sans-serif;
39
+ --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
39
40
 
40
- --spectrum-serif-font: var(--spectrum-serif-font-family);
41
- --spectrum-serif-font-family-stack: var(--spectrum-serif-font),
42
- adobe-clean-serif, 'Source Serif Pro', Georgia, serif;
41
+ --spectrum-serif-font-family-stack: adobe-clean-serif,
42
+ var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif;
43
+ --spectrum-serif-font: var(--spectrum-serif-font-family-stack);
43
44
 
44
45
  --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace;
45
46
 
46
- --spectrum-cjk-font: var(--spectrum-cjk-font-family);
47
- --spectrum-cjk-font-family-stack: var(--spectrum-cjk-font),
48
- adobe-clean-han-japanese, sans-serif;
47
+ --spectrum-cjk-font-family-stack: adobe-clean-han-japanese,
48
+ var(--spectrum-cjk-font-family), sans-serif;
49
+ --spectrum-cjk-font: var(--spectrum-code-font-family-stack);
49
50
 
50
51
  /* static white / black background color for docs containers */
51
52
  --spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
package/tokens/spectrum/global-vars.css CHANGED
@@ -26,6 +26,24 @@ governing permissions and limitations under the License.
26
26
  --spectrum-slider-track-thickness: 2px;
27
27
  --spectrum-slider-handle-gap: 4px;
28
28
  --spectrum-picker-border-width: var(--spectrum-border-width-100);
29
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
30
+ --spectrum-in-field-button-edge-to-fill: 0px;
31
+ --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
32
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
33
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
34
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
35
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(
36
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small
37
+ );
38
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(
39
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium
40
+ );
41
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(
42
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large
43
+ );
44
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(
45
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
46
+ );
29
47
  --spectrum-border-width-100: 1px;
30
48
  --spectrum-accent-color-100: var(--spectrum-blue-100);
31
49
  --spectrum-accent-color-200: var(--spectrum-blue-200);
@@ -72,18 +90,6 @@ governing permissions and limitations under the License.
72
90
  --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
73
91
  --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
74
92
  --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
75
- --system-spectrum-actionbutton-content-color-default: var(
76
- --spectrum-neutral-content-color-default
77
- );
78
- --system-spectrum-actionbutton-content-color-hover: var(
79
- --spectrum-neutral-content-color-hover
80
- );
81
- --system-spectrum-actionbutton-content-color-down: var(
82
- --spectrum-neutral-content-color-down
83
- );
84
- --system-spectrum-actionbutton-content-color-focus: var(
85
- --spectrum-neutral-content-color-key-focus
86
- );
87
93
  --system-spectrum-actionbutton-background-color-disabled: transparent;
88
94
  --system-spectrum-actionbutton-border-color-disabled: var(
89
95
  --spectrum-disabled-border-color
@@ -107,50 +113,14 @@ governing permissions and limitations under the License.
107
113
  --system-spectrum-actionbutton-quiet-border-color-focus: transparent;
108
114
  --system-spectrum-actionbutton-quiet-background-color-disabled: transparent;
109
115
  --system-spectrum-actionbutton-quiet-border-color-disabled: transparent;
110
- --system-spectrum-actionbutton-selected-background-color-default: var(
111
- --spectrum-neutral-subdued-background-color-default
112
- );
113
- --system-spectrum-actionbutton-selected-background-color-hover: var(
114
- --spectrum-neutral-subdued-background-color-hover
115
- );
116
- --system-spectrum-actionbutton-selected-background-color-down: var(
117
- --spectrum-neutral-subdued-background-color-down
118
- );
119
- --system-spectrum-actionbutton-selected-background-color-focus: var(
120
- --spectrum-neutral-subdued-background-color-key-focus
121
- );
122
116
  --system-spectrum-actionbutton-selected-border-color-default: transparent;
123
117
  --system-spectrum-actionbutton-selected-border-color-hover: transparent;
124
118
  --system-spectrum-actionbutton-selected-border-color-down: transparent;
125
119
  --system-spectrum-actionbutton-selected-border-color-focus: transparent;
126
- --system-spectrum-actionbutton-selected-content-color-default: var(
127
- --spectrum-white
128
- );
129
- --system-spectrum-actionbutton-selected-content-color-hover: var(
130
- --spectrum-white
131
- );
132
- --system-spectrum-actionbutton-selected-content-color-down: var(
133
- --spectrum-white
134
- );
135
- --system-spectrum-actionbutton-selected-content-color-focus: var(
136
- --spectrum-white
137
- );
138
120
  --system-spectrum-actionbutton-selected-background-color-disabled: var(
139
121
  --spectrum-disabled-background-color
140
122
  );
141
123
  --system-spectrum-actionbutton-selected-border-color-disabled: transparent;
142
- --system-spectrum-actionbutton-selected-emphasized-background-color-default: var(
143
- --spectrum-accent-background-color-default
144
- );
145
- --system-spectrum-actionbutton-selected-emphasized-background-color-hover: var(
146
- --spectrum-accent-background-color-hover
147
- );
148
- --system-spectrum-actionbutton-selected-emphasized-background-color-down: var(
149
- --spectrum-accent-background-color-down
150
- );
151
- --system-spectrum-actionbutton-selected-emphasized-background-color-focus: var(
152
- --spectrum-accent-background-color-key-focus
153
- );
154
124
  --system-spectrum-actionbutton-staticblack-quiet-border-color-default: transparent;
155
125
  --system-spectrum-actionbutton-staticwhite-quiet-border-color-default: transparent;
156
126
  --system-spectrum-actionbutton-staticblack-quiet-border-color-hover: transparent;
@@ -205,34 +175,34 @@ governing permissions and limitations under the License.
205
175
  --system-spectrum-actionbutton-staticblack-content-color-disabled: var(
206
176
  --spectrum-disabled-static-black-content-color
207
177
  );
208
- --system-spectrum-actionbutton-staticblack-selected-background-color-default: var(
178
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default: var(
209
179
  --spectrum-transparent-black-800
210
180
  );
211
- --system-spectrum-actionbutton-staticblack-selected-background-color-hover: var(
181
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var(
212
182
  --spectrum-transparent-black-900
213
183
  );
214
- --system-spectrum-actionbutton-staticblack-selected-background-color-down: var(
184
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var(
215
185
  --spectrum-transparent-black-900
216
186
  );
217
- --system-spectrum-actionbutton-staticblack-selected-background-color-focus: var(
187
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var(
218
188
  --spectrum-transparent-black-900
219
189
  );
220
- --system-spectrum-actionbutton-staticblack-selected-border-color-disabled: transparent;
221
- --system-spectrum-actionbutton-staticblack-selected-content-color-default: var(
190
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var(
222
191
  --spectrum-white
223
192
  );
224
- --system-spectrum-actionbutton-staticblack-selected-content-color-hover: var(
193
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var(
225
194
  --spectrum-white
226
195
  );
227
- --system-spectrum-actionbutton-staticblack-selected-content-color-down: var(
196
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var(
228
197
  --spectrum-white
229
198
  );
230
- --system-spectrum-actionbutton-staticblack-selected-content-color-focus: var(
199
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var(
231
200
  --spectrum-white
232
201
  );
233
- --system-spectrum-actionbutton-staticblack-selected-background-color-disabled: var(
202
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var(
234
203
  --spectrum-disabled-static-black-background-color
235
204
  );
205
+ --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent;
236
206
  --system-spectrum-actionbutton-staticwhite-background-color-default: transparent;
237
207
  --system-spectrum-actionbutton-staticwhite-background-color-hover: var(
238
208
  --spectrum-transparent-white-300
@@ -277,34 +247,34 @@ governing permissions and limitations under the License.
277
247
  --system-spectrum-actionbutton-staticwhite-content-color-disabled: var(
278
248
  --spectrum-disabled-static-white-content-color
279
249
  );
280
- --system-spectrum-actionbutton-staticwhite-selected-background-color-default: var(
250
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default: var(
281
251
  --spectrum-transparent-white-800
282
252
  );
283
- --system-spectrum-actionbutton-staticwhite-selected-background-color-hover: var(
253
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var(
284
254
  --spectrum-transparent-white-900
285
255
  );
286
- --system-spectrum-actionbutton-staticwhite-selected-background-color-down: var(
256
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var(
287
257
  --spectrum-transparent-white-900
288
258
  );
289
- --system-spectrum-actionbutton-staticwhite-selected-background-color-focus: var(
259
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var(
290
260
  --spectrum-transparent-white-900
291
261
  );
292
- --system-spectrum-actionbutton-staticwhite-selected-content-color-default: var(
262
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var(
293
263
  --spectrum-black
294
264
  );
295
- --system-spectrum-actionbutton-staticwhite-selected-content-color-hover: var(
265
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var(
296
266
  --spectrum-black
297
267
  );
298
- --system-spectrum-actionbutton-staticwhite-selected-content-color-down: var(
268
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var(
299
269
  --spectrum-black
300
270
  );
301
- --system-spectrum-actionbutton-staticwhite-selected-content-color-focus: var(
271
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var(
302
272
  --spectrum-black
303
273
  );
304
- --system-spectrum-actionbutton-staticwhite-selected-background-color-disabled: var(
274
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var(
305
275
  --spectrum-disabled-static-white-background-color
306
276
  );
307
- --system-spectrum-actionbutton-staticwhite-selected-border-color-disabled: transparent;
277
+ --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent;
308
278
  }
309
279
 
310
280
  :host,