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

Adding custom color palette #314

Closed
wants to merge 67 commits into from
Closed

Conversation

ckark
Copy link
Collaborator

@ckark ckark commented Apr 19, 2024

What does this PR do?

Part of cleaning up dark mode requires adding a handful of color styles to the palette. In order for this not to be disruptive, and given MUI's many limitations, I've created a custom palette that standardizes background, text, and border styles.

An advantage of this approach is that the new colors won't appear unless explicitly called. It will drastically cut down on the use of isDark in ternary operations used through the grid monorepo.

What follows is a visual overview of the changes.

Background

image

Text

image

Borders

image

Additional screens that depict the difference appear in Figma.

Limitations

Declaring custom styles in MUI is cumbersome and requires extensive reworking of the type declarations in the design system—an undertaking worth considering, but well beyond the scope of this project.

Test Plan

This PR is a cleaned up version of a few other draft PRs whose hash we copied into the package.json in the grid repo to test.

package.json Outdated Show resolved Hide resolved
@@ -12,7 +12,7 @@ const Dialog = ({ PaperProps, ...props }: DialogProps) => {
...PaperProps,
style: {
borderRadius: "8px",
background: theme.palette.background.default,
background: theme.palette.background.secondary,
Copy link
Member

Choose a reason for hiding this comment

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

Can you please PR this separately and show screenshots displaying the impact in the product to keep this PR focused?

@ckark ckark closed this May 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants