feat: use figma light theme variables - Githubissues

MetaMask / design-tokens

Design tokens to be used throughout MetaMask products

https://metamask.github.io/design-tokens/?path=/docs/getting-started-introduction--docs

25 stars 15 forks source link

feat: use figma light theme variables #678

Closed garrettbear closed 1 month ago

garrettbear commented 2 months ago

Description

Update CSS-in-JS to use Figma Variables brand colors and add on brand evolution. Use figma variable light and dark theme json that's tied to the new brand colors.

Added "some" automation, there is a script that can be used for the brand colors and themes that will output about 90% of what is needed but does require some manual changes (e.g. when a color is 400-10%)

Related issues

Fixes: #660 #661

Manual testing steps

Go to this page...

Screenshots/Recordings

https://github.com/MetaMask/design-tokens/assets/26469696/7b83716f-66ac-4224-ba9b-2836502535a5

Pre-merge author checklist

[ ] I’ve followed MetaMask Coding Standards.
[ ] I've clearly explained what problem this PR is solving and how it is solved.
[ ] I've linked related issues
[ ] I've included manual testing steps
[ ] I've included screenshots/recordings if applicable
[ ] I’ve included tests if applicable
[ ] I’ve documented my code using JSDoc format if applicable
[ ] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
[ ] I’ve properly set the pull request status:
- [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

[ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
[ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

metamaskbot commented 2 months ago

Builds ready [a0a8213]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [f95396f]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [75e96b1]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [bcb2984]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [48742c1]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [8f8358a]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [282418e]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [3937701]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [d12a688]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [8f36872]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [b9e20d5]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [fb604f8]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [cf23f33]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [98a0994]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [c1e2836]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [a11b4a7]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [78ea104]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [c170090]

Storybook: Storybook

metamaskbot commented 2 months ago

Builds ready [f9226d6]

Storybook: Storybook

metamaskbot commented 1 month ago

Builds ready [6ea047f]

Storybook: Storybook