From f2532e7f2f471d472e37ab9821fc8e4e336450a5 Mon Sep 17 00:00:00 2001
From: Patrick Fulton <360251+pfulton@users.noreply.github.com>
Date: Wed, 1 Feb 2023 16:03:09 -0500
Subject: [PATCH] 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 <cassondrar+github@adobe.com>
---
 components/actionbar/index.css                |  2 +-
 components/badge/index.css                    |  2 +-
 components/breadcrumb/index.css               | 26 +++++++++----------
 components/button/index.css                   |  4 +--
 components/checkbox/index.css                 |  2 +-
 components/commons/basebutton-coretokens.css  |  7 ++---
 components/fieldlabel/index.css               | 12 +++++----
 components/helptext/index.css                 |  2 +-
 components/inlinealert/index.css              |  2 +-
 components/progressbar/index.css              |  2 +-
 components/radio/index.css                    |  2 +-
 components/statuslight/index.css              |  2 +-
 components/tag/index.css                      |  2 +-
 components/toast/index.css                    |  4 +--
 components/tokens/config.js                   | 11 ++++++--
 .../tokens/custom-spectrum/custom-vars.css    | 25 +++++++-----------
 components/tokens/package.json                |  2 +-
 components/tooltip/index.css                  |  4 +--
 tools/component-builder/css/vars.js           |  4 ++-
 tools/generator/templates/index.css.hbs       |  2 +-
 tools/preview/assets/index.css                |  2 +-
 tools/preview/preview-head.html               |  2 +-
 yarn.lock                                     |  8 +++---
 23 files changed, 68 insertions(+), 63 deletions(-)

diff --git a/components/actionbar/index.css b/components/actionbar/index.css
index a6b73e2e51a..0c79af0e65f 100644
--- 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
index 6482cc31e90..c05bf80a6d9 100644
--- 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
index 823ea79d16d..2f7df5e99fe 100644
--- 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
index 2b125611c30..72d52614067 100644
--- 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));
-}
\ No newline at end of file
+}
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
index 2c3b4f329b4..e780e3a01bf 100644
--- 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
index 5d2bafa4385..0248887fb85 100644
--- 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;
   }
-}
\ No newline at end of file
+}
diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css
index 2e98774a9a1..70211432544 100644
--- 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
index d00b3eadaca..416394f0c86 100644
--- 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
index 6bea28248c6..cf1b547c652 100644
--- 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
index 619b1f5abb1..1c546c3e6dc 100644
--- 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
index 367a8ce31d6..7129dd83898 100644
--- 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
index 4ed4064b8f5..13d2f21693f 100644
--- 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
index 74760f188cc..67895c9e0d8 100644
--- 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
index 0a051e1ec53..4b8502055e3 100644
--- 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
index 8258e9ac2e8..ddff34f9c08 100644
--- 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
index 98ce5755ac4..21ffafbb048 100644
--- 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
index 49f466824cd..589f29ddfcc 100644
--- 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
index 3d1d6ecbdf4..9e2db29c4f6 100644
--- 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
index 7a3150ec301..c4c061c83a4 100644
--- 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
index f09aa273ce3..2652562fc41 100644
--- 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
index 4436632c19e..ff7cfafd48c 100644
--- 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
index 52e16d219c8..12b7d824429 100644
--- 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
index d1c44c138c7..69e9a8c783f 100644
--- 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/spectrum-tokens@12.0.0-beta.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/spectrum-tokens@12.0.0-beta.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"