[EuiPopover] Increase visibility in dark mode (#7310)

.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,

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"

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"

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"

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"

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"

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"

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"

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"

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;"

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"

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"

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,

src/components/popover/popover_arrow/_popover_arrow.styles.ts

@@ -7,20 +7,15 @@
  */
 
 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';
 
 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 {