From cfa84f4ef25114b1edae62537dd006dfd9fc5cf9 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 30 Oct 2023 12:26:37 -0700
Subject: [PATCH] [EuiPopover] Increase visibility in dark mode (#7310)

---
 .stylelintrc.js                               |  1 +
 .../__snapshots__/breadcrumb.test.tsx.snap    |  2 +-
 .../code_block_annotations.test.tsx.snap      |  2 +-
 .../collapsed_nav_popover.test.tsx.snap       |  2 +-
 .../__snapshots__/combo_box.test.tsx.snap     |  2 +-
 .../column_selector.test.tsx.snap             |  6 ++---
 .../column_sorting.test.tsx.snap              |  6 ++---
 .../keyboard_shortcuts.test.tsx.snap          |  6 ++---
 .../range/__snapshots__/range.test.tsx.snap   |  2 +-
 .../__snapshots__/super_select.test.tsx.snap  |  8 +++----
 .../__snapshots__/popover.rtl.test.tsx.snap   |  2 +-
 .../__snapshots__/popover.test.tsx.snap       | 22 +++++++++----------
 src/components/popover/popover.tsx            |  5 ++++-
 .../popover_arrow/_popover_arrow.styles.ts    |  9 ++------
 .../_popover_panel.test.tsx.snap              | 16 +++++++-------
 .../popover_panel/_popover_panel.styles.ts    | 12 +++++++++-
 .../popover/popover_panel/_popover_panel.tsx  |  9 +++++++-
 .../table_pagination.test.tsx.snap            |  2 +-
 .../__snapshots__/tour_step.test.tsx.snap     | 12 +++++-----
 upcoming_changelogs/7310.md                   |  1 +
 20 files changed, 72 insertions(+), 55 deletions(-)
 create mode 100644 upcoming_changelogs/7310.md

diff --git a/.stylelintrc.js b/.stylelintrc.js
index a9f4a8aa115..800fcafa1ff 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     // Enforce camelCase naming
     'selector-class-pattern': camelCaseRegex,
     'keyframes-name-pattern': camelCaseRegex,
+    'custom-property-pattern': camelCaseRegex,
 
     // Opinionated rules
     'declaration-no-important': true,
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
index 262b3d4247c..dd549f47e9c 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`EuiBreadcrumbContent renders breadcrumbs with \`popoverContent\` with p
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
diff --git a/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap b/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
index a4b92f4e7c6..dda64206c41 100644
--- a/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`EuiCodeBlockAnnotation renders 1`] = `
         aria-label="aria-label"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
index 40a7cb91633..adbd5df22ba 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`EuiCollapsedNavPopover renders the title and sub-items within the popov
         aria-label="aria-label"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPopover__panel  emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-hasTransform-right-euiCollapsedNavPopover__panel"
+        class="euiPanel euiPanel--plain euiPopover__panel  emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-hasTransform-right-euiCollapsedNavPopover__panel"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index a1e7f5f4028..fa570cd0649 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -134,7 +134,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
       <div
         aria-live="assertive"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-isAttached-bottom"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-isAttached-bottom"
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
index 936e7231fc4..a981d81e350 100644
--- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar b
   aria-describedby="generated-id"
   aria-live="off"
   aria-modal="true"
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-hasDragDrop-bottom"
   data-autofocus="true"
   data-popover-panel="true"
   role="dialog"
@@ -331,7 +331,7 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
   aria-describedby="generated-id"
   aria-live="off"
   aria-modal="true"
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-hasDragDrop-bottom"
   data-autofocus="true"
   data-popover-panel="true"
   role="dialog"
@@ -626,7 +626,7 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
   aria-describedby="generated-id"
   aria-live="off"
   aria-modal="true"
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-hasDragDrop-bottom"
   data-autofocus="true"
   data-popover-panel="true"
   role="dialog"
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
index 8a45ed03f72..bca6d1dc934 100644
--- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`useDataGridColumnSorting columnSorting [React 16] renders a toolbar but
   aria-describedby="generated-id"
   aria-live="off"
   aria-modal="true"
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-hasDragDrop-bottom"
   data-autofocus="true"
   data-popover-panel="true"
   role="dialog"
@@ -326,7 +326,7 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but
   aria-describedby="generated-id"
   aria-live="off"
   aria-modal="true"
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-hasDragDrop-bottom"
   data-autofocus="true"
   data-popover-panel="true"
   role="dialog"
@@ -616,7 +616,7 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
   aria-describedby="generated-id"
   aria-live="off"
   aria-modal="true"
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-hasDragDrop-bottom"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-hasDragDrop-bottom"
   data-autofocus="true"
   data-popover-panel="true"
   role="dialog"
diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
index 31bd284158a..28d0217fe06 100644
--- a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`useDataGridKeyboardShortcuts [React 16] returns a popover containing a
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -302,7 +302,7 @@ exports[`useDataGridKeyboardShortcuts [React 17] returns a popover containing a
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -556,7 +556,7 @@ exports[`useDataGridKeyboardShortcuts [React 18] returns a popover containing a
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap
index 321d8d80cea..565b5165668 100644
--- a/src/components/form/range/__snapshots__/range.test.tsx.snap
+++ b/src/components/form/range/__snapshots__/range.test.tsx.snap
@@ -457,7 +457,7 @@ exports[`EuiRange props slider should display in popover 1`] = `
         aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-isAttached-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-isAttached-bottom"
         data-popover-panel="true"
         data-test-subj="test"
         role="dialog"
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index c6ab8ddaf78..33d7f3423b6 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
     <div
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom"
+      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
       data-popover-panel="true"
       role="dialog"
       style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
@@ -365,7 +365,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
     <div
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom"
+      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
       data-popover-panel="true"
       role="dialog"
       style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
@@ -499,7 +499,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
     <div
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom"
+      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
       data-popover-panel="true"
       role="dialog"
       style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
@@ -632,7 +632,7 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
     <div
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPopover__panel goes-on-popover-panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isAttached-bottom"
+      class="euiPanel euiPanel--plain euiPopover__panel goes-on-popover-panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
       data-popover-panel="true"
       role="dialog"
       style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
diff --git a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
index b98a4c5d14a..a862cd18cc0 100644
--- a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
         aria-label="aria-label"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index 71c2e79afe9..c8db5f2c38e 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -158,7 +158,7 @@ exports[`EuiPopover props buffer 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -212,7 +212,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -279,7 +279,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -346,7 +346,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -400,7 +400,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -453,7 +453,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
       <div
         aria-live="assertive"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
@@ -499,7 +499,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel test emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel test emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -553,7 +553,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -607,7 +607,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom-euiTestCss"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom-euiTestCss"
         data-autofocus="true"
         data-popover-open="true"
         data-popover-panel="true"
@@ -662,7 +662,7 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
         aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom"
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index d8366f4a6e5..20022647df5 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -147,7 +147,10 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
   /**
    * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
    */
-  panelProps?: Omit<EuiPopoverPanelProps, 'style' | 'hasShadow' | 'hasBorder'>;
+  panelProps?: Omit<
+    EuiPopoverPanelProps,
+    'style' | 'hasShadow' | 'hasBorder' | 'color'
+  >;
   panelRef?: RefCallback<HTMLElement | null>;
   /**
    * Optional screen reader instructions to announce upon popover open,
diff --git a/src/components/popover/popover_arrow/_popover_arrow.styles.ts b/src/components/popover/popover_arrow/_popover_arrow.styles.ts
index 27ae9bb190a..c1d911738df 100644
--- a/src/components/popover/popover_arrow/_popover_arrow.styles.ts
+++ b/src/components/popover/popover_arrow/_popover_arrow.styles.ts
@@ -7,11 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import {
-  euiBackgroundColor,
-  logicals,
-  logicalSizeCSS,
-} from '../../../global_styling';
+import { logicals, logicalSizeCSS } from '../../../global_styling';
 import { UseEuiTheme } from '../../../services';
 
 export const popoverArrowSize = 'm';
@@ -19,8 +15,7 @@ export const popoverArrowSize = 'm';
 export const euiPopoverArrowStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
-  // Match the background color of panels
-  const borderColor = euiBackgroundColor(euiThemeContext, 'plain');
+  const borderColor = 'var(--euiPopoverBackgroundColor)';
   const arrowSize = euiTheme.size[popoverArrowSize];
 
   return {
diff --git a/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap b/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap
index 82568c7fe34..f95ad7de7c2 100644
--- a/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap
+++ b/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiPopoverPanel is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-hasTransform-euiTestCss"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-hasTransform-euiTestCss"
   data-popover-panel="true"
   data-test-subj="test subject string"
 />
@@ -11,14 +11,14 @@ exports[`EuiPopoverPanel is rendered 1`] = `
 
 exports[`EuiPopoverPanel props hasDragDrop is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-hasDragDrop"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-hasDragDrop"
   data-popover-panel="true"
 />
 `;
 
 exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-isOpen-hasTransform"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-isOpen-hasTransform"
   data-popover-open="true"
   data-popover-panel="true"
 />
@@ -26,7 +26,7 @@ exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
 
 exports[`EuiPopoverPanel props isOpen is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-isOpen-hasTransform"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-isOpen-hasTransform"
   data-popover-open="true"
   data-popover-panel="true"
 />
@@ -34,28 +34,28 @@ exports[`EuiPopoverPanel props isOpen is rendered 1`] = `
 
 exports[`EuiPopoverPanel props position bottom is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-hasTransform"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-hasTransform"
   data-popover-panel="true"
 />
 `;
 
 exports[`EuiPopoverPanel props position left is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-hasTransform"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-hasTransform"
   data-popover-panel="true"
 />
 `;
 
 exports[`EuiPopoverPanel props position right is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-hasTransform"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-hasTransform"
   data-popover-panel="true"
 />
 `;
 
 exports[`EuiPopoverPanel props position top is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-hasTransform"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-hasTransform"
   data-popover-panel="true"
 />
 `;
diff --git a/src/components/popover/popover_panel/_popover_panel.styles.ts b/src/components/popover/popover_panel/_popover_panel.styles.ts
index 80b1f37b4f2..f31ce85e5a1 100644
--- a/src/components/popover/popover_panel/_popover_panel.styles.ts
+++ b/src/components/popover/popover_panel/_popover_panel.styles.ts
@@ -13,7 +13,7 @@ import {
   euiShadowMedium,
 } from '../../../themes/amsterdam/global_styling/mixins';
 import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
-import { UseEuiTheme } from '../../../services';
+import { UseEuiTheme, tint } from '../../../services';
 import {
   euiCanAnimate,
   logicalCSS,
@@ -26,6 +26,7 @@ export const openAnimationTiming = 'slow';
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel. But don't animate position when using the attached mode like for inputs
  * 3. Make sure the panel stays within the window.
+ * 4. Make the popover lighter on dark mode (too hard to distinguish from plain bgs otherwise), and set a CSS var for the arrow to use
  */
 
 export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
@@ -48,6 +49,7 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
       backface-visibility: hidden;
       pointer-events: none;
       opacity: 0; /* 2 */
+      background-color: var(--euiPopoverBackgroundColor); /* 4 */
 
       ${euiCanAnimate} {
         /* 2 */
@@ -63,6 +65,14 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
       pointer-events: auto;
     `,
 
+    /* 4 */
+    light: css`
+      --euiPopoverBackgroundColor: ${euiTheme.colors.emptyShade};
+    `,
+    dark: css`
+      --euiPopoverBackgroundColor: ${tint(euiTheme.colors.emptyShade, 0.025)};
+    `,
+
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {
diff --git a/src/components/popover/popover_panel/_popover_panel.tsx b/src/components/popover/popover_panel/_popover_panel.tsx
index 4f5bc3ea889..5bf66472a10 100644
--- a/src/components/popover/popover_panel/_popover_panel.tsx
+++ b/src/components/popover/popover_panel/_popover_panel.tsx
@@ -51,8 +51,15 @@ export const EuiPopoverPanel: FunctionComponent<
   const euiThemeContext = useEuiTheme();
   const cssStyles = useMemo(() => {
     const styles = euiPopoverPanelStyles(euiThemeContext);
+    const colorMode = euiThemeContext.colorMode.toLowerCase() as Lowercase<
+      'LIGHT' | 'DARK'
+    >;
 
-    const sharedStyles = [styles.euiPopover__panel, isOpen && styles.isOpen];
+    const sharedStyles = [
+      styles.euiPopover__panel,
+      styles[colorMode],
+      isOpen && styles.isOpen,
+    ];
 
     if (hasDragDrop) {
       return [
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index f04c07d60e8..5f468124f99 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -209,7 +209,7 @@ exports[`EuiTablePagination renders 1`] = `
         aria-describedby="generated-id"
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-hasTransform"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-hasTransform"
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
index 05fce02e5ce..1de4a7cfa46 100644
--- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap
+++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`EuiTourStep accepts an array of buttons in the footerAction prop 1`] =
       aria-labelledby="generated-id"
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-left-euiTour-euiTestCss"
+      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
       data-popover-open="true"
       data-popover-panel="true"
       role="dialog"
@@ -138,7 +138,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
       aria-labelledby="generated-id"
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-left-euiTour-euiTestCss"
+      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
       data-popover-open="true"
       data-popover-panel="true"
       role="dialog"
@@ -236,7 +236,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
       aria-labelledby="generated-id"
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-left-euiTour-euiTestCss"
+      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
       data-popover-open="true"
       data-popover-panel="true"
       role="dialog"
@@ -339,7 +339,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
       aria-labelledby="generated-id"
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-left-euiTour-euiTestCss"
+      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
       data-popover-open="true"
       data-popover-panel="true"
       role="dialog"
@@ -426,7 +426,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
       aria-labelledby="generated-id"
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-left-euiTour-euiTestCss"
+      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
       data-popover-open="true"
       data-popover-panel="true"
       role="dialog"
@@ -519,7 +519,7 @@ exports[`EuiTourStep is rendered 1`] = `
       aria-labelledby="generated-id"
       aria-live="assertive"
       aria-modal="true"
-      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-hasTransform-left-euiTour-euiTestCss"
+      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-left-euiTour-euiTestCss"
       data-popover-open="true"
       data-popover-panel="true"
       role="dialog"
diff --git a/upcoming_changelogs/7310.md b/upcoming_changelogs/7310.md
new file mode 100644
index 00000000000..832776a1d1f
--- /dev/null
+++ b/upcoming_changelogs/7310.md
@@ -0,0 +1 @@
+- Updated the background color of `EuiPopover`s in dark mode to increase visibility & contrast against other page/panel backgrounds