search

MetaMask / design-tokens

Design tokens to be used throughout MetaMask products
https://metamask.github.io/design-tokens/?path=/docs/getting-started-introduction--docs
26 stars 15 forks source link

fix: css theme variables doc display #672

Closed georgewrmarshall closed 4 months ago

georgewrmarshall commented 4 months ago

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 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.

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:

  1. Run yarn storybook to launch Storybook.
  2. Navigate to the CSS Variables documentation section.
  3. Toggle between light and dark themes to ensure that the CSS variables for each theme are correctly displayed.
  4. Review the documentation for brand, light theme, and dark theme variables to confirm accuracy and completeness.

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

metamaskbot commented 4 months ago

Builds ready [26d0e56]

Storybook: Storybook