@spectrum-web-components/styles 0.10.1 → 0.11.2

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 (23) hide show
  1. package/README.md +1 -1
  2. package/body.d.ts +1 -1
  3. package/code.d.ts +1 -1
  4. package/core-global.css +412 -37
  5. package/detail.d.ts +1 -1
  6. package/fonts.css +7 -14
  7. package/heading.d.ts +1 -1
  8. package/package.json +5 -5
  9. package/scale-large.css +3 -4252
  10. package/scale-medium.css +3 -4284
  11. package/spectrum-scale-large.css +5163 -0
  12. package/spectrum-scale-medium.css +5197 -0
  13. package/src/spectrum-lang.css +6 -1
  14. package/src/spectrum-lang.css.js +3 -1
  15. package/src/spectrum-lang.css.js.map +1 -1
  16. package/stories/styles.stories.js +54 -0
  17. package/stories/styles.stories.js.map +1 -0
  18. package/theme-dark.css +120 -173
  19. package/theme-darkest.css +120 -173
  20. package/theme-light.css +3 -1
  21. package/theme-lightest.css +3 -1
  22. package/typography.css +6 -1
  23. package/typography.d.ts +1 -1
package/theme-darkest.css CHANGED
@@ -18,7 +18,9 @@ governing permissions and limitations under the License.
18
18
  --spectrum-global-color-opacity-100: 1;
19
19
  --spectrum-global-color-opacity-90: 0.9;
20
20
  --spectrum-global-color-opacity-80: 0.8;
21
+ --spectrum-global-color-opacity-70: 0.7;
21
22
  --spectrum-global-color-opacity-60: 0.6;
23
+ --spectrum-global-color-opacity-55: 0.55;
22
24
  --spectrum-global-color-opacity-50: 0.5;
23
25
  --spectrum-global-color-opacity-42: 0.42;
24
26
  --spectrum-global-color-opacity-40: 0.4;
@@ -103,9 +105,9 @@ governing permissions and limitations under the License.
103
105
  );
104
106
  --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.6);
105
107
  --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.8);
106
- --spectrum-alias-background-color-hover-overlay: rgba(239, 239, 239, 0.08);
107
- --spectrum-alias-highlight-hover: rgba(239, 239, 239, 0.08);
108
- --spectrum-alias-highlight-down: rgba(239, 239, 239, 0.15);
108
+ --spectrum-alias-background-color-hover-overlay: hsla(0, 0%, 94%, 0.08);
109
+ --spectrum-alias-highlight-hover: hsla(0, 0%, 94%, 0.08);
110
+ --spectrum-alias-highlight-down: hsla(0, 0%, 94%, 0.15);
109
111
  --spectrum-alias-highlight-selected: rgba(38, 128, 235, 0.2);
110
112
  --spectrum-alias-highlight-selected-hover: rgba(38, 128, 235, 0.3);
111
113
  --spectrum-alias-text-highlight-color: rgba(38, 128, 235, 0.3);
@@ -113,8 +115,8 @@ governing permissions and limitations under the License.
113
115
  --spectrum-alias-border-color-selected: var(
114
116
  --spectrum-global-color-blue-600
115
117
  );
116
- --spectrum-alias-border-color-translucent: rgba(239, 239, 239, 0.1);
117
- --spectrum-alias-radial-reaction-color-default: rgba(200, 200, 200, 0.6);
118
+ --spectrum-alias-border-color-translucent: hsla(0, 0%, 94%, 0.1);
119
+ --spectrum-alias-radial-reaction-color-default: hsla(0, 0%, 78%, 0.6);
118
120
  --spectrum-alias-pasteboard-background-color: var(
119
121
  --spectrum-global-color-gray-50
120
122
  );
@@ -124,215 +126,160 @@ governing permissions and limitations under the License.
124
126
  --spectrum-alias-appframe-separator-color: var(
125
127
  --spectrum-global-color-gray-50
126
128
  );
127
- --spectrum-slider-s-tick-editable-radial-reaction-color: rgba(
128
- 200,
129
- 200,
130
- 200,
129
+ --spectrum-slider-s-tick-editable-radial-reaction-color: hsla(
130
+ 0,
131
+ 0%,
132
+ 78%,
131
133
  0.6
132
134
  );
133
- --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: rgba(
134
- 200,
135
- 200,
136
- 200,
135
+ --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: hsla(
136
+ 0,
137
+ 0%,
138
+ 78%,
137
139
  0.6
138
140
  );
139
- --spectrum-slider-s-range-tick-editable-radial-reaction-color: rgba(
140
- 200,
141
- 200,
142
- 200,
141
+ --spectrum-slider-s-range-tick-editable-radial-reaction-color: hsla(
142
+ 0,
143
+ 0%,
144
+ 78%,
143
145
  0.6
144
146
  );
145
- --spectrum-slider-s-tick-radial-reaction-color: rgba(200, 200, 200, 0.6);
146
- --spectrum-slider-s-ramp-tick-radial-reaction-color: rgba(
147
- 200,
148
- 200,
149
- 200,
147
+ --spectrum-slider-s-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
148
+ --spectrum-slider-s-ramp-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
149
+ --spectrum-slider-s-range-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
150
+ --spectrum-slider-s-editable-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
151
+ --spectrum-slider-s-ramp-editable-radial-reaction-color: hsla(
152
+ 0,
153
+ 0%,
154
+ 78%,
150
155
  0.6
151
156
  );
152
- --spectrum-slider-s-range-tick-radial-reaction-color: rgba(
153
- 200,
154
- 200,
155
- 200,
157
+ --spectrum-slider-s-range-editable-radial-reaction-color: hsla(
158
+ 0,
159
+ 0%,
160
+ 78%,
156
161
  0.6
157
162
  );
158
- --spectrum-slider-s-editable-radial-reaction-color: rgba(
159
- 200,
160
- 200,
161
- 200,
163
+ --spectrum-slider-s-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
164
+ --spectrum-slider-s-ramp-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
165
+ --spectrum-slider-s-range-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
166
+ --spectrum-slider-m-tick-editable-radial-reaction-color: hsla(
167
+ 0,
168
+ 0%,
169
+ 78%,
162
170
  0.6
163
171
  );
164
- --spectrum-slider-s-ramp-editable-radial-reaction-color: rgba(
165
- 200,
166
- 200,
167
- 200,
172
+ --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: hsla(
173
+ 0,
174
+ 0%,
175
+ 78%,
168
176
  0.6
169
177
  );
170
- --spectrum-slider-s-range-editable-radial-reaction-color: rgba(
171
- 200,
172
- 200,
173
- 200,
178
+ --spectrum-slider-m-range-tick-editable-radial-reaction-color: hsla(
179
+ 0,
180
+ 0%,
181
+ 78%,
174
182
  0.6
175
183
  );
176
- --spectrum-slider-s-radial-reaction-color: rgba(200, 200, 200, 0.6);
177
- --spectrum-slider-s-ramp-radial-reaction-color: rgba(200, 200, 200, 0.6);
178
- --spectrum-slider-s-range-radial-reaction-color: rgba(200, 200, 200, 0.6);
179
- --spectrum-slider-m-tick-editable-radial-reaction-color: rgba(
180
- 200,
181
- 200,
182
- 200,
184
+ --spectrum-slider-m-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
185
+ --spectrum-slider-m-ramp-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
186
+ --spectrum-slider-m-range-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
187
+ --spectrum-slider-m-editable-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
188
+ --spectrum-slider-m-ramp-editable-radial-reaction-color: hsla(
189
+ 0,
190
+ 0%,
191
+ 78%,
183
192
  0.6
184
193
  );
185
- --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: rgba(
186
- 200,
187
- 200,
188
- 200,
194
+ --spectrum-slider-m-range-editable-radial-reaction-color: hsla(
195
+ 0,
196
+ 0%,
197
+ 78%,
189
198
  0.6
190
199
  );
191
- --spectrum-slider-m-range-tick-editable-radial-reaction-color: rgba(
192
- 200,
193
- 200,
194
- 200,
200
+ --spectrum-slider-m-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
201
+ --spectrum-slider-m-ramp-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
202
+ --spectrum-slider-m-range-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
203
+ --spectrum-slider-l-tick-editable-radial-reaction-color: hsla(
204
+ 0,
205
+ 0%,
206
+ 78%,
195
207
  0.6
196
208
  );
197
- --spectrum-slider-m-tick-radial-reaction-color: rgba(200, 200, 200, 0.6);
198
- --spectrum-slider-m-ramp-tick-radial-reaction-color: rgba(
199
- 200,
200
- 200,
201
- 200,
209
+ --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: hsla(
210
+ 0,
211
+ 0%,
212
+ 78%,
202
213
  0.6
203
214
  );
204
- --spectrum-slider-m-range-tick-radial-reaction-color: rgba(
205
- 200,
206
- 200,
207
- 200,
215
+ --spectrum-slider-l-range-tick-editable-radial-reaction-color: hsla(
216
+ 0,
217
+ 0%,
218
+ 78%,
208
219
  0.6
209
220
  );
210
- --spectrum-slider-m-editable-radial-reaction-color: rgba(
211
- 200,
212
- 200,
213
- 200,
221
+ --spectrum-slider-l-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
222
+ --spectrum-slider-l-ramp-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
223
+ --spectrum-slider-l-range-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
224
+ --spectrum-slider-l-editable-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
225
+ --spectrum-slider-l-ramp-editable-radial-reaction-color: hsla(
226
+ 0,
227
+ 0%,
228
+ 78%,
214
229
  0.6
215
230
  );
216
- --spectrum-slider-m-ramp-editable-radial-reaction-color: rgba(
217
- 200,
218
- 200,
219
- 200,
231
+ --spectrum-slider-l-range-editable-radial-reaction-color: hsla(
232
+ 0,
233
+ 0%,
234
+ 78%,
220
235
  0.6
221
236
  );
222
- --spectrum-slider-m-range-editable-radial-reaction-color: rgba(
223
- 200,
224
- 200,
225
- 200,
237
+ --spectrum-slider-l-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
238
+ --spectrum-slider-l-ramp-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
239
+ --spectrum-slider-l-range-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
240
+ --spectrum-slider-xl-tick-editable-radial-reaction-color: hsla(
241
+ 0,
242
+ 0%,
243
+ 78%,
226
244
  0.6
227
245
  );
228
- --spectrum-slider-m-radial-reaction-color: rgba(200, 200, 200, 0.6);
229
- --spectrum-slider-m-ramp-radial-reaction-color: rgba(200, 200, 200, 0.6);
230
- --spectrum-slider-m-range-radial-reaction-color: rgba(200, 200, 200, 0.6);
231
- --spectrum-slider-l-tick-editable-radial-reaction-color: rgba(
232
- 200,
233
- 200,
234
- 200,
246
+ --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: hsla(
247
+ 0,
248
+ 0%,
249
+ 78%,
235
250
  0.6
236
251
  );
237
- --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: rgba(
238
- 200,
239
- 200,
240
- 200,
252
+ --spectrum-slider-xl-range-tick-editable-radial-reaction-color: hsla(
253
+ 0,
254
+ 0%,
255
+ 78%,
241
256
  0.6
242
257
  );
243
- --spectrum-slider-l-range-tick-editable-radial-reaction-color: rgba(
244
- 200,
245
- 200,
246
- 200,
258
+ --spectrum-slider-xl-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
259
+ --spectrum-slider-xl-ramp-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
260
+ --spectrum-slider-xl-range-tick-radial-reaction-color: hsla(
261
+ 0,
262
+ 0%,
263
+ 78%,
247
264
  0.6
248
265
  );
249
- --spectrum-slider-l-tick-radial-reaction-color: rgba(200, 200, 200, 0.6);
250
- --spectrum-slider-l-ramp-tick-radial-reaction-color: rgba(
251
- 200,
252
- 200,
253
- 200,
266
+ --spectrum-slider-xl-editable-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
267
+ --spectrum-slider-xl-ramp-editable-radial-reaction-color: hsla(
268
+ 0,
269
+ 0%,
270
+ 78%,
254
271
  0.6
255
272
  );
256
- --spectrum-slider-l-range-tick-radial-reaction-color: rgba(
257
- 200,
258
- 200,
259
- 200,
273
+ --spectrum-slider-xl-range-editable-radial-reaction-color: hsla(
274
+ 0,
275
+ 0%,
276
+ 78%,
260
277
  0.6
261
278
  );
262
- --spectrum-slider-l-editable-radial-reaction-color: rgba(
263
- 200,
264
- 200,
265
- 200,
266
- 0.6
267
- );
268
- --spectrum-slider-l-ramp-editable-radial-reaction-color: rgba(
269
- 200,
270
- 200,
271
- 200,
272
- 0.6
273
- );
274
- --spectrum-slider-l-range-editable-radial-reaction-color: rgba(
275
- 200,
276
- 200,
277
- 200,
278
- 0.6
279
- );
280
- --spectrum-slider-l-radial-reaction-color: rgba(200, 200, 200, 0.6);
281
- --spectrum-slider-l-ramp-radial-reaction-color: rgba(200, 200, 200, 0.6);
282
- --spectrum-slider-l-range-radial-reaction-color: rgba(200, 200, 200, 0.6);
283
- --spectrum-slider-xl-tick-editable-radial-reaction-color: rgba(
284
- 200,
285
- 200,
286
- 200,
287
- 0.6
288
- );
289
- --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: rgba(
290
- 200,
291
- 200,
292
- 200,
293
- 0.6
294
- );
295
- --spectrum-slider-xl-range-tick-editable-radial-reaction-color: rgba(
296
- 200,
297
- 200,
298
- 200,
299
- 0.6
300
- );
301
- --spectrum-slider-xl-tick-radial-reaction-color: rgba(200, 200, 200, 0.6);
302
- --spectrum-slider-xl-ramp-tick-radial-reaction-color: rgba(
303
- 200,
304
- 200,
305
- 200,
306
- 0.6
307
- );
308
- --spectrum-slider-xl-range-tick-radial-reaction-color: rgba(
309
- 200,
310
- 200,
311
- 200,
312
- 0.6
313
- );
314
- --spectrum-slider-xl-editable-radial-reaction-color: rgba(
315
- 200,
316
- 200,
317
- 200,
318
- 0.6
319
- );
320
- --spectrum-slider-xl-ramp-editable-radial-reaction-color: rgba(
321
- 200,
322
- 200,
323
- 200,
324
- 0.6
325
- );
326
- --spectrum-slider-xl-range-editable-radial-reaction-color: rgba(
327
- 200,
328
- 200,
329
- 200,
330
- 0.6
331
- );
332
- --spectrum-slider-xl-radial-reaction-color: rgba(200, 200, 200, 0.6);
333
- --spectrum-slider-xl-ramp-radial-reaction-color: rgba(200, 200, 200, 0.6);
334
- --spectrum-slider-xl-range-radial-reaction-color: rgba(200, 200, 200, 0.6);
335
- --spectrum-well-background-color: rgba(200, 200, 200, 0.02);
336
- --spectrum-well-border-color: rgba(239, 239, 239, 0.05);
279
+ --spectrum-slider-xl-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
280
+ --spectrum-slider-xl-ramp-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
281
+ --spectrum-slider-xl-range-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
282
+ --spectrum-well-background-color: hsla(0, 0%, 78%, 0.02);
283
+ --spectrum-well-border-color: hsla(0, 0%, 94%, 0.05);
337
284
  }
338
285
  /* stylelint-enable */
package/theme-light.css CHANGED
@@ -18,7 +18,9 @@ governing permissions and limitations under the License.
18
18
  --spectrum-global-color-opacity-100: 1;
19
19
  --spectrum-global-color-opacity-90: 0.9;
20
20
  --spectrum-global-color-opacity-80: 0.8;
21
+ --spectrum-global-color-opacity-70: 0.7;
21
22
  --spectrum-global-color-opacity-60: 0.6;
23
+ --spectrum-global-color-opacity-55: 0.55;
22
24
  --spectrum-global-color-opacity-50: 0.5;
23
25
  --spectrum-global-color-opacity-42: 0.42;
24
26
  --spectrum-global-color-opacity-40: 0.4;
@@ -109,7 +111,7 @@ governing permissions and limitations under the License.
109
111
  --spectrum-alias-highlight-selected: rgba(20, 115, 230, 0.1);
110
112
  --spectrum-alias-highlight-selected-hover: rgba(20, 115, 230, 0.2);
111
113
  --spectrum-alias-text-highlight-color: rgba(20, 115, 230, 0.2);
112
- --spectrum-alias-background-color-quickactions: rgba(245, 245, 245, 0.9);
114
+ --spectrum-alias-background-color-quickactions: hsla(0, 0%, 96%, 0.9);
113
115
  --spectrum-alias-border-color-selected: var(
114
116
  --spectrum-global-color-blue-500
115
117
  );
package/theme-lightest.css CHANGED
@@ -18,7 +18,9 @@ governing permissions and limitations under the License.
18
18
  --spectrum-global-color-opacity-100: 1;
19
19
  --spectrum-global-color-opacity-90: 0.9;
20
20
  --spectrum-global-color-opacity-80: 0.8;
21
+ --spectrum-global-color-opacity-70: 0.7;
21
22
  --spectrum-global-color-opacity-60: 0.6;
23
+ --spectrum-global-color-opacity-55: 0.55;
22
24
  --spectrum-global-color-opacity-50: 0.5;
23
25
  --spectrum-global-color-opacity-42: 0.42;
24
26
  --spectrum-global-color-opacity-40: 0.4;
@@ -109,7 +111,7 @@ governing permissions and limitations under the License.
109
111
  --spectrum-alias-highlight-selected: rgba(38, 128, 235, 0.1);
110
112
  --spectrum-alias-highlight-selected-hover: rgba(38, 128, 235, 0.2);
111
113
  --spectrum-alias-text-highlight-color: rgba(38, 128, 235, 0.2);
112
- --spectrum-alias-background-color-quickactions: rgba(255, 255, 255, 0.9);
114
+ --spectrum-alias-background-color-quickactions: hsla(0, 0%, 100%, 0.9);
113
115
  --spectrum-alias-border-color-selected: var(
114
116
  --spectrum-global-color-blue-500
115
117
  );
package/typography.css CHANGED
@@ -40,7 +40,12 @@ governing permissions and limitations under the License.
40
40
  var(--spectrum-global-font-font-family-zhhans)
41
41
  );
42
42
  }
43
- .spectrum:lang(zh-Hant),
43
+ .spectrum:lang(zh-Hant) {
44
+ font-family: var(
45
+ --spectrum-alias-font-family-zh,
46
+ var(--spectrum-global-font-font-family-zh)
47
+ );
48
+ }
44
49
  .spectrum:lang(zh) {
45
50
  font-family: var(
46
51
  --spectrum-alias-font-family-zh,
package/typography.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: import("lit-element").CSSResult[];
1
+ declare const _default: import("lit").CSSResult[];
2
2
  export default _default;