diff --git a/webview-ui/src/components/ui/button.tsx b/webview-ui/src/components/ui/button.tsx index 5bd00336b9..370ff4a19f 100644 --- a/webview-ui/src/components/ui/button.tsx +++ b/webview-ui/src/components/ui/button.tsx @@ -5,7 +5,7 @@ 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-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-0 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 font-medium transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer active:opacity-90", { variants: { variant: { @@ -17,10 +17,10 @@ const buttonVariants = cva( link: "text-primary underline-offset-4 hover:underline", }, size: { - default: "h-9 px-4 py-2", - sm: "h-8 rounded-md px-3 text-xs", - lg: "h-10 rounded-md px-8", - icon: "h-9 w-9", + default: "h-7 px-3", + sm: "h-6 px-2 text-sm", + lg: "h-8 px-4 text-lg", + icon: "h-7 w-7", }, }, defaultVariants: { diff --git a/webview-ui/src/components/ui/dropdown-menu.tsx b/webview-ui/src/components/ui/dropdown-menu.tsx index 8508b55deb..098090fb31 100644 --- a/webview-ui/src/components/ui/dropdown-menu.tsx +++ b/webview-ui/src/components/ui/dropdown-menu.tsx @@ -53,9 +53,11 @@ DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayNam const DropdownMenuContent = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( - + React.ComponentPropsWithoutRef & { + container?: HTMLElement + } +>(({ className, sideOffset = 4, container, ...props }, ref) => ( + svg]:size-4 [&>svg]:shrink-0", + "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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 active:opacity-90", inset && "pl-8", className, )} diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index 8069ca9195..194f421684 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -22,6 +22,11 @@ @plugin "tailwindcss-animate"; @theme { + --font-display: var(--vscode-font-family); + --text-sm: calc(var(--vscode-font-size) * 0.9); + --text-base: var(--vscode-font-size); + --text-lg: calc(var(--vscode-font-size) * 1.1); + --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); @@ -65,11 +70,11 @@ --secondary-foreground: var(--vscode-button-secondaryForeground); --muted: var(--vscode-disabledForeground); --muted-foreground: var(--vscode-descriptionForeground); - --accent: var(--vscode-input-border); + --accent: var(--vscode-list-hoverBackground); --accent-foreground: var(--vscode-button-foreground); --destructive: var(--vscode-errorForeground); --destructive-foreground: var(--vscode-button-foreground); - --border: var(--vscode-widget-border); + --border: var(--vscode-input-border); --input: var(--vscode-input-background); --ring: var(--vscode-input-border); --chart-1: var(--vscode-charts-red);