Fresh Paint: Material Design 3 Expressive Theme (WIP)

[anoyomoose]

TL;DR: https://github.com/anoyomoose/q2-fresh-paint-md3e

I've made something of a Material Design 3 Expressive theme. It's not finished, but it implements a lot of the specification. There are some convenience components, but it is essentially a CSS theme. I've had to remap some things (goodbye glossy, hello tonal) but usage is mostly drop-in from a code perspective.

That being said, MD3E has a different way of doing things - colors, designs, animations, groupings - that takes some getting used to (but definitely grows on you). Aside from the obvious color palette, I've scratched my head a couple of times if animations and morphs really are per spec, and if button groups really look the way the spec wants, but yes, they are, and they do. Try the button demo or the live palette changer (recommended). Either way, making your project look MD3E is more than just following the installation instructions, your design will probably also need updates.

Anyway, there's much more information on the GitHub page.

This is obviously for Quasar 2.x, I have no information about Quasar 3.x, if I'm duplicating work the author is also already doing, or how any of that is going to play out. But feel free to steal my stuff if it helps get it out the door :)

EDIT: annoyingly, links to this get filtered out on Reddit for some reason (not sure if they don't like me or the links specifically) so I can't spread the word. If anybody else wants to mention it on like /r/vuejs or so.. great :)

The journey

I really just wanted to style my app to be a little more shadcn-like, gotten bored of the ancient MD2 look. I've seen it mentioned in various places that CSS is just BEM-like and easy to style, but had never done it myself beyond minor adjustments - nor did I find any real examples of people who did. But rather than doing something completely different, I thought to start with something easier, like just bumping the Material spec version first. After all, how hard could that be?

So I looked around a bit, and people have been talking about UnoCSS like it's the solution to this. Somebody made a UnoCSS preset with styling support so I thought to use that to start out with. But I found many issues and inconsistencies, and after spending a few days trying to complete its MD2 package to parity with Quasar's actual CSS before I would start on MD3E, I found I had ended up with a massive UnoCSS project with definitions split over multiple files per component, horrible to read, added complexity to the build, and probably a nightmare to maintain. And for what? To get the rules translated to Tailwind? I don't even use Tailwind! Tree-shaking? Not actually operational in practise - still have to safelist your entire ruleset for it to work properly. Or maybe I just did it wrong 🤷‍♂️ At least now I know UnoCSS 😂

And thus, I restarted from scratch, with just scss, to see how far I could get. And this is the result: a core package, essentially a reusable theme engine Vite-plugin which supports stacking themes and user overrides, and the md3e package, an attempt at a theme.

[anoyomoose]

Added a live palette changer with several component examples too - https://anoyomoose.github.io/q2-fresh-paint-md3e/components/md3e-palette-test . Also demonstration some main components still need further updates :)

[stefanvanherwijnen]

Hey, your feedback on the preset is legit. Without support in the core of Quasar it quickly becomes a whitelist mess to get everything functioning properly.
However, the tree-shaking definitely works and greatly reduces the resulting CSS for small or simple websites. Try creating a One Page website with Quasar and analyzing it with Lighthouse, you definitely get a warning about a lot of unused CSS.
Also, it are utility classes and Tailwind (the framework) isn't used at all (although the same class names can be used).

If you have an entire SPA (e.g. the Quasar documentation) the difference is probably negligible.

Anyway, nice work 😄 .

[anoyomoose]

Well, perhaps it just didn't work well for my use case or the projects I tested it with. No matter, I feel mine is the right approach for me, for the moment. This is all more easily converted to other formats later than it is to do the reverse!

I did push my own changes of your project from before I switched to my own implementation here - https://github.com/anoyomoose/inactive-unocss-preset-quasar . Perhaps some of the changes I made are of use to you.

I have some of my own ideas on CSS tree-shaking I might try to work out.

[anoyomoose]

Here's my version of CSS tree-shaking - #18278

[anoyomoose]

Well, I realize I'm essentially screaming into the void here, but I wanted to give an update nevertheless, as it seems I have now covered all the base components we need for our own dashboards. Since my original post:

• The core injector has seen several changes in how the theme's and Quasar's CSS is merged
• The palette system has been overhauled, missing tokens added, info / warning / positive colors auto-adjust to the theme now as well, etc. Everything fully runtime controlled with CSS variables.
• I've rebuilt Google's material colors library in OkLAB (mostly OkLCH) which has all parameters fully configurable (the palette demo comes with full interactive configuration and save/load to clipboard). Google's own library has a few issues (primarily with tertiary colors) and can't even reproduce their own demo theme 🤦‍♂️ Android itself hardcodes some tokens because the library produces the wrong ones.
• Many small styling issues have been fixed
• Some helper components have been added (everything still possible with "raw" Quasar though)
• Significant restyles and additions:
  • Toolbars, docked and floating, including vibrant mode
  • (extended) FABs and FAB menus
  • QMenu, including vibrant mode
  • QSlider
  • QTabs
  • QBadge
  • Mini-Drawer: MD3 "standard" and MD3 Expressive "Navigation Rail"
  • Footer: narrow and wide "Navigation Bar"
  • Various transitions and animations changed
  • Dark mode (global as well as per-component) support has been completely redone
• The docs still need some work, particularly with live examples, I think

No doubt there will be many bugfixes still to come, perhaps some additions, but moving on from mainly working on the theme to actually applying it to our projects now (and actually continue progress on those projects 😂). It's not quite full MD3E but it's a good part there.

Give me a shout if anybody ends up using it.

[stefanvanherwijnen]

It looks like the old v3 milestones were removed, but a better CSS system was one of them.

@rstoenescu
Could you elaborate on which direction you want to continue for CSS (tree-shaking)? Looks like you have at least two people willing to contribute 🙂

[anoyomoose]

That CSS shaker I built can be much improved and integrated with very minor changes to Quasar itself, though once again, the ultimate benefit may be minor.

Same with the engine of my theme, a similar approach could be built into Quasar probably rather easily and better. My approach works, but it is fragile.