@spectrum-web-components/styles 1.4.1-beta.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,296 +1,10 @@
1
1
  :host,
2
2
  :root {
3
- --system-accordion-item-width: var(--spectrum-accordion-minimum-width);
4
- --system-accordion-disclosure-indicator-to-text-space: var(
5
- --spectrum-accordion-disclosure-indicator-to-text
6
- );
7
- --system-accordion-edge-to-disclosure-indicator-space: var(
8
- --spectrum-accordion-edge-to-disclosure-indicator
9
- );
10
- --system-accordion-edge-to-text-space: var(
11
- --spectrum-accordion-edge-to-text
12
- );
13
- --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
14
- --system-accordion-focus-indicator-thickness: var(
15
- --spectrum-focus-indicator-thickness
16
- );
17
- --system-accordion-corner-radius: var(--spectrum-corner-radius-100);
18
- --system-accordion-item-content-area-top-to-content: var(
19
- --spectrum-accordion-content-area-top-to-content
20
- );
21
- --system-accordion-item-content-area-bottom-to-content: var(
22
- --spectrum-accordion-content-area-bottom-to-content
23
- );
24
- --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
25
- --system-accordion-item-header-font-weight: var(
26
- --spectrum-bold-font-weight
27
- );
28
- --system-accordion-item-header-font-style: var(
29
- --spectrum-default-font-style
30
- );
31
- --system-accordion-item-header-line-height: 1.25;
32
- --system-accordion-item-content-font: var(
33
- --spectrum-sans-font-family-stack
34
- );
35
- --system-accordion-item-content-font-weight: var(
36
- --spectrum-body-sans-serif-font-weight
37
- );
38
- --system-accordion-item-content-font-style: var(
39
- --spectrum-body-sans-serif-font-style
40
- );
41
- --system-accordion-item-content-line-height: var(
42
- --spectrum-line-height-100
43
- );
44
- --system-accordion-background-color-default: rgba(
45
- var(--spectrum-gray-900-rgb),
46
- var(--spectrum-background-opacity-default)
47
- );
48
- --system-accordion-background-color-hover: rgba(
49
- var(--spectrum-gray-900-rgb),
50
- var(--spectrum-background-opacity-hover)
51
- );
52
- --system-accordion-background-color-down: rgba(
53
- var(--spectrum-gray-900-rgb),
54
- var(--spectrum-background-opacity-down)
55
- );
56
- --system-accordion-background-color-key-focus: rgba(
57
- var(--spectrum-gray-900-rgb),
58
- var(--spectrum-background-opacity-key-focus)
59
- );
60
- --system-accordion-item-header-color-default: var(
61
- --spectrum-neutral-content-color-default
62
- );
63
- --system-accordion-item-header-color-hover: var(
64
- --spectrum-neutral-content-color-hover
65
- );
66
- --system-accordion-item-header-color-down: var(
67
- --spectrum-neutral-content-color-down
68
- );
69
- --system-accordion-item-header-color-key-focus: var(
70
- --spectrum-neutral-content-color-key-focus
71
- );
72
- --system-accordion-item-header-disabled-color: var(
73
- --spectrum-disabled-content-color
74
- );
75
- --system-accordion-item-content-disabled-color: var(
76
- --spectrum-disabled-content-color
77
- );
78
- --system-accordion-item-content-color: var(--spectrum-body-color);
79
- --system-accordion-focus-indicator-color: var(
80
- --spectrum-focus-indicator-color
81
- );
82
3
  --system-accordion-divider-color: var(--spectrum-gray-300);
83
- --system-accordion-item-header-line-height-cjk: var(
84
- --spectrum-cjk-line-height-100
85
- );
86
- --system-accordion-item-content-line-height-cjk: var(
87
- --spectrum-cjk-line-height-100
88
- );
89
- --system-accordion-size-s-item-height: var(--spectrum-component-height-100);
90
- --system-accordion-size-s-disclosure-indicator-height: var(
91
- --spectrum-component-height-75
92
- );
93
- --system-accordion-size-s-component-edge-to-text: var(
94
- --spectrum-component-edge-to-text-50
95
- );
96
- --system-accordion-size-s-item-header-font-size: var(
97
- --spectrum-font-size-200
98
- );
99
- --system-accordion-size-s-item-content-font-size: var(
100
- --spectrum-body-size-xs
101
- );
102
- --system-accordion-size-s-item-header-top-to-text-space: var(
103
- --spectrum-accordion-top-to-text-regular-small
104
- );
105
- --system-accordion-size-s-item-header-bottom-to-text-space: var(
106
- --spectrum-accordion-bottom-to-text-regular-small
107
- );
108
- --system-accordion-item-height: var(--spectrum-component-height-200);
109
- --system-accordion-size-m-item-height: var(--spectrum-component-height-200);
110
- --system-accordion-disclosure-indicator-height: var(
111
- --spectrum-component-height-100
112
- );
113
- --system-accordion-size-m-disclosure-indicator-height: var(
114
- --spectrum-component-height-100
115
- );
116
- --system-accordion-component-edge-to-text: var(
117
- --spectrum-component-edge-to-text-75
118
- );
119
- --system-accordion-size-m-component-edge-to-text: var(
120
- --spectrum-component-edge-to-text-75
121
- );
122
- --system-accordion-item-header-font-size: var(--spectrum-font-size-300);
123
- --system-accordion-size-m-item-header-font-size: var(
124
- --spectrum-font-size-300
125
- );
126
- --system-accordion-item-content-font-size: var(--spectrum-body-size-s);
127
- --system-accordion-size-m-item-content-font-size: var(
128
- --spectrum-body-size-s
129
- );
130
- --system-accordion-item-header-top-to-text-space: var(
131
- --spectrum-accordion-top-to-text-regular-medium
132
- );
133
- --system-accordion-size-m-item-header-top-to-text-space: var(
134
- --spectrum-accordion-top-to-text-regular-medium
135
- );
136
- --system-accordion-item-header-bottom-to-text-space: var(
137
- --spectrum-accordion-bottom-to-text-regular-medium
138
- );
139
- --system-accordion-size-m-item-header-bottom-to-text-space: var(
140
- --spectrum-accordion-bottom-to-text-regular-medium
141
- );
142
- --system-accordion-size-l-item-height: var(--spectrum-component-height-300);
143
- --system-accordion-size-l-disclosure-indicator-height: var(
144
- --spectrum-component-height-200
145
- );
146
- --system-accordion-size-l-component-edge-to-text: var(
147
- --spectrum-component-edge-to-text-100
148
- );
149
- --system-accordion-size-l-item-header-font-size: var(
150
- --spectrum-font-size-500
151
- );
152
- --system-accordion-size-l-item-content-font-size: var(
153
- --spectrum-body-size-m
154
- );
155
- --system-accordion-size-l-item-header-top-to-text-space: var(
156
- --spectrum-accordion-top-to-text-regular-large
157
- );
158
- --system-accordion-size-l-item-header-bottom-to-text-space: var(
159
- --spectrum-accordion-bottom-to-text-regular-large
160
- );
161
- --system-accordion-size-xl-item-height: var(
162
- --spectrum-component-height-400
163
- );
164
- --system-accordion-size-xl-disclosure-indicator-height: var(
165
- --spectrum-component-height-300
166
- );
167
- --system-accordion-size-xl-component-edge-to-text: var(
168
- --spectrum-component-edge-to-text-200
169
- );
170
- --system-accordion-size-xl-item-header-font-size: var(
171
- --spectrum-font-size-700
172
- );
173
- --system-accordion-size-xl-item-content-font-size: var(
174
- --spectrum-body-size-l
175
- );
176
- --system-accordion-size-xl-item-header-top-to-text-space: var(
177
- --spectrum-accordion-top-to-text-regular-extra-large
178
- );
179
- --system-accordion-size-xl-item-header-bottom-to-text-space: var(
180
- --spectrum-accordion-bottom-to-text-regular-extra-large
181
- );
182
- --system-accordion-compact-size-s-item-height: var(
183
- --spectrum-component-height-75
184
- );
185
- --system-accordion-compact-size-s-item-header-top-to-text-space: var(
186
- --spectrum-accordion-top-to-text-compact-small
187
- );
188
- --system-accordion-compact-size-s-item-header-bottom-to-text-space: var(
189
- --spectrum-accordion-bottom-to-text-compact-small
190
- );
191
- --system-accordion-compact-item-height: var(
192
- --spectrum-component-height-100
193
- );
194
- --system-accordion-compact-size-m-item-height: var(
195
- --spectrum-component-height-100
196
- );
197
- --system-accordion-compact-item-header-top-to-text-space: var(
198
- --spectrum-accordion-top-to-text-compact-medium
199
- );
200
- --system-accordion-compact-size-m-item-header-top-to-text-space: var(
201
- --spectrum-accordion-top-to-text-compact-medium
202
- );
203
- --system-accordion-compact-item-header-bottom-to-text-space: var(
204
- --spectrum-accordion-bottom-to-text-compact-medium
205
- );
206
- --system-accordion-compact-size-m-item-header-bottom-to-text-space: var(
207
- --spectrum-accordion-bottom-to-text-compact-medium
208
- );
209
- --system-accordion-compact-size-l-item-height: var(
210
- --spectrum-component-height-200
211
- );
212
- --system-accordion-compact-size-l-item-header-top-to-text-space: var(
213
- --spectrum-accordion-top-to-text-compact-large
214
- );
215
- --system-accordion-compact-size-l-item-header-bottom-to-text-space: var(
216
- --spectrum-accordion-bottom-to-text-compact-large
217
- );
218
- --system-accordion-compact-size-xl-item-height: var(
219
- --spectrum-component-height-300
220
- );
221
- --system-accordion-compact-size-xl-item-header-top-to-text-space: var(
222
- --spectrum-accordion-top-to-text-compact-extra-large
223
- );
224
- --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var(
225
- --spectrum-accordion-bottom-to-text-compact-extra-large
226
- );
227
- --system-accordion-spacious-size-s-item-header-line-height: 1.25;
228
- --system-accordion-spacious-size-s-item-header-top-to-text-space: var(
229
- --spectrum-accordion-small-top-to-text-spacious
230
- );
231
- --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var(
232
- --spectrum-accordion-bottom-to-text-spacious-small
233
- );
234
- --system-accordion-spacious-item-header-line-height: 1.278;
235
- --system-accordion-spacious-size-m-item-header-line-height: 1.278;
236
- --system-accordion-spacious-item-header-top-to-text-space: var(
237
- --spectrum-accordion-top-to-text-spacious-medium
238
- );
239
- --system-accordion-spacious-size-m-item-header-top-to-text-space: var(
240
- --spectrum-accordion-top-to-text-spacious-medium
241
- );
242
- --system-accordion-spacious-item-header-bottom-to-text-space: var(
243
- --spectrum-accordion-bottom-to-text-spacious-medium
244
- );
245
- --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var(
246
- --spectrum-accordion-bottom-to-text-spacious-medium
247
- );
248
- --system-accordion-spacious-size-l-item-header-line-height: 1.273;
249
- --system-accordion-spacious-size-l-item-header-top-to-text-space: var(
250
- --spectrum-accordion-top-to-text-spacious-large
251
- );
252
- --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var(
253
- --spectrum-accordion-bottom-to-text-spacious-large
254
- );
255
- --system-accordion-spacious-size-xl-item-header-line-height: 1.25;
256
- --system-accordion-spacious-size-xl-item-header-top-to-text-space: var(
257
- --spectrum-accordion-top-to-text-spacious-extra-large
258
- );
259
- --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var(
260
- --spectrum-accordion-bottom-to-text-spacious-extra-large
261
- );
262
- --system-action-bar-height: var(--spectrum-action-bar-height);
263
- --system-action-bar-corner-radius: var(--spectrum-corner-radius-100);
264
- --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100);
265
- --system-action-bar-item-counter-line-height: var(
266
- --spectrum-line-height-100
267
- );
268
- --system-action-bar-item-counter-color: var(
269
- --spectrum-neutral-content-color-default
270
- );
271
- --system-action-bar-item-counter-line-height-cjk: var(
272
- --spectrum-cjk-line-height-100
273
- );
4
+ --system-accordion-item-content-disabled-color: var(--spectrum-gray-400);
5
+ --system-accordion-item-content-color: var(--spectrum-gray-800);
274
6
  --system-action-bar-popover-background-color: var(--spectrum-gray-50);
275
7
  --system-action-bar-popover-border-color: var(--spectrum-gray-400);
276
- --system-action-bar-emphasized-background-color: var(
277
- --spectrum-informative-background-color-default
278
- );
279
- --system-action-bar-emphasized-item-counter-color: var(--spectrum-white);
280
- --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300);
281
- --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100);
282
- --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100);
283
- --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75);
284
- --system-action-bar-spacing-item-counter-top: var(
285
- --spectrum-action-bar-top-to-item-counter
286
- );
287
- --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400);
288
- --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100);
289
- --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100);
290
- --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x);
291
- --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y);
292
- --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur);
293
- --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color);
294
8
  --system-action-button-background-color-default: var(--spectrum-gray-200);
295
9
  --system-action-button-background-color-hover: var(--spectrum-gray-300);
296
10
  --system-action-button-background-color-down: var(--spectrum-gray-400);
@@ -314,19 +28,19 @@
314
28
  --system-action-button-border-color-focus: transparent;
315
29
  --system-action-button-border-color-disabled: transparent;
316
30
  --system-action-button-content-color-selected: var(--spectrum-gray-75);
317
- --system-action-button-size-m-border-radius: var(
31
+ --system-action-button-size-m-border-radius-default: var(
318
32
  --spectrum-corner-radius-100
319
33
  );
320
- --system-action-button-size-xs-border-radius: var(
34
+ --system-action-button-size-xs-border-radius-default: var(
321
35
  --spectrum-corner-radius-100
322
36
  );
323
- --system-action-button-size-s-border-radius: var(
37
+ --system-action-button-size-s-border-radius-default: var(
324
38
  --spectrum-corner-radius-100
325
39
  );
326
- --system-action-button-size-l-border-radius: var(
40
+ --system-action-button-size-l-border-radius-default: var(
327
41
  --spectrum-corner-radius-100
328
42
  );
329
- --system-action-button-size-xl-border-radius: var(
43
+ --system-action-button-size-xl-border-radius-default: var(
330
44
  --spectrum-corner-radius-100
331
45
  );
332
46
  --system-action-button-quiet-background-color-default: transparent;
@@ -428,304 +142,9 @@
428
142
  --system-alert-banner-neutral-background: var(
429
143
  --spectrum-neutral-background-color-default
430
144
  );
431
- --system-alert-banner-min-height: var(
432
- --spectrum-alert-banner-minimum-height
433
- );
434
- --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
435
- --system-alert-banner-size: auto;
436
- --system-alert-banner-font-size: var(--spectrum-font-size-100);
437
- --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
438
- --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
439
- --system-alert-banner-start-edge: var(--spectrum-spacing-300);
440
- --system-alert-banner-text-to-button-horizontal: var(
441
- --spectrum-spacing-300
442
- );
443
- --system-alert-banner-text-to-divider: var(--spectrum-spacing-300);
444
- --system-alert-banner-top-icon: var(
445
- --spectrum-alert-banner-top-to-workflow-icon
446
- );
447
- --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
448
- --system-alert-banner-bottom-text: var(
449
- --spectrum-alert-banner-bottom-to-text
450
- );
451
- --system-alert-banner-informative-background: var(
452
- --spectrum-informative-background-color-default
453
- );
454
- --system-alert-banner-negative-background: var(
455
- --spectrum-negative-background-color-default
456
- );
457
- --system-alert-banner-font-color: var(--spectrum-white);
458
- --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
459
- --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
460
- --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
461
- --system-alert-dialog-warning-icon-color: var(
462
- --spectrum-notice-visual-color
463
- );
464
- --system-alert-dialog-error-icon-color: var(
465
- --spectrum-negative-visual-color
466
- );
467
- --system-alert-dialog-title-font-family: var(
468
- --spectrum-sans-font-family-stack
469
- );
470
- --system-alert-dialog-title-font-weight: var(
471
- --spectrum-heading-sans-serif-font-weight
472
- );
473
- --system-alert-dialog-title-font-style: var(
474
- --spectrum-heading-sans-serif-font-style
475
- );
476
- --system-alert-dialog-title-font-size: var(
477
- --spectrum-alert-dialog-title-size
478
- );
479
- --system-alert-dialog-title-line-height: var(
480
- --spectrum-heading-line-height
481
- );
482
- --system-alert-dialog-title-color: var(--spectrum-heading-color);
483
- --system-alert-dialog-body-font-family: var(
484
- --spectrum-sans-font-family-stack
485
- );
486
- --system-alert-dialog-body-font-weight: var(
487
- --spectrum-body-sans-serif-font-weight
488
- );
489
- --system-alert-dialog-body-font-style: var(
490
- --spectrum-body-sans-serif-font-style
491
- );
492
- --system-alert-dialog-body-font-size: var(
493
- --spectrum-alert-dialog-description-size
494
- );
495
- --system-alert-dialog-body-line-height: var(--spectrum-line-height-100);
496
- --system-alert-dialog-body-color: var(--spectrum-body-color);
497
- --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200);
498
- --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
499
- --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
500
- --system-asset-transition-duration: var(--spectrum-animation-duration-100);
501
145
  --system-asset-folder-background-color: var(--spectrum-gray-300);
502
146
  --system-asset-file-background-color: var(--spectrum-gray-50);
503
147
  --system-asset-icon-outline-color: var(--spectrum-gray-500);
504
- --system-avatar-color-opacity: 1;
505
- --system-avatar-inline-size: var(--spectrum-avatar-size-100);
506
- --system-avatar-block-size: var(--spectrum-avatar-size-100);
507
- --system-avatar-focus-indicator-thickness: var(
508
- --spectrum-focus-indicator-thickness
509
- );
510
- --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
511
- --system-avatar-focus-indicator-color: var(
512
- --spectrum-focus-indicator-color
513
- );
514
- --system-avatar-color-opacity-disabled: var(
515
- --spectrum-avatar-opacity-disabled
516
- );
517
- --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50);
518
- --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50);
519
- --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75);
520
- --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75);
521
- --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100);
522
- --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100);
523
- --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200);
524
- --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200);
525
- --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300);
526
- --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300);
527
- --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400);
528
- --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400);
529
- --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500);
530
- --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500);
531
- --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600);
532
- --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600);
533
- --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700);
534
- --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700);
535
- --system-badge-corner-radius: var(--spectrum-corner-radius-100);
536
- --system-badge-line-height: var(--spectrum-line-height-100);
537
- --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
538
- --system-badge-label-icon-color: var(--spectrum-white);
539
- --system-badge-background-color-default: var(
540
- --spectrum-neutral-subdued-background-color-default
541
- );
542
- --system-badge-background-color-accent: var(
543
- --spectrum-accent-background-color-default
544
- );
545
- --system-badge-background-color-informative: var(
546
- --spectrum-informative-background-color-default
547
- );
548
- --system-badge-background-color-negative: var(
549
- --spectrum-negative-background-color-default
550
- );
551
- --system-badge-background-color-positive: var(
552
- --spectrum-positive-background-color-default
553
- );
554
- --system-badge-background-color-notice: var(
555
- --spectrum-notice-background-color-default
556
- );
557
- --system-badge-background-color-gray: var(
558
- --spectrum-gray-background-color-default
559
- );
560
- --system-badge-background-color-red: var(
561
- --spectrum-red-background-color-default
562
- );
563
- --system-badge-background-color-orange: var(
564
- --spectrum-orange-background-color-default
565
- );
566
- --system-badge-background-color-yellow: var(
567
- --spectrum-yellow-background-color-default
568
- );
569
- --system-badge-background-color-chartreuse: var(
570
- --spectrum-chartreuse-background-color-default
571
- );
572
- --system-badge-background-color-celery: var(
573
- --spectrum-celery-background-color-default
574
- );
575
- --system-badge-background-color-green: var(
576
- --spectrum-green-background-color-default
577
- );
578
- --system-badge-background-color-seafoam: var(
579
- --spectrum-seafoam-background-color-default
580
- );
581
- --system-badge-background-color-cyan: var(
582
- --spectrum-cyan-background-color-default
583
- );
584
- --system-badge-background-color-blue: var(
585
- --spectrum-blue-background-color-default
586
- );
587
- --system-badge-background-color-indigo: var(
588
- --spectrum-indigo-background-color-default
589
- );
590
- --system-badge-background-color-purple: var(
591
- --spectrum-purple-background-color-default
592
- );
593
- --system-badge-background-color-fuchsia: var(
594
- --spectrum-fuchsia-background-color-default
595
- );
596
- --system-badge-background-color-magenta: var(
597
- --spectrum-magenta-background-color-default
598
- );
599
- --system-badge-height: var(--spectrum-component-height-100);
600
- --system-badge-font-size: var(--spectrum-font-size-100);
601
- --system-badge-label-spacing-vertical-top: var(
602
- --spectrum-component-top-to-text-100
603
- );
604
- --system-badge-label-spacing-vertical-bottom: var(
605
- --spectrum-component-bottom-to-text-100
606
- );
607
- --system-badge-label-spacing-horizontal: var(
608
- --spectrum-component-edge-to-text-100
609
- );
610
- --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
611
- --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
612
- --system-badge-icon-spacing-horizontal: var(
613
- --spectrum-component-edge-to-visual-100
614
- );
615
- --system-badge-icon-spacing-vertical-top: var(
616
- --spectrum-component-top-to-workflow-icon-100
617
- );
618
- --system-badge-icon-only-spacing-horizontal: var(
619
- --spectrum-component-edge-to-visual-only-100
620
- );
621
- --system-badge-orange-label-icon-color: var(--spectrum-black);
622
- --system-badge-yellow-label-icon-color: var(--spectrum-black);
623
- --system-badge-chartreuse-label-icon-color: var(--spectrum-black);
624
- --system-badge-celery-label-icon-color: var(--spectrum-black);
625
- --system-badge-gray-label-icon-color: var(
626
- --spectrum-badge-label-icon-color-primary
627
- );
628
- --system-badge-red-label-icon-color: var(
629
- --spectrum-badge-label-icon-color-primary
630
- );
631
- --system-badge-green-label-icon-color: var(
632
- --spectrum-badge-label-icon-color-primary
633
- );
634
- --system-badge-seafoam-label-icon-color: var(
635
- --spectrum-badge-label-icon-color-primary
636
- );
637
- --system-badge-cyan-label-icon-color: var(
638
- --spectrum-badge-label-icon-color-primary
639
- );
640
- --system-badge-blue-label-icon-color: var(
641
- --spectrum-badge-label-icon-color-primary
642
- );
643
- --system-badge-indigo-label-icon-color: var(
644
- --spectrum-badge-label-icon-color-primary
645
- );
646
- --system-badge-purple-label-icon-color: var(
647
- --spectrum-badge-label-icon-color-primary
648
- );
649
- --system-badge-fuchsia-label-icon-color: var(
650
- --spectrum-badge-label-icon-color-primary
651
- );
652
- --system-badge-magenta-label-icon-color: var(
653
- --spectrum-badge-label-icon-color-primary
654
- );
655
- --system-badge-size-s-height: var(--spectrum-component-height-75);
656
- --system-badge-size-s-font-size: var(--spectrum-font-size-75);
657
- --system-badge-size-s-label-spacing-vertical-top: var(
658
- --spectrum-component-top-to-text-75
659
- );
660
- --system-badge-size-s-label-spacing-vertical-bottom: var(
661
- --spectrum-component-bottom-to-text-75
662
- );
663
- --system-badge-size-s-label-spacing-horizontal: var(
664
- --spectrum-component-edge-to-text-75
665
- );
666
- --system-badge-size-s-workflow-icon-size: var(
667
- --spectrum-workflow-icon-size-75
668
- );
669
- --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75);
670
- --system-badge-size-s-icon-spacing-horizontal: var(
671
- --spectrum-component-edge-to-visual-75
672
- );
673
- --system-badge-size-s-icon-spacing-vertical-top: var(
674
- --spectrum-component-top-to-workflow-icon-75
675
- );
676
- --system-badge-size-s-icon-only-spacing-horizontal: var(
677
- --spectrum-component-edge-to-visual-only-75
678
- );
679
- --system-badge-size-l-height: var(--spectrum-component-height-100);
680
- --system-badge-size-l-font-size: var(--spectrum-font-size-200);
681
- --system-badge-size-l-label-spacing-vertical-top: var(
682
- --spectrum-component-top-to-text-200
683
- );
684
- --system-badge-size-l-label-spacing-vertical-bottom: var(
685
- --spectrum-component-bottom-to-text-200
686
- );
687
- --system-badge-size-l-label-spacing-horizontal: var(
688
- --spectrum-component-edge-to-text-200
689
- );
690
- --system-badge-size-l-workflow-icon-size: var(
691
- --spectrum-workflow-icon-size-200
692
- );
693
- --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200);
694
- --system-badge-size-l-icon-spacing-horizontal: var(
695
- --spectrum-component-edge-to-visual-200
696
- );
697
- --system-badge-size-l-icon-spacing-vertical-top: var(
698
- --spectrum-component-top-to-workflow-icon-200
699
- );
700
- --system-badge-size-l-icon-only-spacing-horizontal: var(
701
- --spectrum-component-edge-to-visual-only-200
702
- );
703
- --system-badge-size-xl-height: var(--spectrum-component-height-100);
704
- --system-badge-size-xl-font-size: var(--spectrum-font-size-300);
705
- --system-badge-size-xl-label-spacing-vertical-top: var(
706
- --spectrum-component-top-to-text-300
707
- );
708
- --system-badge-size-xl-label-spacing-vertical-bottom: var(
709
- --spectrum-component-bottom-to-text-300
710
- );
711
- --system-badge-size-xl-label-spacing-horizontal: var(
712
- --spectrum-component-edge-to-text-300
713
- );
714
- --system-badge-size-xl-workflow-icon-size: var(
715
- --spectrum-workflow-icon-size-300
716
- );
717
- --system-badge-size-xl-icon-text-spacing: var(
718
- --spectrum-text-to-visual-300
719
- );
720
- --system-badge-size-xl-icon-spacing-horizontal: var(
721
- --spectrum-component-edge-to-visual-300
722
- );
723
- --system-badge-size-xl-icon-spacing-vertical-top: var(
724
- --spectrum-component-top-to-workflow-icon-300
725
- );
726
- --system-badge-size-xl-icon-only-spacing-horizontal: var(
727
- --spectrum-component-edge-to-visual-only-300
728
- );
729
148
  --system-button-background-color-default: var(--spectrum-gray-200);
730
149
  --system-button-background-color-hover: var(--spectrum-gray-300);
731
150
  --system-button-background-color-down: var(--spectrum-gray-400);
@@ -766,15 +185,9 @@
766
185
  --system-button-secondary-background-color-default: var(
767
186
  --spectrum-gray-200
768
187
  );
769
- --system-button-secondary-not-outline-background-color-hover: var(
770
- --spectrum-gray-300
771
- );
772
- --system-button-secondary-not-outline-background-color-down: var(
773
- --spectrum-gray-400
774
- );
775
- --system-button-secondary-not-outline-background-color-focus: var(
776
- --spectrum-gray-300
777
- );
188
+ --system-button-secondary-background-color-hover: var(--spectrum-gray-300);
189
+ --system-button-secondary-background-color-down: var(--spectrum-gray-400);
190
+ --system-button-secondary-background-color-focus: var(--spectrum-gray-300);
778
191
  --system-button-secondary-outline-background-color-hover: var(
779
192
  --spectrum-gray-300
780
193
  );
@@ -787,6 +200,9 @@
787
200
  --system-button-secondary-outline-border-color-default: var(
788
201
  --spectrum-gray-300
789
202
  );
203
+ --system-button-secondary-outline-border-color-down: var(
204
+ --spectrum-gray-500
205
+ );
790
206
  --system-button-static-white-background-color-default: var(
791
207
  --spectrum-transparent-white-800
792
208
  );
@@ -803,82 +219,88 @@
803
219
  --system-button-static-white-content-color-hover: var(--spectrum-black);
804
220
  --system-button-static-white-content-color-down: var(--spectrum-black);
805
221
  --system-button-static-white-content-color-focus: var(--spectrum-black);
806
- --system-button-static-white-secondary-background-color-default: var(
807
- --spectrum-transparent-white-200
222
+ --system-button-static-white-outline-background-color-default: var(
223
+ --spectrum-transparent-white-25
808
224
  );
809
- --system-button-static-white-secondary-background-color-hover: var(
225
+ --system-button-static-white-outline-background-color-hover: var(
810
226
  --spectrum-transparent-white-300
811
227
  );
812
- --system-button-static-white-secondary-background-color-down: var(
228
+ --system-button-static-white-outline-background-color-down: var(
813
229
  --spectrum-transparent-white-400
814
230
  );
815
- --system-button-static-white-secondary-background-color-focus: var(
231
+ --system-button-static-white-outline-background-color-focus: var(
816
232
  --spectrum-transparent-white-300
817
233
  );
818
- --system-button-static-white-secondary-content-color-default: var(
234
+ --system-button-static-white-outline-content-color-default: var(
819
235
  --spectrum-white
820
236
  );
821
- --system-button-static-white-secondary-content-color-hover: var(
237
+ --system-button-static-white-outline-content-color-hover: var(
822
238
  --spectrum-white
823
239
  );
824
- --system-button-static-white-secondary-content-color-down: var(
240
+ --system-button-static-white-outline-content-color-down: var(
825
241
  --spectrum-white
826
242
  );
827
- --system-button-static-white-secondary-content-color-focus: var(
243
+ --system-button-static-white-outline-content-color-focus: var(
828
244
  --spectrum-white
829
245
  );
830
- --system-button-static-white-secondary-outline-border-color-default: var(
831
- --spectrum-transparent-white-300
246
+ --system-button-static-white-outline-border-color-default: var(
247
+ --spectrum-transparent-white-800
832
248
  );
833
- --system-button-static-white-secondary-outline-border-color-hover: var(
834
- --spectrum-transparent-white-400
249
+ --system-button-static-white-outline-border-color-hover: var(
250
+ --spectrum-transparent-white-900
835
251
  );
836
- --system-button-static-white-secondary-outline-border-color-down: var(
837
- --spectrum-transparent-white-500
252
+ --system-button-static-white-outline-border-color-down: var(
253
+ --spectrum-transparent-white-900
838
254
  );
839
- --system-button-static-white-secondary-outline-border-color-focus: var(
840
- --spectrum-transparent-white-400
255
+ --system-button-static-white-outline-border-color-focus: var(
256
+ --spectrum-transparent-white-900
257
+ );
258
+ --system-button-static-white-secondary-background-color-default: var(
259
+ --spectrum-transparent-white-200
841
260
  );
842
- --system-button-static-white-outline-not-secondary-background-color-hover: var(
261
+ --system-button-static-white-secondary-background-color-hover: var(
843
262
  --spectrum-transparent-white-300
844
263
  );
845
- --system-button-static-white-outline-not-secondary-background-color-down: var(
264
+ --system-button-static-white-secondary-background-color-down: var(
846
265
  --spectrum-transparent-white-400
847
266
  );
848
- --system-button-static-white-outline-not-secondary-background-color-focus: var(
267
+ --system-button-static-white-secondary-background-color-focus: var(
849
268
  --spectrum-transparent-white-300
850
269
  );
851
- --system-button-static-white-outline-not-secondary-content-color-default: var(
270
+ --system-button-static-white-secondary-content-color-default: var(
852
271
  --spectrum-white
853
272
  );
854
- --system-button-static-white-outline-not-secondary-content-color-hover: var(
273
+ --system-button-static-white-secondary-content-color-hover: var(
855
274
  --spectrum-white
856
275
  );
857
- --system-button-static-white-outline-not-secondary-content-color-down: var(
276
+ --system-button-static-white-secondary-content-color-down: var(
858
277
  --spectrum-white
859
278
  );
860
- --system-button-static-white-outline-not-secondary-content-color-focus: var(
279
+ --system-button-static-white-secondary-content-color-focus: var(
861
280
  --spectrum-white
862
281
  );
863
- --system-button-static-white-outline-not-secondary-border-color-default: var(
864
- --spectrum-transparent-white-800
282
+ --system-button-static-white-secondary-outline-border-color-default: var(
283
+ --spectrum-transparent-white-300
865
284
  );
866
- --system-button-static-white-outline-not-secondary-border-color-hover: var(
867
- --spectrum-transparent-white-900
285
+ --system-button-static-white-secondary-outline-border-color-hover: var(
286
+ --spectrum-transparent-white-400
868
287
  );
869
- --system-button-static-white-outline-not-secondary-border-color-down: var(
870
- --spectrum-transparent-white-900
288
+ --system-button-static-white-secondary-outline-border-color-down: var(
289
+ --spectrum-transparent-white-500
290
+ );
291
+ --system-button-static-white-secondary-outline-border-color-focus: var(
292
+ --spectrum-transparent-white-400
871
293
  );
872
- --system-button-static-white-outline-not-secondary-border-color-focus: var(
873
- --spectrum-transparent-white-900
294
+ --system-button-static-white-secondary-outline-background-color-default: var(
295
+ --spectrum-transparent-white-800
874
296
  );
875
- --system-button-static-white-outline-secondary-background-color-hover: var(
297
+ --system-button-static-white-secondary-outline-background-color-hover: var(
876
298
  --spectrum-transparent-white-300
877
299
  );
878
- --system-button-static-white-outline-secondary-background-color-down: var(
300
+ --system-button-static-white-secondary-outline-background-color-down: var(
879
301
  --spectrum-transparent-white-400
880
302
  );
881
- --system-button-static-white-outline-secondary-background-color-focus: var(
303
+ --system-button-static-white-secondary-outline-background-color-focus: var(
882
304
  --spectrum-transparent-white-300
883
305
  );
884
306
  --system-button-static-black-background-color-default: var(
@@ -897,319 +319,103 @@
897
319
  --system-button-static-black-content-color-hover: var(--spectrum-white);
898
320
  --system-button-static-black-content-color-down: var(--spectrum-white);
899
321
  --system-button-static-black-content-color-focus: var(--spectrum-white);
900
- --system-button-static-black-secondary-background-color-default: var(
901
- --spectrum-transparent-black-200
322
+ --system-button-static-black-outline-background-color-default: var(
323
+ --spectrum-transparent-black-25
902
324
  );
903
- --system-button-static-black-secondary-background-color-hover: var(
325
+ --system-button-static-black-outline-background-color-hover: var(
904
326
  --spectrum-transparent-black-300
905
327
  );
906
- --system-button-static-black-secondary-background-color-down: var(
328
+ --system-button-static-black-outline-background-color-down: var(
907
329
  --spectrum-transparent-black-400
908
330
  );
909
- --system-button-static-black-secondary-background-color-focus: var(
331
+ --system-button-static-black-outline-background-color-focus: var(
910
332
  --spectrum-transparent-black-300
911
333
  );
912
- --system-button-static-black-secondary-content-color-default: var(
334
+ --system-button-static-black-outline-content-color-default: var(
913
335
  --spectrum-black
914
336
  );
915
- --system-button-static-black-secondary-content-color-hover: var(
337
+ --system-button-static-black-outline-content-color-hover: var(
916
338
  --spectrum-black
917
339
  );
918
- --system-button-static-black-secondary-content-color-down: var(
340
+ --system-button-static-black-outline-content-color-down: var(
919
341
  --spectrum-black
920
342
  );
921
- --system-button-static-black-secondary-content-color-focus: var(
343
+ --system-button-static-black-outline-content-color-focus: var(
922
344
  --spectrum-black
923
345
  );
924
- --system-button-static-black-secondary-outline-background-color-hover: var(
346
+ --system-button-static-black-outline-border-color-default: var(
925
347
  --spectrum-transparent-black-400
926
348
  );
927
- --system-button-static-black-secondary-outline-background-color-down: var(
349
+ --system-button-static-black-outline-border-color-hover: var(
928
350
  --spectrum-transparent-black-500
929
351
  );
930
- --system-button-static-black-secondary-outline-background-color-focus: var(
931
- --spectrum-transparent-black-400
932
- );
933
- --system-button-static-black-secondary-outline-border-color-default: var(
934
- --spectrum-transparent-black-300
935
- );
936
- --system-button-static-black-secondary-outline-border-color-hover: var(
937
- --spectrum-transparent-black-400
352
+ --system-button-static-black-outline-border-color-down: var(
353
+ --spectrum-transparent-black-600
938
354
  );
939
- --system-button-static-black-secondary-outline-border-color-down: var(
355
+ --system-button-static-black-outline-border-color-focus: var(
940
356
  --spectrum-transparent-black-500
941
357
  );
942
- --system-button-static-black-secondary-outline-border-color-focus: var(
943
- --spectrum-transparent-black-400
358
+ --system-button-static-black-secondary-background-color-default: var(
359
+ --spectrum-transparent-black-200
944
360
  );
945
- --system-button-static-black-outline-not-secondary-background-color-hover: var(
361
+ --system-button-static-black-secondary-background-color-hover: var(
946
362
  --spectrum-transparent-black-300
947
363
  );
948
- --system-button-static-black-outline-not-secondary-background-color-down: var(
364
+ --system-button-static-black-secondary-background-color-down: var(
949
365
  --spectrum-transparent-black-400
950
366
  );
951
- --system-button-static-black-outline-not-secondary-background-color-focus: var(
367
+ --system-button-static-black-secondary-background-color-focus: var(
952
368
  --spectrum-transparent-black-300
953
369
  );
954
- --system-button-static-black-outline-not-secondary-content-color-default: var(
370
+ --system-button-static-black-secondary-content-color-default: var(
955
371
  --spectrum-black
956
372
  );
957
- --system-button-static-black-outline-not-secondary-content-color-hover: var(
373
+ --system-button-static-black-secondary-content-color-hover: var(
958
374
  --spectrum-black
959
375
  );
960
- --system-button-static-black-outline-not-secondary-content-color-down: var(
376
+ --system-button-static-black-secondary-content-color-down: var(
961
377
  --spectrum-black
962
378
  );
963
- --system-button-static-black-outline-not-secondary-content-color-focus: var(
379
+ --system-button-static-black-secondary-content-color-focus: var(
964
380
  --spectrum-black
965
381
  );
966
- --system-button-static-black-outline-not-secondary-border-color-default: var(
382
+ --system-button-static-black-secondary-outline-border-color-default: var(
383
+ --spectrum-transparent-black-300
384
+ );
385
+ --system-button-static-black-secondary-outline-border-color-hover: var(
967
386
  --spectrum-transparent-black-400
968
387
  );
969
- --system-button-static-black-outline-not-secondary-border-color-hover: var(
388
+ --system-button-static-black-secondary-outline-border-color-down: var(
970
389
  --spectrum-transparent-black-500
971
390
  );
972
- --system-button-static-black-outline-not-secondary-border-color-down: var(
973
- --spectrum-transparent-black-600
391
+ --system-button-static-black-secondary-outline-border-color-focus: var(
392
+ --spectrum-transparent-black-400
974
393
  );
975
- --system-button-static-black-outline-not-secondary-border-color-focus: var(
976
- --spectrum-transparent-black-500
394
+ --system-button-static-black-secondary-outline-background-color-default: var(
395
+ --spectrum-transparent-black-800
977
396
  );
978
- --system-button-static-black-outline-secondary-background-color-hover: var(
397
+ --system-button-static-black-secondary-outline-background-color-hover: var(
979
398
  --spectrum-transparent-black-300
980
399
  );
981
- --system-button-static-black-outline-secondary-background-color-down: var(
400
+ --system-button-static-black-secondary-outline-background-color-down: var(
982
401
  --spectrum-transparent-black-400
983
402
  );
984
- --system-button-static-black-outline-secondary-background-color-focus: var(
403
+ --system-button-static-black-secondary-outline-background-color-focus: var(
985
404
  --spectrum-transparent-black-300
986
405
  );
987
- --system-button-group-spacing-horizontal: var(--spectrum-spacing-300);
988
- --system-button-group-spacing-vertical: var(--spectrum-spacing-300);
989
- --system-button-group-size-s-spacing-horizontal: var(
990
- --spectrum-spacing-200
991
- );
992
- --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200);
993
- --system-button-group-size-m-spacing-horizontal: var(
994
- --spectrum-spacing-300
995
- );
996
- --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300);
997
- --system-button-group-size-l-spacing-horizontal: var(
998
- --spectrum-spacing-300
999
- );
1000
- --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300);
1001
- --system-button-group-size-xl-spacing-horizontal: var(
1002
- --spectrum-spacing-300
1003
- );
1004
- --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300);
1005
- --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height);
1006
- --system-breadcrumbs-block-size-compact: var(
1007
- --spectrum-breadcrumbs-height-compact
1008
- );
1009
- --system-breadcrumbs-block-size-multiline: var(
1010
- --spectrum-breadcrumbs-height-multiline
1011
- );
1012
- --system-breadcrumbs-line-height: var(--spectrum-line-height-100);
1013
- --system-breadcrumbs-font-size: var(--spectrum-font-size-200);
1014
- --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack);
1015
- --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight);
1016
- --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200);
1017
- --system-breadcrumbs-font-family-current: var(
1018
- --spectrum-sans-font-family-stack
1019
- );
1020
- --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight);
1021
- --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100);
1022
- --system-breadcrumbs-font-family-compact: var(
1023
- --spectrum-sans-font-family-stack
1024
- );
1025
- --system-breadcrumbs-font-weight-compact: var(
1026
- --spectrum-regular-font-weight
1027
- );
1028
- --system-breadcrumbs-font-size-compact-current: var(
1029
- --spectrum-font-size-100
1030
- );
1031
- --system-breadcrumbs-font-family-compact-current: var(
1032
- --spectrum-sans-font-family-stack
1033
- );
1034
- --system-breadcrumbs-font-weight-compact-current: var(
1035
- --spectrum-bold-font-weight
1036
- );
1037
- --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75);
1038
- --system-breadcrumbs-font-family-multiline: var(
1039
- --spectrum-sans-font-family-stack
1040
- );
1041
- --system-breadcrumbs-font-weight-multiline: var(
1042
- --spectrum-regular-font-weight
1043
- );
1044
- --system-breadcrumbs-font-size-multiline-current: var(
1045
- --spectrum-font-size-300
1046
- );
1047
- --system-breadcrumbs-font-family-multiline-current: var(
1048
- --spectrum-sans-font-family-stack
1049
- );
1050
- --system-breadcrumbs-font-weight-multiline-current: var(
1051
- --spectrum-bold-font-weight
1052
- );
1053
- --system-breadcrumbs-text-decoration-thickness: var(
1054
- --spectrum-text-underline-thickness
1055
- );
1056
- --system-breadcrumbs-text-decoration-gap: var(
1057
- --spectrum-text-underline-gap
1058
- );
1059
- --system-breadcrumbs-separator-spacing-inline: var(
1060
- --spectrum-text-to-visual-100
1061
- );
1062
- --system-breadcrumbs-text-spacing-block-start: var(
1063
- --spectrum-breadcrumbs-top-to-text
1064
- );
1065
- --system-breadcrumbs-text-spacing-block-end: var(
1066
- --spectrum-breadcrumbs-bottom-to-text
1067
- );
1068
- --system-breadcrumbs-icon-spacing-block: var(
1069
- --spectrum-breadcrumbs-top-to-separator-icon
1070
- );
1071
- --system-breadcrumbs-text-spacing-block-start-compact: var(
1072
- --spectrum-breadcrumbs-top-to-text-compact
1073
- );
1074
- --system-breadcrumbs-text-spacing-block-end-compact: var(
1075
- --spectrum-breadcrumbs-bottom-to-text-compact
1076
- );
1077
- --system-breadcrumbs-icon-spacing-block-compact: var(
1078
- --spectrum-breadcrumbs-top-to-separator-icon-compact
1079
- );
1080
- --system-breadcrumbs-text-spacing-block-start-multiline: var(
1081
- --spectrum-breadcrumbs-top-to-text-multiline
1082
- );
1083
- --system-breadcrumbs-text-spacing-block-end-multiline: var(
1084
- --spectrum-breadcrumbs-bottom-to-text-multiline
1085
- );
1086
- --system-breadcrumbs-text-spacing-block-between-multiline: var(
1087
- --spectrum-breadcrumbs-top-text-to-bottom-text
1088
- );
1089
- --system-breadcrumbs-icon-spacing-block-start-multiline: var(
1090
- --spectrum-breadcrumbs-top-to-separator-icon-multiline
1091
- );
1092
- --system-breadcrumbs-icon-spacing-block-between-multiline: var(
1093
- --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline
1094
- );
1095
- --system-breadcrumbs-inline-start: var(
1096
- --spectrum-breadcrumbs-start-edge-to-text
1097
- );
1098
- --system-breadcrumbs-inline-end: var(
1099
- --spectrum-breadcrumbs-end-edge-to-text
1100
- );
1101
- --system-breadcrumbs-action-button-spacing-inline: var(
1102
- --spectrum-breadcrumbs-truncated-menu-to-separator-icon
1103
- );
1104
- --system-breadcrumbs-action-button-spacing-block: var(
1105
- --spectrum-breadcrumbs-top-to-truncated-menu
1106
- );
1107
- --system-breadcrumbs-action-button-spacing-block-compact: var(
1108
- --spectrum-breadcrumbs-top-to-truncated-menu-compact
1109
- );
1110
- --system-breadcrumbs-action-button-spacing-inline-start: var(
1111
- --spectrum-breadcrumbs-start-edge-to-truncated-menu
1112
- );
1113
- --system-breadcrumbs-action-button-spacing-block-multiline: var(
1114
- --spectrum-breadcrumbs-top-to-truncated-menu-compact
1115
- );
1116
- --system-breadcrumbs-action-button-spacing-block-between-multiline: var(
1117
- --spectrum-breadcrumbs-truncated-menu-to-bottom-text
1118
- );
1119
- --system-breadcrumbs-focus-indicator-thickness: var(
1120
- --spectrum-focus-indicator-thickness
1121
- );
1122
- --system-breadcrumbs-focus-indicator-gap: var(
1123
- --spectrum-focus-indicator-gap
1124
- );
1125
- --system-breadcrumbs-item-link-border-radius: var(
1126
- --spectrum-corner-radius-100
1127
- );
1128
- --system-breadcrumbs-text-color: var(
1129
- --spectrum-neutral-subdued-content-color-default
1130
- );
1131
- --system-breadcrumbs-text-color-current: var(
1132
- --spectrum-neutral-content-color-default
1133
- );
1134
- --system-breadcrumbs-text-color-disabled: var(
1135
- --spectrum-disabled-content-color
1136
- );
1137
- --system-breadcrumbs-separator-color: var(
1138
- --spectrum-neutral-content-color-default
1139
- );
1140
- --system-breadcrumbs-action-button-color: var(
1141
- --spectrum-neutral-subdued-content-color-default
1142
- );
1143
- --system-breadcrumbs-action-button-color-disabled: var(
1144
- --spectrum-disabled-content-color
1145
- );
1146
- --system-breadcrumbs-focus-indicator-color: var(
1147
- --spectrum-focus-indicator-color
1148
- );
1149
406
  --system-checkbox-control-color-default: var(--spectrum-gray-800);
1150
407
  --system-checkbox-control-color-hover: var(--spectrum-gray-900);
1151
408
  --system-checkbox-control-color-down: var(--spectrum-gray-900);
1152
409
  --system-checkbox-control-color-focus: var(--spectrum-gray-900);
1153
410
  --system-checkbox-checkmark-color: var(--spectrum-gray-75);
1154
411
  --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
1155
- --system-card-background-color: var(--spectrum-background-layer-2-color);
1156
- --system-card-body-spacing: var(--spectrum-spacing-400);
1157
- --system-card-title-padding-top: var(--spectrum-spacing-300);
1158
- --system-card-title-padding-right: var(--spectrum-spacing-400);
1159
- --system-card-content-margin-top: var(--spectrum-spacing-100);
1160
- --system-card-content-margin-bottom: var(--spectrum-spacing-300);
1161
- --system-card-footer-padding-top: var(--spectrum-spacing-100);
1162
- --system-card-subtitle-padding-right: var(--spectrum-spacing-100);
1163
- --system-card-border-width: var(--spectrum-border-width-100);
1164
- --system-card-corner-radius: var(--spectrum-corner-radius-100);
1165
412
  --system-card-border-color: var(--spectrum-gray-200);
1166
413
  --system-card-border-color-hover: var(--spectrum-gray-300);
1167
- --system-card-border-color-selected: var(--spectrum-blue-700);
1168
414
  --system-card-divider-color: var(--spectrum-gray-300);
1169
- --system-card-title-font-family: var(--spectrum-sans-font-family-stack);
1170
- --system-card-title-font-size: var(--spectrum-heading-size-xxs);
1171
- --system-card-title-font-weight: var(
1172
- --spectrum-heading-sans-serif-font-weight
1173
- );
1174
- --system-card-title-font-style: var(
1175
- --spectrum-heading-sans-serif-font-style
1176
- );
1177
- --system-card-title-line-height: var(--spectrum-heading-line-height);
1178
- --system-card-title-font-color: var(--spectrum-heading-color);
1179
- --system-card-body-font-family: var(--spectrum-sans-font-family-stack);
1180
- --system-card-body-font-size: var(--spectrum-body-size-s);
1181
- --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
1182
- --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style);
1183
- --system-card-body-line-height: var(--spectrum-body-line-height);
1184
- --system-card-body-font-color: var(--spectrum-body-color);
1185
- --system-card-actions-spacing: var(--spectrum-spacing-300);
1186
- --system-card-actions-size: var(--spectrum-card-selection-background-size);
1187
- --system-card-actions-border-radius: var(--spectrum-corner-radius-100);
1188
- --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb);
1189
- --system-card-actions-background-color-opacity: var(
1190
- --spectrum-card-selection-background-color-opacity
1191
- );
1192
- --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color);
1193
- --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x);
1194
- --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y);
1195
- --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur);
1196
- --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color);
1197
- --system-card-focus-indicator-width: var(
1198
- --spectrum-focus-indicator-thickness
1199
- );
1200
- --system-card-selected-background-opacity: 0.1;
1201
- --system-card-preview-border-width-selected: var(
1202
- --spectrum-border-width-100
1203
- );
1204
415
  --system-card-preview-background-color: var(
1205
416
  --spectrum-background-base-color
1206
417
  );
1207
418
  --system-card-preview-background-color-hover: var(--spectrum-gray-300);
1208
- --system-card-horizontal-body-padding: var(--spectrum-spacing-300);
1209
- --system-card-horizontal-preview-padding: var(--spectrum-spacing-200);
1210
- --system-card-content-margin-top-quiet: var(--spectrum-spacing-100);
1211
- --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width);
1212
- --system-card-background-color-quiet: var(--spectrum-background-base-color);
1213
419
  --system-clear-button-background-color: var(--spectrum-gray-200);
1214
420
  --system-clear-button-background-color-hover: var(--spectrum-gray-300);
1215
421
  --system-clear-button-background-color-down: var(--spectrum-gray-400);
@@ -1475,132 +681,17 @@
1475
681
  --system-coach-mark-buttongroup-spacing-horizontal: var(
1476
682
  --spectrum-spacing-100
1477
683
  );
1478
- --system-color-area-border-radius: var(
1479
- --spectrum-color-area-border-rounding
1480
- );
1481
- --system-color-area-border-color-rgb: 0, 0, 0;
1482
- --system-color-area-border-color-opacity: 0.1;
1483
- --system-color-area-border-color: rgba(
1484
- var(--system-color-area-border-color-rgb),
1485
- var(--system-color-area-border-color-opacity)
1486
- );
1487
- --system-color-area-disabled-background-color: var(
1488
- --spectrum-disabled-background-color
1489
- );
1490
- --system-color-area-border-width: var(--spectrum-color-area-border-width);
1491
- --system-color-area-height: var(--spectrum-color-area-height);
1492
- --system-color-area-width: var(--spectrum-color-area-width);
1493
- --system-color-area-min-width: var(--spectrum-color-area-minimum-width);
1494
- --system-color-area-min-height: var(--spectrum-color-area-minimum-height);
1495
- --system-color-handle-size: var(--spectrum-color-handle-size);
1496
- --system-color-handle-focused-size: var(
1497
- --spectrum-color-handle-size-key-focus
1498
- );
1499
- --system-color-handle-hitarea-size: var(
1500
- --spectrum-color-control-track-width
1501
- );
1502
- --system-color-handle-animation-duration: var(
1503
- --spectrum-animation-duration-100
1504
- );
1505
- --system-color-handle-animation-easing: ease-in-out;
1506
- --system-color-handle-outer-border-color: rgba(
1507
- var(--spectrum-black-rgb),
1508
- var(--spectrum-color-handle-outer-border-opacity)
1509
- );
1510
- --system-color-handle-outer-border-width: var(
1511
- --spectrum-color-handle-outer-border-width
1512
- );
1513
- --system-color-handle-inner-border-color: rgba(
1514
- var(--spectrum-black-rgb),
1515
- var(--spectrum-color-handle-inner-border-opacity)
1516
- );
1517
- --system-color-handle-inner-border-width: var(
1518
- --spectrum-color-handle-inner-border-width
1519
- );
1520
- --system-color-handle-border-width: var(
1521
- --spectrum-color-handle-border-width
1522
- );
1523
- --system-color-handle-border-color: var(--spectrum-white);
1524
- --system-color-handle-border-color-disabled: var(
1525
- --spectrum-disabled-content-color
1526
- );
1527
- --system-color-handle-fill-color-disabled: var(
1528
- --spectrum-disabled-background-color
1529
- );
1530
- --system-color-loupe-width: var(--spectrum-color-loupe-width);
1531
- --system-color-loupe-height: var(--spectrum-color-loupe-height);
1532
- --system-color-loupe-offset: var(
1533
- --spectrum-color-loupe-bottom-to-color-handle
1534
- );
1535
- --system-color-loupe-animation-distance: 8px;
1536
- --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x);
1537
- --system-color-loupe-drop-shadow-y: var(
1538
- --spectrum-color-loupe-drop-shadow-y
1539
- );
1540
- --system-color-loupe-drop-shadow-blur: var(
1541
- --spectrum-color-loupe-drop-shadow-blur
1542
- );
1543
- --system-color-loupe-drop-shadow-color: var(
1544
- --spectrum-color-loupe-drop-shadow-color
1545
- );
1546
- --system-color-loupe-outer-border-width: var(
1547
- --spectrum-color-loupe-outer-border-width
1548
- );
1549
- --system-color-loupe-inner-border-width: var(
1550
- --spectrum-color-loupe-inner-border-width
1551
- );
1552
- --system-color-loupe-outer-border-color: var(
1553
- --spectrum-color-loupe-outer-border
1554
- );
1555
- --system-color-loupe-inner-border-color: var(
1556
- --spectrum-color-loupe-inner-border
1557
- );
1558
- --system-color-loupe-checkerboard-dark-color: var(
1559
- --spectrum-opacity-checkerboard-square-dark
1560
- );
1561
- --system-color-loupe-checkerboard-light-color: var(
1562
- --spectrum-opacity-checkerboard-square-light
1563
- );
1564
- --system-color-slider-handle-margin-block: var(
1565
- --spectrum-component-top-to-text-75
1566
- );
1567
- --system-color-slider-border-color-rgba: rgba(
1568
- var(--spectrum-gray-900-rgb),
1569
- var(--spectrum-color-slider-border-opacity)
1570
- );
1571
- --system-color-slider-checkerboard-size: var(
1572
- --spectrum-opacity-checkerboard-square-size
1573
- );
1574
- --system-color-slider-checkerboard-dark-color: var(
1575
- --spectrum-opacity-checkerboard-square-dark
1576
- );
1577
- --system-color-slider-checkerboard-light-color: var(
1578
- --spectrum-opacity-checkerboard-square-light
1579
- );
1580
- --system-color-wheel-width: var(--spectrum-color-wheel-width);
1581
- --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width);
1582
- --system-color-wheel-height: var(--spectrum-color-wheel-width);
1583
684
  --system-color-wheel-border-color: var(--spectrum-transparent-black-200);
1584
- --system-color-wheel-border-width: var(--spectrum-border-width-100);
1585
- --system-color-wheel-fill-color-disabled: var(
1586
- --spectrum-disabled-background-color
1587
- );
1588
- --system-color-wheel-track-width: var(--spectrum-color-control-track-width);
1589
- --system-color-wheel-colorarea-margin: var(
1590
- --spectrum-color-wheel-color-area-margin
1591
- );
1592
- --system-color-wheel-colorhandle-position: calc(
1593
- var(--system-color-wheel-width) / 2 -
1594
- var(--system-color-wheel-track-width) / 2
1595
- );
1596
685
  --system-combobox-border-color-default: var(--spectrum-gray-400);
1597
686
  --system-combobox-border-color-hover: var(--spectrum-gray-500);
1598
687
  --system-combobox-border-color-focus: var(--spectrum-gray-900);
1599
688
  --system-combobox-border-color-focus-hover: var(--spectrum-gray-800);
1600
689
  --system-combobox-border-color-key-focus: var(--spectrum-gray-900);
690
+ --system-combobox-readonly-input-border-color: var(--spectrum-gray-400);
1601
691
  --system-combobox-background-color-disabled: var(
1602
692
  --spectrum-disabled-background-color
1603
693
  );
694
+ --system-combobox-border-color-disabled: transparent;
1604
695
  --system-dialog-fullscreen-header-text-size: 28px;
1605
696
  --system-dialog-min-inline-size: 288px;
1606
697
  --system-dialog-confirm-small-width: 400px;
@@ -1641,27 +732,13 @@
1641
732
  26px - var(--spectrum-component-bottom-to-text-300)
1642
733
  );
1643
734
  --system-dialog-confirm-divider-height: var(--spectrum-spacing-50);
1644
- --system-divider-background-color-small: var(--spectrum-gray-300);
1645
- --system-divider-background-color-medium: var(--spectrum-gray-300);
1646
- --system-divider-background-color-large: var(--spectrum-gray-800);
1647
- --system-divider-background-color-small-static-white: var(
735
+ --system-divider-background-color: var(--spectrum-gray-300);
736
+ --system-divider-background-color-static-white: var(
1648
737
  --spectrum-transparent-white-300
1649
738
  );
1650
- --system-divider-background-color-medium-static-white: var(
1651
- --spectrum-transparent-white-300
1652
- );
1653
- --system-divider-background-color-large-static-white: var(
1654
- --spectrum-transparent-white-800
1655
- );
1656
- --system-divider-background-color-small-static-black: var(
739
+ --system-divider-background-color-static-black: var(
1657
740
  --spectrum-transparent-black-300
1658
741
  );
1659
- --system-divider-background-color-medium-static-black: var(
1660
- --spectrum-transparent-black-300
1661
- );
1662
- --system-divider-background-color-large-static-black: var(
1663
- --spectrum-transparent-black-800
1664
- );
1665
742
  --system-drop-zone-padding: var(--spectrum-spacing-400);
1666
743
  --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400);
1667
744
  --system-drop-zone-heading-to-body: var(--spectrum-spacing-75);
@@ -1721,195 +798,12 @@
1721
798
  --system-drop-zone-content-background-color: var(
1722
799
  --spectrum-accent-visual-color
1723
800
  );
1724
- --system-drop-zone-content-color: var(--spectrum-white);
1725
- --system-drop-zone-heading-font-size-cjk: var(
1726
- --spectrum-drop-zone-cjk-title-size
1727
- );
1728
- --system-field-group-margin: var(--spectrum-spacing-300);
1729
- --system-field-group-readonly-delimiter: ',';
1730
- --system-field-label-color: var(
1731
- --spectrum-neutral-subdued-content-color-default
1732
- );
1733
- --system-field-label-font-weight: var(--spectrum-regular-font-weight);
1734
- --system-field-label-line-height: var(--spectrum-line-height-100);
1735
- --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
1736
- --system-field-label-disabled-content-color: var(
1737
- --spectrum-disabled-content-color
1738
- );
1739
- --system-field-label-min-height: var(--spectrum-component-height-75);
1740
- --system-field-label-size-m-min-height: var(--spectrum-component-height-75);
1741
- --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75);
1742
- --system-field-label-size-m-top-to-text: var(
1743
- --spectrum-component-top-to-text-75
1744
- );
1745
- --system-field-label-bottom-to-text: var(
1746
- --spectrum-component-bottom-to-text-75
1747
- );
1748
- --system-field-label-size-m-bottom-to-text: var(
1749
- --spectrum-component-bottom-to-text-75
1750
- );
1751
- --system-field-label-font-size: var(--spectrum-font-size-75);
1752
- --system-field-label-size-m-font-size: var(--spectrum-font-size-75);
1753
- --system-field-label-side-margin-block-start: var(
1754
- --spectrum-field-label-top-margin-medium
1755
- );
1756
- --system-field-label-size-m-side-margin-block-start: var(
1757
- --spectrum-field-label-top-margin-medium
1758
- );
1759
- --system-field-label-side-padding-right: var(--spectrum-spacing-200);
1760
- --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200);
1761
- --system-field-label-text-to-asterisk: var(
1762
- --spectrum-field-label-text-to-asterisk-medium
1763
- );
1764
- --system-field-label-size-m-text-to-asterisk: var(
1765
- --spectrum-field-label-text-to-asterisk-medium
1766
- );
1767
- --system-field-label-size-s-min-height: var(--spectrum-component-height-75);
1768
- --system-field-label-size-s-top-to-text: var(
1769
- --spectrum-component-top-to-text-75
1770
- );
1771
- --system-field-label-size-s-bottom-to-text: var(
1772
- --spectrum-component-bottom-to-text-75
1773
- );
1774
- --system-field-label-size-s-font-size: var(--spectrum-font-size-75);
1775
- --system-field-label-size-s-side-margin-block-start: var(
1776
- --spectrum-field-label-top-margin-small
1777
- );
1778
- --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100);
1779
- --system-field-label-size-s-text-to-asterisk: var(
1780
- --spectrum-field-label-text-to-asterisk-small
1781
- );
1782
- --system-field-label-size-l-min-height: var(
1783
- --spectrum-component-height-100
1784
- );
1785
- --system-field-label-size-l-top-to-text: var(
1786
- --spectrum-component-top-to-text-100
1787
- );
1788
- --system-field-label-size-l-bottom-to-text: var(
1789
- --spectrum-component-bottom-to-text-100
1790
- );
1791
- --system-field-label-size-l-font-size: var(--spectrum-font-size-100);
1792
- --system-field-label-size-l-side-margin-block-start: var(
1793
- --spectrum-field-label-top-margin-large
1794
- );
1795
- --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200);
1796
- --system-field-label-size-l-text-to-asterisk: var(
1797
- --spectrum-field-label-text-to-asterisk-large
1798
- );
1799
- --system-field-label-size-xl-min-height: var(
1800
- --spectrum-component-height-200
1801
- );
1802
- --system-field-label-size-xl-top-to-text: var(
1803
- --spectrum-component-top-to-text-200
1804
- );
1805
- --system-field-label-size-xl-bottom-to-text: var(
1806
- --spectrum-component-bottom-to-text-200
1807
- );
1808
- --system-field-label-size-xl-font-size: var(--spectrum-font-size-200);
1809
- --system-field-label-size-xl-side-margin-block-start: var(
1810
- --spectrum-field-label-top-margin-extra-large
1811
- );
1812
- --system-field-label-size-xl-side-padding-right: var(
1813
- --spectrum-spacing-200
1814
- );
1815
- --system-field-label-size-xl-text-to-asterisk: var(
1816
- --spectrum-field-label-text-to-asterisk-extra-large
1817
- );
1818
- --system-help-text-line-height: var(--spectrum-line-height-100);
1819
- --system-help-text-content-color-default: var(
1820
- --spectrum-neutral-subdued-content-color-default
1821
- );
1822
- --system-help-text-icon-color-default: var(
1823
- --spectrum-neutral-subdued-content-color-default
1824
- );
1825
- --system-help-text-disabled-content-color: var(
1826
- --spectrum-disabled-content-color
1827
- );
1828
- --system-help-text-neutral-content-color-default: var(
1829
- --spectrum-neutral-subdued-content-color-default
1830
- );
1831
- --system-help-text-neutral-icon-color-default: var(
1832
- --spectrum-neutral-subdued-content-color-default
1833
- );
1834
- --system-help-text-negative-content-color-default: var(
1835
- --spectrum-negative-color-900
1836
- );
1837
- --system-help-text-negative-icon-color-default: var(
1838
- --spectrum-negative-color-900
1839
- );
1840
- --system-help-text-disabled-content-color-default: var(
1841
- --system-help-text-disabled-content-color
1842
- );
1843
- --system-help-text-disabled-icon-color-default: var(
1844
- --system-help-text-disabled-content-color
1845
- );
1846
- --system-help-text-lang-ja-line-height-cjk: var(
1847
- --spectrum-cjk-line-height-100
1848
- );
1849
- --system-help-text-lang-zh-line-height-cjk: var(
1850
- --spectrum-cjk-line-height-100
1851
- );
1852
- --system-help-text-lang-ko-line-height-cjk: var(
1853
- --spectrum-cjk-line-height-100
1854
- );
1855
- --system-help-text-size-s-min-height: var(--spectrum-component-height-75);
1856
- --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75);
1857
- --system-help-text-size-s-font-size: var(--spectrum-font-size-75);
1858
- --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75);
1859
- --system-help-text-size-s-top-to-workflow-icon: var(
1860
- --spectrum-help-text-top-to-workflow-icon-small
1861
- );
1862
- --system-help-text-size-s-top-to-text: var(
1863
- --spectrum-component-top-to-text-75
1864
- );
1865
- --system-help-text-size-s-bottom-to-text: var(
1866
- --spectrum-component-bottom-to-text-75
1867
- );
1868
- --system-help-text-size-m-min-height: var(--spectrum-component-height-75);
1869
- --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100);
1870
- --system-help-text-size-m-font-size: var(--spectrum-font-size-75);
1871
- --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75);
1872
- --system-help-text-size-m-top-to-workflow-icon: var(
1873
- --spectrum-help-text-top-to-workflow-icon-medium
1874
- );
1875
- --system-help-text-size-m-top-to-text: var(
1876
- --spectrum-component-top-to-text-75
1877
- );
1878
- --system-help-text-size-m-bottom-to-text: var(
1879
- --spectrum-component-bottom-to-text-75
1880
- );
1881
- --system-help-text-size-l-min-height: var(--spectrum-component-height-100);
1882
- --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200);
1883
- --system-help-text-size-l-font-size: var(--spectrum-font-size-100);
1884
- --system-help-text-size-l-text-to-visual: var(
1885
- --spectrum-text-to-visual-100
1886
- );
1887
- --system-help-text-size-l-top-to-workflow-icon: var(
1888
- --spectrum-help-text-top-to-workflow-icon-large
1889
- );
1890
- --system-help-text-size-l-top-to-text: var(
1891
- --spectrum-component-top-to-text-100
1892
- );
1893
- --system-help-text-size-l-bottom-to-text: var(
1894
- --spectrum-component-bottom-to-text-100
1895
- );
1896
- --system-help-text-size-xl-min-height: var(--spectrum-component-height-200);
1897
- --system-help-text-size-xl-icon-size: var(
1898
- --spectrum-workflow-icon-size-300
1899
- );
1900
- --system-help-text-size-xl-font-size: var(--spectrum-font-size-200);
1901
- --system-help-text-size-xl-text-to-visual: var(
1902
- --spectrum-text-to-visual-200
1903
- );
1904
- --system-help-text-size-xl-top-to-workflow-icon: var(
1905
- --spectrum-help-text-top-to-workflow-icon-extra-large
1906
- );
1907
- --system-help-text-size-xl-top-to-text: var(
1908
- --spectrum-component-top-to-text-200
1909
- );
1910
- --system-help-text-size-xl-bottom-to-text: var(
1911
- --spectrum-component-bottom-to-text-200
801
+ --system-drop-zone-content-color: var(--spectrum-white);
802
+ --system-drop-zone-heading-font-size-cjk: var(
803
+ --spectrum-drop-zone-cjk-title-size
1912
804
  );
805
+ --system-field-group-margin: var(--spectrum-spacing-300);
806
+ --system-field-group-readonly-delimiter: ',';
1913
807
  --system-infield-button-border-width: 0;
1914
808
  --system-infield-button-border-color: transparent;
1915
809
  --system-infield-button-border-radius: var(--spectrum-corner-radius-75);
@@ -2056,33 +950,6 @@
2056
950
  --system-infield-button-quiet-border-width: 0;
2057
951
  --system-infield-button-quiet-disabled-background-color: transparent;
2058
952
  --system-infield-button-quiet-disabled-border-color: transparent;
2059
- --system-link-animation-duration: var(--spectrum-animation-duration-100);
2060
- --system-link-text-color-primary-default: var(
2061
- --spectrum-accent-content-color-default
2062
- );
2063
- --system-link-text-color-primary-hover: var(
2064
- --spectrum-accent-content-color-hover
2065
- );
2066
- --system-link-text-color-primary-active: var(
2067
- --spectrum-accent-content-color-down
2068
- );
2069
- --system-link-text-color-primary-focus: var(
2070
- --spectrum-accent-content-color-key-focus
2071
- );
2072
- --system-link-text-color-secondary-default: var(
2073
- --spectrum-neutral-content-color-default
2074
- );
2075
- --system-link-text-color-secondary-hover: var(
2076
- --spectrum-neutral-content-color-hover
2077
- );
2078
- --system-link-text-color-secondary-active: var(
2079
- --spectrum-neutral-content-color-down
2080
- );
2081
- --system-link-text-color-secondary-focus: var(
2082
- --spectrum-neutral-content-color-key-focus
2083
- );
2084
- --system-link-text-color-white: var(--spectrum-white);
2085
- --system-link-text-color-black: var(--spectrum-black);
2086
953
  --system-menu-item-background-color-hover: rgba(
2087
954
  var(--spectrum-gray-900-rgb),
2088
955
  var(--spectrum-transparent-black-200-opacity)
@@ -2119,26 +986,7 @@
2119
986
  --system-meter-size-l-top-to-text: var(
2120
987
  --spectrum-component-top-to-text-200
2121
988
  );
2122
- --system-modal-confirm-exit-animation-delay: var(
2123
- --spectrum-animation-duration-0
2124
- );
2125
- --system-modal-fullscreen-margin: 32px;
2126
- --system-modal-max-height: 90vh;
2127
- --system-modal-max-width: 90%;
2128
989
  --system-modal-background-color: var(--spectrum-gray-100);
2129
- --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
2130
- --system-modal-confirm-exit-animation-duration: var(
2131
- --spectrum-animation-duration-100
2132
- );
2133
- --system-modal-confirm-entry-animation-duration: var(
2134
- --spectrum-animation-duration-500
2135
- );
2136
- --system-modal-confirm-entry-animation-delay: var(
2137
- --spectrum-animation-duration-200
2138
- );
2139
- --system-modal-transition-animation-duration: var(
2140
- --spectrum-animation-duration-100
2141
- );
2142
990
  --system-picker-background-color-default: var(--spectrum-gray-200);
2143
991
  --system-picker-background-color-default-open: var(--spectrum-gray-300);
2144
992
  --system-picker-background-color-hover: var(--spectrum-gray-300);
@@ -2166,107 +1014,9 @@
2166
1014
  --spectrum-corner-radius-75
2167
1015
  );
2168
1016
  --system-picker-button-border-width: 0px;
2169
- --system-picker-button-height: var(--spectrum-component-height-100);
2170
- --system-picker-button-width: var(--spectrum-component-height-100);
2171
- --system-picker-button-gap: var(--spectrum-text-to-visual-50);
2172
1017
  --system-picker-button-padding: var(
2173
1018
  --spectrum-in-field-button-edge-to-fill
2174
1019
  );
2175
- --system-picker-button-label-padding: var(--spectrum-text-to-visual-50);
2176
- --system-picker-button-fill-padding: var(
2177
- --spectrum-field-edge-to-disclosure-icon-100
2178
- );
2179
- --system-picker-button-border-radius-rounded: var(
2180
- --spectrum-corner-radius-200
2181
- );
2182
- --system-picker-button-icon-color: var(
2183
- --spectrum-neutral-content-color-default
2184
- );
2185
- --system-picker-button-icon-color-hover: var(
2186
- --spectrum-neutral-content-color-hover
2187
- );
2188
- --system-picker-button-icon-color-down: var(
2189
- --spectrum-neutral-content-color-down
2190
- );
2191
- --system-picker-button-icon-color-key-focus: var(
2192
- --spectrum-neutral-content-color-key-focus
2193
- );
2194
- --system-picker-button-font-color: var(
2195
- --spectrum-neutral-content-color-default
2196
- );
2197
- --system-picker-button-font-color-hover: var(
2198
- --spectrum-neutral-content-color-hover
2199
- );
2200
- --system-picker-button-font-color-down: var(
2201
- --spectrum-neutral-content-color-down
2202
- );
2203
- --system-picker-button-font-color-key-focus: var(
2204
- --spectrum-neutral-content-color-key-focus
2205
- );
2206
- --system-picker-button-font-family: var(--spectrum-sans-font-family-stack);
2207
- --system-picker-button-font-style: var(--spectrum-default-font-style);
2208
- --system-picker-button-font-weight: var(
2209
- --spectrum-body-sans-serif-font-weight
2210
- );
2211
- --system-picker-button-font-size: var(--spectrum-font-size-100);
2212
- --system-picker-button-background-animation-duration: var(
2213
- --spectrum-animation-duration-100
2214
- );
2215
- --system-picker-button-background-color-disabled: var(
2216
- --spectrum-disabled-background-color
2217
- );
2218
- --system-picker-button-background-color-hover-disabled: var(
2219
- --spectrum-disabled-background-color
2220
- );
2221
- --system-picker-button-background-color-down-disabled: var(
2222
- --spectrum-disabled-background-color
2223
- );
2224
- --system-picker-button-border-color-disabled: var(
2225
- --spectrum-disabled-background-color
2226
- );
2227
- --system-picker-button-font-color-disabled: var(
2228
- --spectrum-disabled-content-color
2229
- );
2230
- --system-picker-button-font-color-hover-disabled: var(
2231
- --spectrum-disabled-content-color
2232
- );
2233
- --system-picker-button-font-color-down-disabled: var(
2234
- --spectrum-disabled-content-color
2235
- );
2236
- --system-picker-button-icon-color-disabled: var(
2237
- --spectrum-disabled-content-color
2238
- );
2239
- --system-picker-button-icon-color-hover-disabled: var(
2240
- --spectrum-disabled-content-color
2241
- );
2242
- --system-picker-button-icon-color-down-disabled: var(
2243
- --spectrum-disabled-content-color
2244
- );
2245
- --system-picker-button-size-s-height: var(--spectrum-component-height-75);
2246
- --system-picker-button-size-s-width: var(--spectrum-component-height-75);
2247
- --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75);
2248
- --system-picker-button-size-s-font-size: var(--spectrum-font-size-75);
2249
- --system-picker-button-size-s-fill-padding: var(
2250
- --spectrum-field-edge-to-disclosure-icon-75
2251
- );
2252
- --system-picker-button-size-l-height: var(--spectrum-component-height-200);
2253
- --system-picker-button-size-l-width: var(--spectrum-component-height-200);
2254
- --system-picker-button-size-l-label-padding: var(
2255
- --spectrum-text-to-visual-200
2256
- );
2257
- --system-picker-button-size-l-font-size: var(--spectrum-font-size-200);
2258
- --system-picker-button-size-l-fill-padding: var(
2259
- --spectrum-field-edge-to-disclosure-icon-200
2260
- );
2261
- --system-picker-button-size-xl-height: var(--spectrum-component-height-300);
2262
- --system-picker-button-size-xl-width: var(--spectrum-component-height-300);
2263
- --system-picker-button-size-xl-label-padding: var(
2264
- --spectrum-text-to-visual-300
2265
- );
2266
- --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300);
2267
- --system-picker-button-size-xl-fill-padding: var(
2268
- --spectrum-field-edge-to-disclosure-icon-300
2269
- );
2270
1020
  --system-popover-border-width: 0;
2271
1021
  --system-progress-bar-animation-ease-in-out-indeterminate: var(
2272
1022
  --spectrum-animation-ease-in-out
@@ -2527,49 +1277,6 @@
2527
1277
  --system-search-size-xl-edge-to-visual: var(
2528
1278
  --spectrum-component-pill-edge-to-visual-300
2529
1279
  );
2530
- --system-side-nav-focus-ring-size: var(
2531
- --spectrum-focus-indicator-thickness
2532
- );
2533
- --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
2534
- --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color);
2535
- --system-side-nav-min-height: var(--spectrum-component-height-100);
2536
- --system-side-nav-width: 100%;
2537
- --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width);
2538
- --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width);
2539
- --system-side-nav-border-radius: var(--spectrum-corner-radius-100);
2540
- --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100);
2541
- --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100);
2542
- --system-side-nav-inline-padding: var(
2543
- --spectrum-component-edge-to-text-100
2544
- );
2545
- --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item);
2546
- --system-side-nav-top-to-icon: var(
2547
- --spectrum-component-top-to-workflow-icon-100
2548
- );
2549
- --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100);
2550
- --system-side-nav-bottom-to-label: var(
2551
- --spectrum-side-navigation-bottom-to-text
2552
- );
2553
- --system-side-nav-start-to-content-second-level: var(
2554
- --spectrum-side-navigation-second-level-edge-to-text
2555
- );
2556
- --system-side-nav-start-to-content-third-level: var(
2557
- --spectrum-side-navigation-third-level-edge-to-text
2558
- );
2559
- --system-side-nav-start-to-content-with-icon-second-level: var(
2560
- --spectrum-side-navigation-with-icon-second-level-edge-to-text
2561
- );
2562
- --system-side-nav-start-to-content-with-icon-third-level: var(
2563
- --spectrum-side-navigation-with-icon-third-level-edge-to-text
2564
- );
2565
- --system-side-nav-heading-top-margin: var(
2566
- --spectrum-side-navigation-item-to-header
2567
- );
2568
- --system-side-nav-heading-bottom-margin: var(
2569
- --spectrum-side-navigation-header-to-item
2570
- );
2571
- --system-side-nav-background-disabled: transparent;
2572
- --system-side-nav-background-default: transparent;
2573
1280
  --system-side-nav-background-hover: var(--spectrum-gray-200);
2574
1281
  --system-side-nav-item-background-down: var(--spectrum-gray-300);
2575
1282
  --system-side-nav-background-key-focus: var(--spectrum-gray-200);
@@ -2579,80 +1286,6 @@
2579
1286
  --system-side-nav-background-hover-selected: var(--spectrum-gray-300);
2580
1287
  --system-side-nav-item-background-down-selected: var(--spectrum-gray-300);
2581
1288
  --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200);
2582
- --system-side-nav-header-color: var(--spectrum-gray-600);
2583
- --system-side-nav-content-disabled-color: var(
2584
- --spectrum-disabled-content-color
2585
- );
2586
- --system-side-nav-content-color-default: var(
2587
- --spectrum-neutral-content-color-default
2588
- );
2589
- --system-side-nav-content-color-hover: var(
2590
- --spectrum-neutral-content-color-hover
2591
- );
2592
- --system-side-nav-content-color-down: var(
2593
- --spectrum-neutral-content-color-down
2594
- );
2595
- --system-side-nav-content-color-key-focus: var(
2596
- --spectrum-neutral-content-color-key-focus
2597
- );
2598
- --system-side-nav-content-color-default-selected: var(
2599
- --spectrum-neutral-content-color-default
2600
- );
2601
- --system-side-nav-content-color-hover-selected: var(
2602
- --spectrum-neutral-content-color-hover
2603
- );
2604
- --system-side-nav-content-color-down-selected: var(
2605
- --spectrum-neutral-content-color-down
2606
- );
2607
- --system-side-nav-content-color-key-focus-selected: var(
2608
- --spectrum-neutral-content-color-key-focus
2609
- );
2610
- --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack);
2611
- --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight);
2612
- --system-side-nav-text-font-style: var(--spectrum-default-font-style);
2613
- --system-side-nav-text-font-size: var(--spectrum-font-size-100);
2614
- --system-side-nav-text-line-height: var(--spectrum-line-height-100);
2615
- --system-side-nav-top-level-font-family: var(
2616
- --spectrum-sans-font-family-stack
2617
- );
2618
- --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight);
2619
- --system-side-nav-top-level-font-style: var(--spectrum-default-font-style);
2620
- --system-side-nav-top-level-font-size: var(--spectrum-font-size-100);
2621
- --system-side-nav-top-level-line-height: var(--spectrum-line-height-100);
2622
- --system-side-nav-header-font-family: var(
2623
- --spectrum-sans-font-family-stack
2624
- );
2625
- --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight);
2626
- --system-side-nav-header-font-style: var(--spectrum-default-font-style);
2627
- --system-side-nav-header-font-size: var(--spectrum-font-size-75);
2628
- --system-side-nav-header-line-height: var(--spectrum-line-height-100);
2629
- --system-side-nav-lang-ja-text-line-height: var(
2630
- --spectrum-cjk-line-height-100
2631
- );
2632
- --system-side-nav-lang-zh-text-line-height: var(
2633
- --spectrum-cjk-line-height-100
2634
- );
2635
- --system-side-nav-lang-ko-text-line-height: var(
2636
- --spectrum-cjk-line-height-100
2637
- );
2638
- --system-side-nav-lang-ja-top-level-line-height: var(
2639
- --spectrum-cjk-line-height-100
2640
- );
2641
- --system-side-nav-lang-zh-top-level-line-height: var(
2642
- --spectrum-cjk-line-height-100
2643
- );
2644
- --system-side-nav-lang-ko-top-level-line-height: var(
2645
- --spectrum-cjk-line-height-100
2646
- );
2647
- --system-side-nav-lang-ja-header-line-height: var(
2648
- --spectrum-cjk-line-height-100
2649
- );
2650
- --system-side-nav-lang-zh-header-line-height: var(
2651
- --spectrum-cjk-line-height-100
2652
- );
2653
- --system-side-nav-lang-ko-header-line-height: var(
2654
- --spectrum-cjk-line-height-100
2655
- );
2656
1289
  --system-slider-track-color: var(--spectrum-gray-200);
2657
1290
  --system-slider-track-fill-color: var(--spectrum-gray-600);
2658
1291
  --system-slider-ramp-track-color: var(--spectrum-gray-300);
@@ -2684,26 +1317,9 @@
2684
1317
  --system-slider-size-xl-handle-border-radius: calc(
2685
1318
  var(--spectrum-corner-radius-200) * 4
2686
1319
  );
2687
- --system-split-view-vertical-width: 100%;
2688
- --system-split-view-vertical-gripper-width: 50%;
2689
- --system-split-view-vertical-gripper-outer-width: 100%;
2690
- --system-split-view-vertical-gripper-reset: 0;
2691
1320
  --system-split-view-background-color: var(--spectrum-gray-100);
2692
- --system-split-view-content-color: var(--spectrum-body-color);
2693
1321
  --system-split-view-handle-background-color: var(--spectrum-gray-300);
2694
- --system-split-view-handle-background-color-hover: var(--spectrum-gray-400);
2695
- --system-split-view-handle-background-color-down: var(--spectrum-gray-800);
2696
- --system-split-view-handle-background-color-focus: var(
2697
- --spectrum-focus-indicator-color
2698
- );
2699
- --system-split-view-handle-width: var(--spectrum-border-width-200);
2700
1322
  --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75);
2701
- --system-split-view-gripper-width: var(--spectrum-border-width-400);
2702
- --system-split-view-gripper-height: 16px;
2703
- --system-split-view-gripper-border-width-horizontal: 3px;
2704
- --system-split-view-gripper-border-width-vertical: var(
2705
- --spectrum-border-width-400
2706
- );
2707
1323
  --system-status-light-corner-radius: 50%;
2708
1324
  --system-status-light-font-weight: 400;
2709
1325
  --system-status-light-border-width: var(--spectrum-border-width-100);
@@ -3663,19 +2279,19 @@
3663
2279
  --system-tabs-emphasized-selection-indicator-color: var(
3664
2280
  --spectrum-accent-content-color-default
3665
2281
  );
3666
- --system-tag-border-color: var(--spectrum-gray-300);
3667
- --system-tag-border-color-hover: var(--spectrum-gray-400);
3668
- --system-tag-border-color-active: var(--spectrum-gray-500);
3669
- --system-tag-border-color-focus: var(--spectrum-gray-400);
2282
+ --system-tag-background-color: transparent;
2283
+ --system-tag-background-color-hover: var(--spectrum-gray-300);
2284
+ --system-tag-background-color-active: var(--spectrum-gray-400);
2285
+ --system-tag-background-color-focus: var(--spectrum-gray-300);
3670
2286
  --system-tag-size-small-corner-radius: var(--spectrum-component-height-75);
3671
2287
  --system-tag-size-medium-corner-radius: var(
3672
2288
  --spectrum-component-height-100
3673
2289
  );
3674
2290
  --system-tag-size-large-corner-radius: var(--spectrum-component-height-200);
3675
- --system-tag-background-color: transparent;
3676
- --system-tag-background-color-hover: var(--spectrum-gray-300);
3677
- --system-tag-background-color-active: var(--spectrum-gray-400);
3678
- --system-tag-background-color-focus: var(--spectrum-gray-300);
2291
+ --system-tag-border-color: var(--spectrum-gray-300);
2292
+ --system-tag-border-color-hover: var(--spectrum-gray-400);
2293
+ --system-tag-border-color-active: var(--spectrum-gray-500);
2294
+ --system-tag-border-color-focus: var(--spectrum-gray-400);
3679
2295
  --system-tag-content-color: var(--spectrum-neutral-content-color-default);
3680
2296
  --system-tag-content-color-hover: var(
3681
2297
  --spectrum-neutral-content-color-hover
@@ -3686,6 +2302,7 @@
3686
2302
  --system-tag-content-color-focus: var(
3687
2303
  --spectrum-neutral-content-color-key-focus
3688
2304
  );
2305
+ --system-tag-content-color-selected: var(--spectrum-gray-50);
3689
2306
  --system-tag-border-color-selected: var(
3690
2307
  --spectrum-neutral-background-color-default
3691
2308
  );
@@ -3727,271 +2344,30 @@
3727
2344
  --system-tag-size-large-clear-button-spacing-inline-end: var(
3728
2345
  --spectrum-component-pill-edge-to-visual-200
3729
2346
  );
3730
- --system-tag-avatar-opacity-disabled: 0.3;
3731
- --system-tag-animation-duration: var(--spectrum-animation-duration-100);
3732
- --system-tag-border-width: var(--spectrum-border-width-100);
3733
- --system-tag-focus-ring-thickness: var(
3734
- --spectrum-focus-indicator-thickness
3735
- );
3736
- --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
3737
- --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color);
3738
- --system-tag-label-line-height: var(--spectrum-line-height-100);
3739
- --system-tag-label-font-weight: var(--spectrum-regular-font-weight);
3740
- --system-tag-content-color-selected: var(--spectrum-gray-50);
3741
- --system-tag-background-color-selected: var(
3742
- --spectrum-neutral-background-color-selected-default
3743
- );
3744
- --system-tag-background-color-selected-hover: var(
3745
- --spectrum-neutral-background-color-selected-hover
3746
- );
3747
- --system-tag-background-color-selected-active: var(
3748
- --spectrum-neutral-background-color-selected-down
3749
- );
3750
- --system-tag-background-color-selected-focus: var(
3751
- --spectrum-neutral-background-color-selected-key-focus
3752
- );
3753
- --system-tag-border-color-invalid: var(--spectrum-negative-color-900);
3754
- --system-tag-border-color-invalid-hover: var(
3755
- --spectrum-negative-color-1000
3756
- );
3757
- --system-tag-border-color-invalid-active: var(
3758
- --spectrum-negative-color-1100
3759
- );
3760
- --system-tag-border-color-invalid-focus: var(
3761
- --spectrum-negative-color-1000
3762
- );
3763
- --system-tag-content-color-invalid: var(
3764
- --spectrum-negative-content-color-default
3765
- );
3766
- --system-tag-content-color-invalid-hover: var(
3767
- --spectrum-negative-content-color-hover
3768
- );
3769
- --system-tag-content-color-invalid-active: var(
3770
- --spectrum-negative-content-color-down
3771
- );
3772
- --system-tag-content-color-invalid-focus: var(
3773
- --spectrum-negative-content-color-key-focus
3774
- );
3775
- --system-tag-border-color-invalid-selected: var(
3776
- --spectrum-negative-background-color-default
3777
- );
3778
- --system-tag-border-color-invalid-selected-hover: var(
3779
- --spectrum-negative-background-color-hover
3780
- );
3781
- --system-tag-border-color-invalid-selected-focus: var(
3782
- --spectrum-negative-background-color-down
3783
- );
3784
- --system-tag-border-color-invalid-selected-active: var(
3785
- --spectrum-negative-background-color-key-focus
3786
- );
3787
- --system-tag-background-color-invalid-selected: var(
3788
- --spectrum-negative-background-color-default
3789
- );
3790
- --system-tag-background-color-invalid-selected-hover: var(
3791
- --spectrum-negative-background-color-hover
3792
- );
3793
- --system-tag-background-color-invalid-selected-active: var(
3794
- --spectrum-negative-background-color-down
3795
- );
3796
- --system-tag-background-color-invalid-selected-focus: var(
3797
- --spectrum-negative-background-color-key-focus
3798
- );
3799
- --system-tag-content-color-invalid-selected: var(--spectrum-white);
3800
- --system-tag-border-color-emphasized: var(
3801
- --spectrum-accent-background-color-default
3802
- );
3803
- --system-tag-border-color-emphasized-hover: var(
3804
- --spectrum-accent-background-color-hover
3805
- );
3806
- --system-tag-border-color-emphasized-active: var(
3807
- --spectrum-accent-background-color-down
3808
- );
3809
- --system-tag-border-color-emphasized-focus: var(
3810
- --spectrum-accent-background-color-key-focus
3811
- );
3812
- --system-tag-background-color-emphasized: var(
3813
- --spectrum-accent-background-color-default
3814
- );
3815
- --system-tag-background-color-emphasized-hover: var(
3816
- --spectrum-accent-background-color-hover
3817
- );
3818
- --system-tag-background-color-emphasized-active: var(
3819
- --spectrum-accent-background-color-down
3820
- );
3821
- --system-tag-background-color-emphasized-focus: var(
3822
- --spectrum-accent-background-color-key-focus
3823
- );
3824
- --system-tag-content-color-emphasized: var(--spectrum-white);
3825
- --system-tag-content-color-disabled: var(--spectrum-disabled-content-color);
3826
- --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
3827
- --system-tag-icon-size: var(--spectrum-workflow-icon-size-100);
3828
- --system-tag-icon-spacing-block-start: var(
3829
- --spectrum-component-top-to-workflow-icon-100
3830
- );
3831
- --system-tag-icon-spacing-block-end: var(
3832
- --spectrum-component-top-to-workflow-icon-100
3833
- );
3834
- --system-tag-avatar-spacing-block-start: var(
3835
- --spectrum-tag-top-to-avatar-medium
3836
- );
3837
- --system-tag-avatar-spacing-block-end: var(
3838
- --spectrum-tag-top-to-avatar-medium
3839
- );
3840
- --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
3841
- --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
3842
- --system-tag-clear-button-spacing-inline-start: var(
3843
- --spectrum-text-to-visual-100
3844
- );
3845
- --system-tag-height: var(--spectrum-component-height-100);
3846
- --system-tag-font-size: var(--spectrum-font-size-100);
3847
- --system-tag-clear-button-spacing-block: var(
3848
- --spectrum-tag-top-to-cross-icon-medium
3849
- );
3850
- --system-tag-size-s-height: var(--spectrum-component-height-75);
3851
- --system-tag-size-s-font-size: var(--spectrum-font-size-75);
3852
- --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75);
3853
- --system-tag-size-s-clear-button-spacing-inline-start: var(
3854
- --spectrum-text-to-visual-75
3855
- );
3856
- --system-tag-size-s-clear-button-spacing-block: var(
3857
- --spectrum-tag-top-to-cross-icon-small
3858
- );
3859
- --system-tag-size-s-icon-spacing-block-start: var(
3860
- --spectrum-component-top-to-workflow-icon-75
3861
- );
3862
- --system-tag-size-s-icon-spacing-block-end: var(
3863
- --spectrum-component-top-to-workflow-icon-75
3864
- );
3865
- --system-tag-size-s-icon-spacing-inline-end: var(
3866
- --spectrum-text-to-visual-75
3867
- );
3868
- --system-tag-size-s-avatar-spacing-block-start: var(
3869
- --spectrum-tag-top-to-avatar-small
3870
- );
3871
- --system-tag-size-s-avatar-spacing-block-end: var(
3872
- --spectrum-tag-top-to-avatar-small
3873
- );
3874
- --system-tag-size-s-avatar-spacing-inline-end: var(
3875
- --spectrum-text-to-visual-75
3876
- );
3877
- --system-tag-size-s-label-spacing-block: var(
3878
- --spectrum-component-top-to-text-75
3879
- );
3880
- --system-tag-size-s-corner-radius: var(
3881
- --system-tag-size-small-corner-radius
3882
- );
3883
- --system-tag-size-s-spacing-inline-start: var(
3884
- --system-tag-size-small-spacing-inline-start
3885
- );
3886
- --system-tag-size-s-label-spacing-inline-end: var(
3887
- --system-tag-size-small-label-spacing-inline-end
3888
- );
3889
- --system-tag-size-s-clear-button-spacing-inline-end: var(
3890
- --system-tag-size-small-clear-button-spacing-inline-end
3891
- );
3892
- --system-tag-size-m-height: var(--spectrum-component-height-100);
3893
- --system-tag-size-m-font-size: var(--spectrum-font-size-100);
3894
- --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100);
3895
- --system-tag-size-m-clear-button-spacing-inline-start: var(
3896
- --spectrum-text-to-visual-100
3897
- );
3898
- --system-tag-size-m-clear-button-spacing-block: var(
3899
- --spectrum-tag-top-to-cross-icon-medium
3900
- );
3901
- --system-tag-size-m-icon-spacing-block-start: var(
3902
- --spectrum-component-top-to-workflow-icon-100
3903
- );
3904
- --system-tag-size-m-icon-spacing-block-end: var(
3905
- --spectrum-component-top-to-workflow-icon-100
3906
- );
3907
- --system-tag-size-m-icon-spacing-inline-end: var(
3908
- --spectrum-text-to-visual-100
3909
- );
3910
- --system-tag-size-m-avatar-spacing-block-start: var(
3911
- --spectrum-tag-top-to-avatar-medium
3912
- );
3913
- --system-tag-size-m-avatar-spacing-block-end: var(
3914
- --spectrum-tag-top-to-avatar-medium
3915
- );
3916
- --system-tag-size-m-avatar-spacing-inline-end: var(
3917
- --spectrum-text-to-visual-100
3918
- );
3919
- --system-tag-size-m-label-spacing-block: var(
3920
- --spectrum-component-top-to-text-100
3921
- );
3922
- --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius);
3923
- --system-tag-size-m-corner-radius: var(
3924
- --system-tag-size-medium-corner-radius
3925
- );
3926
- --system-tag-spacing-inline-start: var(
3927
- --system-tag-size-medium-spacing-inline-start
3928
- );
3929
- --system-tag-size-m-spacing-inline-start: var(
3930
- --system-tag-size-medium-spacing-inline-start
3931
- );
3932
- --system-tag-label-spacing-inline-end: var(
3933
- --system-tag-size-medium-label-spacing-inline-end
3934
- );
3935
- --system-tag-size-m-label-spacing-inline-end: var(
3936
- --system-tag-size-medium-label-spacing-inline-end
3937
- );
3938
- --system-tag-clear-button-spacing-inline-end: var(
3939
- --system-tag-size-medium-clear-button-spacing-inline-end
3940
- );
3941
- --system-tag-size-m-clear-button-spacing-inline-end: var(
3942
- --system-tag-size-medium-clear-button-spacing-inline-end
3943
- );
3944
- --system-tag-size-l-height: var(--spectrum-component-height-200);
3945
- --system-tag-size-l-font-size: var(--spectrum-font-size-200);
3946
- --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200);
3947
- --system-tag-size-l-clear-button-spacing-inline-start: var(
3948
- --spectrum-text-to-visual-200
3949
- );
3950
- --system-tag-size-l-clear-button-spacing-block: var(
3951
- --spectrum-tag-top-to-cross-icon-large
3952
- );
3953
- --system-tag-size-l-icon-spacing-block-start: var(
3954
- --spectrum-component-top-to-workflow-icon-200
3955
- );
3956
- --system-tag-size-l-icon-spacing-block-end: var(
3957
- --spectrum-component-top-to-workflow-icon-200
3958
- );
3959
- --system-tag-size-l-icon-spacing-inline-end: var(
3960
- --spectrum-text-to-visual-200
3961
- );
3962
- --system-tag-size-l-avatar-spacing-block-start: var(
3963
- --spectrum-tag-top-to-avatar-large
3964
- );
3965
- --system-tag-size-l-avatar-spacing-block-end: var(
3966
- --spectrum-tag-top-to-avatar-large
3967
- );
3968
- --system-tag-size-l-avatar-spacing-inline-end: var(
3969
- --spectrum-text-to-visual-200
3970
- );
3971
- --system-tag-size-l-label-spacing-block: var(
3972
- --spectrum-component-top-to-text-200
3973
- );
3974
- --system-tag-size-l-corner-radius: var(
3975
- --system-tag-size-large-corner-radius
3976
- );
3977
- --system-tag-size-l-spacing-inline-start: var(
3978
- --system-tag-size-large-spacing-inline-start
3979
- );
3980
- --system-tag-size-l-label-spacing-inline-end: var(
3981
- --system-tag-size-large-label-spacing-inline-end
3982
- );
3983
- --system-tag-size-l-clear-button-spacing-inline-end: var(
3984
- --system-tag-size-large-clear-button-spacing-inline-end
2347
+ --system-textfield-background-color: var(--spectrum-gray-50);
2348
+ --system-textfield-background-color-disabled: var(
2349
+ --spectrum-disabled-background-color
3985
2350
  );
3986
- --system-tag-group-item-margin-block: var(--spectrum-spacing-75);
3987
- --system-tag-group-item-margin-inline: var(--spectrum-spacing-75);
3988
2351
  --system-textfield-border-color: var(--spectrum-gray-400);
3989
2352
  --system-textfield-border-color-hover: var(--spectrum-gray-500);
3990
2353
  --system-textfield-border-color-focus: var(--spectrum-gray-800);
3991
2354
  --system-textfield-border-color-focus-hover: var(--spectrum-gray-900);
3992
2355
  --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
2356
+ --system-textfield-border-color-disabled: var(--spectrum-gray-200);
3993
2357
  --system-textfield-border-width: var(--spectrum-border-width-200);
3994
- --system-textfield-background-color: var(--spectrum-gray-50);
2358
+ --system-textfield-icon-spacing-block-invalid: var(
2359
+ --spectrum-field-top-to-alert-icon-medium
2360
+ );
2361
+ --system-textfield-size-s-icon-spacing-block-invalid: var(
2362
+ --spectrum-field-top-to-alert-icon-small
2363
+ );
2364
+ --system-textfield-size-l-icon-spacing-block-invalid: var(
2365
+ --spectrum-field-top-to-alert-icon-large
2366
+ );
2367
+ --system-textfield-size-xl-icon-spacing-block-invalid: var(
2368
+ --spectrum-field-top-to-alert-icon-extra-large
2369
+ );
2370
+ --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300);
3995
2371
  --system-thumbnail-border-radius: var(--spectrum-corner-radius-75);
3996
2372
  --system-toast-background-color-default: var(
3997
2373
  --spectrum-neutral-background-color-default
@@ -4084,40 +2460,6 @@
4084
2460
  --system-tooltip-background-color-default: var(
4085
2461
  --system-tooltip-backgound-color-default-neutral
4086
2462
  );
4087
- --system-tray-exit-animation-delay: 0s;
4088
- --system-tray-entry-animation-delay: 0.16s;
4089
- --system-tray-max-inline-size: 375px;
4090
- --system-tray-spacing-edge-to-safe-zone: 64px;
4091
- --system-tray-entry-animation-duration: var(
4092
- --spectrum-animation-duration-500
4093
- );
4094
- --system-tray-exit-animation-duration: var(
4095
- --spectrum-animation-duration-100
4096
- );
4097
- --system-tray-corner-radius: var(--spectrum-corner-radius-100);
4098
- --system-tray-background-color: var(--spectrum-background-layer-2-color);
4099
- --system-underlay-background-entry-animation-delay: var(
4100
- --spectrum-animation-duration-0
4101
- );
4102
- --system-underlay-background-exit-animation-ease: var(
4103
- --spectrum-animation-ease-in
4104
- );
4105
- --system-underlay-background-entry-animation-ease: var(
4106
- --spectrum-animation-ease-out
4107
- );
4108
- --system-underlay-background-entry-animation-duration: var(
4109
- --spectrum-animation-duration-600
4110
- );
4111
- --system-underlay-background-exit-animation-duration: var(
4112
- --spectrum-animation-duration-300
4113
- );
4114
- --system-underlay-background-exit-animation-delay: var(
4115
- --spectrum-animation-duration-200
4116
- );
4117
- --system-underlay-background-color: rgba(
4118
- var(--spectrum-black-rgb),
4119
- var(--spectrum-overlay-opacity)
4120
- );
4121
2463
  --system-heading-sans-serif-font-family: var(
4122
2464
  --spectrum-sans-font-family-stack
4123
2465
  );