search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.02k stars 6.91k forks source link

Material Design 3 (Material You) #14332

Closed KaelWD closed 11 months ago

KaelWD commented 2 years ago

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:

KareemDa commented 2 years ago

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

RJZauner commented 2 years ago

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

Harm-Nullix commented 2 years ago

@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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

dessant commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

This bug is resolved as of the latest version.

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