This PR focuses on updating the Storybook documentation for our Figma brand color, light theme, and dark theme. The updates aim to ensure that our Storybook documentation accurately reflects the latest design tokens and color schemes as defined in Figma.
This will make the CSS and JS tokens unaligned for the time being. We will update those in subsequent PRs with a focus on deprecating the old values instead of removing them
[x] I've clearly explained what problem this PR is solving and how it is solved.
[x] I've linked related issues.
[x] I've included manual testing steps.
[x] I've included screenshots/recordings if applicable.
[x] I’ve included tests if applicable.
[x] I’ve documented my code using JSDoc format if applicable.
[x] I’ve applied the right labels on the PR.
[x] I’ve properly set the pull request status to "ready for review".
Pre-merge reviewer checklist
[x] I've manually tested the PR (e.g., pull and build branch, run Storybook, review the updated documentation).
[x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as screenshots or recordings.
This PR is a crucial step towards maintaining a cohesive and accessible design system by ensuring our Storybook documentation remains a reliable and up-to-date resource for developers and designers alike.
Description
This PR focuses on updating the Storybook documentation for our Figma brand color, light theme, and dark theme. The updates aim to ensure that our Storybook documentation accurately reflects the latest design tokens and color schemes as defined in Figma.
Related issues
Fixes: #656
Manual testing steps
To verify the updates to the Storybook documentation:
yarn storybook
to launch Storybook.Screenshots/Recordings
Before
https://github.com/MetaMask/design-tokens/assets/8112138/8d2dc40d-533b-4011-93bf-a8a664cac759
After
https://github.com/MetaMask/design-tokens/assets/8112138/414fcf33-7599-4ce7-86d9-3696177ad2ab
Pre-merge author checklist
Pre-merge reviewer checklist
This PR is a crucial step towards maintaining a cohesive and accessible design system by ensuring our Storybook documentation remains a reliable and up-to-date resource for developers and designers alike.