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

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/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/_shadows.scss

@@ -1,6 +1,6 @@
 // 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 1.5 for dark themes
+// of 1 for light themes and 2.5 for dark themes
 @function shadowOpacity($opacity) {
   @if (lightness($euiTextColor) < 50) {
     @return $opacity * 1;

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

@@ -7,139 +7,107 @@
 
 // sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes
 
-// Future deprecation warning
-@mixin opacityWarning {
-  @if variable-exists(opacity) {
-    @warn 'The $opacity variable of EuiShadows will be depricated in a future version of EUI.';
-  }
-}
-
 @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));
+
+  @if ($opacity > 0) {
+    @warn 'The $opacity variable of euiSlightShadow() will be depricated in a future version of EUI.';
+  }
 }
 
 @mixin euiBottomShadowSmall($color: $euiShadowColor, $opacity: 0) {
-  @include opacityWarning;
   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) {
-  @include opacityWarning;
   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) {
-  @include opacityWarning;
   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) {
-  @include opacityWarning;
+@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));
 
-  // Never adjust borders if the border color is already on the dark side (dark theme)
-  @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) {
-    border-color: transparent;
-    border-top-color: transparent;
-    border-bottom-color: transparent;
+  @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,
+  $adjustBorders: false, // Deprecated in Amsterdam but left for BWC
   $reverse: false
 ) {
-  @include opacityWarning;
   @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)),
-      0 60px -65px rgba($color, shadowOpacity(.06));
+      0 -2.7px 9px rgba($color, shadowOpacity(.13)),
+      0 -9.4px 24px rgba($color, shadowOpacity(.09)),
+      0 -21.8px 43px rgba($color, shadowOpacity(.08)),
+      0 -60px 65px rgba($color, shadowOpacity(.06));
   } @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)),
       0 60px 65px rgba($color, shadowOpacity(.06));
-
   }
 
-  // Never adjust borders if the border color is already on the dark side (dark theme)
-  @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) {
-    border-color: transparent;
-    border-top-color: transparent;
-    border-bottom-color: transparent;
+  @if ($opacity > 0) {
+    @warn 'The $opacity variable of euiBottomShadowLarge() will be depricated in a future version of EUI.';
   }
 }
 
 @mixin euiSlightShadowHover($color: $euiShadowColor, $opacity: 0) {
-  @include opacityWarning;
   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));
-}
 
-@mixin euiSlightShadowActive($color: $euiShadowColor, $opacity: 0) {
-  @include opacityWarning;
-  @include euiSlightShadowHover($color);
-}
-
-@mixin euiOverflowShadow($direction: 'y', $side: 'both') {
-  $hideHeight: $euiScrollBarCorner * 1.25;
-  $gradient: null;
-  $gradientStart:
-  transparentize(red, .9) 0%,
-  transparentize(red, 0) $hideHeight;
-  $gradientEnd:
-  transparentize(red, 0) calc(100% - #{$hideHeight}),
-  transparentize(red, .9) 100%;
-  @if ($side == 'both' or $side == 'start' or $side == 'end') {
-    @if ($side == 'both') {
-      $gradient: $gradientStart, $gradientEnd;
-    } @else if ($side == 'start') {
-      $gradient: $gradientStart;
-    } @else {
-      $gradient: $gradientEnd;
-    }
-  } @else {
-    @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'";
-  }
-
-  @if ($direction == 'y') {
-    mask-image: linear-gradient(to bottom, #{$gradient});
-  } @else if ($direction == 'x') {
-    mask-image: linear-gradient(to right, #{$gradient});
-  } @else {
-    @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
+  @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/_shadows.scss

@@ -1,3 +1,2 @@
 $euiShadowColor: $euiColorInk;
 $euiShadowColorLarge: $euiColorInk;
-// #euiShadowTransparencyBase:

src/themes/eui-amsterdam/overrides/_index.scss

@@ -2,4 +2,3 @@
 @import 'button_empty';
 @import 'button_group';
 @import 'text';
-@import 'modal';