chore: fixes get css variables from stylesheet utility#156
Merged
Conversation
Comment on lines
+1
to
+5
| /* eslint-disable no-restricted-globals */ | ||
| /* eslint-disable id-denylist */ | ||
| /* eslint-disable prefer-destructuring */ | ||
| /* eslint-disable @typescript-eslint/prefer-for-of */ | ||
| /* eslint-disable require-unicode-regexp */ |
Contributor
Author
There was a problem hiding this comment.
We need to read CSS variables from the browser's computed styles because Storybook runs in a browser environment, where we can't use Node.js file system calls to read CSS files directly from packages/design-tokens/src/css.
Instead, we:
- Access the styles that Storybook has already loaded into the browser
- Read the computed values from
document.styleSheets - Use DOM manipulation to test different theme variations
This is why we need to disable certain ESLint rules - to allow browser globals and DOM operations that wouldn't be allowed in our typical Node.js environment.
The stories in BrandColors.stories.tsx and ThemeColors.stories.tsx demonstrate this browser-based approach to accessing our design tokens.
Contributor
Author
|
@metamaskbot publish-preview |
brianacnguyen
approved these changes
Nov 26, 2024
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR addresses issues in the design token storybook related to rendering CSS variables for brand color, and light and dark theme colors. Previously, the function responsible for rendering these variables was updated to comply with ESLint rules for the design system monorepo. However, because Storybook is not a Node.js environment, the updates failed to function as intended. This issue was missed during migration PRs and was my oversight.
This PR:
Reason for the change
Related issues
Part of #129
Manual testing steps
yarn storybookScreenshots/Recordings
Before
before.css.vars720.mov
After
after720.mov
Even further improvements will be made in #147 to address the text color here
Pre-merge author checklist
Pre-merge reviewer checklist