From b2425ce5b0307fb6187cabe1787c3f3f7f680517 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Wed, 17 Jan 2024 08:51:13 -0800 Subject: [PATCH 01/15] refactor: updating deprecated storybook components --- docs/ThemeColors.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx index a946c3c1..d8e7c096 100644 --- a/docs/ThemeColors.stories.tsx +++ b/docs/ThemeColors.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import { ColorSwatchGroup } from './components'; import README from './ThemeColors.mdx'; @@ -14,9 +14,9 @@ export default { page: README, }, }, -} as ComponentMeta; +} as Meta; -const Template: ComponentStory = (args) => { +const Template: StoryFn = (args) => { return ( <> From cbfbc85d273b13d0ee667c5a678ae944c5bb6b05 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 19 Jan 2024 16:43:01 -0800 Subject: [PATCH 02/15] Upgrading storybook from 7.5 to 7.6.10 --- package.json | 17 +- yarn.lock | 605 +++++++++++++++++++++++++-------------------------- 2 files changed, 309 insertions(+), 313 deletions(-) diff --git a/package.json b/package.json index dda60698..6eff3371 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "test": "jest", "test:watch": "jest --watch" }, - "dependencies": {}, "devDependencies": { "@babel/core": "^7.17.0", "@babel/preset-env": "^7.23.2", @@ -47,14 +46,14 @@ "@metamask/eslint-config-jest": "^9.0.0", "@metamask/eslint-config-nodejs": "^9.0.0", "@metamask/eslint-config-typescript": "^9.0.1", - "@storybook/addon-a11y": "^7.5.0", - "@storybook/addon-actions": "^7.5.0", - "@storybook/addon-essentials": "^7.5.0", - "@storybook/addon-links": "^7.5.0", - "@storybook/addon-mdx-gfm": "^7.5.0", + "@storybook/addon-a11y": "^7.6.10", + "@storybook/addon-actions": "^7.6.10", + "@storybook/addon-essentials": "^7.6.10", + "@storybook/addon-links": "^7.6.10", + "@storybook/addon-mdx-gfm": "^7.6.10", "@storybook/preset-scss": "^1.0.3", - "@storybook/react": "^7.5.0", - "@storybook/react-webpack5": "^7.5.0", + "@storybook/react": "^7.6.10", + "@storybook/react-webpack5": "^7.6.10", "@types/jest": "^26.0.13", "@typescript-eslint/eslint-plugin": "^4.21.0", "@typescript-eslint/parser": "^4.21.0", @@ -78,7 +77,7 @@ "rimraf": "^3.0.2", "sass": "^1.54.3", "sass-loader": "10.1.1", - "storybook": "^7.5.0", + "storybook": "^7.6.10", "style-loader": "2.0.0", "ts-jest": "^26.3.0", "typescript": "^4.2.4", diff --git a/yarn.lock b/yarn.lock index 69f2edee..26526f28 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2020,158 +2020,158 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@storybook/addon-a11y@^7.5.0": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-7.6.4.tgz#bee12968995a5c0a196906aaaf100369876c5534" - integrity sha512-NwROJMes3D1WVPSmASVnHtDCIFQCF3DoPJEpzpnUYFxCR2IQzqPSlf9jptRkot6XjL5XwVX5mV2KxC2lKA1cfg== +"@storybook/addon-a11y@^7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-7.6.10.tgz#ad2a266d52c0b9909f221133ea41b9ffb0e7d9f7" + integrity sha512-TP17m4TAWLSSd2x9cWNg7d0MCZZCojYIG83RZMXAb55jt8gKJBMDbupOoDLydBsABQa5Uk9ZP0D/CvumMon8RA== dependencies: - "@storybook/addon-highlight" "7.6.4" + "@storybook/addon-highlight" "7.6.10" axe-core "^4.2.0" -"@storybook/addon-actions@7.6.4", "@storybook/addon-actions@^7.5.0": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.6.4.tgz#b2d2941baa926718f0c53581c8cc8b19c2e0393b" - integrity sha512-91UD5KPDik74VKVioPMcbwwvDXN/non8p1wArYAHCHCmd/Pts5MJRiFueSdfomSpNjUtjtn6eSXtwpIL3XVOfQ== +"@storybook/addon-actions@7.6.10", "@storybook/addon-actions@^7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.6.10.tgz#5b43534e158797114db032f4ad8505a81809ed00" + integrity sha512-pcKmf0H/caGzKDy8cz1adNSjv+KOBWLJ11RzGExrWm+Ad5ACifwlsQPykJ3TQ/21sTd9IXVrE9uuq4LldEnPbg== dependencies: - "@storybook/core-events" "7.6.4" + "@storybook/core-events" "7.6.10" "@storybook/global" "^5.0.0" "@types/uuid" "^9.0.1" dequal "^2.0.2" polished "^4.2.2" uuid "^9.0.0" -"@storybook/addon-backgrounds@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.4.tgz#8ba49f4ad88327f606edb1f08fb0aef4e8eb3f05" - integrity sha512-gNy3kIkHSr+Lg/jVDHwbZjIe1po5SDGZNVe39vrJwnqGz8T1clWes9WHCL6zk/uaCDA3yUna2Nt/KlOFAWDSoQ== +"@storybook/addon-backgrounds@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.10.tgz#4ecfc017befd400e5eabad347ab1819c2ea67a8c" + integrity sha512-kGzsN1QkfyI8Cz7TErEx9OCB3PMzpCFGLd/iy7FreXwbMbeAQ3/9fYgKUsNOYgOhuTz7S09koZUWjS/WJuZGFA== dependencies: "@storybook/global" "^5.0.0" memoizerific "^1.11.3" ts-dedent "^2.0.0" -"@storybook/addon-controls@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-7.6.4.tgz#8f8651a1e929f5f8506d025bcc5c3e454444b1c3" - integrity sha512-k4AtZfazmD/nL3JAtLGAB7raPhkhUo0jWnaZWrahd9h1Fm13mBU/RW+JzTRhCw3Mp2HPERD7NI5Qcd2fUP6WDA== +"@storybook/addon-controls@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-7.6.10.tgz#6cd309440bf2b86c21f11a8b5f20bc1340d6c045" + integrity sha512-LjwCQRMWq1apLtFwDi6U8MI6ITUr+KhxJucZ60tfc58RgB2v8ayozyDAonFEONsx9YSR1dNIJ2Z/e2rWTBJeYA== dependencies: - "@storybook/blocks" "7.6.4" + "@storybook/blocks" "7.6.10" lodash "^4.17.21" ts-dedent "^2.0.0" -"@storybook/addon-docs@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.6.4.tgz#e15ab003482d5c43da43edae8557ac6e0988017e" - integrity sha512-PbFMbvC9sK3sGdMhwmagXs9TqopTp9FySji+L8O7W9SHRC6wSmdwoWWPWybkOYxr/z/wXi7EM0azSAX7yQxLbw== +"@storybook/addon-docs@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.6.10.tgz#aab69f253a9cfbb57fd84062f00fac08f9c796cd" + integrity sha512-GtyQ9bMx1AOOtl6ZS9vwK104HFRK+tqzxddRRxhXkpyeKu3olm9aMgXp35atE/3fJSqyyDm2vFtxxH8mzBA20A== dependencies: "@jest/transform" "^29.3.1" "@mdx-js/react" "^2.1.5" - "@storybook/blocks" "7.6.4" - "@storybook/client-logger" "7.6.4" - "@storybook/components" "7.6.4" - "@storybook/csf-plugin" "7.6.4" - "@storybook/csf-tools" "7.6.4" + "@storybook/blocks" "7.6.10" + "@storybook/client-logger" "7.6.10" + "@storybook/components" "7.6.10" + "@storybook/csf-plugin" "7.6.10" + "@storybook/csf-tools" "7.6.10" "@storybook/global" "^5.0.0" "@storybook/mdx2-csf" "^1.0.0" - "@storybook/node-logger" "7.6.4" - "@storybook/postinstall" "7.6.4" - "@storybook/preview-api" "7.6.4" - "@storybook/react-dom-shim" "7.6.4" - "@storybook/theming" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/node-logger" "7.6.10" + "@storybook/postinstall" "7.6.10" + "@storybook/preview-api" "7.6.10" + "@storybook/react-dom-shim" "7.6.10" + "@storybook/theming" "7.6.10" + "@storybook/types" "7.6.10" fs-extra "^11.1.0" remark-external-links "^8.0.0" remark-slug "^6.0.0" ts-dedent "^2.0.0" -"@storybook/addon-essentials@^7.5.0": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-7.6.4.tgz#9ae4fa2836a603cccaf6065ae0ca81d7fb5f7139" - integrity sha512-J+zPmP4pbuuFxQ3pjLRYQRnxEtp7jF3xRXGFO8brVnEqtqoxwJ6j3euUrRLe0rpGAU3AD7dYfaaFjd3xkENgTw== - dependencies: - "@storybook/addon-actions" "7.6.4" - "@storybook/addon-backgrounds" "7.6.4" - "@storybook/addon-controls" "7.6.4" - "@storybook/addon-docs" "7.6.4" - "@storybook/addon-highlight" "7.6.4" - "@storybook/addon-measure" "7.6.4" - "@storybook/addon-outline" "7.6.4" - "@storybook/addon-toolbars" "7.6.4" - "@storybook/addon-viewport" "7.6.4" - "@storybook/core-common" "7.6.4" - "@storybook/manager-api" "7.6.4" - "@storybook/node-logger" "7.6.4" - "@storybook/preview-api" "7.6.4" +"@storybook/addon-essentials@^7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-7.6.10.tgz#9078abe56b15d976e3d4c15247c748b2e8e53c30" + integrity sha512-cjbuCCK/3dtUity0Uqi5LwbkgfxqCCE5x5mXZIk9lTMeDz5vB9q6M5nzncVDy8F8przF3NbDLLgxKlt8wjiICg== + dependencies: + "@storybook/addon-actions" "7.6.10" + "@storybook/addon-backgrounds" "7.6.10" + "@storybook/addon-controls" "7.6.10" + "@storybook/addon-docs" "7.6.10" + "@storybook/addon-highlight" "7.6.10" + "@storybook/addon-measure" "7.6.10" + "@storybook/addon-outline" "7.6.10" + "@storybook/addon-toolbars" "7.6.10" + "@storybook/addon-viewport" "7.6.10" + "@storybook/core-common" "7.6.10" + "@storybook/manager-api" "7.6.10" + "@storybook/node-logger" "7.6.10" + "@storybook/preview-api" "7.6.10" ts-dedent "^2.0.0" -"@storybook/addon-highlight@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-7.6.4.tgz#0d71de9b081fd7d2fa0d7003a19b47002be1e4f3" - integrity sha512-0kvjDzquoPwWWU61QYmEtcSGWXufnV7Z/bfBTYh132uxvV/X9YzDFcXXrxGL7sBJkK32gNUUBDuiTOxs5NxyOQ== +"@storybook/addon-highlight@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-7.6.10.tgz#19cad3d67655e9b9eef3d2f6760789fc29ba0790" + integrity sha512-dIuS5QmoT1R+gFOcf6CoBa6D9UR5/wHCfPqPRH8dNNcCLtIGSHWQ4v964mS5OCq1Huj7CghmR15lOUk7SaYwUA== dependencies: "@storybook/global" "^5.0.0" -"@storybook/addon-links@^7.5.0": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.6.4.tgz#e484cd67d26c4877e3dd77b2211fc3d02875e3c1" - integrity sha512-TEhxYdMhJO28gD84ej1FCwLv9oLuCPt77bRXip9ndaNPRTdHYdWv6IP94dhbuDi8eHux7Z4A/mllciFuDFrnCw== +"@storybook/addon-links@^7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.6.10.tgz#e437d35b360ac9a33ee6078d901417a73f916629" + integrity sha512-s/WkSYHpr2pb9p57j6u/xDBg3TKJhBq55YMl0GB5gXgkRPIeuGbPhGJhm2yTGVFLvXgr/aHHnOxb/R/W8PiRhA== dependencies: "@storybook/csf" "^0.1.2" "@storybook/global" "^5.0.0" ts-dedent "^2.0.0" -"@storybook/addon-mdx-gfm@^7.5.0": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-mdx-gfm/-/addon-mdx-gfm-7.6.4.tgz#01a1d03440611b94fcdc816abed26516a670b89f" - integrity sha512-LI9AgonyV0qIuQLugiDUgFOX0WGfDynN0bkpza/i2CwwmcDxzgI/PptBqRvDzWtlQyQ+1o7q7CNywqtMdADptA== +"@storybook/addon-mdx-gfm@^7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-mdx-gfm/-/addon-mdx-gfm-7.6.10.tgz#6b71b6d3f8739315b3294564e7e308b7dd3e465f" + integrity sha512-gA1kQZJ4ZKOpi9afu7WRC1twCwZR0J1Nd7u47kNq+5coW1GH9uqGDFYHzr4mfKdD1J09/OrmfMnVjCPx9MYDtQ== dependencies: - "@storybook/node-logger" "7.6.4" + "@storybook/node-logger" "7.6.10" remark-gfm "^3.0.1" ts-dedent "^2.0.0" -"@storybook/addon-measure@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-7.6.4.tgz#0597ae04a27ff596bc8f2015f7c746b33eef78a3" - integrity sha512-73wsJ8PALsgWniR3MA/cmxcFuU6cRruWdIyYzOMgM8ife2Jm3xSkV7cTTXAqXt2H9Uuki4PGnuMHWWFLpPeyVA== +"@storybook/addon-measure@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-7.6.10.tgz#5e41d64aa6e02b9c6df1696d918058979598250e" + integrity sha512-OVfTI56+kc4hLWfZ/YPV3WKj/aA9e4iKXYxZyPdhfX4Z8TgZdD1wv9Z6e8DKS0H5kuybYrHKHaID5ki6t7qz3w== dependencies: "@storybook/global" "^5.0.0" tiny-invariant "^1.3.1" -"@storybook/addon-outline@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-7.6.4.tgz#1c62a4c5e97f277ded888e3157d5948618ec98fb" - integrity sha512-CFxGASRse/qeFocetDKFNeWZ3Aa2wapVtRciDNa4Zx7k1wCnTjEsPIm54waOuCaNVcrvO+nJUAZG5WyiorQvcg== +"@storybook/addon-outline@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-7.6.10.tgz#02b51084cc1d555c270995cebfe512924df0ce7e" + integrity sha512-RVJrEoPArhI6zAIMNl1Gz0zrj84BTfEWYYz0yDWOTVgvN411ugsoIk1hw0671MOneXJ2RcQ9MFIeV/v6AVDQYg== dependencies: "@storybook/global" "^5.0.0" ts-dedent "^2.0.0" -"@storybook/addon-toolbars@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-7.6.4.tgz#de76577d20db8a0e63c567d9cbfad7de15ca0f56" - integrity sha512-ENMQJgU4sRCLLDVXYfa+P3cQVV9PC0ZxwVAKeM3NPYPNH/ODoryGNtq+Q68LwHlM4ObCE2oc9MzaQqPxloFcCw== +"@storybook/addon-toolbars@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-7.6.10.tgz#4d841e87acca5455a8339a29c1062612ccb07df6" + integrity sha512-PaXY/oj9yxF7/H0CNdQKcioincyCkfeHpISZriZbZqhyqsjn3vca7RFEmsB88Q+ou6rMeqyA9st+6e2cx/Ct6A== -"@storybook/addon-viewport@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.6.4.tgz#f39601082f48a903c47cae71a84b05428ea20331" - integrity sha512-SoTcHIoqybhYD28v7QExF1EZnl7FfxuP74VDhtze5LyMd2CbqmVnUfwewLCz/3IvCNce0GqdNyg1m6QJ7Eq1uw== +"@storybook/addon-viewport@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.6.10.tgz#834bad76a56e4117ffb2dc935d349dca3b49bcc3" + integrity sha512-+bA6juC/lH4vEhk+w0rXakaG8JgLG4MOYrIudk5vJKQaC6X58LIM9N4kzIS2KSExRhkExXBPrWsnMfCo7uxmKg== dependencies: memoizerific "^1.11.3" -"@storybook/blocks@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.6.4.tgz#f5d0de020b886e0fd17021608df5b73e5e39ae69" - integrity sha512-iXinXXhTUBtReREP1Jifpu35DnGg7FidehjvCM8sM4E4aymfb8czdg9DdvG46T2UFUPUct36nnjIdMLWOya8Bw== +"@storybook/blocks@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.6.10.tgz#353a5efa6a922a9a3766254f9f24cc2adad34f83" + integrity sha512-oSIukGC3yuF8pojABC/HLu5tv2axZvf60TaUs8eDg7+NiiKhzYSPoMQxs5uMrKngl+EJDB92ESgWT9vvsfvIPg== dependencies: - "@storybook/channels" "7.6.4" - "@storybook/client-logger" "7.6.4" - "@storybook/components" "7.6.4" - "@storybook/core-events" "7.6.4" + "@storybook/channels" "7.6.10" + "@storybook/client-logger" "7.6.10" + "@storybook/components" "7.6.10" + "@storybook/core-events" "7.6.10" "@storybook/csf" "^0.1.2" - "@storybook/docs-tools" "7.6.4" + "@storybook/docs-tools" "7.6.10" "@storybook/global" "^5.0.0" - "@storybook/manager-api" "7.6.4" - "@storybook/preview-api" "7.6.4" - "@storybook/theming" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/manager-api" "7.6.10" + "@storybook/preview-api" "7.6.10" + "@storybook/theming" "7.6.10" + "@storybook/types" "7.6.10" "@types/lodash" "^4.14.167" color-convert "^2.0.1" dequal "^2.0.2" @@ -2185,15 +2185,15 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/builder-manager@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-7.6.4.tgz#64d4745f918bf370924b767cc3a767818fa45a47" - integrity sha512-k5+D3fXw7LdMOWd5tF7cIq8L3irrdW6/vmcEHLaJj1EXZ+DvsNCH9xSsLS+6zfrUcxug4oSfRqvF87w6Oz3DtA== +"@storybook/builder-manager@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-7.6.10.tgz#fc30b19dd74e6f6ae896d8f4045552c3206c25f9" + integrity sha512-f+YrjZwohGzvfDtH8BHzqM3xW0p4vjjg9u7uzRorqUiNIAAKHpfNrZ/WvwPlPYmrpAHt4xX/nXRJae4rFSygPw== dependencies: "@fal-works/esbuild-plugin-global-externals" "^2.1.2" - "@storybook/core-common" "7.6.4" - "@storybook/manager" "7.6.4" - "@storybook/node-logger" "7.6.4" + "@storybook/core-common" "7.6.10" + "@storybook/manager" "7.6.10" + "@storybook/node-logger" "7.6.10" "@types/ejs" "^3.1.1" "@types/find-cache-dir" "^3.2.1" "@yarnpkg/esbuild-plugin-pnp" "^3.0.0-rc.10" @@ -2207,26 +2207,27 @@ process "^0.11.10" util "^0.12.4" -"@storybook/builder-webpack5@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-7.6.4.tgz#9ad8cd4811fe1b82d2244d705acf61f613d53206" - integrity sha512-J5wzPn/rsowlur5A7W9pAfN3a5fMapOoHaZsDKUklGRud/JUeabAIVdL1P/eX+yE3xaJk9auYivEWbglSx2Kpg== +"@storybook/builder-webpack5@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-7.6.10.tgz#9cd8ae541e836c089e17e5f8d527b9cad6d4d99f" + integrity sha512-ja47rdy75tAs37T+JLSqgUGJiba+74zM/8IpEZAzgJmGxLetnHuCWEDskZWh3NXemxYS2uCvsg5rNc+dL9z4RA== dependencies: "@babel/core" "^7.23.2" - "@storybook/channels" "7.6.4" - "@storybook/client-logger" "7.6.4" - "@storybook/core-common" "7.6.4" - "@storybook/core-events" "7.6.4" - "@storybook/core-webpack" "7.6.4" - "@storybook/node-logger" "7.6.4" - "@storybook/preview" "7.6.4" - "@storybook/preview-api" "7.6.4" + "@storybook/channels" "7.6.10" + "@storybook/client-logger" "7.6.10" + "@storybook/core-common" "7.6.10" + "@storybook/core-events" "7.6.10" + "@storybook/core-webpack" "7.6.10" + "@storybook/node-logger" "7.6.10" + "@storybook/preview" "7.6.10" + "@storybook/preview-api" "7.6.10" "@swc/core" "^1.3.82" "@types/node" "^18.0.0" "@types/semver" "^7.3.4" babel-loader "^9.0.0" browser-assert "^1.2.1" case-sensitive-paths-webpack-plugin "^2.4.0" + cjs-module-lexer "^1.2.3" constants-browserify "^1.0.0" css-loader "^6.7.1" es-module-lexer "^1.4.1" @@ -2250,35 +2251,35 @@ webpack-hot-middleware "^2.25.1" webpack-virtual-modules "^0.5.0" -"@storybook/channels@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.6.4.tgz#d0af47f1f049c3ad77bcdefec54253f56b3b0a47" - integrity sha512-Z4PY09/Czl70ap4ObmZ4bgin+EQhPaA3HdrEDNwpnH7A9ttfEO5u5KThytIjMq6kApCCihmEPDaYltoVrfYJJA== +"@storybook/channels@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.6.10.tgz#04fd2c2f0b530bb8d236f5763e8df8cb5fa7c921" + integrity sha512-ITCLhFuDBKgxetuKnWwYqMUWlU7zsfH3gEKZltTb+9/2OAWR7ez0iqU7H6bXP1ridm0DCKkt2UMWj2mmr9iQqg== dependencies: - "@storybook/client-logger" "7.6.4" - "@storybook/core-events" "7.6.4" + "@storybook/client-logger" "7.6.10" + "@storybook/core-events" "7.6.10" "@storybook/global" "^5.0.0" qs "^6.10.0" telejson "^7.2.0" tiny-invariant "^1.3.1" -"@storybook/cli@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.6.4.tgz#3680233a32975a400c091341f8b6ae4cdb01c72f" - integrity sha512-GqvaFdkkBMJOdnrVe82XY0V3b+qFMhRNyVoTv2nqB87iMUXZHqh4Pu4LqwaJBsBpuNregvCvVOPe9LGgoOzy4A== +"@storybook/cli@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.6.10.tgz#2436276c5404b166a9f795fef44bbd75826d9bfe" + integrity sha512-pK1MEseMm73OMO2OVoSz79QWX8ymxgIGM8IeZTCo9gImiVRChMNDFYcv8yPWkjuyesY8c15CoO48aR7pdA1OjQ== dependencies: "@babel/core" "^7.23.2" "@babel/preset-env" "^7.23.2" "@babel/types" "^7.23.0" "@ndelangen/get-tarball" "^3.0.7" - "@storybook/codemod" "7.6.4" - "@storybook/core-common" "7.6.4" - "@storybook/core-events" "7.6.4" - "@storybook/core-server" "7.6.4" - "@storybook/csf-tools" "7.6.4" - "@storybook/node-logger" "7.6.4" - "@storybook/telemetry" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/codemod" "7.6.10" + "@storybook/core-common" "7.6.10" + "@storybook/core-events" "7.6.10" + "@storybook/core-server" "7.6.10" + "@storybook/csf-tools" "7.6.10" + "@storybook/node-logger" "7.6.10" + "@storybook/telemetry" "7.6.10" + "@storybook/types" "7.6.10" "@types/semver" "^7.3.4" "@yarnpkg/fslib" "2.10.3" "@yarnpkg/libzip" "2.3.0" @@ -2303,31 +2304,30 @@ puppeteer-core "^2.1.1" read-pkg-up "^7.0.1" semver "^7.3.7" - simple-update-notifier "^2.0.0" strip-json-comments "^3.0.1" tempy "^1.0.1" ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-logger@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.6.4.tgz#7533f5194903f554c297b0d327efee04c5accfbb" - integrity sha512-vJwMShC98tcoFruRVQ4FphmFqvAZX1FqZqjFyk6IxtFumPKTVSnXJjlU1SnUIkSK2x97rgdUMqkdI+wAv/tugQ== +"@storybook/client-logger@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.6.10.tgz#5d66feb18a21836f84b63f71cf5b3a85d669f049" + integrity sha512-U7bbpu21ntgePMz/mKM18qvCSWCUGCUlYru8mgVlXLCKqFqfTeP887+CsPEQf29aoE3cLgDrxqbRJ1wxX9kL9A== dependencies: "@storybook/global" "^5.0.0" -"@storybook/codemod@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.6.4.tgz#e3a314ad07f9dc799bd2531bb7ffc6ab3cf15996" - integrity sha512-q4rZVOfozxzbDRH/LzuFDoIGBdXs+orAm18fi6iAx8PeMHe8J/MOXKccNV1zdkm/h7mTQowuRo45KwJHw8vX+g== +"@storybook/codemod@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.6.10.tgz#21cc0e69df6f57d567fc27264310f820662d62fa" + integrity sha512-pzFR0nocBb94vN9QCJLC3C3dP734ZigqyPmd0ZCDj9Xce2ytfHK3v1lKB6TZWzKAZT8zztauECYxrbo4LVuagw== dependencies: "@babel/core" "^7.23.2" "@babel/preset-env" "^7.23.2" "@babel/types" "^7.23.0" "@storybook/csf" "^0.1.2" - "@storybook/csf-tools" "7.6.4" - "@storybook/node-logger" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/csf-tools" "7.6.10" + "@storybook/node-logger" "7.6.10" + "@storybook/types" "7.6.10" "@types/cross-spawn" "^6.0.2" cross-spawn "^7.0.3" globby "^11.0.2" @@ -2336,38 +2336,38 @@ prettier "^2.8.0" recast "^0.23.1" -"@storybook/components@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.6.4.tgz#44cf5fa1b52af540157b4dee7d23a46817329ab1" - integrity sha512-K5RvEObJAnX+SbGJbkM1qrZEk+VR2cUhRCSrFnlfMwsn8/60T3qoH7U8bCXf8krDgbquhMwqev5WzDB+T1VV8g== +"@storybook/components@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.6.10.tgz#2d1b8c66c374327663b91f65db3b1be5749a1a6b" + integrity sha512-H5hF8pxwtbt0LxV24KMMsPlbYG9Oiui3ObvAQkvGu6q62EYxRPeNSrq3GBI5XEbI33OJY9bT24cVaZx18dXqwQ== dependencies: "@radix-ui/react-select" "^1.2.2" "@radix-ui/react-toolbar" "^1.0.4" - "@storybook/client-logger" "7.6.4" + "@storybook/client-logger" "7.6.10" "@storybook/csf" "^0.1.2" "@storybook/global" "^5.0.0" - "@storybook/theming" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/theming" "7.6.10" + "@storybook/types" "7.6.10" memoizerific "^1.11.3" use-resize-observer "^9.1.0" util-deprecate "^1.0.2" -"@storybook/core-client@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.6.4.tgz#d38ddb80bbc6119017a8ba15b88c030cf03d27e0" - integrity sha512-0msqdGd+VYD1dRgAJ2StTu4d543Wveb7LVVujX3PwD/QCxmCaVUHuAoZrekM/H7jZLw546ZIbLZo0xWrADAUMw== +"@storybook/core-client@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.6.10.tgz#cd427d7017c1f32b2e956b4eb8ea89f3424b60c9" + integrity sha512-DjnzSzSNDmZyxyg6TxugzWQwOsW+n/iWVv6sHNEvEd5STr0mjuJjIEELmv58LIr5Lsre5+LEddqHsyuLyt8ubg== dependencies: - "@storybook/client-logger" "7.6.4" - "@storybook/preview-api" "7.6.4" + "@storybook/client-logger" "7.6.10" + "@storybook/preview-api" "7.6.10" -"@storybook/core-common@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-7.6.4.tgz#8ee282058ea4dd8fc0a053c30759f4bf65dab86b" - integrity sha512-qes4+mXqINu0kCgSMFjk++GZokmYjb71esId0zyJsk0pcIPkAiEjnhbSEQkMhbUfcvO1lztoaQTBW2P7Rd1tag== +"@storybook/core-common@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-7.6.10.tgz#00b73761eb3c4452105a7d79b5179237a6f01b32" + integrity sha512-K3YWqjCKMnpvYsWNjOciwTH6zWbuuZzmOiipziZaVJ+sB1XYmH52Y3WGEm07TZI8AYK9DRgwA13dR/7W0nw72Q== dependencies: - "@storybook/core-events" "7.6.4" - "@storybook/node-logger" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/core-events" "7.6.10" + "@storybook/node-logger" "7.6.10" + "@storybook/types" "7.6.10" "@types/find-cache-dir" "^3.2.1" "@types/node" "^18.0.0" "@types/node-fetch" "^2.6.4" @@ -2389,33 +2389,33 @@ resolve-from "^5.0.0" ts-dedent "^2.0.0" -"@storybook/core-events@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.6.4.tgz#55405545dbc9ae5715654d2198ee1f1a3cc34ef7" - integrity sha512-i3xzcJ19ILSy4oJL5Dz9y0IlyApynn5RsGhAMIsW+mcfri+hGfeakq1stNCo0o7jW4Y3A7oluFTtIoK8DOxQdQ== +"@storybook/core-events@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.6.10.tgz#d521cbdadebfa56caaa8815a1e132694a20f05e9" + integrity sha512-yccDH67KoROrdZbRKwxgTswFMAco5nlCyxszCDASCLygGSV2Q2e+YuywrhchQl3U6joiWi3Ps1qWu56NeNafag== dependencies: ts-dedent "^2.0.0" -"@storybook/core-server@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.6.4.tgz#7732be1437af2affb3d7b0c5528446006a4c72a3" - integrity sha512-mXxZMpCwOhjEPPRjqrTHdiCpFdkc47f46vlgTj02SX+9xKHxslmZ2D3JG/8O4Ab9tG+bBl6lBm3RIrIzaiCu9Q== +"@storybook/core-server@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.6.10.tgz#53bf43b8b3c999c87196774a0b92e2e10a434e4c" + integrity sha512-2icnqJkn3vwq0eJPP0rNaHd7IOvxYf5q4lSVl2AWTxo/Ae19KhokI6j/2vvS2XQJMGQszwshlIwrZUNsj5p0yw== dependencies: "@aw-web-design/x-default-browser" "1.4.126" "@discoveryjs/json-ext" "^0.5.3" - "@storybook/builder-manager" "7.6.4" - "@storybook/channels" "7.6.4" - "@storybook/core-common" "7.6.4" - "@storybook/core-events" "7.6.4" + "@storybook/builder-manager" "7.6.10" + "@storybook/channels" "7.6.10" + "@storybook/core-common" "7.6.10" + "@storybook/core-events" "7.6.10" "@storybook/csf" "^0.1.2" - "@storybook/csf-tools" "7.6.4" + "@storybook/csf-tools" "7.6.10" "@storybook/docs-mdx" "^0.1.0" "@storybook/global" "^5.0.0" - "@storybook/manager" "7.6.4" - "@storybook/node-logger" "7.6.4" - "@storybook/preview-api" "7.6.4" - "@storybook/telemetry" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/manager" "7.6.10" + "@storybook/node-logger" "7.6.10" + "@storybook/preview-api" "7.6.10" + "@storybook/telemetry" "7.6.10" + "@storybook/types" "7.6.10" "@types/detect-port" "^1.3.0" "@types/node" "^18.0.0" "@types/pretty-hrtime" "^1.0.0" @@ -2443,36 +2443,36 @@ watchpack "^2.2.0" ws "^8.2.3" -"@storybook/core-webpack@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-7.6.4.tgz#fd9ff9eb54cfd57c6f1a3642b0605e9c80999044" - integrity sha512-+C2YddhOhO0Lp9KngzX9XYJZKzCzo4vjXA3IMXxSA7Vo7gFhaa8uQTAXnUx7xCrvFXM/iiHUY1SN+VppB0eBdA== +"@storybook/core-webpack@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-7.6.10.tgz#e4ca086973d4d10f08b5bed789f1398eb983d8b1" + integrity sha512-+GiCRp+2Hw0NO3NYRKamG/U5SyOQ8tOfRUxuAqWI7nduXwB3WWdjji3/ofjqOm/ryKesuQFtfhozaczvBJBvng== dependencies: - "@storybook/core-common" "7.6.4" - "@storybook/node-logger" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/core-common" "7.6.10" + "@storybook/node-logger" "7.6.10" + "@storybook/types" "7.6.10" "@types/node" "^18.0.0" ts-dedent "^2.0.0" -"@storybook/csf-plugin@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-7.6.4.tgz#5d18cffc1c92dfd12d8571b2ba9d1456de58d8b2" - integrity sha512-7g9p8s2ITX+Z9iThK5CehPhJOcusVN7JcUEEW+gVF5PlYT+uk/x+66gmQno+scQuNkV9+8UJD6RLFjP+zg2uCA== +"@storybook/csf-plugin@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-7.6.10.tgz#479cffe04c68a87f60589a6891a306805c758437" + integrity sha512-Sc+zZg/BnPH2X28tthNaQBnDiFfO0QmfjVoOx0fGYM9SvY3P5ehzWwp5hMRBim6a/twOTzePADtqYL+t6GMqqg== dependencies: - "@storybook/csf-tools" "7.6.4" + "@storybook/csf-tools" "7.6.10" unplugin "^1.3.1" -"@storybook/csf-tools@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-7.6.4.tgz#4c1ef7a79ecd6f96d7fc1cb092cf2ed942cd65e2" - integrity sha512-6sLayuhgReIK3/QauNj5BW4o4ZfEMJmKf+EWANPEM/xEOXXqrog6Un8sjtBuJS9N1DwyhHY6xfkEiPAwdttwqw== +"@storybook/csf-tools@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-7.6.10.tgz#320638f64e2e14cf539dd55188f676fd82789be5" + integrity sha512-TnDNAwIALcN6SA4l00Cb67G02XMOrYU38bIpFJk5VMDX2dvgPjUtJNBuLmEbybGcOt7nPyyFIHzKcY5FCVGoWA== dependencies: "@babel/generator" "^7.23.0" "@babel/parser" "^7.23.0" "@babel/traverse" "^7.23.2" "@babel/types" "^7.23.0" "@storybook/csf" "^0.1.2" - "@storybook/types" "7.6.4" + "@storybook/types" "7.6.10" fs-extra "^11.1.0" recast "^0.23.1" ts-dedent "^2.0.0" @@ -2496,14 +2496,14 @@ resolved "https://registry.yarnpkg.com/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz#33ba0e39d1461caf048b57db354b2cc410705316" integrity sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg== -"@storybook/docs-tools@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.6.4.tgz#504b8654f348a109b69cc77cdab556f0bf9c2304" - integrity sha512-2eGam43aD7O3cocA72Z63kRi7t/ziMSpst0qB218QwBWAeZjT4EYDh8V6j/Xhv6zVQL3msW7AglrQP5kCKPvPA== +"@storybook/docs-tools@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.6.10.tgz#90ce6bcf468b8d0a479fb75e9a6ff87f482095dc" + integrity sha512-UgbikducoXzqQHf2TozO0f2rshaeBNnShVbL5Ai4oW7pDymBmrfzdjGbF/milO7yxNKcoIByeoNmu384eBamgQ== dependencies: - "@storybook/core-common" "7.6.4" - "@storybook/preview-api" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/core-common" "7.6.10" + "@storybook/preview-api" "7.6.10" + "@storybook/types" "7.6.10" "@types/doctrine" "^0.0.3" assert "^2.1.0" doctrine "^3.0.0" @@ -2514,59 +2514,58 @@ resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed" integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ== -"@storybook/manager-api@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.6.4.tgz#edf5d553a78987ad8602700b7200391776010f48" - integrity sha512-RFb/iaBJfXygSgXkINPRq8dXu7AxBicTGX7MxqKXbz5FU7ANwV7abH6ONBYURkSDOH9//TQhRlVkF5u8zWg3bw== +"@storybook/manager-api@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.6.10.tgz#0c2932f42bb97de8fb25240844fcf64474fc8905" + integrity sha512-8eGVpRlpunuFScDtc7nxpPJf/4kJBAAZlNdlhmX09j8M3voX6GpcxabBamSEX5pXZqhwxQCshD4IbqBmjvadlw== dependencies: - "@storybook/channels" "7.6.4" - "@storybook/client-logger" "7.6.4" - "@storybook/core-events" "7.6.4" + "@storybook/channels" "7.6.10" + "@storybook/client-logger" "7.6.10" + "@storybook/core-events" "7.6.10" "@storybook/csf" "^0.1.2" "@storybook/global" "^5.0.0" - "@storybook/router" "7.6.4" - "@storybook/theming" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/router" "7.6.10" + "@storybook/theming" "7.6.10" + "@storybook/types" "7.6.10" dequal "^2.0.2" lodash "^4.17.21" memoizerific "^1.11.3" - semver "^7.3.7" store2 "^2.14.2" telejson "^7.2.0" ts-dedent "^2.0.0" -"@storybook/manager@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.6.4.tgz#11ea1ce8f37a069c96e594a716957f0d6c7690f3" - integrity sha512-Ug2ejfKgKre8h/RJbkumukwAA44TbvTPEjDcJmyFdAI+kHYhOYdKPEC2UNmVYz8/4HjwMTJQ3M7t/esK8HHY4A== +"@storybook/manager@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.6.10.tgz#eb1b71c802fbf04353f3bf017dfb102eb0db217e" + integrity sha512-Co3sLCbNYY6O4iH2ggmRDLCPWLj03JE5s/DOG8OVoXc6vBwTc/Qgiyrsxxp6BHQnPpM0mxL6aKAxE3UjsW/Nog== "@storybook/mdx2-csf@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz#97f6df04d0bf616991cc1005a073ac004a7281e5" integrity sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw== -"@storybook/node-logger@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-7.6.4.tgz#e471ee117bbd329522113dd98e5a42e83e259f9c" - integrity sha512-GDkEnnDj4Op+PExs8ZY/P6ox3wg453CdEIaR8PR9TxF/H/T2fBL6puzma3hN2CMam6yzfAL8U+VeIIDLQ5BZdQ== +"@storybook/node-logger@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-7.6.10.tgz#d4c52d04384d2728d6610fb0afff6eb1feb50fd4" + integrity sha512-ZBuqrv4bjJzKXyfRGFkVIi+z6ekn6rOPoQao4KmsfLNQAUUsEdR8Baw/zMnnU417zw5dSEaZdpuwx75SCQAeOA== -"@storybook/postinstall@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-7.6.4.tgz#baefcec351ac79ee711ad27b65bf1ec28e545da6" - integrity sha512-7uoB82hSzlFSdDMS3hKQD+AaeSvPit/fAMvXCBxn0/D0UGJUZcq4M9JcKBwEHkZJcbuDROgOTJ6TUeXi/FWO0w== +"@storybook/postinstall@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-7.6.10.tgz#9e81c54b1f23f71a59a6db7ee8a4d5ac40852d17" + integrity sha512-SMdXtednPCy3+SRJ7oN1OPN1oVFhj3ih+ChOEX8/kZ5J3nfmV3wLPtsZvFGUCf0KWQEP1xL+1Urv48mzMKcV/w== -"@storybook/preset-react-webpack@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/preset-react-webpack/-/preset-react-webpack-7.6.4.tgz#ea1efab0a5e973136ddcb196cbdba85afe411233" - integrity sha512-rQ3hqehGUvmbwUosNdh1jnXevaHQ9ezqc4v8YlX5TELp1oz+qhRe0gnQOdsQ98SsdjA24EHfgc331dp9F3up6Q== +"@storybook/preset-react-webpack@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/preset-react-webpack/-/preset-react-webpack-7.6.10.tgz#86b34f7156258ddf6481bffd6c638e5382d01054" + integrity sha512-fUcr4dmXJdPIQdjkhA4bE8QF8Pavr4BSLxovtTRupbWxtRjZxJrH5hf+0HZycq1cp9umO/11Lsmw9Nx5Xg3Eww== dependencies: "@babel/preset-flow" "^7.22.15" "@babel/preset-react" "^7.22.15" "@pmmmwh/react-refresh-webpack-plugin" "^0.5.11" - "@storybook/core-webpack" "7.6.4" - "@storybook/docs-tools" "7.6.4" - "@storybook/node-logger" "7.6.4" - "@storybook/react" "7.6.4" + "@storybook/core-webpack" "7.6.10" + "@storybook/docs-tools" "7.6.10" + "@storybook/node-logger" "7.6.10" + "@storybook/react" "7.6.10" "@storybook/react-docgen-typescript-plugin" "1.0.6--canary.9.0c3f3b7.0" "@types/node" "^18.0.0" "@types/semver" "^7.3.4" @@ -2583,17 +2582,17 @@ resolved "https://registry.yarnpkg.com/@storybook/preset-scss/-/preset-scss-1.0.3.tgz#8ac834545c642dada0f64f510ef08dfb882e9737" integrity sha512-o9Iz6wxPeNENrQa2mKlsDKynBfqU2uWaRP80HeWp4TkGgf7/x3DVF2O7yi9N0x/PI1qzzTTpxlQ90D62XmpiTw== -"@storybook/preview-api@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.6.4.tgz#df103fbdfada5ceee540f6ea68001c0d2c718113" - integrity sha512-KhisNdQX5NdfAln+spLU4B82d804GJQp/CnI5M1mm/taTnjvMgs/wTH9AmR89OPoq+tFZVW0vhy2zgPS3ar71A== +"@storybook/preview-api@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.6.10.tgz#b8d5a4f897745fc28f0ae75f7e0e9278b0e4a50a" + integrity sha512-5A3etoIwZCx05yuv3KSTv1wynN4SR4rrzaIs/CTBp3BC4q1RBL+Or/tClk0IJPXQMlx/4Y134GtNIBbkiDofpw== dependencies: - "@storybook/channels" "7.6.4" - "@storybook/client-logger" "7.6.4" - "@storybook/core-events" "7.6.4" + "@storybook/channels" "7.6.10" + "@storybook/client-logger" "7.6.10" + "@storybook/core-events" "7.6.10" "@storybook/csf" "^0.1.2" "@storybook/global" "^5.0.0" - "@storybook/types" "7.6.4" + "@storybook/types" "7.6.10" "@types/qs" "^6.9.5" dequal "^2.0.2" lodash "^4.17.21" @@ -2603,10 +2602,10 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/preview@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.6.4.tgz#36cca1d10fd3729f1a68789d95bfc400e33aa616" - integrity sha512-p9xIvNkgXgTpSRphOMV9KpIiNdkymH61jBg3B0XyoF6IfM1S2/mQGvC89lCVz1dMGk2SrH4g87/WcOapkU5ArA== +"@storybook/preview@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.6.10.tgz#895053c97f7e09141c6321fa42390fa8af377bef" + integrity sha512-F07BzVXTD3byq+KTWtvsw3pUu3fQbyiBNLFr2CnfU4XSdLKja5lDt8VqDQq70TayVQOf5qfUTzRd4M6pQkjw1w== "@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0": version "1.0.6--canary.9.0c3f3b7.0" @@ -2621,33 +2620,33 @@ react-docgen-typescript "^2.2.2" tslib "^2.0.0" -"@storybook/react-dom-shim@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.6.4.tgz#d1f5440c8f1ccd95abcc01117872ce46d0ab9dc3" - integrity sha512-wGJfomlDEBnowNmhmumWDu/AcUInxSoPqUUJPgk2f5oL0EW17fR9fDP/juG3XOEdieMDM0jDX48GML7lyvL2fg== +"@storybook/react-dom-shim@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.6.10.tgz#d16df5d65a51ed66df92430d8f51d50bd177f2c2" + integrity sha512-M+N/h6ximacaFdIDjMN2waNoWwApeVYTpFeoDppiFTvdBTXChyIuiPgYX9QSg7gDz92OaA52myGOot4wGvXVzg== -"@storybook/react-webpack5@^7.5.0": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/react-webpack5/-/react-webpack5-7.6.4.tgz#528b72172f3046bdcfa9934b5cfe22edf0b784f7" - integrity sha512-uUucaHG67Yu2WrHigJzMbbYg6vbehHDUC6HsORcfwdC9y/VhR47ORU6UkVQNZ/K4WLNe4HbyGGKGRUght5UtbQ== +"@storybook/react-webpack5@^7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/react-webpack5/-/react-webpack5-7.6.10.tgz#f9d3cb4abc4177d43cefcc62d497b2cbee2b5181" + integrity sha512-LWwasiSLEg4wqsMjoRHcOn6BXv2ZyZfTfQV7gCvaX732xf0teblh+/GltAz8x+BtFXruXWmZ8bJ5cd9U4I6hUg== dependencies: - "@storybook/builder-webpack5" "7.6.4" - "@storybook/preset-react-webpack" "7.6.4" - "@storybook/react" "7.6.4" + "@storybook/builder-webpack5" "7.6.10" + "@storybook/preset-react-webpack" "7.6.10" + "@storybook/react" "7.6.10" "@types/node" "^18.0.0" -"@storybook/react@7.6.4", "@storybook/react@^7.5.0": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.6.4.tgz#b17c451eb1240399d75c45ccb90a145ab1de44ac" - integrity sha512-XYRP+eylH3JqkCuziwtQGY5vOCeDreOibRYJmj5na6k4QbURjGVB44WCIW04gWVlmBXM9SqLAmserUi3HP890Q== +"@storybook/react@7.6.10", "@storybook/react@^7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.6.10.tgz#aca5c446f43de75981f19d112a8a04d7abd0a03d" + integrity sha512-wwBn1cg2uZWW4peqqBjjU7XGmFq8HdkVUtWwh6dpfgmlY1Aopi+vPgZt7pY9KkWcTOq5+DerMdSfwxukpc3ajQ== dependencies: - "@storybook/client-logger" "7.6.4" - "@storybook/core-client" "7.6.4" - "@storybook/docs-tools" "7.6.4" + "@storybook/client-logger" "7.6.10" + "@storybook/core-client" "7.6.10" + "@storybook/docs-tools" "7.6.10" "@storybook/global" "^5.0.0" - "@storybook/preview-api" "7.6.4" - "@storybook/react-dom-shim" "7.6.4" - "@storybook/types" "7.6.4" + "@storybook/preview-api" "7.6.10" + "@storybook/react-dom-shim" "7.6.10" + "@storybook/types" "7.6.10" "@types/escodegen" "^0.0.6" "@types/estree" "^0.0.51" "@types/node" "^18.0.0" @@ -2663,45 +2662,45 @@ type-fest "~2.19" util-deprecate "^1.0.2" -"@storybook/router@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.6.4.tgz#13112bd9d6709bebe4072d923e4921b660f8f00c" - integrity sha512-5MQ7Z4D7XNPN2yhFgjey7hXOYd6s8CggUqeAwhzGTex90SMCkKHSz1hfkcXn1ZqBPaall2b53uK553OvPLp9KQ== +"@storybook/router@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.6.10.tgz#b1f2c550eeb9f7146eefa33c5460e4149a62d721" + integrity sha512-G/H4Jn2+y8PDe8Zbq4DVxF/TPn0/goSItdILts39JENucHiuGBCjKjSWGBe1rkwKi1tUbB3yhxJVrLagxFEPpQ== dependencies: - "@storybook/client-logger" "7.6.4" + "@storybook/client-logger" "7.6.10" memoizerific "^1.11.3" qs "^6.10.0" -"@storybook/telemetry@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.6.4.tgz#b28e8f7abf73b4900d83dfa68a988b6f3df9c24a" - integrity sha512-Q4QpvcgloHUEqC9PGo7tgqkUH91/PjX+74/0Hi9orLo8QmLMgdYS5fweFwgSKoTwDGNg2PaHp/jqvhhw7UmnJA== +"@storybook/telemetry@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.6.10.tgz#31c0edfb9c7005cf9b5922e51ca896218e3d81ea" + integrity sha512-p3mOSUtIyy2tF1z6pQXxNh1JzYFcAm97nUgkwLzF07GfEdVAPM+ftRSLFbD93zVvLEkmLTlsTiiKaDvOY/lQWg== dependencies: - "@storybook/client-logger" "7.6.4" - "@storybook/core-common" "7.6.4" - "@storybook/csf-tools" "7.6.4" + "@storybook/client-logger" "7.6.10" + "@storybook/core-common" "7.6.10" + "@storybook/csf-tools" "7.6.10" chalk "^4.1.0" detect-package-manager "^2.0.1" fetch-retry "^5.0.2" fs-extra "^11.1.0" read-pkg-up "^7.0.1" -"@storybook/theming@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.6.4.tgz#cc81d0aee5fc80fe383cb6790e3a0e2ad80d2185" - integrity sha512-Z/dcC5EpkIXelYCkt9ojnX6D7qGOng8YHxV/OWlVE9TrEGYVGPOEfwQryR0RhmGpDha1TYESLYrsDb4A8nJ1EA== +"@storybook/theming@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.6.10.tgz#c09d66d19f5756964cc89b1f94051545fc4aaea7" + integrity sha512-f5tuy7yV3TOP3fIboSqpgLHy0wKayAw/M8HxX0jVET4Z4fWlFK0BiHJabQ+XEdAfQM97XhPFHB2IPbwsqhCEcQ== dependencies: "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" - "@storybook/client-logger" "7.6.4" + "@storybook/client-logger" "7.6.10" "@storybook/global" "^5.0.0" memoizerific "^1.11.3" -"@storybook/types@7.6.4": - version "7.6.4" - resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.6.4.tgz#3bb50b46286cc83484848c3c450c32cc2071eb21" - integrity sha512-qyiiXPCvol5uVgfubcIMzJBA0awAyFPU+TyUP1mkPYyiTHnsHYel/mKlSdPjc8a97N3SlJXHOCx41Hde4IyJgg== +"@storybook/types@7.6.10": + version "7.6.10" + resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.6.10.tgz#20cfb2dfeba2ecf54721de131276041d073fe42e" + integrity sha512-hcS2HloJblaMpCAj2axgGV+53kgSRYPT0a1PG1IHsZaYQILfHSMmBqM8XzXXYTsgf9250kz3dqFX1l0n3EqMlQ== dependencies: - "@storybook/channels" "7.6.4" + "@storybook/channels" "7.6.10" "@types/babel__core" "^7.0.0" "@types/express" "^4.7.0" file-system-cache "2.3.0" @@ -4262,6 +4261,11 @@ cjs-module-lexer@^0.6.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz#4186fcca0eae175970aee870b9fe2d6cf8d5655f" integrity sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw== +cjs-module-lexer@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107" + integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ== + class-utils@^0.3.5: version "0.3.6" resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463" @@ -10023,7 +10027,7 @@ schema-utils@^4.0.0: resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== -semver@7.x, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3: +semver@7.x, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8: version "7.5.4" resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== @@ -10156,13 +10160,6 @@ signal-exit@^4.0.1: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04" integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== -simple-update-notifier@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz#d70b92bdab7d6d90dfd73931195a30b6e3d7cebb" - integrity sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w== - dependencies: - semver "^7.5.3" - sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" @@ -10361,12 +10358,12 @@ store2@^2.14.2: resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068" integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w== -storybook@^7.5.0: - version "7.6.4" - resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.6.4.tgz#4f89d25be3990f0e057020efb0dcb3429dfa179c" - integrity sha512-nQhs9XkrroxjqMoBnnToyc6M8ndbmpkOb1qmULO4chtfMy4k0p9Un3K4TJvDaP8c3wPUFGd4ZaJ1hZNVmIl56Q== +storybook@^7.6.10: + version "7.6.10" + resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.6.10.tgz#2185d26cd7b43390e3e2c7581586e2f60cdbd9bd" + integrity sha512-ypFeGhQTUBBfqSUVZYh7wS5ghn3O2wILCiQc4459SeUpvUn+skcqw/TlrwGSoF5EWjDA7gtRrWDxO3mnlPt5Cw== dependencies: - "@storybook/cli" "7.6.4" + "@storybook/cli" "7.6.10" stream-shift@^1.0.0: version "1.0.1" From 6e74c5921c854478ec0eb117b55bb1a97f66050e Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 19 Jan 2024 16:54:07 -0800 Subject: [PATCH 03/15] fix:updating order of pages --- .storybook/preview.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 20460738..cc61b7b2 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -11,7 +11,14 @@ export const parameters = { }, options: { storySort: { - order: ['Getting Started', ['Introduction', 'Installation']], + order: [ + 'Getting Started', + ['Introduction'], + 'Colors', + 'Shadows', + 'Typography', + 'Doc Components', + ], }, }, }; From 28944fe0e0afbeac33bf2e68656498752ab6e776 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 19 Jan 2024 16:56:08 -0800 Subject: [PATCH 04/15] refactor: updating deprecated components and updating docs --- docs/BrandColors.mdx | 22 ++-- docs/BrandColors.stories.tsx | 23 ++-- docs/IntroductionColor.stories.mdx | 111 +++++++++++++++--- docs/Shadows.mdx | 28 ++--- docs/Shadows.stories.tsx | 82 +++++++------ docs/ThemeColors.mdx | 2 - docs/Typography.mdx | 2 - docs/Typography.stories.tsx | 17 +-- .../ColorSwatchGroup/ColorSwatchGroup.tsx | 1 + 9 files changed, 182 insertions(+), 106 deletions(-) diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx index 2580bb25..21f3ffe3 100644 --- a/docs/BrandColors.mdx +++ b/docs/BrandColors.mdx @@ -1,17 +1,19 @@ -import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import LinkTo from '@storybook/addon-links/react'; +import { Canvas, Meta } from '@storybook/blocks'; +import * as BrandColorStories from './BrandColors.stories'; - + -# Brand Colors (first tier) +# Brand Colors (First Tier) -Brand specific colors used in the first tier of design token abstraction. They **should not** be used in the code directly but referenced by [**Theme Colors**](/docs/colors-themecolors--light-theme-colors) used in second tier tokens. Most brand color progressions were generated using [0to255](https://0to255.com/037dd6) +The first tier of our design token abstraction consists of brand-specific colors. These colors uses literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default.They form the foundation of our design system and are essential to maintaining visual consistency across our products. - - - +While these colors are fundamental to our design system, they **should not** be used directly in most cases. The exception is when a color needs to remain the same regardless of the theme (light or dark mode). Instead, these brand colors should be referenced via [**theme colors**](/docs/colors-themecolors--light-theme-colors), which form the second tier of our design tokens. + +The majority of our brand color progressions were generated using the [0to255](https://0to255.com/037dd6) tool, which helps ensure smooth and consistent color transitions. + + ## References -- [Tool used to generate colors](http://www.0to255.com/037DD6) -- [Figma Brand Colors Library](https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1)(internal use only) +- [0to255](http://www.0to255.com/037DD6): The tool we used to generate our color progressions. +- [Figma Brand Colors Library](https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1): Our internal Figma library for brand colors. Please note that this is for internal use only. diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx index 324203f6..e6621e2c 100644 --- a/docs/BrandColors.stories.tsx +++ b/docs/BrandColors.stories.tsx @@ -1,27 +1,24 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import tokens from '../src/figma/tokens.json'; - import { ColorSwatchGroup } from './components'; - import README from './BrandColors.mdx'; -export default { +const meta: Meta = { title: 'Colors/BrandColors', + component: ColorSwatchGroup, parameters: { docs: { page: README, }, }, -} as ComponentMeta; +}; -const Template: ComponentStory = (args) => ( - -); +export default meta; -export const DefaultStory = Template.bind({}); +type Story = StoryObj; -DefaultStory.args = { - swatchData: tokens.global.brandColors, +export const DefaultStory: Story = { + render: () => , + name: 'Default', }; - -DefaultStory.storyName = 'Default'; diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index 0ebba576..cfe77836 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -7,11 +7,7 @@ import { lightTheme } from '../src/index.ts'; # Color -Color is used to express style and communicate meaning. - -## Token Tiers - -We follow a 3 tiered system for color design tokens. +Color is a powerful tool in design. It can express style, convey meaning, and establish visual hierarchy. In our design system, we manage colors through a three-tiered system of design tokens.

-### **Brand colors** (first tier) +## Token tiers -These colors **SHOULD NOT** be used in your component styles directly. They are used as a reference for the [Theme Colors](/docs/colors-themecolors--light-theme-colors). Brand colors are used to keep track of all colors used in our app. See [Brand Colors](/docs/colors-brandcolors--default-story) +### **Brand colors (first tier)** -### **Theme Colors** (second tier) +Brand colors form the foundation of our color system. However, in most cases they **SHOULD NOT** be used directly in component styles. Instead, they serve as a reference for the [Theme Colors](/docs/colors-themecolors--light-theme-colors). You can view our brand colors in the [Brand Colors](/docs/colors-brandcolors--default-story) section. -These 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. See [Theme Colors](/docs/colors-themecolors--light-theme-colors) +### **Theme colors (second tier)** -### **Component colors** (third tier) +Theme colors are semantically neutral, theme-compatible design tokens that you can use directly in your code and styles. Each token has a specific purpose, which is described in its documentation. You can view our theme colors in the [Theme Colors](/docs/colors-themecolors--light-theme-colors) section. -Another level of abstraction is component colors that you can use at a component specific level. We do not currently provide any component tier colors but that may change in future. +### **Component colors (third tier)** -## Takeaways +Component colors provide another level of abstraction for component-specific colors. We currently do not provide any component tier colors, but this may change in the future. -- Do not use static HEX values in your code. Use the [Theme Colors](/docs/colors-themecolors--light-theme-colors). If one does not exist for your use case [create an issue](https://github.com/MetaMask/design-tokens/issues/new) and tag it with a `color` label. -- Make sure the design token you are using is for it's intended purpose. Please refer to the description of each token. +## Best practices -### Next 👉 [Theme Colors](/docs/colors-themecolors--light-theme-colors) +### **Prioritize theme colors** -
+Theme colors should be your go-to choice for 99% of use cases. Using theme tokens ensures that the UI works across all themes and modes. We have built-in accessibility and functionality into the theme colors to ensure this. By using theme colors, you're leveraging these benefits and ensuring a consistent and accessible color scheme across your project. + +#### ✅ **DO**: Use theme colors in your components + +``` +background-color: theme.colors.background.default; +background-color: var(--color-background-default); +``` + +#### ❌ **DON'T**: Use static color values or brand colors in your components + +``` +background-color: #ffffff; // Static color value +background-color: brandColors.white.white000; // Brand color +background-color: var(--brand-colors-white-white000); // Brand color +``` + +### **Use brand colors for theme-independent colors** + +In the rare case where a color should remain the same regardless of the theme (for instance, if white should always be white, regardless of whether light or dark mode is active), use the corresponding brand color. However, always check first to ensure that there isn't an existing theme token that suits your needs. + +#### ✅ **DO**: Use brand colors when the color should remain the same across all themes + +``` +fill: brandColors.white.white000; +fill: var(--brand-colors-white-white000); +``` + +#### ❌ **DON'T**: Use brand colors without checking for an existing theme token first + +``` +background-color: brandColors.blue.blue500; // Brand color instead of theme.color.primary.default +background-color: var(--brand-colors-blue-blue500); // Brand color instead of var(--color-primary-default) +``` + +### **Avoid static color values** + +As a general rule, avoid applying static color values at the component level. This helps maintain consistency and makes it easier to update colors in the future. + +#### ✅ **DO**: Use theme colors in your components + +``` +background-color: theme.colors.background.default; +background-color: var(--color-background-default); +``` + +#### ❌ **DON'T**: Use static color values in your components + +```jsx +background-color: #ffffff; // Static color value +``` + +### **Centralize non-token colors** + +If you need to use colors that are not included in the design tokens, store these colors in a global file in your project. This makes it easier to keep track of these colors and update them as needed. Always consider this as a last resort, and strive to use design tokens wherever possible. + +#### ✅ **DO**: Store non-token colors in a global file + +``` +// colors.js +export const customColors = { + myCustomColor: '#abc123', +}; + +// colors.css +--custom-colors-my-custom-color: #abc123; + +// component.js +import { customColors } from './colors.js'; + +background-color: customColors.myCustomColor; +background-color: var(--custom-colors-my-custom-color); +``` + +#### ❌ **DON'T**: Use non-token colors directly in your components + +```jsx +background-color: #abc123; // Custom color not in design tokens or global file +``` + +Remember, the goal of these practices is to maintain consistency across your project, make your code easier to maintain, and ensure that your project's colors align with the overall design system and MetaMask brand 🦊 + +## Next steps + +Learn more about our [brand colors](/docs/colors-brandcolors--docs) or [theme colors](/docs/colors-themecolors--light-theme-colors) section ## References diff --git a/docs/Shadows.mdx b/docs/Shadows.mdx index 18c79533..531a007a 100644 --- a/docs/Shadows.mdx +++ b/docs/Shadows.mdx @@ -1,23 +1,19 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import LinkTo from '@storybook/addon-links/react'; +import * as ShadowStories from './Shadows.stories'; # Shadows -Shadows convey elevation of elements on a surface +Shadows in design are used to create depth and hierarchy. They can be used to differentiate between different elements, and to highlight interactive elements. - - - + ## Size -There are 4 different sizes of shadow in MetaMask. +Shadows come in four different sizes: XS, SM, MD, and LG. The size of the shadow can be used to indicate the relative importance or prominence of an element. - - - + | Size | JS | CSS | | ------ | ----------------- | ----------------------- | @@ -28,11 +24,9 @@ There are 4 different sizes of shadow in MetaMask. ## Color -As well as the neutral colors for shadow 2 other colors exist that are used for the primary and error/danger button hover states +Shadows can have three different colors: default (neutral), primary, and error/danger. The color of the shadow can be used to indicate the state or functionality of an element. - - - + | Color | JS | CSS | | ----------- | ----------------------- | ----------------------------- | @@ -40,13 +34,11 @@ As well as the neutral colors for shadow 2 other colors exist that are used for | **primary** | `colors.primary.shadow` | `var(--color-primary-shadow)` | | **danger** | `colors.error.shadow` | `var(--color-error-shadow)` | -## Example usage +## Usage -Using both size and color tokens, different shadows can be applied to components. +Shadows can be applied to various components to create depth and hierarchy. Here are some examples of how shadows can be used in different components: - - - + | Component | JS | CSS | | ------------------------ | ------------------------------------------------------------------------------- | ---------------------------------------------------------------- | diff --git a/docs/Shadows.stories.tsx b/docs/Shadows.stories.tsx index 3864828f..1d8e00c2 100644 --- a/docs/Shadows.stories.tsx +++ b/docs/Shadows.stories.tsx @@ -1,33 +1,8 @@ import React from 'react'; import { lightTheme } from '../src/js'; - import { Text } from './components'; - import README from './Shadows.mdx'; -export default { - title: 'Shadows/Shadows', - parameters: { - docs: { - page: README, - }, - }, - argTypes: { - size: { - control: 'select', - options: Object.keys(lightTheme.shadows.size), - }, - color: { - control: 'select', - options: ['default', 'primary', 'error'], - }, - }, - args: { - color: 'default', - size: 'xs', - }, -}; - interface ShadowSwatchProps { children: any; style?: object; @@ -61,8 +36,29 @@ const ShadowSwatch = ({
); -export const Shadow = (args) => { - return ( +export default { + title: 'Shadows/Shadows', + component: ShadowSwatch, + parameters: { + docs: { + page: README, + }, + }, + argTypes: { + size: { + control: 'select', + options: Object.keys(lightTheme.shadows.size), + }, + color: { + control: 'select', + options: ['default', 'primary', 'error'], + }, + }, +}; + +export const DefaultStory = { + name: 'Default', + render: (args) => (
{
- ); + ), + args: { + color: 'default', + size: 'xs', + }, }; -export const Size = (args) => { - return ( +export const Size = { + render: (args) => (
{
- ); + ), + args: { + color: 'default', + size: 'xs', + }, }; -export const Color = (args) => { - return ( +export const Color = { + render: (args) => (
{
- ); + ), + args: { + color: 'default', + size: 'xs', + }, }; -export const ExampleUsage = () => { - return ( +export const ExampleUsage = { + render: () => (
{
- ); + ), }; diff --git a/docs/ThemeColors.mdx b/docs/ThemeColors.mdx index b476ee17..a0bae9c5 100644 --- a/docs/ThemeColors.mdx +++ b/docs/ThemeColors.mdx @@ -1,7 +1,5 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import tokens from '../src/figma/tokens.json'; - # Theme Colors (second tier) diff --git a/docs/Typography.mdx b/docs/Typography.mdx index 5f9040a6..74a39f3f 100644 --- a/docs/Typography.mdx +++ b/docs/Typography.mdx @@ -1,7 +1,5 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import tokens from '../src/figma/tokens.json'; - # Typography diff --git a/docs/Typography.stories.tsx b/docs/Typography.stories.tsx index 433842e3..f57fd7ef 100644 --- a/docs/Typography.stories.tsx +++ b/docs/Typography.stories.tsx @@ -1,4 +1,5 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import React from 'react'; +import { StoryFn, Meta } from '@storybook/react'; import { typography } from '../src/js/typography'; import { fontSizes } from '../src/js/typography/fontSizes'; @@ -18,9 +19,9 @@ export default { page: README, }, }, -} as ComponentMeta; +} as Meta; -export const FontFamily: ComponentStory = (...args) => { +export const FontFamily: StoryFn = (...args) => { const styles = { displayMD: { fontFamily: fontFamilies.euclidCircularB, @@ -39,7 +40,7 @@ export const FontFamily: ComponentStory = (...args) => { ); }; -export const SmallScreen: ComponentStory = (...args) => { +export const SmallScreen: StoryFn = (...args) => { const smallScreenFontSizeBase = 16; const styles = { displayMD: { @@ -208,7 +209,7 @@ export const SmallScreen: ComponentStory = (...args) => { ); }; -export const LargeScreen: ComponentStory = (...args) => { +export const LargeScreen: StoryFn = (...args) => { const largeScreenFontSizeBase = 16; const styles = { displayMD: { @@ -377,7 +378,7 @@ export const LargeScreen: ComponentStory = (...args) => { ); }; -export const FontWeight: ComponentStory = (...args) => { +export const FontWeight: StoryFn = (...args) => { const styles = { regular: { fontFamily: fontFamilies.euclidCircularB, @@ -413,7 +414,7 @@ export const FontWeight: ComponentStory = (...args) => { ); }; -export const SmallScreenCSS: ComponentStory = (...args) => { +export const SmallScreenCSS: StoryFn = (...args) => { const fontBase = 16; const styles = { DisplayMD: { @@ -541,7 +542,7 @@ export const SmallScreenCSS: ComponentStory = (...args) => { ); }; -export const LargeScreenCSS: ComponentStory = (...args) => { +export const LargeScreenCSS: StoryFn = (...args) => { const fontBase = 16; const styles = { diff --git a/docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx b/docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx index 07feeef9..3d45823f 100644 --- a/docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx +++ b/docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx @@ -43,6 +43,7 @@ interface ColorSwatchGroupProps { */ name?: string; } + export const ColorSwatchGroup: FunctionComponent = ({ swatchData, borderColor, From 162915cc73dad916087255e3ba8f520dd9ddbfa0 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 19 Jan 2024 19:01:32 -0800 Subject: [PATCH 05/15] docs: updating readme spelling mistake and latest node version and Figma plugin name update --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d2be3ec9..c15c48e7 100644 --- a/README.md +++ b/README.md @@ -103,10 +103,10 @@ Follow these steps to below to get the library up and running locally. ### Setup -- Install [Node.js](https://nodejs.org) version 12 +- Install [Node.js](https://nodejs.org) version 16 - If you are using [nvm](https://github.com/creationix/nvm#installation) (recommended) running `nvm use` will automatically choose the right node version for you. - Install [Yarn v1](https://yarnpkg.com/en/docs/install) -- Run `yarn setup` to install dependencies and run any requried post-install scripts +- Run `yarn setup` to install dependencies and run any required post-install scripts - **Warning:** Do not use the `yarn` / `yarn install` command directly. Use `yarn setup` instead. The normal install command will skip required post-install scripts, leaving your development environment in an invalid state. ### Documentation @@ -117,9 +117,9 @@ We use storybook for documentation. To get storybook up and running use: yarn storybook ``` -### Figma Tokens +### Tokens Studio for Figma (formerly known as Figma Tokens) -The primary data for the generation of tokens is based on the json generated from a figma plugin called [Figma Tokens](https://github.com/six7/figma-tokens). This keeps our code in sync with our figma libraries. Currently the token formats are manually generated we are hoping to automate this process in future. +The primary data for the generation of tokens is based on the json generated from a figma plugin called [Tokens Studio for Figma (formerly known as Figma Tokens)](https://github.com/six7/figma-tokens). This keeps our code in sync with our figma libraries. Currently the token formats are manually generated we are hoping to automate this process in future. ### Testing and Linting From 4249b3276708c0a765fd88cd43d6514e2da5f984 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 19 Jan 2024 19:18:32 -0800 Subject: [PATCH 06/15] docs: updates to documentation for intro color and brand color --- docs/BrandColors.mdx | 4 ++-- docs/IntroductionColor.stories.mdx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx index 21f3ffe3..f924c021 100644 --- a/docs/BrandColors.mdx +++ b/docs/BrandColors.mdx @@ -5,9 +5,9 @@ import * as BrandColorStories from './BrandColors.stories'; # Brand Colors (First Tier) -The first tier of our design token abstraction consists of brand-specific colors. These colors uses literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default.They form the foundation of our design system and are essential to maintaining visual consistency across our products. +The first tier of our design token abstraction consists of brand-specific colors. These colors uses literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. They form the foundation of our design system and are essential to maintaining visual consistency across our products. -While these colors are fundamental to our design system, they **should not** be used directly in most cases. The exception is when a color needs to remain the same regardless of the theme (light or dark mode). Instead, these brand colors should be referenced via [**theme colors**](/docs/colors-themecolors--light-theme-colors), which form the second tier of our design tokens. +While these colors are fundamental to our design system, they **should not** be used directly in most cases. The exception is when a color needs to remain the same regardless of the theme (light or dark mode). Instead, these brand colors should be referenced via [**theme colors**](/docs/colors-themecolors--docs), which form the second tier of our design tokens. The majority of our brand color progressions were generated using the [0to255](https://0to255.com/037dd6) tool, which helps ensure smooth and consistent color transitions. diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index cfe77836..3d3e8d1d 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -26,11 +26,11 @@ Color is a powerful tool in design. It can express style, convey meaning, and es ### **Brand colors (first tier)** -Brand colors form the foundation of our color system. However, in most cases they **SHOULD NOT** be used directly in component styles. Instead, they serve as a reference for the [Theme Colors](/docs/colors-themecolors--light-theme-colors). You can view our brand colors in the [Brand Colors](/docs/colors-brandcolors--default-story) section. +Brand colors form the foundation of our color system. However, in most cases they **should not** be used directly in component styles. Instead, they serve as a reference for the [theme colors](/docs/colors-themecolors--light-theme-colors). You can view our brand colors in the [brand colors](/docs/colors-brandcolors--default-story) section. ### **Theme colors (second tier)** -Theme colors are semantically neutral, theme-compatible design tokens that you can use directly in your code and styles. Each token has a specific purpose, which is described in its documentation. You can view our theme colors in the [Theme Colors](/docs/colors-themecolors--light-theme-colors) section. +Theme colors are semantically neutral, theme-compatible design tokens that you can use directly in your code and styles. Each token has been tested for accessibility contrast and has a specific purpose, which is described in its documentation. You can view our theme colors in the [theme colors](/docs/colors-themecolors--light-theme-colors) section. ### **Component colors (third tier)** @@ -88,7 +88,7 @@ background-color: var(--color-background-default); #### ❌ **DON'T**: Use static color values in your components -```jsx +``` background-color: #ffffff; // Static color value ``` @@ -116,7 +116,7 @@ background-color: var(--custom-colors-my-custom-color); #### ❌ **DON'T**: Use non-token colors directly in your components -```jsx +``` background-color: #abc123; // Custom color not in design tokens or global file ``` From 7c0223c69277576f1bccd0bd6dfdcb1a910f5130 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 19 Jan 2024 19:26:26 -0800 Subject: [PATCH 07/15] refactor: updating theme colors to csf3 and mdx updated --- docs/ThemeColors.mdx | 21 +++++------- docs/ThemeColors.stories.tsx | 66 ++++++++++++++---------------------- 2 files changed, 35 insertions(+), 52 deletions(-) diff --git a/docs/ThemeColors.mdx b/docs/ThemeColors.mdx index a0bae9c5..843dc3d0 100644 --- a/docs/ThemeColors.mdx +++ b/docs/ThemeColors.mdx @@ -1,29 +1,26 @@ -import { Meta, Canvas, Story } from '@storybook/addon-docs'; +import { Meta, Canvas } from '@storybook/addon-docs/blocks'; +import * as ThemeColorStories from './ThemeColors.stories'; - + -# Theme Colors (second tier) +# Theme Colors (Second Tier) -Theme colors take the first tier [**Brand Colors**](/docs/colors-brandcolors--default-story) and start applying them to high-level applications within the UI. They are considered second tier tokens and can be used in the code directly. Theme colors should be used liberally throughout the codebase and create theme compatibility in your components. +Theme colors are derived from the first-tier [**brand colors**](/docs/colors-brandcolors--docs). They are applied to high-level applications within the UI and are considered second-tier tokens. These colors can be used directly in the code and should be used liberally throughout the codebase to ensure theme compatibility and accessibility in your components. - [Light Theme Colors](#light-theme-colors) - [Dark Theme Colors](#dark-theme-colors) ## Light Theme Colors -Light theme colors to be used in the styles for MetaMask UI. +The light theme colors are designed to be used in the styles for MetaMask UI when the light theme is active - - - + ## Dark Theme Colors -Dark theme colors for MetaMask UI. They have the same name as Light Theme Colors but different values. If you are using the Light Theme Colors for their intended purpose your UI will be dark theme compatible. +The dark theme colors are designed for MetaMask UI when the dark theme is active. They have the same names as the light theme colors but different values. If you are using the light theme colors for their intended purpose, your UI will automatically be compatible with the dark theme. - - - + ## References diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx index d8e7c096..93b7cfd9 100644 --- a/docs/ThemeColors.stories.tsx +++ b/docs/ThemeColors.stories.tsx @@ -1,11 +1,8 @@ import React from 'react'; -import { StoryFn, Meta } from '@storybook/react'; - +import tokens from '../src/figma/tokens.json'; import { ColorSwatchGroup } from './components'; import README from './ThemeColors.mdx'; -import tokens from '../src/figma/tokens.json'; - export default { title: 'Colors/ThemeColors', component: ColorSwatchGroup, @@ -14,45 +11,20 @@ export default { page: README, }, }, -} as Meta; - -const Template: StoryFn = (args) => { - return ( - <> - - - ); -}; - -export const LightThemeColors = Template.bind({}); - -LightThemeColors.args = { - swatchData: tokens.light.colors, - borderColor: tokens.light.colors.border.muted.value, - textBackgroundColor: tokens.light.colors.background.default.value, - textColor: tokens.light.colors.text.default.value, }; -export const DarkThemeColors = Template.bind({}); - -DarkThemeColors.args = { - swatchData: tokens.dark.colors, - borderColor: tokens.dark.colors.border.muted.value, - textBackgroundColor: tokens.dark.colors.background.default.value, - textColor: tokens.dark.colors.text.default.value, -}; - -DarkThemeColors.parameters = { - backgrounds: { - default: 'dark', - values: [ - { name: 'dark', value: tokens.dark.colors.background.default.value }, - ], +export const LightThemeColors = { + render: () => , + args: { + swatchData: tokens.light.colors, + borderColor: tokens.light.colors.border.muted.value, + textBackgroundColor: tokens.light.colors.background.default.value, + textColor: tokens.light.colors.text.default.value, }, }; -DarkThemeColors.decorators = [ - (Story) => ( +export const DarkThemeColors = { + render: () => (
- +
), -]; + args: { + swatchData: tokens.dark.colors, + borderColor: tokens.dark.colors.border.muted.value, + textBackgroundColor: tokens.dark.colors.background.default.value, + textColor: tokens.dark.colors.text.default.value, + }, + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: tokens.dark.colors.background.default.value }, + ], + }, + }, +}; From ed5324954aca3cab1d5fc2ce7d557939867b60ae Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 19 Jan 2024 19:42:30 -0800 Subject: [PATCH 08/15] docs: updating links to theme and brand colors to go to docs page --- docs/IntroductionColor.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index 3d3e8d1d..2b149b81 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -26,11 +26,11 @@ Color is a powerful tool in design. It can express style, convey meaning, and es ### **Brand colors (first tier)** -Brand colors form the foundation of our color system. However, in most cases they **should not** be used directly in component styles. Instead, they serve as a reference for the [theme colors](/docs/colors-themecolors--light-theme-colors). You can view our brand colors in the [brand colors](/docs/colors-brandcolors--default-story) section. +Brand colors form the foundation of our color system. However, in most cases they **should not** be used directly in component styles. Instead, they serve as a reference for the [theme colors](/docs/colors-themecolors--docs). You can view our brand colors in the [brand colors](/docs/colors-brandcolors--docs) section. ### **Theme colors (second tier)** -Theme colors are semantically neutral, theme-compatible design tokens that you can use directly in your code and styles. Each token has been tested for accessibility contrast and has a specific purpose, which is described in its documentation. You can view our theme colors in the [theme colors](/docs/colors-themecolors--light-theme-colors) section. +Theme colors are semantically neutral, theme-compatible design tokens that you can use directly in your code and styles. Each token has been tested for accessibility contrast and has a specific purpose, which is described in its documentation. You can view our theme colors in the [theme colors](/docs/colors-themecolors--docs) section. ### **Component colors (third tier)** From ec3cd2e36534c66feb558c8ab22c8f92fee91854 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 08:44:25 -0800 Subject: [PATCH 09/15] fix: fixing link to documentation --- docs/IntroductionColor.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index 2b149b81..7a1ce44d 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -124,7 +124,7 @@ Remember, the goal of these practices is to maintain consistency across your pro ## Next steps -Learn more about our [brand colors](/docs/colors-brandcolors--docs) or [theme colors](/docs/colors-themecolors--light-theme-colors) section +Learn more about our [brand colors](/docs/colors-brandcolors--docs) or [theme colors](/docs/colors-themecolors--docs) section ## References From a745a13f3002e9a92a99679469f4ec14f57b89e3 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 12:13:56 -0800 Subject: [PATCH 10/15] docs: updating brand color docs --- docs/BrandColors.mdx | 26 ++++++++++++++++++++++---- docs/IntroductionColor.stories.mdx | 28 ++++++---------------------- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx index f924c021..4542edf9 100644 --- a/docs/BrandColors.mdx +++ b/docs/BrandColors.mdx @@ -3,13 +3,31 @@ import * as BrandColorStories from './BrandColors.stories'; -# Brand Colors (First Tier) +# Brand colors (first tier) -The first tier of our design token abstraction consists of brand-specific colors. These colors uses literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. They form the foundation of our design system and are essential to maintaining visual consistency across our products. +Brand colors form the foundation of our color system. They use literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. These colors are essential to maintaining visual consistency across our products and are primarily used as a reference for the [theme colors](/docs/colors-themecolors--docs). -While these colors are fundamental to our design system, they **should not** be used directly in most cases. The exception is when a color needs to remain the same regardless of the theme (light or dark mode). Instead, these brand colors should be referenced via [**theme colors**](/docs/colors-themecolors--docs), which form the second tier of our design tokens. +While these colors are fundamental to our design system, they **should not** be used directly in most cases. Instead, they should be referenced via [**theme colors**](/docs/colors-themecolors--docs), which form the second tier of our design tokens. -The majority of our brand color progressions were generated using the [0to255](https://0to255.com/037dd6) tool, which helps ensure smooth and consistent color transitions. +However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead. + +_The majority of our brand color progressions were generated using the [0to255](https://0to255.com/037dd6) tool, which helps ensure smooth and consistent color transitions._ + +## Best Practices + +### ✅ **DO**: Use brand colors when the color should remain the same across all themes + +```jsx +fill: brandColors.white.white000; +fill: var(--brand-colors-white-white000); +``` + +### ❌ **DON'T**: Use brand colors without checking for an existing theme token first + +```jsx +background-color: brandColors.blue.blue500; // Brand color instead of theme.color.primary.default +background-color: var(--brand-colors-blue-blue500); // Brand color instead of var(--color-primary-default) +``` diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index 7a1ce44d..3ebf163f 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -7,7 +7,7 @@ import { lightTheme } from '../src/index.ts'; # Color -Color is a powerful tool in design. It can express style, convey meaning, and establish visual hierarchy. In our design system, we manage colors through a three-tiered system of design tokens. +Color is used to express style and communicate meaning. We follow a 3 tiered system for color design tokens.

-## Token tiers +## **Brand colors (first tier)** -### **Brand colors (first tier)** +Brand colors are the foundation of our color system. They are primarily used as a reference for the [theme colors](/docs/colors-themecolors--docs) and should not be used directly in most component styles. -Brand colors form the foundation of our color system. However, in most cases they **should not** be used directly in component styles. Instead, they serve as a reference for the [theme colors](/docs/colors-themecolors--docs). You can view our brand colors in the [brand colors](/docs/colors-brandcolors--docs) section. +However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead. + +For more details, refer to the [brand colors](/docs/colors-brandcolors--docs) section. ### **Theme colors (second tier)** @@ -57,24 +59,6 @@ background-color: brandColors.white.white000; // Brand color background-color: var(--brand-colors-white-white000); // Brand color ``` -### **Use brand colors for theme-independent colors** - -In the rare case where a color should remain the same regardless of the theme (for instance, if white should always be white, regardless of whether light or dark mode is active), use the corresponding brand color. However, always check first to ensure that there isn't an existing theme token that suits your needs. - -#### ✅ **DO**: Use brand colors when the color should remain the same across all themes - -``` -fill: brandColors.white.white000; -fill: var(--brand-colors-white-white000); -``` - -#### ❌ **DON'T**: Use brand colors without checking for an existing theme token first - -``` -background-color: brandColors.blue.blue500; // Brand color instead of theme.color.primary.default -background-color: var(--brand-colors-blue-blue500); // Brand color instead of var(--color-primary-default) -``` - ### **Avoid static color values** As a general rule, avoid applying static color values at the component level. This helps maintain consistency and makes it easier to update colors in the future. From c2c8e483bd49e0e814200340627b3e7f17e8c005 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 12:44:33 -0800 Subject: [PATCH 11/15] docs: updating theme docs and creating contents and moving best practices to bottom --- docs/BrandColors.mdx | 37 ++++++++++++- docs/IntroductionColor.stories.mdx | 87 +++++------------------------- docs/ThemeColors.mdx | 64 +++++++++++++++++++--- 3 files changed, 106 insertions(+), 82 deletions(-) diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx index 4542edf9..42c1266e 100644 --- a/docs/BrandColors.mdx +++ b/docs/BrandColors.mdx @@ -7,12 +7,20 @@ import * as BrandColorStories from './BrandColors.stories'; Brand colors form the foundation of our color system. They use literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. These colors are essential to maintaining visual consistency across our products and are primarily used as a reference for the [theme colors](/docs/colors-themecolors--docs). -While these colors are fundamental to our design system, they **should not** be used directly in most cases. Instead, they should be referenced via [**theme colors**](/docs/colors-themecolors--docs), which form the second tier of our design tokens. +While these colors are fundamental to our design system, they **should not** be used directly in most cases. Instead, they should be referenced via [theme colors](/docs/colors-themecolors--docs), which form the second tier of our design tokens. However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead. _The majority of our brand color progressions were generated using the [0to255](https://0to255.com/037dd6) tool, which helps ensure smooth and consistent color transitions._ +- [**Brand colors**](#light-theme-colors) +- [**Best practices**](#best-practices) +- [**References**](#references) + +## Brand colors + + + ## Best Practices ### ✅ **DO**: Use brand colors when the color should remain the same across all themes @@ -29,7 +37,32 @@ background-color: brandColors.blue.blue500; // Brand color instead of theme.colo background-color: var(--brand-colors-blue-blue500); // Brand color instead of var(--color-primary-default) ``` - +### ✅ **DO**: Store non-token colors in a global file + +If you need to use colors that are not included in the design tokens, store these colors in a global file in your project. This makes it easier to keep track of these colors and update them as needed. Always consider this as a last resort, and strive to use design tokens wherever possible. + +```jsx +// colors.js +export const customColors = { + myCustomColor: '#abc123', +}; + +// colors.css +--custom-colors-my-custom-color: #abc123; + +// component.js +import { customColors } from './colors.js'; + +background-color: customColors.myCustomColor; +background-color: var(--custom-colors-my-custom-color); +``` + +### ❌ **DON'T**: Use non-token colors directly in your components + +```jsx +// Avoid +background-color: #abc123; // Custom color not in design tokens or global file +``` ## References diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index 3ebf163f..a306fe3d 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -19,92 +19,31 @@ Color is used to express style and communicate meaning. We follow a 3 tiered sys
-
+- [**Brand colors**](#brand-colors-first-tier) +- [**Theme colors**](#theme-colors-second-tier) +- [**Component colors**](#component-colors-third-tier) +- [**Next steps**](#next-steps) +- [**References**](#references) +
-## **Brand colors (first tier)** +## Brand colors (first tier) -Brand colors are the foundation of our color system. They are primarily used as a reference for the [theme colors](/docs/colors-themecolors--docs) and should not be used directly in most component styles. +Brand colors are the foundation of our color system. They are primarily used as a reference for the [theme colors](/docs/colors-themecolors--docs) and **should not** be used directly in most component styles. However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead. For more details, refer to the [brand colors](/docs/colors-brandcolors--docs) section. -### **Theme colors (second tier)** - -Theme colors are semantically neutral, theme-compatible design tokens that you can use directly in your code and styles. Each token has been tested for accessibility contrast and has a specific purpose, which is described in its documentation. You can view our theme colors in the [theme colors](/docs/colors-themecolors--docs) section. - -### **Component colors (third tier)** - -Component colors provide another level of abstraction for component-specific colors. We currently do not provide any component tier colors, but this may change in the future. - -## Best practices - -### **Prioritize theme colors** - -Theme colors should be your go-to choice for 99% of use cases. Using theme tokens ensures that the UI works across all themes and modes. We have built-in accessibility and functionality into the theme colors to ensure this. By using theme colors, you're leveraging these benefits and ensuring a consistent and accessible color scheme across your project. - -#### ✅ **DO**: Use theme colors in your components - -``` -background-color: theme.colors.background.default; -background-color: var(--color-background-default); -``` - -#### ❌ **DON'T**: Use static color values or brand colors in your components - -``` -background-color: #ffffff; // Static color value -background-color: brandColors.white.white000; // Brand color -background-color: var(--brand-colors-white-white000); // Brand color -``` +## Theme colors (second tier) -### **Avoid static color values** +Theme colors are design tokens that are named based on their function rather than their actual color values. This makes them adaptable to different themes and ensures consistency and accessibility across your project. For most use cases, these function-based theme color tokens should be your first choice. -As a general rule, avoid applying static color values at the component level. This helps maintain consistency and makes it easier to update colors in the future. +For more details, refer to the [theme colors](/docs/colors-themecolors--docs) section. -#### ✅ **DO**: Use theme colors in your components +## Component colors (third tier) -``` -background-color: theme.colors.background.default; -background-color: var(--color-background-default); -``` - -#### ❌ **DON'T**: Use static color values in your components - -``` -background-color: #ffffff; // Static color value -``` - -### **Centralize non-token colors** - -If you need to use colors that are not included in the design tokens, store these colors in a global file in your project. This makes it easier to keep track of these colors and update them as needed. Always consider this as a last resort, and strive to use design tokens wherever possible. - -#### ✅ **DO**: Store non-token colors in a global file - -``` -// colors.js -export const customColors = { - myCustomColor: '#abc123', -}; - -// colors.css ---custom-colors-my-custom-color: #abc123; - -// component.js -import { customColors } from './colors.js'; - -background-color: customColors.myCustomColor; -background-color: var(--custom-colors-my-custom-color); -``` - -#### ❌ **DON'T**: Use non-token colors directly in your components - -``` -background-color: #abc123; // Custom color not in design tokens or global file -``` - -Remember, the goal of these practices is to maintain consistency across your project, make your code easier to maintain, and ensure that your project's colors align with the overall design system and MetaMask brand 🦊 +Component colors provide another level of abstraction for component-specific colors. We currently do not provide any component tier colors, but this may change in the future. ## Next steps diff --git a/docs/ThemeColors.mdx b/docs/ThemeColors.mdx index 843dc3d0..ae815254 100644 --- a/docs/ThemeColors.mdx +++ b/docs/ThemeColors.mdx @@ -3,25 +3,77 @@ import * as ThemeColorStories from './ThemeColors.stories'; -# Theme Colors (Second Tier) +# Theme Colors (second tier) -Theme colors are derived from the first-tier [**brand colors**](/docs/colors-brandcolors--docs). They are applied to high-level applications within the UI and are considered second-tier tokens. These colors can be used directly in the code and should be used liberally throughout the codebase to ensure theme compatibility and accessibility in your components. +Theme colors are design tokens that are named based on their function rather than their actual color values. This makes them adaptable to different themes and ensures consistency and accessibility across your project. -- [Light Theme Colors](#light-theme-colors) -- [Dark Theme Colors](#dark-theme-colors) +For most use cases, these function-based color tokens should be your first choice. They are derived from the first-tier [**brand colors**](/docs/colors-brandcolors--docs) and are applied to high-level applications within the UI. -## Light Theme Colors +- [**Light theme colors**](#light-theme-colors) +- [**Dark theme colors**](#dark-theme-colors) +- [**Best practices**](#best-practices) +- [**References**](#references) + +## Light theme colors The light theme colors are designed to be used in the styles for MetaMask UI when the light theme is active -## Dark Theme Colors +## Dark theme colors The dark theme colors are designed for MetaMask UI when the dark theme is active. They have the same names as the light theme colors but different values. If you are using the light theme colors for their intended purpose, your UI will automatically be compatible with the dark theme. +## Best practices + +### ✅ **DO**: Use theme colors in your components + +```jsx +// Good +background-color: theme.colors.background.default; +background-color: var(--color-background-default); +``` + +### ❌ **DON'T**: Use static color values or brand colors in your components + +See when to use [brand colors](/docs/colors-brandcolors--docs#best-practices) + +```jsx +// Avoid +background-color: #ffffff; // Static color value +background-color: brandColors.white.white000; // Brand color +background-color: var(--brand-colors-white-white000); // Brand color +``` + +### ✅ **DO**: Store non-token colors in a global file + +If you need to use colors that are not included in the design tokens, store these colors in a global file in your project. This makes it easier to keep track of these colors and update them as needed. Always consider this as a last resort, and strive to use design tokens wherever possible. + +```jsx +// colors.js +export const customColors = { + myCustomColor: '#abc123', +}; + +// colors.css +--custom-colors-my-custom-color: #abc123; + +// component.js +import { customColors } from './colors.js'; + +background-color: customColors.myCustomColor; +background-color: var(--custom-colors-my-custom-color); +``` + +### ❌ **DON'T**: Use non-token colors directly in your components + +```jsx +// Avoid +background-color: #abc123; // Custom color not in design tokens or global file +``` + ## References - [Figma Brand Colors Library](https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1)(internal use only) From 8fa39914178b41e74dd88845ae687efe54702b16 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 12:45:15 -0800 Subject: [PATCH 12/15] fix: removing contents from color intro page as its short and not needed --- docs/IntroductionColor.stories.mdx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index a306fe3d..385a6ff0 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -19,12 +19,6 @@ Color is used to express style and communicate meaning. We follow a 3 tiered sys -- [**Brand colors**](#brand-colors-first-tier) -- [**Theme colors**](#theme-colors-second-tier) -- [**Component colors**](#component-colors-third-tier) -- [**Next steps**](#next-steps) -- [**References**](#references) -
## Brand colors (first tier) From c95bad4cd411af80784242fcd0c6fe7973a607b0 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 12:50:29 -0800 Subject: [PATCH 13/15] fix: removing meta tags --- docs/BrandColors.mdx | 4 +--- docs/BrandColors.stories.tsx | 2 +- docs/ThemeColors.mdx | 4 +--- docs/ThemeColors.stories.tsx | 2 +- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx index 42c1266e..e1481b56 100644 --- a/docs/BrandColors.mdx +++ b/docs/BrandColors.mdx @@ -1,8 +1,6 @@ -import { Canvas, Meta } from '@storybook/blocks'; +import { Canvas } from '@storybook/blocks'; import * as BrandColorStories from './BrandColors.stories'; - - # Brand colors (first tier) Brand colors form the foundation of our color system. They use literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. These colors are essential to maintaining visual consistency across our products and are primarily used as a reference for the [theme colors](/docs/colors-themecolors--docs). diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx index e6621e2c..7c5a8ee2 100644 --- a/docs/BrandColors.stories.tsx +++ b/docs/BrandColors.stories.tsx @@ -5,7 +5,7 @@ import { ColorSwatchGroup } from './components'; import README from './BrandColors.mdx'; const meta: Meta = { - title: 'Colors/BrandColors', + title: 'Colors/Brand Colors', component: ColorSwatchGroup, parameters: { docs: { diff --git a/docs/ThemeColors.mdx b/docs/ThemeColors.mdx index ae815254..229a75a9 100644 --- a/docs/ThemeColors.mdx +++ b/docs/ThemeColors.mdx @@ -1,8 +1,6 @@ -import { Meta, Canvas } from '@storybook/addon-docs/blocks'; +import { Canvas } from '@storybook/addon-docs/blocks'; import * as ThemeColorStories from './ThemeColors.stories'; - - # Theme Colors (second tier) Theme colors are design tokens that are named based on their function rather than their actual color values. This makes them adaptable to different themes and ensures consistency and accessibility across your project. diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx index 93b7cfd9..6e94fc8b 100644 --- a/docs/ThemeColors.stories.tsx +++ b/docs/ThemeColors.stories.tsx @@ -4,7 +4,7 @@ import { ColorSwatchGroup } from './components'; import README from './ThemeColors.mdx'; export default { - title: 'Colors/ThemeColors', + title: 'Colors/Theme Colors', component: ColorSwatchGroup, parameters: { docs: { From 6305605780445d6fb1b63c7f148276d1351241d8 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 12:57:28 -0800 Subject: [PATCH 14/15] fix: fixing links after page title change --- docs/BrandColors.mdx | 4 ++-- docs/IntroductionColor.stories.mdx | 10 +++++----- docs/ThemeColors.mdx | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx index e1481b56..f69c91e4 100644 --- a/docs/BrandColors.mdx +++ b/docs/BrandColors.mdx @@ -3,9 +3,9 @@ import * as BrandColorStories from './BrandColors.stories'; # Brand colors (first tier) -Brand colors form the foundation of our color system. They use literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. These colors are essential to maintaining visual consistency across our products and are primarily used as a reference for the [theme colors](/docs/colors-themecolors--docs). +Brand colors form the foundation of our color system. They use literal color names (like red, green, etc.) and a numeric scale (where 000 is light and 900 is dark) by default. These colors are essential to maintaining visual consistency across our products and are primarily used as a reference for the [theme colors](/docs/colors-theme-colors--docs). -While these colors are fundamental to our design system, they **should not** be used directly in most cases. Instead, they should be referenced via [theme colors](/docs/colors-themecolors--docs), which form the second tier of our design tokens. +While these colors are fundamental to our design system, they **should not** be used directly in most cases. Instead, they should be referenced via [theme colors](/docs/colors-theme-colors--docs), which form the second tier of our design tokens. However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead. diff --git a/docs/IntroductionColor.stories.mdx b/docs/IntroductionColor.stories.mdx index 385a6ff0..f2c797ba 100644 --- a/docs/IntroductionColor.stories.mdx +++ b/docs/IntroductionColor.stories.mdx @@ -23,25 +23,25 @@ Color is used to express style and communicate meaning. We follow a 3 tiered sys ## Brand colors (first tier) -Brand colors are the foundation of our color system. They are primarily used as a reference for the [theme colors](/docs/colors-themecolors--docs) and **should not** be used directly in most component styles. +Brand colors are the foundation of our color system. They are primarily used as a reference for the [theme colors](/docs/colors-theme-colors--docs) and **should not** be used directly in most component styles. However, in rare cases where a color needs to remain constant across themes (e.g., white always being white, regardless of light or dark mode), the corresponding brand color can be used. Always ensure there isn't an existing theme token that could be used instead. -For more details, refer to the [brand colors](/docs/colors-brandcolors--docs) section. +For more details, refer to the [brand colors](/docs/colors-brand-colors--docs) section. ## Theme colors (second tier) Theme colors are design tokens that are named based on their function rather than their actual color values. This makes them adaptable to different themes and ensures consistency and accessibility across your project. For most use cases, these function-based theme color tokens should be your first choice. -For more details, refer to the [theme colors](/docs/colors-themecolors--docs) section. +For more details, refer to the [theme colors](/docs/colors-theme-colors--docs) section ## Component colors (third tier) -Component colors provide another level of abstraction for component-specific colors. We currently do not provide any component tier colors, but this may change in the future. +Component colors provide another level of abstraction for component-specific colors. We currently do not provide any component tier colors, but this may change in the future ## Next steps -Learn more about our [brand colors](/docs/colors-brandcolors--docs) or [theme colors](/docs/colors-themecolors--docs) section +Learn more about our [brand colors](/docs/colors-brand-colors--docs) or [theme colors](/docs/colors-theme-colors--docs) section ## References diff --git a/docs/ThemeColors.mdx b/docs/ThemeColors.mdx index 229a75a9..5da45b2e 100644 --- a/docs/ThemeColors.mdx +++ b/docs/ThemeColors.mdx @@ -5,7 +5,7 @@ import * as ThemeColorStories from './ThemeColors.stories'; Theme colors are design tokens that are named based on their function rather than their actual color values. This makes them adaptable to different themes and ensures consistency and accessibility across your project. -For most use cases, these function-based color tokens should be your first choice. They are derived from the first-tier [**brand colors**](/docs/colors-brandcolors--docs) and are applied to high-level applications within the UI. +For most use cases, these function-based color tokens should be your first choice. They are derived from the first-tier [**brand colors**](/docs/colors-brand-colors--docs) and are applied to high-level applications within the UI. - [**Light theme colors**](#light-theme-colors) - [**Dark theme colors**](#dark-theme-colors) @@ -36,7 +36,7 @@ background-color: var(--color-background-default); ### ❌ **DON'T**: Use static color values or brand colors in your components -See when to use [brand colors](/docs/colors-brandcolors--docs#best-practices) +See when to use [brand colors](/docs/colors-brand-colors--docs#best-practices) ```jsx // Avoid From aa83d99a7e5d926dee59489c28355a0fef2eeaa2 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 15:15:35 -0800 Subject: [PATCH 15/15] fix: broken anchor link --- docs/BrandColors.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx index f69c91e4..eb64f52a 100644 --- a/docs/BrandColors.mdx +++ b/docs/BrandColors.mdx @@ -11,7 +11,7 @@ However, in rare cases where a color needs to remain constant across themes (e.g _The majority of our brand color progressions were generated using the [0to255](https://0to255.com/037dd6) tool, which helps ensure smooth and consistent color transitions._ -- [**Brand colors**](#light-theme-colors) +- [**Brand colors**](#brand-colors) - [**Best practices**](#best-practices) - [**References**](#references)