@spectrum-web-components/styles 1.4.0 → 1.5.0-beta.0

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 (10) hide show
  1. package/package.json +2 -2
  2. package/src/spectrum-body.css +40 -152
  3. package/src/spectrum-code.css +20 -80
  4. package/src/spectrum-detail.css +63 -244
  5. package/src/spectrum-heading.css +100 -360
  6. package/src/spectrum-lang.css +77 -290
  7. package/src/spectrum-typography.css +5 -20
  8. package/tokens/express/system-theme-bridge.css +22 -643
  9. package/tokens/spectrum/system-theme-bridge.css +22 -643
  10. package/tokens-v2/system-theme-bridge.css +33 -650
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "1.4.0",
3
+ "version": "1.5.0-beta.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -115,7 +115,7 @@
115
115
  "lit-html"
116
116
  ],
117
117
  "dependencies": {
118
- "@spectrum-web-components/base": "1.4.0",
118
+ "@spectrum-web-components/base": "1.5.0-beta.0",
119
119
  "lit": "^2.5.0 || ^3.1.3"
120
120
  },
121
121
  "devDependencies": {
package/src/spectrum-body.css CHANGED
@@ -12,10 +12,7 @@ governing permissions and limitations under the License.
12
12
 
13
13
  /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14
14
  .spectrum-Typography .spectrum-Body {
15
- --spectrum-body-margin-end: calc(
16
- var(--mod-body-font-size, var(--spectrum-body-font-size)) *
17
- var(--spectrum-body-margin-multiplier)
18
- );
15
+ --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier));
19
16
  }
20
17
 
21
18
  @media (forced-colors: active) {
@@ -25,94 +22,43 @@ governing permissions and limitations under the License.
25
22
  }
26
23
 
27
24
  .spectrum-Body {
28
- font-family: var(
29
- --mod-body-sans-serif-font-family,
30
- var(--spectrum-body-sans-serif-font-family)
31
- );
32
- font-style: var(
33
- --mod-body-sans-serif-font-style,
34
- var(--spectrum-body-sans-serif-font-style)
35
- );
36
- font-weight: var(
37
- --mod-body-sans-serif-font-weight,
38
- var(--spectrum-body-sans-serif-font-weight)
39
- );
25
+ font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family));
26
+ font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style));
27
+ font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight));
40
28
  font-size: var(--mod-body-font-size, var(--spectrum-body-font-size));
41
- color: var(
42
- --highcontrast-body-font-color,
43
- var(--mod-body-font-color, var(--spectrum-body-font-color))
44
- );
29
+ color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color)));
45
30
  line-height: var(--mod-body-line-height, var(--spectrum-body-line-height));
46
- margin-block-start: var(
47
- --mod-body-margin-start,
48
- var(--mod-body-margin, var(--spectrum-body-margin-start, 0))
49
- );
50
- margin-block-end: var(
51
- --mod-body-margin-end,
52
- var(--mod-body-margin, var(--spectrum-body-margin-end, 0))
53
- );
31
+ margin-block-start: var(--mod-body-margin-start, var(--mod-body-margin, var(--spectrum-body-margin-start, 0)));
32
+ margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0)));
54
33
  }
55
34
 
56
35
  .spectrum-Body .spectrum-Body-strong,
57
36
  .spectrum-Body strong {
58
- font-style: var(
59
- --mod-body-sans-serif-strong-font-style,
60
- var(--spectrum-body-sans-serif-strong-font-style)
61
- );
62
- font-weight: var(
63
- --mod-body-sans-serif-strong-font-weight,
64
- var(--spectrum-body-sans-serif-strong-font-weight)
65
- );
37
+ font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style));
38
+ font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight));
66
39
  }
67
40
 
68
41
  .spectrum-Body .spectrum-Body-emphasized,
69
42
  .spectrum-Body em {
70
- font-style: var(
71
- --mod-body-sans-serif-emphasized-font-style,
72
- var(--spectrum-body-sans-serif-emphasized-font-style)
73
- );
74
- font-weight: var(
75
- --mod-body-sans-serif-emphasized-font-weight,
76
- var(--spectrum-body-sans-serif-emphasized-font-weight)
77
- );
43
+ font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style));
44
+ font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight));
78
45
  }
79
46
 
80
47
  .spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized,
81
48
  .spectrum-Body em strong,
82
49
  .spectrum-Body strong em {
83
- font-style: var(
84
- --mod-body-sans-serif-strong-emphasized-font-style,
85
- var(--spectrum-body-sans-serif-strong-emphasized-font-style)
86
- );
87
- font-weight: var(
88
- --mod-body-sans-serif-strong-emphasized-font-weight,
89
- var(--spectrum-body-sans-serif-strong-emphasized-font-weight)
90
- );
50
+ font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style));
51
+ font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight));
91
52
  }
92
53
 
93
54
  .spectrum-Body:lang(ja),
94
55
  .spectrum-Body:lang(ko),
95
56
  .spectrum-Body:lang(zh) {
96
- font-family: var(
97
- --mod-body-cjk-font-family,
98
- var(--spectrum-body-cjk-font-family)
99
- );
100
- font-style: var(
101
- --mod-body-cjk-font-style,
102
- var(--spectrum-body-cjk-font-style)
103
- );
104
- font-weight: var(
105
- --mod-body-cjk-font-weight,
106
- var(--spectrum-body-cjk-font-weight)
107
- );
108
- line-height: var(
109
- --mod-body-cjk-line-height,
110
- var(--spectrum-body-cjk-line-height)
111
- );
112
- letter-spacing: var(
113
- --mod-body-cjk-letter-spacing,
114
- var(--spectrum-body-cjk-letter-spacing)
115
- );
57
+ font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family));
58
+ font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style));
59
+ font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight));
60
+ line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height));
61
+ letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing));
116
62
  }
117
63
 
118
64
  .spectrum-Body:lang(ja) .spectrum-Body-strong,
@@ -121,14 +67,8 @@ governing permissions and limitations under the License.
121
67
  .spectrum-Body:lang(ko) strong,
122
68
  .spectrum-Body:lang(zh) .spectrum-Body-strong,
123
69
  .spectrum-Body:lang(zh) strong {
124
- font-style: var(
125
- --mod-body-cjk-strong-font-style,
126
- var(--spectrum-body-cjk-strong-font-style)
127
- );
128
- font-weight: var(
129
- --mod-body-cjk-strong-font-weight,
130
- var(--spectrum-body-cjk-strong-font-weight)
131
- );
70
+ font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style));
71
+ font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight));
132
72
  }
133
73
 
134
74
  .spectrum-Body:lang(ja) .spectrum-Body-emphasized,
@@ -137,14 +77,8 @@ governing permissions and limitations under the License.
137
77
  .spectrum-Body:lang(ko) em,
138
78
  .spectrum-Body:lang(zh) .spectrum-Body-emphasized,
139
79
  .spectrum-Body:lang(zh) em {
140
- font-style: var(
141
- --mod-body-cjk-emphasized-font-style,
142
- var(--spectrum-body-cjk-emphasized-font-style)
143
- );
144
- font-weight: var(
145
- --mod-body-cjk-emphasized-font-weight,
146
- var(--spectrum-body-cjk-emphasized-font-weight)
147
- );
80
+ font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style));
81
+ font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight));
148
82
  }
149
83
 
150
84
  .spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized,
@@ -156,87 +90,41 @@ governing permissions and limitations under the License.
156
90
  .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized,
157
91
  .spectrum-Body:lang(zh) em strong,
158
92
  .spectrum-Body:lang(zh) strong em {
159
- font-style: var(
160
- --mod-body-cjk-strong-emphasized-font-style,
161
- var(--spectrum-body-cjk-strong-emphasized-font-style)
162
- );
163
- font-weight: var(
164
- --mod-body-cjk-strong-emphasized-font-weight,
165
- var(--spectrum-body-cjk-strong-emphasized-font-weight)
166
- );
93
+ font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style));
94
+ font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight));
167
95
  }
168
96
 
169
97
  .spectrum-Body--serif {
170
- font-family: var(
171
- --mod-body-serif-font-family,
172
- var(--spectrum-body-serif-font-family)
173
- );
174
- font-weight: var(
175
- --mod-body-serif-font-weight,
176
- var(--spectrum-body-serif-font-weight)
177
- );
178
- font-style: var(
179
- --mod-body-serif-font-style,
180
- var(--spectrum-body-serif-font-style)
181
- );
98
+ font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family));
99
+ font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight));
100
+ font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style));
182
101
  }
183
102
 
184
103
  .spectrum-Body--serif .spectrum-Body-strong,
185
104
  .spectrum-Body--serif strong {
186
- font-style: var(
187
- --mod-body-serif-strong-font-style,
188
- var(--spectrum-body-serif-strong-font-style)
189
- );
190
- font-weight: var(
191
- --mod-body-serif-strong-font-weight,
192
- var(--spectrum-body-serif-strong-font-weight)
193
- );
105
+ font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style));
106
+ font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight));
194
107
  }
195
108
 
196
109
  .spectrum-Body--serif .spectrum-Body-emphasized,
197
110
  .spectrum-Body--serif em {
198
- font-style: var(
199
- --mod-body-serif-emphasized-font-style,
200
- var(--spectrum-body-serif-emphasized-font-style)
201
- );
202
- font-weight: var(
203
- --mod-body-serif-emphasized-font-weight,
204
- var(--spectrum-body-serif-emphasized-font-weight)
205
- );
111
+ font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style));
112
+ font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight));
206
113
  }
207
114
 
208
115
  .spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized,
209
116
  .spectrum-Body--serif em strong,
210
117
  .spectrum-Body--serif strong em {
211
- font-style: var(
212
- --mod-body-serif-strong-emphasized-font-style,
213
- var(--spectrum-body-serif-strong-emphasized-font-style)
214
- );
215
- font-weight: var(
216
- --mod-body-serif-strong-emphasized-font-weight,
217
- var(--spectrum-body-serif-strong-emphasized-font-weight)
218
- );
118
+ font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style));
119
+ font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight));
219
120
  }
220
121
 
221
122
  .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized {
222
- font-style: var(
223
- --mod-detail-sans-serif-light-strong-emphasized-font-style,
224
- var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)
225
- );
226
- font-weight: var(
227
- --mod-detail-sans-serif-light-strong-emphasized-font-weight,
228
- var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)
229
- );
230
- }
231
-
232
- .spectrum-Detail--serif.spectrum-Detail--light
233
- .spectrum-Detail-strong.spectrum-Body-emphasized {
234
- font-style: var(
235
- --mod-detail-serif-light-strong-emphasized-font-style,
236
- var(--spectrum-detail-serif-light-strong-emphasized-font-style)
237
- );
238
- font-weight: var(
239
- --mod-detail-serif-light-strong-emphasized-font-weight,
240
- var(--spectrum-detail-serif-light-strong-emphasized-font-weight)
241
- );
123
+ font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style));
124
+ font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight));
125
+ }
126
+
127
+ .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized {
128
+ font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style));
129
+ font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight));
242
130
  }
package/src/spectrum-code.css CHANGED
@@ -23,80 +23,38 @@ governing permissions and limitations under the License.
23
23
  font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight));
24
24
  font-size: var(--mod-code-font-size, var(--spectrum-code-font-size));
25
25
  line-height: var(--mod-code-line-height, var(--spectrum-code-line-height));
26
- color: var(
27
- --highcontrast-code-font-color,
28
- var(--mod-code-font-color, var(--spectrum-code-font-color))
29
- );
30
- margin-block-start: var(
31
- --mod-code-margin-start,
32
- var(--spectrum-code-margin-end, 0)
33
- );
34
- margin-block-end: var(
35
- --mod-code-margin-end,
36
- var(--spectrum-code-margin-end, 0)
37
- );
26
+ color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color)));
27
+ margin-block-start: var(--mod-code-margin-start, var(--spectrum-code-margin-end, 0));
28
+ margin-block-end: var(--mod-code-margin-end, var(--spectrum-code-margin-end, 0));
38
29
  }
39
30
 
40
31
  .spectrum-Code .spectrum-Code-strong,
41
32
  .spectrum-Code strong {
42
- font-style: var(
43
- --mod-code-strong-font-style,
44
- var(--spectrum-code-strong-font-style)
45
- );
46
- font-weight: var(
47
- --mod-code-strong-font-weight,
48
- var(--spectrum-code-strong-font-weight)
49
- );
33
+ font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style));
34
+ font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight));
50
35
  }
51
36
 
52
37
  .spectrum-Code .spectrum-Code-emphasized,
53
38
  .spectrum-Code em {
54
- font-style: var(
55
- --mod-code-emphasized-font-style,
56
- var(--spectrum-code-emphasized-font-style)
57
- );
58
- font-weight: var(
59
- --mod-code-emphasized-font-weight,
60
- var(--spectrum-code-emphasized-font-weight)
61
- );
39
+ font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style));
40
+ font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight));
62
41
  }
63
42
 
64
43
  .spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized,
65
44
  .spectrum-Code em strong,
66
45
  .spectrum-Code strong em {
67
- font-style: var(
68
- --mod-code-strong-emphasized-font-style,
69
- var(--spectrum-code-strong-emphasized-font-style)
70
- );
71
- font-weight: var(
72
- --mod-code-strong-emphasized-font-weight,
73
- var(--spectrum-code-strong-emphasized-font-weight)
74
- );
46
+ font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style));
47
+ font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight));
75
48
  }
76
49
 
77
50
  .spectrum-Code:lang(ja),
78
51
  .spectrum-Code:lang(ko),
79
52
  .spectrum-Code:lang(zh) {
80
- font-family: var(
81
- --mod-code-cjk-font-family,
82
- var(--spectrum-code-cjk-font-family)
83
- );
84
- font-style: var(
85
- --mod-code-cjk-font-style,
86
- var(--spectrum-code-cjk-font-style)
87
- );
88
- font-weight: var(
89
- --mod-code-cjk-font-weight,
90
- var(--spectrum-code-cjk-font-weight)
91
- );
92
- line-height: var(
93
- --mod-code-cjk-line-height,
94
- var(--spectrum-code-cjk-line-height)
95
- );
96
- letter-spacing: var(
97
- --mod-code-cjk-letter-spacing,
98
- var(--spectrum-code-cjk-letter-spacing)
99
- );
53
+ font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family));
54
+ font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style));
55
+ font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight));
56
+ line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height));
57
+ letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing));
100
58
  }
101
59
 
102
60
  .spectrum-Code:lang(ja) .spectrum-Code-strong,
@@ -105,14 +63,8 @@ governing permissions and limitations under the License.
105
63
  .spectrum-Code:lang(ko) strong,
106
64
  .spectrum-Code:lang(zh) .spectrum-Code-strong,
107
65
  .spectrum-Code:lang(zh) strong {
108
- font-style: var(
109
- --mod-code-cjk-strong-font-style,
110
- var(--spectrum-code-cjk-strong-font-style)
111
- );
112
- font-weight: var(
113
- --mod-code-cjk-strong-font-weight,
114
- var(--spectrum-code-cjk-strong-font-weight)
115
- );
66
+ font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style));
67
+ font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight));
116
68
  }
117
69
 
118
70
  .spectrum-Code:lang(ja) .spectrum-Code-emphasized,
@@ -121,14 +73,8 @@ governing permissions and limitations under the License.
121
73
  .spectrum-Code:lang(ko) em,
122
74
  .spectrum-Code:lang(zh) .spectrum-Code-emphasized,
123
75
  .spectrum-Code:lang(zh) em {
124
- font-style: var(
125
- --mod-code-cjk-emphasized-font-style,
126
- var(--spectrum-code-cjk-emphasized-font-style)
127
- );
128
- font-weight: var(
129
- --mod-code-cjk-emphasized-font-weight,
130
- var(--spectrum-code-cjk-emphasized-font-weight)
131
- );
76
+ font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style));
77
+ font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight));
132
78
  }
133
79
 
134
80
  .spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized,
@@ -140,12 +86,6 @@ governing permissions and limitations under the License.
140
86
  .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized,
141
87
  .spectrum-Code:lang(zh) em strong,
142
88
  .spectrum-Code:lang(zh) strong em {
143
- font-style: var(
144
- --mod-code-cjk-strong-emphasized-font-style,
145
- var(--spectrum-code-cjk-strong-emphasized-font-style)
146
- );
147
- font-weight: var(
148
- --mod-code-cjk-strong-emphasized-font-weight,
149
- var(--spectrum-code-cjk-strong-emphasized-font-weight)
150
- );
89
+ font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style));
90
+ font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight));
151
91
  }