chore: adding initial json generated from figma variables

georgewrmarshall commented 4 months ago

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.

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

Related issues

Fixes: #656

Manual testing steps

To verify the updates to the Storybook documentation:

Go to the storybook build of this PR or run yarn storybook to launch Storybook.
Navigate to the sections detailing the Figma brand color, light theme, and dark theme documentation.
Review the documentation for accuracy, completeness, and alignment with the current design tokens and color schemes in Figma.
Ensure that the documentation provides clear guidance on applying these design tokens and themes within projects.

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

[x] I’ve followed MetaMask Coding Standards.
[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.

metamaskbot commented 4 months ago

Builds ready [e7fc644]

Storybook: Storybook

metamaskbot commented 4 months ago

Builds ready [b606e70]

Storybook: Storybook

metamaskbot commented 4 months ago

Builds ready [9428072]

Storybook: Storybook

metamaskbot commented 4 months ago

Builds ready [df18a2f]

Storybook: Storybook

MetaMask / design-tokens