💄(frontend) add dark variant prop to Select primitive

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

@@ -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}