Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): Storybook - Dark mode colors #29332

Merged
merged 1 commit into from
Oct 18, 2021

Conversation

vuluongj20
Copy link
Member

In Storybook, switch from coded color names (e.g. gray500) to aliases (e.g. textColor) for better dark mode display.

Before:
Screen Shot 2021-10-14 at 12 46 21 PM

After:
Screen Shot 2021-10-14 at 12 30 57 PM

One side effect of this move is that light mode will look different, due to discrepancies in color mapping. These discrepancies will be fixed as we update our color system in theme.tsx.

Screen Shot 2021-10-14 at 12 44 46 PM

In storybook docs, move coded color names (gray500) to aliases (textColor) for better dark mode display.
@vuluongj20 vuluongj20 requested review from a team as code owners October 14, 2021 19:47
@vuluongj20 vuluongj20 changed the title fix(ui): Storybook - Dark mode color aliases fix(ui): Storybook - Dark mode colors Oct 14, 2021
text-shadow: none;
}
& code {
text-shadow: none;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove white text shadow added by Prism.

Screen Shot 2021-10-14 at 1 14 28 PM

@vuluongj20 vuluongj20 merged commit 62e57fa into master Oct 18, 2021
@vuluongj20 vuluongj20 deleted the vuluong/storybook-color-aliases branch October 18, 2021 18:07
@github-actions github-actions bot locked and limited conversation to collaborators Nov 3, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants