Skip to content

Commit 98335ab

Browse files
pfultonpfulton
committed
feat(tokens)!: use spectrum-tokens 13.0.0-beta.16
1 parent 9c88721 commit 98335ab

8 files changed

+191
-213
lines changed

‎tokens/dist/css/dark-vars.css

-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
--spectrum-drop-shadow-color-rgb:0, 0, 0;
44
--spectrum-drop-shadow-color-opacity:0.8;
55
--spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
6-
--spectrum-background-base-color:var(--spectrum-gray-25);
7-
--spectrum-background-layer-1-color:var(--spectrum-gray-50);
86
--spectrum-background-layer-2-color:var(--spectrum-gray-75);
97
--spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400);
108
--spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300);
@@ -27,7 +25,6 @@
2725
--spectrum-positive-background-color-down:var(--spectrum-positive-color-500);
2826
--spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500);
2927
--spectrum-notice-background-color-default:var(--spectrum-notice-color-800);
30-
--spectrum-gray-background-color-default:var(--spectrum-gray-700);
3128
--spectrum-red-background-color-default:var(--spectrum-red-700);
3229
--spectrum-orange-background-color-default:var(--spectrum-orange-800);
3330
--spectrum-yellow-background-color-default:var(--spectrum-yellow-1000);

‎tokens/dist/css/global-vars.css

+51
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
--spectrum-static-black-focus-indicator-color:var(--spectrum-black);
55
--spectrum-overlay-color:var(--spectrum-black);
66
--spectrum-opacity-disabled:0.3;
7+
--spectrum-background-base-color:var(--spectrum-gray-25);
8+
--spectrum-background-layer-1-color:var(--spectrum-gray-50);
79
--spectrum-neutral-background-color-default:var(--spectrum-gray-800);
810
--spectrum-neutral-background-color-hover:var(--spectrum-gray-900);
911
--spectrum-neutral-background-color-down:var(--spectrum-gray-900);
@@ -17,6 +19,7 @@
1719
--spectrum-disabled-background-color:var(--spectrum-gray-100);
1820
--spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100);
1921
--spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100);
22+
--spectrum-gray-background-color-default:var(--spectrum-gray-700);
2023
--spectrum-background-opacity-default:0;
2124
--spectrum-background-opacity-hover:0.1;
2225
--spectrum-background-opacity-down:0.1;
@@ -174,8 +177,15 @@
174177
--spectrum-icon-color-inverse:var(--spectrum-gray-50);
175178
--spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default);
176179
--spectrum-radio-button-selection-indicator:4px;
180+
--spectrum-field-label-top-margin-small:0px;
181+
--spectrum-field-label-top-margin-medium:0px;
182+
--spectrum-field-label-top-margin-large:0px;
183+
--spectrum-field-label-top-margin-extra-large:0px;
177184
--spectrum-field-label-to-component:0px;
178185
--spectrum-help-text-to-component:0px;
186+
--spectrum-status-light-dot-size-small:8px;
187+
--spectrum-action-button-edge-to-hold-icon-extra-small:3px;
188+
--spectrum-action-button-edge-to-hold-icon-small:3px;
179189
--spectrum-button-minimum-width-multiplier:2.25;
180190
--spectrum-divider-thickness-small:1px;
181191
--spectrum-divider-thickness-medium:2px;
@@ -241,6 +251,12 @@
241251
--spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size);
242252
--spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size);
243253
--spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size);
254+
--spectrum-accordion-top-to-text-compact-small:2px;
255+
--spectrum-accordion-top-to-text-compact-medium:4px;
256+
--spectrum-accordion-disclosure-indicator-to-text:0px;
257+
--spectrum-accordion-edge-to-disclosure-indicator:0px;
258+
--spectrum-accordion-edge-to-text:0px;
259+
--spectrum-accordion-focus-indicator-gap:0px;
244260
--spectrum-color-handle-border-width:var(--spectrum-border-width-200);
245261
--spectrum-color-handle-inner-border-width:1px;
246262
--spectrum-color-handle-outer-border-width:1px;
@@ -259,6 +275,7 @@
259275
--spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100);
260276
--spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200);
261277
--spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300);
278+
--spectrum-table-edge-to-content:16px;
262279
--spectrum-table-border-divider-width:1px;
263280
--spectrum-tab-item-height-small:var(--spectrum-component-height-200);
264281
--spectrum-tab-item-height-medium:var(--spectrum-component-height-300);
@@ -288,9 +305,24 @@
288305
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
289306
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
290307
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
308+
--spectrum-asterisk-icon-size-75:8px;
291309
--spectrum-divider-vertical-minimum-height:200px;
292310
--spectrum-divider-horizontal-minimum-width:200px;
293311
--spectrum-tooltip-tip-corner-radius:1px;
312+
--spectrum-tag-minimum-width-multiplier:1;
313+
--spectrum-tag-maximum-width-multiplier:7;
314+
--spectrum-corner-radius-0:0px;
315+
--spectrum-corner-radius-75:3px;
316+
--spectrum-corner-radius-100:4px;
317+
--spectrum-corner-radius-200:5px;
318+
--spectrum-corner-radius-300:6px;
319+
--spectrum-corner-radius-400:7px;
320+
--spectrum-corner-radius-500:8px;
321+
--spectrum-corner-radius-600:9px;
322+
--spectrum-corner-radius-700:10px;
323+
--spectrum-corner-radius-800:16px;
324+
--spectrum-corner-radius-1000:0.5;
325+
--spectrum-drop-shadow-x:0px;
294326
--spectrum-android-elevation:2dp;
295327
--spectrum-spacing-50:2px;
296328
--spectrum-spacing-75:4px;
@@ -319,6 +351,21 @@
319351
--spectrum-component-size-width-ratio-down:0.3333;
320352
--spectrum-component-size-minimum-perspective-down:24px;
321353
--spectrum-component-size-difference-down:-2px;
354+
--spectrum-corner-radius-none:var(--spectrum-corner-radius-0);
355+
--spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100);
356+
--spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500);
357+
--spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700);
358+
--spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800);
359+
--spectrum-corner-radius-full:var(--spectrum-corner-radius-1000);
360+
--spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75);
361+
--spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100);
362+
--spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200);
363+
--spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300);
364+
--spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300);
365+
--spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400);
366+
--spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500);
367+
--spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600);
368+
--spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700);
322369
--spectrum-accent-color-100:var(--spectrum-blue-100);
323370
--spectrum-accent-color-200:var(--spectrum-blue-200);
324371
--spectrum-accent-color-300:var(--spectrum-blue-300);
@@ -399,6 +446,10 @@
399446
--spectrum-positive-color-1400:var(--spectrum-green-1400);
400447
--spectrum-positive-color-1500:var(--spectrum-green-1500);
401448
--spectrum-positive-color-1600:var(--spectrum-green-1600);
449+
--spectrum-negative-subdued-background-color-default:var(--spectrum-negative-color-200);
450+
--spectrum-negative-subdued-background-color-hover:var(--spectrum-negative-color-300);
451+
--spectrum-negative-subdued-background-color-down:var(--spectrum-negative-color-300);
452+
--spectrum-negative-subdued-background-color-key-focus:var(--spectrum-negative-color-300);
402453
--spectrum-default-font-family:var(--spectrum-sans-serif-font-family);
403454
--spectrum-sans-serif-font-family:Adobe Clean;
404455
--spectrum-serif-font-family:Adobe Clean Serif;

‎tokens/dist/css/large-vars.css

+21-49
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
--spectrum-checkbox-top-to-control-medium:11px;
88
--spectrum-checkbox-top-to-control-large:15px;
99
--spectrum-checkbox-top-to-control-extra-large:19px;
10-
--spectrum-switch-control-width-small:32px;
11-
--spectrum-switch-control-width-medium:36px;
12-
--spectrum-switch-control-width-large:41px;
10+
--spectrum-switch-control-width-small:30px;
11+
--spectrum-switch-control-width-medium:34px;
12+
--spectrum-switch-control-width-large:38px;
1313
--spectrum-switch-control-width-extra-large:46px;
14-
--spectrum-switch-control-height-small:16px;
15-
--spectrum-switch-control-height-medium:18px;
16-
--spectrum-switch-control-height-large:20px;
17-
--spectrum-switch-control-height-extra-large:22px;
14+
--spectrum-switch-control-height-small:18px;
15+
--spectrum-switch-control-height-medium:20px;
16+
--spectrum-switch-control-height-large:22px;
17+
--spectrum-switch-control-height-extra-large:26px;
1818
--spectrum-switch-top-to-control-small:7px;
1919
--spectrum-switch-top-to-control-medium:11px;
2020
--spectrum-switch-top-to-control-large:15px;
@@ -35,10 +35,6 @@
3535
--spectrum-field-label-top-to-asterisk-medium:15px;
3636
--spectrum-field-label-top-to-asterisk-large:19px;
3737
--spectrum-field-label-top-to-asterisk-extra-large:24px;
38-
--spectrum-field-label-top-margin-small:0px;
39-
--spectrum-field-label-top-margin-medium:0px;
40-
--spectrum-field-label-top-margin-large:0px;
41-
--spectrum-field-label-top-margin-extra-large:0px;
4238
--spectrum-field-label-to-component-quiet-small:-10px;
4339
--spectrum-field-label-to-component-quiet-medium:-10px;
4440
--spectrum-field-label-to-component-quiet-large:-15px;
@@ -47,16 +43,13 @@
4743
--spectrum-help-text-top-to-workflow-icon-medium:var(--spectrum-component-top-to-workflow-icon-100);
4844
--spectrum-help-text-top-to-workflow-icon-large:var(--spectrum-component-top-to-workflow-icon-200);
4945
--spectrum-help-text-top-to-workflow-icon-extra-large:var(--spectrum-component-top-to-workflow-icon-300);
50-
--spectrum-status-light-dot-size-small:8px;
5146
--spectrum-status-light-dot-size-medium:10px;
5247
--spectrum-status-light-dot-size-large:12px;
5348
--spectrum-status-light-dot-size-extra-large:12px;
5449
--spectrum-status-light-top-to-dot-small:11px;
5550
--spectrum-status-light-top-to-dot-medium:15px;
5651
--spectrum-status-light-top-to-dot-large:19px;
5752
--spectrum-status-light-top-to-dot-extra-large:24px;
58-
--spectrum-action-button-edge-to-hold-icon-extra-small:3px;
59-
--spectrum-action-button-edge-to-hold-icon-small:3px;
6053
--spectrum-action-button-edge-to-hold-icon-medium:5px;
6154
--spectrum-action-button-edge-to-hold-icon-large:6px;
6255
--spectrum-action-button-edge-to-hold-icon-extra-large:7px;
@@ -205,10 +198,8 @@
205198
--spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs);
206199
--spectrum-coach-mark-body-size:var(--spectrum-body-size-xs);
207200
--spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs);
208-
--spectrum-accordion-top-to-text-compact-small:2px;
209201
--spectrum-accordion-top-to-text-regular-small:7px;
210202
--spectrum-accordion-small-top-to-text-spacious:12px;
211-
--spectrum-accordion-top-to-text-compact-medium:4px;
212203
--spectrum-accordion-top-to-text-regular-medium:9px;
213204
--spectrum-accordion-top-to-text-spacious-medium:14px;
214205
--spectrum-accordion-top-to-text-compact-large:7px;
@@ -230,10 +221,6 @@
230221
--spectrum-accordion-bottom-to-text-regular-extra-large:15px;
231222
--spectrum-accordion-bottom-to-text-spacious-extra-large:21px;
232223
--spectrum-accordion-minimum-width:250px;
233-
--spectrum-accordion-disclosure-indicator-to-text:0px;
234-
--spectrum-accordion-edge-to-disclosure-indicator:0px;
235-
--spectrum-accordion-edge-to-text:0px;
236-
--spectrum-accordion-focus-indicator-gap:0px;
237224
--spectrum-accordion-content-area-top-to-content:10px;
238225
--spectrum-accordion-content-area-bottom-to-content:20px;
239226
--spectrum-color-handle-size:20px;
@@ -270,7 +257,6 @@
270257
--spectrum-table-row-bottom-to-text-medium-spacious:18px;
271258
--spectrum-table-row-bottom-to-text-large-spacious:23px;
272259
--spectrum-table-row-bottom-to-text-extra-large-spacious:27px;
273-
--spectrum-table-edge-to-content:16px;
274260
--spectrum-table-checkbox-to-text:30px;
275261
--spectrum-table-header-row-checkbox-to-top-small:14px;
276262
--spectrum-table-header-row-checkbox-to-top-medium:13px;
@@ -362,7 +348,6 @@
362348
--spectrum-arrow-icon-size-400:18px;
363349
--spectrum-arrow-icon-size-500:22px;
364350
--spectrum-arrow-icon-size-600:24px;
365-
--spectrum-asterisk-icon-size-75:8px;
366351
--spectrum-asterisk-icon-size-100:10px;
367352
--spectrum-asterisk-icon-size-200:12px;
368353
--spectrum-asterisk-icon-size-300:12px;
@@ -398,18 +383,20 @@
398383
--spectrum-dash-icon-size-500:20px;
399384
--spectrum-dash-icon-size-600:22px;
400385
--spectrum-side-navigation-header-to-item:10px;
401-
--spectrum-corner-radius-0:0px;
402-
--spectrum-corner-radius-75:3px;
403-
--spectrum-corner-radius-100:4px;
404-
--spectrum-corner-radius-200:5px;
405-
--spectrum-corner-radius-300:6px;
406-
--spectrum-corner-radius-400:7px;
407-
--spectrum-corner-radius-500:8px;
408-
--spectrum-corner-radius-600:9px;
409-
--spectrum-corner-radius-700:10px;
410-
--spectrum-corner-radius-800:16px;
411-
--spectrum-corner-radius-1000:0.5;
412-
--spectrum-drop-shadow-x:0px;
386+
--spectrum-switch-handle-size-small:10px;
387+
--spectrum-switch-handle-selected-size-small:12px;
388+
--spectrum-switch-handle-selected-size-medium:14px;
389+
--spectrum-switch-handle-selected-size-large:16px;
390+
--spectrum-switch-handle-selected-size-extra-large:20px;
391+
--spectrum-switch-handle-size-medium:12px;
392+
--spectrum-switch-handle-size-large:14px;
393+
--spectrum-switch-handle-size-extra-large:18px;
394+
--spectrum-tag-label-to-clear-icon-small:10px;
395+
--spectrum-tag-label-to-clear-icon-medium:15px;
396+
--spectrum-tag-label-to-clear-icon-large:19px;
397+
--spectrum-tag-edge-to-clear-icon-small:10px;
398+
--spectrum-tag-edge-to-clear-icon-medium:15px;
399+
--spectrum-tag-edge-to-clear-icon-large:19px;
413400
--spectrum-drop-shadow-y:2px;
414401
--spectrum-drop-shadow-blur:6px;
415402
--spectrum-workflow-icon-size-50:16px;
@@ -542,21 +529,6 @@
542529
--spectrum-corner-triangle-icon-size-100:7px;
543530
--spectrum-corner-triangle-icon-size-200:8px;
544531
--spectrum-corner-triangle-icon-size-300:8px;
545-
--spectrum-corner-radius-none:var(--spectrum-corner-radius-0);
546-
--spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100);
547-
--spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500);
548-
--spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700);
549-
--spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800);
550-
--spectrum-corner-radius-full:var(--spectrum-corner-radius-1000);
551-
--spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75);
552-
--spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100);
553-
--spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200);
554-
--spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300);
555-
--spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300);
556-
--spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400);
557-
--spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500);
558-
--spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600);
559-
--spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700);
560532
--spectrum-font-size-50:13px;
561533
--spectrum-font-size-75:15px;
562534
--spectrum-font-size-100:17px;

‎tokens/dist/css/light-vars.css

-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
--spectrum-drop-shadow-color-rgb:0, 0, 0;
44
--spectrum-drop-shadow-color-opacity:0.15;
55
--spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity));
6-
--spectrum-background-base-color:var(--spectrum-gray-25);
7-
--spectrum-background-layer-1-color:var(--spectrum-gray-50);
86
--spectrum-background-layer-2-color:var(--spectrum-gray-25);
97
--spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700);
108
--spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800);
@@ -27,7 +25,6 @@
2725
--spectrum-positive-background-color-down:var(--spectrum-positive-color-1000);
2826
--spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000);
2927
--spectrum-notice-background-color-default:var(--spectrum-notice-color-600);
30-
--spectrum-gray-background-color-default:var(--spectrum-gray-700);
3128
--spectrum-red-background-color-default:var(--spectrum-red-900);
3229
--spectrum-orange-background-color-default:var(--spectrum-orange-600);
3330
--spectrum-yellow-background-color-default:var(--spectrum-yellow-400);

0 commit comments

Comments
 (0)