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

Add dark variant to Select component following same approach as Popover
primitive. Same design inconsistency as other variant patterns.

Quick implementation pending UI v2 refactoring for unified variant
system across all components.
---
 src/frontend/src/primitives/Select.tsx | 36 +++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/primitives/Select.tsx b/src/frontend/src/primitives/Select.tsx
index f84cf7cb..990af07a 100644
--- a/src/frontend/src/primitives/Select.tsx
+++ b/src/frontend/src/primitives/Select.tsx
@@ -42,6 +42,31 @@ const StyledButton = styled(Button, {
       boxShadow: '0 1px 2px rgba(0 0 0 / 0.02)',
     },
   },
+  variants: {
+    variant: {
+      light: {},
+      dark: {
+        backgroundColor: 'primaryDark.100',
+        fontWeight: 'medium !important',
+        color: 'white',
+        '&[data-pressed]': {
+          backgroundColor: 'primaryDark.900',
+          color: 'primaryDark.100',
+        },
+        '&[data-hovered]': {
+          backgroundColor: 'primaryDark.300',
+          color: 'white',
+        },
+        '&[data-selected]': {
+          backgroundColor: 'primaryDark.700 !important',
+          color: 'primaryDark.100 !important',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'light',
+  },
 })
 
 const StyledSelectValue = styled(SelectValue, {
@@ -69,6 +94,7 @@ export const Select = <T extends string | number>({
   items,
   errors,
   placement,
+  variant = 'light',
   ...props
 }: Omit<SelectProps<object>, 'items' | 'label' | 'errors'> & {
   iconComponent?: RemixiconComponentType
@@ -76,12 +102,13 @@ export const Select = <T extends string | number>({
   items: Array<{ value: T; label: ReactNode }>
   errors?: ReactNode
   placement?: Placement
+  variant?: 'light' | 'dark'
 }) => {
   const IconComponent = iconComponent
   return (
     <RACSelect {...props}>
       {label}
-      <StyledButton>
+      <StyledButton variant={variant}>
         {!!IconComponent && (
           <StyledIcon>
             <IconComponent size={18} />
@@ -94,12 +121,15 @@ export const Select = <T extends string | number>({
         />
       </StyledButton>
       <StyledPopover placement={placement}>
-        <Box size="sm" type="popover" variant="control">
+        <Box size="sm" type="popover" variant={variant}>
           <ListBox>
             {items.map((item) => (
               <ListBoxItem
                 className={
-                  menuRecipe({ extraPadding: true, variant: 'light' }).item
+                  menuRecipe({
+                    extraPadding: true,
+                    variant: variant,
+                  }).item
                 }
                 id={item.value}
                 key={item.value}