From 213f05059432f2509c6909a1ed8c4b8cfb706218 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Thu, 17 Feb 2022 12:42:37 +1030 Subject: [PATCH 1/3] Installing design tokens and writing docs in storybook --- .storybook/3.COLORS.stories.mdx | 182 +++++++++++++++++++++ .storybook/images/design.token.graphic.svg | 1 + .storybook/preview.js | 8 +- package.json | 1 + ui/css/index.scss | 1 + yarn.lock | 5 + 6 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 .storybook/3.COLORS.stories.mdx create mode 100644 .storybook/images/design.token.graphic.svg diff --git a/.storybook/3.COLORS.stories.mdx b/.storybook/3.COLORS.stories.mdx new file mode 100644 index 000000000000..81d8021405c0 --- /dev/null +++ b/.storybook/3.COLORS.stories.mdx @@ -0,0 +1,182 @@ +import { Meta } from '@storybook/addon-docs'; +import ActionaleMessage from '../ui/components/ui/actionable-message'; +import designTokenDiagramImage from './images/design.token.graphic.svg'; + + + +# Color + +Color is used to express style and communicate meaning. + + + +
+ +## Design Tokens + +We are importing design tokens as CSS variables from [@metamask/design-tokens](https://github.com/MetaMask/design-tokens) repo to help consolidate colors and enable theming across all MetaMask products. + +### Token Tiers + +We follow a 3 tiered system for color design tokens and css variables. + +
+ +
+ +
+
+ +### **Brand colors** (tier 1) + +These colors **SHOULD NOT** be used in your styles directly they are used as a reference for the [Theme Colors](#theme-colors-tier-2). Brand colors should just keep track of every color used in our app. + +#### Example of brand color css variables + +```css +/** !!!DO NOT USE BRAND COLORS DIRECTLY IN YOUR CODE!!! */ + var(--brand-colors-white-white000) + var(--brand-colors-white-white010) + var(--brand-colors-grey-grey030); +``` + +### **Theme Colors** (tier 2) + +Theme colors are color agnostic, semantically neutral and theme compatible design tokens that you can use in your code and styles. Please refer to the description of each token for it's intended purpose in [`@metamask/design-tokens`](https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554). + +#### Example of theme color css variables + +```css +:root { + var(--color-background-default); + var(--color-background-alternative); + var(--color-text-default); + var(--color-text-alternative); + var(--color-text-muted); + var(--color-icon-default); + var(--color-icon-muted); + var(--color-border-default); + var(--color-border-muted); + var(--color-overlay-default); + var(--color-overlay-inverse); + var(--color-primary-default); + var(--color-primary-alternative); + var(--color-primary-muted); + var(--color-primary-inverse); + var(--color-primary-disabled); + var(--color-secondary-default); + var(--color-secondary-alternative); + var(--color-secondary-muted); + var(--color-secondary-inverse); + var(--color-secondary-disabled); + var(--color-error-default); + var(--color-error-alternative); + var(--color-error-muted); + var(--color-error-inverse); + var(--color-error-disabled); + var(--color-warning-default); + var(--color-warning-alternative); + var(--color-warning-muted); + var(--color-warning-inverse); + var(--color-warning-disabled); + var(--color-success-default); + var(--color-success-alternative); + var(--color-success-muted); + var(--color-success-inverse); + var(--color-success-disabled); + var(--color-info-default); + var(--color-info-alternative); + var(--color-info-muted); + var(--color-info-inverse); + var(--color-info-disabled); +} +``` + +### **Component colors** (tier 3) + +Another level of abstraction is component tier colors that you can define at the top of your styles and use at the component specific level. + +```scss +.button { + --color-background-primary: var(--color-primary-default); + --color-text-primary: var(--color-primary-inverse); + --color-border-primary: var(--color-primary-default); + + --color-background-primary-hover: var(--color-primary-alternative); + --color-border-primary-hover: var(--color-primary-alternative); + + .btn-primary { + background-color: var(--color-background-primary); + color: var(--color-text-primary); + border: 1px solid var(--color-border-primary); + + &:hover { + background-color: var(--color-background-primary-hover); + border: 1px solid var(--color-border-primary-hover); + } + + /** btn-primary css continued... */ + } +} +``` + +## Takeaways + +- Do not use static HEX values in your code. Use the [Theme Colors](#theme-colors-tier-2). If one does not exist for your use case ask the designer or [create an issue](https://github.com/MetaMask/metamask-extension/issues/new) and tag it with a `design-system` label. +- Make sure the design token you are using is for it's intended purpose. Please refer to the description of each token in [`@metamask/design-tokens`](https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554). + +### ❌ Don't do this + +Don't use static hex values or brand color tokens in your code. + +```css +/** +* Don't do this +* Static hex values create inconsistency and will break UI when using dark mode +**/ +.card { + background-color: #ffffff; + color: #24272a; +} + +/** +* Don't do this +* Not theme compatible and will break UI when using dark theme +**/ +.card { + background-color: var(--brand-colors-white-white000); + color: var(--brand-colors-grey-grey800); +} +``` + +### ✅ Do this + +Do use component tiered and [Theme Colors](#theme-colors-tier-2) in your styles and code + +```css +.card { + --color-background: var(--color-background-default); + --color-text: var(--color-text-default); + + background-color: var(--color-background); + color: var(--color-text); +} +``` + +
+ +## References + +- [`@metamask/design-tokens`](https://github.com/MetaMask/design-tokens) +- [Figma Brand Colors Library](https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1)(internal use only) +- [Figma Theme Colors Library](https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/Light-Theme-Colors?node-id=0%3A1)(internal use only) +- [Figma Dark Theme Colors Library](https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/Dark-Theme-Colors?node-id=0%3A1)(internal use only) diff --git a/.storybook/images/design.token.graphic.svg b/.storybook/images/design.token.graphic.svg new file mode 100644 index 000000000000..ad64afba9051 --- /dev/null +++ b/.storybook/images/design.token.graphic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js index 9e6fe2206e1b..5981255cab0f 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -27,7 +27,13 @@ addParameters({ }, options: { storySort: { - order: ['Getting Started', 'Components', ['UI', 'App'], 'Pages'], + order: [ + 'Getting Started', + 'Design Tokens', + 'Components', + ['UI', 'App'], + 'Pages', + ], }, }, }); diff --git a/package.json b/package.json index e131317e8f99..ec82312026ce 100644 --- a/package.json +++ b/package.json @@ -110,6 +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/eth-ledger-bridge-keyring": "^0.10.0", "@metamask/eth-token-tracker": "^4.0.0", "@metamask/etherscan-link": "^2.1.0", diff --git a/ui/css/index.scss b/ui/css/index.scss index bbbc050c1318..bf9249706825 100644 --- a/ui/css/index.scss +++ b/ui/css/index.scss @@ -29,3 +29,4 @@ Third Party Library Styles */ @import '../../node_modules/react-tippy/dist/tippy'; +@import '../../node_modules/@metamask/design-tokens/src/css/design-tokens'; diff --git a/yarn.lock b/yarn.lock index 5cd92a8535f9..5dded3a6331c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2707,6 +2707,11 @@ web3 "^0.20.7" web3-provider-engine "^16.0.3" +"@metamask/design-tokens@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.2.0.tgz#4d23456ac7de950461534088ad44692e0f7c766c" + integrity sha512-/9Ps2IjYyK8SW5XSpkk0jcKw/qnEGTyyVzNwaBuU/m4mdWrukDfFCX0AS2nm6h1TIFz+bJuhOhCu5aZTuXFJ0w== + "@metamask/eslint-config-jest@^9.0.0": version "9.0.0" resolved "https://registry.yarnpkg.com/@metamask/eslint-config-jest/-/eslint-config-jest-9.0.0.tgz#516fdf1f03f6f006b26ca790bf748e2189d19d17" From 1dfc5655d8d17cf4f2c0859d949b81ca7ec88e15 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Wed, 23 Feb 2022 07:17:04 +1030 Subject: [PATCH 2/3] Adding design-tokens to dep check ignore --- .depcheckrc.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.depcheckrc.yml b/.depcheckrc.yml index 15f3c91b9f0e..88feff781b5f 100644 --- a/.depcheckrc.yml +++ b/.depcheckrc.yml @@ -18,6 +18,7 @@ ignores: - '@metamask/auto-changelog' # invoked as `auto-changelog` - '@metamask/forwarder' - '@metamask/test-dapp' + - '@metamask/design-tokens' # Only imported in index.css - '@sentry/cli' # invoked as `sentry-cli` - 'chromedriver' - 'depcheck' # ooo meta From bfbb6d6cdf98c91129ae2c256ce44383365357b8 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Wed, 23 Feb 2022 07:18:00 +1030 Subject: [PATCH 3/3] Link updates, Sentence casing, better css code formatting, other grammer fixes --- .storybook/3.COLORS.stories.mdx | 135 ++++++++++++++++++-------------- 1 file changed, 77 insertions(+), 58 deletions(-) diff --git a/.storybook/3.COLORS.stories.mdx b/.storybook/3.COLORS.stories.mdx index 81d8021405c0..b694a721ad84 100644 --- a/.storybook/3.COLORS.stories.mdx +++ b/.storybook/3.COLORS.stories.mdx @@ -15,11 +15,11 @@ Color is used to express style and communicate meaning.
-## Design Tokens +## Design tokens We are importing design tokens as CSS variables from [@metamask/design-tokens](https://github.com/MetaMask/design-tokens) repo to help consolidate colors and enable theming across all MetaMask products. -### Token Tiers +### Token tiers We follow a 3 tiered system for color design tokens and css variables. @@ -38,67 +38,86 @@ We follow a 3 tiered system for color design tokens and css variables. ### **Brand colors** (tier 1) -These colors **SHOULD NOT** be used in your styles directly they are used as a reference for the [Theme Colors](#theme-colors-tier-2). Brand colors should just keep track of every color used in our app. +These colors **SHOULD NOT** be used in your styles directly. They are used as a reference for the [theme colors](#theme-colors-tier-2). Brand colors should just keep track of every color used in our app. #### Example of brand color css variables ```css /** !!!DO NOT USE BRAND COLORS DIRECTLY IN YOUR CODE!!! */ - var(--brand-colors-white-white000) - var(--brand-colors-white-white010) - var(--brand-colors-grey-grey030); +var(--brand-colors-white-white000) +var(--brand-colors-white-white010) +var(--brand-colors-grey-grey030) ``` -### **Theme Colors** (tier 2) +### **Theme colors** (tier 2) -Theme colors are color agnostic, semantically neutral and theme compatible design tokens that you can use in your code and styles. Please refer to the description of each token for it's intended purpose in [`@metamask/design-tokens`](https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554). +Theme colors are color agnostic, semantically neutral and theme compatible design tokens that you can use in your code and styles. Please refer to the description of each token for it's intended purpose in [@metamask/design-tokens](https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554). #### Example of theme color css variables ```css -:root { - var(--color-background-default); - var(--color-background-alternative); - var(--color-text-default); - var(--color-text-alternative); - var(--color-text-muted); - var(--color-icon-default); - var(--color-icon-muted); - var(--color-border-default); - var(--color-border-muted); - var(--color-overlay-default); - var(--color-overlay-inverse); - var(--color-primary-default); - var(--color-primary-alternative); - var(--color-primary-muted); - var(--color-primary-inverse); - var(--color-primary-disabled); - var(--color-secondary-default); - var(--color-secondary-alternative); - var(--color-secondary-muted); - var(--color-secondary-inverse); - var(--color-secondary-disabled); - var(--color-error-default); - var(--color-error-alternative); - var(--color-error-muted); - var(--color-error-inverse); - var(--color-error-disabled); - var(--color-warning-default); - var(--color-warning-alternative); - var(--color-warning-muted); - var(--color-warning-inverse); - var(--color-warning-disabled); - var(--color-success-default); - var(--color-success-alternative); - var(--color-success-muted); - var(--color-success-inverse); - var(--color-success-disabled); - var(--color-info-default); - var(--color-info-alternative); - var(--color-info-muted); - var(--color-info-inverse); - var(--color-info-disabled); -} +/** Backgrounds */ +var(--color-background-default) +var(--color-background-alternative) + +/** Text */ +var(--color-text-default) +var(--color-text-alternative) +var(--color-text-muted) + +/** Icons */ +var(--color-icon-default) +var(--color-icon-muted) + +/** Borders */ +var(--color-border-default) +var(--color-border-muted) + +/** Overlays */ +var(--color-overlay-default) +var(--color-overlay-inverse) + +/** User Actions */ +var(--color-primary-default) +var(--color-primary-alternative) +var(--color-primary-muted) +var(--color-primary-inverse) +var(--color-primary-disabled) + +var(--color-secondary-default) +var(--color-secondary-alternative) +var(--color-secondary-muted) +var(--color-secondary-inverse) +var(--color-secondary-disabled) + +/** States */ +/** Error */ +var(--color-error-default) +var(--color-error-alternative) +var(--color-error-muted) +var(--color-error-inverse) +var(--color-error-disabled) + +/** Warning */ +var(--color-warning-default) +var(--color-warning-alternative) +var(--color-warning-muted) +var(--color-warning-inverse) +var(--color-warning-disabled) + +/** Success */ +var(--color-success-default) +var(--color-success-alternative) +var(--color-success-muted) +var(--color-success-inverse) +var(--color-success-disabled) + +/** Info */ +var(--color-info-default) +var(--color-info-alternative) +var(--color-info-muted) +var(--color-info-inverse) +var(--color-info-disabled) ``` ### **Component colors** (tier 3) @@ -131,8 +150,8 @@ Another level of abstraction is component tier colors that you can define at the ## Takeaways -- Do not use static HEX values in your code. Use the [Theme Colors](#theme-colors-tier-2). If one does not exist for your use case ask the designer or [create an issue](https://github.com/MetaMask/metamask-extension/issues/new) and tag it with a `design-system` label. -- Make sure the design token you are using is for it's intended purpose. Please refer to the description of each token in [`@metamask/design-tokens`](https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554). +- Do not use static HEX values in your code. Use the [theme colors](#theme-colors-tier-2). If one does not exist for your use case ask the designer or [create an issue](https://github.com/MetaMask/metamask-extension/issues/new) and tag it with a `design-system` label. +- Make sure the design token you are using is for it's intended purpose. Please refer to the description of each token in [@metamask/design-tokens](https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554). ### ❌ Don't do this @@ -160,7 +179,7 @@ Don't use static hex values or brand color tokens in your code. ### ✅ Do this -Do use component tiered and [Theme Colors](#theme-colors-tier-2) in your styles and code +Do use component tiered and [theme colors](#theme-colors-tier-2) in your styles and code ```css .card { @@ -176,7 +195,7 @@ Do use component tiered and [Theme Colors](#theme-colors-tier-2) in your styles ## References -- [`@metamask/design-tokens`](https://github.com/MetaMask/design-tokens) -- [Figma Brand Colors Library](https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1)(internal use only) -- [Figma Theme Colors Library](https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/Light-Theme-Colors?node-id=0%3A1)(internal use only) -- [Figma Dark Theme Colors Library](https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/Dark-Theme-Colors?node-id=0%3A1)(internal use only) +- [@metamask/design-tokens](https://github.com/MetaMask/design-tokens) +- [Figma brand colors library](https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1) (internal use only) +- [Figma theme colors library](https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/Light-Theme-Colors?node-id=0%3A1) (internal use only) +- [Figma dark theme colors library](https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/Dark-Theme-Colors?node-id=0%3A1) (internal use only)