Fix setting row colors

Remove focus outline on settings editor. It's not tabbable so it doesn't serve any purpose and is annoying to see every time I click on the editor background. Just need to keep .editor-instance from getting focus on click.
Fix #81675

src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css

@@ -16,6 +16,10 @@
 	color: inherit !important;
 }
 
+.settings-editor:focus {
+	outline: none !important;
+}
+
 /* header styling */
 .settings-editor > .settings-header {
 	box-sizing: border-box;

src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts

@@ -201,7 +201,7 @@ export class SettingsEditor2 extends BaseEditor {
 
 	createEditor(parent: HTMLElement): void {
 		parent.setAttribute('tabindex', '-1');
-		this.rootElement = DOM.append(parent, $('.settings-editor'));
+		this.rootElement = DOM.append(parent, $('.settings-editor', { tabindex: '-1' }));
 
 		this.createHeader(this.rootElement);
 		this.createBody(this.rootElement);

src/vs/workbench/contrib/preferences/browser/settingsTree.ts

@@ -37,7 +37,7 @@ import { IContextMenuService, IContextViewService } from 'vs/platform/contextvie
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
-import { errorForeground, focusBorder, foreground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground } from 'vs/platform/theme/common/colorRegistry';
+import { errorForeground, focusBorder, foreground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, transparent } from 'vs/platform/theme/common/colorRegistry';
 import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler, attachStyler } from 'vs/platform/theme/common/styler';
 import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { ITOCEntry } from 'vs/workbench/contrib/preferences/browser/settingsLayout';
@@ -1544,20 +1544,20 @@ export class SettingsTree extends ObjectTree<SettingsTreeElement> {
 		this.getHTMLElement().classList.add(treeClass);
 
 		this.disposables.push(attachStyler(themeService, {
-			listActiveSelectionBackground: 'transparent',
+			listActiveSelectionBackground: transparent(Color.white, 0),
 			listActiveSelectionForeground: foreground,
-			listFocusAndSelectionBackground: 'transparent',
+			listFocusAndSelectionBackground: transparent(Color.white, 0),
 			listFocusAndSelectionForeground: foreground,
-			listFocusBackground: 'transparent',
+			listFocusBackground: transparent(Color.white, 0),
 			listFocusForeground: foreground,
 			listHoverForeground: foreground,
-			listHoverBackground: 'transparent',
-			listHoverOutline: 'transparent',
-			listFocusOutline: 'transparent',
-			listInactiveSelectionBackground: 'transparent',
+			listHoverBackground: transparent(Color.white, 0),
+			listHoverOutline: transparent(Color.white, 0),
+			listFocusOutline: transparent(Color.white, 0),
+			listInactiveSelectionBackground: transparent(Color.white, 0),
 			listInactiveSelectionForeground: foreground,
-			listInactiveFocusBackground: 'transparent',
-			listInactiveFocusOutline: 'transparent'
+			listInactiveFocusBackground: transparent(Color.white, 0),
+			listInactiveFocusOutline: transparent(Color.white, 0)
 		}, colors => {
 			this.style(colors);
 		}));