[Amsterdam] Updating shadows by daveyholler · Pull Request #3428 · elastic/eui

daveyholler · 2020-05-05T22:31:35Z

Summary

Updates shadow styles to improve smoothness and their appearance on a variety of backgrounds.
The shadows now default to using black as their base color rather than a dark-tinted blueish color.
Sets a warning that the opacity variable will be deprecated.
Opacity values for dark themes are calculated based off a base value

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in IE11 and Firefox
Props have proper autodocs
Added documentation examples
Added or updated jest tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

kibanamachine · 2020-05-05T22:51:36Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3428/

cla-checker-service · 2020-05-07T20:48:38Z

💚 CLA has been signed

kibanamachine · 2020-05-07T21:09:22Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3428/

kibanamachine · 2020-05-07T21:38:25Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3428/

cchaos

Just a quick couple things on the aesthetics, and I'll be pushing up a PR for some code refactoring

src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss

cchaos · 2020-05-07T20:37:14Z

src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss

+@mixin euiSlightShadow($color: $euiShadowColor, $opacity: 0) {
+  @include opacityWarning;
+  box-shadow:
+    0 .8px .8px rgba($color, shadowOpacity(.04)),
+    0 2.3px 2px rgba($color, shadowOpacity(.03)),
+    0 5.4px 5px rgba($color, shadowOpacity(.02)),
+    0 18px 17px rgba($color, shadowOpacity(.01));
+}


This is the one that feels a little overkill to me. It's called slight but has 4 layers with the largest being 18px long. When I audit for usages of euiSlightShadow(), I get:

EuiButton/EuiButtonGroup: EUI only. Amsterdam removes the shadow

EuiKeyPadMenuItem: Component itself hasn't been altered for Amsterdam yet and is still using the border style panel

EuiStepHorizontal: With the color altered to blue, it's hardly visible at all and could probably just be removed

form/euiCustomControl: These are all the form elements like checkboxes, radios, and radio style handles for sliders. These are all roughly 16x16 components, pretty small, so it's odd to have such a large shadow.

I'd suggest keeping the slight shadow very slight. It's possible once all those above components have been touched we may have no need for it at all.

Good points. I'll clean that up.

src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss

cchaos · 2020-05-07T22:05:18Z

src/themes/eui-amsterdam/global_styling/functions/_shadows.scss

+@function shadowOpacity($opacity) {
+  @if (lightness($euiTextColor) < 50) {
+    @return $opacity * 1;
+  } @else {
+    @return $opacity * 2.5;
+  }
+}


kibanamachine · 2020-05-08T21:05:09Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3428/

- Removed modal override and changed the default theme usage since it wasn’t really changing the opacity noticeabley anyway - Moved warning messages to each mixin … sigh - Made the docs layout look more Amsterdamy

kibanamachine · 2020-05-12T17:52:07Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3428/

cchaos

👍 LGTM! Shadows are really nice on things like cards and such.

src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

daveyholler · 2020-05-12T22:43:00Z

Jenkins test this

kibanamachine · 2020-05-12T23:04:53Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3428/

daveyholler added style only labels May 5, 2020

johnbarrierwilson mentioned this pull request May 6, 2020

[META] EUI Amsterdam Roadmap #2639

Closed

daveyholler force-pushed the am/updating-shadows branch 2 times, most recently from b406fab to 4e67af2 Compare May 7, 2020 21:17

cchaos reviewed May 7, 2020

View reviewed changes

cchaos force-pushed the am/updating-shadows branch from 4e67af2 to 9869c6d Compare May 7, 2020 22:18

daveyholler and others added 6 commits May 12, 2020 10:09

Working on shadows.

3e354d8

Fixing a missing px unit on small shadows.

e6701ac

Fixing a unitless value on large shadows.

cf142d8

Code refactor

71e8d47

- Removed modal override and changed the default theme usage since it wasn’t really changing the opacity noticeabley anyway - Moved warning messages to each mixin … sigh - Made the docs layout look more Amsterdamy

Removing the largest value from large shadows.

a86497f

Adding missing semicolons

bbf5d15

daveyholler force-pushed the am/updating-shadows branch from 04bd4dc to bbf5d15 Compare May 12, 2020 17:27

daveyholler marked this pull request as ready for review May 12, 2020 17:28

daveyholler requested a review from cchaos May 12, 2020 17:28

cchaos approved these changes May 12, 2020

View reviewed changes

src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss Outdated Show resolved Hide resolved

Update src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss

e5fe5e8

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

daveyholler merged commit ff4447e into elastic:master May 13, 2020

thompsongl mentioned this pull request Jun 3, 2020

Upgrade EUI to v24.1.0 elastic/kibana#68141

Merged

clintandrewhall mentioned this pull request Apr 4, 2021

[tech-debt] Remove defunct opacity parameters from EUI shadow functions elastic/kibana#96191

Merged

Conversation

daveyholler commented May 5, 2020

Summary

Checklist

Uh oh!

kibanamachine commented May 5, 2020

Uh oh!

cla-checker-service bot commented May 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented May 7, 2020

Uh oh!

kibanamachine commented May 7, 2020

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cchaos May 7, 2020

Choose a reason for hiding this comment

Uh oh!

daveyholler May 7, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cchaos May 7, 2020

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented May 8, 2020

Uh oh!

kibanamachine commented May 12, 2020

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

daveyholler commented May 12, 2020

Uh oh!

kibanamachine commented May 12, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cla-checker-service bot commented May 7, 2020 •

edited

Loading