@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-detail.css CHANGED
@@ -12,374 +12,371 @@ governing permissions and limitations under the License.
12
12
 
13
13
  /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14
14
  .spectrum-Detail {
15
- font-family: var(
16
- --spectrum-heading-m-text-font-family,
17
- var(--spectrum-alias-body-text-font-family)
15
+ --spectrum-detail-sans-serif-font-family: var(
16
+ --spectrum-sans-font-family-stack
18
17
  );
19
- }
20
- .spectrum-Detail .spectrum-Detail-strong,
21
- .spectrum-Detail strong {
22
- font-weight: var(
23
- --spectrum-detail-m-strong-text-font-weight,
24
- var(--spectrum-alias-detail-text-font-weight-regular)
18
+ --spectrum-detail-serif-font-family: var(
19
+ --spectrum-serif-font-family-stack
25
20
  );
26
- }
27
- .spectrum-Detail .spectrum-Detail-emphasized,
28
- .spectrum-Detail em {
29
- font-style: var(
30
- --spectrum-detail-m-emphasized-text-font-style,
31
- var(--spectrum-global-font-style-italic)
21
+ --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack);
22
+ --spectrum-detail-margin-start: calc(
23
+ var(--mod-detail-font-size, var(--spectrum-detail-font-size)) *
24
+ var(--spectrum-detail-margin-top-multiplier)
32
25
  );
33
- }
34
- .spectrum-Detail--light {
35
- font-style: var(
36
- --spectrum-detail-m-light-text-font-style,
37
- var(--spectrum-global-font-style-regular)
38
- );
39
- font-weight: var(
40
- --spectrum-detail-m-light-text-font-weight,
41
- var(--spectrum-alias-detail-text-font-weight-light)
26
+ --spectrum-detail-margin-end: calc(
27
+ var(--mod-detail-font-size, var(--spectrum-detail-font-size)) *
28
+ var(--spectrum-detail-margin-bottom-multiplier)
42
29
  );
30
+ --spectrum-detail-font-color: var(--spectrum-detail-color);
43
31
  }
44
- .spectrum-Detail--serif {
45
- font-family: var(
46
- --spectrum-body-m-serif-text-font-family,
47
- var(--spectrum-alias-serif-text-font-family)
48
- );
32
+ @media (forced-colors: active) {
33
+ .spectrum-Detail {
34
+ --highcontrast-detail-font-color: Text;
35
+ }
36
+ }
37
+ .spectrum-Detail--sizeS {
38
+ --spectrum-detail-font-size: var(--spectrum-detail-size-s);
39
+ }
40
+ .spectrum-Detail--sizeM {
41
+ --spectrum-detail-font-size: var(--spectrum-detail-size-m);
42
+ }
43
+ .spectrum-Detail--sizeL {
44
+ --spectrum-detail-font-size: var(--spectrum-detail-size-l);
49
45
  }
50
46
  .spectrum-Detail--sizeXL {
51
- font-size: var(
52
- --spectrum-detail-xl-text-size,
53
- var(--spectrum-global-dimension-font-size-200)
47
+ --spectrum-detail-font-size: var(--spectrum-detail-size-xl);
48
+ }
49
+ .spectrum-Detail {
50
+ color: var(
51
+ --highcontrast-detail-font-color,
52
+ var(--mod-detail-font-color, var(--spectrum-detail-font-color))
54
53
  );
54
+ font-family: var(
55
+ --mod-detail-sans-serif-font-family,
56
+ var(--spectrum-detail-sans-serif-font-family)
57
+ );
58
+ font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size));
55
59
  font-style: var(
56
- --spectrum-detail-xl-text-font-style,
57
- var(--spectrum-global-font-style-regular)
60
+ --mod-detail-sans-serif-font-style,
61
+ var(--spectrum-detail-sans-serif-font-style)
58
62
  );
59
63
  font-weight: var(
60
- --spectrum-detail-xl-text-font-weight,
61
- var(--spectrum-alias-detail-text-font-weight-regular)
64
+ --mod-detail-sans-serif-font-weight,
65
+ var(--spectrum-detail-sans-serif-font-weight)
62
66
  );
63
67
  letter-spacing: var(
64
- --spectrum-detail-xl-text-letter-spacing,
65
- var(--spectrum-global-font-letter-spacing-medium)
68
+ --mod-detail-letter-spacing,
69
+ var(--spectrum-detail-letter-spacing)
66
70
  );
67
71
  line-height: var(
68
- --spectrum-detail-xl-text-line-height,
69
- var(--spectrum-alias-heading-text-line-height)
72
+ --mod-detail-line-height,
73
+ var(--spectrum-detail-line-height)
70
74
  );
71
- margin-bottom: 0;
72
- margin-top: 0;
73
- text-transform: var(--spectrum-detail-xl-text-transform, uppercase);
75
+ text-transform: uppercase;
74
76
  }
75
- .spectrum-Detail--sizeXL em {
76
- font-size: var(
77
- --spectrum-detail-xl-emphasized-text-size,
78
- var(--spectrum-global-dimension-font-size-200)
79
- );
77
+ .spectrum-Detail .spectrum-Detail-strong,
78
+ .spectrum-Detail strong {
80
79
  font-style: var(
81
- --spectrum-detail-xl-emphasized-text-font-style,
82
- var(--spectrum-global-font-style-italic)
80
+ --mod-detail-sans-serif-strong-font-style,
81
+ var(--spectrum-detail-sans-serif-strong-font-style)
83
82
  );
84
83
  font-weight: var(
85
- --spectrum-detail-xl-emphasized-text-font-weight,
86
- var(--spectrum-alias-detail-text-font-weight-regular)
87
- );
88
- letter-spacing: var(
89
- --spectrum-detail-xl-emphasized-text-letter-spacing,
90
- var(--spectrum-global-font-letter-spacing-medium)
91
- );
92
- line-height: var(
93
- --spectrum-detail-xl-emphasized-text-line-height,
94
- var(--spectrum-alias-heading-text-line-height)
95
- );
96
- margin-bottom: 0;
97
- margin-top: 0;
98
- text-transform: var(
99
- --spectrum-detail-xl-emphasized-text-transform,
100
- uppercase
84
+ --mod-detail-sans-serif-strong-font-weight,
85
+ var(--spectrum-detail-sans-serif-strong-font-weight)
101
86
  );
102
87
  }
103
- .spectrum-Detail--sizeXL strong {
104
- font-size: var(
105
- --spectrum-detail-xl-strong-text-size,
106
- var(--spectrum-global-dimension-font-size-200)
107
- );
88
+ .spectrum-Detail .spectrum-Detail-emphasized,
89
+ .spectrum-Detail em {
108
90
  font-style: var(
109
- --spectrum-detail-xl-strong-text-font-style,
110
- var(--spectrum-global-font-style-regular)
91
+ --mod-detail-sans-serif-emphasized-font-style,
92
+ var(--spectrum-detail-sans-serif-emphasized-font-style)
111
93
  );
112
94
  font-weight: var(
113
- --spectrum-detail-xl-strong-text-font-weight,
114
- var(--spectrum-alias-detail-text-font-weight-regular)
95
+ --mod-detail-sans-serif-emphasized-font-weight,
96
+ var(--spectrum-detail-sans-serif-emphasized-font-weight)
115
97
  );
116
- letter-spacing: var(
117
- --spectrum-detail-xl-strong-text-letter-spacing,
118
- var(--spectrum-global-font-letter-spacing-medium)
98
+ }
99
+ .spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized,
100
+ .spectrum-Detail em strong,
101
+ .spectrum-Detail strong em {
102
+ font-style: var(
103
+ --mod-detail-sans-serif-strong-emphasized-font-style,
104
+ var(--spectrum-detail-sans-serif-strong-emphasized-font-style)
119
105
  );
120
- line-height: var(
121
- --spectrum-detail-xl-strong-text-line-height,
122
- var(--spectrum-alias-heading-text-line-height)
106
+ font-weight: var(
107
+ --mod-detail-sans-serif-strong-emphasized-font-weight,
108
+ var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)
123
109
  );
124
- margin-bottom: 0;
125
- margin-top: 0;
126
- text-transform: var(--spectrum-detail-xl-strong-text-transform, uppercase);
127
110
  }
128
- .spectrum-Detail--sizeL {
129
- font-size: var(
130
- --spectrum-detail-l-text-size,
131
- var(--spectrum-global-dimension-font-size-100)
111
+ .spectrum-Detail:lang(ja),
112
+ .spectrum-Detail:lang(ko),
113
+ .spectrum-Detail:lang(zh) {
114
+ font-family: var(
115
+ --mod-detail-cjk-font-family,
116
+ var(--spectrum-detail-cjk-font-family)
132
117
  );
133
118
  font-style: var(
134
- --spectrum-detail-l-text-font-style,
135
- var(--spectrum-global-font-style-regular)
119
+ --mod-detail-cjk-font-style,
120
+ var(--spectrum-detail-cjk-font-style)
136
121
  );
137
122
  font-weight: var(
138
- --spectrum-detail-l-text-font-weight,
139
- var(--spectrum-alias-detail-text-font-weight-regular)
140
- );
141
- letter-spacing: var(
142
- --spectrum-detail-l-text-letter-spacing,
143
- var(--spectrum-global-font-letter-spacing-medium)
123
+ --mod-detail-cjk-font-weight,
124
+ var(--spectrum-detail-cjk-font-weight)
144
125
  );
145
126
  line-height: var(
146
- --spectrum-detail-l-text-line-height,
147
- var(--spectrum-alias-heading-text-line-height)
127
+ --mod-detail-cjk-line-height,
128
+ var(--spectrum-detail-cjk-line-height)
148
129
  );
149
- margin-bottom: 0;
150
- margin-top: 0;
151
- text-transform: var(--spectrum-detail-l-text-transform, uppercase);
152
130
  }
153
- .spectrum-Detail--sizeL em {
154
- font-size: var(
155
- --spectrum-detail-l-emphasized-text-size,
156
- var(--spectrum-global-dimension-font-size-100)
157
- );
131
+ .spectrum-Detail:lang(ja) .spectrum-Detail-strong,
132
+ .spectrum-Detail:lang(ja) strong,
133
+ .spectrum-Detail:lang(ko) .spectrum-Detail-strong,
134
+ .spectrum-Detail:lang(ko) strong,
135
+ .spectrum-Detail:lang(zh) .spectrum-Detail-strong,
136
+ .spectrum-Detail:lang(zh) strong {
158
137
  font-style: var(
159
- --spectrum-detail-l-emphasized-text-font-style,
160
- var(--spectrum-global-font-style-italic)
138
+ --mod-detail-cjk-strong-font-style,
139
+ var(--spectrum-detail-cjk-strong-font-style)
161
140
  );
162
141
  font-weight: var(
163
- --spectrum-detail-l-emphasized-text-font-weight,
164
- var(--spectrum-alias-detail-text-font-weight-regular)
142
+ --mod-detail-cjk-strong-font-weight,
143
+ var(--spectrum-detail-cjk-strong-font-weight)
165
144
  );
166
- letter-spacing: var(
167
- --spectrum-detail-l-emphasized-text-letter-spacing,
168
- var(--spectrum-global-font-letter-spacing-medium)
145
+ }
146
+ .spectrum-Detail:lang(ja) .spectrum-Detail-emphasized,
147
+ .spectrum-Detail:lang(ja) em,
148
+ .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized,
149
+ .spectrum-Detail:lang(ko) em,
150
+ .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized,
151
+ .spectrum-Detail:lang(zh) em {
152
+ font-style: var(
153
+ --mod-detail-cjk-emphasized-font-style,
154
+ var(--spectrum-detail-cjk-emphasized-font-style)
169
155
  );
170
- line-height: var(
171
- --spectrum-detail-l-emphasized-text-line-height,
172
- var(--spectrum-alias-heading-text-line-height)
156
+ font-weight: var(
157
+ --mod-detail-cjk-emphasized-font-weight,
158
+ var(--spectrum-detail-cjk-emphasized-font-weight)
173
159
  );
174
- margin-bottom: 0;
175
- margin-top: 0;
176
- text-transform: var(
177
- --spectrum-detail-l-emphasized-text-transform,
178
- uppercase
160
+ }
161
+ .spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized,
162
+ .spectrum-Detail:lang(ja) em strong,
163
+ .spectrum-Detail:lang(ja) strong em,
164
+ .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized,
165
+ .spectrum-Detail:lang(ko) em strong,
166
+ .spectrum-Detail:lang(ko) strong em,
167
+ .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized,
168
+ .spectrum-Detail:lang(zh) em strong,
169
+ .spectrum-Detail:lang(zh) strong em {
170
+ font-style: var(
171
+ --mod-detail-cjk-strong-emphasized-font-style,
172
+ var(--spectrum-detail-cjk-strong-emphasized-font-style)
173
+ );
174
+ font-weight: var(
175
+ --mod-detail-cjk-strong-emphasized-font-weight,
176
+ var(--spectrum-detail-cjk-strong-emphasized-font-weight)
179
177
  );
180
178
  }
181
- .spectrum-Detail--sizeL strong {
182
- font-size: var(
183
- --spectrum-detail-l-strong-text-size,
184
- var(--spectrum-global-dimension-font-size-100)
179
+ .spectrum-Detail--serif {
180
+ font-family: var(
181
+ --mod-detail-serif-font-family,
182
+ var(--spectrum-detail-serif-font-family)
185
183
  );
186
184
  font-style: var(
187
- --spectrum-detail-l-strong-text-font-style,
188
- var(--spectrum-global-font-style-regular)
185
+ --mod-detail-serif-font-style,
186
+ var(--spectrum-detail-serif-font-style)
189
187
  );
190
188
  font-weight: var(
191
- --spectrum-detail-l-strong-text-font-weight,
192
- var(--spectrum-alias-detail-text-font-weight-regular)
189
+ --mod-detail-serif-font-weight,
190
+ var(--spectrum-detail-serif-font-weight)
193
191
  );
194
- letter-spacing: var(
195
- --spectrum-detail-l-strong-text-letter-spacing,
196
- var(--spectrum-global-font-letter-spacing-medium)
192
+ }
193
+ .spectrum-Detail--serif .spectrum-Detail-strong,
194
+ .spectrum-Detail--serif strong {
195
+ font-style: var(
196
+ --mod-detail-serif-strong-font-style,
197
+ var(--spectrum-detail-serif-strong-font-style)
197
198
  );
198
- line-height: var(
199
- --spectrum-detail-l-strong-text-line-height,
200
- var(--spectrum-alias-heading-text-line-height)
199
+ font-weight: var(
200
+ --mod-detail-serif-strong-font-weight,
201
+ var(--spectrum-detail-serif-strong-font-weight)
201
202
  );
202
- margin-bottom: 0;
203
- margin-top: 0;
204
- text-transform: var(--spectrum-detail-l-strong-text-transform, uppercase);
205
203
  }
206
- .spectrum-Detail--sizeM {
207
- font-size: var(
208
- --spectrum-detail-m-text-size,
209
- var(--spectrum-global-dimension-font-size-75)
210
- );
204
+ .spectrum-Detail--serif .spectrum-Detail-emphasized,
205
+ .spectrum-Detail--serif em {
211
206
  font-style: var(
212
- --spectrum-detail-m-text-font-style,
213
- var(--spectrum-global-font-style-regular)
207
+ --mod-detail-serif-emphasized-font-style,
208
+ var(--spectrum-detail-serif-emphasized-font-style)
214
209
  );
215
210
  font-weight: var(
216
- --spectrum-detail-m-text-font-weight,
217
- var(--spectrum-alias-detail-text-font-weight-regular)
211
+ --mod-detail-serif-emphasized-font-weight,
212
+ var(--spectrum-detail-serif-emphasized-font-weight)
218
213
  );
219
- letter-spacing: var(
220
- --spectrum-detail-m-text-letter-spacing,
221
- var(--spectrum-global-font-letter-spacing-medium)
214
+ }
215
+ .spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized,
216
+ .spectrum-Detail--serif em strong,
217
+ .spectrum-Detail--serif strong em {
218
+ font-style: var(
219
+ --mod-detail-serif-strong-emphasized-font-style,
220
+ var(--spectrum-detail-serif-strong-emphasized-font-style)
222
221
  );
223
- line-height: var(
224
- --spectrum-detail-m-text-line-height,
225
- var(--spectrum-alias-heading-text-line-height)
222
+ font-weight: var(
223
+ --mod-detail-serif-strong-emphasized-font-weight,
224
+ var(--spectrum-detail-serif-strong-emphasized-font-weight)
226
225
  );
227
- margin-bottom: 0;
228
- margin-top: 0;
229
- text-transform: var(--spectrum-detail-m-text-transform, uppercase);
230
226
  }
231
- .spectrum-Detail--sizeM em {
232
- font-size: var(
233
- --spectrum-detail-m-emphasized-text-size,
234
- var(--spectrum-global-dimension-font-size-75)
235
- );
227
+ .spectrum-Detail--light {
236
228
  font-style: var(
237
- --spectrum-detail-m-emphasized-text-font-style,
238
- var(--spectrum-global-font-style-italic)
229
+ --mod-detail-sans-serif-light-font-style,
230
+ var(--spectrum-detail-sans-serif-light-font-style)
239
231
  );
240
232
  font-weight: var(
241
- --spectrum-detail-m-emphasized-text-font-weight,
242
- var(--spectrum-alias-detail-text-font-weight-regular)
243
- );
244
- letter-spacing: var(
245
- --spectrum-detail-m-emphasized-text-letter-spacing,
246
- var(--spectrum-global-font-letter-spacing-medium)
233
+ --spectrum-detail-sans-serif-light-font-weight,
234
+ var(--spectrum-detail-sans-serif-light-font-weight)
247
235
  );
248
- line-height: var(
249
- --spectrum-detail-m-emphasized-text-line-height,
250
- var(--spectrum-alias-heading-text-line-height)
236
+ }
237
+ .spectrum-Detail--light .spectrum-Detail-strong,
238
+ .spectrum-Detail--light strong {
239
+ font-style: var(
240
+ --mod-detail-sans-serif-light-strong-font-style,
241
+ var(--spectrum-detail-sans-serif-light-strong-font-style)
251
242
  );
252
- margin-bottom: 0;
253
- margin-top: 0;
254
- text-transform: var(
255
- --spectrum-detail-m-emphasized-text-transform,
256
- uppercase
243
+ font-weight: var(
244
+ --mod-detail-sans-serif-light-strong-font-weight,
245
+ var(--spectrum-detail-sans-serif-light-strong-font-weight)
257
246
  );
258
247
  }
259
- .spectrum-Detail--sizeM strong {
260
- font-size: var(
261
- --spectrum-detail-m-strong-text-size,
262
- var(--spectrum-global-dimension-font-size-75)
263
- );
248
+ .spectrum-Detail--light .spectrum-Detail-emphasized,
249
+ .spectrum-Detail--light em {
264
250
  font-style: var(
265
- --spectrum-detail-m-strong-text-font-style,
266
- var(--spectrum-global-font-style-regular)
251
+ --mod-detail-sans-serif-light-emphasized-font-style,
252
+ var(--spectrum-detail-sans-serif-light-emphasized-font-style)
267
253
  );
268
254
  font-weight: var(
269
- --spectrum-detail-m-strong-text-font-weight,
270
- var(--spectrum-alias-detail-text-font-weight-regular)
255
+ --mod-detail-sans-serif-light-emphasized-font-weight,
256
+ var(--spectrum-detail-sans-serif-light-emphasized-font-weight)
271
257
  );
272
- letter-spacing: var(
273
- --spectrum-detail-m-strong-text-letter-spacing,
274
- var(--spectrum-global-font-letter-spacing-medium)
258
+ }
259
+ .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized,
260
+ .spectrum-Detail--light em strong,
261
+ .spectrum-Detail--light strong em {
262
+ font-style: var(
263
+ --mod-detail-sans-serif-light-strong-emphasized-font-style,
264
+ var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)
275
265
  );
276
- line-height: var(
277
- --spectrum-detail-m-strong-text-line-height,
278
- var(--spectrum-alias-heading-text-line-height)
266
+ font-weight: var(
267
+ --mod-detail-sans-serif-light-strong-emphasized-font-weight,
268
+ var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)
279
269
  );
280
- margin-bottom: 0;
281
- margin-top: 0;
282
- text-transform: var(--spectrum-detail-m-strong-text-transform, uppercase);
283
270
  }
284
- .spectrum-Detail--sizeS {
285
- font-size: var(
286
- --spectrum-detail-s-text-size,
287
- var(--spectrum-global-dimension-font-size-50)
288
- );
271
+ .spectrum-Detail--light:lang(ja),
272
+ .spectrum-Detail--light:lang(ko),
273
+ .spectrum-Detail--light:lang(zh) {
289
274
  font-style: var(
290
- --spectrum-detail-s-text-font-style,
291
- var(--spectrum-global-font-style-regular)
275
+ --mod-detail-cjk-light-font-style,
276
+ var(--spectrum-detail-cjk-light-font-style)
292
277
  );
293
278
  font-weight: var(
294
- --spectrum-detail-s-text-font-weight,
295
- var(--spectrum-alias-detail-text-font-weight-regular)
279
+ --mod-detail-cjk-light-font-weight,
280
+ var(--spectrum-detail-cjk-light-font-weight)
296
281
  );
297
- letter-spacing: var(
298
- --spectrum-detail-s-text-letter-spacing,
299
- var(--spectrum-global-font-letter-spacing-medium)
282
+ }
283
+ .spectrum-Detail--light:lang(ja) .spectrum-Detail-strong,
284
+ .spectrum-Detail--light:lang(ja) strong,
285
+ .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong,
286
+ .spectrum-Detail--light:lang(ko) strong,
287
+ .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong,
288
+ .spectrum-Detail--light:lang(zh) strong {
289
+ font-style: var(
290
+ --mod-detail-cjk-light-strong-font-style,
291
+ var(--spectrum-detail-cjk-light-strong-font-style)
300
292
  );
301
- line-height: var(
302
- --spectrum-detail-s-text-line-height,
303
- var(--spectrum-alias-heading-text-line-height)
293
+ font-weight: var(
294
+ --mod-detail-cjk-light-strong-font-weight,
295
+ var(--spectrum-detail-cjk-light-strong-font-weight)
304
296
  );
305
- margin-bottom: 0;
306
- margin-top: 0;
307
- text-transform: var(--spectrum-detail-s-text-transform, uppercase);
308
297
  }
309
- .spectrum-Detail--sizeS em {
310
- font-size: var(
311
- --spectrum-detail-s-emphasized-text-size,
312
- var(--spectrum-global-dimension-font-size-50)
313
- );
298
+ .spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized,
299
+ .spectrum-Detail--light:lang(ja) em,
300
+ .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized,
301
+ .spectrum-Detail--light:lang(ko) em,
302
+ .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized,
303
+ .spectrum-Detail--light:lang(zh) em {
314
304
  font-style: var(
315
- --spectrum-detail-s-emphasized-text-font-style,
316
- var(--spectrum-global-font-style-italic)
305
+ --mod-detail-cjk-light-emphasized-font-style,
306
+ var(--spectrum-detail-cjk-light-emphasized-font-style)
317
307
  );
318
308
  font-weight: var(
319
- --spectrum-detail-s-emphasized-text-font-weight,
320
- var(--spectrum-alias-detail-text-font-weight-regular)
309
+ --mod-detail-cjk-light-emphasized-font-weight,
310
+ var(--spectrum-detail-cjk-light-emphasized-font-weight)
321
311
  );
322
- letter-spacing: var(
323
- --spectrum-detail-s-emphasized-text-letter-spacing,
324
- var(--spectrum-global-font-letter-spacing-medium)
325
- );
326
- line-height: var(
327
- --spectrum-detail-s-emphasized-text-line-height,
328
- var(--spectrum-alias-heading-text-line-height)
312
+ }
313
+ .spectrum-Detail--light:lang(ja)
314
+ .spectrum-Detail-strong.spectrum-Detail-emphasized,
315
+ .spectrum-Detail--light:lang(ko)
316
+ .spectrum-Detail-strong.spectrum-Detail-emphasized,
317
+ .spectrum-Detail--light:lang(zh)
318
+ .spectrum-Detail-strong.spectrum-Detail-emphasized {
319
+ font-style: var(
320
+ --mod-detail-cjk-light-strong-emphasized-font-style,
321
+ var(--spectrum-detail-cjk-light-strong-emphasized-font-style)
329
322
  );
330
- margin-bottom: 0;
331
- margin-top: 0;
332
- text-transform: var(
333
- --spectrum-detail-s-emphasized-text-transform,
334
- uppercase
323
+ font-weight: var(
324
+ --mod-detail-cjk-light-strong-emphasized-font-weight,
325
+ var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)
335
326
  );
336
327
  }
337
- .spectrum-Detail--sizeS strong {
338
- font-size: var(
339
- --spectrum-detail-s-strong-text-size,
340
- var(--spectrum-global-dimension-font-size-50)
341
- );
328
+ .spectrum-Detail--serif.spectrum-Detail--light {
342
329
  font-style: var(
343
- --spectrum-detail-s-strong-text-font-style,
344
- var(--spectrum-global-font-style-regular)
330
+ --mod-detail-serif-light-font-style,
331
+ var(--spectrum-detail-serif-light-font-style)
345
332
  );
346
333
  font-weight: var(
347
- --spectrum-detail-s-strong-text-font-weight,
348
- var(--spectrum-alias-detail-text-font-weight-regular)
334
+ --mod-detail-serif-light-font-weight,
335
+ var(--spectrum-detail-serif-light-font-weight)
349
336
  );
350
- letter-spacing: var(
351
- --spectrum-detail-s-strong-text-letter-spacing,
352
- var(--spectrum-global-font-letter-spacing-medium)
337
+ }
338
+ .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong,
339
+ .spectrum-Detail--serif.spectrum-Detail--light strong {
340
+ font-style: var(
341
+ --mod-detail-serif-light-strong-font-style,
342
+ var(--spectrum-detail-serif-light-strong-font-style)
353
343
  );
354
- line-height: var(
355
- --spectrum-detail-s-strong-text-line-height,
356
- var(--spectrum-alias-heading-text-line-height)
344
+ font-weight: var(
345
+ --mod-detail-serif-light-strong-font-weight,
346
+ var(--spectrum-detail-serif-light-strong-font-weight)
357
347
  );
358
- margin-bottom: 0;
359
- margin-top: 0;
360
- text-transform: var(--spectrum-detail-s-strong-text-transform, uppercase);
361
348
  }
362
- .spectrum-Detail--sizeXL {
363
- color: var(
364
- --spectrum-detail-xl-text-color,
365
- var(--spectrum-alias-heading-text-color)
349
+ .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized,
350
+ .spectrum-Detail--serif.spectrum-Detail--light em {
351
+ font-style: var(
352
+ --mod-detail-serif-light-emphasized-font-style,
353
+ var(--spectrum-detail-serif-light-emphasized-font-style)
366
354
  );
367
- }
368
- .spectrum-Detail--sizeL {
369
- color: var(
370
- --spectrum-detail-l-text-color,
371
- var(--spectrum-alias-heading-text-color)
355
+ font-weight: var(
356
+ --mod-detail-serif-light-emphasized-font-weight,
357
+ var(--spectrum-detail-serif-light-emphasized-font-weight)
372
358
  );
373
359
  }
374
- .spectrum-Detail--sizeM {
375
- color: var(
376
- --spectrum-detail-m-text-color,
377
- var(--spectrum-alias-heading-text-color)
360
+ .spectrum-Detail--serif.spectrum-Detail--light
361
+ .spectrum-Detail-strong.spectrum-Body-emphasized,
362
+ .spectrum-Detail--serif.spectrum-Detail--light em strong,
363
+ .spectrum-Detail--serif.spectrum-Detail--light strong em {
364
+ font-style: var(
365
+ --mod-detail-serif-light-strong-emphasized-font-style,
366
+ var(--spectrum-detail-serif-light-strong-emphasized-font-style)
367
+ );
368
+ font-weight: var(
369
+ --mod-detail-serif-light-strong-emphasized-font-weight,
370
+ var(--spectrum-detail-serif-light-strong-emphasized-font-weight)
378
371
  );
379
372
  }
380
- .spectrum-Detail--sizeS {
381
- color: var(
382
- --spectrum-detail-s-text-color,
383
- var(--spectrum-alias-heading-text-color)
373
+ .spectrum-Typography .spectrum-Detail {
374
+ margin-block-end: var(
375
+ --mod-detail-margin-end,
376
+ var(--spectrum-detail-margin-end)
377
+ );
378
+ margin-block-start: var(
379
+ --mod-detail-margin-start,
380
+ var(--spectrum-detail-margin-start)
384
381
  );
385
382
  }