Adding CSS and JS token display in storybook

georgewrmarshall commented 7 months ago

Description

Previously, we didn't have a way to visualize the changes in CSS, and JavaScript color tokens. The current storybook renders the Figma token json. So we had to manually ensure that the hex values were the same across all these platforms. This process was prone to errors and inconsistencies.

This PR introduces a rudimentary visualization of the CSS and JS color tokens along with the Figma token json. Now, we can visually check that any token updates are correctly reflected across all token formats. This will help us maintain consistency and catch any discrepancies early.

How it works

JS token stories use the available lightTheme and darkTheme objects. Brand colors will be added in the near future
CSS token stories are generated from the CSS variables taken from the stylesheet rendered in storybook

Fixes: #595

Screenshots/Screencasts

Before

https://github.com/MetaMask/design-tokens/assets/8112138/bf411b0b-4ef7-4dbd-bc2b-0945b89265af

After

https://github.com/MetaMask/design-tokens/assets/8112138/d5ecee47-2951-4414-ae4f-1662782c083e

Manual Testing

To manually test the changes, check the Storybook build in this PR. You can also pull the branch and run the following command to run the script and generate the JSON data:

node scripts/extractCssColors.js

This will create a JSON file in the docs/data directory. You can then use this data in your Storybook stories to visualize the color tokens.

This PR helps us maintain consistency across our color tokens and makes it easier to update and verify these tokens.