[material-next][palette] Adding missing tokens#39518
[material-next][palette] Adding missing tokens#39518MarcosBustamante wants to merge 3 commits intomui:v5.xfrom
Conversation
Netlify deploy previewhttps://deploy-preview-39518--material-ui.netlify.app/ @mui/material-next: parsed: +0.57% , gzip: +0.24% Bundle size reportDetails of bundle changes (Toolpad) |
DiegoAndai changed the title 
| Hey @MarcosBustamante! Thanks for contributing 😊 I would love to hear if you're going to use these tokens for something specific, as feedback on our Material You initiative 😃 |
| '0': '#000000', | ||
| '4': '#0f0d14', | ||
| '6': '#15121a', | ||
| '10': '#201a1c', | ||
| '12': '#211e26', | ||
| '17': '#2e282a', | ||
| '20': '#352f30', | ||
| '22': '#393335', | ||
| '24': '#3b3840', | ||
| '30': '#4c4546', | ||
| '40': '#645c5e', | ||
| '50': '#7e7577', | ||
| '60': '#988e90', | ||
| '70': '#b3a9aa', | ||
| '80': '#cfc4c5', | ||
| '87': '#ded8e3', | ||
| '90': '#ebe0e1', | ||
| '92': '#f1e5e6', | ||
| '94': '#f2ebf7', | ||
| '95': '#faeef0', | ||
| '96': '#f7f2fa', | ||
| '98': '#fef7ff', | ||
| '99': '#fffbff', | ||
| '100': '#ffffff', |
There was a problem hiding this comment.
I wonder if there's a better way to handle the concept of colors having 100 tones in TS than adding all 100 values by hand? What do you think? 🤔 Also, I just checked that their Figma theme builder plugin doesn't export all neutral tones 😅 it only exports some (0, 10, 20, 30, ..., 90, 95, 99, 100). Although it does export fixed values for the tokens that use these colors, e.g., surfaceDim
Maybe we could fill the gaps with some color calculation?
Same question for the MD3Tones and MD3NeutralTones TS types. Feels like we should have a better way to do it.
There was a problem hiding this comment.
As you mentioned, only a few tones are used in the 100-tone spectrum. I also tried to use the @material\material-color-utilities to generate everything at once on my project, but it didn't generate all needed tones. The only solution that worked to me is the Figma Theme Builder tool.
An interesting question to make is if it worth to create an automated way to generate the colors. My first impression is that, it is a better idea to keep it static, decreasing the processing needed and the chances for unexpected errors.
A possible alternative is to let the type more generic:
type neutral = {[key: number]: string} And, maybe, accepting the function create[Light|Dark|Custom]ColorScheme, that is responsible to connect the tones with the color scheme, as parameter on the extendTheme().colorSchemes configs.
But it is definitely an important problem to understand how color schema mapping can be generalized. However, expanding the component library sounds a bigger priority for now, since it blocks people to easily use material-next.
| Hello @DiegoAndai.
Yes. I am working in a new product and we are using mui as our component library. The initial plan is to follow the m3 specifications in order to build modern views. The tokens that I added are important, since m3 use different tones to set hierarchy. The fixed tokens helps to generate more contrast inside the application. Since it will be important in the short term, I decided to add it. |
| @DiegoAndai, Could you share the plans to expand the component library? Is there ETAs? I am restyling lots of components to follow the m3 guidelines |
| @MarcosBustamante, we're tracking the progress here: #29345 (See the Ready to take ⭐ section) For the If you're restyling components to follow Material You, would you like to contribute to the |
github-actions bot added the PR: out-of-date 
oliviertassinari added scope: all components 4 participants
The mui-material-next is missing some important palette tokens on its mapping.
This PR is adding all the missing containers tokens and fixing the tonal in others:
It is also adding the fixed pattern specified on the documentation: