@spectrum-web-components/styles 0.17.1 → 0.18.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 (14) hide show
  1. package/express/spectrum-scale-large.css +0 -12
  2. package/express/spectrum-scale-medium.css +0 -12
  3. package/package.json +3 -3
  4. package/spectrum-scale-large.css +0 -12
  5. package/spectrum-scale-medium.css +0 -12
  6. package/tokens/dark-vars.css +16 -0
  7. package/tokens/darkest-vars.css +16 -0
  8. package/tokens/express/global-vars.css +47 -0
  9. package/tokens/global-vars.css +162 -3
  10. package/tokens/large-vars.css +13 -2
  11. package/tokens/light-vars.css +16 -0
  12. package/tokens/medium-vars.css +13 -2
  13. package/tokens/spectrum/custom-vars.css +5 -0
  14. package/tokens/spectrum/global-vars.css +47 -0
package/express/spectrum-scale-large.css CHANGED
@@ -329,18 +329,6 @@ governing permissions and limitations under the License.
329
329
  --spectrum-progresscircle-m-border-size: var(
330
330
  --spectrum-global-dimension-static-size-50
331
331
  );
332
- --spectrum-statuslight-s-info-text-padding-bottom: var(
333
- --spectrum-global-dimension-static-size-85
334
- );
335
- --spectrum-statuslight-l-info-dot-size: var(
336
- --spectrum-global-dimension-static-size-150
337
- );
338
- --spectrum-statuslight-l-info-text-padding-top: var(
339
- --spectrum-global-dimension-static-size-150
340
- );
341
- --spectrum-statuslight-xl-info-dot-size: var(
342
- --spectrum-global-dimension-static-size-150
343
- );
344
332
  --spectrum-tag-m-texticon-padding-left: var(
345
333
  --spectrum-global-dimension-static-size-150
346
334
  );
package/express/spectrum-scale-medium.css CHANGED
@@ -337,18 +337,6 @@ governing permissions and limitations under the License.
337
337
  --spectrum-global-dimension-static-size-25
338
338
  );
339
339
  --spectrum-progresscircle-m-border-size: 3px;
340
- --spectrum-statuslight-s-info-text-padding-bottom: var(
341
- --spectrum-global-dimension-static-size-65
342
- );
343
- --spectrum-statuslight-l-info-dot-size: var(
344
- --spectrum-global-dimension-size-125
345
- );
346
- --spectrum-statuslight-l-info-text-padding-top: var(
347
- --spectrum-global-dimension-size-115
348
- );
349
- --spectrum-statuslight-xl-info-dot-size: var(
350
- --spectrum-global-dimension-size-125
351
- );
352
340
  --spectrum-tag-m-texticon-padding-left: var(
353
341
  --spectrum-global-dimension-size-125
354
342
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "0.17.1",
3
+ "version": "0.18.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -113,7 +113,7 @@
113
113
  "devDependencies": {
114
114
  "@spectrum-css/commons": "^3.0.6",
115
115
  "@spectrum-css/expressvars": "^2.0.0",
116
- "@spectrum-css/tokens": "^1.0.7",
116
+ "@spectrum-css/tokens": "^3.0.0",
117
117
  "@spectrum-css/typography": "^4.0.20",
118
118
  "@spectrum-css/vars": "^8.0.0"
119
119
  },
@@ -122,5 +122,5 @@
122
122
  "./**/*.css"
123
123
  ],
124
124
  "style": "all-medium-lightest.css",
125
- "gitHead": "60b2d3b7d9020d72f9ae930568670321a1918e6f"
125
+ "gitHead": "15588c72c774b17cfac605b20ac52a27d123bd03"
126
126
  }
package/spectrum-scale-large.css CHANGED
@@ -340,18 +340,6 @@ governing permissions and limitations under the License.
340
340
  --spectrum-progresscircle-m-border-size: var(
341
341
  --spectrum-global-dimension-static-size-50
342
342
  );
343
- --spectrum-statuslight-s-info-text-padding-bottom: var(
344
- --spectrum-global-dimension-static-size-85
345
- );
346
- --spectrum-statuslight-l-info-dot-size: var(
347
- --spectrum-global-dimension-static-size-150
348
- );
349
- --spectrum-statuslight-l-info-text-padding-top: var(
350
- --spectrum-global-dimension-static-size-150
351
- );
352
- --spectrum-statuslight-xl-info-dot-size: var(
353
- --spectrum-global-dimension-static-size-150
354
- );
355
343
  --spectrum-tag-m-texticon-padding-left: var(
356
344
  --spectrum-global-dimension-static-size-150
357
345
  );
package/spectrum-scale-medium.css CHANGED
@@ -342,18 +342,6 @@ governing permissions and limitations under the License.
342
342
  --spectrum-global-dimension-static-size-25
343
343
  );
344
344
  --spectrum-progresscircle-m-border-size: 3px;
345
- --spectrum-statuslight-s-info-text-padding-bottom: var(
346
- --spectrum-global-dimension-static-size-65
347
- );
348
- --spectrum-statuslight-l-info-dot-size: var(
349
- --spectrum-global-dimension-size-125
350
- );
351
- --spectrum-statuslight-l-info-text-padding-top: var(
352
- --spectrum-global-dimension-size-115
353
- );
354
- --spectrum-statuslight-xl-info-dot-size: var(
355
- --spectrum-global-dimension-size-125
356
- );
357
345
  --spectrum-tag-m-texticon-padding-left: var(
358
346
  --spectrum-global-dimension-size-125
359
347
  );
package/tokens/dark-vars.css CHANGED
@@ -13,6 +13,22 @@ governing permissions and limitations under the License.
13
13
  :host,
14
14
  :root {
15
15
  --spectrum-overlay-opacity: 0.5;
16
+ --spectrum-gray-background-color-default: var(--spectrum-gray-700);
17
+ --spectrum-red-background-color-default: var(--spectrum-red-700);
18
+ --spectrum-orange-background-color-default: var(--spectrum-orange-800);
19
+ --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
20
+ --spectrum-chartreuse-background-color-default: var(
21
+ --spectrum-chartreuse-900
22
+ );
23
+ --spectrum-celery-background-color-default: var(--spectrum-celery-800);
24
+ --spectrum-green-background-color-default: var(--spectrum-green-700);
25
+ --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
26
+ --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
27
+ --spectrum-blue-background-color-default: var(--spectrum-blue-700);
28
+ --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
29
+ --spectrum-purple-background-color-default: var(--spectrum-purple-700);
30
+ --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
31
+ --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
16
32
  --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
17
33
  --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
18
34
  --spectrum-neutral-background-color-down: var(--spectrum-gray-200);
package/tokens/darkest-vars.css CHANGED
@@ -13,6 +13,22 @@ governing permissions and limitations under the License.
13
13
  :host,
14
14
  :root {
15
15
  --spectrum-overlay-opacity: 0.6;
16
+ --spectrum-gray-background-color-default: var(--spectrum-gray-700);
17
+ --spectrum-red-background-color-default: var(--spectrum-red-700);
18
+ --spectrum-orange-background-color-default: var(--spectrum-orange-800);
19
+ --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
20
+ --spectrum-chartreuse-background-color-default: var(
21
+ --spectrum-chartreuse-900
22
+ );
23
+ --spectrum-celery-background-color-default: var(--spectrum-celery-800);
24
+ --spectrum-green-background-color-default: var(--spectrum-green-700);
25
+ --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
26
+ --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
27
+ --spectrum-blue-background-color-default: var(--spectrum-blue-700);
28
+ --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
29
+ --spectrum-purple-background-color-default: var(--spectrum-purple-700);
30
+ --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
31
+ --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
16
32
  --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
17
33
  --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
18
34
  --spectrum-neutral-background-color-down: var(--spectrum-gray-200);
package/tokens/express/global-vars.css CHANGED
@@ -26,6 +26,9 @@ governing permissions and limitations under the License.
26
26
  --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
27
27
  --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
28
28
  --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
29
+ --spectrum-heading: var(--spectrum-font-black-default);
30
+ --spectrum-heading-emphasized: var(--spectrum-font-black-italic-default);
31
+ --spectrum-cjk-heading: var(--spectrum-font-black-cjk);
29
32
  --spectrum-border-width-100: 2px;
30
33
  }
31
34
  :host,
@@ -315,3 +318,47 @@ governing permissions and limitations under the License.
315
318
  --spectrum-accent-color-1000
316
319
  );
317
320
  }
321
+ :host,
322
+ :root {
323
+ --system-spectrum-switch-background-color-selected-default: var(
324
+ --spectrum-gray-800
325
+ );
326
+ --system-spectrum-switch-background-color-selected-hover: var(
327
+ --spectrum-gray-900
328
+ );
329
+ --system-spectrum-switch-background-color-selected-down: var(
330
+ --spectrum-gray-900
331
+ );
332
+ --system-spectrum-switch-background-color-selected-focus: var(
333
+ --spectrum-gray-900
334
+ );
335
+ --system-spectrum-switch-handle-border-color-default: var(
336
+ --spectrum-gray-800
337
+ );
338
+ --system-spectrum-switch-handle-border-color-hover: var(
339
+ --spectrum-gray-900
340
+ );
341
+ --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-900);
342
+ --system-spectrum-switch-handle-border-color-focus: var(
343
+ --spectrum-gray-900
344
+ );
345
+ --system-spectrum-switch-handle-border-color-selected-default: var(
346
+ --spectrum-gray-800
347
+ );
348
+ --system-spectrum-switch-handle-border-color-selected-hover: var(
349
+ --spectrum-gray-900
350
+ );
351
+ --system-spectrum-switch-handle-border-color-selected-down: var(
352
+ --spectrum-gray-900
353
+ );
354
+ --system-spectrum-switch-handle-border-color-selected-focus: var(
355
+ --spectrum-gray-900
356
+ );
357
+ }
358
+
359
+ :host,
360
+ :root {
361
+ --system-spectrum-toast-background-color-default: var(
362
+ --spectrum-neutral-background-color-default
363
+ );
364
+ }
package/tokens/global-vars.css CHANGED
@@ -28,7 +28,8 @@ governing permissions and limitations under the License.
28
28
  --spectrum-transparent-black-700: rgba(0, 0, 0, 0.8);
29
29
  --spectrum-transparent-black-800: rgba(0, 0, 0, 0.9);
30
30
  --spectrum-transparent-black-900: rgb(0, 0, 0);
31
- --spectrum-focus-ring-color: var(--spectrum-blue-800);
31
+ --spectrum-focus-indicator-color: var(--spectrum-blue-800);
32
+ --spectrum-focus-ring-color: var(--spectrum-focus-indicator-color);
32
33
  --spectrum-static-white-focus-ring-color: var(--spectrum-white);
33
34
  --spectrum-static-black-focus-ring-color: var(--spectrum-black);
34
35
  --spectrum-overlay-color: var(--spectrum-black);
@@ -77,6 +78,10 @@ governing permissions and limitations under the License.
77
78
  --spectrum-disabled-static-black-border-color: var(
78
79
  --spectrum-transparent-black-300
79
80
  );
81
+ --spectrum-background-opacity-default: 0;
82
+ --spectrum-background-opacity-hover: 0.1;
83
+ --spectrum-background-opacity-down: 0.1;
84
+ --spectrum-background-opacity-key-focus: 0.1;
80
85
  --spectrum-informative-color-100: var(--spectrum-blue-100);
81
86
  --spectrum-informative-color-200: var(--spectrum-blue-200);
82
87
  --spectrum-informative-color-300: var(--spectrum-blue-300);
@@ -139,6 +144,9 @@ governing permissions and limitations under the License.
139
144
  --spectrum-divider-thickness-small: 1px;
140
145
  --spectrum-divider-thickness-medium: 2px;
141
146
  --spectrum-divider-thickness-large: 4px;
147
+ --spectrum-menu-item-label-to-description: 1px;
148
+ --spectrum-meter-minimum-width: 48px;
149
+ --spectrum-meter-maximum-width: 768px;
142
150
  --spectrum-swatch-rectangle-width-multiplier: 2;
143
151
  --spectrum-swatch-slash-thickness-extra-small: 2px;
144
152
  --spectrum-swatch-slash-thickness-small: 3px;
@@ -147,6 +155,121 @@ governing permissions and limitations under the License.
147
155
  --spectrum-radio-button-selection-indicator: 4px;
148
156
  --spectrum-popover-tip-width: 16px;
149
157
  --spectrum-popover-tip-height: 8px;
158
+ --spectrum-sans-serif-heading-light: var(--spectrum-font-light-default);
159
+ --spectrum-serif-heading-light: var(--spectrum-font-regular-default);
160
+ --spectrum-heading-heavy: var(--spectrum-font-black-default);
161
+ --spectrum-heading-light-strong: var(--spectrum-font-bold-default);
162
+ --spectrum-heading-strong: var(--spectrum-font-black-default);
163
+ --spectrum-heading-heavy-strong: var(--spectrum-font-black-default);
164
+ --spectrum-sans-serif-heading-light-emphasized: var(
165
+ --spectrum-font-light-italic-default
166
+ );
167
+ --spectrum-serif-heading-light-emphasized: var(
168
+ --spectrum-font-italic-default
169
+ );
170
+ --spectrum-heading-heavy-emphasized: var(
171
+ --spectrum-font-black-italic-default
172
+ );
173
+ --spectrum-heading-light-strong-emphasized: var(
174
+ --spectrum-font-bold-italic-default
175
+ );
176
+ --spectrum-heading-strong-emphasized: var(
177
+ --spectrum-font-black-italic-default
178
+ );
179
+ --spectrum-heading-heavy-strong-emphasized: var(
180
+ --spectrum-font-black-italic-default
181
+ );
182
+ --spectrum-cjk-heading-light: var(--spectrum-font-light-cjk);
183
+ --spectrum-cjk-heading-heavy: var(--spectrum-font-black-cjk);
184
+ --spectrum-cjk-heading-light-strong: var(--spectrum-font-extra-bold-cjk);
185
+ --spectrum-cjk-heading-strong: var(--spectrum-font-black-cjk);
186
+ --spectrum-cjk-heading-heavy-strong: var(--spectrum-font-black-cjk);
187
+ --spectrum-cjk-heading-light-emphasized: var(--spectrum-font-black-cjk);
188
+ --spectrum-cjk-heading-emphasized: var(--spectrum-font-black-cjk);
189
+ --spectrum-cjk-heading-heavy-emphasized: var(--spectrum-font-black-cjk);
190
+ --spectrum-cjk-heading-light-strong-emphasized: var(
191
+ --spectrum-font-extra-bold-cjk
192
+ );
193
+ --spectrum-cjk-heading-strong-emphasized: var(--spectrum-font-black-cjk);
194
+ --spectrum-cjk-heading-heavy-strong-emphasized: var(
195
+ --spectrum-font-black-cjk
196
+ );
197
+ --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300);
198
+ --spectrum-heading-size-xxl: var(--spectrum-font-size-1100);
199
+ --spectrum-heading-size-xl: var(--spectrum-font-size-900);
200
+ --spectrum-heading-size-l: var(--spectrum-font-size-700);
201
+ --spectrum-heading-size-m: var(--spectrum-font-size-500);
202
+ --spectrum-heading-size-s: var(--spectrum-font-size-300);
203
+ --spectrum-heading-size-xs: var(--spectrum-font-size-200);
204
+ --spectrum-heading-size-xxs: var(--spectrum-font-size-100);
205
+ --spectrum-heading-line-height: var(--spectrum-line-height-100);
206
+ --spectrum-cjk-heading-line-height: var(--spectrum-cjk-line-height-100);
207
+ --spectrum-heading-margin-top-multiplier: 0.8889;
208
+ --spectrum-heading-margin-bottom-multiplier: 0.25;
209
+ --spectrum-body: var(--spectrum-font-regular-default);
210
+ --spectrum-body-strong: var(--spectrum-font-bold-default);
211
+ --spectrum-body-emphasized: var(--spectrum-font-italic-default);
212
+ --spectrum-body-strong-emphasized: var(--spectrum-font-bold-italic-default);
213
+ --spectrum-cjk-body: var(--spectrum-font-regular-cjk);
214
+ --spectrum-cjk-body-strong: var(--spectrum-font-black-cjk);
215
+ --spectrum-cjk-body-emphasized: var(--spectrum-font-extra-bold-cjk);
216
+ --spectrum-cjk-body-strong-emphasized: var(--spectrum-font-black-cjk);
217
+ --spectrum-body-size-xxxl: var(--spectrum-font-size-600);
218
+ --spectrum-body-size-xxl: var(--spectrum-font-size-500);
219
+ --spectrum-body-size-xl: var(--spectrum-font-size-400);
220
+ --spectrum-body-size-l: var(--spectrum-font-size-300);
221
+ --spectrum-body-size-m: var(--spectrum-font-size-200);
222
+ --spectrum-body-size-s: var(--spectrum-font-size-100);
223
+ --spectrum-body-size-xs: var(--spectrum-font-size-75);
224
+ --spectrum-body-line-height: var(--spectrum-line-height-200);
225
+ --spectrum-cjk-body-line-height: var(--spectrum-cjk-line-height-200);
226
+ --spectrum-body-margin-multiplier: 0.75;
227
+ --spectrum-detail: var(--spectrum-font-bold-default);
228
+ --spectrum-detail-light: var(--spectrum-font-regular-default);
229
+ --spectrum-detail-strong: var(--spectrum-font-bold-default);
230
+ --spectrum-detail-light-strong: var(--spectrum-font-regular-default);
231
+ --spectrum-detail-emphasized: var(--spectrum-font-bold-italic-default);
232
+ --spectrum-detail-light-emphasized: var(--spectrum-font-italic-default);
233
+ --spectrum-detail-strong-emphasized: var(
234
+ --spectrum-font-bold-italic-default
235
+ );
236
+ --spectrum-detail-light-strong-emphasized: var(
237
+ --spectrum-font-italic-default
238
+ );
239
+ --spectrum-cjk-detail: var(--spectrum-font-extra-bold-cjk);
240
+ --spectrum-cjk-detail-light: var(--spectrum-font-light-cjk);
241
+ --spectrum-cjk-detail-strong: var(--spectrum-font-black-cjk);
242
+ --spectrum-cjk-detail-light-strong: var(--spectrum-font-extra-bold-cjk);
243
+ --spectrum-cjk-detail-emphasized: var(--spectrum-font-black-cjk);
244
+ --spectrum-cjk-detail-light-emphasized: var(--spectrum-font-regular-cjk);
245
+ --spectrum-cjk-detail-strong-emphasized: var(--spectrum-font-black-cjk);
246
+ --spectrum-cjk-detail-light-strong-emphasized: var(
247
+ --spectrum-font-extra-bold-cjk
248
+ );
249
+ --spectrum-detail-size-xl: var(--spectrum-font-size-200);
250
+ --spectrum-detail-size-l: var(--spectrum-font-size-100);
251
+ --spectrum-detail-size-m: var(--spectrum-font-size-75);
252
+ --spectrum-detail-size-s: var(--spectrum-font-size-50);
253
+ --spectrum-detail-line-height: var(--spectrum-line-height-100);
254
+ --spectrum-cjk-detail-line-height: var(--spectrum-cjk-line-height-100);
255
+ --spectrum-detail-margin-top-mulitplier: 0.8889;
256
+ --spectrum-detail-margin-bottom-multiplier: 0.25;
257
+ --spectrum-detail-letter-spacing: 0.06em;
258
+ --spectrum-code: var(--spectrum-font-regular-default);
259
+ --spectrum-code-strong: var(--spectrum-font-bold-default);
260
+ --spectrum-code-emphasized: var(--spectrum-font-italic-default);
261
+ --spectrum-code-strong-emphasized: var(--spectrum-font-bold-italic-default);
262
+ --spectrum-cjk-code: var(--spectrum-font-regular-cjk);
263
+ --spectrum-cjk-code-strong: var(--spectrum-font-black-cjk);
264
+ --spectrum-cjk-code-emphasized: var(--spectrum-font-bold-cjk);
265
+ --spectrum-cjk-code-strong-emphasized: var(--spectrum-font-black-cjk);
266
+ --spectrum-code-size-xl: var(--spectrum-font-size-400);
267
+ --spectrum-code-size-l: var(--spectrum-font-size-300);
268
+ --spectrum-code-size-m: var(--spectrum-font-size-200);
269
+ --spectrum-code-size-s: var(--spectrum-font-size-100);
270
+ --spectrum-code-size-xs: var(--spectrum-font-size-75);
271
+ --spectrum-code-line-height: var(--spectrum-line-height-200);
272
+ --spectrum-cjk-code-line-height: var(--spectrum-cjk-line-height-200);
150
273
  --spectrum-android-elevation: 2dp;
151
274
  --spectrum-spacing-50: 2px;
152
275
  --spectrum-spacing-75: 4px;
@@ -165,6 +288,42 @@ governing permissions and limitations under the License.
165
288
  --spectrum-border-width-200: 2px;
166
289
  --spectrum-line-height-100: 1.3;
167
290
  --spectrum-line-height-200: 1.5;
168
- --spectrum-CJK-line-height-100: 1.5;
169
- --spectrum-CJK-line-height-200: 1.7;
291
+ --spectrum-font-family-default: var(--spectrum-font-family-sans-serif);
292
+ --spectrum-font-family-sans-serif: adobe clean;
293
+ --spectrum-font-family-serif: adobe clean serif;
294
+ --spectrum-font-family-code: source code pro;
295
+ --spectrum-font-light-default: adobe clean light;
296
+ --spectrum-font-light-cjk: adobe clean han light;
297
+ --spectrum-font-light-monospace: source code pro;
298
+ --spectrum-font-light-italic-default: adobe clean light italic;
299
+ --spectrum-font-light-italic-monospace: source code pro light italic;
300
+ --spectrum-font-regular-default: adobe clean regular;
301
+ --spectrum-font-regular-cjk: adobe clean han regular;
302
+ --spectrum-font-regular-serif: adobe clean serif regular;
303
+ --spectrum-font-regular-monospace: source code pro regular;
304
+ --spectrum-font-italic-default: adobe clean italic;
305
+ --spectrum-font-italic-serif: adobe clean serif italic;
306
+ --spectrum-font-italic-monospace: source code pro italic;
307
+ --spectrum-font-medium-default: adobe clean medium;
308
+ --spectrum-font-medium-serif: adobe clean serif medium;
309
+ --spectrum-font-medium-monospace: source code pro medium;
310
+ --spectrum-font-bold-default: adobe clean bold;
311
+ --spectrum-font-bold-cjk: adobe clean han bold;
312
+ --spectrum-font-bold-serif: adobe clean serif bold;
313
+ --spectrum-font-bold-monospace: source code pro bold;
314
+ --spectrum-font-bold-italic-default: adobe clean bold italic;
315
+ --spectrum-font-bold-italic-serif: adobe clean serif bold italic;
316
+ --spectrum-font-bold-italic-monospace: source code pro bold italic;
317
+ --spectrum-font-extra-bold-default: adobe clean extra bold;
318
+ --spectrum-font-extra-bold-cjk: adobe clean han extra bold;
319
+ --spectrum-font-black-default: adobe clean black;
320
+ --spectrum-font-black-cjk: adobe clean han black;
321
+ --spectrum-font-black-serif: adobe clean serif black;
322
+ --spectrum-font-black-monospace: source code pro black;
323
+ --spectrum-font-black-italic-default: adobe clean black italic;
324
+ --spectrum-font-black-italic-serif: adobe clean serif black italic;
325
+ --spectrum-font-black-italic-monospace: source code pro black italic;
326
+ --spectrum-cjk-letter-spacing: 0.05em;
327
+ --spectrum-cjk-line-height-100: 1.5;
328
+ --spectrum-cjk-line-height-200: 1.7;
170
329
  }
package/tokens/large-vars.css CHANGED
@@ -83,6 +83,17 @@ governing permissions and limitations under the License.
83
83
  --spectrum-help-text-top-to-workflow-icon-large: 8px;
84
84
  --spectrum-help-text-top-to-workflow-icon-extra-large: 11px;
85
85
  --spectrum-in-line-alert-minimum-width: 360px;
86
+ --spectrum-menu-item-edge-to-content-not-selected-small: 24px;
87
+ --spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
88
+ --spectrum-menu-item-edge-to-content-not-selected-large: 47px;
89
+ --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
90
+ --spectrum-menu-item-top-to-chevron-small: 9px;
91
+ --spectrum-menu-item-top-to-chevron-medium: 13px;
92
+ --spectrum-menu-item-top-to-chevron-large: 17px;
93
+ --spectrum-menu-item-top-to-chevron-extra-large: 22px;
94
+ --spectrum-meter-default-width: 240px;
95
+ --spectrum-meter-thickness-small: 5px;
96
+ --spectrum-meter-thickness-medium: 8px;
86
97
  --spectrum-swatch-size-extra-small: 20px;
87
98
  --spectrum-swatch-size-small: 30px;
88
99
  --spectrum-swatch-size-medium: 40px;
@@ -111,8 +122,8 @@ governing permissions and limitations under the License.
111
122
  --spectrum-toast-top-to-workflow-icon: 17px;
112
123
  --spectrum-toast-top-to-text: 16px;
113
124
  --spectrum-toast-bottom-to-text: 19px;
114
- --spectrum-tooltip-width: 10px;
115
- --spectrum-tooltip-height: 5px;
125
+ --spectrum-tooltip-tip-width: 10px;
126
+ --spectrum-tooltip-tip-height: 5px;
116
127
  --spectrum-tooltip-maximum-width: 200px;
117
128
  --spectrum-tag-top-to-avatar-small: 5px;
118
129
  --spectrum-tag-top-to-avatar-medium: 9px;
package/tokens/light-vars.css CHANGED
@@ -13,6 +13,22 @@ governing permissions and limitations under the License.
13
13
  :host,
14
14
  :root {
15
15
  --spectrum-overlay-opacity: 0.4;
16
+ --spectrum-gray-background-color-default: var(--spectrum-gray-700);
17
+ --spectrum-red-background-color-default: var(--spectrum-red-600);
18
+ --spectrum-orange-background-color-default: var(--spectrum-orange-600);
19
+ --spectrum-yellow-background-color-default: var(--spectrum-yellow-400);
20
+ --spectrum-chartreuse-background-color-default: var(
21
+ --spectrum-chartreuse-500
22
+ );
23
+ --spectrum-celery-background-color-default: var(--spectrum-celery-600);
24
+ --spectrum-green-background-color-default: var(--spectrum-green-900);
25
+ --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900);
26
+ --spectrum-cyan-background-color-default: var(--spectrum-cyan-900);
27
+ --spectrum-blue-background-color-default: var(--spectrum-blue-900);
28
+ --spectrum-indigo-background-color-default: var(--spectrum-indigo-900);
29
+ --spectrum-purple-background-color-default: var(--spectrum-purple-900);
30
+ --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900);
31
+ --spectrum-magenta-background-color-default: var(--spectrum-magenta-900);
16
32
  --spectrum-neutral-background-color-default: var(--spectrum-gray-800);
17
33
  --spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
18
34
  --spectrum-neutral-background-color-down: var(--spectrum-gray-900);
package/tokens/medium-vars.css CHANGED
@@ -83,6 +83,17 @@ governing permissions and limitations under the License.
83
83
  --spectrum-help-text-top-to-workflow-icon-large: 6px;
84
84
  --spectrum-help-text-top-to-workflow-icon-extra-large: 9px;
85
85
  --spectrum-in-line-alert-minimum-width: 320px;
86
+ --spectrum-menu-item-edge-to-content-not-selected-small: 28px;
87
+ --spectrum-menu-item-edge-to-content-not-selected-medium: 32px;
88
+ --spectrum-menu-item-edge-to-content-not-selected-large: 38px;
89
+ --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px;
90
+ --spectrum-menu-item-top-to-chevron-small: 7px;
91
+ --spectrum-menu-item-top-to-chevron-medium: 11px;
92
+ --spectrum-menu-item-top-to-chevron-large: 14px;
93
+ --spectrum-menu-item-top-to-chevron-extra-large: 17px;
94
+ --spectrum-meter-default-width: 192px;
95
+ --spectrum-meter-thickness-small: 4px;
96
+ --spectrum-meter-thickness-medium: 6px;
86
97
  --spectrum-swatch-size-extra-small: 16px;
87
98
  --spectrum-swatch-size-small: 24px;
88
99
  --spectrum-swatch-size-medium: 32px;
@@ -111,8 +122,8 @@ governing permissions and limitations under the License.
111
122
  --spectrum-toast-top-to-workflow-icon: 15px;
112
123
  --spectrum-toast-top-to-text: 14px;
113
124
  --spectrum-toast-bottom-to-text: 17px;
114
- --spectrum-tooltip-width: 8px;
115
- --spectrum-tooltip-height: 4px;
125
+ --spectrum-tooltip-tip-width: 8px;
126
+ --spectrum-tooltip-tip-height: 4px;
116
127
  --spectrum-tooltip-maximum-width: 160px;
117
128
  --spectrum-tag-top-to-avatar-small: 4px;
118
129
  --spectrum-tag-top-to-avatar-medium: 6px;
package/tokens/spectrum/custom-vars.css CHANGED
@@ -19,6 +19,7 @@ governing permissions and limitations under the License.
19
19
  :host,
20
20
  :root {
21
21
  --spectrum-animation-duration-100: 130ms;
22
+ --spectrum-animation-duration-200: 160ms;
22
23
 
23
24
  --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system,
24
25
  BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
@@ -40,4 +41,8 @@ governing permissions and limitations under the License.
40
41
  --spectrum-font-weight-bold: 700;
41
42
  --spectrum-font-weight-extra-bold: 800;
42
43
  --spectrum-font-weight-black: 900;
44
+
45
+ /* static white / black background color for docs containers */
46
+ --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
47
+ --spectrum-docs-static-black-background-color: rgb(206, 247, 243);
43
48
  }
package/tokens/spectrum/global-vars.css CHANGED
@@ -26,6 +26,9 @@ governing permissions and limitations under the License.
26
26
  --spectrum-accent-color-1200: var(--spectrum-blue-1200);
27
27
  --spectrum-accent-color-1300: var(--spectrum-blue-1300);
28
28
  --spectrum-accent-color-1400: var(--spectrum-blue-1400);
29
+ --spectrum-heading: var(--spectrum-font-bold-default);
30
+ --spectrum-heading-emphasized: var(--spectrum-font-bold-italic-default);
31
+ --spectrum-cjk-heading: var(--spectrum-font-extra-bold-cjk);
29
32
  --spectrum-border-width-100: 1px;
30
33
  }
31
34
  :host,
@@ -329,3 +332,47 @@ governing permissions and limitations under the License.
329
332
  --spectrum-accent-color-1000
330
333
  );
331
334
  }
335
+ :host,
336
+ :root {
337
+ --system-spectrum-switch-background-color-selected-default: var(
338
+ --spectrum-gray-700
339
+ );
340
+ --system-spectrum-switch-background-color-selected-hover: var(
341
+ --spectrum-gray-800
342
+ );
343
+ --system-spectrum-switch-background-color-selected-down: var(
344
+ --spectrum-gray-900
345
+ );
346
+ --system-spectrum-switch-background-color-selected-focus: var(
347
+ --spectrum-gray-800
348
+ );
349
+ --system-spectrum-switch-handle-border-color-default: var(
350
+ --spectrum-gray-600
351
+ );
352
+ --system-spectrum-switch-handle-border-color-hover: var(
353
+ --spectrum-gray-700
354
+ );
355
+ --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800);
356
+ --system-spectrum-switch-handle-border-color-focus: var(
357
+ --spectrum-gray-700
358
+ );
359
+ --system-spectrum-switch-handle-border-color-selected-default: var(
360
+ --spectrum-gray-700
361
+ );
362
+ --system-spectrum-switch-handle-border-color-selected-hover: var(
363
+ --spectrum-gray-800
364
+ );
365
+ --system-spectrum-switch-handle-border-color-selected-down: var(
366
+ --spectrum-gray-900
367
+ );
368
+ --system-spectrum-switch-handle-border-color-selected-focus: var(
369
+ --spectrum-gray-800
370
+ );
371
+ }
372
+
373
+ :host,
374
+ :root {
375
+ --system-spectrum-toast-background-color-default: var(
376
+ --spectrum-neutral-subdued-background-color-default
377
+ );
378
+ }