Adopt Material Design 3 specs

[adiramardiani]

I'm sure you're tracking the pulse of follows Material Guidelines standards like me and others. That being said, material ui version 3 (Material You) is out.

We should track Quasar being migrated from Material Design v2 to Material Design version v3. I know maybe this will be very hard because even now there are still many components that do not use Material Guidelines standards (such as text field floating label outlined, etc)

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

Thanks

https://m3.material.io/
https://material.io/

[hawkeye64]

Migrating to Material Design 3
https://material.io/blog/migrating-material-3

[joppehoekstra]

I would love to see this in a future release! Google is still working on their web implementation: https://github.com/material-components/material-web

[leonardorafael]

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

[pdanpdan]

@leonardorafael close but no cigar

[leonardorafael]

@pdanpdan no cigar only beer, do you like it?

[pdanpdan]

Honestly? It looks like my level of design :)

[NaturalDevCR]

Hopefully this is in the update path plans

[adwil13]

Any updates on this?

[tidan-16]

Any update?

[dmitriyzhukcoso]

Really looking forward to implementing Material design 3

[NaturalDevCR]

Any updates on this?

Doesn't seems to be in the Quasar path

[SwimGeek]

Seems like it's not ready yet: https://m3.material.io/develop/web "Web support is planned"

[jdriesen]

Would be great to see an (official) answer of Quasar ...

[7RST1]

Looks like Material web components 1.0 launched last week. Does that mean work on M3 for Quasar can start? 👀

material-components/material-web#5004

[HarisSpahija]

Its important to note that there should be a strategy to decide what material UI version to use and also have backwards compatibility.

Vuetify implemented a blueprint implementation that allows you to switch between material ui versions.
https://vuetifyjs.com/en/features/blueprints/

Perhaps we can expand on the quasar config to have a option to opt into M3 and allow users to transition to it?

// quasar.config file
module.exports = function (ctx) {
  /**
   * Spec of what version of Material UI will be used when
   * using Quasar components.
   *
   * @default 'm2'
   */
  spec?: "m2" | "m3" ;
}

Once we have this spec property we need to implement it in every component to support both versions. As of now there is usually (havent found any other situation yet) only one SASS file for each component. Im not sure how we can implement theming to components without overriding a lot of the styles already implemented. @rstoenescu how did you envision this? I can help with the implementation and going over each component to update it to M3 but we need to make a choice on how to implement this.

Tracking seperate tickets to update each component to use M3 styling would be a good start to start tackling the migration.

[pich]

Any updates on this?

[barisener]

any news about material 3 implementation?

[eqoram]

also interested in this!