Dark Theme setup and button theming

.depcheckrc.yml

@@ -35,6 +35,7 @@ ignores:
   - '@storybook/core'
   - '@storybook/addon-essentials'
   - '@storybook/addon-a11y'
+  - 'storybook-dark-mode'
   - 'style-loader'
   - 'css-loader'
   - 'sass-loader'

.storybook/main.js

@@ -14,6 +14,7 @@ module.exports = {
     '@storybook/addon-a11y',
     '@storybook/addon-knobs',
     './i18n-party-addon/register.js',
+    'storybook-dark-mode',
   ],
   // Uses babel.config.js settings and prevents "Missing class properties transform" error
   babel: async (options) => ({ overrides: options.overrides }),

.storybook/preview.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { addDecorator, addParameters } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Provider } from 'react-redux';
@@ -13,13 +13,14 @@ import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { _setBackgroundConnection } from '../ui/store/actions';
 import MetaMaskStorybookTheme from './metamask-storybook-theme';
+import addons from '@storybook/addons';
 
 addParameters({
   backgrounds: {
-    default: 'light',
+    default: 'default',
     values: [
-      { name: 'light', value: '#FFFFFF' },
-      { name: 'dark', value: '#333333' },
+      { name: 'default', value: 'var(--color-background-default)' },
+      { name: 'alternative', value: 'var(--color-background-alternative)' },
     ],
   },
   docs: {
@@ -72,8 +73,29 @@ const proxiedBackground = new Proxy(
 _setBackgroundConnection(proxiedBackground);
 
 const metamaskDecorator = (story, context) => {
+  const [isDark, setDark] = useState(false);
+  const channel = addons.getChannel();
   const currentLocale = context.globals.locale;
   const current = allLocales[currentLocale];
+
+  useEffect(() => {
+    channel.on('DARK_MODE', setDark);
+    return () => channel.off('DARK_MODE', setDark);
+  }, [channel, setDark]);
+
+  useEffect(() => {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+
+    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 (
     <Provider store={store}>
       <Router history={history}>

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",
@@ -349,6 +349,7 @@
     "source-map": "^0.7.2",
     "source-map-explorer": "^2.4.2",
     "squirrelly": "^8.0.8",
+    "storybook-dark-mode": "^1.0.9",
     "string.prototype.matchall": "^4.0.2",
     "style-loader": "^0.21.0",
     "stylelint": "^13.6.1",

ui/components/ui/button/button.component.js

@@ -5,11 +5,9 @@ import classnames from 'classnames';
 const CLASSNAME_DEFAULT = 'btn-default';
 const CLASSNAME_PRIMARY = 'btn-primary';
 const CLASSNAME_SECONDARY = 'btn-secondary';
-const CLASSNAME_CONFIRM = 'btn-primary';
 const CLASSNAME_RAISED = 'btn-raised';
 const CLASSNAME_LARGE = 'btn--large';
 const CLASSNAME_ROUNDED = 'btn--rounded';
-const CLASSNAME_FIRST_TIME = 'btn--first-time';
 const CLASSNAME_INLINE = 'btn--inline';
 
 const typeHash = {
@@ -21,10 +19,7 @@ const typeHash = {
   'danger-primary': 'btn-danger-primary',
   link: 'btn-link',
   inline: CLASSNAME_INLINE,
-  // TODO: Legacy button type to be deprecated
-  confirm: CLASSNAME_CONFIRM,
   raised: CLASSNAME_RAISED,
-  'first-time': CLASSNAME_FIRST_TIME,
 };
 
 const Button = ({

ui/components/ui/button/button.stories.js

@@ -70,24 +70,35 @@ export const Type = (args) => (
     <Button {...args} type="default">
       {args.children || 'Default'}
     </Button>
+    <br />
     <Button {...args} type="primary">
       {args.children || 'Primary'}
     </Button>
+    <br />
     <Button {...args} type="secondary">
       {args.children || 'Secondary'}
     </Button>
+    <br />
     <Button {...args} type="warning">
       {args.children || 'Warning'}
     </Button>
+    <br />
     <Button {...args} type="danger">
       {args.children || 'Danger'}
     </Button>
+    <br />
     <Button {...args} type="danger-primary">
       {args.children || 'Danger primary'}
     </Button>
+    <br />
+    <Button {...args} type="raised">
+      {args.children || 'Raised'}
+    </Button>
+    <br />
     <Button {...args} type="link">
       {args.children || 'Link'}
     </Button>
+    <br />
     <Button {...args} type="inline">
       {args.children || 'Inline'}
     </Button>