Skip to content

Commit 78a8bed

Browse files
pfultonpfulton
committed
chore(tokens): use spectrum-tokens v13.0.0-beta.19
Takes in the latest beta release for S2 tokens
1 parent 260768e commit 78a8bed

File tree

8 files changed

+161
-111
lines changed

8 files changed

+161
-111
lines changed

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

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,33 @@
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));
66
--spectrum-background-layer-2-color:var(--spectrum-gray-75);
7-
--spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400);
8-
--spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300);
9-
--spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-300);
10-
--spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300);
11-
--spectrum-accent-background-color-default:var(--spectrum-accent-color-600);
12-
--spectrum-accent-background-color-hover:var(--spectrum-accent-color-500);
13-
--spectrum-accent-background-color-down:var(--spectrum-accent-color-500);
14-
--spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500);
15-
--spectrum-informative-background-color-default:var(--spectrum-informative-color-600);
16-
--spectrum-informative-background-color-hover:var(--spectrum-informative-color-500);
17-
--spectrum-informative-background-color-down:var(--spectrum-informative-color-500);
18-
--spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500);
19-
--spectrum-negative-background-color-default:var(--spectrum-negative-color-600);
20-
--spectrum-negative-background-color-hover:var(--spectrum-negative-color-500);
21-
--spectrum-negative-background-color-down:var(--spectrum-negative-color-500);
22-
--spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500);
23-
--spectrum-positive-background-color-default:var(--spectrum-positive-color-600);
24-
--spectrum-positive-background-color-hover:var(--spectrum-positive-color-500);
25-
--spectrum-positive-background-color-down:var(--spectrum-positive-color-500);
26-
--spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500);
27-
--spectrum-notice-background-color-default:var(--spectrum-notice-color-800);
7+
--spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-500);
8+
--spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-400);
9+
--spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-400);
10+
--spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-400);
11+
--spectrum-accent-background-color-default:var(--spectrum-accent-color-700);
12+
--spectrum-accent-background-color-hover:var(--spectrum-accent-color-600);
13+
--spectrum-accent-background-color-down:var(--spectrum-accent-color-600);
14+
--spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-600);
15+
--spectrum-informative-background-color-default:var(--spectrum-informative-color-700);
16+
--spectrum-informative-background-color-hover:var(--spectrum-informative-color-600);
17+
--spectrum-informative-background-color-down:var(--spectrum-informative-color-600);
18+
--spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-600);
19+
--spectrum-negative-background-color-default:var(--spectrum-negative-color-700);
20+
--spectrum-negative-background-color-hover:var(--spectrum-negative-color-600);
21+
--spectrum-negative-background-color-down:var(--spectrum-negative-color-600);
22+
--spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-600);
23+
--spectrum-positive-background-color-default:var(--spectrum-positive-color-700);
24+
--spectrum-positive-background-color-hover:var(--spectrum-positive-color-600);
25+
--spectrum-positive-background-color-down:var(--spectrum-positive-color-600);
26+
--spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-600);
27+
--spectrum-notice-background-color-default:var(--spectrum-notice-color-900);
28+
--spectrum-gray-background-color-default:var(--spectrum-gray-500);
2829
--spectrum-red-background-color-default:var(--spectrum-red-700);
29-
--spectrum-orange-background-color-default:var(--spectrum-orange-800);
30-
--spectrum-yellow-background-color-default:var(--spectrum-yellow-1000);
31-
--spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900);
32-
--spectrum-celery-background-color-default:var(--spectrum-celery-800);
30+
--spectrum-orange-background-color-default:var(--spectrum-orange-900);
31+
--spectrum-yellow-background-color-default:var(--spectrum-yellow-1100);
32+
--spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-1000);
33+
--spectrum-celery-background-color-default:var(--spectrum-celery-900);
3334
--spectrum-green-background-color-default:var(--spectrum-green-700);
3435
--spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700);
3536
--spectrum-cyan-background-color-default:var(--spectrum-cyan-700);
@@ -60,6 +61,16 @@
6061
--spectrum-magenta-visual-color:var(--spectrum-magenta-900);
6162
--spectrum-background-elevated-color:var(--spectrum-gray-75);
6263
--spectrum-background-pasteboard-color:var(--spectrum-gray-25);
64+
--spectrum-brown-visual-color:var(--spectrum-brown-900);
65+
--spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-900);
66+
--spectrum-pink-visual-color:var(--spectrum-pink-900);
67+
--spectrum-silver-visual-color:var(--spectrum-silver-900);
68+
--spectrum-turquoise-visual-color:var(--spectrum-turquoise-900);
69+
--spectrum-brown-background-color-default:var(--spectrum-brown-700);
70+
--spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-700);
71+
--spectrum-pink-background-color-default:var(--spectrum-pink-700);
72+
--spectrum-silver-background-color-default:var(--spectrum-silver-700);
73+
--spectrum-turquoise-background-color-default:var(--spectrum-turquoise-700);
6374
--spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800);
6475
--spectrum-gray-25-rgb:17, 17, 17;
6576
--spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb));

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
--spectrum-disabled-background-color:var(--spectrum-gray-100);
2020
--spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100);
2121
--spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100);
22-
--spectrum-gray-background-color-default:var(--spectrum-gray-700);
2322
--spectrum-background-opacity-default:0;
2423
--spectrum-background-opacity-hover:0.1;
2524
--spectrum-background-opacity-down:0.1;
@@ -63,9 +62,9 @@
6362
--spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled);
6463
--spectrum-opacity-checkerboard-square-light:var(--spectrum-white);
6564
--spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled);
66-
--spectrum-color-area-border-color:var(--spectrum-gray-900);
65+
--spectrum-color-area-border-color:var(--spectrum-gray-1000);
6766
--spectrum-color-area-border-opacity:0.1;
68-
--spectrum-color-slider-border-color:var(--spectrum-gray-900);
67+
--spectrum-color-slider-border-color:var(--spectrum-gray-1000);
6968
--spectrum-color-slider-border-opacity:0.1;
7069
--spectrum-color-loupe-drop-shadow-color:var(--spectrum-transparent-black-300);
7170
--spectrum-color-loupe-drop-shadow-y:2px;
@@ -228,14 +227,14 @@
228227
--spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text);
229228
--spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text);
230229
--spectrum-color-area-border-width:var(--spectrum-border-width-100);
231-
--spectrum-color-area-border-rounding:var(--spectrum-corner-radius-100);
230+
--spectrum-color-area-border-rounding:var(--spectrum-corner-radius-medium-size-small);
232231
--spectrum-color-wheel-color-area-margin:12px;
233232
--spectrum-color-slider-border-width:1px;
234-
--spectrum-color-slider-border-rounding:4px;
233+
--spectrum-color-slider-border-rounding:var(--spectrum-corner-radius-medium-size-small);
235234
--spectrum-floating-action-button-drop-shadow-blur:12px;
236235
--spectrum-floating-action-button-drop-shadow-y:4px;
237236
--spectrum-illustrated-message-maximum-width:380px;
238-
--spectrum-search-field-minimum-width-multiplier:3;
237+
--spectrum-search-field-minimum-width-multiplier:4;
239238
--spectrum-color-loupe-height:64px;
240239
--spectrum-color-loupe-width:48px;
241240
--spectrum-color-loupe-bottom-to-color-handle:12px;
@@ -346,6 +345,10 @@
346345
--spectrum-field-edge-to-border-quiet:0px;
347346
--spectrum-field-edge-to-alert-icon-quiet:0px;
348347
--spectrum-field-edge-to-validation-icon-quiet:0px;
348+
--spectrum-side-label-character-count-top-margin-small:0px;
349+
--spectrum-side-label-character-count-top-margin-medium:0px;
350+
--spectrum-side-label-character-count-top-margin-large:0px;
351+
--spectrum-side-label-character-count-top-margin-extra-large:0px;
349352
--spectrum-text-underline-thickness:1px;
350353
--spectrum-text-underline-gap:1px;
351354
--spectrum-component-size-width-ratio-down:0.3333;

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@
6262
--spectrum-progress-circle-thickness-small:3px;
6363
--spectrum-progress-circle-thickness-medium:4px;
6464
--spectrum-progress-circle-thickness-large:5px;
65-
--spectrum-toast-height:56px;
65+
--spectrum-toast-height:60px;
6666
--spectrum-toast-maximum-width:420px;
67-
--spectrum-toast-top-to-workflow-icon:17px;
68-
--spectrum-toast-top-to-text:16px;
69-
--spectrum-toast-bottom-to-text:19px;
67+
--spectrum-toast-top-to-workflow-icon:20px;
68+
--spectrum-toast-top-to-text:20px;
69+
--spectrum-toast-bottom-to-text:22px;
7070
--spectrum-action-bar-height:56px;
7171
--spectrum-action-bar-top-to-item-counter:16px;
7272
--spectrum-swatch-size-extra-small:20px;
@@ -506,16 +506,13 @@
506506
--spectrum-field-text-to-validation-icon-medium:15px;
507507
--spectrum-field-text-to-validation-icon-large:19px;
508508
--spectrum-field-text-to-validation-icon-extra-large:22px;
509-
--spectrum-field-width:240px;
509+
--spectrum-field-width:var(--spectrum-field-width-small);
510+
--spectrum-field-width-small:240px;
510511
--spectrum-character-count-to-field-quiet-small:-4px;
511512
--spectrum-character-count-to-field-quiet-medium:-4px;
512513
--spectrum-character-count-to-field-quiet-large:-4px;
513514
--spectrum-character-count-to-field-quiet-extra-large:-5px;
514515
--spectrum-side-label-character-count-to-field:15px;
515-
--spectrum-side-label-character-count-top-margin-small:5px;
516-
--spectrum-side-label-character-count-top-margin-medium:10px;
517-
--spectrum-side-label-character-count-top-margin-large:14px;
518-
--spectrum-side-label-character-count-top-margin-extra-large:18px;
519516
--spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px;
520517
--spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px;
521518
--spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px;
@@ -529,6 +526,9 @@
529526
--spectrum-corner-triangle-icon-size-100:7px;
530527
--spectrum-corner-triangle-icon-size-200:8px;
531528
--spectrum-corner-triangle-icon-size-300:8px;
529+
--spectrum-field-width-medium:256px;
530+
--spectrum-field-width-large:272px;
531+
--spectrum-field-width-extra-large:288px;
532532
--spectrum-font-size-50:13px;
533533
--spectrum-font-size-75:15px;
534534
--spectrum-font-size-100:17px;

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
--spectrum-positive-background-color-down:var(--spectrum-positive-color-1000);
2626
--spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000);
2727
--spectrum-notice-background-color-default:var(--spectrum-notice-color-600);
28+
--spectrum-gray-background-color-default:var(--spectrum-gray-700);
2829
--spectrum-red-background-color-default:var(--spectrum-red-900);
2930
--spectrum-orange-background-color-default:var(--spectrum-orange-600);
3031
--spectrum-yellow-background-color-default:var(--spectrum-yellow-400);
@@ -60,6 +61,16 @@
6061
--spectrum-magenta-visual-color:var(--spectrum-magenta-800);
6162
--spectrum-background-elevated-color:var(--spectrum-gray-25);
6263
--spectrum-background-pasteboard-color:var(--spectrum-gray-100);
64+
--spectrum-brown-visual-color:var(--spectrum-brown-800);
65+
--spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-800);
66+
--spectrum-pink-visual-color:var(--spectrum-pink-800);
67+
--spectrum-silver-visual-color:var(--spectrum-silver-800);
68+
--spectrum-turquoise-visual-color:var(--spectrum-turquoise-800);
69+
--spectrum-brown-background-color-default:var(--spectrum-brown-900);
70+
--spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-900);
71+
--spectrum-pink-background-color-default:var(--spectrum-pink-900);
72+
--spectrum-silver-background-color-default:var(--spectrum-silver-900);
73+
--spectrum-turquoise-background-color-default:var(--spectrum-turquoise-900);
6374
--spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200);
6475
--spectrum-gray-25-rgb:255, 255, 255;
6576
--spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb));

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@
6262
--spectrum-progress-circle-thickness-small:2px;
6363
--spectrum-progress-circle-thickness-medium:3px;
6464
--spectrum-progress-circle-thickness-large:4px;
65-
--spectrum-toast-height:48px;
65+
--spectrum-toast-height:52px;
6666
--spectrum-toast-maximum-width:336px;
67-
--spectrum-toast-top-to-workflow-icon:15px;
68-
--spectrum-toast-top-to-text:14px;
69-
--spectrum-toast-bottom-to-text:17px;
67+
--spectrum-toast-top-to-workflow-icon:18px;
68+
--spectrum-toast-top-to-text:18px;
69+
--spectrum-toast-bottom-to-text:20px;
7070
--spectrum-action-bar-height:48px;
7171
--spectrum-action-bar-top-to-item-counter:14px;
7272
--spectrum-swatch-size-extra-small:16px;
@@ -170,11 +170,11 @@
170170
--spectrum-avatar-size-500:32px;
171171
--spectrum-avatar-size-600:36px;
172172
--spectrum-avatar-size-700:40px;
173-
--spectrum-alert-banner-minimum-height:48px;
173+
--spectrum-alert-banner-minimum-height:56px;
174174
--spectrum-alert-banner-width:832px;
175-
--spectrum-alert-banner-top-to-workflow-icon:15px;
176-
--spectrum-alert-banner-top-to-text:14px;
177-
--spectrum-alert-banner-bottom-to-text:17px;
175+
--spectrum-alert-banner-top-to-workflow-icon:19px;
176+
--spectrum-alert-banner-top-to-text:18px;
177+
--spectrum-alert-banner-bottom-to-text:20px;
178178
--spectrum-rating-indicator-width:18px;
179179
--spectrum-rating-indicator-to-icon:4px;
180180
--spectrum-color-area-width:192px;
@@ -506,16 +506,13 @@
506506
--spectrum-field-text-to-validation-icon-medium:12px;
507507
--spectrum-field-text-to-validation-icon-large:15px;
508508
--spectrum-field-text-to-validation-icon-extra-large:18px;
509-
--spectrum-field-width:192px;
509+
--spectrum-field-width:var(--spectrum-field-width-small);
510+
--spectrum-field-width-small:192px;
510511
--spectrum-character-count-to-field-quiet-small:-3px;
511512
--spectrum-character-count-to-field-quiet-medium:-3px;
512513
--spectrum-character-count-to-field-quiet-large:-3px;
513514
--spectrum-character-count-to-field-quiet-extra-large:-4px;
514515
--spectrum-side-label-character-count-to-field:12px;
515-
--spectrum-side-label-character-count-top-margin-small:4px;
516-
--spectrum-side-label-character-count-top-margin-medium:8px;
517-
--spectrum-side-label-character-count-top-margin-large:11px;
518-
--spectrum-side-label-character-count-top-margin-extra-large:14px;
519516
--spectrum-disclosure-indicator-top-to-disclosure-icon-small:7px;
520517
--spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px;
521518
--spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px;
@@ -529,6 +526,9 @@
529526
--spectrum-corner-triangle-icon-size-100:5px;
530527
--spectrum-corner-triangle-icon-size-200:6px;
531528
--spectrum-corner-triangle-icon-size-300:7px;
529+
--spectrum-field-width-medium:208px;
530+
--spectrum-field-width-large:224px;
531+
--spectrum-field-width-extra-large:240px;
532532
--spectrum-font-size-50:11px;
533533
--spectrum-font-size-75:12px;
534534
--spectrum-font-size-100:14px;

0 commit comments

Comments
 (0)