bump design tokens and update storybook theme strategy

MetaMask · Feb 25, 2022 · 405bcff · 405bcff
1 parent 3353a9d
commit 405bcff
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -17,10 +17,10 @@ import addons from '@storybook/addons';
 
 addParameters({
   backgrounds: {
-    default: 'light',
+    default: 'default',
     values: [
-      { name: 'light', value: '#FFFFFF' },
-      { name: 'dark', value: 'var(--color-background-default)' },
+      { name: 'default', value: 'var(--color-background-default)' },
+      { name: 'alternative', value: 'var(--color-background-alternative)' },
     ],
   },
   docs: {
@@ -84,17 +84,16 @@ const metamaskDecorator = (story, context) => {
   }, [channel, setDark]);
 
   useEffect(() => {
-    isDark
-      ? document.documentElement.classList.add('theme-dark')
-      : document.documentElement.classList.remove('theme-dark');
+    const currentTheme = document.documentElement.getAttribute('data-theme');
 
-    // @TODO: change when data-theme is implemented in design-tokens
-    //const currentTheme = document.documentElement.getAttribute('data-theme');
-    // if (currentTheme === 'light' && isDark) {
-    //   document.documentElement.setAttribute('data-theme', 'dark');
-    // } else if (currentTheme === 'dark' && !isDark) {
-    //   document.documentElement.setAttribute('data-theme', 'light');
-    // }
+    if (!currentTheme)
+      document.documentElement.setAttribute('data-theme', 'light');
+
+    if (currentTheme === 'light' && isDark) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else if (currentTheme === 'dark' && !isDark) {
+      document.documentElement.setAttribute('data-theme', 'light');
+    }
   }, [isDark]);
 
   return (

diff --git a/package.json b/package.json
@@ -110,7 +110,7 @@
     "@material-ui/core": "^4.11.0",
     "@metamask/contract-metadata": "^1.31.0",
     "@metamask/controllers": "^25.0.0",
-    "@metamask/design-tokens": "^1.2.0",
+    "@metamask/design-tokens": "^1.3.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.10.0",
     "@metamask/eth-token-tracker": "^4.0.0",
     "@metamask/etherscan-link": "^2.1.0",

diff --git a/yarn.lock b/yarn.lock
@@ -2707,7 +2707,7 @@
     web3 "^0.20.7"
     web3-provider-engine "^16.0.3"
 
-"@metamask/design-tokens@^1.2.0":
+"@metamask/design-tokens@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.3.0.tgz#8aa2e065ebe28985b58ebc4282c3d0cfa868cb21"
   integrity sha512-tr3/xZ1TbuMl3oLNZtY7hKV69bd0X73/fY0zx78JE6urL/8Sqt0hEWKG7FYJF8lIxxCS/wKCok/guBOvJcfTYA==