m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00
Code

Dark Theme setup and button theming (#13651)

Browse Source 
* Add design-tokens and apply colors to button

* swap more colors

* tweak button and add dark theme switch to storybook

* tweak buttons

* fix typo

* remove comments

* add dep to ignored list

* fix linting issue

* fix linting issues

* Updating some styles and removing some deprecated buttons (#13742)

* Updating some styles and removing some deprecated buttons

* Warning button fixes

* Fixing warning text for darkmode

* bump design tokens and update storybook theme strategy

Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Guillaume Roux 2022-02-25 23:11:22 +01:00 committed by GitHub
parent cdb7269443
commit 23e6c073c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 140 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.depcheckrc.yml
View File

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

1
.storybook/main.js
View File

@ -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 }),

30
.storybook/preview.js
View File

@ -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}>

3
package.json
View File

@ -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",

5
ui/components/ui/button/button.component.js
View File

@ -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 = ({

11
ui/components/ui/button/button.stories.js
View File

@ -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>

177
ui/components/ui/button/buttons.scss
View File

@ -3,14 +3,6 @@
*/
.button {
--hover-secondary: #b0d7f2;
--hover-default: #b3b3b3;
--hover-confirm: #0372c3;
--hover-red: #feb6bf;
--hover-red-primary: #c72837;
--hover-orange: #ffd3b5;
--warning-light-orange: #f8b588;
@include H6;
font-weight: 500;
@ -38,146 +30,148 @@
}
.btn-secondary {
color: var(--Blue-500);
border: 1px solid var(--hover-secondary);
background-color: var(--white);
color: var(--color-primary-default);
border: 1px solid var(--color-primary-muted);
background-color: var(--color-background-default);
&:hover {
border-color: var(--Blue-500);
border-color: var(--color-primary-default);
}
&:active {
background: var(--Blue-000);
border-color: var(--Blue-500);
background: var(--color-primary-muted);
border-color: var(--color-primary-default);
}
&--disabled,
&[disabled] {
opacity: 1;
color: var(--hover-secondary);
color: var(--color-primary-muted);
}
}
.btn-warning {
color: var(--Orange-500);
border: 1px solid var(--hover-orange);
background-color: var(--white);
color: var(--color-text-default);
border: 1px solid var(--color-warning-default);
background-color: var(--color-background-default);
&:hover {
border-color: var(--Orange-500);
border: 1px solid var(--color-warning-default);
}
&:active {
background: var(--Orange-000);
border-color: var(--Orange-500);
background: var(--color-warning-muted);
border: 1px solid var(--color-warning-alternative);
}
&--disabled,
&[disabled] {
opacity: 1;
color: var(--hover-orange);
color: var(--color-text-muted);
}
}
.btn-danger {
color: var(--Red-500);
border: 1px solid var(--hover-red);
background-color: var(--white);
color: var(--color-error-default);
border: 1px solid var(--color-error-muted);
background-color: var(--color-background-default);
&:hover {
border-color: var(--Red-500);
border-color: var(--color-error-default);
}
&:active {
background: var(--Red-000);
border-color: var(--Red-500);
background: var(--color-error-muted);
border-color: var(--color-error-default);
}
&--disabled,
&[disabled] {
opacity: 1;
color: var(--hover-red);
color: var(--color-error-disabled);
}
}
.btn-danger-primary {
color: var(--white);
border: 1px solid var(--Red-500);
background-color: var(--Red-500);
color: var(--color-error-inverse);
border: 1px solid;
border-color: var(--color-error-default);
background-color: var(--color-error-default);
&:hover {
border-color: var(--hover-red-primary);
background-color: var(--hover-red-primary);
border-color: var(--color-error-alternative);
background-color: var(--color-error-alternative);
}
&:active {
background: var(--Red-600);
border-color: var(--Red-600);
background: var(--color-error-alternative0);
border-color: var(--color-error-alternative);
}
&--disabled,
&[disabled] {
opacity: 1;
border-color: var(--hover-red);
background-color: var(--hover-red);
border-color: var(--color-error-disabled);
background-color: var(--color-error-disabled);
}
}
.btn-default {
color: var(--Grey-500);
border: 1px solid var(--hover-default);
color: var(--color-text-alternative);
border: 1px solid var(--color-border-default);
background: var(--color-background-default);
&:hover {
border-color: var(--Grey-500);
border-color: var(--color-border-default);
}
&:active {
background: #fbfbfc;
border-color: var(--Grey-500);
background: var(--color-background-alternative);
border-color: var(--color-border-default);
}
&--disabled,
&[disabled] {
opacity: 1;
color: var(--hover-default);
color: var(--color-text-muted);
}
}
.btn-primary {
color: var(--white);
border: 1px solid var(--Blue-500);
background-color: var(--Blue-500);
color: var(--color-background-default);
border: 1px solid var(--color-primary-default);
background-color: var(--color-primary-default);
&:hover {
border-color: var(--hover-confirm);
background-color: var(--hover-confirm);
border-color: var(--color-primary-alternative);
background-color: var(--color-primary-alternative);
}
&:active {
background: var(--Blue-600);
border-color: var(--Blue-600);
background: var(--color-primary-alternative);
border-color: var(--color-primary-alternative);
}
&--disabled,
&[disabled] {
border-color: var(--hover-secondary);
background-color: var(--hover-secondary);
border-color: var(--color-primary-disabled);
background-color: var(--color-primary-disabled);
}
}
.btn-link {
@include H4;
color: var(--Blue-500);
color: var(--color-primary-default);
cursor: pointer;
background-color: transparent;
&:hover {
color: var(--Blue-400);
color: var(--color-primary-alternative);
}
&:active {
color: var(--Blue-600);
color: var(--color-primary-alternative);
}
&--disabled,
@ -185,7 +179,7 @@
cursor: auto;
opacity: 1;
pointer-events: none;
color: var(--hover-secondary);
color: var(--color-primary-disabled);
}
}
@ -198,8 +192,8 @@
*/
.btn-raised {
color: var(--primary-blue);
background-color: var(--white);
color: var(--color-primary-default);
background-color: var(--color-background-default);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
padding: 6px;
height: initial;
@ -208,19 +202,6 @@
min-width: initial;
}
.btn--first-time {
@include H4;
height: 54px;
width: 198px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
color: var(--white);
font-weight: 500;
transition: 200ms ease-in-out;
background-color: rgba(247, 134, 28, 0.9);
border-radius: 0;
}
button[disabled],
input[type="submit"][disabled] {
cursor: not-allowed;
@ -237,84 +218,84 @@ input[type="submit"][disabled] {
}
&.btn-secondary {
border: 1px solid var(--Blue-500);
border: 1px solid var(--color-primary-default);
&--disabled,
&[disabled] {
border-color: var(--hover-secondary);
color: var(--hover-secondary);
border-color: var(--color-primary-disabled);
color: var(--color-primary-disabled);
}
&:active {
border-color: var(--Blue-600);
border-color: var(--color-primary-alternative);
}
}
&.btn-default {
border: 1px solid var(--Grey-500);
border: 1px solid var(--color-icon-default);
&--disabled,
&[disabled] {
border-color: var(--Grey-100);
color: var(--hover-default);
border-color: var(--color-border-muted);
color: var(--color-text-muted);
}
&:active {
border-color: var(--Grey-600);
border-color: var(--color-text-alternative);
}
}
&.btn-danger {
border: 1px solid var(--Red-500);
border: 1px solid var(--color-error-default);
&--disabled,
&[disabled] {
border-color: var(--Red-100);
color: var(--Red-300);
border-color: var(--color-error-disabled);
color: var(--color-error-disabled);
}
&:active {
border-color: var(--Red-600);
border-color: var(--color-error-alternative);
}
}
&.btn-warning {
border: 1px solid var(--Orange-500);
border: 1px solid var(--color-warning-default);
&--disabled,
&[disabled] {
border-color: var(--warning-light-orange);
color: var(--warning-light-orange);
border-color: var(--color-warning-alternative);
color: var(--color-text-muted);
}
&:active {
border-color: var(--Orange-600);
border-color: var(--color-warning-alternative);
}
}
&.btn-primary {
background-color: var(--Blue-500);
background-color: var(--color-primary-default);
&--disabled,
&[disabled] {
background-color: var(--hover-secondary);
background-color: var(--color-primary-disabled);
}
&:active {
background-color: var(--Blue-600);
background-color: var(--color-primary-alternative);
}
}
&.btn-danger-primary {
background-color: var(--Red-500);
background-color: var(--color-error-default);
&--disabled,
&[disabled] {
background-color: var(--Red-300);
background-color: var(--color-error-disabled);
}
&:active {
background-color: var(--Red-600);
background-color: var(--color-error-alternative);
}
}
}
@ -324,16 +305,16 @@ input[type="submit"][disabled] {
padding: 0 4px;
font-size: inherit;
width: auto;
color: var(--Blue-500);
color: var(--color-primary-default);
cursor: pointer;
background-color: transparent;
&:hover {
color: var(--Blue-400);
color: var(--color-primary-alternative);
}
&:active {
color: var(--Blue-600);
color: var(--color-primary-alternative);
}
&--disabled,
@ -341,6 +322,6 @@ input[type="submit"][disabled] {
cursor: auto;
opacity: 1;
pointer-events: none;
color: var(--hover-secondary);
color: var(--color-primary-disabled);
}
}

18
ui/css/base-styles.scss
View File

@ -6,7 +6,7 @@
html,
body {
color: #4d4d4d;
color: var(--color-text-default);
width: 100%;
height: 100%;
margin: 0;
@ -49,10 +49,10 @@ html {
height: 100%;
display: flex;
flex-direction: column;
background: #f7f7f7;
background: var(--color-background-alternative);
@media screen and (max-width: $break-small) {
background-color: var(--white);
background-color: var(--color-background-default);
}
}
/* stylelint-enable */
@ -89,32 +89,32 @@ input.form-control {
padding-left: 10px;
font-size: 14px;
height: 40px;
border: 1px solid var(--alto);
border: 1px solid var(--color-border-muted);
border-radius: 3px;
width: 100%;
&::-webkit-input-placeholder {
font-weight: 100;
color: var(--dusty-gray);
color: var(--color-text-alternative);
}
&::-moz-placeholder {
font-weight: 100;
color: var(--dusty-gray);
color: var(--color-text-alternative);
}
&:-ms-input-placeholder {
font-weight: 100;
color: var(--dusty-gray);
color: var(--color-text-alternative);
}
&:-moz-placeholder {
font-weight: 100;
color: var(--dusty-gray);
color: var(--color-text-alternative);
}
&--error {
border: 1px solid var(--monzo);
border: 1px solid var(--color-error-default);
}
}

2
ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
View File

@ -142,7 +142,7 @@ export default function ItemList({
) : null}
</div>
{result.notImported && (
<Button type="confirm" onClick={onClick}>
<Button type="primary" onClick={onClick}>
{t('import')}
</Button>
)}

12
yarn.lock
View File

@ -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==
@ -12040,7 +12040,7 @@ fast-deep-equal@^2.0.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
fast-deep-equal@^3.0.0, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@ -25255,6 +25255,14 @@ storybook-addon-outline@^1.4.1:
"@storybook/core-events" "^6.3.0"
ts-dedent "^2.1.1"
storybook-dark-mode@^1.0.9:
version "1.0.9"
resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-1.0.9.tgz#40c15aa340bc700df2fb4f1345250e6fdace0b3a"
integrity sha512-ITPXM2OSaga1zM5blpZy5HxMWAhrAqYi9aJtLgRtSdgoRrxVNAInDRD14TjmObdgLHNWxINoNbnEB+sKETa+iw==
dependencies:
fast-deep-equal "^3.0.0"
memoizerific "^1.11.3"
stream-browserify@^2.0.0, stream-browserify@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"