material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

Adopt Material Design 3 / Material You

Open NawarA opened this issue 2 years ago • 107 comments

I'm sure you're tracking the pulse of material design standards like me and others. That being said, material ui version 3 is out.

We should track MUI being migrated from Material Design v2 to Material Design version v3.

I'm sure they'll be a few tickets that come out requesting the adoption, so I figured this ticket could act as a stub and catch-all for MUI support for the design language's latest update.

Cheers

References

  • MD 3 Docs https://m3.material.io/
  • MD 2 Docs https://m2.material.io/
  • Ionic's discussion on the problem https://github.com/ionic-team/ionic-framework/issues/24282
  • Vuetify's discussion on the problem https://github.com/vuetifyjs/vuetify/issues/14332
  • Quasar's discussion on the problem https://github.com/quasarframework/quasar/issues/11139
  • Google's discussion on the problem https://github.com/material-components/material-web/issues/2441
  • The docs traffic on MD 3 vs MD 2: https://www.similarweb.com/website/m3.material.io/?competitors=material.io
  • Material Design traction on Figma MD 2 Figma file vs. MD 3 Figma file
    • January 12, 2022: MD2 4.8k stars 256k copies, MD3 1.9k stars 39.6k copies
    • March 24, 2022: MD2 5.6k stars 277k copies, MD3 4.2k stars 91k copies
    • August 23, 2022: MD2 6.5k stars 307k copies, MD3 5.8k stars 132k copies
    • October 6, 2022: MD2 6.8k stars 315k copies, MD3 6.6k stars 155k copies
    • December 20, 2022: MD2 7.2k stars 327k copies, MD3 8.9k stars 214k copies
  • React Native Paper: https://github.com/callstack/react-native-paper/issues/3126
  • Flutter https://github.com/flutter/flutter/issues/103537
  • Angular Material: https://github.com/angular/components/issues/22738

Design kits

  • https://github.com/mui/mui-design-kits/issues/135
  • https://github.com/mui/mui-design-kits/issues/103

Real adoptions of Material You in the wild?

Desktop

  • https://relay.material.io/
  • https://httpie.io/app feels inspired by it
  • Gmail partially, which feels relatively yolo
  • Others?

Mobile

  • Google Pixel Phones. "Canalys puts Google fifth in U.S. phone market share, with just a 1.7% in Q3 2022." source. It's insignificant. All the other phone manufacturers skin Android, so don't use Material Design 3.
  • Others?

Migration

If you wish to contribute, start with the contributing guide

Progress

List of components and their current migration status

✅ Done
⏳ In progress
⭐ Ready to take
✋🏼 On hold

NawarA avatar Oct 27 '21 21:10 NawarA

Thanks for creating the issue. Let's use it as a stub 👌

mnajdova avatar Nov 05 '21 14:11 mnajdova

is this being considered?

jpmtrabbold avatar Nov 23 '21 23:11 jpmtrabbold

Hi, I was about to start my own feature request, but found this. I think material v3 does look way more expressive and vivid than v2, and Google's own material web components is also in the progress of implementing Material You (https://github.com/material-components/material-web/issues/2441).

If nobody wants to take up this task, I can plan and gradually migrate some mui components to material v3 standards. @mnajdova, is there anything blocking that needs to be completed before migration can start? If not, I think we can start with a checklist of components in order of importance and visual difference from material v2 -> v3.

cryptoAlgorithm avatar Jan 10 '22 14:01 cryptoAlgorithm

Hi, if nobody wants to take up this task, I can plan and gradually migrate some mui components to material v3 standards. @mnajdova, is there anything blocking that needs to be completed before migration can start? If not, I think we can start with a checklist of components in order of importance and visual difference from material v2 -> v3.

It is a breaking change, so I am not sure that we can start with it right away (at least we cannot update the components which are part of @mui/material). We could try to adopt the styles to some of the components that we have inside @mui/material-next - this is our experimental package that depends on @mui/base that we envision will be the replacement for @mui/material v6. In my opinion this should be a good start. @mui-org/core what do you think?

@cryptoAlgorithm feel free to kick off this effort if you want to. Check first which components we already have in the @mui/material-next package and try to experiment with some of those if you want to.

mnajdova avatar Jan 11 '22 09:01 mnajdova

Ok, great. Maybe this can be introduced as part of the material-ui v6 update? Since by then, material v3 styles should be quite common across sites using material design. We might want to wait and see how Google handles this in their own Material Web Components library, and how they actually look.

cryptoAlgorithm avatar Jan 11 '22 13:01 cryptoAlgorithm

We could try to adopt the styles to some of the components that we have inside @mui/material-next - this is our experimental package that depends on @mui/base that we envision will be the replacement for @mui/material v6. In my opinion this should be a good start. @mui-org/core what do you think?

Agree. Just note that material-next is our experimental (playground) package. We intend to test different shapes of the API there and introduce breaking changes without notice, so it's not safe to depend on it in production.

michaldudak avatar Jan 12 '22 09:01 michaldudak

Hello my friends, if you need MATERIAL DESIGN 3 how about https://www.beercss.com?

Screenshot_4

leonardorafael avatar Jan 12 '22 21:01 leonardorafael

@leonardorafael That implementation has a few issues:

  1. The implementation does not follow material standards fully: Buttons are the wrong shapes, animations are there when they shouldn't be and it looks like the sizing and paddings aren't correct
  2. That doesn't seem to be a react library on quick inspection, which doesn't fit into the purpose of Material-UI
  3. The ripple animation seems to be flawed: it only works on the first click, and only originates from the centre of the clickable area.

One thing thats done well (from the few available samples) is the color palette generation. I don't know if its following google standards, but it seems close. Maybe thats one thing that can be adapted, but I don't know if thats required for such a UI library

cryptoAlgorithm avatar Jan 13 '22 06:01 cryptoAlgorithm

It would be nice to somehow get early support for MD3 design tokens in advance of the rest.

The biggest leaps forward with MD3 compared to the design tokens available by default in MUI today are:

  • New typographic tokens. The system (5 semantic choices × 3 sizes) is far more intuitive, the type scale is actually usable out of the box (MUI's built-in h1 is an insane 96px, whereas MD3 tops out at a much more reasonable 57px), and the responsive type sizing is improved (though I don't know if the tokens are actually available yet).

  • New color tokens. The 0-100 tone system eliminates the co-dependence between your color palette and component tones, because luminance is normalized. If you choose primary[40] for a component, you're guaranteed to get a usable tone regardless of the chosen palette. This helps greatly with component contrast and accessibility; MUI's current info and warning colors, for instance, cause components to fail WCAG 2.0 AA, whereas a new info[40] color token would be guaranteed to pass.

Be warned that parts of MD3 are still half-baked; for example there's no saturation control during palette generation, so you can't choose whether you're getting super-pumped-up colors or pale tones. As a result, some resulting UI looks great on mobile but very oversaturated on desktop, because a "splash" of color suddenly becomes a large imposing block of color.

If MUI gets involved with MD3 sooner than later, though, then maybe there's actually an opportunity to help them make the right choices, like open-sourcing palette generation and adding saturation control.

aaronadamsCA avatar Jan 13 '22 14:01 aaronadamsCA

Ideally, MUI should (or start efforts to) adapt Material v3 as soon as possible since its the most popular react material library, and might give MUI a head start over potential competitors (including google's own library). Material v3 support would be quite enticing since I foresee the popularity of the new standard increasing after android 12 actually becomes mainstream, and people might be attracted to the library mainly for this reason. I honestly don't think implementing the whole palette generation and color extraction functions are feasible, it should be left to the dev to implement such generation themselves. These will keep the dependancies and size of the library reasonable and not add additional unessential bloat that not everyone will use.

cryptoAlgorithm avatar Jan 13 '22 16:01 cryptoAlgorithm

It's not clear to me that MD 3 will have a lot of traction. I'm eager to wait for positive signals before committing to this effort. The context seems different in 2022 than it was in 2016. What I believe are facts:

  1. Does MD 3 looks great like MD 1 was when end-users had smaller screens with less resolution? Personally, it's a clear no and the same answer goes from @mbrookes. Before MD 1 (v5 - Lollipop 🥰), it was looking ugly (v4.4 - Kit Kat 🙈) so an easy win. I think that it will take some customization effort from our end to make it appealing. My experience so far is that Google's UI usually looks better than what http://material.io/ ships.
  2. Is the Pixel the only phone that really uses Android now? The large majority of the phones sold are based on a custom UI Samsung (One UI), Xiaomi (MIUI), OnePlus (OxygenOS).
  3. Most of the Android apps I use now are no longer based on MD. It used to be a lot more popular, I recall. I feel that it was pushed on purpose by Google, to avoid brand dilution.
  4. MD 3 is currently targeted at mobile but most people use MUI for desktop apps.

oliviertassinari avatar Jan 13 '22 19:01 oliviertassinari

I fully agree that the material standard would need to be slightly adapted to look great on desktop-sized websites/web apps, however it seems like the material v3 standard takes into consideration slightly larger screen sizes, like the navigation rail etc. Also, I think the standard google is showing at their reference site https://m3.material.io/ seems much better than the reference v2 site (not even google follows it 😆).

Screenshot 2022-01-14 at 6 03 15 PM One interesting thing is they seem to already be using web components in the material v3 style for that website, which begs the question: why isn't there any big progress in their official material web components library?

cryptoAlgorithm avatar Jan 14 '22 10:01 cryptoAlgorithm

why isn't there any big progress in their official material web components library?

@cryptoAlgorithm It doesn't seem to be documented nor in CI workflow (built), but you can see that there's work being done! If I will be able to use that code and check which components are ready to use, I will let know there. Meanwhile, I encourage everyone who's interested to check it by themselves.

What might be meaningful to this topic is that these components are written using Web Components API, which (I think) means that there's not going to be much work required to make React (or other UI library) wrapper. From my reading, it seems to be a way to make design systems that are future-proof and not bound to any framework.

  • https://ionic.io/resources/articles/burger-king-design-system
  • https://youtu.be/cNbSlmCrozg
  • https://stenciljs.com/

konhi avatar Jan 23 '22 01:01 konhi

I fully agree that the material standard would need to be slightly adapted to look great on desktop-sized websites/web apps, however it seems like the material v3 standard takes into consideration slightly larger screen sizes, like the navigation rail etc. Also, I think the standard google is showing at their reference site https://m3.material.io/ seems much better than the reference v2 site (not even google follows it 😆).

Screenshot 2022-01-14 at 6 03 15 PM

One interesting thing is they seem to already be using web components in the material v3 style for that website, which begs the question: why isn't there any big progress in their official material web components library?

I think Material v3 uses less components to do more things. For example, Chip use-cases have been expanded, and now, Cards are used to contain everything. To me, the design spec acts as a responsive framework for all screen sizes, from mobile first, to foldable devices, to 4k desktop monitors.

I've already implemented material v3 atop MUI v5...the main trick was follow their opacity rules to make cards and chips variants look and feel like the variants described in the specs. I like it by the way. Everyone who saw my app loved it too.

The big diff I see is that MUI will need to help developers create a triple color theme. From there, Cards have 3 variants and Chips have several variants too.

The question becomes, what does MUI do with the other components that are in material v2 spec but not in the v3 spec?

I say keep em, though have them follow v3 guidelines, from a theming perspective. This way devs have everything they need to build a bare-bones MV3 app (as seen on Material.io), and they get all the goodies that MUI v5/v6 has to offer.

NawarA avatar Feb 24 '22 21:02 NawarA

@NawarA any way that you would share your implementation of material v3 into mui v5?

jpmtrabbold avatar Feb 24 '22 21:02 jpmtrabbold

not sure how I'd go about merging with the MUI v5 repo.

From an implementation perspective, the main place to start is letting users create a 3-color theme.

From there, Cards and Chips are components that have variants. Each variant uses the 3-color theme, opacities, and hover effects to create the effects described in the v3 specs.

I have my triple color theme hard coded atop MUI v5 (as a separate namespace). From there, I created custom Card and Chip components that have variant as an input, and return the correct component design / behavior as an output.

I could create a repo that has this running as an example...though I'm not sure how to merge that into MUI v5...even though its built on MUI v5. Any guidance would be helpful

NawarA avatar Mar 15 '22 18:03 NawarA

@NawarA we use the @mui/material-next package for experiments, you can find the source code in https://github.com/mui/material-ui/tree/master/packages/mui-material-next

Then people who are interested to try it, can give it a go.

mnajdova avatar Mar 16 '22 10:03 mnajdova

Hello everyone.

I share with you my own implementation of the Material You theme in MUI using the createTheme function and the official google Material Color Utilities library to generate the dynamic theme.

Project Repo Demo

I hope it is useful to you.

Default Light

Default Dark

Color System Light

Color System Dark

ZakAlbert avatar Jun 22 '22 18:06 ZakAlbert

I disagree that Samsung's theming is not acknowledging Material 3, but rather I'd point out that not everybody sticks to Samsung's apps exclusively. And Samsung does tend to adapt their own to the latest libraries from google (once they're published and tested), so usually a year or so out.

but in the meantime, Google's own apps will be adopting this. Whether or not they ever tie in the color theme to the primary color of the Samsung theme, I can't say. i wish they would, of course.

in my case, the idea that a "perfect" theme can be constructed from just 2 colors is very appealing - I have a music app where I like adapting the primary/secondary color as extracted from the album cover art. If the theme could automatically figure out that it needed light/dark text based on the colors, it would save me some very bug-prone calculations I currently have to do to implement that.

BUT I acknowledge that MD3 is all in Java (if it is released at all in source form) and so it isn't easy for an independent company to figure out the same algorithms they're now applying.

acroyear avatar Jul 01 '22 21:07 acroyear

I'm inclined to think MUI should look at the palette generation of beercss - even if it isn't perfect, it is still a start, a set of algorithms that can be tweaked. Hard to know exactly what it would take given that Google i don't think has formally published its algorithm (thus why i'm wondering if the Android source code really includes this aspect of Material 3 to be extracted). Again, I think the tougher problem for MUI users NOW is knowing and having to state if the FG color should be white or black depending on the rest of the context.

acroyear avatar Jul 01 '22 21:07 acroyear

@acroyear The Material Foundation has some implementations of their algorithms + utilities for the MD3 color system here https://github.com/material-foundation/material-color-utilities

ealexhaywood avatar Jul 01 '22 22:07 ealexhaywood

thanks.

acroyear avatar Jul 01 '22 23:07 acroyear

The beercss palette is a reverse engineer from material foundation theme builder site. It's exactly the same algorithm. After some months, Google finally released the lib to public on GitHub, and we should use it too. 👍👍

leonardorafael avatar Jul 01 '22 23:07 leonardorafael

I think the tougher problem for MUI users NOW is knowing and having to state if the FG color should be white or black depending on the rest of the context.

getContrastText in the undocumented colorManipulator does exactly that, but perhaps there's a nuance that I'm missing?

mbrookes avatar Jul 02 '22 00:07 mbrookes

I think the tougher problem for MUI users NOW is knowing and having to state if the FG color should be white or black depending on the rest of the context.

CSS color-contrast() was meant to help solve for this as soon as this year, but unfortunately it looks like it got bumped before that article even published.

aaronadamsCA avatar Jul 28 '22 13:07 aaronadamsCA

There's colorManipulator's getContrastText, but. apologies, I'm a bit out of touch with what's in the theme or public API...

mbrookes avatar Jul 28 '22 22:07 mbrookes

Well... I've created a small template for Material You (Material Design 3). You can have a look at it Project Repo And here's the M3 Color Picker: Color Picker Color Picker Repo Link: Repo Color Picker This is made with TypeScript and Vite.

soumya-99 avatar Aug 20 '22 12:08 soumya-99

So, what is the plan here? currently they are two options:

  1. https://react-m3-demo.web.app/Components
  2. https://www.beercss.com/

but nothing official from MUI. How do we proceed?

josuevalrob avatar Aug 22 '22 12:08 josuevalrob

It's worth noting that despite the "release" of Material Design 3 several months ago, much of it is still very clearly incomplete.

For example, at release the website showed the concept of an adaptive type scale:

image

Later this idea was quietly scrubbed from the docs, which now contain "helpful" guidance like this instead:

There are three display styles in the default type scale: Large, medium, and small. As the largest text on the screen, display styles are reserved for short, important text or numerals. They work best on large screens.

We went from "adaptive type scale coming soon!" to "uh maybe just don't use these styles on mobile?" From what I've seen this is representative of most of MD3. Like most component frameworks built for in-house use first and public consumption last, Google seems to pay little attention to general MD3 use cases.

By contrast, MUI Joy continues to look very promising and grow quickly. It already offers good solutions to some of the problems with Material, and there's a solid ongoing effort to continue solving more of these problems. It could probably benefit from borrowing some MD3 ideas, but I think MD3 might end up being just that - a source for some interesting ideas, and not much more.

aaronadamsCA avatar Aug 22 '22 15:08 aaronadamsCA

Every startup’s design is probably better off by conforming to a UI/UX, familiar to the users.

MUI Joy, with all respect, doesn’t offer that. It’s not Material Design by Google, not Fluent UI by Microsoft, and not Human Guidelines by Apple.

So if you agree with the argument, then MUI will become the same type of organization with Joy, serving own goals first and the community second as the majority of the community is better off conforming to familiar to the end users UI/UX patterns.

Please MUI, consider to adopt Material Design 3 sooner as it should be in MUI’s best interest as it is in the best interest of your community

o-alexandrov avatar Aug 22 '22 16:08 o-alexandrov

Every startup's design is probably better off by conforming to a UI/UX, familiar to the users.

@o-alexandrov I'm a believer in this as well. It's exactly why I initially got involved in Material UI. Now, when it comes to Material Design v3. As far as I know, it has little market adoption for the end-users compared to Material Design v2. Is there a desktop website with a significant audience that truly embraces it? I doubt Gmail qualify. Or on mobile, outside of the Google Pixel phone, who is using the default look & feel of Android (not Samsung, not Xiaomi, not OnePlus, etc.)? It feels like we have time.

MUI will become the same type of organization with Joy, serving its own goals first and the community second

To be clear, Joy UI was not created for the design needs of MUI as an organization. I mean, we are not using it for one of our products. It was created to serve the community, its goal is to reach a point of mass adoption to get the UI/UX familiarity effect for the end-users that your referred to. We have two options to reach this, either by becoming very popular through beauty as the main driving factor or by taking strong inspiration from existing popular patterns. We took a route closer to the former option (more creative) because Material UI is already on the latter option (following Material Design).

oliviertassinari avatar Aug 22 '22 18:08 oliviertassinari

It might be safe to expect, and we've been broadly discussing this internally, that Material UI won't go through a significant overhaul any time soon to be on par with what's currently out there of Material Design v3, simply because it's not yet mature and fully fleshed out yet. As @aaronadamsCA points out, there are misaligned expectations with what was once announced and what's available today in their documentation. However, as others shared (thanks @ZakAlbert!), it's very much possible to have a custom Material UI theme that replicates the newly introduced designed direction of MD v3 and that may be something we want to make easier to use/access somehow-all using the current available theming customization features on Material UI v5.

Regarding Material UI x Joy UI, they're not at risk of out-competing each other. As @oliviertassinari pointed out, Joy UI is a new take on the UI component library game to explore both a new design direction as well as new features and ideas. Our goal, in the long run, is that both of them share many of the same patterns and general DX but with the main and biggest difference being the design direction: Material UI obviously follows Material Design (for the time being, v2) and Joy UI follows one that we're proposing ourselves. Highly recommend reading the First look at Joy UI blog post for a bit more in-depth about this, though.

Hope all of that makes sense!

danilo-leal avatar Aug 23 '22 07:08 danilo-leal

Please also consider that a lot of current applications also have a mobile applications.

Companies want to use the same design system in both - web and mobile.

Bigger companies have also a lot of projects for web, written not always in react.

Biggest Material lib for react native already supports Material You. Flutter framework and others also.

Summing up Material You introduce changes even in colors so currently is hard to maintain a brand colors/system for all products if you rely on Material UI, especially when there is no plan to implement that in nearest future.

Is great you are introducing Joy UI, but for bigger players probably you will need to make libraries also for other frameworks, mobiles and UI/UX tools like Figma to fulfill their needs.

BTW, You all making such excellent work 🔥, just part of community have different needs.

unpxre avatar Aug 23 '22 13:08 unpxre

Biggest Material lib for react native already supports Material You. Flutter framework and others also.

@unpxre Awesome, thanks for mentioning it. I have added https://github.com/callstack/react-native-paper/issues/3126 and https://github.com/flutter/flutter/issues/103537 as benchmarks in this issue's description. It seems that they both went with the option to provide MD2 and MD3 as supported options (not dropping one for the other).

These two PRs could maybe be of some inspiration for us: https://github.com/flutter/flutter/pull/108704, https://github.com/callstack/react-native-paper/pull/3108.

oliviertassinari avatar Aug 23 '22 18:08 oliviertassinari

@unpxre Maybe you could add Material You to your best project: https://zseis.zgora.pl/ XD BTW, pozdro z elektrona :D

wybran avatar Aug 23 '22 19:08 wybran

@wybran I had made that page exactly half part of my life ago when I was sixteen, I'm glad after 16 years is still working properly, bringing new technologies for it I will leave for new high school students ;)

unpxre avatar Aug 24 '22 09:08 unpxre