Align dashboard menu form primitives.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/dashboard/src/components/ui/dropdown-menu.tsx

@@ -10,6 +10,9 @@ import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { Spinner } from "./spinner";
 
+const dropdownMenuItemHighlightClasses =
+  "rounded-lg transition-colors duration-150 hover:transition-none focus:bg-zinc-100 dark:focus:bg-accent dark:focus:text-accent-foreground data-[highlighted]:bg-zinc-100 dark:data-[highlighted]:bg-accent dark:data-[highlighted]:text-accent-foreground";
+
 const DropdownMenuContext = React.createContext<{
   open: boolean,
   setOpen: (open: boolean) => void,
@@ -61,7 +64,9 @@ const DropdownMenuSubTrigger = forwardRefIfNeeded<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "stack-scope flex cursor-default select-none items-center rounded-sm px-3 py-2 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "stack-scope flex cursor-default select-none items-center px-3 py-2 text-sm outline-none",
+      dropdownMenuItemHighlightClasses,
+      "data-[state=open]:bg-zinc-100 dark:data-[state=open]:bg-accent dark:data-[state=open]:text-accent-foreground",
       inset && "pl-9",
       className
     )}
@@ -143,10 +148,9 @@ const DropdownMenuItem = forwardRefIfNeeded<
   return <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "stack-scope relative flex cursor-default select-none items-center rounded-lg py-2 text-sm outline-none transition-all duration-150 hover:transition-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "hover:bg-foreground/[0.05] hover:text-accent-foreground",
-      "focus:bg-foreground/[0.05] focus:text-accent-foreground",
-      "data-[highlighted]:bg-foreground/[0.05] data-[highlighted]:text-accent-foreground",
+      "stack-scope relative flex cursor-default select-none items-center py-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemHighlightClasses,
+      "hover:text-foreground",
       paddingClasses,
       className
     )}
@@ -176,7 +180,8 @@ const DropdownMenuCheckboxItem = forwardRefIfNeeded<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-2 pl-9 pr-3 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center py-2 pl-9 pr-3 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemHighlightClasses,
       className
     )}
     checked={checked}
@@ -200,7 +205,8 @@ const DropdownMenuRadioItem = forwardRefIfNeeded<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-2 pl-9 pr-3 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center py-2 pl-9 pr-3 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemHighlightClasses,
       className
     )}
     {...props}

apps/dashboard/src/components/ui/select.tsx

@@ -129,10 +129,9 @@ const SelectItem = forwardRefIfNeeded<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none text-muted-foreground transition-all duration-150 hover:transition-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "hover:bg-foreground/[0.05] hover:text-foreground",
-      "focus:bg-foreground/[0.05] focus:text-foreground",
-      "data-[highlighted]:bg-foreground/[0.05] data-[highlighted]:text-foreground",
+      "relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none text-muted-foreground transition-colors duration-150 hover:transition-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-zinc-100 focus:text-foreground dark:focus:bg-accent dark:focus:text-accent-foreground",
+      "data-[highlighted]:bg-zinc-100 data-[highlighted]:text-foreground dark:data-[highlighted]:bg-accent dark:data-[highlighted]:text-accent-foreground",
       className
     )}
     {...props}

apps/dashboard/src/components/ui/switch.tsx

@@ -17,7 +17,7 @@ const OriginalSwitch = forwardRefIfNeeded<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "stack-scope peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "stack-scope peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-zinc-200 dark:data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
@@ -25,7 +25,7 @@ const OriginalSwitch = forwardRefIfNeeded<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-white dark:bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>

apps/dashboard/src/components/ui/tabs.tsx

@@ -15,7 +15,7 @@ const TabsList = forwardRefIfNeeded<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "stack-scope inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "stack-scope inline-flex h-9 items-center justify-center rounded-lg bg-black/[0.08] dark:bg-white/[0.04] p-1 text-muted-foreground",
       className
     )}
     {...props}
@@ -30,7 +30,7 @@ const TabsTrigger = forwardRefIfNeeded<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white dark:data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=active]:ring-1 data-[state=active]:ring-black/[0.12] dark:data-[state=active]:ring-white/[0.06]",
       className
     )}
     {...props}