From 8f28a46a5f7637a2c18529d802e15609c92e3ac9 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 21 Aug 2025 11:20:49 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20add=20dark=20variant?=
 =?UTF-8?q?=20prop=20to=20Popover=20primitive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add dark variant following same approach as Menu component. Not ideal
as light/dark pattern differs from primary/primaryDark variants used
elsewhere.

Quick implementation that will be refactored during UI v2 migration for
better consistency across component variants.
---
 src/frontend/src/primitives/Popover.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/primitives/Popover.tsx b/src/frontend/src/primitives/Popover.tsx
index c0863a15..467c7669 100644
--- a/src/frontend/src/primitives/Popover.tsx
+++ b/src/frontend/src/primitives/Popover.tsx
@@ -46,6 +46,18 @@ const StyledOverlayArrow = styled(OverlayArrow, {
       transform: 'rotate(180deg) translateY(-1px)',
     },
   },
+  variants: {
+    variant: {
+      light: {},
+      dark: {
+        fill: 'primaryDark.50',
+        stroke: 'primaryDark.50',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'light',
+  },
 })
 
 /**
@@ -56,6 +68,7 @@ const StyledOverlayArrow = styled(OverlayArrow, {
  */
 export const Popover = ({
   children,
+  variant = 'light',
   ...dialogProps
 }: {
   children: [
@@ -64,20 +77,21 @@ export const Popover = ({
       | (({ close }: { close: () => void }) => ReactNode)
       | ReactNode,
   ]
+  variant?: 'dark' | 'light'
 } & DialogProps) => {
   const [trigger, popoverContent] = children
   return (
     <DialogTrigger>
       {trigger}
       <StyledPopover>
-        <StyledOverlayArrow>
+        <StyledOverlayArrow variant={variant}>
           <svg width={12} height={12} viewBox="0 0 12 12">
             <path d="M0 0 L6 6 L12 0" />
           </svg>
         </StyledOverlayArrow>
         <Dialog {...dialogProps}>
           {({ close }) => (
-            <Box size="sm" type="popover">
+            <Box size="sm" type="popover" variant={variant}>
               {typeof popoverContent === 'function'
                 ? popoverContent({ close })
                 : popoverContent}