chore(tokens)!: use latest dependency & fix build error (#1591)

BREAKING CHANGE: uses latest `@adobe/spectrum-tokens` dependency which includes token renames --------- Co-authored-by: castastrophe <[email protected]>
adobe · Feb 1, 2023 · f2532e7 · f2532e7
1 parent 57ae013
commit f2532e7
Show file tree

Hide file tree

Showing 23 changed files with 68 additions and 63 deletions.
diff --git a/components/actionbar/index.css b/components/actionbar/index.css
@@ -22,7 +22,7 @@ governing permissions and limitations under the License.
   &:lang(ja),
   &:lang(zh),
   &:lang(ko) {
-    --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-line-height-cjk-100);
+    --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
   }
 
   /* colors - applied to popover */

diff --git a/components/badge/index.css b/components/badge/index.css
@@ -16,7 +16,7 @@ governing permissions and limitations under the License.
 
   /* label text styles for all t-shirt sizes and all themes */
   --spectrum-badge-line-height: var(--spectrum-line-height-100);
-  --spectrum-badge-line-height-cjk: var(--spectrum-line-height-cjk-100);
+  --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
   /* text and icon color default white for all t-shirt sizes and all themes */
   --spectrum-badge-label-icon-color-white: var(--spectrum-white);

diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css
@@ -18,35 +18,35 @@ governing permissions and limitations under the License.
   --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline);
 
   /* text regular */
-  --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-small);
+  --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100);
   --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200);
-  --spectrum-breadcrumbs-font-family: var(--spectrum-font-family-base); /* placeholder for --spectrum-font-family-default */
-  --spectrum-breadcrumbs-font-weight: var(--spectrum-font-weight-regular); /* placeholder for --spectrum-font-regular */
+  --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack);
+  --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight);
 
   /* text regular active item */
   --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200);
-  --spectrum-breadcrumbs-font-family-current: var(--spectrum-font-family-base); /* placeholder for --spectrum-font-family-default */
-  --spectrum-breadcrumbs-font-weight-current: var(--spectrum-font-weight-bold); /* placeholder for --spectrum-font-bold */
+  --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack);
+  --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight);
 
   /* text compact */
   --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100);
-  --spectrum-breadcrumbs-font-family-compact: var(--spectrum-font-family-base); /* placeholder for --spectrum-font-family-default */
-  --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-font-weight-regular); /* placeholder for --spectrum-font-regular */
+  --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack);
+  --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight);
 
   /* text compact active item */
   --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100);
-  --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-font-family-base); /* placeholder for --spectrum-font-family-default */
-  --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-font-weight-bold); /* placeholder for --spectrum-font-bold */
+  --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack);
+  --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight);
 
   /* text multiline */
   --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75);
-  --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-font-family-base); /* placeholder for --spectrum-font-family-default */
-  --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-font-weight-regular); /* placeholder for --spectrum-font-regular */
+  --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack);
+  --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight);
 
   /* text multiline active item */
   --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300);
-  --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-font-family-base); /* placeholder for --spectrum-font-family-default */
-  --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-font-weight-bold); /* placeholder for --spectrum-font-bold */
+  --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack);
+  --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight);
 
   /* hover, active, focus underline */
   --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness);

diff --git a/components/button/index.css b/components/button/index.css
@@ -125,7 +125,7 @@ governing permissions and limitations under the License.
 
 
   font-size: var(--mod-button-font-size, var(--spectrum-button-font-size));
-  font-weight: var(--mod-font-weight-bold, var(--spectrum-font-weight-bold));
+  font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight));
 
   &:hover,
   &:active {
@@ -288,4 +288,4 @@ a.spectrum-Button {
 
 .spectrum-Button--staticBlack {
   --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
-}
+}
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
@@ -43,7 +43,7 @@ governing permissions and limitations under the License.
   /* Font */
   --spectrum-checkbox-font-size: var(--spectrum-font-size-100);
   --spectrum-checkbox-line-height: var(--spectrum-line-height-100);
-  --spectrum-checkbox-line-height-cjk: var(--spectrum-line-height-cjk-100);
+  --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
   /* Size */
   --spectrum-checkbox-height: var(--spectrum-component-height-100);

diff --git a/components/commons/basebutton-coretokens.css b/components/commons/basebutton-coretokens.css
@@ -46,8 +46,9 @@ governing permissions and limitations under the License.
     box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
 
   text-decoration: none;
-  font-family: var(--mod-font-family-base, var(--spectrum-font-family-base));
-  line-height: var(--mod-line-height-small, var(--spectrum-line-height-small)); 
+  font-family: var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack));
+
+  line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
   user-select: none;
   -webkit-user-select: none;
@@ -124,4 +125,4 @@ governing permissions and limitations under the License.
   &:empty {
     display: none;
   }
-}
+}
diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css
@@ -15,6 +15,8 @@ governing permissions and limitations under the License.
 
   --spectrum-field-label-top-to-asterisk: var(--spectrum-field-label-top-to-asterisk-medium);
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+
+  --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
 }
 
 .spectrum-FieldLabel--sizeS {
@@ -23,7 +25,7 @@ governing permissions and limitations under the License.
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
 
   --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
-  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-line-height-cjk-100);
+  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
   --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
@@ -38,7 +40,7 @@ governing permissions and limitations under the License.
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
 
   --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200);
-  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-line-height-cjk-200);
+  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-200);
 
   --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
@@ -53,7 +55,7 @@ governing permissions and limitations under the License.
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
 
   --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
-  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-line-height-cjk-100);
+  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
   --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-100);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
@@ -68,7 +70,7 @@ governing permissions and limitations under the License.
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
 
   --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200);
-  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-line-height-cjk-200);
+  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-200);
 
   --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-200);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
@@ -86,7 +88,7 @@ governing permissions and limitations under the License.
   padding-inline: 0;
 
   font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
-  font-weight: var(--mod-font-weight-regular, var(--spectrum-font-weight-regular));
+  font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight));
 
   line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
 

diff --git a/components/helptext/index.css b/components/helptext/index.css
@@ -34,7 +34,7 @@ governing permissions and limitations under the License.
   &:lang(ja),
   &:lang(zh),
   &:lang(ko) {
-    --spectrum-helptext-line-height-cjk: var(--spectrum-line-height-cjk-100);
+    --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100);
   }
 }
 

diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 
 .spectrum-InLineAlert {
   /* Font */
-  --spectrum-inlinealert-font-weight: var(--spectrum-font-weight-bold);
+  --spectrum-inlinealert-font-weight: var(--spectrum-bold-font-weight);
 
   /* Size*/
   --spectrum-inlinealert-border-width: var(--spectrum-border-width-100);

diff --git a/components/progressbar/index.css b/components/progressbar/index.css
@@ -26,7 +26,7 @@ governing permissions and limitations under the License.
 
   /* Size */
   --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
-  --spectrum-progressbar-line-height-cjk: var(--spectrum-line-height-cjk-100);
+  --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
   --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width);
   --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width);

diff --git a/components/radio/index.css b/components/radio/index.css
@@ -59,7 +59,7 @@ governing permissions and limitations under the License.
   &:lang(ja),
   &:lang(zh),
   &:lang(ko) {
-    --spectrum-radio-line-height-cjk: var(--spectrum-line-height-cjk-100);
+    --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
   }
 
   /* default radio size for no t-shirt size */

diff --git a/components/statuslight/index.css b/components/statuslight/index.css
@@ -20,7 +20,7 @@ governing permissions and limitations under the License.
   --spectrum-statuslight-height: var(--spectrum-component-height-100);
   --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
   --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
-  --spectrum-statuslight-line-height-cjk: var(--spectrum-line-height-cjk-100);
+  --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
   --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
 

diff --git a/components/tag/index.css b/components/tag/index.css
@@ -24,7 +24,7 @@ governing permissions and limitations under the License.
 
   /* label */
   --spectrum-tag-label-line-height: var(--spectrum-line-height-100);
-  --spectrum-tag-label-font-weight: var(--spectrum-font-weight-regular);
+  --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight);
 
   /* selected content */
   --spectrum-tag-content-color-selected: var(--spectrum-white);

diff --git a/components/toast/index.css b/components/toast/index.css
@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Toast {
   /* Hardcoded variables */
-  --spectrum-toast-font-weight: var(--spectrum-font-weight-regular);
+  --spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
 
   /* Size */
 
@@ -22,7 +22,7 @@ governing permissions and limitations under the License.
   --spectrum-toast-border-width: var(--spectrum-border-width-100);
 
   --spectrum-toast-line-height: var(--spectrum-line-height-100);
-  --spectrum-toast-line-height-cjk: var(--spectrum-line-height-cjk-100);
+  --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
   /* Space */
 

diff --git a/components/tokens/config.js b/components/tokens/config.js
@@ -16,6 +16,14 @@ const CSSSetsFormatter = require('style-dictionary-sets').CSSSetsFormatter;
 const NameKebabTransfom = require('style-dictionary-sets').NameKebabTransfom;
 const AttributeSetsTransform = require('style-dictionary-sets').AttributeSetsTransform;
 
+/** 
+ * @note This references the package.json because we want the root folder and
+ * not a nested folder which might be returned if the `main` property
+ * in the package.json is present.
+ */
+const tokensPath = require.resolve('@adobe/spectrum-tokens/package.json');
+const tokensDir = path.dirname(tokensPath);
+
 StyleDictionary.registerTransform(NameKebabTransfom);
 StyleDictionary.registerTransform(AttributeSetsTransform);
 StyleDictionary.registerFormat(CSSSetsFormatter);
@@ -126,9 +134,8 @@ const generateGlobalSetConfig = (setName) => {
   }
 }
 
-const tokenGlob = path.dirname(require.resolve('@adobe/spectrum-tokens')) + '/src/**/*.json';
 module.exports = {
-  source: [tokenGlob],
+  source: [`${tokensDir}/src/*.json`],
   platforms: {
     CSS: {
       buildPath: 'dist/css/',

diff --git a/components/tokens/custom-spectrum/custom-vars.css b/components/tokens/custom-spectrum/custom-vars.css
@@ -35,23 +35,16 @@ governing permissions and limitations under the License.
   --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.40, 1);
   --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
 
-  --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
-  --spectrum-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia, serif;
-  --spectrum-font-family-code: 'Source Code Pro', Monaco, monospace;
+  --spectrum-sans-serif-font: var(--spectrum-sans-serif-font-family);
+  --spectrum-sans-font-family-stack: var(--spectrum-sans-serif-font), adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+
+  --spectrum-serif-font: var(--spectrum-serif-font-family);
+  --spectrum-serif-font-family-stack: var(--spectrum-serif-font), adobe-clean-serif, 'Source Serif Pro', Georgia, serif;
+
+  --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace;
 
-  --spectrum-line-height-large: 1.7;
-  --spectrum-line-height-medium: 1.5;
-  --spectrum-line-height-small: 1.3;
-
-  --spectrum-font-weight-thin: 100;
-  --spectrum-font-weight-ultra-light: 200;
-  --spectrum-font-weight-light: 300;
-  --spectrum-font-weight-regular: 400;
-  --spectrum-font-weight-medium: 500;
-  --spectrum-font-weight-semi-bold: 600;
-  --spectrum-font-weight-bold: 700;
-  --spectrum-font-weight-extra-bold: 800;
-  --spectrum-font-weight-black: 900;
+  --spectrum-cjk-font: var(--spectrum-cjk-font-family);
+  --spectrum-cjk-font-family-stack: var(--spectrum-cjk-font), adobe-clean-han-japanese, sans-serif;
 
   /* static white / black background color for docs containers */
   --spectrum-docs-static-white-background-color: rgb(15, 121, 125);

diff --git a/components/tokens/package.json b/components/tokens/package.json
@@ -19,7 +19,7 @@
     "postbuild": "gulp rebuildCustoms"
   },
   "devDependencies": {
-    "@adobe/spectrum-tokens": "12.0.0-beta.63",
+    "@adobe/spectrum-tokens": "12.0.0-beta.67",
     "gulp": "^4.0.0",
     "gulp-concat": "^2.6.1",
     "rimraf": "^4.1.1",

diff --git a/components/tooltip/index.css b/components/tooltip/index.css
@@ -30,8 +30,8 @@ governing permissions and limitations under the License.
 
   --spectrum-tooltip-font-size: var(--spectrum-font-size-75);
   --spectrum-tooltip-line-height: var(--spectrum-line-height-100);
-  --spectrum-tooltip-cjk-line-height: var(--spectrum-line-height-cjk-100);
-  --spectrum-tooltip-font-weight: var(--spectrum-font-weight-regular); /* TODO - check is still 400 */
+  --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
+  --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);
 
   /* horizontal spacing */
   --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);

diff --git a/tools/component-builder/css/vars.js b/tools/component-builder/css/vars.js
@@ -35,7 +35,9 @@ let scales = [
 function bakeVars() {
   return gulp.src([
     'dist/index-vars.css'
-  ])
+  ], {
+    allowEmpty: true,
+  })
   .pipe(through.obj(async function doBake(file, enc, cb) {
     let pkg = JSON.parse(await fsp.readFile(path.join('package.json')));
     let pkgName = pkg.name.split('/').pop();

diff --git a/tools/generator/templates/index.css.hbs b/tools/generator/templates/index.css.hbs
@@ -17,7 +17,7 @@ governing permissions and limitations under the License.
   &:lang(ja),
   &:lang(zh),
   &:lang(ko) {
-    --spectrum-{{ folderName }}-line-height-cjk: var(--spectrum-line-height-cjk-100);
+    --spectrum-{{ folderName }}-line-height-cjk: var(--spectrum-cjk-line-height-100);
   }
 }
 

diff --git a/tools/preview/assets/index.css b/tools/preview/assets/index.css
@@ -1,5 +1,5 @@
 body {
-  font-family: var(--spectrum-font-family-base);
+  font-family: var(--spectrum-sans-font-family-stack);
   background-color: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
   color: var(--spectrum-alias-text-color-default, var(--spectrum-global-color-gray-900));
   -webkit-tap-highlight-color: rgba(0,0,0,0);

diff --git a/tools/preview/preview-head.html b/tools/preview/preview-head.html
@@ -5,7 +5,7 @@
     }
 
     body {
-        font-family: var(--spectrum-font-family-base);
+        font-family: var(--spectrum-sans-font-family-stack);
         background-color: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
         color: var(--spectrum-alias-text-color-default, var(--spectrum-global-color-gray-900));
         -webkit-tap-highlight-color: rgba(0,0,0,0);

diff --git a/yarn.lock b/yarn.lock
@@ -12,10 +12,10 @@
   resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.5.4.tgz#0e09ff519c36139176c3ba3ce617a995c9032f67"
   integrity sha512-sZ19YOLGw5xTZzCEkVXPjf53lXVzo063KmDTJjpSjy/XLVsF+RaX0b436SfSM4hsIUZ7n27+UsbOvzFaFjcYXw==
 
-"@adobe/[email protected].63":
-  version "12.0.0-beta.63"
-  resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-12.0.0-beta.63.tgz#a3e2c72cde6e513d49c17f38df7fc07d16d4ee1d"
-  integrity sha512-6VdgnWyg7pElOd325zUIgg9jFDH0hcSKJWl7LMpgEhkugdubJ0NiRtOYsIJIfPU1bGY6aECrtO6OAVFZxIf3mQ==
+"@adobe/[email protected].67":
+  version "12.0.0-beta.67"
+  resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-12.0.0-beta.67.tgz#2628ea3ed34217be86b9eaa173f872f73b9b238c"
+  integrity sha512-E9nulUu/YSKwdrvUxxKmCZT8KV09vgajWzQac2AXQ4ogwVhjKPPXOWx/FnqzFXEwrdzYd5szSsr3HmcRYqrT6Q==
 
 "@ampproject/remapping@^2.1.0":
   version "2.2.0"