@spectrum-web-components/styles 0.20.1 → 0.22.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.
@@ -10,296 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
10
10
  governing permissions and limitations under the License.
11
11
  */
12
12
 
13
+ @import './spectrum-theme-lightest.css';
14
+
13
15
  :host,
14
16
  :root {
15
- --spectrum-global-color-status: Verified;
16
- --spectrum-global-color-version: 5.1.0;
17
- --spectrum-global-color-opacity-100: 1;
18
- --spectrum-global-color-opacity-90: 0.9;
19
- --spectrum-global-color-opacity-80: 0.8;
20
- --spectrum-global-color-opacity-70: 0.7;
21
- --spectrum-global-color-opacity-60: 0.6;
22
- --spectrum-global-color-opacity-55: 0.55;
23
- --spectrum-global-color-opacity-50: 0.5;
24
- --spectrum-global-color-opacity-42: 0.42;
25
- --spectrum-global-color-opacity-40: 0.4;
26
- --spectrum-global-color-opacity-30: 0.3;
27
- --spectrum-global-color-opacity-25: 0.25;
28
- --spectrum-global-color-opacity-20: 0.2;
29
- --spectrum-global-color-opacity-15: 0.15;
30
- --spectrum-global-color-opacity-10: 0.1;
31
- --spectrum-global-color-opacity-8: 0.08;
32
- --spectrum-global-color-opacity-7: 0.07;
33
- --spectrum-global-color-opacity-6: 0.06;
34
- --spectrum-global-color-opacity-5: 0.05;
35
- --spectrum-global-color-opacity-4: 0.04;
36
- --spectrum-global-color-opacity-0: 0;
37
- --spectrum-global-color-celery-400-rgb: 48, 193, 61;
38
- --spectrum-global-color-celery-400: rgb(
39
- var(--spectrum-global-color-celery-400-rgb)
40
- );
41
- --spectrum-global-color-celery-500-rgb: 15, 172, 38;
42
- --spectrum-global-color-celery-500: rgb(
43
- var(--spectrum-global-color-celery-500-rgb)
44
- );
45
- --spectrum-global-color-celery-600-rgb: 0, 150, 20;
46
- --spectrum-global-color-celery-600: rgb(
47
- var(--spectrum-global-color-celery-600-rgb)
48
- );
49
- --spectrum-global-color-celery-700-rgb: 0, 128, 15;
50
- --spectrum-global-color-celery-700: rgb(
51
- var(--spectrum-global-color-celery-700-rgb)
52
- );
53
- --spectrum-global-color-chartreuse-400-rgb: 157, 203, 13;
54
- --spectrum-global-color-chartreuse-400: rgb(
55
- var(--spectrum-global-color-chartreuse-400-rgb)
56
- );
57
- --spectrum-global-color-chartreuse-500-rgb: 139, 182, 4;
58
- --spectrum-global-color-chartreuse-500: rgb(
59
- var(--spectrum-global-color-chartreuse-500-rgb)
60
- );
61
- --spectrum-global-color-chartreuse-600-rgb: 122, 162, 0;
62
- --spectrum-global-color-chartreuse-600: rgb(
63
- var(--spectrum-global-color-chartreuse-600-rgb)
64
- );
65
- --spectrum-global-color-chartreuse-700-rgb: 106, 141, 0;
66
- --spectrum-global-color-chartreuse-700: rgb(
67
- var(--spectrum-global-color-chartreuse-700-rgb)
68
- );
69
- --spectrum-global-color-yellow-400-rgb: 238, 205, 0;
70
- --spectrum-global-color-yellow-400: rgb(
71
- var(--spectrum-global-color-yellow-400-rgb)
72
- );
73
- --spectrum-global-color-yellow-500-rgb: 221, 185, 0;
74
- --spectrum-global-color-yellow-500: rgb(
75
- var(--spectrum-global-color-yellow-500-rgb)
76
- );
77
- --spectrum-global-color-yellow-600-rgb: 201, 164, 0;
78
- --spectrum-global-color-yellow-600: rgb(
79
- var(--spectrum-global-color-yellow-600-rgb)
80
- );
81
- --spectrum-global-color-yellow-700-rgb: 181, 144, 0;
82
- --spectrum-global-color-yellow-700: rgb(
83
- var(--spectrum-global-color-yellow-700-rgb)
84
- );
85
- --spectrum-global-color-magenta-400-rgb: 226, 68, 135;
86
- --spectrum-global-color-magenta-400: rgb(
87
- var(--spectrum-global-color-magenta-400-rgb)
88
- );
89
- --spectrum-global-color-magenta-500-rgb: 205, 40, 111;
90
- --spectrum-global-color-magenta-500: rgb(
91
- var(--spectrum-global-color-magenta-500-rgb)
92
- );
93
- --spectrum-global-color-magenta-600-rgb: 179, 15, 89;
94
- --spectrum-global-color-magenta-600: rgb(
95
- var(--spectrum-global-color-magenta-600-rgb)
96
- );
97
- --spectrum-global-color-magenta-700-rgb: 149, 0, 72;
98
- --spectrum-global-color-magenta-700: rgb(
99
- var(--spectrum-global-color-magenta-700-rgb)
100
- );
101
- --spectrum-global-color-fuchsia-400-rgb: 211, 63, 212;
102
- --spectrum-global-color-fuchsia-400: rgb(
103
- var(--spectrum-global-color-fuchsia-400-rgb)
104
- );
105
- --spectrum-global-color-fuchsia-500-rgb: 188, 39, 187;
106
- --spectrum-global-color-fuchsia-500: rgb(
107
- var(--spectrum-global-color-fuchsia-500-rgb)
108
- );
109
- --spectrum-global-color-fuchsia-600-rgb: 163, 10, 163;
110
- --spectrum-global-color-fuchsia-600: rgb(
111
- var(--spectrum-global-color-fuchsia-600-rgb)
112
- );
113
- --spectrum-global-color-fuchsia-700-rgb: 135, 0, 136;
114
- --spectrum-global-color-fuchsia-700: rgb(
115
- var(--spectrum-global-color-fuchsia-700-rgb)
116
- );
117
- --spectrum-global-color-purple-400-rgb: 161, 93, 246;
118
- --spectrum-global-color-purple-400: rgb(
119
- var(--spectrum-global-color-purple-400-rgb)
120
- );
121
- --spectrum-global-color-purple-500-rgb: 142, 67, 234;
122
- --spectrum-global-color-purple-500: rgb(
123
- var(--spectrum-global-color-purple-500-rgb)
124
- );
125
- --spectrum-global-color-purple-600-rgb: 120, 43, 216;
126
- --spectrum-global-color-purple-600: rgb(
127
- var(--spectrum-global-color-purple-600-rgb)
128
- );
129
- --spectrum-global-color-purple-700-rgb: 98, 23, 190;
130
- --spectrum-global-color-purple-700: rgb(
131
- var(--spectrum-global-color-purple-700-rgb)
132
- );
133
- --spectrum-global-color-indigo-400-rgb: 109, 115, 246;
134
- --spectrum-global-color-indigo-400: rgb(
135
- var(--spectrum-global-color-indigo-400-rgb)
136
- );
137
- --spectrum-global-color-indigo-500-rgb: 87, 93, 232;
138
- --spectrum-global-color-indigo-500: rgb(
139
- var(--spectrum-global-color-indigo-500-rgb)
140
- );
141
- --spectrum-global-color-indigo-600-rgb: 68, 74, 208;
142
- --spectrum-global-color-indigo-600: rgb(
143
- var(--spectrum-global-color-indigo-600-rgb)
144
- );
145
- --spectrum-global-color-indigo-700-rgb: 53, 58, 176;
146
- --spectrum-global-color-indigo-700: rgb(
147
- var(--spectrum-global-color-indigo-700-rgb)
148
- );
149
- --spectrum-global-color-seafoam-400-rgb: 0, 166, 160;
150
- --spectrum-global-color-seafoam-400: rgb(
151
- var(--spectrum-global-color-seafoam-400-rgb)
152
- );
153
- --spectrum-global-color-seafoam-500-rgb: 0, 145, 139;
154
- --spectrum-global-color-seafoam-500: rgb(
155
- var(--spectrum-global-color-seafoam-500-rgb)
156
- );
157
- --spectrum-global-color-seafoam-600-rgb: 0, 124, 118;
158
- --spectrum-global-color-seafoam-600: rgb(
159
- var(--spectrum-global-color-seafoam-600-rgb)
160
- );
161
- --spectrum-global-color-seafoam-700-rgb: 0, 103, 99;
162
- --spectrum-global-color-seafoam-700: rgb(
163
- var(--spectrum-global-color-seafoam-700-rgb)
164
- );
165
- --spectrum-global-color-red-400-rgb: 237, 64, 48;
166
- --spectrum-global-color-red-400: rgb(
167
- var(--spectrum-global-color-red-400-rgb)
168
- );
169
- --spectrum-global-color-red-500-rgb: 217, 28, 21;
170
- --spectrum-global-color-red-500: rgb(
171
- var(--spectrum-global-color-red-500-rgb)
172
- );
173
- --spectrum-global-color-red-600-rgb: 187, 2, 2;
174
- --spectrum-global-color-red-600: rgb(
175
- var(--spectrum-global-color-red-600-rgb)
176
- );
177
- --spectrum-global-color-red-700-rgb: 154, 0, 0;
178
- --spectrum-global-color-red-700: rgb(
179
- var(--spectrum-global-color-red-700-rgb)
180
- );
181
- --spectrum-global-color-orange-400-rgb: 250, 139, 26;
182
- --spectrum-global-color-orange-400: rgb(
183
- var(--spectrum-global-color-orange-400-rgb)
184
- );
185
- --spectrum-global-color-orange-500-rgb: 233, 117, 0;
186
- --spectrum-global-color-orange-500: rgb(
187
- var(--spectrum-global-color-orange-500-rgb)
188
- );
189
- --spectrum-global-color-orange-600-rgb: 209, 97, 0;
190
- --spectrum-global-color-orange-600: rgb(
191
- var(--spectrum-global-color-orange-600-rgb)
192
- );
193
- --spectrum-global-color-orange-700-rgb: 182, 80, 0;
194
- --spectrum-global-color-orange-700: rgb(
195
- var(--spectrum-global-color-orange-700-rgb)
196
- );
197
- --spectrum-global-color-green-400-rgb: 0, 148, 97;
198
- --spectrum-global-color-green-400: rgb(
199
- var(--spectrum-global-color-green-400-rgb)
200
- );
201
- --spectrum-global-color-green-500-rgb: 0, 126, 80;
202
- --spectrum-global-color-green-500: rgb(
203
- var(--spectrum-global-color-green-500-rgb)
204
- );
205
- --spectrum-global-color-green-600-rgb: 0, 105, 65;
206
- --spectrum-global-color-green-600: rgb(
207
- var(--spectrum-global-color-green-600-rgb)
208
- );
209
- --spectrum-global-color-green-700-rgb: 0, 86, 53;
210
- --spectrum-global-color-green-700: rgb(
211
- var(--spectrum-global-color-green-700-rgb)
212
- );
213
- --spectrum-global-color-blue-400-rgb: 27, 127, 245;
214
- --spectrum-global-color-blue-400: rgb(
215
- var(--spectrum-global-color-blue-400-rgb)
216
- );
217
- --spectrum-global-color-blue-500-rgb: 4, 105, 227;
218
- --spectrum-global-color-blue-500: rgb(
219
- var(--spectrum-global-color-blue-500-rgb)
220
- );
221
- --spectrum-global-color-blue-600-rgb: 0, 87, 190;
222
- --spectrum-global-color-blue-600: rgb(
223
- var(--spectrum-global-color-blue-600-rgb)
224
- );
225
- --spectrum-global-color-blue-700-rgb: 0, 72, 153;
226
- --spectrum-global-color-blue-700: rgb(
227
- var(--spectrum-global-color-blue-700-rgb)
228
- );
229
- --spectrum-global-color-gray-50-rgb: 255, 255, 255;
230
- --spectrum-global-color-gray-50: rgb(
231
- var(--spectrum-global-color-gray-50-rgb)
232
- );
233
- --spectrum-global-color-gray-75-rgb: 255, 255, 255;
234
- --spectrum-global-color-gray-75: rgb(
235
- var(--spectrum-global-color-gray-75-rgb)
236
- );
237
- --spectrum-global-color-gray-100-rgb: 255, 255, 255;
238
- --spectrum-global-color-gray-100: rgb(
239
- var(--spectrum-global-color-gray-100-rgb)
240
- );
241
- --spectrum-global-color-gray-200-rgb: 235, 235, 235;
242
- --spectrum-global-color-gray-200: rgb(
243
- var(--spectrum-global-color-gray-200-rgb)
244
- );
245
- --spectrum-global-color-gray-300-rgb: 217, 217, 217;
246
- --spectrum-global-color-gray-300: rgb(
247
- var(--spectrum-global-color-gray-300-rgb)
248
- );
249
- --spectrum-global-color-gray-400-rgb: 179, 179, 179;
250
- --spectrum-global-color-gray-400: rgb(
251
- var(--spectrum-global-color-gray-400-rgb)
252
- );
253
- --spectrum-global-color-gray-500-rgb: 146, 146, 146;
254
- --spectrum-global-color-gray-500: rgb(
255
- var(--spectrum-global-color-gray-500-rgb)
256
- );
257
- --spectrum-global-color-gray-600-rgb: 110, 110, 110;
258
- --spectrum-global-color-gray-600: rgb(
259
- var(--spectrum-global-color-gray-600-rgb)
260
- );
261
- --spectrum-global-color-gray-700-rgb: 71, 71, 71;
262
- --spectrum-global-color-gray-700: rgb(
263
- var(--spectrum-global-color-gray-700-rgb)
264
- );
265
- --spectrum-global-color-gray-800-rgb: 34, 34, 34;
266
- --spectrum-global-color-gray-800: rgb(
267
- var(--spectrum-global-color-gray-800-rgb)
268
- );
269
- --spectrum-global-color-gray-900-rgb: 0, 0, 0;
270
- --spectrum-global-color-gray-900: rgb(
271
- var(--spectrum-global-color-gray-900-rgb)
272
- );
273
- --spectrum-alias-background-color-primary: var(
274
- --spectrum-global-color-gray-50
275
- );
276
- --spectrum-alias-background-color-secondary: var(
277
- --spectrum-global-color-gray-100
278
- );
279
- --spectrum-alias-background-color-tertiary: var(
280
- --spectrum-global-color-gray-300
281
- );
282
- --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.4);
283
- --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.15);
284
- --spectrum-alias-background-color-hover-overlay: rgba(0, 0, 0, 0.04);
285
- --spectrum-alias-highlight-hover: rgba(0, 0, 0, 0.06);
286
- --spectrum-alias-highlight-down: rgba(0, 0, 0, 0.1);
287
- --spectrum-alias-highlight-selected: rgba(4, 105, 227, 0.1);
288
- --spectrum-alias-highlight-selected-hover: rgba(4, 105, 227, 0.2);
289
- --spectrum-alias-text-highlight-color: rgba(4, 105, 227, 0.2);
290
- --spectrum-alias-background-color-quickactions: hsla(0, 0%, 100%, 0.9);
291
- --spectrum-alias-border-color-selected: var(
292
- --spectrum-global-color-blue-500
293
- );
294
- --spectrum-alias-border-color-translucent: rgba(0, 0, 0, 0.1);
295
- --spectrum-alias-radial-reaction-color-default: rgba(34, 34, 34, 0.6);
296
- --spectrum-alias-pasteboard-background-color: var(
297
- --spectrum-global-color-gray-300
298
- );
299
- --spectrum-alias-appframe-border-color: var(
300
- --spectrum-global-color-gray-300
301
- );
302
- --spectrum-alias-appframe-separator-color: var(
303
- --spectrum-global-color-gray-300
304
- );
17
+ color-scheme: light;
305
18
  }
@@ -390,3 +390,91 @@ governing permissions and limitations under the License.
390
390
  -1px * var(--spectrum-spacing-50)
391
391
  );
392
392
  }
393
+
394
+ :host,
395
+ :root {
396
+ --system-spectrum-tag-border-color: var(--spectrum-gray-300);
397
+ --system-spectrum-tag-border-color-hover: var(--spectrum-gray-400);
398
+ --system-spectrum-tag-border-color-active: var(--spectrum-gray-500);
399
+ --system-spectrum-tag-border-color-focus: var(--spectrum-gray-400);
400
+ --system-spectrum-tag-size-small-corner-radius: var(
401
+ --spectrum-component-height-75
402
+ );
403
+ --system-spectrum-tag-size-medium-corner-radius: var(
404
+ --spectrum-component-height-100
405
+ );
406
+ --system-spectrum-tag-size-large-corner-radius: var(
407
+ --spectrum-component-height-200
408
+ );
409
+ --system-spectrum-tag-background-color: transparent;
410
+ --system-spectrum-tag-background-color-hover: var(--spectrum-gray-300);
411
+ --system-spectrum-tag-background-color-active: var(--spectrum-gray-400);
412
+ --system-spectrum-tag-background-color-focus: var(--spectrum-gray-300);
413
+ --system-spectrum-tag-content-color: var(
414
+ --spectrum-neutral-content-color-default
415
+ );
416
+ --system-spectrum-tag-content-color-hover: var(
417
+ --spectrum-neutral-content-color-hover
418
+ );
419
+ --system-spectrum-tag-content-color-active: var(
420
+ --spectrum-neutral-content-color-down
421
+ );
422
+ --system-spectrum-tag-content-color-focus: var(
423
+ --spectrum-neutral-content-color-key-focus
424
+ );
425
+ --system-spectrum-tag-border-color-selected: var(
426
+ --spectrum-neutral-background-color-default
427
+ );
428
+ --system-spectrum-tag-border-color-selected-hover: var(
429
+ --spectrum-neutral-background-color-hover
430
+ );
431
+ --system-spectrum-tag-border-color-selected-active: var(
432
+ --spectrum-neutral-background-color-down
433
+ );
434
+ --system-spectrum-tag-border-color-selected-focus: var(
435
+ --spectrum-neutral-background-color-key-focus
436
+ );
437
+ --system-spectrum-tag-background-color-selected: var(
438
+ --spectrum-neutral-background-color-default
439
+ );
440
+ --system-spectrum-tag-background-color-selected-hover: var(
441
+ --spectrum-neutral-background-color-hover
442
+ );
443
+ --system-spectrum-tag-background-color-selected-active: var(
444
+ --spectrum-neutral-background-color-down
445
+ );
446
+ --system-spectrum-tag-background-color-selected-focus: var(
447
+ --spectrum-neutral-background-color-key-focus
448
+ );
449
+ --system-spectrum-tag-border-color-disabled: var(
450
+ --spectrum-disabled-border-color
451
+ );
452
+ --system-spectrum-tag-background-color-disabled: transparent;
453
+ --system-spectrum-tag-size-small-spacing-inline-start: var(
454
+ --spectrum-component-pill-edge-to-visual-75
455
+ );
456
+ --system-spectrum-tag-size-small-label-spacing-inline-end: var(
457
+ --spectrum-component-pill-edge-to-text-75
458
+ );
459
+ --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var(
460
+ --spectrum-component-pill-edge-to-visual-75
461
+ );
462
+ --system-spectrum-tag-size-medium-spacing-inline-start: var(
463
+ --spectrum-component-pill-edge-to-visual-100
464
+ );
465
+ --system-spectrum-tag-size-medium-label-spacing-inline-end: var(
466
+ --spectrum-component-pill-edge-to-text-100
467
+ );
468
+ --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var(
469
+ --spectrum-component-pill-edge-to-visual-100
470
+ );
471
+ --system-spectrum-tag-size-large-spacing-inline-start: var(
472
+ --spectrum-component-pill-edge-to-visual-200
473
+ );
474
+ --system-spectrum-tag-size-large-label-spacing-inline-end: var(
475
+ --spectrum-component-pill-edge-to-text-200
476
+ );
477
+ --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var(
478
+ --spectrum-component-pill-edge-to-visual-200
479
+ );
480
+ }
@@ -400,3 +400,91 @@ governing permissions and limitations under the License.
400
400
  --system-spectrum-actiongroup-horizontal-spacing-compact: -1px;
401
401
  --system-spectrum-actiongroup-vertical-spacing-compact: -1px;
402
402
  }
403
+
404
+ :host,
405
+ :root {
406
+ --system-spectrum-tag-border-color: var(--spectrum-gray-700);
407
+ --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800);
408
+ --system-spectrum-tag-border-color-active: var(--spectrum-gray-900);
409
+ --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800);
410
+ --system-spectrum-tag-size-small-corner-radius: var(
411
+ --spectrum-corner-radius-100
412
+ );
413
+ --system-spectrum-tag-size-medium-corner-radius: var(
414
+ --spectrum-corner-radius-100
415
+ );
416
+ --system-spectrum-tag-size-large-corner-radius: var(
417
+ --spectrum-corner-radius-100
418
+ );
419
+ --system-spectrum-tag-background-color: var(--spectrum-gray-75);
420
+ --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75);
421
+ --system-spectrum-tag-background-color-active: var(--spectrum-gray-200);
422
+ --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75);
423
+ --system-spectrum-tag-content-color: var(
424
+ --spectrum-neutral-subdued-content-color-default
425
+ );
426
+ --system-spectrum-tag-content-color-hover: var(
427
+ --spectrum-neutral-subdued-content-color-hover
428
+ );
429
+ --system-spectrum-tag-content-color-active: var(
430
+ --spectrum-neutral-subdued-content-color-down
431
+ );
432
+ --system-spectrum-tag-content-color-focus: var(
433
+ --spectrum-neutral-subdued-content-color-key-focus
434
+ );
435
+ --system-spectrum-tag-border-color-selected: var(
436
+ --spectrum-neutral-subdued-background-color-default
437
+ );
438
+ --system-spectrum-tag-border-color-selected-hover: var(
439
+ --spectrum-neutral-subdued-background-color-hover
440
+ );
441
+ --system-spectrum-tag-border-color-selected-active: var(
442
+ --spectrum-neutral-subdued-background-color-down
443
+ );
444
+ --system-spectrum-tag-border-color-selected-focus: var(
445
+ --spectrum-neutral-subdued-background-color-key-focus
446
+ );
447
+ --system-spectrum-tag-background-color-selected: var(
448
+ --spectrum-neutral-subdued-background-color-default
449
+ );
450
+ --system-spectrum-tag-background-color-selected-hover: var(
451
+ --spectrum-neutral-subdued-background-color-hover
452
+ );
453
+ --system-spectrum-tag-background-color-selected-active: var(
454
+ --spectrum-neutral-subdued-background-color-down
455
+ );
456
+ --system-spectrum-tag-background-color-selected-focus: var(
457
+ --spectrum-neutral-subdued-background-color-key-focus
458
+ );
459
+ --system-spectrum-tag-border-color-disabled: transparent;
460
+ --system-spectrum-tag-background-color-disabled: var(
461
+ --spectrum-disabled-background-color
462
+ );
463
+ --system-spectrum-tag-size-small-spacing-inline-start: var(
464
+ --spectrum-component-edge-to-visual-75
465
+ );
466
+ --system-spectrum-tag-size-small-label-spacing-inline-end: var(
467
+ --spectrum-component-edge-to-text-75
468
+ );
469
+ --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var(
470
+ --spectrum-component-edge-to-visual-75
471
+ );
472
+ --system-spectrum-tag-size-medium-spacing-inline-start: var(
473
+ --spectrum-component-edge-to-visual-100
474
+ );
475
+ --system-spectrum-tag-size-medium-label-spacing-inline-end: var(
476
+ --spectrum-component-edge-to-text-100
477
+ );
478
+ --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var(
479
+ --spectrum-component-edge-to-visual-100
480
+ );
481
+ --system-spectrum-tag-size-large-spacing-inline-start: var(
482
+ --spectrum-component-edge-to-visual-200
483
+ );
484
+ --system-spectrum-tag-size-large-label-spacing-inline-end: var(
485
+ --spectrum-component-edge-to-text-200
486
+ );
487
+ --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var(
488
+ --spectrum-component-edge-to-visual-200
489
+ );
490
+ }