This PR introduces the initial JSON files generated by Figma variables into the design tokens repository. These files include the JSON for brand colors, light theme, and dark theme colors, all generated using Token Studio from Figma variables. While these tokens are not yet being exposed or utilized directly, they lay the foundational groundwork for subsequent brand evolution work. This addition marks a significant step towards ensuring our design system's colors are dynamically linked with our Figma design sources, facilitating easier updates and consistency across our design and development environments.
As these design tokens are not yet exposed or integrated into the project, manual testing steps will be outlined in future PRs as we begin to implement these tokens within our projects.
Screenshots/Recordings
Before
N/A - This PR introduces new assets to the repository without altering existing functionality or UI.
After
N/A - Visual changes will be more apparent in future PRs as these design tokens are implemented within our projects.
[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 for future implementation phases.
[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 reviewed the added JSON files for consistency with the expected output from Figma variables and Token Studio.
[x] I confirm that this PR lays the necessary groundwork for future brand evolution work and includes the necessary assets.
This PR represents an essential step in aligning our design tokens with our Figma design variables, ensuring a cohesive and streamlined workflow between design and development as we move forward with our brand evolution.
Description
This PR introduces the initial JSON files generated by Figma variables into the design tokens repository. These files include the JSON for brand colors, light theme, and dark theme colors, all generated using Token Studio from Figma variables. While these tokens are not yet being exposed or utilized directly, they lay the foundational groundwork for subsequent brand evolution work. This addition marks a significant step towards ensuring our design system's colors are dynamically linked with our Figma design sources, facilitating easier updates and consistency across our design and development environments.
(I'll be updating the documentation in a subsequent PR)
Related issues
Part of: https://github.com/MetaMask/design-tokens/issues/656
Manual testing steps
As these design tokens are not yet exposed or integrated into the project, manual testing steps will be outlined in future PRs as we begin to implement these tokens within our projects.
Screenshots/Recordings
Before
N/A - This PR introduces new assets to the repository without altering existing functionality or UI.
After
N/A - Visual changes will be more apparent in future PRs as these design tokens are implemented within our projects.
Pre-merge author checklist
Pre-merge reviewer checklist
This PR represents an essential step in aligning our design tokens with our Figma design variables, ensuring a cohesive and streamlined workflow between design and development as we move forward with our brand evolution.