3-COLORS-stories-mdx.2465cec6.iframe.bundle.js

"use strict";(globalThis.webpackChunkmetamask_crx=globalThis.webpackChunkmetamask_crx||[]).push([[49425],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{BN:()=>MDXContext,RP:()=>useMDXComponents,gz:()=>withMDXComponents,xA:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");let MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return boundMDXComponent;function boundMDXComponent(props){let allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){let contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo(()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components},[contextComponents,components])}let emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./.storybook/3.COLORS.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,__page:()=>__page,default:()=>_3_COLORS_stories}),__webpack_require__("./node_modules/react/index.js");var lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs");let design_token_graphic_namespaceObject=__webpack_require__.p+"static/media/design.token.graphic.8d23ec03.svg";var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){let _components=Object.assign({h1:"h1",p:"p",h2:"h2",a:"a",h3:"h3",strong:"strong",h4:"h4",pre:"pre",code:"code",ul:"ul",li:"li"},(0,lib.RP)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"Foundations / Color"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"color",children:"Color"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Color is used to express style and communicate meaning."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"design-tokens",children:"Design tokens"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["We are importing design tokens as CSS variables from ",(0,jsx_runtime.jsx)(_components.a,{href:"https://github.com/MetaMask/design-tokens",target:"_blank",rel:"nofollow noopener noreferrer",children:"@metamask/design-tokens"})," repo to help consolidate colors and enable theming across all MetaMask products."]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"token-tiers",children:"Token tiers"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"We follow a 3 tiered system for color design tokens and css variables."}),"\n",(0,jsx_runtime.jsx)("div",{style:{textAlign:"center",backgroundColor:"var(--brand-colors-white)",padding:32},children:(0,jsx_runtime.jsx)("img",{width:"80%",src:design_token_graphic_namespaceObject})}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"brand-colors-tier-1",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Brand colors"})," (tier 1)"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["These colors ",(0,jsx_runtime.jsx)(_components.strong,{children:"SHOULD NOT"})," be used in your styles directly. They are used as a reference for the ",(0,jsx_runtime.jsx)(_components.a,{href:"#theme-colors-tier-2",children:"theme colors"}),". Brand colors should just keep track of every color used in our app."]}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"example-of-brand-color-css-variables",children:"Example of brand color css variables"}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-css",children:"/** !!!DO NOT USE BRAND COLORS DIRECTLY IN YOUR CODE!!! */\nvar(--brand-colors-white)\nvar(--brand-colors-black)\nvar(--brand-colors-grey-grey800)\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"theme-colors-tier-2",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Theme colors"})," (tier 2)"]}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["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 ",(0,jsx_runtime.jsx)(_components.a,{href:"https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554",target:"_blank",rel:"nofollow noopener noreferrer",children:"@metamask/design-tokens"}),"."]}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"example-of-theme-color-css-variables",children:"Example of theme color css variables"}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-css",children:"/** Backgrounds */\nvar(--color-background-default)\nvar(--color-background-default-hover)\nvar(--color-background-default-pressed)\nvar(--color-background-alternative)\nvar(--color-background-alternative-hover)\nvar(--color-background-alternative-pressed)\nvar(--color-background-hover)\nvar(--color-background-pressed)\n\n/** Text */\nvar(--color-text-default)\nvar(--color-text-alternative)\nvar(--color-text-muted)\n\n/** Icons */\nvar(--color-icon-default)\nvar(--color-icon-alternative)\nvar(--color-icon-muted)\n\n/** Borders */\nvar(--color-border-default)\nvar(--color-border-muted)\n\n/** Overlays */\nvar(--color-overlay-default)\nvar(--color-overlay-alternative)\nvar(--color-overlay-inverse)\n\n/** User Actions */\nvar(--color-primary-default)\nvar(--color-primary-default-hover)\nvar(--color-primary-default-pressed)\nvar(--color-primary-alternative)\nvar(--color-primary-muted)\nvar(--color-primary-inverse)\n\n/** States */\n/** Error */\nvar(--color-error-default)\nvar(--color-error-default-hover)\nvar(--color-error-default-pressed)\nvar(--color-error-alternative)\nvar(--color-error-default-hover)\nvar(--color-error-default-pressed)\nvar(--color-error-muted)\nvar(--color-error-inverse)\n\n/** Warning */\nvar(--color-warning-default)\nvar(--color-warning-default-hover)\nvar(--color-warning-default-pressed)\nvar(--color-warning-muted)\nvar(--color-warning-inverse)\n\n/** Success */\nvar(--color-success-default)\nvar(--color-success-default-hover)\nvar(--color-success-default-pressed)\nvar(--color-success-muted)\nvar(--color-success-inverse)\n\n/** Info */\nvar(--color-info-default)\nvar(--color-info-muted)\nvar(--color-info-inverse)\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h3,{id:"component-colors-tier-3",children:[(0,jsx_runtime.jsx)(_components.strong,{children:"Component colors"})," (tier 3)"]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"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."}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-scss",children:".button {\n  --color-background-primary: var(--color-primary-default);\n  --color-text-primary: var(--color-primary-inverse);\n  --color-border-primary: var(--color-primary-default);\n\n  --color-background-primary-hover: var(--color-primary-default-hover);\n  --color-border-primary-hover: var(--color-primary-default-hover);\n\n  .btn-primary {\n    background-color: var(--color-background-primary);\n    color: var(--color-text-primary);\n    border: 1px solid var(--color-border-primary);\n\n    &:hover {\n      background-color: var(--color-background-primary-hover);\n      border: 1px solid var(--color-border-primary-hover);\n    }\n\n    /** btn-primary css continued... */\n  }\n}\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"takeaways",children:"Takeaways"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsxs)(_components.li,{children:["Do not use static HEX values in your code. Use the ",(0,jsx_runtime.jsx)(_components.a,{href:"#theme-colors-tier-2",children:"theme colors"}),". If one does not exist for your use case ask the designer or ",(0,jsx_runtime.jsx)(_components.a,{href:"https://github.com/MetaMask/metamask-extension/issues/new",target:"_blank",rel:"nofollow noopener noreferrer",children:"create an issue"})," and tag it with a ",(0,jsx_runtime.jsx)(_components.code,{children:"design-system"})," label."]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:["Make sure the design token you are using is for it's intended purpose. Please refer to the description of each token in ",(0,jsx_runtime.jsx)(_components.a,{href:"https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554",target:"_blank",rel:"nofollow noopener noreferrer",children:"@metamask/design-tokens"}),"."]}),"\n"]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"-dont-do-this",children:"❌ Don't do this"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Don't use static hex values or brand color tokens in your code."}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-css",children:"/**\n* Don't do this\n* Static hex values create inconsistency and will break UI when using dark mode\n**/\n.card {\n  background-color: #ffffff;\n  color: #24272a;\n}\n\n/**\n* Don't do this\n* Not theme compatible and will break UI when using dark theme\n**/\n.card {\n  background-color: var(--brand-colors-white);\n  color: var(--brand-colors-grey-grey800);\n}\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"-do-this",children:"✅ Do this"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Do use component tiered and ",(0,jsx_runtime.jsx)(_components.a,{href:"#theme-colors-tier-2",children:"theme colors"})," in your styles and code"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-css",children:".card {\n  --color-background: var(--color-background-default);\n  --color-text: var(--color-text-default);\n\n  background-color: var(--color-background);\n  color: var(--color-text);\n}\n"})}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"references",children:"References"}),"\n",(0,jsx_runtime.jsxs)(_components.ul,{children:["\n",(0,jsx_runtime.jsx)(_components.li,{children:(0,jsx_runtime.jsx)(_components.a,{href:"https://github.com/MetaMask/design-tokens",target:"_blank",rel:"nofollow noopener noreferrer",children:"@metamask/design-tokens"})}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma brand colors library"})," (internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/Light-Theme-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma theme colors library"})," (internal use only)"]}),"\n",(0,jsx_runtime.jsxs)(_components.li,{children:[(0,jsx_runtime.jsx)(_components.a,{href:"https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/Dark-Theme-Colors?node-id=0%3A1",target:"_blank",rel:"nofollow noopener noreferrer",children:"Figma dark theme colors library"})," (internal use only)"]}),"\n"]})]})}function MDXContent(props={}){let{wrapper:MDXLayout}=Object.assign({},(0,lib.RP)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}let __page=()=>{throw Error("Docs-only story")};__page.parameters={docsOnly:!0};let componentMeta={title:"Foundations / Color",tags:["stories-mdx"],includeStories:["__page"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:MDXContent};let _3_COLORS_stories=componentMeta,__namedExportsOrder=["__page"]},"./node_modules/react/cjs/react-jsx-runtime.production.min.js":(__unused_webpack_module,exports,__webpack_require__)=>{/** @license React v16.14.0
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var f=__webpack_require__("./node_modules/react/index.js"),g=60103;if(exports.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element"),exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,k){var b,d={},e=null,l=null;for(b in void 0!==k&&(e=""+k),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(l=a.ref),a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
//# sourceMappingURL=3-COLORS-stories-mdx.2465cec6.iframe.bundle.js.map