Material Design 3 (Material You)

[KaelWD]

https://m3.material.io/

As the specification is not complete yet, I propose the following changes for vuetify 3 with the rest coming in a future version:

• Update theme colors to match https://m3.material.io/styles/color/the-color-system/tokens
• Adaptive typography: https://m3.material.io/styles/typography/overview
• Update variant names to match https://m3.material.io/components/buttons/overview
  • elevated, filled, tonal, outlined, text
• Update state layers https://m3.material.io/foundations/interaction-states

[KareemDa]

@KaelWD
I'm ready to help in any tasks related to styles 🙋‍♂️

[RJZauner]

Let me know where I can help regarding Material Design 3.

[Harm-Nullix]

@johnleider ,

I know it must be heck busy with Vue 3 coming along and Vuetify 3 still being in alpha..

I do not have a clear picture of the impact Material Design 3 has on Vuetify and if this can be easily broken down into segments, but is there a roadmap steering towards this?

Also, isn't it fun that all the regarding parts are "3". You cannot not love it <3

Finally, if help is needed I could assist on some items 👍

[johnleider]

I'm pretty sure that we support everything in MD3 and then some; we support concepts and components from MD1 that no longer exist.

[clementmas]

Are you planning to change the default button styles in Vuetify 3 to follow the updated specs?

M3: Buttons are taller at 40dp and have fully rounded corners. Button labels use sentence case.

[johnleider]

Are you planning to change the default button styles in Vuetify 3 to follow the updated specs?

M3: Buttons are taller at 40dp and have fully rounded corners. Button labels use sentence case.

Yes, it is supported by way of blueprints: https://next.vuetifyjs.com/en/features/blueprints/

Right now they are limited to configuration through props only but we plan to expand that to include SCSS variables in the future.

For v3 we had to switch to the SASS module system to support variables at all; A future update to our tooling will be necessary.

With that being said, you the user will be able to do it locally no problem. I may add a boilerplate set of variables that can be copy and pasted in the interim.

[JosuaMeier]

Nice, I like the approach with the blueprints. Is there a plan when Material 3 blueprints will be released?

[dessant]

The Material 3 spec was incomplete and not ready for general use, but Google seems to have published an update in the last few weeks that mostly completes their component collection. A Vuetify blueprint might work in some cases, but there are several incompatibilities around typography and component states between M2 and M3, so a blueprint will only give you an approximation for how an M3 component would look like and behave, unless some components are redesigned with the new spec in mind.

[MatthewAry]

I was digging into this a bit, but I'm now getting pulled away. Here's my takeaways so far when comparing Vuetify 3 to MD3 spec.

Design Tokens (An adapter pattern approach could be applied to add support over the existing SASS variables. However, these design tokens also support dynamic changes to the global style, adding support for that would be needed) Tokens extend beyond colors, they also affect shadows, typography, shape, motion, etc. I think it touches every aspect of the style.

Elevation, MD3 has 6 elevation levels and Vuetify 3 has 25.

There is a lot more I need to comb over on the spec. Is it possible for Vuetify Blueprints to add sufficient functionality to become compliant?

What is the extent of it's compliance right now? Does anyone know?

[mubaidr]

Nice, I like the approach with the blueprints. Is there a plan when Material 3 blueprints will be released?

MD3 is available but has some glitches. You can try it right now.

[johnleider]

This bug is resolved as of the latest version.

If you have any questions, please reach out to us in our Discord community.

[valbertVieira]

some update about this ?

[Harm-Nullix]

@valbertVieira , dude this thread is resolved more then a year ago!

You can add the m3 blueprint to your createVuetify fn, that should get you rolling in any way!