[Feature Request] MD3 blueprint

[noobkilar]

Problem to solve

Since Material Design 3 has been release in 2021. I think it would be a good time to map all styles of MD3 to vuetify to follow the trend. Every changes and specs are on the website(https://m3.material.io/). The color theme is the biggest changes

Proposed solution

I know that you want to improve the styling of vuetify and since vuetify follow material design it could be a good start to support md2 and md3.

[J-Sek]

If I understand correctly you suggest we follow M3 color scheme:

• replace accent » tertiary
• replace surface-light » surface-dim
• add neutral and neutral variant
• adopt *-container and *-on-container variants
• adopt separate *-container-(lowest/low/standard/high/highest) for surface color
• remove? success, info and warning - keep only error

Some of these can be achieved today in any project using Vuetify - just add tertiary, neutral, etc. and set accent, success, etc. as pink so devs will immediately see they've used color name out of spec.

Edit: There is already a project that generates theme configuration from a single primary color: Zorf87/vuetify-m3-theme-builder. It could be interesting to consider integration:

• blueprints/md3 could become a function taking primary color and running @material/material-color-utilities to get more complete theme so we can avoid writing/copying utility methods (Playground)
• or it could be a feature in Vuetify Studio

[J-Sek]

I got pretty close to the reference colors - MD3 Palette Playground
It only required 16 additional background classes, 4 swaps and a workaround for error-container, because utilities are outdated (see #162).

The question is... assuming it is all built-in Vuetify... what do we gain?
Would those colors be utilized or just become a dead weight?

Edit: Integrating MD3 theme builder would open a way to auto-generate high contrast theme and potentially helping users comply with "European accessibility act". This is what I got from JSON export on material-theme-builder:

It's just impossible to lookup where did it come from - website repository contains only compiled WASM :(

[Harm-Nullix]

@J-Sek I think you did a amazing job on this playground.

The only regard I have is not being able to set multiple colors. So you can never add a "secondary" color,
or set a "warning" color, seen as an "extra color".
But it looks stunning!

Currently I am working on a sort of plugin kind of picker, that you can drop inside any js framework.

Therefor I need to leave out Vuetify, it does not bundle well when inside a shadowDom (I want it to work inside vuetify as well, but then it overrides the global Vuetifty)
I also wanted to preview different sets, and not lock into one contrast because end users can have specified that the need more contrast (MDN)

I am really struggling on what to put in and leave out to make it easy for "dumber" users to use and see what things do, but I am not getting far with this.

I am no designer but this is what I have right now using Material Web Components.

Popup trigger on webpage:

Fullscreen popup: