[Amsterdam] Updating shadows (#3428)

* Working on shadows.

* Fixing a missing px unit on small shadows.

* Fixing a unitless value on large shadows.

* Code refactor

- 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.

* Adding missing semicolons

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

Co-authored-by: Caroline Horn <[email protected]>

Co-authored-by: cchaos <[email protected]>
Co-authored-by: Caroline Horn <[email protected]>

src-docs/src/components/guide_components_amsterdam.scss

@@ -0,0 +1,8 @@
+.guide {
+  background: $euiPageBackgroundColor;
+}
+
+.guidePageContent {
+  @include euiBottomShadowFlat;
+  border-left: none;
+}

src-docs/src/theme_amsterdam_dark.scss

@@ -3,6 +3,7 @@
 
 @import '../../src/theme_amsterdam_dark';
 @import './components/guide_components';
+@import './components/guide_components_amsterdam';
 @import './views/suggest/global_filter_group';
 
 // Elastic charts

src-docs/src/theme_amsterdam_light.scss

@@ -3,6 +3,7 @@
 
 @import '../../src/theme_amsterdam_light';
 @import './components/guide_components';
+@import './components/guide_components_amsterdam';
 @import './views/suggest/global_filter_group';
 
 // Elastic charts

src-docs/src/views/guidelines/index.scss

@@ -144,8 +144,9 @@
 }
 
 .guideSass__shadow {
-  padding: $euiSize;
+  padding: $euiSizeXXL;
   background: $euiColorEmptyShade;
+  border-radius: $euiBorderRadius;
 
   & + .guideSass__shadow {
     margin-top: $euiSizeXL;

src-docs/src/views/guidelines/sass.js

@@ -49,10 +49,10 @@ const euiFontSizes = [
 ];
 
 const euiShadows = [
+  'euiBottomShadowFlat',
   'euiSlightShadow',
   'euiBottomShadowSmall',
   'euiBottomShadowMedium',
-  'euiBottomShadowFlat',
   'euiBottomShadow',
   'euiBottomShadowLarge',
 ];

src/components/modal/_modal.scss

@@ -122,7 +122,7 @@
     border: none;
 
     &.euiModal--confirmation {
-      @include euiBottomShadowLarge($euiShadowColorLarge, .1, false, true);
+      @include euiBottomShadowLarge($euiShadowColorLarge, $reverse: true);
       top: auto;
     }
 

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

@@ -0,0 +1 @@
+@import './shadows';

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

@@ -0,0 +1,10 @@
+// Use a function to determine shadow opacity based
+// on either a light or dark theme. We use a multiplier
+// of 1 for light themes and 2.5 for dark themes
+@function shadowOpacity($opacity) {
+  @if (lightness($euiTextColor) < 50) {
+    @return $opacity * 1;
+  } @else {
+    @return $opacity * 2.5;
+  }
+}

src/themes/eui-amsterdam/global_styling/index.scss

@@ -2,6 +2,7 @@
 
 // Functions need to be first, since we use them in our variables and mixin definitions
 @import '../../../global_styling/functions/index';
+@import 'functions/index';
 
 // Variables come next, and are used in some mixins
 @import '../../../global_styling/variables/index';

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

@@ -1,2 +1,3 @@
 @import 'button';
 @import 'panel';
+@import 'shadow';

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

@@ -43,7 +43,7 @@
 
         &#{$selector}--isClickable:hover,
         &#{$selector}--isClickable:focus {
-          @include euiBottomShadow($color: $euiShadowColor, $opacity: .2);
+          @include euiBottomShadow($color: $euiShadowColor);
         }
       }
     }

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

@@ -0,0 +1,105 @@
+// Opacity variables are included to prevent breaks in downstream
+// components. However they need to be removed prior to 8.0 and
+// all components that use them must be updated.
+
+// This file uses RGBA literal values responsibly
+// This file uses off-pattern indedentation to be more readible
+
+// sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes
+
+@mixin euiSlightShadow($color: $euiShadowColor, $opacity: 0) {
+  box-shadow:
+    0 .8px .8px rgba($color, shadowOpacity(.04)),
+    0 2.3px 2px rgba($color, shadowOpacity(.03));
+}
+
+@mixin euiBottomShadowSmall($color: $euiShadowColor, $opacity: 0) {
+  box-shadow:
+    0 .7px 1.4px rgba($color, shadowOpacity(.07)),
+    0 1.9px 4px rgba($color, shadowOpacity(.05)),
+    0 4.5px 10px rgba($color, shadowOpacity(.05)),
+    0 15px 32px rgba($color, shadowOpacity(.04));
+
+  @if ($opacity > 0) {
+    @warn 'The $opacity variable of euiBottomShadowSmall() will be depricated in a future version of EUI.';
+  }
+}
+
+@mixin euiBottomShadowMedium($color: $euiShadowColor, $opacity: 0) {
+  box-shadow:
+    0 .9px 4px -1px rgba($color, shadowOpacity(.08)),
+    0 2.6px 8px -1px rgba($color, shadowOpacity(.06)),
+    0 5.7px 12px -1px rgba($color, shadowOpacity(.05)),
+    0 15px 15px -1px rgba($color, shadowOpacity(.04));
+
+  @if ($opacity > 0) {
+    @warn 'The $opacity variable of euiBottomShadowMedium() will be depricated in a future version of EUI.';
+  }
+}
+
+// Similar to shadow medium but wihtout the bottom depth. Useful for popovers
+// that drop UP rather than DOWN.
+@mixin euiBottomShadowFlat($color: $euiShadowColor, $opacity: 0) {
+  box-shadow:
+    0 0 .8px rgba($color, shadowOpacity(.06)),
+    0 0 2px rgba($color, shadowOpacity(.04)),
+    0 0 5px rgba($color, shadowOpacity(.04)),
+    0 0 17px rgba($color, shadowOpacity(.03));
+
+  @if ($opacity > 0) {
+    @warn 'The $opacity variable of euiBottomShadowFlat() will be depricated in a future version of EUI.';
+  }
+}
+
+// adjustBorder allows the border color to match the drop shadow better so that there's better
+// distinction between element bounds and the shadow (crisper borders)
+@mixin euiBottomShadow(
+  $color: $euiShadowColorLarge,
+  $opacity: 0,
+  $adjustBorders: false  // Deprecated in Amsterdam but left for BWC
+) {
+  box-shadow:
+    0 1px 5px rgba($color, shadowOpacity(.1)),
+    0 3.6px 13px rgba($color, shadowOpacity(.07)),
+    0 8.4px 23px rgba($color, shadowOpacity(.06)),
+    0 23px 35px rgba($color, shadowOpacity(.05));
+
+  @if ($opacity > 0) {
+    @warn 'The $opacity variable of euiBottomShadow() will be depricated in a future version of EUI.';
+  }
+}
+
+@mixin euiBottomShadowLarge(
+  $color: $euiShadowColorLarge,
+  $opacity: 0,
+  $adjustBorders: false, // Deprecated in Amsterdam but left for BWC
+  $reverse: false
+) {
+  @if ($reverse) {
+    box-shadow:
+      0 2.7px -9px rgba($color, shadowOpacity(.13)),
+      0 9.4px -24px rgba($color, shadowOpacity(.09)),
+      0 21.8px -43px rgba($color, shadowOpacity(.08));
+  } @else {
+    box-shadow:
+      0 2.7px 9px rgba($color, shadowOpacity(.13)),
+      0 9.4px 24px rgba($color, shadowOpacity(.09)),
+      0 21.8px 43px rgba($color, shadowOpacity(.08));
+  }
+
+  @if ($opacity > 0) {
+    @warn 'The $opacity variable of euiBottomShadowLarge() will be depricated in a future version of EUI.';
+  }
+}
+
+@mixin euiSlightShadowHover($color: $euiShadowColor, $opacity: 0) {
+  box-shadow:
+    0 1px 5px rgba($color, shadowOpacity(.1)),
+    0 3.6px 13px rgba($color, shadowOpacity(.07)),
+    0 8.4px 23px rgba($color, shadowOpacity(.06)),
+    0 23px 35px rgba($color, shadowOpacity(.05));
+
+  @if ($opacity > 0) {
+    @warn 'The $opacity variable of euiSlightShadowHover() will be depricated in a future version of EUI.';
+  }
+}

src/themes/eui-amsterdam/global_styling/variables/_index.scss

@@ -1,3 +1,4 @@
 @import 'buttons';
 @import 'borders';
 @import 'typography';
+@import 'shadows';

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

@@ -0,0 +1,2 @@
+$euiShadowColor: $euiColorInk;
+$euiShadowColorLarge: $euiColorInk;