search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.72k stars 32.23k forks source link

[material-ui][docs] How to find out where all colors are defined? #35530

Open ceserafini opened 1 year ago

ceserafini commented 1 year ago

Duplicates

Latest version

Summary 💡

Hi there :wave:

We are working on customizing the Material UI theme. To do this job, we already modified the values of colors, borders, shadows, etc. but we have some problems with the colors in particular.

We already changed all the definitions in the pallet.ts file, but, when we tried it out, we found out that there are more complex color settings.

We think those colors come from taking one of the previous colors and having applied a transparent white or black (at different percentages).

Can you help us find where those colors are defined, so we can replicate correctly each component on Figma?

We are already working with the MUI for Figma file, and for example, with the Alert component, there are many color shades, and all of those use the main color + black/white at 60/90%, but when we use the code, the alert rendered uses the lighter value too, not only the main one.

There are some other colors that we are missing too, like:

Hope you can help us.

Greetings from Membrane

Examples 🌈

No response

Motivation 🔦

No response

Order ID 💳 (optional)

55430

mnajdova commented 1 year ago

This is the place where we create the palette: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/createPalette.js

If you are using the CssVarsProvider, it may be nice to check: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/experimental_extendTheme.js#L124 for setting up any component related CSS variables (here you can basically see all values that are otherwise hardcoded to a specific color in the styles).

Ideally, we shouldn't have any value used outside of the palette, but there may be occurrences where those are used (we watched these when adding the support for the CSS variables). The reason why we didn't add them to the standard theme's palette is that then it would diverge from the Material Design spec. We could re-consider this for v6 tough. The way to fix these is to add style overrides for the specific tokens you find that have hard-coded values. I know it's not ideal, but it's probably the fastest solution to solving your problem. I hope this helps you. I am adding the issue to the v6 milestone so that we can address it appropriately.

JMLX42 commented 1 year ago

We think those colors come from taking one of the previous colors and having applied a transparent white or black (at different percentages).

Same problem here.

I traced it back to those pieces of code:

In dark mode, some overlay is applied depending on a Paper elevation. Setting elevation={0} adds no overlay (or an overlay with alpha = 0).

mnajdova commented 1 year ago

Is there something specific that we can look into? You are correct @JMLX42 this was changed in v5.

julienw commented 4 months ago

FWIW this helped me understand the full palette object: https://mui.com/material-ui/customization/default-theme/ The 'action' property really puzzled me because it's barely documented...