Skip to content

Commit 0fe7a52

Browse files
pfultonpfulton
committed
feat(tokens): use spectrum-tokens 13.0.0-beta.21 (#2597)
* feat(tokens): use spectrum tokens beta 21 * chore(tokens): add custom token for corner rounding
1 parent 0e9886c commit 0fe7a52

File tree

8 files changed

+116
-9
lines changed

8 files changed

+116
-9
lines changed

‎tokens/custom-spectrum/custom-vars.css

+3
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,7 @@ governing permissions and limitations under the License.
5151
/* static white / black background color for docs containers */
5252
--spectrum-docs-static-white-background-color: rgb(15, 121, 125);
5353
--spectrum-docs-static-black-background-color: rgb(206, 247, 243);
54+
55+
/* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */
56+
--spectrum-corner-radius-1000: 9999px;
5457
}

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

+45
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,51 @@
310310
--spectrum-tooltip-tip-corner-radius:1px;
311311
--spectrum-tag-minimum-width-multiplier:1;
312312
--spectrum-tag-maximum-width-multiplier:7;
313+
--spectrum-title-cjk-emphasized-font-style:var(--spectrum-default-font-style);
314+
--spectrum-title-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight);
315+
--spectrum-title-cjk-font-family:var(--spectrum-cjk-font-family);
316+
--spectrum-title-cjk-font-style:var(--spectrum-default-font-style);
317+
--spectrum-title-cjk-font-weight:var(--spectrum-bold-font-weight);
318+
--spectrum-title-cjk-line-height:var(--spectrum-cjk-line-height-100);
319+
--spectrum-title-cjk-size-l:var(--spectrum-font-size-200);
320+
--spectrum-title-cjk-size-m:var(--spectrum-font-size-100);
321+
--spectrum-title-cjk-size-s:var(--spectrum-font-size-75);
322+
--spectrum-title-cjk-size-xl:var(--spectrum-font-size-300);
323+
--spectrum-title-cjk-size-xs:var(--spectrum-font-size-50);
324+
--spectrum-title-cjk-size-xxl:var(--spectrum-font-size-400);
325+
--spectrum-title-cjk-size-xxxl:var(--spectrum-font-size-500);
326+
--spectrum-title-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style);
327+
--spectrum-title-cjk-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight);
328+
--spectrum-title-cjk-strong-font-style:var(--spectrum-default-font-style);
329+
--spectrum-title-cjk-strong-font-weight:var(--spectrum-extra-bold-font-weight);
330+
--spectrum-title-line-height:var(--spectrum-line-height-100);
331+
--spectrum-title-margin-bottom-multiplier:0.25;
332+
--spectrum-title-margin-top-multiplier:0.88888889;
333+
--spectrum-title-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style);
334+
--spectrum-title-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
335+
--spectrum-title-sans-serif-font-family:var(--spectrum-sans-serif-font-family);
336+
--spectrum-title-sans-serif-font-style:var(--spectrum-default-font-style);
337+
--spectrum-title-sans-serif-font-weight:var(--spectrum-bold-font-weight);
338+
--spectrum-title-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style);
339+
--spectrum-title-sans-serif-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight);
340+
--spectrum-title-sans-serif-strong-font-style:var(--spectrum-default-font-style);
341+
--spectrum-title-sans-serif-strong-font-weight:var(--spectrum-extra-bold-font-weight);
342+
--spectrum-title-serif-emphasized-font-style:var(--spectrum-italic-font-style);
343+
--spectrum-title-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
344+
--spectrum-title-serif-font-family:var(--spectrum-serif-font-family);
345+
--spectrum-title-serif-font-style:var(--spectrum-default-font-style);
346+
--spectrum-title-serif-font-weight:var(--spectrum-bold-font-weight);
347+
--spectrum-title-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style);
348+
--spectrum-title-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight);
349+
--spectrum-title-serif-strong-font-style:var(--spectrum-default-font-style);
350+
--spectrum-title-serif-strong-font-weight:var(--spectrum-black-font-weight);
351+
--spectrum-title-size-l:var(--spectrum-font-size-300);
352+
--spectrum-title-size-m:var(--spectrum-font-size-200);
353+
--spectrum-title-size-s:var(--spectrum-font-size-100);
354+
--spectrum-title-size-xl:var(--spectrum-font-size-400);
355+
--spectrum-title-size-xs:var(--spectrum-font-size-75);
356+
--spectrum-title-size-xxl:var(--spectrum-font-size-500);
357+
--spectrum-title-size-xxxl:var(--spectrum-font-size-600);
313358
--spectrum-corner-radius-0:0px;
314359
--spectrum-corner-radius-75:3px;
315360
--spectrum-corner-radius-100:4px;

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@
143143
--spectrum-thumbnail-size-1000:70px;
144144
--spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs);
145145
--spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs);
146-
--spectrum-opacity-checkerboard-square-size:10px;
146+
--spectrum-opacity-checkerboard-square-size:var(--spectrum-opacity-checkerboard-square-size-medium);
147+
--spectrum-opacity-checkerboard-square-size-medium:10px;
147148
--spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs);
148149
--spectrum-contextual-help-body-size:var(--spectrum-body-size-xs);
149150
--spectrum-breadcrumbs-height-multiline:84px;
@@ -397,6 +398,7 @@
397398
--spectrum-tag-edge-to-clear-icon-small:10px;
398399
--spectrum-tag-edge-to-clear-icon-medium:15px;
399400
--spectrum-tag-edge-to-clear-icon-large:19px;
401+
--spectrum-opacity-checkerboard-square-size-small:5px;
400402
--spectrum-drop-shadow-y:2px;
401403
--spectrum-drop-shadow-blur:6px;
402404
--spectrum-workflow-icon-size-50:16px;

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@
143143
--spectrum-thumbnail-size-1000:56px;
144144
--spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s);
145145
--spectrum-alert-dialog-description-size:var(--spectrum-body-size-s);
146-
--spectrum-opacity-checkerboard-square-size:8px;
146+
--spectrum-opacity-checkerboard-square-size:var(--spectrum-opacity-checkerboard-square-size-medium);
147+
--spectrum-opacity-checkerboard-square-size-medium:8px;
147148
--spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs);
148149
--spectrum-contextual-help-body-size:var(--spectrum-body-size-s);
149150
--spectrum-breadcrumbs-height-multiline:72px;
@@ -397,6 +398,7 @@
397398
--spectrum-tag-edge-to-clear-icon-small:8px;
398399
--spectrum-tag-edge-to-clear-icon-medium:12px;
399400
--spectrum-tag-edge-to-clear-icon-large:15px;
401+
--spectrum-opacity-checkerboard-square-size-small:4px;
400402
--spectrum-drop-shadow-y:1px;
401403
--spectrum-drop-shadow-blur:4px;
402404
--spectrum-workflow-icon-size-50:14px;

‎tokens/dist/css/spectrum/custom-vars.css

+3
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,7 @@
3737
--spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb));
3838
--spectrum-docs-static-black-background-color-rgb:206, 247, 243;
3939
--spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb));
40+
41+
/* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */
42+
--spectrum-corner-radius-1000:9999px;
4043
}

‎tokens/dist/index.css

+54-2
Original file line numberDiff line numberDiff line change
@@ -1045,6 +1045,51 @@
10451045
--spectrum-tooltip-tip-corner-radius:1px;
10461046
--spectrum-tag-minimum-width-multiplier:1;
10471047
--spectrum-tag-maximum-width-multiplier:7;
1048+
--spectrum-title-cjk-emphasized-font-style:var(--spectrum-default-font-style);
1049+
--spectrum-title-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight);
1050+
--spectrum-title-cjk-font-family:var(--spectrum-cjk-font-family);
1051+
--spectrum-title-cjk-font-style:var(--spectrum-default-font-style);
1052+
--spectrum-title-cjk-font-weight:var(--spectrum-bold-font-weight);
1053+
--spectrum-title-cjk-line-height:var(--spectrum-cjk-line-height-100);
1054+
--spectrum-title-cjk-size-l:var(--spectrum-font-size-200);
1055+
--spectrum-title-cjk-size-m:var(--spectrum-font-size-100);
1056+
--spectrum-title-cjk-size-s:var(--spectrum-font-size-75);
1057+
--spectrum-title-cjk-size-xl:var(--spectrum-font-size-300);
1058+
--spectrum-title-cjk-size-xs:var(--spectrum-font-size-50);
1059+
--spectrum-title-cjk-size-xxl:var(--spectrum-font-size-400);
1060+
--spectrum-title-cjk-size-xxxl:var(--spectrum-font-size-500);
1061+
--spectrum-title-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style);
1062+
--spectrum-title-cjk-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight);
1063+
--spectrum-title-cjk-strong-font-style:var(--spectrum-default-font-style);
1064+
--spectrum-title-cjk-strong-font-weight:var(--spectrum-extra-bold-font-weight);
1065+
--spectrum-title-line-height:var(--spectrum-line-height-100);
1066+
--spectrum-title-margin-bottom-multiplier:0.25;
1067+
--spectrum-title-margin-top-multiplier:0.88888889;
1068+
--spectrum-title-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style);
1069+
--spectrum-title-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
1070+
--spectrum-title-sans-serif-font-family:var(--spectrum-sans-serif-font-family);
1071+
--spectrum-title-sans-serif-font-style:var(--spectrum-default-font-style);
1072+
--spectrum-title-sans-serif-font-weight:var(--spectrum-bold-font-weight);
1073+
--spectrum-title-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style);
1074+
--spectrum-title-sans-serif-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight);
1075+
--spectrum-title-sans-serif-strong-font-style:var(--spectrum-default-font-style);
1076+
--spectrum-title-sans-serif-strong-font-weight:var(--spectrum-extra-bold-font-weight);
1077+
--spectrum-title-serif-emphasized-font-style:var(--spectrum-italic-font-style);
1078+
--spectrum-title-serif-emphasized-font-weight:var(--spectrum-bold-font-weight);
1079+
--spectrum-title-serif-font-family:var(--spectrum-serif-font-family);
1080+
--spectrum-title-serif-font-style:var(--spectrum-default-font-style);
1081+
--spectrum-title-serif-font-weight:var(--spectrum-bold-font-weight);
1082+
--spectrum-title-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style);
1083+
--spectrum-title-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight);
1084+
--spectrum-title-serif-strong-font-style:var(--spectrum-default-font-style);
1085+
--spectrum-title-serif-strong-font-weight:var(--spectrum-black-font-weight);
1086+
--spectrum-title-size-l:var(--spectrum-font-size-300);
1087+
--spectrum-title-size-m:var(--spectrum-font-size-200);
1088+
--spectrum-title-size-s:var(--spectrum-font-size-100);
1089+
--spectrum-title-size-xl:var(--spectrum-font-size-400);
1090+
--spectrum-title-size-xs:var(--spectrum-font-size-75);
1091+
--spectrum-title-size-xxl:var(--spectrum-font-size-500);
1092+
--spectrum-title-size-xxxl:var(--spectrum-font-size-600);
10481093
--spectrum-corner-radius-0:0px;
10491094
--spectrum-corner-radius-75:3px;
10501095
--spectrum-corner-radius-100:4px;
@@ -1466,6 +1511,9 @@
14661511
--spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb));
14671512
--spectrum-docs-static-black-background-color-rgb:206, 247, 243;
14681513
--spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb));
1514+
1515+
/* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */
1516+
--spectrum-corner-radius-1000:9999px;
14691517
}
14701518
.spectrum--large{
14711519
--spectrum-checkbox-control-size-small:16px;
@@ -1612,7 +1660,8 @@
16121660
--spectrum-thumbnail-size-1000:70px;
16131661
--spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs);
16141662
--spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs);
1615-
--spectrum-opacity-checkerboard-square-size:10px;
1663+
--spectrum-opacity-checkerboard-square-size:var(--spectrum-opacity-checkerboard-square-size-medium);
1664+
--spectrum-opacity-checkerboard-square-size-medium:10px;
16161665
--spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs);
16171666
--spectrum-contextual-help-body-size:var(--spectrum-body-size-xs);
16181667
--spectrum-breadcrumbs-height-multiline:84px;
@@ -1866,6 +1915,7 @@
18661915
--spectrum-tag-edge-to-clear-icon-small:10px;
18671916
--spectrum-tag-edge-to-clear-icon-medium:15px;
18681917
--spectrum-tag-edge-to-clear-icon-large:19px;
1918+
--spectrum-opacity-checkerboard-square-size-small:5px;
18691919
--spectrum-drop-shadow-y:2px;
18701920
--spectrum-drop-shadow-blur:6px;
18711921
--spectrum-workflow-icon-size-50:16px;
@@ -3007,7 +3057,8 @@
30073057
--spectrum-thumbnail-size-1000:56px;
30083058
--spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s);
30093059
--spectrum-alert-dialog-description-size:var(--spectrum-body-size-s);
3010-
--spectrum-opacity-checkerboard-square-size:8px;
3060+
--spectrum-opacity-checkerboard-square-size:var(--spectrum-opacity-checkerboard-square-size-medium);
3061+
--spectrum-opacity-checkerboard-square-size-medium:8px;
30113062
--spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs);
30123063
--spectrum-contextual-help-body-size:var(--spectrum-body-size-s);
30133064
--spectrum-breadcrumbs-height-multiline:72px;
@@ -3261,6 +3312,7 @@
32613312
--spectrum-tag-edge-to-clear-icon-small:8px;
32623313
--spectrum-tag-edge-to-clear-icon-medium:12px;
32633314
--spectrum-tag-edge-to-clear-icon-large:15px;
3315+
--spectrum-opacity-checkerboard-square-size-small:4px;
32643316
--spectrum-drop-shadow-y:1px;
32653317
--spectrum-drop-shadow-blur:4px;
32663318
--spectrum-workflow-icon-size-50:14px;

‎tokens/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"main": "dist/index.css",
1717
"devDependencies": {
18-
"@adobe/spectrum-tokens": "13.0.0-beta.19",
18+
"@adobe/spectrum-tokens": "13.0.0-beta.21",
1919
"@nxkit/style-dictionary": "^4.0.0",
2020
"postcss": "^8.4.35",
2121
"postcss-cli": "^11.0.0",

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,10 @@
9191
resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.5.4.tgz#0e09ff519c36139176c3ba3ce617a995c9032f67"
9292
integrity sha512-sZ19YOLGw5xTZzCEkVXPjf53lXVzo063KmDTJjpSjy/XLVsF+RaX0b436SfSM4hsIUZ7n27+UsbOvzFaFjcYXw==
9393

94-
"@adobe/[email protected].19":
95-
version "13.0.0-beta.19"
96-
resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-13.0.0-beta.19.tgz#f8d60d1499ba03ece35bde68c2b15b1fd54bfbba"
97-
integrity sha512-2EWC4AXDIOoEaoQyi0yUo/pz1QcXHJhP/VU9dIg2BacgLDG9JcxUay8lDU6un+geumvI/NsYDmcNh8mUCRWI+Q==
94+
"@adobe/[email protected].21":
95+
version "13.0.0-beta.21"
96+
resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-13.0.0-beta.21.tgz#e006e302daaada5fcfb6f3a428e31f754a51ec78"
97+
integrity sha512-QY5AYLdpbrpdx50uZWFxFIpTgHUgMUbWDaDvXZRRoyFqRTjPhVbLoY/IU7eUymv+RouZLwOXnvqkoT7c70K2kA==
9898

9999
"@ampproject/remapping@^2.2.0":
100100
version "2.2.1"

0 commit comments

Comments
 (0)