This repository has been archived by the owner on Nov 26, 2024. It is now read-only.
generated from MetaMask/metamask-module-template
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor: updating deprecated storybook components * Upgrading storybook from 7.5 to 7.6.10 * fix:updating order of pages * refactor: updating deprecated components and updating docs * docs: updating readme spelling mistake and latest node version and Figma plugin name update * docs: updates to documentation for intro color and brand color * refactor: updating theme colors to csf3 and mdx updated * docs: updating links to theme and brand colors to go to docs page * fix: fixing link to documentation * docs: updating brand color docs * docs: updating theme docs and creating contents and moving best practices to bottom * fix: removing contents from color intro page as its short and not needed * fix: removing meta tags * fix: fixing links after page title change * fix: broken anchor link
- Loading branch information
1 parent
7362336
commit 0e4c543
Showing
11 changed files
with
243 additions
and
168 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,68 @@ | ||
| import { Meta, Canvas, Story } from '@storybook/addon-docs'; | ||
| import LinkTo from '@storybook/addon-links/react'; | ||
| import { Canvas } from '@storybook/blocks'; | ||
| import * as BrandColorStories from './BrandColors.stories'; | ||
|
|
||
| <Meta title="Design Tokens/Brand Colors" /> | ||
| # Brand colors (first tier) | ||
|
|
||
| # 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-theme-colors--docs). | ||
|
|
||
| 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) | ||
| 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. | ||
|
|
||
| <Canvas> | ||
| <Story id="colors-brandcolors--default-story" /> | ||
| </Canvas> | ||
| 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**](#brand-colors) | ||
| - [**Best practices**](#best-practices) | ||
| - [**References**](#references) | ||
|
|
||
| ## Brand colors | ||
|
|
||
| <Canvas of={BrandColorStories.DefaultStory} /> | ||
|
|
||
| ## 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) | ||
| ``` | ||
|
|
||
| ### ✅ **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 | ||
|
|
||
| - [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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 { | ||
| title: 'Colors/BrandColors', | ||
| const meta: Meta<typeof ColorSwatchGroup> = { | ||
| title: 'Colors/Brand Colors', | ||
| component: ColorSwatchGroup, | ||
| parameters: { | ||
| docs: { | ||
| page: README, | ||
| }, | ||
| }, | ||
| } as ComponentMeta<typeof ColorSwatchGroup>; | ||
| }; | ||
|
|
||
| const Template: ComponentStory<typeof ColorSwatchGroup> = (args) => ( | ||
| <ColorSwatchGroup {...args} /> | ||
| ); | ||
| export default meta; | ||
|
|
||
| export const DefaultStory = Template.bind({}); | ||
| type Story = StoryObj<typeof ColorSwatchGroup>; | ||
|
|
||
| DefaultStory.args = { | ||
| swatchData: tokens.global.brandColors, | ||
| export const DefaultStory: Story = { | ||
| render: () => <ColorSwatchGroup swatchData={tokens.global.brandColors} />, | ||
| name: 'Default', | ||
| }; | ||
|
|
||
| DefaultStory.storyName = 'Default'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.