Changing up the look of box-shadows #607
Conversation
There was a problem hiding this comment.
The side shadow helps and the color is a nice touche. Big improvements.
I like softer shadows when they get further away so I'd change euiBottomShadow to .15 and euiBottomShadowLarge to .1 opacity.
Then the shadows kind of scale as they go up the "z".
I know these kind of comments can get subjective so feel free to ask another designer for their opinion if that doesn't sound right.
|
I do understand what you are saying, but I feel like that's leaning towards skeuomorphism, and that's not really what we're going for here. We're using shadows to emphasize and to distinguish it's self from other content (especially when it comes to overlays). For example, here is the modal with .2 opacity (left) and .1 opacity (right). We're really losing that separation between object and background.
Same with flyout.
The other option is to increase the opacity at the smaller scales but then I think we're emphasizing the shadow too much. It's definitely a give and take here about how we're using shadows. I spent almost a full day playing with opacities and spreads and I really feel like these are a good balance of aesthetics and utility. |
- Slight difference on small shadows - Button shadows now get a tint of the button’s main color - Small overlaying comps have slightly dark shadows but the also not bleed horizontally (not just below) - Large overlaying comps (like Modals) have much more pronounced shadows. - Had to add some new variables pertaining to shadows for better theming control.
…tton examples in dark mode
Examples:
Primary button hover state. See the slight blue tint to from the primary style.
Context menu/popover See the shadow is visible on the sides as well.
Modals Large stylized shadow
And in dark mode too