Fixing focus color (#18463) (#18491)

src/reactviews/common/theme.ts

@@ -25,7 +25,10 @@ export const webviewTheme: fluentui.Theme = {
         "var(--vscode-list-activeSelectionBackground)",
     colorBrandStroke1: "var(--vscode-button-foreground)",
     colorBrandStroke2Contrast: "var(--vscode-button-background)",
-    colorCompoundBrandStroke: "var(--vscode-button-background)",
+    /**
+     * Specifies the focus border color for components that are in focus.
+     */
+    colorCompoundBrandStroke: "var(--vscode-focusBorder)",
     colorCompoundBrandStrokeHover: "var(--vscode-button-hoverBackground)",
     colorCompoundBrandBackground: "var(--vscode-button-background)",
     colorNeutralForegroundInverted: "var(--vscode-button-foreground)",
@@ -81,4 +84,8 @@ export const webviewTheme: fluentui.Theme = {
     fontFamilyNumeric: "var(--vscode-font-family)",
     fontFamilyMonospace: "var(--vscode-editor-font-family)",
     lineHeightBase300: "1.4em",
+    /**
+     * Specifies the background color for a selected div.
+     */
+    colorNeutralForeground2BrandSelected: "var(--vscode-button-background)",
 };

src/reactviews/index.css

@@ -1,8 +1,22 @@
 #root {
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: 'var(--vscode-foreground)',
-}
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: "var(--vscode-foreground)";
+}
+
+/* Make fluent focus fields look more like vscode focus  */
+a:focus,
+input:focus,
+select:focus,
+textarea:focus,
+button[role="combobox"]:focus,
+.fui-Combobox:focus-within,
+.fui-Input:focus-within,
+.fui-Dropdown:focus-within {
+    outline: 1px solid var(--colorCompoundBrandStroke, --vscode-focusBorder) !important;
+    border-radius: var(--borderRadiusSmall, 2px) !important;
+    border: none !important;
+}