I'm working on a design system for my app, and while most of it has been straightforward, I'm struggling with the color palette. MUI (Material-UI) uses semantic colors like 'success' and 'error', which work well since they don't need too many shades. However, the default 'primary' color is applied to many elements like input outlines and button borders, and my design mainly revolves around various shades of grey, inspired by the shadcn/ui style.
To tackle this, I've added a 'neutral' color to augment MUI's palette. The problem is that the grey palette is extensive, with shades like [10, 50, 75, 100, 150, 200, ..., 800] and I can't directly map these to the neutral color like I would with simpler palettes. For instance, a button might use Grey100, Grey500, and Grey600, while a TextField uses Grey100, Grey400, and Grey700.
How should I define this 'neutral' color? I've tried tweaking the PaletteColor interface with more gradations like faint, lighter, and so on, but then if a new component comes in needing a unique grey tone, it complicates everything. I'm beginning to think the best course is to include the whole palette from 10 to 900 into the neutral object in the theme configuration. Any suggestions?
2 Answers
A solid approach would be to create a custom palette that uses commonly utilized combinations like grey[300], grey[500], and grey[800]. Then, override each component as required using styleOverrides and variants. This way, you can streamline your component styling while customizing as needed. Check MUI's variants documentation for further guidance on how to do this effectively!
I recommend focusing on the intent behind the colors rather than their descriptions. For instance, consider creating specific shades based on usage, like button.primary mapped to colors.grey[300] for buttons, and use broader terms for background colors, like bg.soft and bg.default. This approach helps in keeping your palette more semantic and flexible.
That sounds good for most components, but sometimes the design specs might specifically require something like Grey400, which doesn’t fit neatly into the semantic naming.