fix(popover): update filter implementation to better match box-shadow

Author: cdransf

components/popover/dist/metadata.json

@@ -104,6 +104,7 @@
     "--mod-popover-background-color",
     "--mod-popover-border-color",
     "--mod-popover-border-width",
+    "--mod-popover-box-shadow",
     "--mod-popover-content-area-spacing",
     "--mod-popover-corner-radius",
     "--mod-popover-drop-shadow-blur",
@@ -123,6 +124,7 @@
     "--spectrum-popover-border-opacity",
     "--spectrum-popover-border-transparency",
     "--spectrum-popover-border-width",
+    "--spectrum-popover-box-shadow",
     "--spectrum-popover-content-area-spacing",
     "--spectrum-popover-corner-radius",
     "--spectrum-popover-drop-shadow-blur",

components/popover/index.css

@@ -49,7 +49,12 @@
 }
 
 .spectrum-Popover {
-	--spectrum-popover-filter: drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)));
+	/* filter is for popovers with a tip. we divide the blur by 2 to match the box-shadow rendering better. */
+	--spectrum-popover-filter: drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) calc(var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) / 2) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)));
+
+	/* box-shadow is for popovers without a tip. */
+	--spectrum-popover-box-shadow: var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color));
+
 	@extend %spectrum-overlay;
 
 	box-sizing: border-box;
@@ -69,7 +74,7 @@
 	border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
 
 	background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
-	filter: var(--mod-popover-filter, var(--spectrum-popover-filter));
+	box-shadow: var(--mod-popover-box-shadow, var(--spectrum-popover-box-shadow));
 
 	/* has tip triangle */
 	&.spectrum-Popover--withTip {