@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/src/spectrum-heading.css CHANGED
@@ -11,473 +11,554 @@ governing permissions and limitations under the License.
11
11
  */
12
12
 
13
13
  /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14
- .spectrum-Heading--sizeXXXL {
15
- font-size: var(
16
- --spectrum-heading-xxxl-text-size,
17
- var(--spectrum-alias-heading-xxxl-text-size)
18
- );
19
- font-style: var(
20
- --spectrum-heading-xxxl-text-font-style,
21
- var(--spectrum-global-font-style-regular)
14
+ .spectrum-Heading {
15
+ --spectrum-heading-sans-serif-font-family: var(
16
+ --spectrum-sans-font-family-stack
22
17
  );
23
- font-weight: var(
24
- --spectrum-heading-xxxl-text-font-weight,
25
- var(--spectrum-alias-heading-text-font-weight-regular)
18
+ --spectrum-heading-serif-font-family: var(
19
+ --spectrum-serif-font-family-stack
26
20
  );
27
- letter-spacing: var(
28
- --spectrum-heading-xxxl-text-letter-spacing,
29
- var(--spectrum-global-font-letter-spacing-none)
21
+ --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack);
22
+ --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing);
23
+ --spectrum-heading-font-color: var(--spectrum-heading-color);
24
+ --spectrum-heading-margin-start: calc(
25
+ var(--mod-heading-font-size, var(--spectrum-heading-font-size)) *
26
+ var(--spectrum-heading-margin-top-multiplier)
30
27
  );
31
- line-height: var(
32
- --spectrum-heading-xxxl-text-line-height,
33
- var(--spectrum-alias-heading-text-line-height)
28
+ --spectrum-heading-margin-end: calc(
29
+ var(--mod-heading-font-size, var(--spectrum-heading-font-size)) *
30
+ var(--spectrum-heading-margin-bottom-multiplier)
34
31
  );
35
- margin-bottom: 0;
36
- margin-top: 0;
37
- text-transform: var(--spectrum-heading-xxxl-text-transform, none);
32
+ }
33
+ @media (forced-colors: active) {
34
+ .spectrum-Heading {
35
+ --highcontrast-heading-font-color: Text;
36
+ }
37
+ }
38
+ .spectrum-Heading--sizeXXS {
39
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xxs);
40
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs);
41
+ }
42
+ .spectrum-Heading--sizeXS {
43
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xs);
44
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs);
45
+ }
46
+ .spectrum-Heading--sizeS {
47
+ --spectrum-heading-font-size: var(--spectrum-heading-size-s);
48
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
49
+ }
50
+ .spectrum-Heading--sizeM {
51
+ --spectrum-heading-font-size: var(--spectrum-heading-size-m);
52
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m);
53
+ }
54
+ .spectrum-Heading--sizeL {
55
+ --spectrum-heading-font-size: var(--spectrum-heading-size-l);
56
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l);
57
+ }
58
+ .spectrum-Heading--sizeXL {
59
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xl);
60
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl);
38
61
  }
39
62
  .spectrum-Heading--sizeXXL {
40
- font-size: var(
41
- --spectrum-heading-xxl-text-size,
42
- var(--spectrum-alias-heading-xxl-text-size)
63
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xxl);
64
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl);
65
+ }
66
+ .spectrum-Heading--sizeXXXL {
67
+ --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl);
68
+ --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl);
69
+ }
70
+ .spectrum-Heading {
71
+ color: var(
72
+ --highcontrast-heading-font-color,
73
+ var(--mod-heading-font-color, var(--spectrum-heading-font-color))
43
74
  );
75
+ font-family: var(
76
+ --mod-heading-sans-serif-font-family,
77
+ var(--spectrum-heading-sans-serif-font-family)
78
+ );
79
+ font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size));
44
80
  font-style: var(
45
- --spectrum-heading-xxl-text-font-style,
46
- var(--spectrum-global-font-style-regular)
81
+ --mod-heading-sans-serif-font-style,
82
+ var(--spectrum-heading-sans-serif-font-style)
47
83
  );
48
84
  font-weight: var(
49
- --spectrum-heading-xxl-text-font-weight,
50
- var(--spectrum-alias-heading-text-font-weight-regular)
51
- );
52
- letter-spacing: var(
53
- --spectrum-heading-xxl-text-letter-spacing,
54
- var(--spectrum-global-font-letter-spacing-none)
85
+ --mod-heading-sans-serif-font-weight,
86
+ var(--spectrum-heading-sans-serif-font-weight)
55
87
  );
56
88
  line-height: var(
57
- --spectrum-heading-xxl-text-line-height,
58
- var(--spectrum-alias-heading-text-line-height)
89
+ --mod-heading-line-height,
90
+ var(--spectrum-heading-line-height)
59
91
  );
60
- margin-bottom: 0;
61
- margin-top: 0;
62
- text-transform: var(--spectrum-heading-xxl-text-transform, none);
63
92
  }
64
- .spectrum-Heading--sizeXL {
65
- font-size: var(
66
- --spectrum-heading-xl-text-size,
67
- var(--spectrum-alias-heading-xl-text-size)
68
- );
93
+ .spectrum-Heading .spectrum-Heading-strong,
94
+ .spectrum-Heading strong {
69
95
  font-style: var(
70
- --spectrum-heading-xl-text-font-style,
71
- var(--spectrum-global-font-style-regular)
96
+ --mod-heading-sans-serif-strong-font-style,
97
+ var(--spectrum-heading-sans-serif-strong-font-style)
72
98
  );
73
99
  font-weight: var(
74
- --spectrum-heading-xl-text-font-weight,
75
- var(--spectrum-alias-heading-text-font-weight-regular)
100
+ --mod-heading-sans-serif-strong-font-weight,
101
+ var(--spectrum-heading-sans-serif-strong-font-weight)
76
102
  );
77
- letter-spacing: var(
78
- --spectrum-heading-xl-text-letter-spacing,
79
- var(--spectrum-global-font-letter-spacing-none)
80
- );
81
- line-height: var(
82
- --spectrum-heading-xl-text-line-height,
83
- var(--spectrum-alias-heading-text-line-height)
84
- );
85
- margin-bottom: 0;
86
- margin-top: 0;
87
- text-transform: var(--spectrum-heading-xl-text-transform, none);
88
103
  }
89
- .spectrum-Heading--sizeL {
90
- font-size: var(
91
- --spectrum-heading-l-text-size,
92
- var(--spectrum-alias-heading-l-text-size)
93
- );
104
+ .spectrum-Heading .spectrum-Heading-emphasized,
105
+ .spectrum-Heading em {
94
106
  font-style: var(
95
- --spectrum-heading-l-text-font-style,
96
- var(--spectrum-global-font-style-regular)
107
+ --mod-heading-sans-serif-emphasized-font-style,
108
+ var(--spectrum-heading-sans-serif-emphasized-font-style)
97
109
  );
98
110
  font-weight: var(
99
- --spectrum-heading-l-text-font-weight,
100
- var(--spectrum-alias-heading-text-font-weight-regular)
111
+ --mod-heading-sans-serif-emphasized-font-weight,
112
+ var(--spectrum-heading-sans-serif-emphasized-font-weight)
101
113
  );
102
- letter-spacing: var(
103
- --spectrum-heading-l-text-letter-spacing,
104
- var(--spectrum-global-font-letter-spacing-none)
114
+ }
115
+ .spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized,
116
+ .spectrum-Heading em strong,
117
+ .spectrum-Heading strong em {
118
+ font-style: var(
119
+ --mod-heading-sans-serif-strong-emphasized-font-style,
120
+ var(--spectrum-heading-sans-serif-strong-emphasized-font-style)
105
121
  );
106
- line-height: var(
107
- --spectrum-heading-l-text-line-height,
108
- var(--spectrum-alias-heading-text-line-height)
122
+ font-weight: var(
123
+ --mod-heading-sans-serif-strong-emphasized-font-weight,
124
+ var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)
109
125
  );
110
- margin-bottom: 0;
111
- margin-top: 0;
112
- text-transform: var(--spectrum-heading-l-text-transform, none);
113
126
  }
114
- .spectrum-Heading--sizeM {
127
+ .spectrum-Heading:lang(ja),
128
+ .spectrum-Heading:lang(ko),
129
+ .spectrum-Heading:lang(zh) {
130
+ font-family: var(
131
+ --mod-heading-cjk-font-family,
132
+ var(--spectrum-heading-cjk-font-family)
133
+ );
115
134
  font-size: var(
116
- --spectrum-heading-m-text-size,
117
- var(--spectrum-alias-heading-m-text-size)
135
+ --mod-heading-cjk-font-size,
136
+ var(--spectrum-heading-cjk-font-size)
118
137
  );
119
138
  font-style: var(
120
- --spectrum-heading-m-text-font-style,
121
- var(--spectrum-global-font-style-regular)
139
+ --mod-heading-cjk-font-style,
140
+ var(--spectrum-heading-cjk-font-style)
122
141
  );
123
142
  font-weight: var(
124
- --spectrum-heading-m-text-font-weight,
125
- var(--spectrum-alias-heading-text-font-weight-regular)
143
+ --mod-heading-cjk-font-weight,
144
+ var(--spectrum-heading-cjk-font-weight)
126
145
  );
127
146
  letter-spacing: var(
128
- --spectrum-heading-m-text-letter-spacing,
129
- var(--spectrum-global-font-letter-spacing-none)
147
+ --mod-heading-cjk-letter-spacing,
148
+ var(--spectrum-heading-cjk-letter-spacing)
130
149
  );
131
150
  line-height: var(
132
- --spectrum-heading-m-text-line-height,
133
- var(--spectrum-alias-heading-text-line-height)
151
+ --mod-heading-cjk-line-height,
152
+ var(--spectrum-heading-cjk-line-height)
134
153
  );
135
- margin-bottom: 0;
136
- margin-top: 0;
137
- text-transform: var(--spectrum-heading-m-text-transform, none);
138
154
  }
139
- .spectrum-Heading--sizeS {
140
- font-size: var(
141
- --spectrum-heading-s-text-size,
142
- var(--spectrum-alias-heading-s-text-size)
143
- );
155
+ .spectrum-Heading:lang(ja) .spectrum-Heading-emphasized,
156
+ .spectrum-Heading:lang(ja) em,
157
+ .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized,
158
+ .spectrum-Heading:lang(ko) em,
159
+ .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized,
160
+ .spectrum-Heading:lang(zh) em {
144
161
  font-style: var(
145
- --spectrum-heading-s-text-font-style,
146
- var(--spectrum-global-font-style-regular)
162
+ --mod-heading-cjk-emphasized-font-style,
163
+ var(--spectrum-heading-cjk-emphasized-font-style)
147
164
  );
148
165
  font-weight: var(
149
- --spectrum-heading-s-text-font-weight,
150
- var(--spectrum-alias-heading-text-font-weight-regular)
166
+ --mod-heading-cjk-emphasized-font-weight,
167
+ var(--spectrum-heading-cjk-emphasized-font-weight)
151
168
  );
152
- letter-spacing: var(
153
- --spectrum-heading-s-text-letter-spacing,
154
- var(--spectrum-global-font-letter-spacing-none)
155
- );
156
- line-height: var(
157
- --spectrum-heading-s-text-line-height,
158
- var(--spectrum-alias-heading-text-line-height)
159
- );
160
- margin-bottom: 0;
161
- margin-top: 0;
162
- text-transform: var(--spectrum-heading-s-text-transform, none);
163
169
  }
164
- .spectrum-Heading--sizeXS {
165
- font-size: var(
166
- --spectrum-heading-xs-text-size,
167
- var(--spectrum-alias-heading-xs-text-size)
170
+ .spectrum-Heading:lang(ja) .spectrum-Heading-strong,
171
+ .spectrum-Heading:lang(ja) strong,
172
+ .spectrum-Heading:lang(ko) .spectrum-Heading-strong,
173
+ .spectrum-Heading:lang(ko) strong,
174
+ .spectrum-Heading:lang(zh) .spectrum-Heading-strong,
175
+ .spectrum-Heading:lang(zh) strong {
176
+ font-style: var(
177
+ --mod-heading-cjk-strong-font-style,
178
+ var(--spectrum-heading-cjk-strong-font-style)
168
179
  );
180
+ font-weight: var(
181
+ --mod-heading-cjk-strong-font-weight,
182
+ var(--spectrum-heading-cjk-strong-font-weight)
183
+ );
184
+ }
185
+ .spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized,
186
+ .spectrum-Heading:lang(ja) em strong,
187
+ .spectrum-Heading:lang(ja) strong em,
188
+ .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized,
189
+ .spectrum-Heading:lang(ko) em strong,
190
+ .spectrum-Heading:lang(ko) strong em,
191
+ .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized,
192
+ .spectrum-Heading:lang(zh) em strong,
193
+ .spectrum-Heading:lang(zh) strong em {
169
194
  font-style: var(
170
- --spectrum-heading-xs-text-font-style,
171
- var(--spectrum-global-font-style-regular)
195
+ --mod-heading-cjk-strong-emphasized-font-style,
196
+ var(--spectrum-heading-cjk-strong-emphasized-font-style)
172
197
  );
173
198
  font-weight: var(
174
- --spectrum-heading-xs-text-font-weight,
175
- var(--spectrum-alias-heading-text-font-weight-regular)
199
+ --mod-heading-cjk-strong-emphasized-font-weight,
200
+ var(--spectrum-heading-cjk-strong-emphasized-font-weight)
176
201
  );
177
- letter-spacing: var(
178
- --spectrum-heading-xs-text-letter-spacing,
179
- var(--spectrum-global-font-letter-spacing-none)
202
+ }
203
+ .spectrum-Heading--heavy {
204
+ font-style: var(
205
+ --mod-heading-sans-serif-heavy-font-style,
206
+ var(--spectrum-heading-sans-serif-heavy-font-style)
180
207
  );
181
- line-height: var(
182
- --spectrum-heading-xs-text-line-height,
183
- var(--spectrum-alias-heading-text-line-height)
208
+ font-weight: var(
209
+ --mod-heading-sans-serif-heavy-font-weight,
210
+ var(--spectrum-heading-sans-serif-heavy-font-weight)
184
211
  );
185
- margin-bottom: 0;
186
- margin-top: 0;
187
- text-transform: var(--spectrum-heading-xs-text-transform, none);
188
212
  }
189
- .spectrum-Heading--sizeXXS {
190
- font-size: var(
191
- --spectrum-heading-xxs-text-size,
192
- var(--spectrum-alias-heading-xxs-text-size)
193
- );
213
+ .spectrum-Heading--heavy .spectrum-Heading-strong,
214
+ .spectrum-Heading--heavy strong {
194
215
  font-style: var(
195
- --spectrum-heading-xxs-text-font-style,
196
- var(--spectrum-global-font-style-regular)
216
+ --mod-heading-sans-serif-heavy-strong-font-style,
217
+ var(--spectrum-heading-sans-serif-heavy-strong-font-style)
197
218
  );
198
219
  font-weight: var(
199
- --spectrum-heading-xxs-text-font-weight,
200
- var(--spectrum-alias-heading-text-font-weight-regular)
220
+ --mod-heading-sans-serif-heavy-strong-font-weight,
221
+ var(--spectrum-heading-sans-serif-heavy-strong-font-weight)
201
222
  );
202
- letter-spacing: var(
203
- --spectrum-heading-xxs-text-letter-spacing,
204
- var(--spectrum-global-font-letter-spacing-none)
223
+ }
224
+ .spectrum-Heading--heavy .spectrum-Heading-emphasized,
225
+ .spectrum-Heading--heavy em {
226
+ font-style: var(
227
+ --mod-heading-sans-serif-heavy-emphasized-font-style,
228
+ var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)
205
229
  );
206
- line-height: var(
207
- --spectrum-heading-xxs-text-line-height,
208
- var(--spectrum-alias-heading-text-line-height)
230
+ font-weight: var(
231
+ --mod-heading-sans-serif-heavy-emphasized-font-weight,
232
+ var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)
209
233
  );
210
- margin-bottom: 0;
211
- margin-top: 0;
212
- text-transform: var(--spectrum-heading-xxs-text-transform, none);
213
234
  }
214
- .spectrum-Heading {
215
- font-family: var(
216
- --spectrum-heading-m-text-font-family,
217
- var(--spectrum-alias-body-text-font-family)
235
+ .spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized,
236
+ .spectrum-Heading--heavy em strong,
237
+ .spectrum-Heading--heavy strong em {
238
+ font-style: var(
239
+ --mod-heading-sans-serif-heavy-strong-emphasized-font-style,
240
+ var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)
218
241
  );
219
242
  font-weight: var(
220
- --spectrum-heading-m-text-font-weight,
221
- var(--spectrum-alias-heading-text-font-weight-regular)
243
+ --mod-heading-sans-serif-heavy-strong-emphasized-font-weight,
244
+ var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)
222
245
  );
223
246
  }
224
- .spectrum-Heading .spectrum-Heading-emphasized,
225
- .spectrum-Heading em {
247
+ .spectrum-Heading--heavy:lang(ja),
248
+ .spectrum-Heading--heavy:lang(ko),
249
+ .spectrum-Heading--heavy:lang(zh) {
226
250
  font-style: var(
227
- --spectrum-heading-m-emphasized-text-font-style,
228
- var(--spectrum-global-font-style-italic)
251
+ --mod-heading-cjk-heavy-font-style,
252
+ var(--spectrum-heading-cjk-heavy-font-style)
229
253
  );
230
- }
231
- .spectrum-Heading .spectrum-Heading-strong,
232
- .spectrum-Heading strong {
233
254
  font-weight: var(
234
- --spectrum-heading-m-strong-text-font-weight,
235
- var(--spectrum-alias-heading-text-font-weight-regular-strong)
255
+ --mod-heading-cjk-heavy-font-weight,
256
+ var(--spectrum-heading-cjk-heavy-font-weight)
236
257
  );
237
258
  }
238
- .spectrum-Heading--serif {
239
- font-family: var(
240
- --spectrum-body-m-serif-text-font-family,
241
- var(--spectrum-alias-serif-text-font-family)
259
+ .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized,
260
+ .spectrum-Heading--heavy:lang(ja) em,
261
+ .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized,
262
+ .spectrum-Heading--heavy:lang(ko) em,
263
+ .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized,
264
+ .spectrum-Heading--heavy:lang(zh) em {
265
+ font-style: var(
266
+ --mod-heading-cjk-heavy-emphasized-font-style,
267
+ var(--spectrum-heading-cjk-heavy-emphasized-font-style)
242
268
  );
243
- }
244
- .spectrum-Heading--heavy {
245
269
  font-weight: var(
246
- --spectrum-heading-m-heavy-text-font-weight,
247
- var(--spectrum-alias-heading-text-font-weight-heavy)
270
+ --mod-heading-cjk-heavy-emphasized-font-weight,
271
+ var(--spectrum-heading-cjk-heavy-emphasized-font-weight)
248
272
  );
249
273
  }
250
- .spectrum-Heading--heavy .spectrum-Heading-emphasized,
251
- .spectrum-Heading--heavy em {
274
+ .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong,
275
+ .spectrum-Heading--heavy:lang(ja) strong,
276
+ .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong,
277
+ .spectrum-Heading--heavy:lang(ko) strong,
278
+ .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong,
279
+ .spectrum-Heading--heavy:lang(zh) strong {
252
280
  font-style: var(
253
- --spectrum-heading-m-heavy-emphasized-text-font-style,
254
- var(--spectrum-global-font-style-italic)
281
+ --mod-heading-cjk-heavy-strong-font-style,
282
+ var(--spectrum-heading-cjk-heavy-strong-font-style)
283
+ );
284
+ font-weight: var(
285
+ --mod-heading-cjk-heavy-strong-font-weight,
286
+ var(--spectrum-heading-cjk-heavy-strong-font-weight)
287
+ );
288
+ }
289
+ .spectrum-Heading--heavy:lang(ja)
290
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
291
+ .spectrum-Heading--heavy:lang(ja) em strong,
292
+ .spectrum-Heading--heavy:lang(ja) strong em,
293
+ .spectrum-Heading--heavy:lang(ko)
294
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
295
+ .spectrum-Heading--heavy:lang(ko) em strong,
296
+ .spectrum-Heading--heavy:lang(ko) strong em,
297
+ .spectrum-Heading--heavy:lang(zh)
298
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
299
+ .spectrum-Heading--heavy:lang(zh) em strong,
300
+ .spectrum-Heading--heavy:lang(zh) strong em {
301
+ font-style: var(
302
+ --mod-heading-cjk-heavy-strong-emphasized-font-style,
303
+ var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)
255
304
  );
256
- }
257
- .spectrum-Heading--heavy .spectrum-Heading-strong,
258
- .spectrum-Heading--heavy strong {
259
305
  font-weight: var(
260
- --spectrum-heading-m-heavy-strong-text-font-weight,
261
- var(--spectrum-alias-heading-text-font-weight-heavy-strong)
306
+ --mod-heading-cjk-heavy-strong-emphasized-font-weight,
307
+ var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)
262
308
  );
263
309
  }
264
310
  .spectrum-Heading--light {
311
+ font-style: var(
312
+ --mod-heading-sans-serif-light-font-style,
313
+ var(--spectrum-heading-sans-serif-light-font-style)
314
+ );
265
315
  font-weight: var(
266
- --spectrum-heading-m-light-emphasized-text-font-weight,
267
- var(--spectrum-alias-heading-text-font-weight-light)
316
+ --mod-heading-sans-serif-light-font-weight,
317
+ var(--spectrum-heading-sans-serif-light-font-weight)
268
318
  );
269
319
  }
270
320
  .spectrum-Heading--light .spectrum-Heading-emphasized,
271
321
  .spectrum-Heading--light em {
272
322
  font-style: var(
273
- --spectrum-heading-m-light-emphasized-text-font-style,
274
- var(--spectrum-global-font-style-italic)
323
+ --mod-heading-sans-serif-light-emphasized-font-style,
324
+ var(--spectrum-heading-sans-serif-light-emphasized-font-style)
325
+ );
326
+ font-weight: var(
327
+ --mod-heading-sans-serif-light-emphasized-font-weight,
328
+ var(--spectrum-heading-sans-serif-light-emphasized-font-weight)
275
329
  );
276
330
  }
277
331
  .spectrum-Heading--light .spectrum-Heading-strong,
278
332
  .spectrum-Heading--light strong {
333
+ font-style: var(
334
+ --mod-heading-sans-serif-light-strong-font-style,
335
+ var(--spectrum-heading-sans-serif-light-strong-font-style)
336
+ );
279
337
  font-weight: var(
280
- --spectrum-heading-m-light-strong-text-font-weight,
281
- var(--spectrum-alias-heading-text-font-weight-light-strong)
338
+ --mod-heading-sans-serif-light-strong-font-weight,
339
+ var(--spectrum-heading-sans-serif-light-strong-font-weight)
282
340
  );
283
341
  }
284
- .spectrum-Typography .spectrum-Heading--sizeXXXL {
285
- margin-bottom: var(
286
- --spectrum-heading-xxxl-margin-bottom,
287
- var(--spectrum-global-dimension-size-125)
342
+ .spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized,
343
+ .spectrum-Heading--light em strong,
344
+ .spectrum-Heading--light strong em {
345
+ font-style: var(
346
+ --mod-heading-sans-serif-light-strong-emphasized-font-style,
347
+ var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)
288
348
  );
289
- margin-top: var(
290
- --spectrum-heading-xxxl-margin-top,
291
- var(--spectrum-alias-heading-xxxl-margin-top)
349
+ font-weight: var(
350
+ --mod-heading-sans-serif-light-strong-emphasized-font-weight,
351
+ var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)
292
352
  );
293
353
  }
294
- .spectrum-Typography .spectrum-Heading--sizeXXL {
295
- margin-bottom: var(
296
- --spectrum-heading-xxl-margin-bottom,
297
- var(--spectrum-global-dimension-size-115)
354
+ .spectrum-Heading--light:lang(ja),
355
+ .spectrum-Heading--light:lang(ko),
356
+ .spectrum-Heading--light:lang(zh) {
357
+ font-style: var(
358
+ --mod-heading-cjk-light-font-style,
359
+ var(--spectrum-heading-cjk-light-font-style)
298
360
  );
299
- margin-top: var(
300
- --spectrum-heading-xxl-margin-top,
301
- var(--spectrum-alias-heading-xxl-margin-top)
361
+ font-weight: var(
362
+ --mod-heading-cjk-light-font-weight,
363
+ var(--spectrum-heading-cjk-light-font-weight)
302
364
  );
303
365
  }
304
- .spectrum-Typography .spectrum-Heading--sizeXL {
305
- margin-bottom: var(
306
- --spectrum-heading-xl-margin-bottom,
307
- var(--spectrum-global-dimension-size-100)
366
+ .spectrum-Heading--light:lang(ja) .spectrum-Heading-strong,
367
+ .spectrum-Heading--light:lang(ja) strong,
368
+ .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong,
369
+ .spectrum-Heading--light:lang(ko) strong,
370
+ .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong,
371
+ .spectrum-Heading--light:lang(zh) strong {
372
+ font-style: var(
373
+ --mod-heading-cjk-light-strong-font-style,
374
+ var(--spectrum-heading-cjk-light-strong-font-style)
308
375
  );
309
- margin-top: var(
310
- --spectrum-heading-xl-margin-top,
311
- var(--spectrum-alias-heading-xl-margin-top)
376
+ font-weight: var(
377
+ --mod-heading-cjk-light-strong-font-weight,
378
+ var(--spectrum-heading-cjk-light-strong-font-weight)
312
379
  );
313
380
  }
314
- .spectrum-Typography .spectrum-Heading--sizeL {
315
- margin-bottom: var(
316
- --spectrum-heading-l-margin-bottom,
317
- var(--spectrum-global-dimension-size-85)
318
- );
319
- margin-top: var(
320
- --spectrum-heading-l-margin-top,
321
- var(--spectrum-alias-heading-l-margin-top)
381
+ .spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized,
382
+ .spectrum-Heading--light:lang(ja) em,
383
+ .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized,
384
+ .spectrum-Heading--light:lang(ko) em,
385
+ .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized,
386
+ .spectrum-Heading--light:lang(zh) em {
387
+ font-style: var(
388
+ --mod-heading-cjk-light-emphasized-font-style,
389
+ var(--spectrum-heading-cjk-light-emphasized-font-style)
322
390
  );
323
- }
324
- .spectrum-Typography .spectrum-Heading--sizeM {
325
- margin-bottom: var(
326
- --spectrum-heading-m-margin-bottom,
327
- var(--spectrum-global-dimension-size-75)
391
+ font-weight: var(
392
+ --mod-heading-cjk-light-emphasized-font-weight,
393
+ var(--spectrum-heading-cjk-light-emphasized-font-weight)
394
+ );
395
+ }
396
+ .spectrum-Heading--light:lang(ja)
397
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
398
+ .spectrum-Heading--light:lang(ja) em strong,
399
+ .spectrum-Heading--light:lang(ja) strong em,
400
+ .spectrum-Heading--light:lang(ko)
401
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
402
+ .spectrum-Heading--light:lang(ko) em strong,
403
+ .spectrum-Heading--light:lang(ko) strong em,
404
+ .spectrum-Heading--light:lang(zh)
405
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
406
+ .spectrum-Heading--light:lang(zh) em strong,
407
+ .spectrum-Heading--light:lang(zh) strong em {
408
+ font-style: var(
409
+ --mod-heading-cjk-light-strong-emphasized-font-style,
410
+ var(--spectrum-heading-cjk-light-strong-emphasized-font-style)
328
411
  );
329
- margin-top: var(
330
- --spectrum-heading-m-margin-top,
331
- var(--spectrum-alias-heading-m-margin-top)
412
+ font-weight: var(
413
+ --mod-heading-cjk-light-strong-emphasized-font-weight,
414
+ var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)
332
415
  );
333
416
  }
334
- .spectrum-Typography .spectrum-Heading--sizeS {
335
- margin-bottom: var(
336
- --spectrum-heading-s-margin-bottom,
337
- var(--spectrum-global-dimension-size-65)
417
+ .spectrum-Heading--serif {
418
+ font-family: var(
419
+ --mod-heading-serif-font-family,
420
+ var(--spectrum-heading-serif-font-family)
338
421
  );
339
- margin-top: var(
340
- --spectrum-heading-s-margin-top,
341
- var(--spectrum-alias-heading-s-margin-top)
422
+ font-style: var(
423
+ --mod-heading-serif-font-style,
424
+ var(--spectrum-heading-serif-font-style)
425
+ );
426
+ font-weight: var(
427
+ --mod-heading-serif-font-weight,
428
+ var(--spectrum-heading-serif-font-weight)
342
429
  );
343
430
  }
344
- .spectrum-Typography .spectrum-Heading--sizeXS {
345
- margin-bottom: var(
346
- --spectrum-heading-xs-margin-bottom,
347
- var(--spectrum-global-dimension-size-50)
431
+ .spectrum-Heading--serif .spectrum-Heading-emphasized,
432
+ .spectrum-Heading--serif em {
433
+ font-style: var(
434
+ --mod-heading-serif-emphasized-font-style,
435
+ var(--spectrum-heading-serif-emphasized-font-style)
348
436
  );
349
- margin-top: var(
350
- --spectrum-heading-xs-margin-top,
351
- var(--spectrum-alias-heading-xs-margin-top)
437
+ font-weight: var(
438
+ --mod-heading-serif-emphasized-font-weight,
439
+ var(--spectrum-heading-serif-emphasized-font-weight)
352
440
  );
353
441
  }
354
- .spectrum-Typography .spectrum-Heading--sizeXXS {
355
- margin-bottom: var(
356
- --spectrum-heading-xxs-margin-bottom,
357
- var(--spectrum-global-dimension-size-40)
442
+ .spectrum-Heading--serif .spectrum-Heading-strong,
443
+ .spectrum-Heading--serif strong {
444
+ font-style: var(
445
+ --mod-heading-serif-strong-font-style,
446
+ var(--spectrum-heading-serif-strong-font-style)
358
447
  );
359
- margin-top: var(
360
- --spectrum-heading-xxs-margin-top,
361
- var(--spectrum-alias-heading-xxs-margin-top)
448
+ font-weight: var(
449
+ --mod-heading-serif-strong-font-weight,
450
+ var(--spectrum-heading-serif-strong-font-weight)
362
451
  );
363
452
  }
364
- .spectrum-Heading--sizeXXXL {
365
- color: var(
366
- --spectrum-heading-xxxl-text-color,
367
- var(--spectrum-alias-heading-text-color)
453
+ .spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized,
454
+ .spectrum-Heading--serif em strong,
455
+ .spectrum-Heading--serif strong em {
456
+ font-style: var(
457
+ --mod-heading-serif-strong-emphasized-font-style,
458
+ var(--spectrum-heading-serif-strong-emphasized-font-style)
368
459
  );
369
- }
370
- .spectrum-Heading--sizeXXL {
371
- color: var(
372
- --spectrum-heading-xxl-text-color,
373
- var(--spectrum-alias-heading-text-color)
460
+ font-weight: var(
461
+ --mod-heading-serif-strong-emphasized-font-weight,
462
+ var(--spectrum-heading-serif-strong-emphasized-font-weight)
374
463
  );
375
464
  }
376
- .spectrum-Heading--sizeXL {
377
- color: var(
378
- --spectrum-heading-xl-text-color,
379
- var(--spectrum-alias-heading-text-color)
465
+ .spectrum-Heading--serif.spectrum-Heading--heavy {
466
+ font-style: var(
467
+ --mod-heading-serif-heavy-font-style,
468
+ var(--spectrum-heading-serif-heavy-font-style)
380
469
  );
381
- }
382
- .spectrum-Heading--sizeL {
383
- color: var(
384
- --spectrum-heading-l-text-color,
385
- var(--spectrum-alias-heading-text-color)
470
+ font-weight: var(
471
+ --mod-heading-serif-heavy-font-weight,
472
+ var(--spectrum-heading-serif-heavy-font-weight)
386
473
  );
387
474
  }
388
- .spectrum-Heading--sizeM {
389
- color: var(
390
- --spectrum-heading-m-text-color,
391
- var(--spectrum-alias-heading-text-color)
475
+ .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong,
476
+ .spectrum-Heading--serif.spectrum-Heading--heavy strong {
477
+ font-style: var(
478
+ --mod-heading-serif-heavy-strong-font-style,
479
+ var(--spectrum-heading-serif-heavy-strong-font-style)
392
480
  );
393
- }
394
- .spectrum-Heading--sizeS {
395
- color: var(
396
- --spectrum-heading-s-text-color,
397
- var(--spectrum-alias-heading-text-color)
481
+ font-weight: var(
482
+ --mod-heading-serif-heavy-strong-font-weight,
483
+ var(--spectrum-heading-serif-heavy-strong-font-weight)
398
484
  );
399
485
  }
400
- .spectrum-Heading--sizeXS {
401
- color: var(
402
- --spectrum-heading-xs-text-color,
403
- var(--spectrum-alias-heading-text-color)
486
+ .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized,
487
+ .spectrum-Heading--serif.spectrum-Heading--heavy em {
488
+ font-style: var(
489
+ --mod-heading-serif-heavy-emphasized-font-style,
490
+ var(--spectrum-heading-serif-heavy-emphasized-font-style)
404
491
  );
405
- }
406
- .spectrum-Heading--sizeXXS {
407
- color: var(
408
- --spectrum-heading-xxs-text-color,
409
- var(--spectrum-alias-heading-text-color)
492
+ font-weight: var(
493
+ --mod-heading-serif-heavy-emphasized-font-weight,
494
+ var(--spectrum-heading-serif-heavy-emphasized-font-weight)
410
495
  );
411
496
  }
412
- .spectrum-Heading-sizeXXXL--light {
413
- color: var(
414
- --spectrum-heading-xxxl-light-text-color,
415
- var(--spectrum-alias-heading-text-color)
497
+ .spectrum-Heading--serif.spectrum-Heading--heavy
498
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
499
+ .spectrum-Heading--serif.spectrum-Heading--heavy em strong,
500
+ .spectrum-Heading--serif.spectrum-Heading--heavy strong em {
501
+ font-style: var(
502
+ --mod-heading-serif-heavy-strong-emphasized-font-style,
503
+ var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)
416
504
  );
417
- }
418
- .spectrum-Heading-sizeXXL--light {
419
- color: var(
420
- --spectrum-heading-xxl-light-text-color,
421
- var(--spectrum-alias-heading-text-color)
505
+ font-weight: var(
506
+ --mod-heading-serif-heavy-strong-emphasized-font-weight,
507
+ var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)
422
508
  );
423
509
  }
424
- .spectrum-Heading-sizeXL--light {
425
- color: var(
426
- --spectrum-heading-xl-light-text-color,
427
- var(--spectrum-alias-heading-text-color)
510
+ .spectrum-Heading--serif.spectrum-Heading--light {
511
+ font-style: var(
512
+ --mod-heading-serif-light-font-style,
513
+ var(--spectrum-heading-serif-light-font-style)
428
514
  );
429
- }
430
- .spectrum-Heading-sizeL--light {
431
- color: var(
432
- --spectrum-heading-l-light-text-color,
433
- var(--spectrum-alias-heading-text-color)
515
+ font-weight: var(
516
+ --mod-heading-serif-light-font-weight,
517
+ var(--spectrum-heading-serif-light-font-weight)
434
518
  );
435
519
  }
436
- .spectrum-Heading-sizeXXXL--heavy {
437
- color: var(
438
- --spectrum-heading-xxxl-heavy-text-color,
439
- var(--spectrum-alias-heading-text-color)
520
+ .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized,
521
+ .spectrum-Heading--serif.spectrum-Heading--light em {
522
+ font-style: var(
523
+ --mod-heading-serif-light-emphasized-font-style,
524
+ var(--spectrum-heading-serif-light-emphasized-font-style)
440
525
  );
441
- }
442
- .spectrum-Heading-sizeXXL--heavy {
443
- color: var(
444
- --spectrum-heading-xxl-heavy-text-color,
445
- var(--spectrum-alias-heading-text-color)
526
+ font-weight: var(
527
+ --mod-heading-serif-light-emphasized-font-weight,
528
+ var(--spectrum-heading-serif-light-emphasized-font-weight)
446
529
  );
447
530
  }
448
- .spectrum-Heading-sizeXL--heavy {
449
- color: var(
450
- --spectrum-heading-xl-heavy-text-color,
451
- var(--spectrum-alias-heading-text-color)
531
+ .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong,
532
+ .spectrum-Heading--serif.spectrum-Heading--light strong {
533
+ font-style: var(
534
+ --mod-heading-serif-light-strong-font-style,
535
+ var(--spectrum-heading-serif-light-strong-font-style)
452
536
  );
453
- }
454
- .spectrum-Heading-sizeL--heavy {
455
- color: var(
456
- --spectrum-heading-l-heavy-text-color,
457
- var(--spectrum-alias-heading-text-color)
537
+ font-weight: var(
538
+ --mod-heading-serif-light-strong-font-weight,
539
+ var(--spectrum-heading-serif-light-strong-font-weight)
458
540
  );
459
541
  }
460
- .spectrum-Heading-sizeXXXL--heading {
461
- color: var(
462
- --spectrum-heading-xxxl-text-color,
463
- var(--spectrum-alias-heading-text-color)
542
+ .spectrum-Heading--serif.spectrum-Heading--light
543
+ .spectrum-Heading-strong.spectrum-Heading-emphasized,
544
+ .spectrum-Heading--serif.spectrum-Heading--light em strong,
545
+ .spectrum-Heading--serif.spectrum-Heading--light strong em {
546
+ font-style: var(
547
+ --mod-heading-serif-light-strong-emphasized-font-style,
548
+ var(--spectrum-heading-serif-light-strong-emphasized-font-style)
464
549
  );
465
- }
466
- .spectrum-Heading-sizeXXL--heading {
467
- color: var(
468
- --spectrum-heading-xxl-text-color,
469
- var(--spectrum-alias-heading-text-color)
550
+ font-weight: var(
551
+ --mod-heading-serif-light-strong-emphasized-font-weight,
552
+ var(--spectrum-heading-serif-light-strong-emphasized-font-weight)
470
553
  );
471
554
  }
472
- .spectrum-Heading-sizeXL--heading {
473
- color: var(
474
- --spectrum-heading-xl-text-color,
475
- var(--spectrum-alias-heading-text-color)
555
+ .spectrum-Typography .spectrum-Heading {
556
+ margin-block-end: var(
557
+ --mod-heading-margin-end,
558
+ var(--spectrum-heading-margin-end)
476
559
  );
477
- }
478
- .spectrum-Heading-sizeL--heading {
479
- color: var(
480
- --spectrum-heading-l-text-color,
481
- var(--spectrum-alias-heading-text-color)
560
+ margin-block-start: var(
561
+ --mod-heading-margin-start,
562
+ var(--spectrum-heading-margin-start)
482
563
  );
483
564
  }