This PR addresses an issue where the documentation for CSS theme variables in Storybook was not displaying correctly due to missing checks for data-theme="light". By updating the getCSSVariablesFromStylesheet function to include this check, we ensure that the CSS variable documentation for brand, light theme, and dark theme is accurately presented in Storybook. This improvement enhances the developer experience by providing clear and accessible documentation on how to utilize our design system's CSS variables effectively across different themes.
Description
This PR addresses an issue where the documentation for CSS theme variables in Storybook was not displaying correctly due to missing checks for
data-theme="light"
. By updating thegetCSSVariablesFromStylesheet
function to include this check, we ensure that the CSS variable documentation for brand, light theme, and dark theme is accurately presented in Storybook. This improvement enhances the developer experience by providing clear and accessible documentation on how to utilize our design system's CSS variables effectively across different themes.Related issues
Fixes: https://github.com/MetaMask/design-tokens/issues/671
Manual testing steps
To verify the updates to the CSS variable documentation in Storybook:
yarn storybook
to launch Storybook.Screenshots/Recordings
Before
https://github.com/MetaMask/design-tokens/assets/8112138/69ca9532-a4cc-42cb-a742-61d66294c39c
After
https://github.com/MetaMask/design-tokens/assets/8112138/9f62856c-57ab-4ded-900f-a41fc69722c2