Match VSCode theme

Author: cte

webview-ui/src/components/ui/tooltip.tsx

@@ -29,13 +29,13 @@ function TooltipContent({
 				data-slot="tooltip-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-vscode-focusBorder text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					"bg-vscode-editorHoverWidget-background outline outline-vscode-editorHoverWidget-border text-vscode-editorHoverWidget-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-sm px-2 py-1 text-xs text-balance",
 					"max-w-[300px] break-words",
 					className,
 				)}
 				{...props}>
 				{children}
-				<TooltipPrimitive.Arrow className="bg-vscode-focusBorder fill-vscode-focusBorder z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+				<TooltipPrimitive.Arrow className="bg-vscode-editorHoverWidget-background border-b border-r border-vscode-editorHoverWidget-border fill-vscode-editorHoverWidget-background z-50 size-1.5 translate-y-[calc(-50%_+_1px)] rotate-45" />
 			</TooltipPrimitive.Content>
 		</TooltipPrimitive.Portal>
 	)

webview-ui/src/index.css

@@ -76,6 +76,7 @@
 	--color-vscode-button-background: var(--vscode-button-background);
 	--color-vscode-button-secondaryForeground: var(--vscode-button-secondaryForeground);
 	--color-vscode-button-secondaryBackground: var(--vscode-button-secondaryBackground);
+	--color-vscode-button-hoverBackground: var(--vscode-button-hoverBackground);
 
 	--color-vscode-dropdown-foreground: var(--vscode-dropdown-foreground);
 	--color-vscode-dropdown-background: var(--vscode-dropdown-background);
@@ -130,9 +131,14 @@
 	--color-vscode-inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder);
 
 	--color-vscode-widget-border: var(--vscode-widget-border);
+
 	--color-vscode-textLink-foreground: var(--vscode-textLink-foreground);
+
 	--color-vscode-textCodeBlock-background: var(--vscode-textCodeBlock-background);
-	--color-vscode-button-hoverBackground: var(--vscode-button-hoverBackground);
+
+	--color-vscode-editorHoverWidget-foreground: var(--vscode-editorHoverWidget-foreground);
+	--color-vscode-editorHoverWidget-background: var(--vscode-editorHoverWidget-background);
+	--color-vscode-editorHoverWidget-border: var(--vscode-editorHoverWidget-border);
 }
 
 @layer base {