Hacker News Reader

Comment by saagarjha | Hacker News Reader

> The higher a surface’s elevation (raising it closer to an implied light source), the lighter that surface becomes. That lightness is expressed through the application of a semi-transparent white overlay.

This is a strange choice, considering that the guide has a very strong discouragement against emulating shadows…

View on HN

What do you mean by discouragement against emulating shadows? As I read it the shadows stay the same as on the light theme. Are you referring to what they call "glows"?

> In a dark theme, components retain the same default elevation levels and shadows as components in lighter themes

It looks pretty good in the examples they give IMO. Considering that the default makes such heavy use of elevation it makes sense to keep that concept in the UI.

> Default themes use shadows to express elevation, while a dark theme also expresses elevation by adjusting the surface

I can't find it anymore, but the Material Design Guidelines had a thing at some point which warned against emulating shadows in place of actually changing elevation.

Well, all CSS shadows are emulated. CSS doesn't have a lighting engine. The docs you are thinking of [0] suggest that elevation is suggested by shadow morphology. Actual elevation in CSS (3D translations along the Z-axis) is useful for scaling effects to create a sense of perspective, but Material guidelines dictate you should just keep it simple and emulate a light source from which you derive a set of emulated shadows.

What works for me in this case is a Sass mixin which accepts a layer as an integer in the range 1-N and casts a shadow based on that layer and the total depth N. Consistency is key.

[0] https://material.io/design/environment/light-shadows.html#sh...

[1] https://material.io/design/environment/elevation.html#depict...

Reply on news.ycombinator.com