feat(theming): dark theme elevation helpers don't match material spec for elevation behavior

[michaelfaith]

Feature Description

The material spec for elevation with dark theme (https://material.io/design/color/dark-theme.html#properties), says that elevation should be reflected by an increased lightening of the surface color (by applying more and more opaque white overlays to a base surface color), rather than using drop shadow alone to reflect elevation (since that's not reliable when you have dark surface backgrounds). This request is to have the mat-elevation-z# classes and elevation mixins implement this lightening behavior from the spec, rather than only using drop shadow like it does for light theme.

[michaelfaith]

Wasn't sure if this should be tracked as a feature or a bug...

[jelbourn]

I'm not sure there's a way for us to realistically implement this today. Having the elevation classes "lighten" an existing background color isn't something that can be accomplished with CSS, and changing the classes to set fixed background colors based on the elevation would be too major of a breaking change to land.

I'll keep this in mind the next time we're revisiting how our theming system works, but it's unlikely this would make it in.

[michaelfaith]

@jelbourn thanks for the feedback. I wonder if it's something that could be introduced in some limited form. Like cards for instance. There's a card surface base color in the background palette, if the card styles used that as the base and a sass color function to derive the different elevation levels from the base color (mixing with white at the different percentages)? So it would still just use the one base color in the def, but derive the rest using a mixing function. I don't know, just a thought.

[mrmokwa]

I noticed that both foreground elevation color for dark and light themes are black.
Shouldn't we change the dark themes elevation to white? This way we can notice the elevation in dark themes

[michaelfaith]

@mrmokwa the box shadow color?

[mrmokwa]

I mean this one

[michaelfaith]

Ok yeah. Looking at how that value's used https://github.com/angular/components/blob/40f0674e3959d53cd6413cf3a5c30053ca0973d9/src/material/core/style/_elevation.scss that's the shadow color. You wouldn't want that to be anything other than black. In the Material spec, elevation is not communicated as much via drop shadow in dark theme like it is in light theme. The shadow is still black because that more closely mimics the real physical world. Shadows don't turn white in the real world either. But what does mimic the real world is the way surfaces react to a light source. So changing the surface color, brightening it the higher it is (i.e. the closer it is to the light source), is the primary indicator of elevation in dark theme, rather than shadow, which becomes secondary.

[michaelfaith]

I'm not sure there's a way for us to realistically implement this today. Having the elevation classes "lighten" an existing background color isn't something that can be accomplished with CSS, and changing the classes to set fixed background colors based on the elevation would be too major of a breaking change to land.

I'll keep this in mind the next time we're revisiting how our theming system works, but it's unlikely this would make it in.

@jelbourn I was thinking a bit more about this today, and went to check out how the React material library is doing it, since they seem to have this implemented. And surprisingly they're doing it with css, and I thought it was actually a pretty creative solution. Perhaps something that might work with the way Angular Material theming operates. What they're doing is sort of exploiting the backgroundImage css property and using a linear-gradient function to create a semi-transparent white overlay that mixes with whatever the backgroundColor is to lighten it. And the alpha value on the rgba function is just progressively higher the higher the elevation is.

So, for example, elevation of 2 would have this to match the spec

backgroundImage: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07));

While elevation 8 would have

backgroundImage: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));

With the mat-elevation-z# classes, I think it would be possible to have the define-dark-theme function include those kinds of backgroundImage adjustments, whereas the light-theme define function wouldn't. Though I'm not sure how to handle it with the sass elevation helper mixins, since those wouldn't know if the current theme was dark or light...

Just wanted to bring that here, in case it sparks some ideas.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.