Improve admin mobile dark mode contrast

resources/js/admin/mobile/components/FormControls.tsx

@@ -253,9 +253,13 @@ export function MobileSelect({
   style,
   ...props
 }: MobileSelectProps) {
-  const { border, surface, text, primary, danger, subtle } = useAdminTheme();
-  const borderColor = hasError ? danger : border;
+  const { border, surface, text, primary, danger, subtle, glassSurfaceStrong, surfaceMuted, glassBorder } = useAdminTheme();
+  const borderColor = hasError ? danger : (glassBorder ?? border);
   const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
+  const triggerSurface = surfaceMuted ?? glassSurfaceStrong ?? surface;
+  const contentSurface = glassSurfaceStrong ?? surface;
+  const itemSurface = surface;
+  const itemHover = surfaceMuted ?? surface;
   const hasSizing =
     typeof containerStyle === 'object' &&
     containerStyle !== null &&
@@ -298,7 +302,7 @@ export function MobileSelect({
           borderRadius={12}
           borderWidth={1}
           borderColor={borderColor as any}
-          backgroundColor={surface as any}
+          backgroundColor={triggerSurface as any}
           paddingVertical={compact ? 6 : 10}
           paddingHorizontal="$3"
           disabled={props.disabled}
@@ -320,14 +324,22 @@ export function MobileSelect({
           zIndex={200000}
           {...({ borderRadius: 14 } as any)}
           borderWidth={1}
-          borderColor={border}
-          backgroundColor={surface as any}
+          borderColor={glassBorder ?? border}
+          backgroundColor={contentSurface as any}
         >
           <Select.Viewport {...({ padding: "$2" } as any)}>
             <Select.Group>
               {options.map((option, index) => (
-                <Select.Item index={index} key={`${option.value}-${index}`} value={option.value} disabled={option.disabled}>
-                  <Select.ItemText>{option.label}</Select.ItemText>
+                <Select.Item
+                  index={index}
+                  key={`${option.value}-${index}`}
+                  value={option.value}
+                  disabled={option.disabled}
+                  backgroundColor={itemSurface as any}
+                  hoverStyle={{ backgroundColor: itemHover as any }}
+                  pressStyle={{ backgroundColor: itemHover as any }}
+                >
+                  <Select.ItemText {...({ color: text } as any)}>{option.label}</Select.ItemText>
                 </Select.Item>
               ))}
             </Select.Group>