@spectrum-web-components/theme 1.9.1 → 1.11.0-preview-b6b1becb.20251121200357
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -249
- package/package.json +5 -4
- package/src/express/scale-large-core-tokens.css.dev.js.map +2 -2
- package/src/express/scale-large-core-tokens.css.js.map +2 -2
- package/src/express/scale-large.css.dev.js.map +2 -2
- package/src/express/scale-large.css.js.map +2 -2
- package/src/express/scale-medium-core-tokens.css.dev.js.map +2 -2
- package/src/express/scale-medium-core-tokens.css.js.map +2 -2
- package/src/express/scale-medium.css.dev.js.map +2 -2
- package/src/express/scale-medium.css.js.map +2 -2
- package/src/express/theme-core-tokens.css.dev.js.map +2 -2
- package/src/express/theme-core-tokens.css.js.map +2 -2
- package/src/express/theme-dark-core-tokens.css.dev.js.map +2 -2
- package/src/express/theme-dark-core-tokens.css.js.map +2 -2
- package/src/express/theme-dark.css.dev.js.map +2 -2
- package/src/express/theme-dark.css.js.map +2 -2
- package/src/express/theme-light-core-tokens.css.dev.js.map +2 -2
- package/src/express/theme-light-core-tokens.css.js.map +2 -2
- package/src/express/theme-light.css.dev.js.map +2 -2
- package/src/express/theme-light.css.js.map +2 -2
- package/src/express/theme.css.dev.js.map +2 -2
- package/src/express/theme.css.js.map +2 -2
- package/src/scale-large-core-tokens.css.dev.js.map +2 -2
- package/src/scale-large-core-tokens.css.js.map +2 -2
- package/src/scale-large.css.dev.js.map +2 -2
- package/src/scale-large.css.js.map +2 -2
- package/src/scale-medium-core-tokens.css.dev.js.map +2 -2
- package/src/scale-medium-core-tokens.css.js.map +2 -2
- package/src/scale-medium.css.dev.js.map +2 -2
- package/src/scale-medium.css.js.map +2 -2
- package/src/spectrum-two/scale-large-core-tokens.css.dev.js.map +2 -2
- package/src/spectrum-two/scale-large-core-tokens.css.js.map +2 -2
- package/src/spectrum-two/scale-large.css.dev.js.map +2 -2
- package/src/spectrum-two/scale-large.css.js.map +2 -2
- package/src/spectrum-two/scale-medium-core-tokens.css.dev.js.map +2 -2
- package/src/spectrum-two/scale-medium-core-tokens.css.js.map +2 -2
- package/src/spectrum-two/scale-medium.css.dev.js.map +2 -2
- package/src/spectrum-two/scale-medium.css.js.map +2 -2
- package/src/spectrum-two/theme-core-tokens.css.dev.js.map +2 -2
- package/src/spectrum-two/theme-core-tokens.css.js.map +2 -2
- package/src/spectrum-two/theme-dark-core-tokens.css.dev.js.map +2 -2
- package/src/spectrum-two/theme-dark-core-tokens.css.js.map +2 -2
- package/src/spectrum-two/theme-dark.css.dev.js.map +2 -2
- package/src/spectrum-two/theme-dark.css.js.map +2 -2
- package/src/spectrum-two/theme-light-core-tokens.css.dev.js.map +2 -2
- package/src/spectrum-two/theme-light-core-tokens.css.js.map +2 -2
- package/src/spectrum-two/theme-light.css.dev.js.map +2 -2
- package/src/spectrum-two/theme-light.css.js.map +2 -2
- package/src/spectrum-two/theme.css.dev.js.map +2 -2
- package/src/spectrum-two/theme.css.js.map +2 -2
- package/src/theme-core-tokens.css.dev.js.map +2 -2
- package/src/theme-core-tokens.css.js.map +2 -2
- package/src/theme-dark-core-tokens.css.dev.js.map +2 -2
- package/src/theme-dark-core-tokens.css.js.map +2 -2
- package/src/theme-dark.css.dev.js.map +2 -2
- package/src/theme-dark.css.js.map +2 -2
- package/src/theme-darkest-core-tokens.css.dev.js.map +2 -2
- package/src/theme-darkest-core-tokens.css.js.map +2 -2
- package/src/theme-darkest.css.dev.js.map +2 -2
- package/src/theme-darkest.css.js.map +2 -2
- package/src/theme-light-core-tokens.css.dev.js.map +2 -2
- package/src/theme-light-core-tokens.css.js.map +2 -2
- package/src/theme-light.css.dev.js.map +2 -2
- package/src/theme-light.css.js.map +2 -2
- package/src/theme-lightest-core-tokens.css.dev.js.map +2 -2
- package/src/theme-lightest-core-tokens.css.js.map +2 -2
- package/src/theme-lightest.css.dev.js.map +2 -2
- package/src/theme-lightest.css.js.map +2 -2
- package/src/theme.css.dev.js.map +2 -2
- package/src/theme.css.js.map +2 -2
- package/src/typography.css.dev.js.map +2 -2
- package/src/typography.css.js.map +2 -2
- package/custom-elements.json +0 -469
package/README.md
CHANGED
|
@@ -1,63 +1,16 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`<sp-theme>` provides Spectrum design tokens (CSS custom properties) to everything in its DOM scope. Components inside a theme use these tokens to render correctly. The element itself does not visually “apply” styles to your app; it exposes the tokens so your components (and any of your CSS) can consume them.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[](https://www.npmjs.com/package/@spectrum-web-components/theme)
|
|
8
|
-
[](https://bundlephobia.com/result?p=@spectrum-web-components/theme)
|
|
9
|
-
|
|
10
|
-
```
|
|
11
|
-
yarn add @spectrum-web-components/theme
|
|
12
|
-
```
|
|
5
|
+
Spectrum offers multiple variants:
|
|
13
6
|
|
|
14
|
-
|
|
7
|
+
- **System**: `spectrum`, `express`, `spectrum-two`
|
|
8
|
+
- **Color**: `light`, `dark` (legacy: `lightest`, `darkest` – deprecated)
|
|
9
|
+
- **Scale**: `medium`, `large`
|
|
15
10
|
|
|
16
|
-
|
|
17
|
-
import '@spectrum-web-components/theme/sp-theme.js';
|
|
18
|
-
import '@spectrum-web-components/theme/src/themes.js';
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
The above import statements do two things: the first will get you started using the `<sp-theme>` wrapper element, and the second includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`) for the Spectrum Classic theme. Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empowers you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See the "Advanced usage" section below for instructions on tuning the performance of an application that leverages this package.
|
|
22
|
-
|
|
23
|
-
Below are more ways to import the different scale and color options individually, in case you didn't want to import all of them as we did above. You'll use these statements in combination with the side effectful registration import statement `import '@spectrum-web-components/theme/sp-theme.js'`.
|
|
24
|
-
|
|
25
|
-
The various Classic themes can be imported en masse, as in the example above:
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
import '@spectrum-web-components/theme/src/themes.js';
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
The various Spectrum Express themes can also be imported en masse:
|
|
32
|
-
|
|
33
|
-
```
|
|
34
|
-
import '@spectrum-web-components/theme/src/express/themes.js';
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Or you can import the themes and scales individually:
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
import '@spectrum-web-components/theme/theme-darkest.js';
|
|
41
|
-
import '@spectrum-web-components/theme/theme-dark.js';
|
|
42
|
-
import '@spectrum-web-components/theme/theme-light.js';
|
|
43
|
-
import '@spectrum-web-components/theme/theme-lightest.js';
|
|
44
|
-
import '@spectrum-web-components/theme/scale-medium.js';
|
|
45
|
-
import '@spectrum-web-components/theme/scale-large.js';
|
|
46
|
-
import '@spectrum-web-components/theme/express/theme-darkest.js';
|
|
47
|
-
import '@spectrum-web-components/theme/express/theme-dark.js';
|
|
48
|
-
import '@spectrum-web-components/theme/express/theme-light.js';
|
|
49
|
-
import '@spectrum-web-components/theme/express/theme-lightest.js';
|
|
50
|
-
import '@spectrum-web-components/theme/express/scale-medium.js';
|
|
51
|
-
import '@spectrum-web-components/theme/express/scale-large.js';
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
When looking to leverage the `Theme` base class as a type and/or for extension purposes, do so via:
|
|
55
|
-
|
|
56
|
-
```
|
|
57
|
-
import { Theme } from '@spectrum-web-components/theme';
|
|
58
|
-
```
|
|
11
|
+
By default, `<sp-theme>` uses the `spectrum` system, `light` color, and `medium` scale.
|
|
59
12
|
|
|
60
|
-
|
|
13
|
+
### How sp-theme works
|
|
61
14
|
|
|
62
15
|
Visually, all Spectrum Web Components are an expression of the design tokens specified by Spectrum, Adobe's design system. On the web, these tokens are made available as CSS Custom Properties. Using `sp-theme` as a parent element for your components ensures that those CSS Custom Properties can be leveraged by the elements within your application. This ensures consistent delivery of not only the color and scale you've specified in your particular instance, but for _all_ the other color, scale, and content direction specifications across Spectrum.
|
|
63
16
|
|
|
@@ -96,176 +49,95 @@ To make the above concepts a little more concrete, take a look at the table belo
|
|
|
96
49
|
observer.observe(varsViewer);
|
|
97
50
|
</script>
|
|
98
51
|
|
|
99
|
-
When you're ready to look into more advanced usage of the components and themes in your application, there are vanilla CSS implementations of these tokens available in the `@spectrum-web-components/styles` package.
|
|
52
|
+
When you're ready to look into more advanced usage of the components and themes in your application, there are vanilla CSS implementations of these tokens available in the [`@spectrum-web-components/styles`](https://opensource.adobe.com/spectrum-web-components/tools/styles/) package.
|
|
100
53
|
|
|
101
|
-
|
|
54
|
+
### Usage
|
|
102
55
|
|
|
103
|
-
|
|
56
|
+
[](https://www.npmjs.com/package/@spectrum-web-components/theme)
|
|
57
|
+
[](https://bundlephobia.com/result?p=@spectrum-web-components/theme)
|
|
104
58
|
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
system="spectrum"
|
|
108
|
-
color="light"
|
|
109
|
-
scale="medium"
|
|
110
|
-
style="background-color: var(--spectrum-gray-100)"
|
|
111
|
-
>
|
|
112
|
-
<sp-button onclick="spAlert(this, 'Themed <sp-button> clicked!')">
|
|
113
|
-
Click me!
|
|
114
|
-
</sp-button>
|
|
115
|
-
</sp-theme>
|
|
59
|
+
```bash
|
|
60
|
+
yarn add @spectrum-web-components/theme
|
|
116
61
|
```
|
|
117
62
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
Once you've moved beyond the prototype phase of an application, it is likely that you will only use one combination of `color` and `scale` in your application, and even if not, you'll likely benefit from lazily loading the variants you don't leverage by default. For single combination applications, or to power a _default_ theme, the following imports can be used to ensure only the code your application requires is loaded:
|
|
121
|
-
|
|
122
|
-
### Classic
|
|
63
|
+
Register the element and load the theme fragments you intend to use:
|
|
123
64
|
|
|
124
65
|
```js
|
|
125
|
-
|
|
126
|
-
* Power a site using
|
|
127
|
-
*
|
|
128
|
-
* <sp-theme
|
|
129
|
-
* system="spectrum"
|
|
130
|
-
* color="darkest"
|
|
131
|
-
* scale="large"
|
|
132
|
-
* >
|
|
133
|
-
**/
|
|
134
|
-
import '@spectrum-web-components/theme/theme-darkest.js';
|
|
135
|
-
import '@spectrum-web-components/theme/scale-large.js';
|
|
136
|
-
|
|
66
|
+
// Registers the <sp-theme> custom element
|
|
137
67
|
import '@spectrum-web-components/theme/sp-theme.js';
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
### Express
|
|
141
|
-
|
|
142
|
-
```js
|
|
143
|
-
/**
|
|
144
|
-
* Power a site using
|
|
145
|
-
*
|
|
146
|
-
* <sp-theme
|
|
147
|
-
* system="express"
|
|
148
|
-
* color="light"
|
|
149
|
-
* scale="medium"
|
|
150
|
-
* >
|
|
151
|
-
**/
|
|
152
|
-
import '@spectrum-web-components/theme/express/theme-light.js';
|
|
153
|
-
import '@spectrum-web-components/theme/express/scale-medium.js';
|
|
154
68
|
|
|
155
|
-
|
|
69
|
+
// Load the specific variants you will use (recommended)
|
|
70
|
+
import '@spectrum-web-components/theme/theme-light.js';
|
|
71
|
+
import '@spectrum-web-components/theme/scale-medium.js';
|
|
72
|
+
// Optionally choose a different system
|
|
73
|
+
// import '@spectrum-web-components/theme/express/theme-light.js';
|
|
74
|
+
// import '@spectrum-web-components/theme/express/scale-medium.js';
|
|
156
75
|
```
|
|
157
76
|
|
|
158
|
-
|
|
77
|
+
If you’re prototyping and want everything available:
|
|
159
78
|
|
|
160
79
|
```js
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
import(`@spectrum-web-components/theme/theme-${color}.js`),
|
|
166
|
-
import(`@spectrum-web-components/theme/scale-${scale}.js`),
|
|
167
|
-
]).then(() => {
|
|
168
|
-
themeElement.color = color;
|
|
169
|
-
themeElement.scale = scale;
|
|
170
|
-
});
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
updateTheme('light', 'medium');
|
|
80
|
+
import '@spectrum-web-components/theme/sp-theme.js';
|
|
81
|
+
import '@spectrum-web-components/theme/src/themes.js'; // spectrum
|
|
82
|
+
import '@spectrum-web-components/theme/src/express/themes.js'; // express
|
|
83
|
+
import '@spectrum-web-components/theme/src/spectrum-two/themes.js'; // spectrum-two
|
|
174
84
|
```
|
|
175
85
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
## Light theme
|
|
179
|
-
|
|
180
|
-
```html demo
|
|
181
|
-
<style type="text/css">
|
|
182
|
-
#example {
|
|
183
|
-
max-width: 500px;
|
|
184
|
-
padding: 3em;
|
|
185
|
-
background-color: var(--spectrum-gray-100);
|
|
186
|
-
color: var(--spectrum-gray-800);
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
#buttons {
|
|
190
|
-
margin-top: 2em;
|
|
191
|
-
}
|
|
192
|
-
</style>
|
|
193
|
-
<sp-theme system="express" color="light" scale="medium">
|
|
194
|
-
<hzn-app-stuff></hzn-app-stuff>
|
|
195
|
-
</sp-theme>
|
|
196
|
-
|
|
197
|
-
<express-app>
|
|
198
|
-
<hzn-app-stuff></hzn-app-stuff>
|
|
199
|
-
</express-app>
|
|
200
|
-
```
|
|
86
|
+
### Examples
|
|
201
87
|
|
|
202
|
-
|
|
88
|
+
#### Light color, medium scale
|
|
203
89
|
|
|
204
|
-
```html
|
|
90
|
+
```html
|
|
205
91
|
<style type="text/css">
|
|
206
|
-
#
|
|
92
|
+
#outer {
|
|
207
93
|
max-width: 500px;
|
|
208
|
-
padding:
|
|
94
|
+
padding: 1em;
|
|
209
95
|
background-color: var(--spectrum-gray-100);
|
|
210
96
|
color: var(--spectrum-gray-800);
|
|
211
97
|
}
|
|
212
|
-
|
|
213
|
-
#buttons {
|
|
214
|
-
margin-top: 2em;
|
|
215
|
-
}
|
|
216
98
|
</style>
|
|
217
|
-
<sp-theme system="
|
|
218
|
-
<
|
|
99
|
+
<sp-theme system="spectrum" color="light" scale="medium">
|
|
100
|
+
<div id="outer">
|
|
101
|
+
<sp-field-label for="email">Email</sp-field-label>
|
|
102
|
+
<sp-textfield
|
|
103
|
+
id="email"
|
|
104
|
+
type="email"
|
|
105
|
+
placeholder="you@example.com"
|
|
106
|
+
></sp-textfield>
|
|
107
|
+
<sp-help-text>We’ll only use this to send a receipt.</sp-help-text>
|
|
108
|
+
<sp-button-group style="margin-top: var(--spectrum-spacing-400)">
|
|
109
|
+
<sp-button variant="primary">Submit</sp-button>
|
|
110
|
+
<sp-button variant="secondary">Cancel</sp-button>
|
|
111
|
+
</sp-button-group>
|
|
112
|
+
</div>
|
|
219
113
|
</sp-theme>
|
|
220
|
-
|
|
221
|
-
<express-app>
|
|
222
|
-
<hzn-app-stuff></hzn-app-stuff>
|
|
223
|
-
</express-app>
|
|
224
114
|
```
|
|
225
115
|
|
|
226
|
-
|
|
116
|
+
#### Dark color, large scale
|
|
227
117
|
|
|
228
|
-
The large scale of `<sp-theme>` will switch to using Spectrum's larger mobile
|
|
118
|
+
The large scale of `<sp-theme>` will switch to using Spectrum's larger mobile Platform Scale.
|
|
229
119
|
|
|
230
|
-
```html
|
|
120
|
+
```html
|
|
231
121
|
<style type="text/css">
|
|
232
|
-
#
|
|
122
|
+
#outer {
|
|
233
123
|
max-width: 500px;
|
|
234
124
|
padding: 1em;
|
|
235
125
|
background-color: var(--spectrum-gray-100);
|
|
236
126
|
color: var(--spectrum-gray-800);
|
|
237
127
|
}
|
|
238
|
-
|
|
239
|
-
#buttons {
|
|
240
|
-
margin-top: 2em;
|
|
241
|
-
}
|
|
242
128
|
</style>
|
|
243
|
-
<sp-theme color="
|
|
244
|
-
<div id="
|
|
245
|
-
<
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
step="1"
|
|
249
|
-
min="1"
|
|
250
|
-
max="11"
|
|
251
|
-
label="Volume"
|
|
252
|
-
id="volume-slider"
|
|
253
|
-
></sp-slider>
|
|
254
|
-
</div>
|
|
255
|
-
<div><sp-switch>Overdrive</sp-switch></div>
|
|
256
|
-
<sp-button-group id="buttons">
|
|
257
|
-
<sp-button variant="primary">Cancel</sp-button>
|
|
258
|
-
<sp-button variant="accent">Continue</sp-button>
|
|
259
|
-
</sp-button-group>
|
|
129
|
+
<sp-theme system="spectrum" color="dark" scale="large">
|
|
130
|
+
<div id="outer">
|
|
131
|
+
<sp-field-label for="volume">Volume</sp-field-label>
|
|
132
|
+
<sp-slider id="volume" value="50"></sp-slider>
|
|
133
|
+
<sp-switch>Overdrive</sp-switch>
|
|
260
134
|
</div>
|
|
261
135
|
</sp-theme>
|
|
262
136
|
```
|
|
263
137
|
|
|
264
|
-
|
|
138
|
+
#### Embedded color systems and directional content
|
|
265
139
|
|
|
266
|
-
There are a few cases where it is necessary to embed one theme within another.
|
|
267
|
-
For example, if you have an application that is using a dark theme with a left to right text direction that is
|
|
268
|
-
previewing or editing content that will be displayed in a light theme with a right to left text direction.
|
|
140
|
+
There are a few cases where it is necessary to embed one theme within another. For example, if you have an application that is using a dark color system with a left to right text direction that is previewing or editing content that will be displayed in a light color system with a right to left text direction.
|
|
269
141
|
|
|
270
142
|
```html
|
|
271
143
|
<style type="text/css">
|
|
@@ -327,78 +199,53 @@ previewing or editing content that will be displayed in a light theme with a rig
|
|
|
327
199
|
</sp-theme>
|
|
328
200
|
```
|
|
329
201
|
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
The `<sp-theme>` element provides a language context for its descendents in the DOM. Descendents can resolve this context by dispatching an `sp-language-context` DOM event and supplying a `callback(lang: string) => void` method in the `detail` entry of the Custom Event. These callbacks will be reactively envoked when the `lang` attribute on the `<sp-theme>` element is updated. This way, you can control the resolved language in [`<sp-number-field>`](../components/number-field), [`<sp-slider>`](./components/slider), and other elements in one centralized place.
|
|
333
|
-
|
|
334
|
-
## System Context (private Beta API - subject to changes)
|
|
335
|
-
|
|
336
|
-
The <sp-theme> element provides a "system" context to its descendants in the DOM. This context indicates the Spectrum design system variant currently in use (e.g., 'spectrum', 'express', or 'spectrum-two').
|
|
337
|
-
|
|
338
|
-
#### Consuming the System Context in Components
|
|
339
|
-
|
|
340
|
-
Components can consume the system context by using the `SystemResolutionController`. This controller encapsulates the logic for resolving the system context, allowing it to be integrated into any component in few steps.
|
|
341
|
-
|
|
342
|
-
#### Steps to Consume the System Context:
|
|
343
|
-
|
|
344
|
-
1. Import the `SystemResolutionController` and the necessary types:
|
|
345
|
-
|
|
346
|
-
```ts
|
|
347
|
-
import {
|
|
348
|
-
SystemResolutionController,
|
|
349
|
-
systemResolverUpdatedSymbol,
|
|
350
|
-
} from './SystemResolutionController.js';
|
|
351
|
-
import type { SystemVariant } from '@spectrum-web-components/theme';
|
|
352
|
-
```
|
|
353
|
-
|
|
354
|
-
2. Instantiate the `SystemResolutionController`:
|
|
202
|
+
### Advanced usage
|
|
355
203
|
|
|
356
|
-
|
|
204
|
+
#### Lazy loading themes
|
|
357
205
|
|
|
358
|
-
|
|
359
|
-
export class MyComponent extends LitElement {
|
|
360
|
-
private systemResolver = new SystemResolutionController(this);
|
|
206
|
+
Load only what you need by importing the specific fragments, then lazy-load others as your user changes theme settings.
|
|
361
207
|
|
|
362
|
-
|
|
208
|
+
```js
|
|
209
|
+
const themeEl = document.querySelector('sp-theme');
|
|
210
|
+
|
|
211
|
+
async function updateTheme(system, color, scale) {
|
|
212
|
+
const systemBase = system === 'spectrum' ? '' : `${system}/`;
|
|
213
|
+
await Promise.all([
|
|
214
|
+
import(`@spectrum-web-components/theme/${systemBase}theme-${color}.js`),
|
|
215
|
+
import(`@spectrum-web-components/theme/${systemBase}scale-${scale}.js`),
|
|
216
|
+
]);
|
|
217
|
+
themeEl.system = system;
|
|
218
|
+
themeEl.color = color;
|
|
219
|
+
themeEl.scale = scale;
|
|
363
220
|
}
|
|
364
|
-
```
|
|
365
|
-
|
|
366
|
-
3. Respond to system context changes:
|
|
367
|
-
|
|
368
|
-
Override the `update` lifecycle method to detect changes in the system context using the `systemResolverUpdatedSymbol`.
|
|
369
221
|
|
|
370
|
-
|
|
371
|
-
protected update(changes: Map<PropertyKey, unknown>): void {
|
|
372
|
-
super.update(changes);
|
|
373
|
-
if (changes.has(systemResolverUpdatedSymbol)) {
|
|
374
|
-
this.handleSystemChange();
|
|
375
|
-
}
|
|
376
|
-
}
|
|
222
|
+
updateTheme('spectrum', 'light', 'medium');
|
|
377
223
|
```
|
|
378
224
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
Create a method that will be called whenever the system context changes. Use `this.systemResolver.system` to access the current system variant.
|
|
382
|
-
|
|
383
|
-
```ts
|
|
384
|
-
private handleSystemChange(): void {
|
|
385
|
-
const currentSystem: SystemVariant = this.systemResolver.system;
|
|
386
|
-
// Implement logic based on the current system variant.
|
|
387
|
-
// For example, update styles, states or re-render parts of the component.
|
|
388
|
-
}
|
|
389
|
-
```
|
|
225
|
+
When bundling your application, be sure to consult the documentation of your bundler for the correct way to ensure proper packaging of the programatic dependency graph that this will create.
|
|
390
226
|
|
|
391
|
-
|
|
227
|
+
#### Language context
|
|
392
228
|
|
|
393
|
-
|
|
229
|
+
Descendants can request the current language by dispatching `sp-language-context` with a callback. The callback is re-invoked when the theme’s `lang` changes. This way, you can control the resolved language in `<sp-number-field>`, `<sp-slider>`, and other elements in one centralized place.
|
|
394
230
|
|
|
395
231
|
```ts
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
232
|
+
// in a descendant component
|
|
233
|
+
this.dispatchEvent(
|
|
234
|
+
new CustomEvent('sp-language-context', {
|
|
235
|
+
bubbles: true,
|
|
236
|
+
composed: true,
|
|
237
|
+
detail: {
|
|
238
|
+
callback: (lang, unsubscribe) => {
|
|
239
|
+
this.lang = lang; // use the language value
|
|
240
|
+
// call unsubscribe() when you no longer need updates
|
|
241
|
+
},
|
|
242
|
+
},
|
|
243
|
+
})
|
|
244
|
+
);
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
### Accessibility
|
|
248
|
+
|
|
249
|
+
- **Color and contrast**: Ensure sufficient contrast for any backgrounds you apply when consuming tokens (WCAG 2.1 AA). Components themselves meet Spectrum guidance when themed correctly.
|
|
250
|
+
- **Language**: Set `lang` on `<sp-theme>` to inform number/date formatting and other locale-aware components.
|
|
251
|
+
- **Directionality**: Use `dir` to deliver correct LTR/RTL behavior; embedded themes allow mixing contexts.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/theme",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.11.0-preview-b6b1becb.20251121200357",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
-
"directory": "tools/theme"
|
|
12
|
+
"directory": "1st-gen/tools/theme"
|
|
13
13
|
},
|
|
14
14
|
"author": "Adobe",
|
|
15
15
|
"homepage": "https://opensource.adobe.com/spectrum-web-components/tools/theme",
|
|
@@ -289,8 +289,9 @@
|
|
|
289
289
|
"css"
|
|
290
290
|
],
|
|
291
291
|
"dependencies": {
|
|
292
|
-
"@spectrum-web-components/base": "1.
|
|
293
|
-
"@spectrum-web-components/
|
|
292
|
+
"@spectrum-web-components/base": "1.11.0-preview-b6b1becb.20251121200357",
|
|
293
|
+
"@spectrum-web-components/core": "0.0.2-preview-b6b1becb.20251121200357",
|
|
294
|
+
"@spectrum-web-components/styles": "1.11.0-preview-b6b1becb.20251121200357"
|
|
294
295
|
},
|
|
295
296
|
"types": "./src/index.d.ts",
|
|
296
297
|
"customElements": "custom-elements.json",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["scale-large-core-tokens.css.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host,:root{--spectrum-workflow-icon-size-50:18px;--spectrum-workflow-icon-size-75:20px;--spectrum-workflow-icon-size-100:22px;--spectrum-workflow-icon-size-200:24px;--spectrum-workflow-icon-size-300:28px;--spectrum-arrow-icon-size-75:12px;--spectrum-arrow-icon-size-100:14px;--spectrum-arrow-icon-size-200:16px;--spectrum-arrow-icon-size-300:16px;--spectrum-arrow-icon-size-400:18px;--spectrum-arrow-icon-size-500:22px;--spectrum-arrow-icon-size-600:24px;--spectrum-asterisk-icon-size-100:10px;--spectrum-asterisk-icon-size-200:12px;--spectrum-asterisk-icon-size-300:12px;--spectrum-checkmark-icon-size-50:12px;--spectrum-checkmark-icon-size-75:12px;--spectrum-checkmark-icon-size-100:14px;--spectrum-checkmark-icon-size-200:14px;--spectrum-checkmark-icon-size-300:16px;--spectrum-checkmark-icon-size-400:18px;--spectrum-checkmark-icon-size-500:20px;--spectrum-checkmark-icon-size-600:24px;--spectrum-chevron-icon-size-50:8px;--spectrum-chevron-icon-size-75:12px;--spectrum-chevron-icon-size-100:14px;--spectrum-chevron-icon-size-200:14px;--spectrum-chevron-icon-size-300:16px;--spectrum-chevron-icon-size-400:18px;--spectrum-chevron-icon-size-500:20px;--spectrum-chevron-icon-size-600:24px;--spectrum-corner-triangle-icon-size-75:6px;--spectrum-corner-triangle-icon-size-100:7px;--spectrum-corner-triangle-icon-size-200:8px;--spectrum-corner-triangle-icon-size-300:8px;--spectrum-cross-icon-size-75:10px;--spectrum-cross-icon-size-100:10px;--spectrum-cross-icon-size-200:12px;--spectrum-cross-icon-size-300:14px;--spectrum-cross-icon-size-400:16px;--spectrum-cross-icon-size-500:16px;--spectrum-cross-icon-size-600:18px;--spectrum-dash-icon-size-50:10px;--spectrum-dash-icon-size-75:10px;--spectrum-dash-icon-size-100:12px;--spectrum-dash-icon-size-200:14px;--spectrum-dash-icon-size-300:16px;--spectrum-dash-icon-size-400:18px;--spectrum-dash-icon-size-500:20px;--spectrum-dash-icon-size-600:22px;--spectrum-field-label-text-to-asterisk-small:5px;--spectrum-field-label-text-to-asterisk-medium:5px;--spectrum-field-label-text-to-asterisk-large:6px;--spectrum-field-label-text-to-asterisk-extra-large:6px;--spectrum-field-label-top-to-asterisk-small:11px;--spectrum-field-label-top-to-asterisk-medium:15px;--spectrum-field-label-top-to-asterisk-large:19px;--spectrum-field-label-top-to-asterisk-extra-large:24px;--spectrum-field-label-top-margin-medium:5px;--spectrum-field-label-top-margin-large:6px;--spectrum-field-label-top-margin-extra-large:6px;--spectrum-field-label-to-component-quiet-small:-10px;--spectrum-field-label-to-component-quiet-medium:-10px;--spectrum-field-label-to-component-quiet-large:-15px;--spectrum-field-label-to-component-quiet-extra-large:-19px;--spectrum-help-text-top-to-workflow-icon-small:5px;--spectrum-help-text-top-to-workflow-icon-medium:4px;--spectrum-help-text-top-to-workflow-icon-large:8px;--spectrum-help-text-top-to-workflow-icon-extra-large:11px;--spectrum-status-light-dot-size-medium:10px;--spectrum-status-light-dot-size-large:12px;--spectrum-status-light-dot-size-extra-large:12px;--spectrum-status-light-top-to-dot-small:11px;--spectrum-status-light-top-to-dot-medium:15px;--spectrum-status-light-top-to-dot-large:19px;--spectrum-status-light-top-to-dot-extra-large:24px;--spectrum-action-button-edge-to-hold-icon-medium:5px;--spectrum-action-button-edge-to-hold-icon-large:6px;--spectrum-action-button-edge-to-hold-icon-extra-large:7px;--spectrum-tooltip-tip-width:10px;--spectrum-tooltip-tip-height:5px;--spectrum-tooltip-maximum-width:200px;--spectrum-progress-circle-size-small:20px;--spectrum-progress-circle-size-medium:40px;--spectrum-progress-circle-size-large:80px;--spectrum-progress-circle-thickness-small:3px;--spectrum-progress-circle-thickness-medium:4px;--spectrum-progress-circle-thickness-large:5px;--spectrum-toast-height:56px;--spectrum-toast-maximum-width:420px;--spectrum-toast-top-to-workflow-icon:17px;--spectrum-toast-top-to-text:16px;--spectrum-toast-bottom-to-text:19px;--spectrum-action-bar-height:56px;--spectrum-action-bar-top-to-item-counter:16px;--spectrum-swatch-size-extra-small:20px;--spectrum-swatch-size-small:30px;--spectrum-swatch-size-medium:40px;--spectrum-swatch-size-large:50px;--spectrum-progress-bar-thickness-small:5px;--spectrum-progress-bar-thickness-medium:8px;--spectrum-progress-bar-thickness-large:10px;--spectrum-progress-bar-thickness-extra-large:13px;--spectrum-meter-width:240px;--spectrum-meter-thickness-small:5px;--spectrum-meter-thickness-large:8px;--spectrum-tag-top-to-avatar-small:5px;--spectrum-tag-top-to-avatar-medium:7px;--spectrum-tag-top-to-avatar-large:11px;--spectrum-tag-top-to-cross-icon-small:10px;--spectrum-tag-top-to-cross-icon-medium:15px;--spectrum-tag-top-to-cross-icon-large:19px;--spectrum-popover-top-to-content-area:5px;--spectrum-menu-item-edge-to-content-not-selected-small:24px;--spectrum-menu-item-edge-to-content-not-selected-medium:42px;--spectrum-menu-item-edge-to-content-not-selected-large:47px;--spectrum-menu-item-edge-to-content-not-selected-extra-large:54px;--spectrum-menu-item-top-to-disclosure-icon-small:9px;--spectrum-menu-item-top-to-disclosure-icon-medium:13px;--spectrum-menu-item-top-to-disclosure-icon-large:17px;--spectrum-menu-item-top-to-disclosure-icon-extra-large:22px;--spectrum-menu-item-top-to-selected-icon-small:9px;--spectrum-menu-item-top-to-selected-icon-medium:13px;--spectrum-menu-item-top-to-selected-icon-large:17px;--spectrum-menu-item-top-to-selected-icon-extra-large:22px;--spectrum-slider-control-to-field-label-small:6px;--spectrum-slider-control-to-field-label-medium:10px;--spectrum-slider-control-to-field-label-large:14px;--spectrum-slider-control-to-field-label-extra-large:17px;--spectrum-picker-visual-to-disclosure-icon-small:9px;--spectrum-picker-visual-to-disclosure-icon-medium:10px;--spectrum-picker-visual-to-disclosure-icon-large:11px;--spectrum-picker-visual-to-disclosure-icon-extra-large:13px;--spectrum-text-area-minimum-width:140px;--spectrum-text-area-minimum-height:70px;--spectrum-combo-box-visual-to-field-button-small:9px;--spectrum-combo-box-visual-to-field-button-medium:10px;--spectrum-combo-box-visual-to-field-button-large:11px;--spectrum-combo-box-visual-to-field-button-extra-large:13px;--spectrum-thumbnail-size-50:20px;--spectrum-thumbnail-size-75:22px;--spectrum-thumbnail-size-100:26px;--spectrum-thumbnail-size-200:28px;--spectrum-thumbnail-size-300:32px;--spectrum-thumbnail-size-400:36px;--spectrum-thumbnail-size-500:40px;--spectrum-thumbnail-size-600:46px;--spectrum-thumbnail-size-700:50px;--spectrum-thumbnail-size-800:55px;--spectrum-thumbnail-size-900:62px;--spectrum-thumbnail-size-1000:70px;--spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs);--spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs);--spectrum-opacity-checkerboard-square-size:10px;--spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs);--spectrum-contextual-help-body-size:var(--spectrum-body-size-xs);--spectrum-breadcrumbs-height-multiline:84px;--spectrum-breadcrumbs-top-to-text:17px;--spectrum-breadcrumbs-top-to-text-compact:16px;--spectrum-breadcrumbs-top-to-text-multiline:15px;--spectrum-breadcrumbs-bottom-to-text:19px;--spectrum-breadcrumbs-bottom-to-text-compact:19px;--spectrum-breadcrumbs-bottom-to-text-multiline:10px;--spectrum-breadcrumbs-start-edge-to-text:9px;--spectrum-breadcrumbs-top-text-to-bottom-text:11px;--spectrum-breadcrumbs-top-to-separator-icon:25px;--spectrum-breadcrumbs-top-to-separator-icon-compact:23px;--spectrum-breadcrumbs-top-to-separator-icon-multiline:20px;--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px;--spectrum-breadcrumbs-top-to-truncated-menu:10px;--spectrum-breadcrumbs-top-to-truncated-menu-compact:5px;--spectrum-avatar-size-50:20px;--spectrum-avatar-size-75:22px;--spectrum-avatar-size-100:26px;--spectrum-avatar-size-200:28px;--spectrum-avatar-size-300:32px;--spectrum-avatar-size-400:36px;--spectrum-avatar-size-500:40px;--spectrum-avatar-size-600:46px;--spectrum-avatar-size-700:50px;--spectrum-alert-banner-minimum-height:64px;--spectrum-alert-banner-width:680px;--spectrum-alert-banner-top-to-workflow-icon:21px;--spectrum-alert-banner-top-to-text:21px;--spectrum-alert-banner-bottom-to-text:22px;--spectrum-rating-indicator-width:22px;--spectrum-rating-indicator-to-icon:5px;--spectrum-color-area-width:240px;--spectrum-color-area-minimum-width:80px;--spectrum-color-area-height:240px;--spectrum-color-area-minimum-height:80px;--spectrum-color-wheel-width:240px;--spectrum-color-wheel-minimum-width:219px;--spectrum-color-slider-length:240px;--spectrum-color-slider-minimum-length:100px;--spectrum-illustrated-message-title-size:var(--spectrum-heading-size-s);--spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-s);--spectrum-illustrated-message-body-size:var(--spectrum-body-size-xs);--spectrum-coach-mark-width:216px;--spectrum-coach-mark-minimum-width:216px;--spectrum-coach-mark-maximum-width:248px;--spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300);--spectrum-coach-mark-pagination-text-to-bottom-edge:22px;--spectrum-coach-mark-media-height:162px;--spectrum-coach-mark-media-minimum-height:121px;--spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs);--spectrum-coach-mark-body-size:var(--spectrum-body-size-xs);--spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs);--spectrum-accordion-top-to-text-regular-small:7px;--spectrum-accordion-small-top-to-text-spacious:12px;--spectrum-accordion-top-to-text-regular-medium:9px;--spectrum-accordion-top-to-text-spacious-medium:14px;--spectrum-accordion-top-to-text-compact-large:7px;--spectrum-accordion-top-to-text-regular-large:12px;--spectrum-accordion-top-to-text-spacious-large:14px;--spectrum-accordion-top-to-text-compact-extra-large:7px;--spectrum-accordion-top-to-text-regular-extra-large:12px;--spectrum-accordion-top-to-text-spacious-extra-large:14px;--spectrum-accordion-bottom-to-text-compact-small:4px;--spectrum-accordion-bottom-to-text-regular-small:9px;--spectrum-accordion-bottom-to-text-spacious-small:14px;--spectrum-accordion-bottom-to-text-compact-medium:8px;--spectrum-accordion-bottom-to-text-regular-medium:13px;--spectrum-accordion-bottom-to-text-spacious-medium:18px;--spectrum-accordion-bottom-to-text-compact-large:9px;--spectrum-accordion-bottom-to-text-regular-large:14px;--spectrum-accordion-bottom-to-text-spacious-large:19px;--spectrum-accordion-bottom-to-text-compact-extra-large:10px;--spectrum-accordion-bottom-to-text-regular-extra-large:15px;--spectrum-accordion-bottom-to-text-spacious-extra-large:21px;--spectrum-accordion-minimum-width:250px;--spectrum-accordion-content-area-top-to-content:10px;--spectrum-accordion-content-area-bottom-to-content:20px;--spectrum-color-handle-size:20px;--spectrum-color-handle-size-key-focus:40px;--spectrum-table-column-header-row-top-to-text-small:10px;--spectrum-table-column-header-row-top-to-text-medium:9px;--spectrum-table-column-header-row-top-to-text-large:13px;--spectrum-table-column-header-row-top-to-text-extra-large:16px;--spectrum-table-column-header-row-bottom-to-text-small:11px;--spectrum-table-column-header-row-bottom-to-text-medium:10px;--spectrum-table-column-header-row-bottom-to-text-large:13px;--spectrum-table-column-header-row-bottom-to-text-extra-large:17px;--spectrum-table-row-height-small-regular:40px;--spectrum-table-row-height-medium-regular:50px;--spectrum-table-row-height-large-regular:60px;--spectrum-table-row-height-extra-large-regular:70px;--spectrum-table-row-height-small-spacious:50px;--spectrum-table-row-height-medium-spacious:60px;--spectrum-table-row-height-large-spacious:70px;--spectrum-table-row-height-extra-large-spacious:80px;--spectrum-table-row-top-to-text-small-regular:10px;--spectrum-table-row-top-to-text-medium-regular:14px;--spectrum-table-row-top-to-text-large-regular:18px;--spectrum-table-row-top-to-text-extra-large-regular:21px;--spectrum-table-row-bottom-to-text-small-regular:11px;--spectrum-table-row-bottom-to-text-medium-regular:15px;--spectrum-table-row-bottom-to-text-large-regular:18px;--spectrum-table-row-bottom-to-text-extra-large-regular:22px;--spectrum-table-row-top-to-text-small-spacious:15px;--spectrum-table-row-top-to-text-medium-spacious:18px;--spectrum-table-row-top-to-text-large-spacious:23px;--spectrum-table-row-top-to-text-extra-large-spacious:26px;--spectrum-table-row-bottom-to-text-small-spacious:16px;--spectrum-table-row-bottom-to-text-medium-spacious:18px;--spectrum-table-row-bottom-to-text-large-spacious:23px;--spectrum-table-row-bottom-to-text-extra-large-spacious:27px;--spectrum-table-checkbox-to-text:30px;--spectrum-table-header-row-checkbox-to-top-small:14px;--spectrum-table-header-row-checkbox-to-top-medium:13px;--spectrum-table-header-row-checkbox-to-top-large:17px;--spectrum-table-header-row-checkbox-to-top-extra-large:21px;--spectrum-table-row-checkbox-to-top-small-compact:9px;--spectrum-table-row-checkbox-to-top-small-regular:14px;--spectrum-table-row-checkbox-to-top-small-spacious:19px;--spectrum-table-row-checkbox-to-top-medium-compact:13px;--spectrum-table-row-checkbox-to-top-medium-regular:18px;--spectrum-table-row-checkbox-to-top-medium-spacious:23px;--spectrum-table-row-checkbox-to-top-large-compact:17px;--spectrum-table-row-checkbox-to-top-large-regular:22px;--spectrum-table-row-checkbox-to-top-large-spacious:27px;--spectrum-table-row-checkbox-to-top-extra-large-compact:21px;--spectrum-table-row-checkbox-to-top-extra-large-regular:26px;--spectrum-table-row-checkbox-to-top-extra-large-spacious:31px;--spectrum-table-section-header-row-height-small:30px;--spectrum-table-section-header-row-height-medium:40px;--spectrum-table-section-header-row-height-large:50px;--spectrum-table-section-header-row-height-extra-large:60px;--spectrum-table-thumbnail-to-top-minimum-small-compact:5px;--spectrum-table-thumbnail-to-top-minimum-medium-compact:6px;--spectrum-table-thumbnail-to-top-minimum-large-compact:9px;--spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px;--spectrum-table-thumbnail-to-top-minimum-small-regular:6px;--spectrum-table-thumbnail-to-top-minimum-medium-regular:9px;--spectrum-table-thumbnail-to-top-minimum-large-regular:10px;--spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px;--spectrum-table-thumbnail-to-top-minimum-small-spacious:9px;--spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px;--spectrum-table-thumbnail-to-top-minimum-large-spacious:10px;--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px;--spectrum-tab-item-to-tab-item-horizontal-small:27px;--spectrum-tab-item-to-tab-item-horizontal-medium:30px;--spectrum-tab-item-to-tab-item-horizontal-large:33px;--spectrum-tab-item-to-tab-item-horizontal-extra-large:36px;--spectrum-tab-item-to-tab-item-vertical-small:5px;--spectrum-tab-item-to-tab-item-vertical-medium:5px;--spectrum-tab-item-to-tab-item-vertical-large:6px;--spectrum-tab-item-to-tab-item-vertical-extra-large:6px;--spectrum-tab-item-start-to-edge-small:13px;--spectrum-tab-item-start-to-edge-medium:15px;--spectrum-tab-item-start-to-edge-large:17px;--spectrum-tab-item-start-to-edge-extra-large:19px;--spectrum-tab-item-top-to-text-small:14px;--spectrum-tab-item-bottom-to-text-small:15px;--spectrum-tab-item-top-to-text-medium:18px;--spectrum-tab-item-bottom-to-text-medium:19px;--spectrum-tab-item-top-to-text-large:22px;--spectrum-tab-item-bottom-to-text-large:22px;--spectrum-tab-item-top-to-text-extra-large:25px;--spectrum-tab-item-bottom-to-text-extra-large:25px;--spectrum-tab-item-top-to-text-compact-small:5px;--spectrum-tab-item-bottom-to-text-compact-small:6px;--spectrum-tab-item-top-to-text-compact-medium:9px;--spectrum-tab-item-bottom-to-text-compact-medium:10px;--spectrum-tab-item-top-to-text-compact-large:12px;--spectrum-tab-item-bottom-to-text-compact-large:14px;--spectrum-tab-item-top-to-text-compact-extra-large:15px;--spectrum-tab-item-bottom-to-text-compact-extra-large:17px;--spectrum-tab-item-top-to-workflow-icon-small:15px;--spectrum-tab-item-top-to-workflow-icon-medium:19px;--spectrum-tab-item-top-to-workflow-icon-large:23px;--spectrum-tab-item-top-to-workflow-icon-extra-large:26px;--spectrum-tab-item-top-to-workflow-icon-compact-small:5px;--spectrum-tab-item-top-to-workflow-icon-compact-medium:9px;--spectrum-tab-item-top-to-workflow-icon-compact-large:13px;--spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px;--spectrum-tab-item-focus-indicator-gap-small:9px;--spectrum-tab-item-focus-indicator-gap-medium:10px;--spectrum-tab-item-focus-indicator-gap-large:11px;--spectrum-tab-item-focus-indicator-gap-extra-large:12px;--spectrum-side-navigation-width:240px;--spectrum-side-navigation-minimum-width:200px;--spectrum-side-navigation-maximum-width:300px;--spectrum-side-navigation-second-level-edge-to-text:30px;--spectrum-side-navigation-third-level-edge-to-text:45px;--spectrum-side-navigation-with-icon-second-level-edge-to-text:62px;--spectrum-side-navigation-with-icon-third-level-edge-to-text:77px;--spectrum-side-navigation-item-to-item:5px;--spectrum-side-navigation-item-to-header:30px;--spectrum-side-navigation-header-to-item:10px;--spectrum-side-navigation-bottom-to-text:10px;--spectrum-tray-top-to-content-area:5px;--spectrum-accordion-top-to-text-spacious-small:12px;--spectrum-text-to-visual-50:8px;--spectrum-text-to-visual-75:9px;--spectrum-text-to-visual-100:10px;--spectrum-text-to-visual-200:11px;--spectrum-text-to-visual-300:13px;--spectrum-text-to-control-75:11px;--spectrum-text-to-control-100:13px;--spectrum-text-to-control-200:14px;--spectrum-text-to-control-300:16px;--spectrum-component-height-50:26px;--spectrum-component-height-75:30px;--spectrum-component-height-100:40px;--spectrum-component-height-200:50px;--spectrum-component-height-300:60px;--spectrum-component-height-400:70px;--spectrum-component-height-500:80px;--spectrum-component-pill-edge-to-visual-75:13px;--spectrum-component-pill-edge-to-visual-100:17px;--spectrum-component-pill-edge-to-visual-200:22px;--spectrum-component-pill-edge-to-visual-300:27px;--spectrum-component-pill-edge-to-visual-only-75:5px;--spectrum-component-pill-edge-to-visual-only-100:9px;--spectrum-component-pill-edge-to-visual-only-200:13px;--spectrum-component-pill-edge-to-visual-only-300:16px;--spectrum-component-pill-edge-to-text-75:15px;--spectrum-component-pill-edge-to-text-100:20px;--spectrum-component-pill-edge-to-text-200:25px;--spectrum-component-pill-edge-to-text-300:30px;--spectrum-component-edge-to-visual-50:7px;--spectrum-component-edge-to-visual-75:9px;--spectrum-component-edge-to-visual-100:12px;--spectrum-component-edge-to-visual-200:16px;--spectrum-component-edge-to-visual-300:19px;--spectrum-component-edge-to-visual-only-50:4px;--spectrum-component-edge-to-visual-only-75:5px;--spectrum-component-edge-to-visual-only-100:9px;--spectrum-component-edge-to-visual-only-200:13px;--spectrum-component-edge-to-visual-only-300:16px;--spectrum-component-edge-to-text-50:10px;--spectrum-component-edge-to-text-75:11px;--spectrum-component-edge-to-text-100:15px;--spectrum-component-edge-to-text-200:19px;--spectrum-component-edge-to-text-300:22px;--spectrum-component-top-to-workflow-icon-50:4px;--spectrum-component-top-to-workflow-icon-75:5px;--spectrum-component-top-to-workflow-icon-100:9px;--spectrum-component-top-to-workflow-icon-200:13px;--spectrum-component-top-to-workflow-icon-300:16px;--spectrum-component-top-to-text-50:4px;--spectrum-component-top-to-text-75:5px;--spectrum-component-top-to-text-100:8px;--spectrum-component-top-to-text-200:12px;--spectrum-component-top-to-text-300:15px;--spectrum-component-bottom-to-text-50:6px;--spectrum-component-bottom-to-text-75:6px;--spectrum-component-bottom-to-text-100:11px;--spectrum-component-bottom-to-text-200:14px;--spectrum-component-bottom-to-text-300:18px;--spectrum-component-to-menu-small:7px;--spectrum-component-to-menu-medium:8px;--spectrum-component-to-menu-large:9px;--spectrum-component-to-menu-extra-large:10px;--spectrum-field-edge-to-disclosure-icon-75:9px;--spectrum-field-edge-to-disclosure-icon-100:13px;--spectrum-field-edge-to-disclosure-icon-200:17px;--spectrum-field-edge-to-disclosure-icon-300:22px;--spectrum-field-end-edge-to-disclosure-icon-75:9px;--spectrum-field-end-edge-to-disclosure-icon-100:13px;--spectrum-field-end-edge-to-disclosure-icon-200:17px;--spectrum-field-end-edge-to-disclosure-icon-300:22px;--spectrum-field-top-to-disclosure-icon-75:9px;--spectrum-field-top-to-disclosure-icon-100:13px;--spectrum-field-top-to-disclosure-icon-200:17px;--spectrum-field-top-to-disclosure-icon-300:22px;--spectrum-field-top-to-alert-icon-small:5px;--spectrum-field-top-to-alert-icon-medium:9px;--spectrum-field-top-to-alert-icon-large:13px;--spectrum-field-top-to-alert-icon-extra-large:16px;--spectrum-field-top-to-validation-icon-small:9px;--spectrum-field-top-to-validation-icon-medium:13px;--spectrum-field-top-to-validation-icon-large:17px;--spectrum-field-top-to-validation-icon-extra-large:22px;--spectrum-field-top-to-progress-circle-small:7px;--spectrum-field-top-to-progress-circle-medium:12px;--spectrum-field-top-to-progress-circle-large:17px;--spectrum-field-top-to-progress-circle-extra-large:22px;--spectrum-field-edge-to-alert-icon-small:11px;--spectrum-field-edge-to-alert-icon-medium:15px;--spectrum-field-edge-to-alert-icon-large:19px;--spectrum-field-edge-to-alert-icon-extra-large:22px;--spectrum-field-edge-to-validation-icon-small:11px;--spectrum-field-edge-to-validation-icon-medium:15px;--spectrum-field-edge-to-validation-icon-large:19px;--spectrum-field-edge-to-validation-icon-extra-large:22px;--spectrum-field-text-to-alert-icon-small:10px;--spectrum-field-text-to-alert-icon-medium:15px;--spectrum-field-text-to-alert-icon-large:19px;--spectrum-field-text-to-alert-icon-extra-large:22px;--spectrum-field-text-to-validation-icon-small:10px;--spectrum-field-text-to-validation-icon-medium:15px;--spectrum-field-text-to-validation-icon-large:19px;--spectrum-field-text-to-validation-icon-extra-large:22px;--spectrum-field-width:240px;--spectrum-character-count-to-field-quiet-small:-4px;--spectrum-character-count-to-field-quiet-medium:-4px;--spectrum-character-count-to-field-quiet-large:-4px;--spectrum-character-count-to-field-quiet-extra-large:-5px;--spectrum-side-label-character-count-to-field:15px;--spectrum-side-label-character-count-top-margin-small:5px;--spectrum-side-label-character-count-top-margin-medium:10px;--spectrum-side-label-character-count-top-margin-large:14px;--spectrum-side-label-character-count-top-margin-extra-large:18px;--spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px;--spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px;--spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px;--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px;--spectrum-navigational-indicator-top-to-back-icon-small:7px;--spectrum-navigational-indicator-top-to-back-icon-medium:12px;--spectrum-navigational-indicator-top-to-back-icon-large:16px;--spectrum-navigational-indicator-top-to-back-icon-extra-large:19px;--spectrum-color-control-track-width:30px;--spectrum-font-size-50:13px;--spectrum-font-size-75:15px;--spectrum-font-size-100:17px;--spectrum-font-size-200:19px;--spectrum-font-size-300:22px;--spectrum-font-size-400:24px;--spectrum-font-size-500:27px;--spectrum-font-size-600:31px;--spectrum-font-size-700:34px;--spectrum-font-size-800:39px;--spectrum-font-size-900:44px;--spectrum-font-size-1000:49px;--spectrum-font-size-1100:55px;--spectrum-font-size-1200:62px;--spectrum-font-size-1300:70px;--spectrum-checkbox-control-size-small:18px;--spectrum-checkbox-control-size-medium:20px;--spectrum-checkbox-control-size-large:22px;--spectrum-checkbox-control-size-extra-large:26px;--spectrum-checkbox-top-to-control-small:6px;--spectrum-checkbox-top-to-control-medium:10px;--spectrum-checkbox-top-to-control-large:14px;--spectrum-checkbox-top-to-control-extra-large:17px;--spectrum-switch-control-width-small:32px;--spectrum-switch-control-width-medium:36px;--spectrum-switch-control-width-large:41px;--spectrum-switch-control-width-extra-large:46px;--spectrum-switch-control-height-small:18px;--spectrum-switch-control-height-medium:20px;--spectrum-switch-control-height-large:22px;--spectrum-switch-control-height-extra-large:26px;--spectrum-switch-top-to-control-small:6px;--spectrum-switch-top-to-control-medium:10px;--spectrum-switch-top-to-control-large:14px;--spectrum-switch-top-to-control-extra-large:17px;--spectrum-radio-button-control-size-small:18px;--spectrum-radio-button-control-size-medium:20px;--spectrum-radio-button-control-size-large:22px;--spectrum-radio-button-control-size-extra-large:26px;--spectrum-radio-button-top-to-control-small:6px;--spectrum-radio-button-top-to-control-medium:10px;--spectrum-radio-button-top-to-control-large:14px;--spectrum-radio-button-top-to-control-extra-large:17px;--spectrum-slider-control-height-small:22px;--spectrum-slider-control-height-medium:24px;--spectrum-slider-control-height-large:28px;--spectrum-slider-control-height-extra-large:30px;--spectrum-slider-handle-size-small:22px;--spectrum-slider-handle-size-medium:24px;--spectrum-slider-handle-size-large:28px;--spectrum-slider-handle-size-extra-large:30px;--spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200);--spectrum-slider-bottom-to-handle-small:4px;--spectrum-slider-bottom-to-handle-medium:8px;--spectrum-slider-bottom-to-handle-large:12px;--spectrum-slider-bottom-to-handle-extra-large:15px;--spectrum-corner-radius-100:8px;--spectrum-corner-radius-200:16px;--spectrum-drop-shadow-y:4px;--spectrum-drop-shadow-blur:16px;--spectrum-slider-tick-mark-height:13px;--spectrum-slider-ramp-track-height:20px;--spectrum-colorwheel-path:\"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0\";--spectrum-colorwheel-path-borders:\"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0\";--spectrum-colorwheel-colorarea-container-size:182px;--spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary);--spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200);--spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px;--spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px;--spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px;--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px;--spectrum-menu-item-checkmark-height-small:12px;--spectrum-menu-item-checkmark-height-medium:14px;--spectrum-menu-item-checkmark-height-large:16px;--spectrum-menu-item-checkmark-height-extra-large:16px;--spectrum-menu-item-checkmark-width-small:12px;--spectrum-menu-item-checkmark-width-medium:14px;--spectrum-menu-item-checkmark-width-large:16px;--spectrum-menu-item-checkmark-width-extra-large:16px;--spectrum-rating-icon-spacing:var(--spectrum-spacing-100);--spectrum-button-top-to-text-small:6px;--spectrum-button-bottom-to-text-small:5px;--spectrum-button-top-to-text-medium:9px;--spectrum-button-bottom-to-text-medium:10px;--spectrum-button-top-to-text-large:12px;--spectrum-button-bottom-to-text-large:13px;--spectrum-button-top-to-text-extra-large:16px;--spectrum-button-bottom-to-text-extra-large:17px;--spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200);--spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200);--spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200);--spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200);--spectrum-alert-dialog-padding:var(--spectrum-spacing-400);--spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600);--spectrum-coach-indicator-gap:8px;--spectrum-coach-indicator-ring-diameter:20px;--spectrum-coach-indicator-quiet-ring-diameter:10px;--spectrum-coachmark-buttongroup-display:none;--spectrum-coachmark-buttongroup-mobile-display:flex;--spectrum-coachmark-menu-display:none;--spectrum-coachmark-menu-mobile-display:inline-flex;--spectrum-well-padding:20px;--spectrum-well-margin-top:5px;--spectrum-well-min-width:300px;--spectrum-well-border-radius:5px;--spectrum-workflow-icon-size-xxl:40px;--spectrum-workflow-icon-size-xxs:15px;--spectrum-treeview-item-indentation-medium:20px;--spectrum-treeview-item-indentation-small:15px;--spectrum-treeview-item-indentation-large:25px;--spectrum-treeview-item-indentation-extra-large:30px;--spectrum-treeview-indicator-inset-block-start:6px;--spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px;--spectrum-dialog-confirm-entry-animation-distance:25px;--spectrum-dialog-confirm-hero-height:160px;--spectrum-dialog-confirm-border-radius:8px;--spectrum-dialog-confirm-title-text-size:19px;--spectrum-dialog-confirm-description-text-size:15px;--spectrum-dialog-confirm-padding-grid:24px;--spectrum-datepicker-initial-width:160px;--spectrum-datepicker-generic-padding:15px;--spectrum-datepicker-dash-line-height:30px;--spectrum-datepicker-width-quiet-first:90px;--spectrum-datepicker-width-quiet-second:20px;--spectrum-datepicker-datetime-width-first:45px;--spectrum-datepicker-invalid-icon-to-button:10px;--spectrum-datepicker-invalid-icon-to-button-quiet:9px;--spectrum-datepicker-input-datetime-width:30px;--spectrum-pagination-textfield-width:60px;--spectrum-pagination-item-inline-spacing:6px;--spectrum-dial-border-radius:15px;--spectrum-dial-handle-position:10px;--spectrum-dial-handle-block-margin:20px;--spectrum-dial-handle-inline-margin:20px;--spectrum-dial-controls-margin:10px;--spectrum-dial-label-gap-y:6px;--spectrum-dial-label-container-top-to-text:5px;--spectrum-assetcard-focus-ring-border-radius:12px;--spectrum-assetcard-selectionindicator-margin:15px;--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);--spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);--spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);--spectrum-tooltip-animation-distance:5px;--spectrum-ui-icon-medium-display:none;--spectrum-ui-icon-large-display:block;--spectrum-corner-radius-75:4px;--spectrum-drop-shadow-x:0px}:root,:host{--spectrum-global-alias-appframe-border-size:1px;--swc-scale-factor:1.25}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host,:root{--spectrum-workflow-icon-size-50:18px;--spectrum-workflow-icon-size-75:20px;--spectrum-workflow-icon-size-100:22px;--spectrum-workflow-icon-size-200:24px;--spectrum-workflow-icon-size-300:28px;--spectrum-arrow-icon-size-75:12px;--spectrum-arrow-icon-size-100:14px;--spectrum-arrow-icon-size-200:16px;--spectrum-arrow-icon-size-300:16px;--spectrum-arrow-icon-size-400:18px;--spectrum-arrow-icon-size-500:22px;--spectrum-arrow-icon-size-600:24px;--spectrum-asterisk-icon-size-100:10px;--spectrum-asterisk-icon-size-200:12px;--spectrum-asterisk-icon-size-300:12px;--spectrum-checkmark-icon-size-50:12px;--spectrum-checkmark-icon-size-75:12px;--spectrum-checkmark-icon-size-100:14px;--spectrum-checkmark-icon-size-200:14px;--spectrum-checkmark-icon-size-300:16px;--spectrum-checkmark-icon-size-400:18px;--spectrum-checkmark-icon-size-500:20px;--spectrum-checkmark-icon-size-600:24px;--spectrum-chevron-icon-size-50:8px;--spectrum-chevron-icon-size-75:12px;--spectrum-chevron-icon-size-100:14px;--spectrum-chevron-icon-size-200:14px;--spectrum-chevron-icon-size-300:16px;--spectrum-chevron-icon-size-400:18px;--spectrum-chevron-icon-size-500:20px;--spectrum-chevron-icon-size-600:24px;--spectrum-corner-triangle-icon-size-75:6px;--spectrum-corner-triangle-icon-size-100:7px;--spectrum-corner-triangle-icon-size-200:8px;--spectrum-corner-triangle-icon-size-300:8px;--spectrum-cross-icon-size-75:10px;--spectrum-cross-icon-size-100:10px;--spectrum-cross-icon-size-200:12px;--spectrum-cross-icon-size-300:14px;--spectrum-cross-icon-size-400:16px;--spectrum-cross-icon-size-500:16px;--spectrum-cross-icon-size-600:18px;--spectrum-dash-icon-size-50:10px;--spectrum-dash-icon-size-75:10px;--spectrum-dash-icon-size-100:12px;--spectrum-dash-icon-size-200:14px;--spectrum-dash-icon-size-300:16px;--spectrum-dash-icon-size-400:18px;--spectrum-dash-icon-size-500:20px;--spectrum-dash-icon-size-600:22px;--spectrum-field-label-text-to-asterisk-small:5px;--spectrum-field-label-text-to-asterisk-medium:5px;--spectrum-field-label-text-to-asterisk-large:6px;--spectrum-field-label-text-to-asterisk-extra-large:6px;--spectrum-field-label-top-to-asterisk-small:11px;--spectrum-field-label-top-to-asterisk-medium:15px;--spectrum-field-label-top-to-asterisk-large:19px;--spectrum-field-label-top-to-asterisk-extra-large:24px;--spectrum-field-label-top-margin-medium:5px;--spectrum-field-label-top-margin-large:6px;--spectrum-field-label-top-margin-extra-large:6px;--spectrum-field-label-to-component-quiet-small:-10px;--spectrum-field-label-to-component-quiet-medium:-10px;--spectrum-field-label-to-component-quiet-large:-15px;--spectrum-field-label-to-component-quiet-extra-large:-19px;--spectrum-help-text-top-to-workflow-icon-small:5px;--spectrum-help-text-top-to-workflow-icon-medium:4px;--spectrum-help-text-top-to-workflow-icon-large:8px;--spectrum-help-text-top-to-workflow-icon-extra-large:11px;--spectrum-status-light-dot-size-medium:10px;--spectrum-status-light-dot-size-large:12px;--spectrum-status-light-dot-size-extra-large:12px;--spectrum-status-light-top-to-dot-small:11px;--spectrum-status-light-top-to-dot-medium:15px;--spectrum-status-light-top-to-dot-large:19px;--spectrum-status-light-top-to-dot-extra-large:24px;--spectrum-action-button-edge-to-hold-icon-medium:5px;--spectrum-action-button-edge-to-hold-icon-large:6px;--spectrum-action-button-edge-to-hold-icon-extra-large:7px;--spectrum-tooltip-tip-width:10px;--spectrum-tooltip-tip-height:5px;--spectrum-tooltip-maximum-width:200px;--spectrum-progress-circle-size-small:20px;--spectrum-progress-circle-size-medium:40px;--spectrum-progress-circle-size-large:80px;--spectrum-progress-circle-thickness-small:3px;--spectrum-progress-circle-thickness-medium:4px;--spectrum-progress-circle-thickness-large:5px;--spectrum-toast-height:56px;--spectrum-toast-maximum-width:420px;--spectrum-toast-top-to-workflow-icon:17px;--spectrum-toast-top-to-text:16px;--spectrum-toast-bottom-to-text:19px;--spectrum-action-bar-height:56px;--spectrum-action-bar-top-to-item-counter:16px;--spectrum-swatch-size-extra-small:20px;--spectrum-swatch-size-small:30px;--spectrum-swatch-size-medium:40px;--spectrum-swatch-size-large:50px;--spectrum-progress-bar-thickness-small:5px;--spectrum-progress-bar-thickness-medium:8px;--spectrum-progress-bar-thickness-large:10px;--spectrum-progress-bar-thickness-extra-large:13px;--spectrum-meter-width:240px;--spectrum-meter-thickness-small:5px;--spectrum-meter-thickness-large:8px;--spectrum-tag-top-to-avatar-small:5px;--spectrum-tag-top-to-avatar-medium:7px;--spectrum-tag-top-to-avatar-large:11px;--spectrum-tag-top-to-cross-icon-small:10px;--spectrum-tag-top-to-cross-icon-medium:15px;--spectrum-tag-top-to-cross-icon-large:19px;--spectrum-popover-top-to-content-area:5px;--spectrum-menu-item-edge-to-content-not-selected-small:24px;--spectrum-menu-item-edge-to-content-not-selected-medium:42px;--spectrum-menu-item-edge-to-content-not-selected-large:47px;--spectrum-menu-item-edge-to-content-not-selected-extra-large:54px;--spectrum-menu-item-top-to-disclosure-icon-small:9px;--spectrum-menu-item-top-to-disclosure-icon-medium:13px;--spectrum-menu-item-top-to-disclosure-icon-large:17px;--spectrum-menu-item-top-to-disclosure-icon-extra-large:22px;--spectrum-menu-item-top-to-selected-icon-small:9px;--spectrum-menu-item-top-to-selected-icon-medium:13px;--spectrum-menu-item-top-to-selected-icon-large:17px;--spectrum-menu-item-top-to-selected-icon-extra-large:22px;--spectrum-slider-control-to-field-label-small:6px;--spectrum-slider-control-to-field-label-medium:10px;--spectrum-slider-control-to-field-label-large:14px;--spectrum-slider-control-to-field-label-extra-large:17px;--spectrum-picker-visual-to-disclosure-icon-small:9px;--spectrum-picker-visual-to-disclosure-icon-medium:10px;--spectrum-picker-visual-to-disclosure-icon-large:11px;--spectrum-picker-visual-to-disclosure-icon-extra-large:13px;--spectrum-text-area-minimum-width:140px;--spectrum-text-area-minimum-height:70px;--spectrum-combo-box-visual-to-field-button-small:9px;--spectrum-combo-box-visual-to-field-button-medium:10px;--spectrum-combo-box-visual-to-field-button-large:11px;--spectrum-combo-box-visual-to-field-button-extra-large:13px;--spectrum-thumbnail-size-50:20px;--spectrum-thumbnail-size-75:22px;--spectrum-thumbnail-size-100:26px;--spectrum-thumbnail-size-200:28px;--spectrum-thumbnail-size-300:32px;--spectrum-thumbnail-size-400:36px;--spectrum-thumbnail-size-500:40px;--spectrum-thumbnail-size-600:46px;--spectrum-thumbnail-size-700:50px;--spectrum-thumbnail-size-800:55px;--spectrum-thumbnail-size-900:62px;--spectrum-thumbnail-size-1000:70px;--spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs);--spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs);--spectrum-opacity-checkerboard-square-size:10px;--spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs);--spectrum-contextual-help-body-size:var(--spectrum-body-size-xs);--spectrum-breadcrumbs-height-multiline:84px;--spectrum-breadcrumbs-top-to-text:17px;--spectrum-breadcrumbs-top-to-text-compact:16px;--spectrum-breadcrumbs-top-to-text-multiline:15px;--spectrum-breadcrumbs-bottom-to-text:19px;--spectrum-breadcrumbs-bottom-to-text-compact:19px;--spectrum-breadcrumbs-bottom-to-text-multiline:10px;--spectrum-breadcrumbs-start-edge-to-text:9px;--spectrum-breadcrumbs-top-text-to-bottom-text:11px;--spectrum-breadcrumbs-top-to-separator-icon:25px;--spectrum-breadcrumbs-top-to-separator-icon-compact:23px;--spectrum-breadcrumbs-top-to-separator-icon-multiline:20px;--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px;--spectrum-breadcrumbs-top-to-truncated-menu:10px;--spectrum-breadcrumbs-top-to-truncated-menu-compact:5px;--spectrum-avatar-size-50:20px;--spectrum-avatar-size-75:22px;--spectrum-avatar-size-100:26px;--spectrum-avatar-size-200:28px;--spectrum-avatar-size-300:32px;--spectrum-avatar-size-400:36px;--spectrum-avatar-size-500:40px;--spectrum-avatar-size-600:46px;--spectrum-avatar-size-700:50px;--spectrum-alert-banner-minimum-height:64px;--spectrum-alert-banner-width:680px;--spectrum-alert-banner-top-to-workflow-icon:21px;--spectrum-alert-banner-top-to-text:21px;--spectrum-alert-banner-bottom-to-text:22px;--spectrum-rating-indicator-width:22px;--spectrum-rating-indicator-to-icon:5px;--spectrum-color-area-width:240px;--spectrum-color-area-minimum-width:80px;--spectrum-color-area-height:240px;--spectrum-color-area-minimum-height:80px;--spectrum-color-wheel-width:240px;--spectrum-color-wheel-minimum-width:219px;--spectrum-color-slider-length:240px;--spectrum-color-slider-minimum-length:100px;--spectrum-illustrated-message-title-size:var(--spectrum-heading-size-s);--spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-s);--spectrum-illustrated-message-body-size:var(--spectrum-body-size-xs);--spectrum-coach-mark-width:216px;--spectrum-coach-mark-minimum-width:216px;--spectrum-coach-mark-maximum-width:248px;--spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300);--spectrum-coach-mark-pagination-text-to-bottom-edge:22px;--spectrum-coach-mark-media-height:162px;--spectrum-coach-mark-media-minimum-height:121px;--spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs);--spectrum-coach-mark-body-size:var(--spectrum-body-size-xs);--spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs);--spectrum-accordion-top-to-text-regular-small:7px;--spectrum-accordion-small-top-to-text-spacious:12px;--spectrum-accordion-top-to-text-regular-medium:9px;--spectrum-accordion-top-to-text-spacious-medium:14px;--spectrum-accordion-top-to-text-compact-large:7px;--spectrum-accordion-top-to-text-regular-large:12px;--spectrum-accordion-top-to-text-spacious-large:14px;--spectrum-accordion-top-to-text-compact-extra-large:7px;--spectrum-accordion-top-to-text-regular-extra-large:12px;--spectrum-accordion-top-to-text-spacious-extra-large:14px;--spectrum-accordion-bottom-to-text-compact-small:4px;--spectrum-accordion-bottom-to-text-regular-small:9px;--spectrum-accordion-bottom-to-text-spacious-small:14px;--spectrum-accordion-bottom-to-text-compact-medium:8px;--spectrum-accordion-bottom-to-text-regular-medium:13px;--spectrum-accordion-bottom-to-text-spacious-medium:18px;--spectrum-accordion-bottom-to-text-compact-large:9px;--spectrum-accordion-bottom-to-text-regular-large:14px;--spectrum-accordion-bottom-to-text-spacious-large:19px;--spectrum-accordion-bottom-to-text-compact-extra-large:10px;--spectrum-accordion-bottom-to-text-regular-extra-large:15px;--spectrum-accordion-bottom-to-text-spacious-extra-large:21px;--spectrum-accordion-minimum-width:250px;--spectrum-accordion-content-area-top-to-content:10px;--spectrum-accordion-content-area-bottom-to-content:20px;--spectrum-color-handle-size:20px;--spectrum-color-handle-size-key-focus:40px;--spectrum-table-column-header-row-top-to-text-small:10px;--spectrum-table-column-header-row-top-to-text-medium:9px;--spectrum-table-column-header-row-top-to-text-large:13px;--spectrum-table-column-header-row-top-to-text-extra-large:16px;--spectrum-table-column-header-row-bottom-to-text-small:11px;--spectrum-table-column-header-row-bottom-to-text-medium:10px;--spectrum-table-column-header-row-bottom-to-text-large:13px;--spectrum-table-column-header-row-bottom-to-text-extra-large:17px;--spectrum-table-row-height-small-regular:40px;--spectrum-table-row-height-medium-regular:50px;--spectrum-table-row-height-large-regular:60px;--spectrum-table-row-height-extra-large-regular:70px;--spectrum-table-row-height-small-spacious:50px;--spectrum-table-row-height-medium-spacious:60px;--spectrum-table-row-height-large-spacious:70px;--spectrum-table-row-height-extra-large-spacious:80px;--spectrum-table-row-top-to-text-small-regular:10px;--spectrum-table-row-top-to-text-medium-regular:14px;--spectrum-table-row-top-to-text-large-regular:18px;--spectrum-table-row-top-to-text-extra-large-regular:21px;--spectrum-table-row-bottom-to-text-small-regular:11px;--spectrum-table-row-bottom-to-text-medium-regular:15px;--spectrum-table-row-bottom-to-text-large-regular:18px;--spectrum-table-row-bottom-to-text-extra-large-regular:22px;--spectrum-table-row-top-to-text-small-spacious:15px;--spectrum-table-row-top-to-text-medium-spacious:18px;--spectrum-table-row-top-to-text-large-spacious:23px;--spectrum-table-row-top-to-text-extra-large-spacious:26px;--spectrum-table-row-bottom-to-text-small-spacious:16px;--spectrum-table-row-bottom-to-text-medium-spacious:18px;--spectrum-table-row-bottom-to-text-large-spacious:23px;--spectrum-table-row-bottom-to-text-extra-large-spacious:27px;--spectrum-table-checkbox-to-text:30px;--spectrum-table-header-row-checkbox-to-top-small:14px;--spectrum-table-header-row-checkbox-to-top-medium:13px;--spectrum-table-header-row-checkbox-to-top-large:17px;--spectrum-table-header-row-checkbox-to-top-extra-large:21px;--spectrum-table-row-checkbox-to-top-small-compact:9px;--spectrum-table-row-checkbox-to-top-small-regular:14px;--spectrum-table-row-checkbox-to-top-small-spacious:19px;--spectrum-table-row-checkbox-to-top-medium-compact:13px;--spectrum-table-row-checkbox-to-top-medium-regular:18px;--spectrum-table-row-checkbox-to-top-medium-spacious:23px;--spectrum-table-row-checkbox-to-top-large-compact:17px;--spectrum-table-row-checkbox-to-top-large-regular:22px;--spectrum-table-row-checkbox-to-top-large-spacious:27px;--spectrum-table-row-checkbox-to-top-extra-large-compact:21px;--spectrum-table-row-checkbox-to-top-extra-large-regular:26px;--spectrum-table-row-checkbox-to-top-extra-large-spacious:31px;--spectrum-table-section-header-row-height-small:30px;--spectrum-table-section-header-row-height-medium:40px;--spectrum-table-section-header-row-height-large:50px;--spectrum-table-section-header-row-height-extra-large:60px;--spectrum-table-thumbnail-to-top-minimum-small-compact:5px;--spectrum-table-thumbnail-to-top-minimum-medium-compact:6px;--spectrum-table-thumbnail-to-top-minimum-large-compact:9px;--spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px;--spectrum-table-thumbnail-to-top-minimum-small-regular:6px;--spectrum-table-thumbnail-to-top-minimum-medium-regular:9px;--spectrum-table-thumbnail-to-top-minimum-large-regular:10px;--spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px;--spectrum-table-thumbnail-to-top-minimum-small-spacious:9px;--spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px;--spectrum-table-thumbnail-to-top-minimum-large-spacious:10px;--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px;--spectrum-tab-item-to-tab-item-horizontal-small:27px;--spectrum-tab-item-to-tab-item-horizontal-medium:30px;--spectrum-tab-item-to-tab-item-horizontal-large:33px;--spectrum-tab-item-to-tab-item-horizontal-extra-large:36px;--spectrum-tab-item-to-tab-item-vertical-small:5px;--spectrum-tab-item-to-tab-item-vertical-medium:5px;--spectrum-tab-item-to-tab-item-vertical-large:6px;--spectrum-tab-item-to-tab-item-vertical-extra-large:6px;--spectrum-tab-item-start-to-edge-small:13px;--spectrum-tab-item-start-to-edge-medium:15px;--spectrum-tab-item-start-to-edge-large:17px;--spectrum-tab-item-start-to-edge-extra-large:19px;--spectrum-tab-item-top-to-text-small:14px;--spectrum-tab-item-bottom-to-text-small:15px;--spectrum-tab-item-top-to-text-medium:18px;--spectrum-tab-item-bottom-to-text-medium:19px;--spectrum-tab-item-top-to-text-large:22px;--spectrum-tab-item-bottom-to-text-large:22px;--spectrum-tab-item-top-to-text-extra-large:25px;--spectrum-tab-item-bottom-to-text-extra-large:25px;--spectrum-tab-item-top-to-text-compact-small:5px;--spectrum-tab-item-bottom-to-text-compact-small:6px;--spectrum-tab-item-top-to-text-compact-medium:9px;--spectrum-tab-item-bottom-to-text-compact-medium:10px;--spectrum-tab-item-top-to-text-compact-large:12px;--spectrum-tab-item-bottom-to-text-compact-large:14px;--spectrum-tab-item-top-to-text-compact-extra-large:15px;--spectrum-tab-item-bottom-to-text-compact-extra-large:17px;--spectrum-tab-item-top-to-workflow-icon-small:15px;--spectrum-tab-item-top-to-workflow-icon-medium:19px;--spectrum-tab-item-top-to-workflow-icon-large:23px;--spectrum-tab-item-top-to-workflow-icon-extra-large:26px;--spectrum-tab-item-top-to-workflow-icon-compact-small:5px;--spectrum-tab-item-top-to-workflow-icon-compact-medium:9px;--spectrum-tab-item-top-to-workflow-icon-compact-large:13px;--spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px;--spectrum-tab-item-focus-indicator-gap-small:9px;--spectrum-tab-item-focus-indicator-gap-medium:10px;--spectrum-tab-item-focus-indicator-gap-large:11px;--spectrum-tab-item-focus-indicator-gap-extra-large:12px;--spectrum-side-navigation-width:240px;--spectrum-side-navigation-minimum-width:200px;--spectrum-side-navigation-maximum-width:300px;--spectrum-side-navigation-second-level-edge-to-text:30px;--spectrum-side-navigation-third-level-edge-to-text:45px;--spectrum-side-navigation-with-icon-second-level-edge-to-text:62px;--spectrum-side-navigation-with-icon-third-level-edge-to-text:77px;--spectrum-side-navigation-item-to-item:5px;--spectrum-side-navigation-item-to-header:30px;--spectrum-side-navigation-header-to-item:10px;--spectrum-side-navigation-bottom-to-text:10px;--spectrum-tray-top-to-content-area:5px;--spectrum-accordion-top-to-text-spacious-small:12px;--spectrum-text-to-visual-50:8px;--spectrum-text-to-visual-75:9px;--spectrum-text-to-visual-100:10px;--spectrum-text-to-visual-200:11px;--spectrum-text-to-visual-300:13px;--spectrum-text-to-control-75:11px;--spectrum-text-to-control-100:13px;--spectrum-text-to-control-200:14px;--spectrum-text-to-control-300:16px;--spectrum-component-height-50:26px;--spectrum-component-height-75:30px;--spectrum-component-height-100:40px;--spectrum-component-height-200:50px;--spectrum-component-height-300:60px;--spectrum-component-height-400:70px;--spectrum-component-height-500:80px;--spectrum-component-pill-edge-to-visual-75:13px;--spectrum-component-pill-edge-to-visual-100:17px;--spectrum-component-pill-edge-to-visual-200:22px;--spectrum-component-pill-edge-to-visual-300:27px;--spectrum-component-pill-edge-to-visual-only-75:5px;--spectrum-component-pill-edge-to-visual-only-100:9px;--spectrum-component-pill-edge-to-visual-only-200:13px;--spectrum-component-pill-edge-to-visual-only-300:16px;--spectrum-component-pill-edge-to-text-75:15px;--spectrum-component-pill-edge-to-text-100:20px;--spectrum-component-pill-edge-to-text-200:25px;--spectrum-component-pill-edge-to-text-300:30px;--spectrum-component-edge-to-visual-50:7px;--spectrum-component-edge-to-visual-75:9px;--spectrum-component-edge-to-visual-100:12px;--spectrum-component-edge-to-visual-200:16px;--spectrum-component-edge-to-visual-300:19px;--spectrum-component-edge-to-visual-only-50:4px;--spectrum-component-edge-to-visual-only-75:5px;--spectrum-component-edge-to-visual-only-100:9px;--spectrum-component-edge-to-visual-only-200:13px;--spectrum-component-edge-to-visual-only-300:16px;--spectrum-component-edge-to-text-50:10px;--spectrum-component-edge-to-text-75:11px;--spectrum-component-edge-to-text-100:15px;--spectrum-component-edge-to-text-200:19px;--spectrum-component-edge-to-text-300:22px;--spectrum-component-top-to-workflow-icon-50:4px;--spectrum-component-top-to-workflow-icon-75:5px;--spectrum-component-top-to-workflow-icon-100:9px;--spectrum-component-top-to-workflow-icon-200:13px;--spectrum-component-top-to-workflow-icon-300:16px;--spectrum-component-top-to-text-50:4px;--spectrum-component-top-to-text-75:5px;--spectrum-component-top-to-text-100:8px;--spectrum-component-top-to-text-200:12px;--spectrum-component-top-to-text-300:15px;--spectrum-component-bottom-to-text-50:6px;--spectrum-component-bottom-to-text-75:6px;--spectrum-component-bottom-to-text-100:11px;--spectrum-component-bottom-to-text-200:14px;--spectrum-component-bottom-to-text-300:18px;--spectrum-component-to-menu-small:7px;--spectrum-component-to-menu-medium:8px;--spectrum-component-to-menu-large:9px;--spectrum-component-to-menu-extra-large:10px;--spectrum-field-edge-to-disclosure-icon-75:9px;--spectrum-field-edge-to-disclosure-icon-100:13px;--spectrum-field-edge-to-disclosure-icon-200:17px;--spectrum-field-edge-to-disclosure-icon-300:22px;--spectrum-field-end-edge-to-disclosure-icon-75:9px;--spectrum-field-end-edge-to-disclosure-icon-100:13px;--spectrum-field-end-edge-to-disclosure-icon-200:17px;--spectrum-field-end-edge-to-disclosure-icon-300:22px;--spectrum-field-top-to-disclosure-icon-75:9px;--spectrum-field-top-to-disclosure-icon-100:13px;--spectrum-field-top-to-disclosure-icon-200:17px;--spectrum-field-top-to-disclosure-icon-300:22px;--spectrum-field-top-to-alert-icon-small:5px;--spectrum-field-top-to-alert-icon-medium:9px;--spectrum-field-top-to-alert-icon-large:13px;--spectrum-field-top-to-alert-icon-extra-large:16px;--spectrum-field-top-to-validation-icon-small:9px;--spectrum-field-top-to-validation-icon-medium:13px;--spectrum-field-top-to-validation-icon-large:17px;--spectrum-field-top-to-validation-icon-extra-large:22px;--spectrum-field-top-to-progress-circle-small:7px;--spectrum-field-top-to-progress-circle-medium:12px;--spectrum-field-top-to-progress-circle-large:17px;--spectrum-field-top-to-progress-circle-extra-large:22px;--spectrum-field-edge-to-alert-icon-small:11px;--spectrum-field-edge-to-alert-icon-medium:15px;--spectrum-field-edge-to-alert-icon-large:19px;--spectrum-field-edge-to-alert-icon-extra-large:22px;--spectrum-field-edge-to-validation-icon-small:11px;--spectrum-field-edge-to-validation-icon-medium:15px;--spectrum-field-edge-to-validation-icon-large:19px;--spectrum-field-edge-to-validation-icon-extra-large:22px;--spectrum-field-text-to-alert-icon-small:10px;--spectrum-field-text-to-alert-icon-medium:15px;--spectrum-field-text-to-alert-icon-large:19px;--spectrum-field-text-to-alert-icon-extra-large:22px;--spectrum-field-text-to-validation-icon-small:10px;--spectrum-field-text-to-validation-icon-medium:15px;--spectrum-field-text-to-validation-icon-large:19px;--spectrum-field-text-to-validation-icon-extra-large:22px;--spectrum-field-width:240px;--spectrum-character-count-to-field-quiet-small:-4px;--spectrum-character-count-to-field-quiet-medium:-4px;--spectrum-character-count-to-field-quiet-large:-4px;--spectrum-character-count-to-field-quiet-extra-large:-5px;--spectrum-side-label-character-count-to-field:15px;--spectrum-side-label-character-count-top-margin-small:5px;--spectrum-side-label-character-count-top-margin-medium:10px;--spectrum-side-label-character-count-top-margin-large:14px;--spectrum-side-label-character-count-top-margin-extra-large:18px;--spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px;--spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px;--spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px;--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px;--spectrum-navigational-indicator-top-to-back-icon-small:7px;--spectrum-navigational-indicator-top-to-back-icon-medium:12px;--spectrum-navigational-indicator-top-to-back-icon-large:16px;--spectrum-navigational-indicator-top-to-back-icon-extra-large:19px;--spectrum-color-control-track-width:30px;--spectrum-font-size-50:13px;--spectrum-font-size-75:15px;--spectrum-font-size-100:17px;--spectrum-font-size-200:19px;--spectrum-font-size-300:22px;--spectrum-font-size-400:24px;--spectrum-font-size-500:27px;--spectrum-font-size-600:31px;--spectrum-font-size-700:34px;--spectrum-font-size-800:39px;--spectrum-font-size-900:44px;--spectrum-font-size-1000:49px;--spectrum-font-size-1100:55px;--spectrum-font-size-1200:62px;--spectrum-font-size-1300:70px;--spectrum-checkbox-control-size-small:18px;--spectrum-checkbox-control-size-medium:20px;--spectrum-checkbox-control-size-large:22px;--spectrum-checkbox-control-size-extra-large:26px;--spectrum-checkbox-top-to-control-small:6px;--spectrum-checkbox-top-to-control-medium:10px;--spectrum-checkbox-top-to-control-large:14px;--spectrum-checkbox-top-to-control-extra-large:17px;--spectrum-switch-control-width-small:32px;--spectrum-switch-control-width-medium:36px;--spectrum-switch-control-width-large:41px;--spectrum-switch-control-width-extra-large:46px;--spectrum-switch-control-height-small:18px;--spectrum-switch-control-height-medium:20px;--spectrum-switch-control-height-large:22px;--spectrum-switch-control-height-extra-large:26px;--spectrum-switch-top-to-control-small:6px;--spectrum-switch-top-to-control-medium:10px;--spectrum-switch-top-to-control-large:14px;--spectrum-switch-top-to-control-extra-large:17px;--spectrum-radio-button-control-size-small:18px;--spectrum-radio-button-control-size-medium:20px;--spectrum-radio-button-control-size-large:22px;--spectrum-radio-button-control-size-extra-large:26px;--spectrum-radio-button-top-to-control-small:6px;--spectrum-radio-button-top-to-control-medium:10px;--spectrum-radio-button-top-to-control-large:14px;--spectrum-radio-button-top-to-control-extra-large:17px;--spectrum-slider-control-height-small:22px;--spectrum-slider-control-height-medium:24px;--spectrum-slider-control-height-large:28px;--spectrum-slider-control-height-extra-large:30px;--spectrum-slider-handle-size-small:22px;--spectrum-slider-handle-size-medium:24px;--spectrum-slider-handle-size-large:28px;--spectrum-slider-handle-size-extra-large:30px;--spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200);--spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200);--spectrum-slider-bottom-to-handle-small:4px;--spectrum-slider-bottom-to-handle-medium:8px;--spectrum-slider-bottom-to-handle-large:12px;--spectrum-slider-bottom-to-handle-extra-large:15px;--spectrum-corner-radius-100:8px;--spectrum-corner-radius-200:16px;--spectrum-drop-shadow-y:4px;--spectrum-drop-shadow-blur:16px;--spectrum-slider-tick-mark-height:13px;--spectrum-slider-ramp-track-height:20px;--spectrum-colorwheel-path:\"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0\";--spectrum-colorwheel-path-borders:\"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0\";--spectrum-colorwheel-colorarea-container-size:182px;--spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary);--spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200);--spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px;--spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px;--spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px;--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px;--spectrum-menu-item-checkmark-height-small:12px;--spectrum-menu-item-checkmark-height-medium:14px;--spectrum-menu-item-checkmark-height-large:16px;--spectrum-menu-item-checkmark-height-extra-large:16px;--spectrum-menu-item-checkmark-width-small:12px;--spectrum-menu-item-checkmark-width-medium:14px;--spectrum-menu-item-checkmark-width-large:16px;--spectrum-menu-item-checkmark-width-extra-large:16px;--spectrum-rating-icon-spacing:var(--spectrum-spacing-100);--spectrum-button-top-to-text-small:6px;--spectrum-button-bottom-to-text-small:5px;--spectrum-button-top-to-text-medium:9px;--spectrum-button-bottom-to-text-medium:10px;--spectrum-button-top-to-text-large:12px;--spectrum-button-bottom-to-text-large:13px;--spectrum-button-top-to-text-extra-large:16px;--spectrum-button-bottom-to-text-extra-large:17px;--spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200);--spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200);--spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200);--spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200);--spectrum-alert-dialog-padding:var(--spectrum-spacing-400);--spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600);--spectrum-coach-indicator-gap:8px;--spectrum-coach-indicator-ring-diameter:20px;--spectrum-coach-indicator-quiet-ring-diameter:10px;--spectrum-coachmark-buttongroup-display:none;--spectrum-coachmark-buttongroup-mobile-display:flex;--spectrum-coachmark-menu-display:none;--spectrum-coachmark-menu-mobile-display:inline-flex;--spectrum-well-padding:20px;--spectrum-well-margin-top:5px;--spectrum-well-min-width:300px;--spectrum-well-border-radius:5px;--spectrum-workflow-icon-size-xxl:40px;--spectrum-workflow-icon-size-xxs:15px;--spectrum-treeview-item-indentation-medium:20px;--spectrum-treeview-item-indentation-small:15px;--spectrum-treeview-item-indentation-large:25px;--spectrum-treeview-item-indentation-extra-large:30px;--spectrum-treeview-indicator-inset-block-start:6px;--spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px;--spectrum-dialog-confirm-entry-animation-distance:25px;--spectrum-dialog-confirm-hero-height:160px;--spectrum-dialog-confirm-border-radius:8px;--spectrum-dialog-confirm-title-text-size:19px;--spectrum-dialog-confirm-description-text-size:15px;--spectrum-dialog-confirm-padding-grid:24px;--spectrum-datepicker-initial-width:160px;--spectrum-datepicker-generic-padding:15px;--spectrum-datepicker-dash-line-height:30px;--spectrum-datepicker-width-quiet-first:90px;--spectrum-datepicker-width-quiet-second:20px;--spectrum-datepicker-datetime-width-first:45px;--spectrum-datepicker-invalid-icon-to-button:10px;--spectrum-datepicker-invalid-icon-to-button-quiet:9px;--spectrum-datepicker-input-datetime-width:30px;--spectrum-pagination-textfield-width:60px;--spectrum-pagination-item-inline-spacing:6px;--spectrum-dial-border-radius:15px;--spectrum-dial-handle-position:10px;--spectrum-dial-handle-block-margin:20px;--spectrum-dial-handle-inline-margin:20px;--spectrum-dial-controls-margin:10px;--spectrum-dial-label-gap-y:6px;--spectrum-dial-label-container-top-to-text:5px;--spectrum-assetcard-focus-ring-border-radius:12px;--spectrum-assetcard-selectionindicator-margin:15px;--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);--spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);--spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);--spectrum-tooltip-animation-distance:5px;--spectrum-ui-icon-medium-display:none;--spectrum-ui-icon-large-display:block;--spectrum-corner-radius-75:4px;--spectrum-drop-shadow-x:0px}:root,:host{--spectrum-global-alias-appframe-border-size:1px;--swc-scale-factor:1.25}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|