Elevation as a themable container property

[12people]

I come from the Android/Flutter ecosystem, where there is a Material component that serves as a base styleable element container. This component underpins atomic widgets like buttons, but also larger surfaces like sheets, app bars, and sidebars.

This Material component has an elevation property that determines its shadows (or optionally, in the case of Material 3, its "tint" coloration).

For the purpose of theming, it'd be great to have something like this underpinning UI elements in libcosmic. Developers could specify the elevation for certain elements and then the theme would determine whether they appear:

• Raised with shadow effects, as in Material Design:
  

• Raised with blur and border effects, as with Apple's "Liquid glass":
  

• Raised with border and shadow effects, as on elementaryOS:
  

• Flat, just like currently in Cosmic:
  

---

This would enable much richer theming options while being extremely easy for devs to add to their own applications.