UI: Toggles and border fixes on edge case themes. (#3051)

Toggles and border fix.

Author: sachasayan

webview-ui/src/components/settings/AutoApproveToggle.tsx

@@ -106,7 +106,7 @@ export const AutoApproveToggle = ({ onToggle, ...props }: AutoApproveToggleProps
 					onClick={() => onToggle(key, !props[key])}
 					title={t(descriptionKey || "")}
 					data-testid={testId}
-					className={cn(" aspect-square h-[80px]")}>
+					className={cn(" aspect-square h-[80px]", !props[key] && "opacity-50")}>
 					<span className={cn("flex flex-col items-center gap-1")}>
 						<span className={`codicon codicon-${icon}`} />
 						<span className="text-sm text-center">{t(labelKey)}</span>

webview-ui/src/index.css

@@ -82,7 +82,10 @@
 
 	--color-vscode-input-foreground: var(--vscode-input-foreground);
 	--color-vscode-input-background: var(--vscode-input-background);
-	--color-vscode-input-border: var(--vscode-input-border);
+	--color-vscode-input-border: var(
+		--vscode-input-border,
+		transparent
+	); /* Some themes don't have a border color, so we can fallback to transparent */
 
 	--color-vscode-focusBorder: var(--vscode-focusBorder);
 
@@ -140,7 +143,7 @@
 		--accent-foreground: var(--vscode-list-hoverForeground);
 		--destructive: var(--vscode-errorForeground);
 		--destructive-foreground: var(--vscode-button-foreground);
-		--border: var(--vscode-input-border);
+		--border: var(--vscode-input-border, transparent); /* --border gets theme value or transparent fallback */
 		--input: var(--vscode-input-background);
 		--ring: var(--vscode-input-border);
 		--chart-1: var(--vscode-charts-red);
@@ -150,6 +153,13 @@
 		--chart-5: var(--vscode-charts-green);
 		--radius: 0.5rem;
 	}
+
+	/* Higher specififty than VSCode's theme and root. */
+	/* Used for baseline theme overrides, but avoid using for styling. */
+
+	body {
+		--vscode-input-border: var(--border);
+	}
 }
 
 @layer components {