Visualize CSS and JS Color Tokens in Storybook

[georgewrmarshall]

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.

We need to introduce a 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.

Technical Details

• Update brand, light theme and dark theme stories to include JS and CSS color tokens

Acceptance Criteria

• A visualization of the CSS and JS color tokens along with the Figma token json is available in Storybook

Additional Information

Once the script is created, it should be tested by running it and checking the output JSON file. The JSON file should then be used in a Storybook story to ensure it works as expected.