design-tokens icon indicating copy to clipboard operation
design-tokens copied to clipboard

feat: Automate CSS Color Variable Generation from Figma JSON

Open brianacnguyen opened this issue 9 months ago • 3 comments

Description

  • This PR seeks to add automation scripts to convert json files to css files for brand colors and themed colors

Related issues

Fixes: #662

Manual testing steps

  1. run node scripts/brandColors.jsonToCss.js or node scripts/themedColors.jsonToCss.js

Screenshots/Recordings

Before

After

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
  • [ ] I've included screenshots/recordings if applicable
  • [ ] 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 (see labeling guidelines). Not required for external contributors.
  • [x] 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.

brianacnguyen avatar Jun 03 '24 17:06 brianacnguyen