elevation.sass / shadows / colors

[florin-rotaru-md]

💡 Enhancement Idea: Make Shadow Utilities Even More Awesome

Hey Quasar team! 👋

First off, love what you've built with Quasar - it's such a joy to work with! I've been diving into the shadow utilities lately and had an idea that could make them even more flexible and developer-friendly.

What I Noticed

While exploring the codebase, I saw that the shadow utilities are generated like this:

@for $z from 1 through 24
  .shadow-#{$z}
    box-shadow: list.nth($shadows, $z)

https://github.com/quasarframework/quasar/blob/dev/ui/src/css/core/elevation.sass

This works perfectly for the default setup, but I thought - what if we could make this even more dynamic?

The Idea 💭

What if we changed that 24 to length($shadows)? Something like:

@for $z from 1 through length($shadows)
  .shadow-#{$z}
    box-shadow: list.nth($shadows, $z)

Why This Could Be Great 🌟

For Bundle Size Enthusiasts: Developers working on lightweight apps could define just the shadows they need (maybe only 3-5 levels) and automatically get smaller CSS bundles. Less is more, right?

For Design System Teams: They could perfectly match their shadow utilities to their actual design tokens - no more, no less.

For the Curious: Some teams might even want to experiment with more than 24 shadow levels for specific design needs.

For Everyone: It just feels more "Quasar-like" - flexible, smart, and respecting what developers actually want to do!

Real-World Example

Imagine a team that only uses shadows for cards and modals. They could do:

$shadows: (
  0 2px 4px rgba(0,0,0,0.1),
  0 4px 8px rgba(0,0,0,0.15),
  0 8px 16px rgba(0,0,0,0.20),
  0 16px 24px rgba(0,0,0,0.25)
);

And .... only .shadow-1, .shadow-2, .shadow-3, and .shadow-4 get generated. Clean bundle, happy developers! 🎉

🎨 Similar Opportunity with Colors?

While we're on the topic of making things more dynamic, I noticed something similar might apply to color utilities!

Imagine developers being able to:

• Create custom color palettes without unused CSS bloat
• Have design systems that perfectly match their utility classes

Just a thought - if the shadow approach works well, colors might be another great area!

What do you think?

I'd love to hear your thoughts on this!

[stefanvanherwijnen]

Have a look at UnoCSS or check out the preset I created for Quasar. You can get all the flexibility you need by creating a UnoCSS rule with your desired CSS output.

[florin-rotaru-md]

Thanks I ll check