chore: upgrading design tokens and default font size to 16px

Author: georgewrmarshall

.storybook/metamask-storybook-theme.js

@@ -2,5 +2,5 @@
 export const metamaskStorybookTheme = {
   brandTitle: 'MetaMask Storybook',
   // Typography
-  fontBase: 'var(--font-family-sans)',
+  fontBase: 'var(--font-family-default)',
 };

package.json

@@ -129,6 +129,7 @@
     "ci-rerun-from-failed": "tsx .circleci/scripts/rerun-ci-workflow-from-failed.ts"
   },
   "resolutions": {
+    "@metamask/design-tokens": "npm:@metamask-previews/[email protected]",
     "chokidar": "^3.6.0",
     "@types/react": "^16.9.53",
     "bn.js": "^5.2.1",
@@ -265,7 +266,7 @@
     "@metamask/browser-passworder": "^4.3.0",
     "@metamask/contract-metadata": "^2.5.0",
     "@metamask/controller-utils": "^11.4.0",
-    "@metamask/design-tokens": "^6.0.1",
+    "@metamask/design-tokens": "^7.0.0",
     "@metamask/ens-controller": "^15.0.2",
     "@metamask/ens-resolver-snap": "^0.1.2",
     "@metamask/eth-json-rpc-filters": "^9.0.0",

ui/components/component-library/text/text.scss

@@ -10,14 +10,12 @@ $text-variants: (
 // Variable output mixin
 // screen size, type, size
 @mixin textVariables($type, $size) {
-  font-family: var(--typography-s-#{$type}-#{$size}-font-family);
   font-weight: var(--typography-s-#{$type}-#{$size}-font-weight);
   font-size: var(--typography-s-#{$type}-#{$size}-font-size);
   line-height: var(--typography-s-#{$type}-#{$size}-line-height);
   letter-spacing: var(--typography-s-#{$type}-#{$size}-letter-spacing);
 
   @include design-system.screen-md-min {
-    font-family: var(--typography-l-#{$type}-#{$size}-font-family);
     font-weight: var(--typography-l-#{$type}-#{$size}-font-weight);
     font-size: var(--typography-l-#{$type}-#{$size}-font-size);
     line-height: var(--typography-l-#{$type}-#{$size}-line-height);
@@ -27,7 +25,7 @@ $text-variants: (
 
 .mm-text {
   // Set default styles
-  font-family: var(--font-family-sans);
+  font-family: var(--font-family-default);
 
   &:is(strong),
   strong {

ui/css/design-system/_typography.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 
-$font-family: var(--font-family-sans); // --font-family-sans from @metamask/design-tokens stylesheet
+$font-family: var(--font-family-default); // --font-family-default from @metamask/design-tokens stylesheet
 
 $typography-variants: (
   'h1': 2.5rem,

ui/pages/error-page/index.scss

@@ -17,7 +17,7 @@
   &__stack {
     max-height: 120px;
     overflow: auto;
-    font-family: var(--font-family-sans);
+    font-family: var(--font-family-default);
     font-weight: var(--typography-l-body-xs-font-weight);
     font-size: var(--typography-l-body-xs-font-size);
   }
@@ -29,7 +29,7 @@
 
 // override styles for sentry feedback form
 #sentry-feedback {
-  --font-family: var(--font-family-sans);
+  --font-family: var(--font-family-default);
   --inset: auto 20px 20px auto;
   --input-font-size: 14px;
   --button-color: var(--color-primary-default);

yarn.lock

@@ -5077,17 +5077,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/design-tokens@npm:^4.0.0":
-  version: 4.2.0
-  resolution: "@metamask/design-tokens@npm:4.2.0"
-  checksum: 10/aa92b20f8860a59b2b272e7a8a704d7e426a94030081c69c42b87ea81985c5d6585122def5906ce5a5751cb99f070efed77fabecc751ae0a7d84738f0e0ae522
-  languageName: node
-  linkType: hard
-
-"@metamask/design-tokens@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "@metamask/design-tokens@npm:6.0.1"
-  checksum: 10/29761650074744845551e04a701924733a4584c5c1f6099ca3c7ac5302d0ff19df697a3167034b8a70e3e5c59cb62a95c28323244583cfb3b75577e329215b7c
+"@metamask/design-tokens@npm:@metamask-previews/[email protected]":
+  version: 6.1.0-preview.1c1a94d
+  resolution: "@metamask-previews/design-tokens@npm:6.1.0-preview.1c1a94d"
+  checksum: 10/eaf4e34f018ec29d4a4c9eb739a14bec9973a98a338e6d4795c84eb60f01b5f60b174f8f82b4cb33dda26baa6bb2b072e8a5bd41f8c9956b0c726869562cbf6e
   languageName: node
   linkType: hard
 
@@ -27217,7 +27210,7 @@ __metadata:
     "@metamask/build-utils": "npm:^3.0.0"
     "@metamask/contract-metadata": "npm:^2.5.0"
     "@metamask/controller-utils": "npm:^11.4.0"
-    "@metamask/design-tokens": "npm:^6.0.1"
+    "@metamask/design-tokens": "npm:^7.0.0"
     "@metamask/ens-controller": "npm:^15.0.2"
     "@metamask/ens-resolver-snap": "npm:^0.1.2"
     "@metamask/eslint-config": "npm:^9.0.0"