[Amsterdam] Remove borders from flyouts and popover arrows

CHANGELOG.md

@@ -16,6 +16,15 @@
 - Changed parameters for `euiPaletteColorBlind()` to an object ([#3387](https://github.com/elastic/eui/pull/3387))
 - Changed the default palette of `EUI_CHARTS_THEME_LIGHT/DARK` themes to the naturally sorted `euiPaletteColorBlind()` ([#3387](https://github.com/elastic/eui/pull/3387))
 
+**Theme: Amsterdam**
+
+- Updates shadow styles to improve smoothness and their appearance on a variety of backgrounds ([#3428](https://github.com/elastic/eui/pull/3428))
+- The shadows now default to using black as their base color rather than a dark-tinted blueish color ([#3428](https://github.com/elastic/eui/pull/3428))
+- Sets a warning that the opacity variable will be deprecated ([#3428](https://github.com/elastic/eui/pull/3428))
+- Opacity values for dark themes are calculated based off a base value ([#3428](https://github.com/elastic/eui/pull/3428))
+- Removes borders from left side of flyouts ([#3477](https://github.com/elastic/eui/pull/3477))
+- Removes borders from popover arrows ([#3477](https://github.com/elastic/eui/pull/3477))
+
 ## [`23.3.0`](https://github.com/elastic/eui/tree/v23.3.0)
 
 - Added `aria-hidden = true` to `EuiRangeSlider` and `EuiRangeTrack` if `showInput = true` ([#3423](https://github.com/elastic/eui/pull/3423))

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

@@ -0,0 +1,3 @@
+.euiFlyout {
+  border-left: none;
+}

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

@@ -1,4 +1,6 @@
 @import 'button';
 @import 'button_empty';
 @import 'button_group';
+@import 'flyout';
+@import 'popover';
 @import 'text';

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

@@ -0,0 +1,59 @@
+.euiPopover__panel {
+  .euiPopover__panelArrow {
+    &:before {
+      filter: blur(3px);
+    }
+
+    &.euiPopover__panelArrow--top {
+      &:before {
+        bottom: -$euiPopoverArrowSize;
+        border-top-color: $euiColorInk;
+        opacity: .2;
+        clip: rect(0, $euiPopoverArrowSize * 2 + 5px, $euiPopoverArrowSize + 5px, -5px);
+      }
+
+      &:after {
+        bottom: -$euiPopoverArrowSize;
+      }
+    }
+
+    &.euiPopover__panelArrow--right {
+      &:before {
+        left: -$euiPopoverArrowSize;
+        border-right-color: $euiColorInk;
+        opacity: .2;
+        clip: rect(-5px, $euiPopoverArrowSize, $euiPopoverArrowSize * 2 + 5px, -5px);
+      }
+
+      &:after {
+        left: -$euiPopoverArrowSize;
+      }
+    }
+
+    &.euiPopover__panelArrow--bottom {
+      &:before {
+        top: -$euiPopoverArrowSize;
+        border-bottom-color: $euiColorInk;
+        opacity: .2;
+        clip: rect(-5px, $euiPopoverArrowSize * 2 + 5px, $euiPopoverArrowSize, -5px);
+      }
+
+      &:after {
+        top: -$euiPopoverArrowSize;
+      }
+    }
+
+    &.euiPopover__panelArrow--left {
+      &:before {
+        right: -$euiPopoverArrowSize;
+        border-left-color: $euiColorInk;
+        opacity: .2;
+        clip: rect(-5px, $euiPopoverArrowSize + 5px, $euiPopoverArrowSize * 2 + 5px, 0);
+      }
+
+      &:after {
+        right: -$euiPopoverArrowSize;
+      }
+    }
+  }
+}