@spectrum-web-components/styles 0.22.3-react.32 → 0.22.3-react.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/package.json +8 -8
  2. package/tokens/dark-vars.css +38 -34
  3. package/tokens/darkest-vars.css +38 -34
  4. package/tokens/express/global-vars.css +24 -6
  5. package/tokens/express/large-vars.css +8 -8
  6. package/tokens/express/medium-vars.css +8 -8
  7. package/tokens/global-vars.css +550 -204
  8. package/tokens/large-vars.css +158 -107
  9. package/tokens/light-vars.css +38 -34
  10. package/tokens/medium-vars.css +156 -105
  11. package/tokens/spectrum/custom-vars.css +44 -23
  12. package/tokens/spectrum/global-vars.css +22 -6
  13. package/tokens/spectrum/large-vars.css +8 -16
  14. package/tokens/spectrum/medium-vars.css +8 -16
package/tokens/global-vars.css CHANGED
@@ -12,31 +12,31 @@ governing permissions and limitations under the License.
12
12
 
13
13
  :host,
14
14
  :root {
15
- --spectrum-transparent-white-100: rgba(255, 255, 255, 0);
16
- --spectrum-transparent-white-200: rgba(255, 255, 255, 0.1);
17
- --spectrum-transparent-white-300: rgba(255, 255, 255, 0.25);
18
- --spectrum-transparent-white-400: rgba(255, 255, 255, 0.4);
19
- --spectrum-transparent-white-500: rgba(255, 255, 255, 0.55);
20
- --spectrum-transparent-white-600: rgba(255, 255, 255, 0.7);
21
- --spectrum-transparent-white-700: rgba(255, 255, 255, 0.8);
22
- --spectrum-transparent-white-800: rgba(255, 255, 255, 0.9);
23
- --spectrum-transparent-white-900: rgb(255, 255, 255);
24
- --spectrum-transparent-black-100: rgba(0, 0, 0, 0);
25
- --spectrum-transparent-black-200: rgba(0, 0, 0, 0.1);
26
- --spectrum-transparent-black-300: rgba(0, 0, 0, 0.25);
27
- --spectrum-transparent-black-400: rgba(0, 0, 0, 0.4);
28
- --spectrum-transparent-black-500: rgba(0, 0, 0, 0.55);
29
- --spectrum-transparent-black-600: rgba(0, 0, 0, 0.7);
30
- --spectrum-transparent-black-700: rgba(0, 0, 0, 0.8);
31
- --spectrum-transparent-black-800: rgba(0, 0, 0, 0.9);
32
- --spectrum-transparent-black-900: rgb(0, 0, 0);
33
15
  --spectrum-focus-indicator-color: var(--spectrum-blue-800);
34
16
  --spectrum-static-white-focus-indicator-color: var(--spectrum-white);
35
17
  --spectrum-static-black-focus-indicator-color: var(--spectrum-black);
36
18
  --spectrum-overlay-color: var(--spectrum-black);
19
+ --spectrum-opacity-disabled: 0.3;
20
+ --spectrum-disabled-background-color: var(--spectrum-gray-200);
21
+ --spectrum-disabled-static-white-background-color: var(
22
+ --spectrum-transparent-white-200
23
+ );
24
+ --spectrum-disabled-static-black-background-color: var(
25
+ --spectrum-transparent-black-200
26
+ );
27
+ --spectrum-background-opacity-default: 0;
28
+ --spectrum-background-opacity-hover: 0.1;
29
+ --spectrum-background-opacity-down: 0.1;
30
+ --spectrum-background-opacity-key-focus: 0.1;
37
31
  --spectrum-neutral-content-color-default: var(--spectrum-gray-800);
38
32
  --spectrum-neutral-content-color-hover: var(--spectrum-gray-900);
39
33
  --spectrum-neutral-content-color-down: var(--spectrum-gray-900);
34
+ --spectrum-neutral-content-color-focus-hover: var(
35
+ --spectrum-neutral-content-color-down
36
+ );
37
+ --spectrum-neutral-content-color-focus: var(
38
+ --spectrum-neutral-content-color-down
39
+ );
40
40
  --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900);
41
41
  --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700);
42
42
  --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800);
@@ -67,13 +67,6 @@ governing permissions and limitations under the License.
67
67
  --spectrum-disabled-static-black-content-color: var(
68
68
  --spectrum-transparent-black-500
69
69
  );
70
- --spectrum-disabled-background-color: var(--spectrum-gray-200);
71
- --spectrum-disabled-static-white-background-color: var(
72
- --spectrum-transparent-white-200
73
- );
74
- --spectrum-disabled-static-black-background-color: var(
75
- --spectrum-transparent-black-200
76
- );
77
70
  --spectrum-disabled-border-color: var(--spectrum-gray-300);
78
71
  --spectrum-disabled-static-white-border-color: var(
79
72
  --spectrum-transparent-white-300
@@ -81,19 +74,114 @@ governing permissions and limitations under the License.
81
74
  --spectrum-disabled-static-black-border-color: var(
82
75
  --spectrum-transparent-black-300
83
76
  );
84
- --spectrum-opacity-disabled: 0.3;
85
- --spectrum-background-opacity-default: 0;
86
- --spectrum-background-opacity-hover: 0.1;
87
- --spectrum-background-opacity-down: 0.1;
88
- --spectrum-background-opacity-key-focus: 0.1;
89
77
  --spectrum-negative-border-color-default: var(
90
78
  --spectrum-negative-color-900
91
79
  );
92
80
  --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000);
93
81
  --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100);
82
+ --spectrum-negative-border-color-focus-hover: var(
83
+ --spectrum-negative-border-color-down
84
+ );
85
+ --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000);
94
86
  --spectrum-negative-border-color-key-focus: var(
95
87
  --spectrum-negative-color-1000
96
88
  );
89
+ --spectrum-swatch-border-color: var(--spectrum-gray-900);
90
+ --spectrum-swatch-border-opacity: 0.51;
91
+ --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
92
+ --spectrum-swatch-disabled-icon-border-opacity: 0.51;
93
+ --spectrum-thumbnail-border-color: var(--spectrum-gray-800);
94
+ --spectrum-thumbnail-border-opacity: 0.1;
95
+ --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled);
96
+ --spectrum-opacity-checkerboard-square-light: var(--spectrum-white);
97
+ --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled);
98
+ --spectrum-color-area-border-color: var(--spectrum-gray-900);
99
+ --spectrum-color-area-border-opacity: 0.1;
100
+ --spectrum-color-slider-border-color: var(--spectrum-gray-900);
101
+ --spectrum-color-slider-border-opacity: 0.1;
102
+ --spectrum-white: rgb(255, 255, 255);
103
+ --spectrum-transparent-white-100: rgba(255, 255, 255, 0);
104
+ --spectrum-transparent-white-200: rgba(255, 255, 255, 0.1);
105
+ --spectrum-transparent-white-300: rgba(255, 255, 255, 0.25);
106
+ --spectrum-transparent-white-400: rgba(255, 255, 255, 0.4);
107
+ --spectrum-transparent-white-500: rgba(255, 255, 255, 0.55);
108
+ --spectrum-transparent-white-600: rgba(255, 255, 255, 0.7);
109
+ --spectrum-transparent-white-700: rgba(255, 255, 255, 0.8);
110
+ --spectrum-transparent-white-800: rgba(255, 255, 255, 0.9);
111
+ --spectrum-transparent-white-900: rgb(255, 255, 255);
112
+ --spectrum-black: rgb(0, 0, 0);
113
+ --spectrum-transparent-black-100: rgba(0, 0, 0, 0);
114
+ --spectrum-transparent-black-200: rgba(0, 0, 0, 0.1);
115
+ --spectrum-transparent-black-300: rgba(0, 0, 0, 0.25);
116
+ --spectrum-transparent-black-400: rgba(0, 0, 0, 0.4);
117
+ --spectrum-transparent-black-500: rgba(0, 0, 0, 0.55);
118
+ --spectrum-transparent-black-600: rgba(0, 0, 0, 0.7);
119
+ --spectrum-transparent-black-700: rgba(0, 0, 0, 0.8);
120
+ --spectrum-transparent-black-800: rgba(0, 0, 0, 0.9);
121
+ --spectrum-transparent-black-900: rgb(0, 0, 0);
122
+ --spectrum-radio-button-selection-indicator: 4px;
123
+ --spectrum-field-label-to-component: 0px;
124
+ --spectrum-help-text-to-component: 0px;
125
+ --spectrum-button-minimum-width-multiplier: 2.25;
126
+ --spectrum-divider-thickness-small: 1px;
127
+ --spectrum-divider-thickness-medium: 2px;
128
+ --spectrum-divider-thickness-large: 4px;
129
+ --spectrum-swatch-rectangle-width-multiplier: 2;
130
+ --spectrum-swatch-slash-thickness-extra-small: 2px;
131
+ --spectrum-swatch-slash-thickness-small: 3px;
132
+ --spectrum-swatch-slash-thickness-medium: 4px;
133
+ --spectrum-swatch-slash-thickness-large: 5px;
134
+ --spectrum-progress-bar-minimum-width: 48px;
135
+ --spectrum-progress-bar-maximum-width: 768px;
136
+ --spectrum-meter-minimum-width: 48px;
137
+ --spectrum-meter-maximum-width: 768px;
138
+ --spectrum-in-line-alert-minimum-width: 240px;
139
+ --spectrum-popover-tip-width: 16px;
140
+ --spectrum-popover-tip-height: 8px;
141
+ --spectrum-menu-item-label-to-description: 1px;
142
+ --spectrum-picker-minimum-width-multiplier: 2;
143
+ --spectrum-text-field-minimum-width-multiplier: 1.5;
144
+ --spectrum-combo-box-minimum-width-multiplier: 2.5;
145
+ --spectrum-combo-box-quiet-minimum-width-multiplier: 2;
146
+ --spectrum-combo-box-visual-to-field-button-quiet: 0;
147
+ --spectrum-alert-dialog-minimum-width: 288px;
148
+ --spectrum-alert-dialog-maximum-width: 480px;
149
+ --spectrum-contextual-help-minimum-width: 268px;
150
+ --spectrum-breadcrumbs-height: var(--spectrum-component-height-300);
151
+ --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200);
152
+ --spectrum-breadcrumbs-end-edge-to-text: 0px;
153
+ --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px;
154
+ --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px;
155
+ --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px;
156
+ --spectrum-color-area-border-width: var(--spectrum-border-width-100);
157
+ --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100);
158
+ --spectrum-color-wheel-color-area-margin: 12px;
159
+ --spectrum-color-slider-minimum-length: 200px;
160
+ --spectrum-color-slider-border-width: 1px;
161
+ --spectrum-color-slider-border-rounding: 4px;
162
+ --spectrum-android-elevation: 2dp;
163
+ --spectrum-spacing-50: 2px;
164
+ --spectrum-spacing-75: 4px;
165
+ --spectrum-spacing-100: 8px;
166
+ --spectrum-spacing-200: 12px;
167
+ --spectrum-spacing-300: 16px;
168
+ --spectrum-spacing-400: 24px;
169
+ --spectrum-spacing-500: 32px;
170
+ --spectrum-spacing-600: 40px;
171
+ --spectrum-spacing-700: 48px;
172
+ --spectrum-spacing-800: 64px;
173
+ --spectrum-spacing-900: 80px;
174
+ --spectrum-spacing-1000: 96px;
175
+ --spectrum-focus-indicator-thickness: 2px;
176
+ --spectrum-focus-indicator-gap: 2px;
177
+ --spectrum-border-width-200: 2px;
178
+ --spectrum-border-width-400: 4px;
179
+ --spectrum-field-edge-to-text-quiet: 0px;
180
+ --spectrum-field-edge-to-border-quiet: 0px;
181
+ --spectrum-field-edge-to-alert-icon-quiet: 0px;
182
+ --spectrum-field-edge-to-validation-icon-quiet: 0px;
183
+ --spectrum-text-underline-thickness: 1px;
184
+ --spectrum-text-underline-gap: 1px;
97
185
  --spectrum-informative-color-100: var(--spectrum-blue-100);
98
186
  --spectrum-informative-color-200: var(--spectrum-blue-200);
99
187
  --spectrum-informative-color-300: var(--spectrum-blue-300);
@@ -150,71 +238,217 @@ governing permissions and limitations under the License.
150
238
  --spectrum-positive-color-1200: var(--spectrum-green-1200);
151
239
  --spectrum-positive-color-1300: var(--spectrum-green-1300);
152
240
  --spectrum-positive-color-1400: var(--spectrum-green-1400);
153
- --spectrum-black: rgb(0, 0, 0);
154
- --spectrum-white: rgb(255, 255, 255);
155
- --spectrum-swatch-border-color: var(--spectrum-gray-900);
156
- --spectrum-swatch-border-opacity: 0.51;
157
- --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
158
- --spectrum-swatch-disabled-icon-border-opacity: 0.51;
159
- --spectrum-alert-dialog-minimum-width: 288px;
160
- --spectrum-alert-dialog-maximum-width: 480px;
161
- --spectrum-button-minimum-width-multiplier: 2.25;
162
- --spectrum-divider-thickness-small: 1px;
163
- --spectrum-divider-thickness-medium: 2px;
164
- --spectrum-divider-thickness-large: 4px;
165
- --spectrum-field-label-to-component: 0px;
166
- --spectrum-menu-item-label-to-description: 1px;
167
- --spectrum-meter-minimum-width: 48px;
168
- --spectrum-meter-maximum-width: 768px;
169
- --spectrum-swatch-rectangle-width-multiplier: 2;
170
- --spectrum-swatch-slash-thickness-extra-small: 2px;
171
- --spectrum-swatch-slash-thickness-small: 3px;
172
- --spectrum-swatch-slash-thickness-medium: 4px;
173
- --spectrum-swatch-slash-thickness-large: 5px;
174
- --spectrum-progress-bar-minimum-width: 48px;
175
- --spectrum-progress-bar-maximum-width: 768px;
176
- --spectrum-radio-button-selection-indicator: 4px;
177
- --spectrum-help-text-to-component: 0px;
178
- --spectrum-popover-tip-width: 16px;
179
- --spectrum-popover-tip-height: 8px;
180
- --spectrum-sans-serif-heading-light: var(--spectrum-font-light-default);
181
- --spectrum-serif-heading-light: var(--spectrum-font-regular-default);
182
- --spectrum-heading-heavy: var(--spectrum-font-black-default);
183
- --spectrum-heading-light-strong: var(--spectrum-font-bold-default);
184
- --spectrum-heading-strong: var(--spectrum-font-black-default);
185
- --spectrum-heading-heavy-strong: var(--spectrum-font-black-default);
186
- --spectrum-sans-serif-heading-light-emphasized: var(
187
- --spectrum-font-light-italic-default
188
- );
189
- --spectrum-serif-heading-light-emphasized: var(
190
- --spectrum-font-italic-default
191
- );
192
- --spectrum-heading-heavy-emphasized: var(
193
- --spectrum-font-black-italic-default
194
- );
195
- --spectrum-heading-light-strong-emphasized: var(
196
- --spectrum-font-bold-italic-default
197
- );
198
- --spectrum-heading-strong-emphasized: var(
199
- --spectrum-font-black-italic-default
200
- );
201
- --spectrum-heading-heavy-strong-emphasized: var(
202
- --spectrum-font-black-italic-default
203
- );
204
- --spectrum-cjk-heading-light: var(--spectrum-font-light-cjk);
205
- --spectrum-cjk-heading-heavy: var(--spectrum-font-black-cjk);
206
- --spectrum-cjk-heading-light-strong: var(--spectrum-font-extra-bold-cjk);
207
- --spectrum-cjk-heading-strong: var(--spectrum-font-black-cjk);
208
- --spectrum-cjk-heading-heavy-strong: var(--spectrum-font-black-cjk);
209
- --spectrum-cjk-heading-light-emphasized: var(--spectrum-font-black-cjk);
210
- --spectrum-cjk-heading-emphasized: var(--spectrum-font-black-cjk);
211
- --spectrum-cjk-heading-heavy-emphasized: var(--spectrum-font-black-cjk);
212
- --spectrum-cjk-heading-light-strong-emphasized: var(
213
- --spectrum-font-extra-bold-cjk
214
- );
215
- --spectrum-cjk-heading-strong-emphasized: var(--spectrum-font-black-cjk);
216
- --spectrum-cjk-heading-heavy-strong-emphasized: var(
217
- --spectrum-font-black-cjk
241
+ --spectrum-font-family-default: var(--spectrum-font-family-sans-serif);
242
+ --spectrum-font-family-sans-serif: Adobe Clean;
243
+ --spectrum-font-family-serif: Adobe Clean Serif;
244
+ --spectrum-font-family-code: Source Code Pro;
245
+ --spectrum-font-family-cjk: Adobe Clean Han;
246
+ --spectrum-font-weight-light: light;
247
+ --spectrum-font-weight-regular: regular;
248
+ --spectrum-font-weight-medium: medium;
249
+ --spectrum-font-weight-bold: bold;
250
+ --spectrum-font-weight-extra-bold: extra-bold;
251
+ --spectrum-font-weight-black: black;
252
+ --spectrum-font-style-italic: italic;
253
+ --spectrum-font-style-default: normal;
254
+ --spectrum-line-height-100: 1.3;
255
+ --spectrum-line-height-200: 1.5;
256
+ --spectrum-line-height-cjk-100: 1.5;
257
+ --spectrum-line-height-cjk-200: 1.7;
258
+ --spectrum-letter-spacing-cjk: 0.05em;
259
+ --spectrum-heading-sans-serif-font-family: var(
260
+ --spectrum-font-family-sans-serif
261
+ );
262
+ --spectrum-heading-serif-font-family: var(--spectrum-font-family-serif);
263
+ --spectrum-heading-cjk-font-family: var(--spectrum-font-family-cjk);
264
+ --spectrum-heading-sans-serif-light-font-weight: var(
265
+ --spectrum-font-weight-light
266
+ );
267
+ --spectrum-heading-sans-serif-light-font-style: var(
268
+ --spectrum-font-style-default
269
+ );
270
+ --spectrum-heading-serif-light-font-weight: var(
271
+ --spectrum-font-weight-regular
272
+ );
273
+ --spectrum-heading-serif-light-font-style: var(
274
+ --spectrum-font-style-default
275
+ );
276
+ --spectrum-heading-cjk-light-font-weight: var(--spectrum-font-weight-light);
277
+ --spectrum-heading-cjk-light-font-style: var(--spectrum-font-style-default);
278
+ --spectrum-heading-sans-serif-font-style: var(
279
+ --spectrum-font-style-default
280
+ );
281
+ --spectrum-heading-serif-font-style: var(--spectrum-font-style-default);
282
+ --spectrum-heading-cjk-font-style: var(--spectrum-font-style-default);
283
+ --spectrum-heading-sans-serif-heavy-font-weight: var(
284
+ --spectrum-font-weight-black
285
+ );
286
+ --spectrum-heading-sans-serif-heavy-font-style: var(
287
+ --spectrum-font-style-default
288
+ );
289
+ --spectrum-heading-serif-heavy-font-weight: var(
290
+ --spectrum-font-weight-black
291
+ );
292
+ --spectrum-heading-serif-heavy-font-style: var(
293
+ --spectrum-font-style-default
294
+ );
295
+ --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-font-weight-black);
296
+ --spectrum-heading-cjk-heavy-font-style: var(--spectrum-font-style-default);
297
+ --spectrum-heading-sans-serif-light-strong-font-weight: var(
298
+ --spectrum-font-weight-bold
299
+ );
300
+ --spectrum-heading-sans-serif-light-strong-font-style: var(
301
+ --spectrum-font-style-default
302
+ );
303
+ --spectrum-heading-serif-light-strong-font-weight: var(
304
+ --spectrum-font-weight-bold
305
+ );
306
+ --spectrum-heading-serif-light-strong-font-style: var(
307
+ --spectrum-font-style-default
308
+ );
309
+ --spectrum-heading-cjk-light-strong-font-weight: var(
310
+ --spectrum-font-weight-extra-bold
311
+ );
312
+ --spectrum-heading-cjk-light-strong-font-style: var(
313
+ --spectrum-font-style-default
314
+ );
315
+ --spectrum-heading-sans-serif-strong-font-weight: var(
316
+ --spectrum-font-weight-black
317
+ );
318
+ --spectrum-heading-sans-serif-strong-font-style: var(
319
+ --spectrum-font-style-default
320
+ );
321
+ --spectrum-heading-serif-strong-font-weight: var(
322
+ --spectrum-font-weight-black
323
+ );
324
+ --spectrum-heading-serif-strong-font-style: var(
325
+ --spectrum-font-style-default
326
+ );
327
+ --spectrum-heading-cjk-strong-font-weight: var(
328
+ --spectrum-font-weight-black
329
+ );
330
+ --spectrum-heading-cjk-strong-font-style: var(
331
+ --spectrum-font-style-default
332
+ );
333
+ --spectrum-heading-sans-serif-heavy-strong-font-weight: var(
334
+ --spectrum-font-weight-black
335
+ );
336
+ --spectrum-heading-sans-serif-heavy-strong-font-style: var(
337
+ --spectrum-font-style-default
338
+ );
339
+ --spectrum-heading-serif-heavy-strong-font-weight: var(
340
+ --spectrum-font-weight-black
341
+ );
342
+ --spectrum-heading-serif-heavy-strong-font-style: var(
343
+ --spectrum-font-style-default
344
+ );
345
+ --spectrum-heading-cjk-heavy-strong-font-weight: var(
346
+ --spectrum-font-weight-black
347
+ );
348
+ --spectrum-heading-cjk-heavy-strong-font-style: var(
349
+ --spectrum-font-style-default
350
+ );
351
+ --spectrum-heading-sans-serif-light-emphasized-font-weight: var(
352
+ --spectrum-font-weight-light
353
+ );
354
+ --spectrum-heading-sans-serif-light-emphasized-font-style: var(
355
+ --spectrum-font-style-italic
356
+ );
357
+ --spectrum-heading-serif-light-emphasized-font-weight: var(
358
+ --spectrum-font-weight-regular
359
+ );
360
+ --spectrum-heading-serif-light-emphasized-font-style: var(
361
+ --spectrum-font-style-italic
362
+ );
363
+ --spectrum-heading-cjk-light-emphasized-font-weight: var(
364
+ --spectrum-font-weight-regular
365
+ );
366
+ --spectrum-heading-cjk-light-emphasized-font-style: var(
367
+ --spectrum-font-style-default
368
+ );
369
+ --spectrum-heading-sans-serif-emphasized-font-style: var(
370
+ --spectrum-font-style-italic
371
+ );
372
+ --spectrum-heading-serif-emphasized-font-style: var(
373
+ --spectrum-font-style-italic
374
+ );
375
+ --spectrum-heading-cjk-emphasized-font-weight: var(
376
+ --spectrum-font-weight-black
377
+ );
378
+ --spectrum-heading-cjk-emphasized-font-style: var(
379
+ --spectrum-font-style-default
380
+ );
381
+ --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var(
382
+ --spectrum-font-weight-black
383
+ );
384
+ --spectrum-heading-sans-serif-heavy-emphasized-font-style: var(
385
+ --spectrum-font-style-italic
386
+ );
387
+ --spectrum-heading-serif-heavy-emphasized-font-weight: var(
388
+ --spectrum-font-weight-black
389
+ );
390
+ --spectrum-heading-serif-heavy-emphasized-font-style: var(
391
+ --spectrum-font-style-italic
392
+ );
393
+ --spectrum-heading-cjk-heavy-emphasized-font-weight: var(
394
+ --spectrum-font-weight-black
395
+ );
396
+ --spectrum-heading-cjk-heavy-emphasized-font-style: var(
397
+ --spectrum-font-style-default
398
+ );
399
+ --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var(
400
+ --spectrum-font-weight-bold
401
+ );
402
+ --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var(
403
+ --spectrum-font-style-italic
404
+ );
405
+ --spectrum-heading-serif-light-strong-emphasized-font-weight: var(
406
+ --spectrum-font-weight-bold
407
+ );
408
+ --spectrum-heading-serif-light-strong-emphasized-font-style: var(
409
+ --spectrum-font-style-italic
410
+ );
411
+ --spectrum-heading-cjk-light-strong-emphasized-font-weight: var(
412
+ --spectrum-font-weight-extra-bold
413
+ );
414
+ --spectrum-heading-cjk-light-strong-emphasized-font-style: var(
415
+ --spectrum-font-style-default
416
+ );
417
+ --spectrum-heading-sans-serif-strong-emphasized-font-weight: var(
418
+ --spectrum-font-weight-black
419
+ );
420
+ --spectrum-heading-sans-serif-strong-emphasized-font-style: var(
421
+ --spectrum-font-style-italic
422
+ );
423
+ --spectrum-heading-serif-strong-emphasized-font-weight: var(
424
+ --spectrum-font-weight-black
425
+ );
426
+ --spectrum-heading-serif-strong-emphasized-font-style: var(
427
+ --spectrum-font-style-italic
428
+ );
429
+ --spectrum-heading-cjk-strong-emphasized-font-weight: var(
430
+ --spectrum-font-weight-black
431
+ );
432
+ --spectrum-heading-cjk-strong-emphasized-font-style: var(
433
+ --spectrum-font-style-default
434
+ );
435
+ --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var(
436
+ --spectrum-font-weight-black
437
+ );
438
+ --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var(
439
+ --spectrum-font-style-italic
440
+ );
441
+ --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var(
442
+ --spectrum-font-weight-black
443
+ );
444
+ --spectrum-heading-serif-heavy-strong-emphasized-font-style: var(
445
+ --spectrum-font-style-italic
446
+ );
447
+ --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var(
448
+ --spectrum-font-weight-black
449
+ );
450
+ --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var(
451
+ --spectrum-font-style-default
218
452
  );
219
453
  --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300);
220
454
  --spectrum-heading-size-xxl: var(--spectrum-font-size-1100);
@@ -225,17 +459,66 @@ governing permissions and limitations under the License.
225
459
  --spectrum-heading-size-xs: var(--spectrum-font-size-200);
226
460
  --spectrum-heading-size-xxs: var(--spectrum-font-size-100);
227
461
  --spectrum-heading-line-height: var(--spectrum-line-height-100);
228
- --spectrum-cjk-heading-line-height: var(--spectrum-cjk-line-height-100);
229
- --spectrum-heading-margin-top-multiplier: 0.8889;
462
+ --spectrum-heading-line-height-cjk: var(--spectrum-line-height-cjk-100);
463
+ --spectrum-heading-margin-top-multiplier: 0.88888889;
230
464
  --spectrum-heading-margin-bottom-multiplier: 0.25;
231
- --spectrum-body: var(--spectrum-font-regular-default);
232
- --spectrum-body-strong: var(--spectrum-font-bold-default);
233
- --spectrum-body-emphasized: var(--spectrum-font-italic-default);
234
- --spectrum-body-strong-emphasized: var(--spectrum-font-bold-italic-default);
235
- --spectrum-cjk-body: var(--spectrum-font-regular-cjk);
236
- --spectrum-cjk-body-strong: var(--spectrum-font-black-cjk);
237
- --spectrum-cjk-body-emphasized: var(--spectrum-font-extra-bold-cjk);
238
- --spectrum-cjk-body-strong-emphasized: var(--spectrum-font-black-cjk);
465
+ --spectrum-body-sans-serif-font-family: var(
466
+ --spectrum-font-family-sans-serif
467
+ );
468
+ --spectrum-body-serif-font-family: var(--spectrum-font-family-serif);
469
+ --spectrum-body-cjk-font-family: var(--spectrum-font-family-cjk);
470
+ --spectrum-body-sans-serif-font-weight: var(--spectrum-font-weight-regular);
471
+ --spectrum-body-sans-serif-font-style: var(--spectrum-font-style-default);
472
+ --spectrum-body-serif-font-weight: var(--spectrum-font-weight-regular);
473
+ --spectrum-body-serif-font-style: var(--spectrum-font-style-default);
474
+ --spectrum-body-cjk-font-weight: var(--spectrum-font-weight-regular);
475
+ --spectrum-body-cjk-font-style: var(--spectrum-font-style-default);
476
+ --spectrum-body-sans-serif-strong-font-weight: var(
477
+ --spectrum-font-weight-bold
478
+ );
479
+ --spectrum-body-sans-serif-strong-font-style: var(
480
+ --spectrum-font-style-default
481
+ );
482
+ --spectrum-body-serif-strong-font-weight: var(--spectrum-font-weight-bold);
483
+ --spectrum-body-serif-strong-font-style: var(--spectrum-font-style-default);
484
+ --spectrum-body-cjk-strong-font-weight: var(--spectrum-font-weight-black);
485
+ --spectrum-body-cjk-strong-font-style: var(--spectrum-font-style-default);
486
+ --spectrum-body-sans-serif-emphasized-font-weight: var(
487
+ --spectrum-font-weight-regular
488
+ );
489
+ --spectrum-body-sans-serif-emphasized-font-style: var(
490
+ --spectrum-font-style-italic
491
+ );
492
+ --spectrum-body-serif-emphasized-font-weight: var(
493
+ --spectrum-font-weight-regular
494
+ );
495
+ --spectrum-body-serif-emphasized-font-style: var(
496
+ --spectrum-font-style-italic
497
+ );
498
+ --spectrum-body-cjk-emphasized-font-weight: var(
499
+ --spectrum-font-weight-extra-bold
500
+ );
501
+ --spectrum-body-cjk-emphasized-font-style: var(
502
+ --spectrum-font-style-default
503
+ );
504
+ --spectrum-body-sans-serif-strong-emphasized-font-weight: var(
505
+ --spectrum-font-weight-bold
506
+ );
507
+ --spectrum-body-sans-serif-strong-emphasized-font-style: var(
508
+ --spectrum-font-style-italic
509
+ );
510
+ --spectrum-body-serif-strong-emphasized-font-weight: var(
511
+ --spectrum-font-weight-bold
512
+ );
513
+ --spectrum-body-serif-strong-emphasized-font-style: var(
514
+ --spectrum-font-style-italic
515
+ );
516
+ --spectrum-body-cjk-strong-emphasized-font-weight: var(
517
+ --spectrum-font-weight-black
518
+ );
519
+ --spectrum-body-cjk-strong-emphasized-font-style: var(
520
+ --spectrum-font-style-default
521
+ );
239
522
  --spectrum-body-size-xxxl: var(--spectrum-font-size-600);
240
523
  --spectrum-body-size-xxl: var(--spectrum-font-size-500);
241
524
  --spectrum-body-size-xl: var(--spectrum-font-size-400);
@@ -244,118 +527,181 @@ governing permissions and limitations under the License.
244
527
  --spectrum-body-size-s: var(--spectrum-font-size-100);
245
528
  --spectrum-body-size-xs: var(--spectrum-font-size-75);
246
529
  --spectrum-body-line-height: var(--spectrum-line-height-200);
247
- --spectrum-cjk-body-line-height: var(--spectrum-cjk-line-height-200);
530
+ --spectrum-body-line-height-cjk: var(--spectrum-line-height-cjk-200);
248
531
  --spectrum-body-margin-multiplier: 0.75;
249
- --spectrum-detail: var(--spectrum-font-bold-default);
250
- --spectrum-detail-light: var(--spectrum-font-regular-default);
251
- --spectrum-detail-strong: var(--spectrum-font-bold-default);
252
- --spectrum-detail-light-strong: var(--spectrum-font-regular-default);
253
- --spectrum-detail-emphasized: var(--spectrum-font-bold-italic-default);
254
- --spectrum-detail-light-emphasized: var(--spectrum-font-italic-default);
255
- --spectrum-detail-strong-emphasized: var(
256
- --spectrum-font-bold-italic-default
257
- );
258
- --spectrum-detail-light-strong-emphasized: var(
259
- --spectrum-font-italic-default
260
- );
261
- --spectrum-cjk-detail: var(--spectrum-font-extra-bold-cjk);
262
- --spectrum-cjk-detail-light: var(--spectrum-font-light-cjk);
263
- --spectrum-cjk-detail-strong: var(--spectrum-font-black-cjk);
264
- --spectrum-cjk-detail-light-strong: var(--spectrum-font-extra-bold-cjk);
265
- --spectrum-cjk-detail-emphasized: var(--spectrum-font-black-cjk);
266
- --spectrum-cjk-detail-light-emphasized: var(--spectrum-font-regular-cjk);
267
- --spectrum-cjk-detail-strong-emphasized: var(--spectrum-font-black-cjk);
268
- --spectrum-cjk-detail-light-strong-emphasized: var(
269
- --spectrum-font-extra-bold-cjk
532
+ --spectrum-detail-sans-serif-font-family: var(
533
+ --spectrum-font-family-sans-serif
534
+ );
535
+ --spectrum-detail-sans-serif-font-weight: var(--spectrum-font-weight-bold);
536
+ --spectrum-detail-sans-serif-font-style: var(--spectrum-font-style-default);
537
+ --spectrum-detail-serif-font-family: var(--spectrum-font-family-serif);
538
+ --spectrum-detail-serif-font-weight: var(--spectrum-font-weight-bold);
539
+ --spectrum-detail-serif-font-style: var(--spectrum-font-style-default);
540
+ --spectrum-detail-cjk-font-family: var(--spectrum-font-family-cjk);
541
+ --spectrum-detail-cjk-font-weight: var(--spectrum-font-weight-extra-bold);
542
+ --spectrum-detail-cjk-font-style: var(--spectrum-font-style-default);
543
+ --spectrum-detail-sans-serif-light-font-weight: var(
544
+ --spectrum-font-weight-regular
545
+ );
546
+ --spectrum-detail-sans-serif-light-font-style: var(
547
+ --spectrum-font-style-default
548
+ );
549
+ --spectrum-detail-serif-light-font-weight: var(
550
+ --spectrum-font-weight-regular
551
+ );
552
+ --spectrum-detail-serif-light-font-style: var(
553
+ --spectrum-font-style-default
554
+ );
555
+ --spectrum-detail-cjk-light-font-weight: var(--spectrum-font-weight-light);
556
+ --spectrum-detail-cjk-light-font-style: var(--spectrum-font-style-default);
557
+ --spectrum-detail-sans-serif-strong-font-weight: var(
558
+ --spectrum-font-weight-bold
559
+ );
560
+ --spectrum-detail-sans-serif-strong-font-style: var(
561
+ --spectrum-font-style-default
562
+ );
563
+ --spectrum-detail-serif-strong-font-weight: var(
564
+ --spectrum-font-weight-bold
565
+ );
566
+ --spectrum-detail-serif-strong-font-style: var(
567
+ --spectrum-font-style-default
568
+ );
569
+ --spectrum-detail-cjk-strong-font-weight: var(--spectrum-font-weight-black);
570
+ --spectrum-detail-cjk-strong-font-style: var(--spectrum-font-style-default);
571
+ --spectrum-detail-sans-serif-light-strong-font-weight: var(
572
+ --spectrum-font-weight-regular
573
+ );
574
+ --spectrum-detail-sans-serif-light-strong-font-style: var(
575
+ --spectrum-font-style-default
576
+ );
577
+ --spectrum-detail-serif-light-strong-font-weight: var(
578
+ --spectrum-font-weight-regular
579
+ );
580
+ --spectrum-detail-serif-light-strong-font-style: var(
581
+ --spectrum-font-style-default
582
+ );
583
+ --spectrum-detail-cjk-light-strong-font-weight: var(
584
+ --spectrum-font-weight-extra-bold
585
+ );
586
+ --spectrum-detail-cjk-light-strong-font-style: var(
587
+ --spectrum-font-style-default
588
+ );
589
+ --spectrum-detail-sans-serif-emphasized-font-weight: var(
590
+ --spectrum-font-weight-bold
591
+ );
592
+ --spectrum-detail-sans-serif-emphasized-font-style: var(
593
+ --spectrum-font-style-italic
594
+ );
595
+ --spectrum-detail-serif-emphasized-font-weight: var(
596
+ --spectrum-font-weight-bold
597
+ );
598
+ --spectrum-detail-serif-emphasized-font-style: var(
599
+ --spectrum-font-style-italic
600
+ );
601
+ --spectrum-detail-cjk-emphasized-font-weight: var(
602
+ --spectrum-font-weight-black
603
+ );
604
+ --spectrum-detail-cjk-emphasized-font-style: var(
605
+ --spectrum-font-style-default
606
+ );
607
+ --spectrum-detail-sans-serif-light-emphasized-font-weight: var(
608
+ --spectrum-font-weight-regular
609
+ );
610
+ --spectrum-detail-sans-serif-light-emphasized-font-style: var(
611
+ --spectrum-font-style-italic
612
+ );
613
+ --spectrum-detail-serif-light-emphasized-font-weight: var(
614
+ --spectrum-font-weight-regular
615
+ );
616
+ --spectrum-detail-serif-light-emphasized-font-style: var(
617
+ --spectrum-font-style-italic
618
+ );
619
+ --spectrum-detail-cjk-light-emphasized-font-weight: var(
620
+ --spectrum-font-weight-regular
621
+ );
622
+ --spectrum-detail-cjk-light-emphasized-font-style: var(
623
+ --spectrum-font-style-default
624
+ );
625
+ --spectrum-detail-sans-serif-strong-emphasized-font-weight: var(
626
+ --spectrum-font-weight-bold
627
+ );
628
+ --spectrum-detail-sans-serif-strong-emphasized-font-style: var(
629
+ --spectrum-font-style-italic
630
+ );
631
+ --spectrum-detail-serif-strong-emphasized-font-weight: var(
632
+ --spectrum-font-weight-bold
633
+ );
634
+ --spectrum-detail-serif-strong-emphasized-font-style: var(
635
+ --spectrum-font-style-italic
636
+ );
637
+ --spectrum-detail-cjk-strong-emphasized-font-weight: var(
638
+ --spectrum-font-weight-black
639
+ );
640
+ --spectrum-detail-cjk-strong-emphasized-font-style: var(
641
+ --spectrum-font-style-default
642
+ );
643
+ --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var(
644
+ --spectrum-font-weight-regular
645
+ );
646
+ --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var(
647
+ --spectrum-font-style-italic
648
+ );
649
+ --spectrum-detail-serif-light-strong-emphasized-font-weight: var(
650
+ --spectrum-font-weight-regular
651
+ );
652
+ --spectrum-detail-serif-light-strong-emphasized-font-style: var(
653
+ --spectrum-font-style-italic
654
+ );
655
+ --spectrum-detail-cjk-light-strong-emphasized-font-weight: var(
656
+ --spectrum-font-weight-extra-bold
657
+ );
658
+ --spectrum-detail-cjk-light-strong-emphasized-font-style: var(
659
+ --spectrum-font-style-default
270
660
  );
271
661
  --spectrum-detail-size-xl: var(--spectrum-font-size-200);
272
662
  --spectrum-detail-size-l: var(--spectrum-font-size-100);
273
663
  --spectrum-detail-size-m: var(--spectrum-font-size-75);
274
664
  --spectrum-detail-size-s: var(--spectrum-font-size-50);
275
665
  --spectrum-detail-line-height: var(--spectrum-line-height-100);
276
- --spectrum-cjk-detail-line-height: var(--spectrum-cjk-line-height-100);
277
- --spectrum-detail-margin-top-mulitplier: 0.8889;
666
+ --spectrum-detail-line-height-cjk: var(--spectrum-line-height-cjk-100);
667
+ --spectrum-detail-margin-top-mulitplier: 0.88888889;
278
668
  --spectrum-detail-margin-bottom-multiplier: 0.25;
279
669
  --spectrum-detail-letter-spacing: 0.06em;
280
- --spectrum-code: var(--spectrum-font-regular-default);
281
- --spectrum-code-strong: var(--spectrum-font-bold-default);
282
- --spectrum-code-emphasized: var(--spectrum-font-italic-default);
283
- --spectrum-code-strong-emphasized: var(--spectrum-font-bold-italic-default);
284
- --spectrum-cjk-code: var(--spectrum-font-regular-cjk);
285
- --spectrum-cjk-code-strong: var(--spectrum-font-black-cjk);
286
- --spectrum-cjk-code-emphasized: var(--spectrum-font-bold-cjk);
287
- --spectrum-cjk-code-strong-emphasized: var(--spectrum-font-black-cjk);
670
+ --spectrum-code-font-family: var(--spectrum-font-family-code);
671
+ --spectrum-code-font-weight: var(--spectrum-font-weight-regular);
672
+ --spectrum-code-font-style: var(--spectrum-font-style-default);
673
+ --spectrum-code-cjk-font-family: var(--spectrum-font-family-code);
674
+ --spectrum-code-cjk-font-weight: var(--spectrum-font-weight-regular);
675
+ --spectrum-code-cjk-font-style: var(--spectrum-font-style-default);
676
+ --spectrum-code-strong-font-weight: var(--spectrum-font-weight-bold);
677
+ --spectrum-code-strong-font-style: var(--spectrum-font-style-default);
678
+ --spectrum-code-cjk-strong-font-weight: var(--spectrum-font-weight-black);
679
+ --spectrum-code-cjk-strong-font-style: var(--spectrum-font-style-default);
680
+ --spectrum-code-emphasized-font-weight: var(--spectrum-font-weight-regular);
681
+ --spectrum-code-emphasized-font-style: var(--spectrum-font-style-italic);
682
+ --spectrum-code-cjk-emphasized-font-weight: var(
683
+ --spectrum-font-weight-bold
684
+ );
685
+ --spectrum-code-cjk-emphasized-font-style: var(
686
+ --spectrum-font-style-default
687
+ );
688
+ --spectrum-code-strong-emphasized-font-weight: var(
689
+ --spectrum-font-weight-bold
690
+ );
691
+ --spectrum-code-strong-emphasized-font-style: var(
692
+ --spectrum-font-style-italic
693
+ );
694
+ --spectrum-code-cjk-strong-emphasized-font-weight: var(
695
+ --spectrum-font-weight-black
696
+ );
697
+ --spectrum-code-cjk-strong-emphasized-font-style: var(
698
+ --spectrum-font-style-default
699
+ );
288
700
  --spectrum-code-size-xl: var(--spectrum-font-size-400);
289
701
  --spectrum-code-size-l: var(--spectrum-font-size-300);
290
702
  --spectrum-code-size-m: var(--spectrum-font-size-200);
291
703
  --spectrum-code-size-s: var(--spectrum-font-size-100);
292
704
  --spectrum-code-size-xs: var(--spectrum-font-size-75);
293
705
  --spectrum-code-line-height: var(--spectrum-line-height-200);
294
- --spectrum-cjk-code-line-height: var(--spectrum-cjk-line-height-200);
295
- --spectrum-picker-minimum-width-multiplier: 2;
296
- --spectrum-text-field-minimum-width-multiplier: 1.5;
297
- --spectrum-combo-box-minimum-width-multiplier: 2.5;
298
- --spectrum-combo-box-quiet-minimum-width-multiplier: 2;
299
- --spectrum-combo-box-visual-to-field-button-quiet: 0;
300
- --spectrum-android-elevation: 2dp;
301
- --spectrum-spacing-50: 2px;
302
- --spectrum-spacing-75: 4px;
303
- --spectrum-spacing-100: 8px;
304
- --spectrum-spacing-200: 12px;
305
- --spectrum-spacing-300: 16px;
306
- --spectrum-spacing-400: 24px;
307
- --spectrum-spacing-500: 32px;
308
- --spectrum-spacing-600: 40px;
309
- --spectrum-spacing-700: 48px;
310
- --spectrum-spacing-800: 64px;
311
- --spectrum-spacing-900: 80px;
312
- --spectrum-spacing-1000: 96px;
313
- --spectrum-focus-indicator-thickness: 2px;
314
- --spectrum-focus-indicator-gap: 2px;
315
- --spectrum-border-width-200: 2px;
316
- --spectrum-border-width-400: 4px;
317
- --spectrum-line-height-100: 1.3;
318
- --spectrum-line-height-200: 1.5;
319
- --spectrum-font-family-default: var(--spectrum-font-family-sans-serif);
320
- --spectrum-font-family-sans-serif: adobe clean;
321
- --spectrum-font-family-serif: adobe clean serif;
322
- --spectrum-font-family-code: source code pro;
323
- --spectrum-font-light-default: adobe clean light;
324
- --spectrum-font-light-cjk: adobe clean han light;
325
- --spectrum-font-light-monospace: source code pro;
326
- --spectrum-font-light-italic-default: adobe clean light italic;
327
- --spectrum-font-light-italic-monospace: source code pro light italic;
328
- --spectrum-font-regular-default: adobe clean regular;
329
- --spectrum-font-regular-cjk: adobe clean han regular;
330
- --spectrum-font-regular-serif: adobe clean serif regular;
331
- --spectrum-font-regular-monospace: source code pro regular;
332
- --spectrum-font-italic-default: adobe clean italic;
333
- --spectrum-font-italic-serif: adobe clean serif italic;
334
- --spectrum-font-italic-monospace: source code pro italic;
335
- --spectrum-font-medium-default: adobe clean medium;
336
- --spectrum-font-medium-serif: adobe clean serif medium;
337
- --spectrum-font-medium-monospace: source code pro medium;
338
- --spectrum-font-bold-default: adobe clean bold;
339
- --spectrum-font-bold-cjk: adobe clean han bold;
340
- --spectrum-font-bold-serif: adobe clean serif bold;
341
- --spectrum-font-bold-monospace: source code pro bold;
342
- --spectrum-font-bold-italic-default: adobe clean bold italic;
343
- --spectrum-font-bold-italic-serif: adobe clean serif bold italic;
344
- --spectrum-font-bold-italic-monospace: source code pro bold italic;
345
- --spectrum-font-extra-bold-default: adobe clean extra bold;
346
- --spectrum-font-extra-bold-cjk: adobe clean han extra bold;
347
- --spectrum-font-black-default: adobe clean black;
348
- --spectrum-font-black-cjk: adobe clean han black;
349
- --spectrum-font-black-serif: adobe clean serif black;
350
- --spectrum-font-black-monospace: source code pro black;
351
- --spectrum-font-black-italic-default: adobe clean black italic;
352
- --spectrum-font-black-italic-serif: adobe clean serif black italic;
353
- --spectrum-font-black-italic-monospace: source code pro black italic;
354
- --spectrum-cjk-letter-spacing: 0.05em;
355
- --spectrum-cjk-line-height-100: 1.5;
356
- --spectrum-cjk-line-height-200: 1.7;
357
- --spectrum-field-edge-to-text-quiet: 0px;
358
- --spectrum-field-edge-to-border-quiet: 0px;
359
- --spectrum-field-edge-to-alert-icon-quiet: 0px;
360
- --spectrum-field-edge-to-validation-icon-quiet: 0px;
706
+ --spectrum-code-line-height-cjk: var(--spectrum-line-height-cjk-200);
361
707
  }