@spectrum-web-components/styles 0.23.3 → 0.24.1-overlay.10

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 (62) hide show
  1. package/README.md +1 -1
  2. package/all-large-dark.css +1 -1
  3. package/all-large-darkest.css +1 -1
  4. package/all-large-light.css +1 -1
  5. package/all-large-lightest.css +1 -1
  6. package/all-medium-dark.css +1 -1
  7. package/all-medium-darkest.css +1 -1
  8. package/all-medium-light.css +1 -1
  9. package/all-medium-lightest.css +1 -1
  10. package/express/spectrum-core-global.css +0 -20
  11. package/fonts.css +1302 -3
  12. package/package.json +7 -8
  13. package/spectrum-core-global.css +0 -32
  14. package/src/spectrum-body.css +167 -212
  15. package/src/spectrum-body.css.dev.js +60 -86
  16. package/src/spectrum-body.css.dev.js.map +2 -2
  17. package/src/spectrum-body.css.js +62 -88
  18. package/src/spectrum-body.css.js.map +2 -2
  19. package/src/spectrum-code.css +98 -137
  20. package/src/spectrum-code.css.dev.js +28 -60
  21. package/src/spectrum-code.css.dev.js.map +2 -2
  22. package/src/spectrum-code.css.js +30 -62
  23. package/src/spectrum-code.css.js.map +2 -2
  24. package/src/spectrum-detail.css +266 -269
  25. package/src/spectrum-detail.css.dev.js +101 -131
  26. package/src/spectrum-detail.css.dev.js.map +2 -2
  27. package/src/spectrum-detail.css.js +101 -131
  28. package/src/spectrum-detail.css.js.map +2 -2
  29. package/src/spectrum-heading.css +410 -329
  30. package/src/spectrum-heading.css.dev.js +153 -159
  31. package/src/spectrum-heading.css.dev.js.map +2 -2
  32. package/src/spectrum-heading.css.js +153 -159
  33. package/src/spectrum-heading.css.js.map +2 -2
  34. package/src/spectrum-lang.css +311 -1162
  35. package/src/spectrum-lang.css.dev.js +98 -412
  36. package/src/spectrum-lang.css.dev.js.map +2 -2
  37. package/src/spectrum-lang.css.js +98 -412
  38. package/src/spectrum-lang.css.js.map +2 -2
  39. package/src/spectrum-typography.css +16 -122
  40. package/src/spectrum-typography.css.dev.js +9 -47
  41. package/src/spectrum-typography.css.dev.js.map +2 -2
  42. package/src/spectrum-typography.css.js +11 -49
  43. package/src/spectrum-typography.css.js.map +2 -2
  44. package/tokens/dark-vars.css +404 -205
  45. package/tokens/darkest-vars.css +404 -205
  46. package/tokens/express/custom-dark-vars.css +1 -1
  47. package/tokens/express/custom-darkest-vars.css +1 -1
  48. package/tokens/express/custom-large-vars.css +17 -13
  49. package/tokens/express/custom-light-vars.css +2 -1
  50. package/tokens/express/custom-medium-vars.css +17 -13
  51. package/tokens/express/custom-vars.css +12 -13
  52. package/tokens/global-vars.css +136 -37
  53. package/tokens/large-vars.css +23 -14
  54. package/tokens/light-vars.css +404 -205
  55. package/tokens/medium-vars.css +23 -14
  56. package/tokens/spectrum/custom-dark-vars.css +16 -16
  57. package/tokens/spectrum/custom-darkest-vars.css +16 -16
  58. package/tokens/spectrum/custom-large-vars.css +25 -15
  59. package/tokens/spectrum/custom-light-vars.css +18 -17
  60. package/tokens/spectrum/custom-medium-vars.css +25 -15
  61. package/tokens/spectrum/custom-vars.css +20 -18
  62. package/typography.css +907 -2251
package/fonts.css CHANGED
@@ -1,6 +1,5 @@
1
-
2
1
  /*
3
- Copyright 2019 Adobe. All rights reserved.
2
+ Copyright 2023 Adobe. All rights reserved.
4
3
  This file is licensed to you under the Apache License, Version 2.0 (the "License");
5
4
  you may not use this file except in compliance with the License. You may obtain a copy
6
5
  of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -9,4 +8,1304 @@ Unless required by applicable law or agreed to in writing, software distributed
9
8
  the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10
9
  OF ANY KIND, either express or implied. See the License for the specific language
11
10
  governing permissions and limitations under the License.
12
- */:host,:root{font-family:var(--spectrum-alias-body-text-font-family);font-size:var(--spectrum-alias-font-size-default)}:host:lang(ar),:root:lang(ar){font-family:var(--spectrum-alias-font-family-ar)}:host:lang(he),:root:lang(he){font-family:var(--spectrum-alias-font-family-he)}:host:lang(zh-Hans),:root:lang(zh-Hans){font-family:var(--spectrum-alias-font-family-zhhans)}:host:lang(zh-Hant),:root:lang(zh-Hant){font-family:var(--spectrum-alias-font-family-zh)}:host:lang(zh),:root:lang(zh){font-family:var(--spectrum-alias-font-family-zh)}:host:lang(ko),:root:lang(ko){font-family:var(--spectrum-alias-font-family-ko)}:host:lang(ja),:root:lang(ja){font-family:var(--spectrum-alias-font-family-ja)}
11
+ */
12
+
13
+ :host,
14
+ :root {
15
+ --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro',
16
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
17
+ 'Trebuchet MS', 'Lucida Grande', sans-serif;
18
+ --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro',
19
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
20
+ 'Trebuchet MS', 'Lucida Grande', sans-serif;
21
+ --spectrum-font-family: var(--spectrum-sans-font-family-stack);
22
+ --spectrum-font-style: var(--spectrum-default-font-style);
23
+ --spectrum-font-size: var(--spectrum-font-size-100);
24
+ font-family: var(--spectrum-font-family);
25
+ font-size: var(--spectrum-font-size);
26
+ font-style: var(--spectrum-font-style);
27
+ }
28
+ .spectrum:lang(ar) {
29
+ font-family: var(--spectrum-font-family-ar);
30
+ }
31
+ .spectrum:lang(he) {
32
+ font-family: var(--spectrum-font-family-he);
33
+ }
34
+ .spectrum-Heading {
35
+ --spectrum-heading-sans-serif-font-family: var(
36
+ --spectrum-sans-font-family-stack
37
+ );
38
+ --spectrum-heading-serif-font-family: var(
39
+ --spectrum-serif-font-family-stack
40
+ );
41
+ --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack);
42
+ --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
43
+ --spectrum-heading-font-color: var(--spectrum-heading-color);
44
+ --spectrum-heading-margin-start: calc(
45
+ var(--mod-heading-font-size, var(--spectrum-heading-font-size)) *
46
+ var(--spectrum-heading-margin-top-multiplier)
47
+ );
48
+ --spectrum-heading-margin-end: calc(
49
+ var(--mod-heading-font-size, var(--spectrum-heading-font-size)) *
50
+ var(--spectrum-heading-margin-bottom-multiplier)
51
+ );
52
+ }
53
+ @media (forced-colors: active) {
54
+ .spectrum-Heading {
55
+ --highcontrast-heading-font-color: Text;
56
+ }
57
+ }
58
+ .spectrum-Heading--sizeXXS {
59
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xxs);
60
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs);
61
+ }
62
+ .spectrum-Heading--sizeXS {
63
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xs);
64
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs);
65
+ }
66
+ .spectrum-Heading--sizeS {
67
+ --spectrum-heading-font-size: var(--spectrum-heading-size-s);
68
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
69
+ }
70
+ .spectrum-Heading--sizeM {
71
+ --spectrum-heading-font-size: var(--spectrum-heading-size-m);
72
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m);
73
+ }
74
+ .spectrum-Heading--sizeL {
75
+ --spectrum-heading-font-size: var(--spectrum-heading-size-l);
76
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l);
77
+ }
78
+ .spectrum-Heading--sizeXL {
79
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xl);
80
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl);
81
+ }
82
+ .spectrum-Heading--sizeXXL {
83
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xxl);
84
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl);
85
+ }
86
+ .spectrum-Heading--sizeXXXL {
87
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl);
88
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl);
89
+ }
90
+ .spectrum-Heading {
91
+ color: var(
92
+ --highcontrast-heading-font-color,
93
+ var(--mod-heading-font-color, var(--spectrum-heading-font-color))
94
+ );
95
+ font-family: var(
96
+ --mod-heading-sans-serif-font-family,
97
+ var(--spectrum-heading-sans-serif-font-family)
98
+ );
99
+ font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size));
100
+ font-style: var(
101
+ --mod-heading-sans-serif-font-style,
102
+ var(--spectrum-heading-sans-serif-font-style)
103
+ );
104
+ font-weight: var(
105
+ --mod-heading-sans-serif-font-weight,
106
+ var(--spectrum-heading-sans-serif-font-weight)
107
+ );
108
+ line-height: var(
109
+ --mod-heading-line-height,
110
+ var(--spectrum-heading-line-height)
111
+ );
112
+ }
113
+ .spectrum-Heading .spectrum-Heading-strong,
114
+ .spectrum-Heading strong {
115
+ font-style: var(
116
+ --mod-heading-sans-serif-strong-font-style,
117
+ var(--spectrum-heading-sans-serif-strong-font-style)
118
+ );
119
+ font-weight: var(
120
+ --mod-heading-sans-serif-strong-font-weight,
121
+ var(--spectrum-heading-sans-serif-strong-font-weight)
122
+ );
123
+ }
124
+ .spectrum-Heading .spectrum-Heading-emphasized,
125
+ .spectrum-Heading em {
126
+ font-style: var(
127
+ --mod-heading-sans-serif-emphasized-font-style,
128
+ var(--spectrum-heading-sans-serif-emphasized-font-style)
129
+ );
130
+ font-weight: var(
131
+ --mod-heading-sans-serif-emphasized-font-weight,
132
+ var(--spectrum-heading-sans-serif-emphasized-font-weight)
133
+ );
134
+ }
135
+ .spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized,
136
+ .spectrum-Heading em strong,
137
+ .spectrum-Heading strong em {
138
+ font-style: var(
139
+ --mod-heading-sans-serif-strong-emphasized-font-style,
140
+ var(--spectrum-heading-sans-serif-strong-emphasized-font-style)
141
+ );
142
+ font-weight: var(
143
+ --mod-heading-sans-serif-strong-emphasized-font-weight,
144
+ var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)
145
+ );
146
+ }
147
+ .spectrum-Heading:lang(ja),
148
+ .spectrum-Heading:lang(ko),
149
+ .spectrum-Heading:lang(zh) {
150
+ font-family: var(
151
+ --mod-heading-cjk-font-family,
152
+ var(--spectrum-heading-cjk-font-family)
153
+ );
154
+ font-size: var(
155
+ --mod-heading-cjk-font-size,
156
+ var(--spectrum-heading-cjk-font-size)
157
+ );
158
+ font-style: var(
159
+ --mod-heading-cjk-font-style,
160
+ var(--spectrum-heading-cjk-font-style)
161
+ );
162
+ font-weight: var(
163
+ --mod-heading-cjk-font-weight,
164
+ var(--spectrum-heading-cjk-font-weight)
165
+ );
166
+ letter-spacing: var(
167
+ --mod-heading-cjk-letter-spacing,
168
+ var(--spectrum-heading-cjk-letter-spacing)
169
+ );
170
+ line-height: var(
171
+ --mod-heading-cjk-line-height,
172
+ var(--spectrum-heading-cjk-line-height)
173
+ );
174
+ }
175
+ .spectrum-Heading:lang(ja) .spectrum-Heading-emphasized,
176
+ .spectrum-Heading:lang(ja) em,
177
+ .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized,
178
+ .spectrum-Heading:lang(ko) em,
179
+ .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized,
180
+ .spectrum-Heading:lang(zh) em {
181
+ font-style: var(
182
+ --mod-heading-cjk-emphasized-font-style,
183
+ var(--spectrum-heading-cjk-emphasized-font-style)
184
+ );
185
+ font-weight: var(
186
+ --mod-heading-cjk-emphasized-font-weight,
187
+ var(--spectrum-heading-cjk-emphasized-font-weight)
188
+ );
189
+ }
190
+ .spectrum-Heading:lang(ja) .spectrum-Heading-strong,
191
+ .spectrum-Heading:lang(ja) strong,
192
+ .spectrum-Heading:lang(ko) .spectrum-Heading-strong,
193
+ .spectrum-Heading:lang(ko) strong,
194
+ .spectrum-Heading:lang(zh) .spectrum-Heading-strong,
195
+ .spectrum-Heading:lang(zh) strong {
196
+ font-style: var(
197
+ --mod-heading-cjk-strong-font-style,
198
+ var(--spectrum-heading-cjk-strong-font-style)
199
+ );
200
+ font-weight: var(
201
+ --mod-heading-cjk-strong-font-weight,
202
+ var(--spectrum-heading-cjk-strong-font-weight)
203
+ );
204
+ }
205
+ .spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
206
+ .spectrum-Heading:lang(ja) em strong,
207
+ .spectrum-Heading:lang(ja) strong em,
208
+ .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
209
+ .spectrum-Heading:lang(ko) em strong,
210
+ .spectrum-Heading:lang(ko) strong em,
211
+ .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
212
+ .spectrum-Heading:lang(zh) em strong,
213
+ .spectrum-Heading:lang(zh) strong em {
214
+ font-style: var(
215
+ --mod-heading-cjk-strong-emphasized-font-style,
216
+ var(--spectrum-heading-cjk-strong-emphasized-font-style)
217
+ );
218
+ font-weight: var(
219
+ --mod-heading-cjk-strong-emphasized-font-weight,
220
+ var(--spectrum-heading-cjk-strong-emphasized-font-weight)
221
+ );
222
+ }
223
+ .spectrum-Heading--heavy {
224
+ font-style: var(
225
+ --mod-heading-sans-serif-heavy-font-style,
226
+ var(--spectrum-heading-sans-serif-heavy-font-style)
227
+ );
228
+ font-weight: var(
229
+ --mod-heading-sans-serif-heavy-font-weight,
230
+ var(--spectrum-heading-sans-serif-heavy-font-weight)
231
+ );
232
+ }
233
+ .spectrum-Heading--heavy .spectrum-Heading-strong,
234
+ .spectrum-Heading--heavy strong {
235
+ font-style: var(
236
+ --mod-heading-sans-serif-heavy-strong-font-style,
237
+ var(--spectrum-heading-sans-serif-heavy-strong-font-style)
238
+ );
239
+ font-weight: var(
240
+ --mod-heading-sans-serif-heavy-strong-font-weight,
241
+ var(--spectrum-heading-sans-serif-heavy-strong-font-weight)
242
+ );
243
+ }
244
+ .spectrum-Heading--heavy .spectrum-Heading-emphasized,
245
+ .spectrum-Heading--heavy em {
246
+ font-style: var(
247
+ --mod-heading-sans-serif-heavy-emphasized-font-style,
248
+ var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)
249
+ );
250
+ font-weight: var(
251
+ --mod-heading-sans-serif-heavy-emphasized-font-weight,
252
+ var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)
253
+ );
254
+ }
255
+ .spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized,
256
+ .spectrum-Heading--heavy em strong,
257
+ .spectrum-Heading--heavy strong em {
258
+ font-style: var(
259
+ --mod-heading-sans-serif-heavy-strong-emphasized-font-style,
260
+ var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)
261
+ );
262
+ font-weight: var(
263
+ --mod-heading-sans-serif-heavy-strong-emphasized-font-weight,
264
+ var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)
265
+ );
266
+ }
267
+ .spectrum-Heading--heavy:lang(ja),
268
+ .spectrum-Heading--heavy:lang(ko),
269
+ .spectrum-Heading--heavy:lang(zh) {
270
+ font-style: var(
271
+ --mod-heading-cjk-heavy-font-style,
272
+ var(--spectrum-heading-cjk-heavy-font-style)
273
+ );
274
+ font-weight: var(
275
+ --mod-heading-cjk-heavy-font-weight,
276
+ var(--spectrum-heading-cjk-heavy-font-weight)
277
+ );
278
+ }
279
+ .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized,
280
+ .spectrum-Heading--heavy:lang(ja) em,
281
+ .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized,
282
+ .spectrum-Heading--heavy:lang(ko) em,
283
+ .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized,
284
+ .spectrum-Heading--heavy:lang(zh) em {
285
+ font-style: var(
286
+ --mod-heading-cjk-heavy-emphasized-font-style,
287
+ var(--spectrum-heading-cjk-heavy-emphasized-font-style)
288
+ );
289
+ font-weight: var(
290
+ --mod-heading-cjk-heavy-emphasized-font-weight,
291
+ var(--spectrum-heading-cjk-heavy-emphasized-font-weight)
292
+ );
293
+ }
294
+ .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong,
295
+ .spectrum-Heading--heavy:lang(ja) strong,
296
+ .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong,
297
+ .spectrum-Heading--heavy:lang(ko) strong,
298
+ .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong,
299
+ .spectrum-Heading--heavy:lang(zh) strong {
300
+ font-style: var(
301
+ --mod-heading-cjk-heavy-strong-font-style,
302
+ var(--spectrum-heading-cjk-heavy-strong-font-style)
303
+ );
304
+ font-weight: var(
305
+ --mod-heading-cjk-heavy-strong-font-weight,
306
+ var(--spectrum-heading-cjk-heavy-strong-font-weight)
307
+ );
308
+ }
309
+ .spectrum-Heading--heavy:lang(ja)
310
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
311
+ .spectrum-Heading--heavy:lang(ja) em strong,
312
+ .spectrum-Heading--heavy:lang(ja) strong em,
313
+ .spectrum-Heading--heavy:lang(ko)
314
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
315
+ .spectrum-Heading--heavy:lang(ko) em strong,
316
+ .spectrum-Heading--heavy:lang(ko) strong em,
317
+ .spectrum-Heading--heavy:lang(zh)
318
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
319
+ .spectrum-Heading--heavy:lang(zh) em strong,
320
+ .spectrum-Heading--heavy:lang(zh) strong em {
321
+ font-style: var(
322
+ --mod-heading-cjk-heavy-strong-emphasized-font-style,
323
+ var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)
324
+ );
325
+ font-weight: var(
326
+ --mod-heading-cjk-heavy-strong-emphasized-font-weight,
327
+ var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)
328
+ );
329
+ }
330
+ .spectrum-Heading--light {
331
+ font-style: var(
332
+ --mod-heading-sans-serif-light-font-style,
333
+ var(--spectrum-heading-sans-serif-light-font-style)
334
+ );
335
+ font-weight: var(
336
+ --mod-heading-sans-serif-light-font-weight,
337
+ var(--spectrum-heading-sans-serif-light-font-weight)
338
+ );
339
+ }
340
+ .spectrum-Heading--light .spectrum-Heading-emphasized,
341
+ .spectrum-Heading--light em {
342
+ font-style: var(
343
+ --mod-heading-sans-serif-light-emphasized-font-style,
344
+ var(--spectrum-heading-sans-serif-light-emphasized-font-style)
345
+ );
346
+ font-weight: var(
347
+ --mod-heading-sans-serif-light-emphasized-font-weight,
348
+ var(--spectrum-heading-sans-serif-light-emphasized-font-weight)
349
+ );
350
+ }
351
+ .spectrum-Heading--light .spectrum-Heading-strong,
352
+ .spectrum-Heading--light strong {
353
+ font-style: var(
354
+ --mod-heading-sans-serif-light-strong-font-style,
355
+ var(--spectrum-heading-sans-serif-light-strong-font-style)
356
+ );
357
+ font-weight: var(
358
+ --mod-heading-sans-serif-light-strong-font-weight,
359
+ var(--spectrum-heading-sans-serif-light-strong-font-weight)
360
+ );
361
+ }
362
+ .spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized,
363
+ .spectrum-Heading--light em strong,
364
+ .spectrum-Heading--light strong em {
365
+ font-style: var(
366
+ --mod-heading-sans-serif-light-strong-emphasized-font-style,
367
+ var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)
368
+ );
369
+ font-weight: var(
370
+ --mod-heading-sans-serif-light-strong-emphasized-font-weight,
371
+ var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)
372
+ );
373
+ }
374
+ .spectrum-Heading--light:lang(ja),
375
+ .spectrum-Heading--light:lang(ko),
376
+ .spectrum-Heading--light:lang(zh) {
377
+ font-style: var(
378
+ --mod-heading-cjk-light-font-style,
379
+ var(--spectrum-heading-cjk-light-font-style)
380
+ );
381
+ font-weight: var(
382
+ --mod-heading-cjk-light-font-weight,
383
+ var(--spectrum-heading-cjk-light-font-weight)
384
+ );
385
+ }
386
+ .spectrum-Heading--light:lang(ja) .spectrum-Heading-strong,
387
+ .spectrum-Heading--light:lang(ja) strong,
388
+ .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong,
389
+ .spectrum-Heading--light:lang(ko) strong,
390
+ .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong,
391
+ .spectrum-Heading--light:lang(zh) strong {
392
+ font-style: var(
393
+ --mod-heading-cjk-light-strong-font-style,
394
+ var(--spectrum-heading-cjk-light-strong-font-style)
395
+ );
396
+ font-weight: var(
397
+ --mod-heading-cjk-light-strong-font-weight,
398
+ var(--spectrum-heading-cjk-light-strong-font-weight)
399
+ );
400
+ }
401
+ .spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized,
402
+ .spectrum-Heading--light:lang(ja) em,
403
+ .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized,
404
+ .spectrum-Heading--light:lang(ko) em,
405
+ .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized,
406
+ .spectrum-Heading--light:lang(zh) em {
407
+ font-style: var(
408
+ --mod-heading-cjk-light-emphasized-font-style,
409
+ var(--spectrum-heading-cjk-light-emphasized-font-style)
410
+ );
411
+ font-weight: var(
412
+ --mod-heading-cjk-light-emphasized-font-weight,
413
+ var(--spectrum-heading-cjk-light-emphasized-font-weight)
414
+ );
415
+ }
416
+ .spectrum-Heading--light:lang(ja)
417
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
418
+ .spectrum-Heading--light:lang(ja) em strong,
419
+ .spectrum-Heading--light:lang(ja) strong em,
420
+ .spectrum-Heading--light:lang(ko)
421
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
422
+ .spectrum-Heading--light:lang(ko) em strong,
423
+ .spectrum-Heading--light:lang(ko) strong em,
424
+ .spectrum-Heading--light:lang(zh)
425
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
426
+ .spectrum-Heading--light:lang(zh) em strong,
427
+ .spectrum-Heading--light:lang(zh) strong em {
428
+ font-style: var(
429
+ --mod-heading-cjk-light-strong-emphasized-font-style,
430
+ var(--spectrum-heading-cjk-light-strong-emphasized-font-style)
431
+ );
432
+ font-weight: var(
433
+ --mod-heading-cjk-light-strong-emphasized-font-weight,
434
+ var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)
435
+ );
436
+ }
437
+ .spectrum-Heading--serif {
438
+ font-family: var(
439
+ --mod-heading-serif-font-family,
440
+ var(--spectrum-heading-serif-font-family)
441
+ );
442
+ font-style: var(
443
+ --mod-heading-serif-font-style,
444
+ var(--spectrum-heading-serif-font-style)
445
+ );
446
+ font-weight: var(
447
+ --mod-heading-serif-font-weight,
448
+ var(--spectrum-heading-serif-font-weight)
449
+ );
450
+ }
451
+ .spectrum-Heading--serif .spectrum-Heading-emphasized,
452
+ .spectrum-Heading--serif em {
453
+ font-style: var(
454
+ --mod-heading-serif-emphasized-font-style,
455
+ var(--spectrum-heading-serif-emphasized-font-style)
456
+ );
457
+ font-weight: var(
458
+ --mod-heading-serif-emphasized-font-weight,
459
+ var(--spectrum-heading-serif-emphasized-font-weight)
460
+ );
461
+ }
462
+ .spectrum-Heading--serif .spectrum-Heading-strong,
463
+ .spectrum-Heading--serif strong {
464
+ font-style: var(
465
+ --mod-heading-serif-strong-font-style,
466
+ var(--spectrum-heading-serif-strong-font-style)
467
+ );
468
+ font-weight: var(
469
+ --mod-heading-serif-strong-font-weight,
470
+ var(--spectrum-heading-serif-strong-font-weight)
471
+ );
472
+ }
473
+ .spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized,
474
+ .spectrum-Heading--serif em strong,
475
+ .spectrum-Heading--serif strong em {
476
+ font-style: var(
477
+ --mod-heading-serif-strong-emphasized-font-style,
478
+ var(--spectrum-heading-serif-strong-emphasized-font-style)
479
+ );
480
+ font-weight: var(
481
+ --mod-heading-serif-strong-emphasized-font-weight,
482
+ var(--spectrum-heading-serif-strong-emphasized-font-weight)
483
+ );
484
+ }
485
+ .spectrum-Heading--serif.spectrum-Heading--heavy {
486
+ font-style: var(
487
+ --mod-heading-serif-heavy-font-style,
488
+ var(--spectrum-heading-serif-heavy-font-style)
489
+ );
490
+ font-weight: var(
491
+ --mod-heading-serif-heavy-font-weight,
492
+ var(--spectrum-heading-serif-heavy-font-weight)
493
+ );
494
+ }
495
+ .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong,
496
+ .spectrum-Heading--serif.spectrum-Heading--heavy strong {
497
+ font-style: var(
498
+ --mod-heading-serif-heavy-strong-font-style,
499
+ var(--spectrum-heading-serif-heavy-strong-font-style)
500
+ );
501
+ font-weight: var(
502
+ --mod-heading-serif-heavy-strong-font-weight,
503
+ var(--spectrum-heading-serif-heavy-strong-font-weight)
504
+ );
505
+ }
506
+ .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized,
507
+ .spectrum-Heading--serif.spectrum-Heading--heavy em {
508
+ font-style: var(
509
+ --mod-heading-serif-heavy-emphasized-font-style,
510
+ var(--spectrum-heading-serif-heavy-emphasized-font-style)
511
+ );
512
+ font-weight: var(
513
+ --mod-heading-serif-heavy-emphasized-font-weight,
514
+ var(--spectrum-heading-serif-heavy-emphasized-font-weight)
515
+ );
516
+ }
517
+ .spectrum-Heading--serif.spectrum-Heading--heavy
518
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
519
+ .spectrum-Heading--serif.spectrum-Heading--heavy em strong,
520
+ .spectrum-Heading--serif.spectrum-Heading--heavy strong em {
521
+ font-style: var(
522
+ --mod-heading-serif-heavy-strong-emphasized-font-style,
523
+ var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)
524
+ );
525
+ font-weight: var(
526
+ --mod-heading-serif-heavy-strong-emphasized-font-weight,
527
+ var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)
528
+ );
529
+ }
530
+ .spectrum-Heading--serif.spectrum-Heading--light {
531
+ font-style: var(
532
+ --mod-heading-serif-light-font-style,
533
+ var(--spectrum-heading-serif-light-font-style)
534
+ );
535
+ font-weight: var(
536
+ --mod-heading-serif-light-font-weight,
537
+ var(--spectrum-heading-serif-light-font-weight)
538
+ );
539
+ }
540
+ .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized,
541
+ .spectrum-Heading--serif.spectrum-Heading--light em {
542
+ font-style: var(
543
+ --mod-heading-serif-light-emphasized-font-style,
544
+ var(--spectrum-heading-serif-light-emphasized-font-style)
545
+ );
546
+ font-weight: var(
547
+ --mod-heading-serif-light-emphasized-font-weight,
548
+ var(--spectrum-heading-serif-light-emphasized-font-weight)
549
+ );
550
+ }
551
+ .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong,
552
+ .spectrum-Heading--serif.spectrum-Heading--light strong {
553
+ font-style: var(
554
+ --mod-heading-serif-light-strong-font-style,
555
+ var(--spectrum-heading-serif-light-strong-font-style)
556
+ );
557
+ font-weight: var(
558
+ --mod-heading-serif-light-strong-font-weight,
559
+ var(--spectrum-heading-serif-light-strong-font-weight)
560
+ );
561
+ }
562
+ .spectrum-Heading--serif.spectrum-Heading--light
563
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
564
+ .spectrum-Heading--serif.spectrum-Heading--light em strong,
565
+ .spectrum-Heading--serif.spectrum-Heading--light strong em {
566
+ font-style: var(
567
+ --mod-heading-serif-light-strong-emphasized-font-style,
568
+ var(--spectrum-heading-serif-light-strong-emphasized-font-style)
569
+ );
570
+ font-weight: var(
571
+ --mod-heading-serif-light-strong-emphasized-font-weight,
572
+ var(--spectrum-heading-serif-light-strong-emphasized-font-weight)
573
+ );
574
+ }
575
+ .spectrum-Typography .spectrum-Heading {
576
+ margin-block-end: var(
577
+ --mod-heading-margin-end,
578
+ var(--spectrum-heading-margin-end)
579
+ );
580
+ margin-block-start: var(
581
+ --mod-heading-margin-start,
582
+ var(--spectrum-heading-margin-start)
583
+ );
584
+ }
585
+ .spectrum-Body {
586
+ --spectrum-body-sans-serif-font-family: var(
587
+ --spectrum-sans-font-family-stack
588
+ );
589
+ --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack);
590
+ --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack);
591
+ --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
592
+ --spectrum-body-margin: calc(
593
+ var(--mod-body-font-size, var(--spectrum-body-font-size)) *
594
+ var(--spectrum-body-margin-multiplier)
595
+ );
596
+ --spectrum-body-font-color: var(--spectrum-body-color);
597
+ }
598
+ @media (forced-colors: active) {
599
+ .spectrum-body {
600
+ --highcontrast-body-font-color: Text;
601
+ }
602
+ }
603
+ .spectrum-Body--sizeXS {
604
+ --spectrum-body-font-size: var(--spectrum-body-size-xs);
605
+ }
606
+ .spectrum-Body--sizeS {
607
+ --spectrum-body-font-size: var(--spectrum-body-size-s);
608
+ }
609
+ .spectrum-Body--sizeM {
610
+ --spectrum-body-font-size: var(--spectrum-body-size-m);
611
+ }
612
+ .spectrum-Body--sizeL {
613
+ --spectrum-body-font-size: var(--spectrum-body-size-l);
614
+ }
615
+ .spectrum-Body--sizeXL {
616
+ --spectrum-body-font-size: var(--spectrum-body-size-xl);
617
+ }
618
+ .spectrum-Body--sizeXXL {
619
+ --spectrum-body-font-size: var(--spectrum-body-size-xxl);
620
+ }
621
+ .spectrum-Body--sizeXXXL {
622
+ --spectrum-body-font-size: var(--spectrum-body-size-xxxl);
623
+ }
624
+ .spectrum-Body {
625
+ color: var(
626
+ --highcontrast-body-font-color,
627
+ var(--mod-body-font-color, var(--spectrum-body-font-color))
628
+ );
629
+ font-family: var(
630
+ --mod-body-sans-serif-font-family,
631
+ var(--spectrum-body-sans-serif-font-family)
632
+ );
633
+ font-size: var(--mod-body-font-size, var(--spectrum-body-font-size));
634
+ font-style: var(
635
+ --mod-body-sans-serif-font-style,
636
+ var(--spectrum-body-sans-serif-font-style)
637
+ );
638
+ font-weight: var(
639
+ --mod-body-sans-serif-font-weight,
640
+ var(--spectrum-body-sans-serif-font-weight)
641
+ );
642
+ line-height: var(--mod-body-line-height, var(--spectrum-body-line-height));
643
+ }
644
+ .spectrum-Body .spectrum-Body-strong,
645
+ .spectrum-Body strong {
646
+ font-style: var(
647
+ --mod-body-sans-serif-strong-font-style,
648
+ var(--spectrum-body-sans-serif-strong-font-style)
649
+ );
650
+ font-weight: var(
651
+ --mod-body-sans-serif-strong-font-weight,
652
+ var(--spectrum-body-sans-serif-strong-font-weight)
653
+ );
654
+ }
655
+ .spectrum-Body .spectrum-Body-emphasized,
656
+ .spectrum-Body em {
657
+ font-style: var(
658
+ --mod-body-sans-serif-emphasized-font-style,
659
+ var(--spectrum-body-sans-serif-emphasized-font-style)
660
+ );
661
+ font-weight: var(
662
+ --mod-body-sans-serif-emphasized-font-weight,
663
+ var(--spectrum-body-sans-serif-emphasized-font-weight)
664
+ );
665
+ }
666
+ .spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized,
667
+ .spectrum-Body em strong,
668
+ .spectrum-Body strong em {
669
+ font-style: var(
670
+ --mod-body-sans-serif-strong-emphasized-font-style,
671
+ var(--spectrum-body-sans-serif-strong-emphasized-font-style)
672
+ );
673
+ font-weight: var(
674
+ --mod-body-sans-serif-strong-emphasized-font-weight,
675
+ var(--spectrum-body-sans-serif-strong-emphasized-font-weight)
676
+ );
677
+ }
678
+ .spectrum-Body:lang(ja),
679
+ .spectrum-Body:lang(ko),
680
+ .spectrum-Body:lang(zh) {
681
+ font-family: var(
682
+ --mod-body-cjk-font-family,
683
+ var(--spectrum-body-cjk-font-family)
684
+ );
685
+ font-style: var(
686
+ --mod-body-cjk-font-style,
687
+ var(--spectrum-body-cjk-font-style)
688
+ );
689
+ font-weight: var(
690
+ --mod-body-cjk-font-weight,
691
+ var(--spectrum-body-cjk-font-weight)
692
+ );
693
+ letter-spacing: var(
694
+ --mod-body-cjk-letter-spacing,
695
+ var(--spectrum-body-cjk-letter-spacing)
696
+ );
697
+ line-height: var(
698
+ --mod-body-cjk-line-height,
699
+ var(--spectrum-body-cjk-line-height)
700
+ );
701
+ }
702
+ .spectrum-Body:lang(ja) .spectrum-Body-strong,
703
+ .spectrum-Body:lang(ja) strong,
704
+ .spectrum-Body:lang(ko) .spectrum-Body-strong,
705
+ .spectrum-Body:lang(ko) strong,
706
+ .spectrum-Body:lang(zh) .spectrum-Body-strong,
707
+ .spectrum-Body:lang(zh) strong {
708
+ font-style: var(
709
+ --mod-body-cjk-strong-font-style,
710
+ var(--spectrum-body-cjk-strong-font-style)
711
+ );
712
+ font-weight: var(
713
+ --mod-body-cjk-strong-font-weight,
714
+ var(--spectrum-body-cjk-strong-font-weight)
715
+ );
716
+ }
717
+ .spectrum-Body:lang(ja) .spectrum-Body-emphasized,
718
+ .spectrum-Body:lang(ja) em,
719
+ .spectrum-Body:lang(ko) .spectrum-Body-emphasized,
720
+ .spectrum-Body:lang(ko) em,
721
+ .spectrum-Body:lang(zh) .spectrum-Body-emphasized,
722
+ .spectrum-Body:lang(zh) em {
723
+ font-style: var(
724
+ --mod-body-cjk-emphasized-font-style,
725
+ var(--spectrum-body-cjk-emphasized-font-style)
726
+ );
727
+ font-weight: var(
728
+ --mod-body-cjk-emphasized-font-weight,
729
+ var(--spectrum-body-cjk-emphasized-font-weight)
730
+ );
731
+ }
732
+ .spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized,
733
+ .spectrum-Body:lang(ja) em strong,
734
+ .spectrum-Body:lang(ja) strong em,
735
+ .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized,
736
+ .spectrum-Body:lang(ko) em strong,
737
+ .spectrum-Body:lang(ko) strong em,
738
+ .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized,
739
+ .spectrum-Body:lang(zh) em strong,
740
+ .spectrum-Body:lang(zh) strong em {
741
+ font-style: var(
742
+ --mod-body-cjk-strong-emphasized-font-style,
743
+ var(--spectrum-body-cjk-strong-emphasized-font-style)
744
+ );
745
+ font-weight: var(
746
+ --mod-body-cjk-strong-emphasized-font-weight,
747
+ var(--spectrum-body-cjk-strong-emphasized-font-weight)
748
+ );
749
+ }
750
+ .spectrum-Body--serif {
751
+ font-family: var(
752
+ --mod-body-serif-font-family,
753
+ var(--spectrum-body-serif-font-family)
754
+ );
755
+ font-style: var(
756
+ --mod-body-serif-font-style,
757
+ var(--spectrum-body-serif-font-style)
758
+ );
759
+ font-weight: var(
760
+ --mod-body-serif-font-weight,
761
+ var(--spectrum-body-serif-font-weight)
762
+ );
763
+ }
764
+ .spectrum-Body--serif .spectrum-Body-strong,
765
+ .spectrum-Body--serif strong {
766
+ font-style: var(
767
+ --mod-body-serif-strong-font-style,
768
+ var(--spectrum-body-serif-strong-font-style)
769
+ );
770
+ font-weight: var(
771
+ --mod-body-serif-strong-font-weight,
772
+ var(--spectrum-body-serif-strong-font-weight)
773
+ );
774
+ }
775
+ .spectrum-Body--serif .spectrum-Body-emphasized,
776
+ .spectrum-Body--serif em {
777
+ font-style: var(
778
+ --mod-body-serif-emphasized-font-style,
779
+ var(--spectrum-body-serif-emphasized-font-style)
780
+ );
781
+ font-weight: var(
782
+ --mod-body-serif-emphasized-font-weight,
783
+ var(--spectrum-body-serif-emphasized-font-weight)
784
+ );
785
+ }
786
+ .spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized,
787
+ .spectrum-Body--serif em strong,
788
+ .spectrum-Body--serif strong em {
789
+ font-style: var(
790
+ --mod-body-serif-strong-emphasized-font-style,
791
+ var(--spectrum-body-serif-strong-emphasized-font-style)
792
+ );
793
+ font-weight: var(
794
+ --mod-body-serif-strong-emphasized-font-weight,
795
+ var(--spectrum-body-serif-strong-emphasized-font-weight)
796
+ );
797
+ }
798
+ .spectrum-Typography .spectrum-Body {
799
+ margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin));
800
+ }
801
+ .spectrum-Detail {
802
+ --spectrum-detail-sans-serif-font-family: var(
803
+ --spectrum-sans-font-family-stack
804
+ );
805
+ --spectrum-detail-serif-font-family: var(
806
+ --spectrum-serif-font-family-stack
807
+ );
808
+ --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack);
809
+ --spectrum-detail-margin-start: calc(
810
+ var(--mod-detail-font-size, var(--spectrum-detail-font-size)) *
811
+ var(--spectrum-detail-margin-top-multiplier)
812
+ );
813
+ --spectrum-detail-margin-end: calc(
814
+ var(--mod-detail-font-size, var(--spectrum-detail-font-size)) *
815
+ var(--spectrum-detail-margin-bottom-multiplier)
816
+ );
817
+ --spectrum-detail-font-color: var(--spectrum-detail-color);
818
+ }
819
+ @media (forced-colors: active) {
820
+ .spectrum-Detail {
821
+ --highcontrast-detail-font-color: Text;
822
+ }
823
+ }
824
+ .spectrum-Detail--sizeS {
825
+ --spectrum-detail-font-size: var(--spectrum-detail-size-s);
826
+ }
827
+ .spectrum-Detail--sizeM {
828
+ --spectrum-detail-font-size: var(--spectrum-detail-size-m);
829
+ }
830
+ .spectrum-Detail--sizeL {
831
+ --spectrum-detail-font-size: var(--spectrum-detail-size-l);
832
+ }
833
+ .spectrum-Detail--sizeXL {
834
+ --spectrum-detail-font-size: var(--spectrum-detail-size-xl);
835
+ }
836
+ .spectrum-Detail {
837
+ color: var(
838
+ --highcontrast-detail-font-color,
839
+ var(--mod-detail-font-color, var(--spectrum-detail-font-color))
840
+ );
841
+ font-family: var(
842
+ --mod-detail-sans-serif-font-family,
843
+ var(--spectrum-detail-sans-serif-font-family)
844
+ );
845
+ font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size));
846
+ font-style: var(
847
+ --mod-detail-sans-serif-font-style,
848
+ var(--spectrum-detail-sans-serif-font-style)
849
+ );
850
+ font-weight: var(
851
+ --mod-detail-sans-serif-font-weight,
852
+ var(--spectrum-detail-sans-serif-font-weight)
853
+ );
854
+ letter-spacing: var(
855
+ --mod-detail-letter-spacing,
856
+ var(--spectrum-detail-letter-spacing)
857
+ );
858
+ line-height: var(
859
+ --mod-detail-line-height,
860
+ var(--spectrum-detail-line-height)
861
+ );
862
+ text-transform: uppercase;
863
+ }
864
+ .spectrum-Detail .spectrum-Detail-strong,
865
+ .spectrum-Detail strong {
866
+ font-style: var(
867
+ --mod-detail-sans-serif-strong-font-style,
868
+ var(--spectrum-detail-sans-serif-strong-font-style)
869
+ );
870
+ font-weight: var(
871
+ --mod-detail-sans-serif-strong-font-weight,
872
+ var(--spectrum-detail-sans-serif-strong-font-weight)
873
+ );
874
+ }
875
+ .spectrum-Detail .spectrum-Detail-emphasized,
876
+ .spectrum-Detail em {
877
+ font-style: var(
878
+ --mod-detail-sans-serif-emphasized-font-style,
879
+ var(--spectrum-detail-sans-serif-emphasized-font-style)
880
+ );
881
+ font-weight: var(
882
+ --mod-detail-sans-serif-emphasized-font-weight,
883
+ var(--spectrum-detail-sans-serif-emphasized-font-weight)
884
+ );
885
+ }
886
+ .spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized,
887
+ .spectrum-Detail em strong,
888
+ .spectrum-Detail strong em {
889
+ font-style: var(
890
+ --mod-detail-sans-serif-strong-emphasized-font-style,
891
+ var(--spectrum-detail-sans-serif-strong-emphasized-font-style)
892
+ );
893
+ font-weight: var(
894
+ --mod-detail-sans-serif-strong-emphasized-font-weight,
895
+ var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)
896
+ );
897
+ }
898
+ .spectrum-Detail:lang(ja),
899
+ .spectrum-Detail:lang(ko),
900
+ .spectrum-Detail:lang(zh) {
901
+ font-family: var(
902
+ --mod-detail-cjk-font-family,
903
+ var(--spectrum-detail-cjk-font-family)
904
+ );
905
+ font-style: var(
906
+ --mod-detail-cjk-font-style,
907
+ var(--spectrum-detail-cjk-font-style)
908
+ );
909
+ font-weight: var(
910
+ --mod-detail-cjk-font-weight,
911
+ var(--spectrum-detail-cjk-font-weight)
912
+ );
913
+ line-height: var(
914
+ --mod-detail-cjk-line-height,
915
+ var(--spectrum-detail-cjk-line-height)
916
+ );
917
+ }
918
+ .spectrum-Detail:lang(ja) .spectrum-Detail-strong,
919
+ .spectrum-Detail:lang(ja) strong,
920
+ .spectrum-Detail:lang(ko) .spectrum-Detail-strong,
921
+ .spectrum-Detail:lang(ko) strong,
922
+ .spectrum-Detail:lang(zh) .spectrum-Detail-strong,
923
+ .spectrum-Detail:lang(zh) strong {
924
+ font-style: var(
925
+ --mod-detail-cjk-strong-font-style,
926
+ var(--spectrum-detail-cjk-strong-font-style)
927
+ );
928
+ font-weight: var(
929
+ --mod-detail-cjk-strong-font-weight,
930
+ var(--spectrum-detail-cjk-strong-font-weight)
931
+ );
932
+ }
933
+ .spectrum-Detail:lang(ja) .spectrum-Detail-emphasized,
934
+ .spectrum-Detail:lang(ja) em,
935
+ .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized,
936
+ .spectrum-Detail:lang(ko) em,
937
+ .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized,
938
+ .spectrum-Detail:lang(zh) em {
939
+ font-style: var(
940
+ --mod-detail-cjk-emphasized-font-style,
941
+ var(--spectrum-detail-cjk-emphasized-font-style)
942
+ );
943
+ font-weight: var(
944
+ --mod-detail-cjk-emphasized-font-weight,
945
+ var(--spectrum-detail-cjk-emphasized-font-weight)
946
+ );
947
+ }
948
+ .spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
949
+ .spectrum-Detail:lang(ja) em strong,
950
+ .spectrum-Detail:lang(ja) strong em,
951
+ .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
952
+ .spectrum-Detail:lang(ko) em strong,
953
+ .spectrum-Detail:lang(ko) strong em,
954
+ .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized,
955
+ .spectrum-Detail:lang(zh) em strong,
956
+ .spectrum-Detail:lang(zh) strong em {
957
+ font-style: var(
958
+ --mod-detail-cjk-strong-emphasized-font-style,
959
+ var(--spectrum-detail-cjk-strong-emphasized-font-style)
960
+ );
961
+ font-weight: var(
962
+ --mod-detail-cjk-strong-emphasized-font-weight,
963
+ var(--spectrum-detail-cjk-strong-emphasized-font-weight)
964
+ );
965
+ }
966
+ .spectrum-Detail--serif {
967
+ font-family: var(
968
+ --mod-detail-serif-font-family,
969
+ var(--spectrum-detail-serif-font-family)
970
+ );
971
+ font-style: var(
972
+ --mod-detail-serif-font-style,
973
+ var(--spectrum-detail-serif-font-style)
974
+ );
975
+ font-weight: var(
976
+ --mod-detail-serif-font-weight,
977
+ var(--spectrum-detail-serif-font-weight)
978
+ );
979
+ }
980
+ .spectrum-Detail--serif .spectrum-Detail-strong,
981
+ .spectrum-Detail--serif strong {
982
+ font-style: var(
983
+ --mod-detail-serif-strong-font-style,
984
+ var(--spectrum-detail-serif-strong-font-style)
985
+ );
986
+ font-weight: var(
987
+ --mod-detail-serif-strong-font-weight,
988
+ var(--spectrum-detail-serif-strong-font-weight)
989
+ );
990
+ }
991
+ .spectrum-Detail--serif .spectrum-Detail-emphasized,
992
+ .spectrum-Detail--serif em {
993
+ font-style: var(
994
+ --mod-detail-serif-emphasized-font-style,
995
+ var(--spectrum-detail-serif-emphasized-font-style)
996
+ );
997
+ font-weight: var(
998
+ --mod-detail-serif-emphasized-font-weight,
999
+ var(--spectrum-detail-serif-emphasized-font-weight)
1000
+ );
1001
+ }
1002
+ .spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized,
1003
+ .spectrum-Detail--serif em strong,
1004
+ .spectrum-Detail--serif strong em {
1005
+ font-style: var(
1006
+ --mod-detail-serif-strong-emphasized-font-style,
1007
+ var(--spectrum-detail-serif-strong-emphasized-font-style)
1008
+ );
1009
+ font-weight: var(
1010
+ --mod-detail-serif-strong-emphasized-font-weight,
1011
+ var(--spectrum-detail-serif-strong-emphasized-font-weight)
1012
+ );
1013
+ }
1014
+ .spectrum-Detail--light {
1015
+ font-style: var(
1016
+ --mod-detail-sans-serif-light-font-style,
1017
+ var(--spectrum-detail-sans-serif-light-font-style)
1018
+ );
1019
+ font-weight: var(
1020
+ --spectrum-detail-sans-serif-light-font-weight,
1021
+ var(--spectrum-detail-sans-serif-light-font-weight)
1022
+ );
1023
+ }
1024
+ .spectrum-Detail--light .spectrum-Detail-strong,
1025
+ .spectrum-Detail--light strong {
1026
+ font-style: var(
1027
+ --mod-detail-sans-serif-light-strong-font-style,
1028
+ var(--spectrum-detail-sans-serif-light-strong-font-style)
1029
+ );
1030
+ font-weight: var(
1031
+ --mod-detail-sans-serif-light-strong-font-weight,
1032
+ var(--spectrum-detail-sans-serif-light-strong-font-weight)
1033
+ );
1034
+ }
1035
+ .spectrum-Detail--light .spectrum-Detail-emphasized,
1036
+ .spectrum-Detail--light em {
1037
+ font-style: var(
1038
+ --mod-detail-sans-serif-light-emphasized-font-style,
1039
+ var(--spectrum-detail-sans-serif-light-emphasized-font-style)
1040
+ );
1041
+ font-weight: var(
1042
+ --mod-detail-sans-serif-light-emphasized-font-weight,
1043
+ var(--spectrum-detail-sans-serif-light-emphasized-font-weight)
1044
+ );
1045
+ }
1046
+ .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized,
1047
+ .spectrum-Detail--light em strong,
1048
+ .spectrum-Detail--light strong em {
1049
+ font-style: var(
1050
+ --mod-detail-sans-serif-light-strong-emphasized-font-style,
1051
+ var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)
1052
+ );
1053
+ font-weight: var(
1054
+ --mod-detail-sans-serif-light-strong-emphasized-font-weight,
1055
+ var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)
1056
+ );
1057
+ }
1058
+ .spectrum-Detail--light:lang(ja),
1059
+ .spectrum-Detail--light:lang(ko),
1060
+ .spectrum-Detail--light:lang(zh) {
1061
+ font-style: var(
1062
+ --mod-detail-cjk-light-font-style,
1063
+ var(--spectrum-detail-cjk-light-font-style)
1064
+ );
1065
+ font-weight: var(
1066
+ --mod-detail-cjk-light-font-weight,
1067
+ var(--spectrum-detail-cjk-light-font-weight)
1068
+ );
1069
+ }
1070
+ .spectrum-Detail--light:lang(ja) .spectrum-Detail-strong,
1071
+ .spectrum-Detail--light:lang(ja) strong,
1072
+ .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong,
1073
+ .spectrum-Detail--light:lang(ko) strong,
1074
+ .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong,
1075
+ .spectrum-Detail--light:lang(zh) strong {
1076
+ font-style: var(
1077
+ --mod-detail-cjk-light-strong-font-style,
1078
+ var(--spectrum-detail-cjk-light-strong-font-style)
1079
+ );
1080
+ font-weight: var(
1081
+ --mod-detail-cjk-light-strong-font-weight,
1082
+ var(--spectrum-detail-cjk-light-strong-font-weight)
1083
+ );
1084
+ }
1085
+ .spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized,
1086
+ .spectrum-Detail--light:lang(ja) em,
1087
+ .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized,
1088
+ .spectrum-Detail--light:lang(ko) em,
1089
+ .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized,
1090
+ .spectrum-Detail--light:lang(zh) em {
1091
+ font-style: var(
1092
+ --mod-detail-cjk-light-emphasized-font-style,
1093
+ var(--spectrum-detail-cjk-light-emphasized-font-style)
1094
+ );
1095
+ font-weight: var(
1096
+ --mod-detail-cjk-light-emphasized-font-weight,
1097
+ var(--spectrum-detail-cjk-light-emphasized-font-weight)
1098
+ );
1099
+ }
1100
+ .spectrum-Detail--light:lang(ja)
1101
+ .spectrum-Detail-strong.spectrum-Detail-emphasized,
1102
+ .spectrum-Detail--light:lang(ko)
1103
+ .spectrum-Detail-strong.spectrum-Detail-emphasized,
1104
+ .spectrum-Detail--light:lang(zh)
1105
+ .spectrum-Detail-strong.spectrum-Detail-emphasized {
1106
+ font-style: var(
1107
+ --mod-detail-cjk-light-strong-emphasized-font-style,
1108
+ var(--spectrum-detail-cjk-light-strong-emphasized-font-style)
1109
+ );
1110
+ font-weight: var(
1111
+ --mod-detail-cjk-light-strong-emphasized-font-weight,
1112
+ var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)
1113
+ );
1114
+ }
1115
+ .spectrum-Detail--serif.spectrum-Detail--light {
1116
+ font-style: var(
1117
+ --mod-detail-serif-light-font-style,
1118
+ var(--spectrum-detail-serif-light-font-style)
1119
+ );
1120
+ font-weight: var(
1121
+ --mod-detail-serif-light-font-weight,
1122
+ var(--spectrum-detail-serif-light-font-weight)
1123
+ );
1124
+ }
1125
+ .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong,
1126
+ .spectrum-Detail--serif.spectrum-Detail--light strong {
1127
+ font-style: var(
1128
+ --mod-detail-serif-light-strong-font-style,
1129
+ var(--spectrum-detail-serif-light-strong-font-style)
1130
+ );
1131
+ font-weight: var(
1132
+ --mod-detail-serif-light-strong-font-weight,
1133
+ var(--spectrum-detail-serif-light-strong-font-weight)
1134
+ );
1135
+ }
1136
+ .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized,
1137
+ .spectrum-Detail--serif.spectrum-Detail--light em {
1138
+ font-style: var(
1139
+ --mod-detail-serif-light-emphasized-font-style,
1140
+ var(--spectrum-detail-serif-light-emphasized-font-style)
1141
+ );
1142
+ font-weight: var(
1143
+ --mod-detail-serif-light-emphasized-font-weight,
1144
+ var(--spectrum-detail-serif-light-emphasized-font-weight)
1145
+ );
1146
+ }
1147
+ .spectrum-Detail--serif.spectrum-Detail--light
1148
+ .spectrum-Detail-strong.spectrum-Body-emphasized,
1149
+ .spectrum-Detail--serif.spectrum-Detail--light em strong,
1150
+ .spectrum-Detail--serif.spectrum-Detail--light strong em {
1151
+ font-style: var(
1152
+ --mod-detail-serif-light-strong-emphasized-font-style,
1153
+ var(--spectrum-detail-serif-light-strong-emphasized-font-style)
1154
+ );
1155
+ font-weight: var(
1156
+ --mod-detail-serif-light-strong-emphasized-font-weight,
1157
+ var(--spectrum-detail-serif-light-strong-emphasized-font-weight)
1158
+ );
1159
+ }
1160
+ .spectrum-Typography .spectrum-Detail {
1161
+ margin-block-end: var(
1162
+ --mod-detail-margin-end,
1163
+ var(--spectrum-detail-margin-end)
1164
+ );
1165
+ margin-block-start: var(
1166
+ --mod-detail-margin-start,
1167
+ var(--spectrum-detail-margin-start)
1168
+ );
1169
+ }
1170
+ .spectrum-Code {
1171
+ --spectrum-code-font-family: var(--spectrum-code-font-family-stack);
1172
+ --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
1173
+ --spectrum-code-font-color: var(--spectrum-code-color);
1174
+ }
1175
+ @media (forced-colors: active) {
1176
+ .spectrum-Code {
1177
+ --highcontrast-code-font-color: Text;
1178
+ }
1179
+ }
1180
+ .spectrum-Code--sizeXS {
1181
+ --spectrum-code-font-size: var(--spectrum-code-size-xs);
1182
+ }
1183
+ .spectrum-Code--sizeS {
1184
+ --spectrum-code-font-size: var(--spectrum-code-size-s);
1185
+ }
1186
+ .spectrum-Code--sizeM {
1187
+ --spectrum-code-font-size: var(--spectrum-code-size-m);
1188
+ }
1189
+ .spectrum-Code--sizeL {
1190
+ --spectrum-code-font-size: var(--spectrum-code-size-l);
1191
+ }
1192
+ .spectrum-Code--sizeXL {
1193
+ --spectrum-code-font-size: var(--spectrum-code-size-xl);
1194
+ }
1195
+ .spectrum-Code {
1196
+ color: var(
1197
+ --highcontrast-code-font-color,
1198
+ var(--mod-code-font-color, var(--spectrum-code-font-color))
1199
+ );
1200
+ font-family: var(--mod-code-font-family, var(--spectrum-code-font-family));
1201
+ font-size: var(--mod-code-font-size, var(--spectrum-code-font-size));
1202
+ font-style: var(--mod-code-font-style, var(--spectrum-code-font-style));
1203
+ font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight));
1204
+ line-height: var(--mod-code-line-height, var(--spectrum-code-line-height));
1205
+ }
1206
+ .spectrum-Code .spectrum-Code-strong,
1207
+ .spectrum-Code strong {
1208
+ font-style: var(
1209
+ --mod-code-strong-font-style,
1210
+ var(--spectrum-code-strong-font-style)
1211
+ );
1212
+ font-weight: var(
1213
+ --mod-code-strong-font-weight,
1214
+ var(--spectrum-code-strong-font-weight)
1215
+ );
1216
+ }
1217
+ .spectrum-Code .spectrum-Code-emphasized,
1218
+ .spectrum-Code em {
1219
+ font-style: var(
1220
+ --mod-code-emphasized-font-style,
1221
+ var(--spectrum-code-emphasized-font-style)
1222
+ );
1223
+ font-weight: var(
1224
+ --mod-code-emphasized-font-weight,
1225
+ var(--spectrum-code-emphasized-font-weight)
1226
+ );
1227
+ }
1228
+ .spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized,
1229
+ .spectrum-Code em strong,
1230
+ .spectrum-Code strong em {
1231
+ font-style: var(
1232
+ --mod-code-strong-emphasized-font-style,
1233
+ var(--spectrum-code-strong-emphasized-font-style)
1234
+ );
1235
+ font-weight: var(
1236
+ --mod-code-strong-emphasized-font-weight,
1237
+ var(--spectrum-code-strong-emphasized-font-weight)
1238
+ );
1239
+ }
1240
+ .spectrum-Code:lang(ja),
1241
+ .spectrum-Code:lang(ko),
1242
+ .spectrum-Code:lang(zh) {
1243
+ font-family: var(
1244
+ --mod-code-cjk-font-family,
1245
+ var(--spectrum-code-cjk-font-family)
1246
+ );
1247
+ font-style: var(
1248
+ --mod-code-cjk-font-style,
1249
+ var(--spectrum-code-cjk-font-style)
1250
+ );
1251
+ font-weight: var(
1252
+ --mod-code-cjk-font-weight,
1253
+ var(--spectrum-code-cjk-font-weight)
1254
+ );
1255
+ letter-spacing: var(
1256
+ --mod-code-cjk-letter-spacing,
1257
+ var(--spectrum-code-cjk-letter-spacing)
1258
+ );
1259
+ line-height: var(
1260
+ --mod-code-cjk-line-height,
1261
+ var(--spectrum-code-cjk-line-height)
1262
+ );
1263
+ }
1264
+ .spectrum-Code:lang(ja) .spectrum-Code-strong,
1265
+ .spectrum-Code:lang(ja) strong,
1266
+ .spectrum-Code:lang(ko) .spectrum-Code-strong,
1267
+ .spectrum-Code:lang(ko) strong,
1268
+ .spectrum-Code:lang(zh) .spectrum-Code-strong,
1269
+ .spectrum-Code:lang(zh) strong {
1270
+ font-style: var(
1271
+ --mod-code-cjk-strong-font-style,
1272
+ var(--spectrum-code-cjk-strong-font-style)
1273
+ );
1274
+ font-weight: var(
1275
+ --mod-code-cjk-strong-font-weight,
1276
+ var(--spectrum-code-cjk-strong-font-weight)
1277
+ );
1278
+ }
1279
+ .spectrum-Code:lang(ja) .spectrum-Code-emphasized,
1280
+ .spectrum-Code:lang(ja) em,
1281
+ .spectrum-Code:lang(ko) .spectrum-Code-emphasized,
1282
+ .spectrum-Code:lang(ko) em,
1283
+ .spectrum-Code:lang(zh) .spectrum-Code-emphasized,
1284
+ .spectrum-Code:lang(zh) em {
1285
+ font-style: var(
1286
+ --mod-code-cjk-emphasized-font-style,
1287
+ var(--spectrum-code-cjk-emphasized-font-style)
1288
+ );
1289
+ font-weight: var(
1290
+ --mod-code-cjk-emphasized-font-weight,
1291
+ var(--spectrum-code-cjk-emphasized-font-weight)
1292
+ );
1293
+ }
1294
+ .spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized,
1295
+ .spectrum-Code:lang(ja) em strong,
1296
+ .spectrum-Code:lang(ja) strong em,
1297
+ .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized,
1298
+ .spectrum-Code:lang(ko) em strong,
1299
+ .spectrum-Code:lang(ko) strong em,
1300
+ .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized,
1301
+ .spectrum-Code:lang(zh) em strong,
1302
+ .spectrum-Code:lang(zh) strong em {
1303
+ font-style: var(
1304
+ --mod-code-cjk-strong-emphasized-font-style,
1305
+ var(--spectrum-code-cjk-strong-emphasized-font-style)
1306
+ );
1307
+ font-weight: var(
1308
+ --mod-code-cjk-strong-emphasized-font-weight,
1309
+ var(--spectrum-code-cjk-strong-emphasized-font-weight)
1310
+ );
1311
+ }