ref(scraps): add shadows to overlay

Author: natemoo-re

static/app/components/core/slideOverPanel/slideOverPanel.tsx

@@ -145,7 +145,8 @@ const _SlideOverPanel = styled(motion.div, {
 
   z-index: ${p => p.theme.zIndex.modal - 1};
 
-  background: ${p => p.theme.tokens.background.primary};
+  background: ${p => p.theme.tokens.background.overlay};
+  box-shadow: ${p => p.theme.shadow.high};
   color: ${p => p.theme.tokens.content.primary};
 
   text-align: left;

static/app/components/globalDrawer/components.tsx

@@ -213,7 +213,6 @@ const DrawerContainer = styled('div')`
 `;
 
 const DrawerSlidePanel = styled(SlideOverPanel)`
-  box-shadow: 0 0 0 1px ${p => p.theme.shadow.high};
   border-left: 1px solid ${p => p.theme.tokens.border.primary};
   position: relative;
   pointer-events: auto;

static/app/components/overlay.tsx

@@ -136,11 +136,13 @@ const OverlayInner = styled(motion.div)<{
   placement?: OverlayProps['placement'];
 }>`
   position: relative;
-  background: ${p => p.theme.tokens.background.primary};
+  background: ${p => p.theme.tokens.background.overlay};
   border-radius: ${p => p.theme.radius.md};
   border: 1px solid ${p => p.theme.tokens.border.primary};
   /* eslint-disable-next-line @sentry/scraps/use-semantic-token */
-  box-shadow: 0 2px 0 ${p => p.theme.tokens.border.primary};
+  box-shadow:
+    0 2px 0 ${p => p.theme.tokens.border.primary},
+    ${p => p.theme.shadow.medium};
   font-size: ${p => p.theme.font.size.md};
 
   /* Override z-index from useOverlayPosition */