@spectrum-web-components/styles 0.11.0 → 0.11.3-express.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 (23) hide show
  1. package/README.md +1 -1
  2. package/core-global.css +535 -37
  3. package/express/core-global.css +2625 -0
  4. package/express/scale-large.css +6487 -0
  5. package/express/scale-medium.css +6541 -0
  6. package/express/theme-dark.css +302 -0
  7. package/express/theme-light.css +297 -0
  8. package/fonts.css +7 -14
  9. package/package.json +7 -6
  10. package/scale-large.css +3190 -958
  11. package/scale-medium.css +3273 -1023
  12. package/spectrum-scale-large.css +6499 -0
  13. package/spectrum-scale-medium.css +6549 -0
  14. package/src/spectrum-lang.css +6 -1
  15. package/src/spectrum-lang.css.js +3 -1
  16. package/src/spectrum-lang.css.js.map +1 -1
  17. package/stories/styles.stories.js +54 -0
  18. package/stories/styles.stories.js.map +1 -0
  19. package/theme-dark.css +126 -170
  20. package/theme-darkest.css +126 -170
  21. package/theme-light.css +12 -1
  22. package/theme-lightest.css +3 -1
  23. package/typography.css +8 -2
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,169 @@ 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,
131
- 0.6
132
- );
133
- --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: rgba(
134
- 200,
135
- 200,
136
- 200,
137
- 0.6
138
- );
139
- --spectrum-slider-s-range-tick-editable-radial-reaction-color: rgba(
140
- 200,
141
- 200,
142
- 200,
143
- 0.6
144
- );
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,
150
- 0.6
151
- );
152
- --spectrum-slider-s-range-tick-radial-reaction-color: rgba(
153
- 200,
154
- 200,
155
- 200,
156
- 0.6
157
- );
158
- --spectrum-slider-s-editable-radial-reaction-color: rgba(
159
- 200,
160
- 200,
161
- 200,
162
- 0.6
163
- );
164
- --spectrum-slider-s-ramp-editable-radial-reaction-color: rgba(
165
- 200,
166
- 200,
167
- 200,
168
- 0.6
169
- );
170
- --spectrum-slider-s-range-editable-radial-reaction-color: rgba(
171
- 200,
172
- 200,
173
- 200,
174
- 0.6
175
- );
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,
183
- 0.6
129
+ --spectrum-scrollbar-mac-s-track-background-color: var(
130
+ --spectrum-global-color-gray-100
184
131
  );
185
- --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: rgba(
186
- 200,
187
- 200,
188
- 200,
189
- 0.6
132
+ --spectrum-scrollbar-mac-m-track-background-color: var(
133
+ --spectrum-global-color-gray-100
190
134
  );
191
- --spectrum-slider-m-range-tick-editable-radial-reaction-color: rgba(
192
- 200,
193
- 200,
194
- 200,
195
- 0.6
135
+ --spectrum-scrollbar-mac-l-track-background-color: var(
136
+ --spectrum-global-color-gray-100
196
137
  );
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,
138
+ --spectrum-slider-s-tick-editable-radial-reaction-color: hsla(
139
+ 0,
140
+ 0%,
141
+ 78%,
202
142
  0.6
203
143
  );
204
- --spectrum-slider-m-range-tick-radial-reaction-color: rgba(
205
- 200,
206
- 200,
207
- 200,
144
+ --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: hsla(
145
+ 0,
146
+ 0%,
147
+ 78%,
208
148
  0.6
209
149
  );
210
- --spectrum-slider-m-editable-radial-reaction-color: rgba(
211
- 200,
212
- 200,
213
- 200,
150
+ --spectrum-slider-s-range-tick-editable-radial-reaction-color: hsla(
151
+ 0,
152
+ 0%,
153
+ 78%,
214
154
  0.6
215
155
  );
216
- --spectrum-slider-m-ramp-editable-radial-reaction-color: rgba(
217
- 200,
218
- 200,
219
- 200,
156
+ --spectrum-slider-s-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
157
+ --spectrum-slider-s-ramp-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
158
+ --spectrum-slider-s-range-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
159
+ --spectrum-slider-s-editable-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
160
+ --spectrum-slider-s-ramp-editable-radial-reaction-color: hsla(
161
+ 0,
162
+ 0%,
163
+ 78%,
220
164
  0.6
221
165
  );
222
- --spectrum-slider-m-range-editable-radial-reaction-color: rgba(
223
- 200,
224
- 200,
225
- 200,
166
+ --spectrum-slider-s-range-editable-radial-reaction-color: hsla(
167
+ 0,
168
+ 0%,
169
+ 78%,
226
170
  0.6
227
171
  );
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,
172
+ --spectrum-slider-s-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
173
+ --spectrum-slider-s-ramp-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
174
+ --spectrum-slider-s-range-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
175
+ --spectrum-slider-m-tick-editable-radial-reaction-color: hsla(
176
+ 0,
177
+ 0%,
178
+ 78%,
235
179
  0.6
236
180
  );
237
- --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: rgba(
238
- 200,
239
- 200,
240
- 200,
181
+ --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: hsla(
182
+ 0,
183
+ 0%,
184
+ 78%,
241
185
  0.6
242
186
  );
243
- --spectrum-slider-l-range-tick-editable-radial-reaction-color: rgba(
244
- 200,
245
- 200,
246
- 200,
187
+ --spectrum-slider-m-range-tick-editable-radial-reaction-color: hsla(
188
+ 0,
189
+ 0%,
190
+ 78%,
247
191
  0.6
248
192
  );
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,
193
+ --spectrum-slider-m-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
194
+ --spectrum-slider-m-ramp-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
195
+ --spectrum-slider-m-range-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
196
+ --spectrum-slider-m-editable-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
197
+ --spectrum-slider-m-ramp-editable-radial-reaction-color: hsla(
198
+ 0,
199
+ 0%,
200
+ 78%,
254
201
  0.6
255
202
  );
256
- --spectrum-slider-l-range-tick-radial-reaction-color: rgba(
257
- 200,
258
- 200,
259
- 200,
203
+ --spectrum-slider-m-range-editable-radial-reaction-color: hsla(
204
+ 0,
205
+ 0%,
206
+ 78%,
260
207
  0.6
261
208
  );
262
- --spectrum-slider-l-editable-radial-reaction-color: rgba(
263
- 200,
264
- 200,
265
- 200,
209
+ --spectrum-slider-m-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
210
+ --spectrum-slider-m-ramp-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
211
+ --spectrum-slider-m-range-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
212
+ --spectrum-slider-l-tick-editable-radial-reaction-color: hsla(
213
+ 0,
214
+ 0%,
215
+ 78%,
266
216
  0.6
267
217
  );
268
- --spectrum-slider-l-ramp-editable-radial-reaction-color: rgba(
269
- 200,
270
- 200,
271
- 200,
218
+ --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: hsla(
219
+ 0,
220
+ 0%,
221
+ 78%,
272
222
  0.6
273
223
  );
274
- --spectrum-slider-l-range-editable-radial-reaction-color: rgba(
275
- 200,
276
- 200,
277
- 200,
224
+ --spectrum-slider-l-range-tick-editable-radial-reaction-color: hsla(
225
+ 0,
226
+ 0%,
227
+ 78%,
278
228
  0.6
279
229
  );
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,
230
+ --spectrum-slider-l-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
231
+ --spectrum-slider-l-ramp-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
232
+ --spectrum-slider-l-range-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
233
+ --spectrum-slider-l-editable-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
234
+ --spectrum-slider-l-ramp-editable-radial-reaction-color: hsla(
235
+ 0,
236
+ 0%,
237
+ 78%,
287
238
  0.6
288
239
  );
289
- --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: rgba(
290
- 200,
291
- 200,
292
- 200,
240
+ --spectrum-slider-l-range-editable-radial-reaction-color: hsla(
241
+ 0,
242
+ 0%,
243
+ 78%,
293
244
  0.6
294
245
  );
295
- --spectrum-slider-xl-range-tick-editable-radial-reaction-color: rgba(
296
- 200,
297
- 200,
298
- 200,
246
+ --spectrum-slider-l-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
247
+ --spectrum-slider-l-ramp-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
248
+ --spectrum-slider-l-range-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
249
+ --spectrum-slider-xl-tick-editable-radial-reaction-color: hsla(
250
+ 0,
251
+ 0%,
252
+ 78%,
299
253
  0.6
300
254
  );
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,
255
+ --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: hsla(
256
+ 0,
257
+ 0%,
258
+ 78%,
306
259
  0.6
307
260
  );
308
- --spectrum-slider-xl-range-tick-radial-reaction-color: rgba(
309
- 200,
310
- 200,
311
- 200,
261
+ --spectrum-slider-xl-range-tick-editable-radial-reaction-color: hsla(
262
+ 0,
263
+ 0%,
264
+ 78%,
312
265
  0.6
313
266
  );
314
- --spectrum-slider-xl-editable-radial-reaction-color: rgba(
315
- 200,
316
- 200,
317
- 200,
267
+ --spectrum-slider-xl-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
268
+ --spectrum-slider-xl-ramp-tick-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
269
+ --spectrum-slider-xl-range-tick-radial-reaction-color: hsla(
270
+ 0,
271
+ 0%,
272
+ 78%,
318
273
  0.6
319
274
  );
320
- --spectrum-slider-xl-ramp-editable-radial-reaction-color: rgba(
321
- 200,
322
- 200,
323
- 200,
275
+ --spectrum-slider-xl-editable-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
276
+ --spectrum-slider-xl-ramp-editable-radial-reaction-color: hsla(
277
+ 0,
278
+ 0%,
279
+ 78%,
324
280
  0.6
325
281
  );
326
- --spectrum-slider-xl-range-editable-radial-reaction-color: rgba(
327
- 200,
328
- 200,
329
- 200,
282
+ --spectrum-slider-xl-range-editable-radial-reaction-color: hsla(
283
+ 0,
284
+ 0%,
285
+ 78%,
330
286
  0.6
331
287
  );
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);
288
+ --spectrum-slider-xl-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
289
+ --spectrum-slider-xl-ramp-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
290
+ --spectrum-slider-xl-range-radial-reaction-color: hsla(0, 0%, 78%, 0.6);
291
+ --spectrum-well-background-color: hsla(0, 0%, 78%, 0.02);
292
+ --spectrum-well-border-color: hsla(0, 0%, 94%, 0.05);
337
293
  }
338
294
  /* 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
  );
@@ -279,5 +281,14 @@ governing permissions and limitations under the License.
279
281
  --spectrum-slider-xl-range-radial-reaction-color: rgba(75, 75, 75, 0.6);
280
282
  --spectrum-well-background-color: rgba(75, 75, 75, 0.02);
281
283
  --spectrum-well-border-color: rgba(44, 44, 44, 0.05);
284
+ --spectrum-scrollbar-mac-s-track-background-color: var(
285
+ --spectrum-global-color-gray-75
286
+ );
287
+ --spectrum-scrollbar-mac-m-track-background-color: var(
288
+ --spectrum-global-color-gray-75
289
+ );
290
+ --spectrum-scrollbar-mac-l-track-background-color: var(
291
+ --spectrum-global-color-gray-75
292
+ );
282
293
  }
283
294
  /* stylelint-enable */
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
@@ -22,7 +22,8 @@ governing permissions and limitations under the License.
22
22
  var(--spectrum-global-dimension-font-size-100)
23
23
  );
24
24
  }
25
- .spectrum:lang(ar) {
25
+ :root,
26
+ :host:lang(ar) {
26
27
  font-family: var(
27
28
  --spectrum-alias-font-family-ar,
28
29
  var(--spectrum-global-font-font-family-ar)
@@ -40,7 +41,12 @@ governing permissions and limitations under the License.
40
41
  var(--spectrum-global-font-font-family-zhhans)
41
42
  );
42
43
  }
43
- .spectrum:lang(zh-Hant),
44
+ .spectrum:lang(zh-Hant) {
45
+ font-family: var(
46
+ --spectrum-alias-font-family-zh,
47
+ var(--spectrum-global-font-font-family-zh)
48
+ );
49
+ }
44
50
  .spectrum:lang(zh) {
45
51
  font-family: var(
46
52
  --spectrum-alias-font-family-zh,