From fbb5cfcd11ba4fda0b24a6028feb72bf95167da7 Mon Sep 17 00:00:00 2001
From: Chris Estreich <cestreich@gmail.com>
Date: Tue, 18 Mar 2025 22:07:19 -0700
Subject: [PATCH] More theme fixes for select, dropdown & command (#1789)

* More theme fixes

* Fix typo

* Add changeset

* Fix button variant

* More fixes

* More tweaks

* More tweaks

* Fix test

* Fix tsc errors
---
 .changeset/happy-ladybugs-stare.md            |  5 ++
 .../src/components/settings/ModelPicker.tsx   |  6 +-
 .../ui/__tests__/select-dropdown.test.tsx     |  5 +-
 .../src/components/ui/autosize-textarea.tsx   |  5 +-
 webview-ui/src/components/ui/button.tsx       | 17 +++---
 webview-ui/src/components/ui/command.tsx      |  8 ++-
 .../src/components/ui/dropdown-menu.tsx       | 55 ++++---------------
 webview-ui/src/components/ui/popover.tsx      |  5 +-
 .../src/components/ui/select-dropdown.tsx     | 12 ++--
 webview-ui/src/components/ui/select.tsx       | 26 ++++++---
 webview-ui/src/components/ui/textarea.tsx     |  5 +-
 webview-ui/src/index.css                      |  3 +-
 .../src/stories/DropdownMenu.stories.tsx      | 21 -------
 13 files changed, 68 insertions(+), 105 deletions(-)
 create mode 100644 .changeset/happy-ladybugs-stare.md

diff --git a/.changeset/happy-ladybugs-stare.md b/.changeset/happy-ladybugs-stare.md
new file mode 100644
index 0000000000..831b72b19d
--- /dev/null
+++ b/.changeset/happy-ladybugs-stare.md
@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+VSCode theme fixes for select, dropdown and command
diff --git a/webview-ui/src/components/settings/ModelPicker.tsx b/webview-ui/src/components/settings/ModelPicker.tsx
index 9f251667f1..0e3bf4e856 100644
--- a/webview-ui/src/components/settings/ModelPicker.tsx
+++ b/webview-ui/src/components/settings/ModelPicker.tsx
@@ -116,7 +116,7 @@ export const ModelPicker = ({
 				<Popover open={open} onOpenChange={onOpenChange}>
 					<PopoverTrigger asChild>
 						<Button
-							variant="outline"
+							variant="combobox"
 							role="combobox"
 							aria-expanded={open}
 							className="w-full justify-between">
@@ -138,7 +138,7 @@ export const ModelPicker = ({
 								{searchValue.length > 0 && (
 									<div className="absolute right-2 top-0 bottom-0 flex items-center justify-center">
 										<X
-											className="opacity-25 hover:opacity-100 cursor-pointer size-4 bg-vscode-button-secondaryBackground rounded-full p-0.5"
+											className="text-vscode-input-foreground opacity-50 hover:opacity-100 size-4 p-0.5 cursor-pointer"
 											onClick={onClearSearch}
 										/>
 									</div>
@@ -152,7 +152,7 @@ export const ModelPicker = ({
 											{model}
 											<Check
 												className={cn(
-													"ml-auto",
+													"size-4 p-0.5 ml-auto",
 													model === selectedModelId ? "opacity-100" : "opacity-0",
 												)}
 											/>
diff --git a/webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx b/webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx
index 7e57d603ff..24429533e7 100644
--- a/webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx
+++ b/webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx
@@ -1,4 +1,4 @@
-// npx jest webview-ui/src/components/ui/__tests__/select-dropdown.test.tsx
+// npx jest src/components/ui/__tests__/select-dropdown.test.tsx
 
 import { ReactNode } from "react"
 import { render, screen, fireEvent } from "@testing-library/react"
@@ -168,10 +168,9 @@ describe("SelectDropdown", () => {
 				/>,
 			)
 
-			// The shortcut text should be rendered as a div, not a dropdown item
 			expect(screen.queryByText(shortcutText)).toBeInTheDocument()
 			const dropdownItems = screen.getAllByTestId("dropdown-item")
-			expect(dropdownItems.length).toBe(1) // Only one regular option
+			expect(dropdownItems.length).toBe(2)
 		})
 
 		it("handles action options correctly", () => {
diff --git a/webview-ui/src/components/ui/autosize-textarea.tsx b/webview-ui/src/components/ui/autosize-textarea.tsx
index 653406cddc..d23f7a4360 100644
--- a/webview-ui/src/components/ui/autosize-textarea.tsx
+++ b/webview-ui/src/components/ui/autosize-textarea.tsx
@@ -91,7 +91,10 @@ export const AutosizeTextarea = React.forwardRef<AutosizeTextAreaRef, AutosizeTe
 				value={value}
 				ref={textAreaRef}
 				className={cn(
-					"flex w-full text-vscode-input-foreground border border-vscode-input-border bg-vscode-input-background rounded-xs ring-offset-background placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50 scrollbar-hide",
+					"flex w-full rounded-xs ring-offset-background placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50 scrollbar-hide",
+					"border-[var(--vscode-input-border,var(--vscode-input-background))] focus-visible:border-vscode-focusBorder",
+					"bg-vscode-input-background",
+					"text-vscode-input-foreground",
 					className,
 				)}
 				onChange={(e) => {
diff --git a/webview-ui/src/components/ui/button.tsx b/webview-ui/src/components/ui/button.tsx
index 2e83e86e69..209646571e 100644
--- a/webview-ui/src/components/ui/button.tsx
+++ b/webview-ui/src/components/ui/button.tsx
@@ -5,22 +5,21 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xs text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
 	{
 		variants: {
 			variant: {
 				default:
-					"border border-vscode-input-border bg-primary text-primary-foreground shadow hover:bg-primary/90 cursor-pointer",
-				destructive:
-					"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 cursor-pointer",
+					"border border-vscode-input-border bg-primary text-primary-foreground shadow hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
 				outline:
-					"border border-vscode-input-border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground cursor-pointer",
+					"border border-vscode-input-border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
 				secondary:
-					"border border-vscode-input-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 cursor-pointer",
-				ghost: "hover:bg-accent hover:text-accent-foreground cursor-pointer",
-				link: "text-primary underline-offset-4 hover:underline cursor-pointer",
+					"border border-vscode-input-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
 				combobox:
-					"text-vscode-font-size font-normal text-popover-foreground bg-vscode-input-background border border-vscode-dropdown-border hover:bg-vscode-input-background/80 cursor-pointer",
+					"border border-vscode-dropdown-border focus-visible:border-vscode-focusBorder bg-vscode-dropdown-background hover:bg-transparent text-vscode-dropdown-foreground font-normal",
 			},
 			size: {
 				default: "h-7 px-3",
diff --git a/webview-ui/src/components/ui/command.tsx b/webview-ui/src/components/ui/command.tsx
index 02a8203207..033ec38571 100644
--- a/webview-ui/src/components/ui/command.tsx
+++ b/webview-ui/src/components/ui/command.tsx
@@ -14,7 +14,7 @@ const Command = React.forwardRef<
 	<CommandPrimitive
 		ref={ref}
 		className={cn(
-			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			"flex h-full w-full flex-col overflow-hidden rounded-xs bg-popover text-popover-foreground",
 			className,
 		)}
 		{...props}
@@ -43,7 +43,7 @@ const CommandInput = React.forwardRef<
 		<CommandPrimitive.Input
 			ref={ref}
 			className={cn(
-				"flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-10 w-full rounded-xs bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
@@ -108,7 +108,9 @@ const CommandItem = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-base text-vscode-dropdown-foreground outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-vscode-list-activeSelectionBackground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			"relative flex cursor-pointer gap-2 select-none items-center rounded-xs px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			"data-[selected=true]:bg-vscode-list-activeSelectionBackground data-[selected=true]:text-vscode-list-activeSelectionForeground",
+			"text-vscode-dropdown-foreground",
 			className,
 		)}
 		{...props}
diff --git a/webview-ui/src/components/ui/dropdown-menu.tsx b/webview-ui/src/components/ui/dropdown-menu.tsx
index 192f3210a8..bbb084524b 100644
--- a/webview-ui/src/components/ui/dropdown-menu.tsx
+++ b/webview-ui/src/components/ui/dropdown-menu.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { PortalProps } from "@radix-ui/react-portal"
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import { CheckIcon, DotFilledIcon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
 
@@ -13,45 +13,8 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-const DropdownMenuSubTrigger = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-		inset?: boolean
-	}
->(({ className, inset, children, ...props }, ref) => (
-	<DropdownMenuPrimitive.SubTrigger
-		ref={ref}
-		className={cn(
-			"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-vscode-list-activeSelectionBackground data-[state=open]:bg-vscode-list-activeSelectionBackground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-			inset && "pl-8",
-			className,
-		)}
-		{...props}>
-		{children}
-		<ChevronRightIcon className="ml-auto" />
-	</DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-	<DropdownMenuPrimitive.SubContent
-		ref={ref}
-		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-			className,
-		)}
-		{...props}
-	/>
-))
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
-
 const DropdownMenuContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & Pick<PortalProps, "container">
@@ -61,8 +24,11 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+				"z-50 min-w-[8rem] overflow-hidden rounded-xs p-1 shadow-xs",
 				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"border border-vscode-focusBorder",
+				"bg-vscode-dropdown-background",
+				"text-vscode-dropdown-foreground",
 				className,
 			)}
 			{...props}
@@ -80,7 +46,8 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-vscode-list-activeSelectionBackground focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 active:opacity-90",
+			"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 active:opacity-90",
+			"focus:bg-vscode-list-activeSelectionBackground focus:text-vscode-list-activeSelectionForeground",
 			inset && "pl-8",
 			className,
 		)}
@@ -96,7 +63,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-vscode-list-activeSelectionBackground focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"focus:bg-vscode-list-activeSelectionBackground focus:text-vscode-list-activeSelectionForeground",
 			className,
 		)}
 		checked={checked}
@@ -152,7 +120,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<DropdownMenuPrimitive.Separator
 		ref={ref}
-		className={cn("-mx-1 my-1 h-px bg-vscode-input-border", className)}
+		className={cn("-mx-1 my-1 h-px bg-vscode-dropdown-foreground/10", className)}
 		{...props}
 	/>
 ))
@@ -175,8 +143,5 @@ export {
 	DropdownMenuShortcut,
 	DropdownMenuGroup,
 	DropdownMenuPortal,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
 	DropdownMenuRadioGroup,
 }
diff --git a/webview-ui/src/components/ui/popover.tsx b/webview-ui/src/components/ui/popover.tsx
index 9fc035ad2a..acded1d0ad 100644
--- a/webview-ui/src/components/ui/popover.tsx
+++ b/webview-ui/src/components/ui/popover.tsx
@@ -20,7 +20,10 @@ const PopoverContent = React.forwardRef<
 			align={align}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 w-72 rounded-xs border border-vscode-dropdown-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 w-72 rounded-xs p-4 shadow-xs outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"bg-popover",
+				"border border-vscode-focusBorder",
+				"text-popover-foreground",
 				className,
 			)}
 			{...props}
diff --git a/webview-ui/src/components/ui/select-dropdown.tsx b/webview-ui/src/components/ui/select-dropdown.tsx
index 50c81055d9..13f9ce1c5c 100644
--- a/webview-ui/src/components/ui/select-dropdown.tsx
+++ b/webview-ui/src/components/ui/select-dropdown.tsx
@@ -117,10 +117,7 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
 					onEscapeKeyDown={() => setOpen(false)}
 					onInteractOutside={() => setOpen(false)}
 					container={portalContainer}
-					className={cn(
-						"bg-vscode-dropdown-background text-vscode-dropdown-foreground border border-vscode-dropdown-border z-50",
-						contentClassName,
-					)}>
+					className={contentClassName}>
 					{options.map((option, index) => {
 						if (option.type === DropdownOptionType.SEPARATOR) {
 							return <DropdownMenuSeparator key={`sep-${index}`} />
@@ -131,9 +128,9 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
 							(option.disabled && shortcutText && option.label.includes(shortcutText))
 						) {
 							return (
-								<div key={`label-${index}`} className="px-2 py-1.5 text-xs opacity-50">
+								<DropdownMenuItem key={`label-${index}`} disabled>
 									{option.label}
-								</div>
+								</DropdownMenuItem>
 							)
 						}
 
@@ -141,12 +138,11 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
 							<DropdownMenuItem
 								key={`item-${option.value}`}
 								disabled={option.disabled}
-								className="text-xs focus:bg-vscode-list-activeSelectionBackground cursor-pointer"
 								onClick={() => handleSelect(option)}>
 								{option.label}
 								{option.value === value && (
 									<DropdownMenuShortcut>
-										<Check className="w-3 h-3" />
+										<Check className="size-4 p-0.5" />
 									</DropdownMenuShortcut>
 								)}
 							</DropdownMenuItem>
diff --git a/webview-ui/src/components/ui/select.tsx b/webview-ui/src/components/ui/select.tsx
index 3d8667423b..56b9378a2e 100644
--- a/webview-ui/src/components/ui/select.tsx
+++ b/webview-ui/src/components/ui/select.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { PortalProps } from "@radix-ui/react-portal"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -22,13 +22,16 @@ function SelectTrigger({ className, children, ...props }: React.ComponentProps<t
 		<SelectPrimitive.Trigger
 			data-slot="select-trigger"
 			className={cn(
-				"border-vscode-input-border data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-vscode-focusBorder aria-invalid:border-destructive flex h-7 w-fit items-center justify-between gap-2 rounded-xs border bg-vscode-input-background hover:bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
+				"data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground aria-invalid:border-destructive flex h-7 w-fit items-center justify-between gap-2 rounded-xs px-3 py-2 whitespace-nowrap transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
+				"border border-vscode-dropdown-border aria-expanded:border-vscode-focusBorder focus-visible:border-vscode-focusBorder",
+				"bg-vscode-dropdown-background hover:bg-transparent",
+				"text-vscode-dropdown-foreground",
 				className,
 			)}
 			{...props}>
 			{children}
 			<SelectPrimitive.Icon asChild>
-				<ChevronDownIcon className="size-4 opacity-50" />
+				<ChevronDown className="size-4 opacity-50" />
 			</SelectPrimitive.Icon>
 		</SelectPrimitive.Trigger>
 	)
@@ -46,7 +49,10 @@ function SelectContent({
 			<SelectPrimitive.Content
 				data-slot="select-content"
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-xs border border-vscode-focusBorder shadow-md",
+					"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-xs shadow-xs",
+					"bg-popover",
+					"border border-vscode-focusBorder",
+					"text-popover-foreground",
 					position === "popper" &&
 						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 					className,
@@ -83,13 +89,15 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
 		<SelectPrimitive.Item
 			data-slot="select-item"
 			className={cn(
-				"focus:bg-vscode-list-activeSelectionBackground focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-pointer",
+				"[&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-pointer",
+				"focus:bg-vscode-list-activeSelectionBackground focus:text-vscode-list-activeSelectionForeground",
+				"text-vscode-dropdown-foreground",
 				className,
 			)}
 			{...props}>
 			<span className="absolute right-2 flex size-3.5 items-center justify-center">
 				<SelectPrimitive.ItemIndicator>
-					<CheckIcon className="size-4" />
+					<Check className="size-4 p-0.5" />
 				</SelectPrimitive.ItemIndicator>
 			</span>
 			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -101,7 +109,7 @@ function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Se
 	return (
 		<SelectPrimitive.Separator
 			data-slot="select-separator"
-			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			className={cn("bg-vscode-dropdown-foreground/10 pointer-events-none -mx-1 my-1 h-px", className)}
 			{...props}
 		/>
 	)
@@ -113,7 +121,7 @@ function SelectScrollUpButton({ className, ...props }: React.ComponentProps<type
 			data-slot="select-scroll-up-button"
 			className={cn("flex cursor-default items-center justify-center py-1", className)}
 			{...props}>
-			<ChevronUpIcon className="size-4" />
+			<ChevronUp className="size-4" />
 		</SelectPrimitive.ScrollUpButton>
 	)
 }
@@ -127,7 +135,7 @@ function SelectScrollDownButton({
 			data-slot="select-scroll-down-button"
 			className={cn("flex cursor-default items-center justify-center py-1", className)}
 			{...props}>
-			<ChevronDownIcon className="size-4" />
+			<ChevronDown className="size-4" />
 		</SelectPrimitive.ScrollDownButton>
 	)
 }
diff --git a/webview-ui/src/components/ui/textarea.tsx b/webview-ui/src/components/ui/textarea.tsx
index 0880553057..33cdc162c9 100644
--- a/webview-ui/src/components/ui/textarea.tsx
+++ b/webview-ui/src/components/ui/textarea.tsx
@@ -7,7 +7,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"tex
 		return (
 			<textarea
 				className={cn(
-					"flex min-h-[60px] w-full text-vscode-input-foreground border border-vscode-input-border bg-vscode-input-background rounded-xs px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+					"flex min-h-[60px] w-full rounded-xs px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50",
+					"border-[var(--vscode-input-border,var(--vscode-input-background))] focus-visible:border-vscode-focusBorder",
+					"bg-vscode-input-background",
+					"text-vscode-input-foreground",
 					className,
 				)}
 				ref={ref}
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index cebc4240f8..fd63e508ab 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -97,6 +97,7 @@
 	--color-vscode-list-hoverBackground: var(--vscode-list-hoverBackground);
 	--color-vscode-list-focusBackground: var(--vscode-list-focusBackground);
 	--color-vscode-list-activeSelectionBackground: var(--vscode-list-activeSelectionBackground);
+	--color-vscode-list-activeSelectionForeground: var(--vscode-list-activeSelectionForeground);
 
 	--color-vscode-toolbar-hoverBackground: var(--vscode-toolbar-hoverBackground);
 
@@ -133,7 +134,7 @@
 		--muted: var(--vscode-disabledForeground);
 		--muted-foreground: var(--vscode-descriptionForeground);
 		--accent: var(--vscode-list-hoverBackground);
-		--accent-foreground: var(--vscode-button-foreground);
+		--accent-foreground: var(--vscode-list-hoverForeground);
 		--destructive: var(--vscode-errorForeground);
 		--destructive-foreground: var(--vscode-button-foreground);
 		--border: var(--vscode-input-border);
diff --git a/webview-ui/src/stories/DropdownMenu.stories.tsx b/webview-ui/src/stories/DropdownMenu.stories.tsx
index 107d1168c0..c82d4825e0 100644
--- a/webview-ui/src/stories/DropdownMenu.stories.tsx
+++ b/webview-ui/src/stories/DropdownMenu.stories.tsx
@@ -17,12 +17,8 @@ import {
 	DropdownMenuGroup,
 	DropdownMenuItem,
 	DropdownMenuLabel,
-	DropdownMenuPortal,
 	DropdownMenuSeparator,
 	DropdownMenuShortcut,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
 	DropdownMenuTrigger,
 } from "@/components/ui"
 
@@ -55,23 +51,6 @@ export const Default: Story = {
 						Item 2<DropdownMenuShortcut>⌘2</DropdownMenuShortcut>
 					</DropdownMenuItem>
 				</DropdownMenuGroup>
-				<DropdownMenuSeparator />
-				<DropdownMenuGroup>
-					<DropdownMenuSub>
-						<DropdownMenuSubTrigger>Submenu</DropdownMenuSubTrigger>
-						<DropdownMenuPortal>
-							<DropdownMenuSubContent>
-								<DropdownMenuItem>Foo</DropdownMenuItem>
-								<DropdownMenuItem>
-									Bar
-									<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-								</DropdownMenuItem>
-								<DropdownMenuSeparator />
-								<DropdownMenuItem>Baz</DropdownMenuItem>
-							</DropdownMenuSubContent>
-						</DropdownMenuPortal>
-					</DropdownMenuSub>
-				</DropdownMenuGroup>
 			</DropdownMenuContent>
 		</DropdownMenu>
 	),