Icons in problems view show black when not focused

src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts

@@ -34,16 +34,22 @@ export interface KeybindingLabelOptions extends IKeybindingLabelStyles {
 	disableTitle?: boolean;
 }
 
-export type CSSValueString = string;
-
 export interface IKeybindingLabelStyles {
-	keybindingLabelBackground?: CSSValueString;
-	keybindingLabelForeground?: CSSValueString;
-	keybindingLabelBorder?: CSSValueString;
-	keybindingLabelBottomBorder?: CSSValueString;
-	keybindingLabelShadow?: CSSValueString;
+	keybindingLabelBackground: string | undefined;
+	keybindingLabelForeground: string | undefined;
+	keybindingLabelBorder: string | undefined;
+	keybindingLabelBottomBorder: string | undefined;
+	keybindingLabelShadow: string | undefined;
 }
 
+export const unthemedKeybindingLabelOptions: KeybindingLabelOptions = {
+	keybindingLabelBackground: undefined,
+	keybindingLabelForeground: undefined,
+	keybindingLabelBorder: undefined,
+	keybindingLabelBottomBorder: undefined,
+	keybindingLabelShadow: undefined
+};
+
 export class KeybindingLabel {
 
 	private domNode: HTMLElement;
@@ -55,19 +61,9 @@ export class KeybindingLabel {
 	private matches: Matches | undefined;
 	private didEverRender: boolean;
 
-	private labelBackground: CSSValueString | undefined;
-	private labelBorder: CSSValueString | undefined;
-	private labelBottomBorder: CSSValueString | undefined;
-	private labelShadow: CSSValueString | undefined;
-
 	constructor(container: HTMLElement, private os: OperatingSystem, options?: KeybindingLabelOptions) {
 		this.options = options || Object.create(null);
 
-		this.labelBackground = this.options.keybindingLabelBackground;
-		this.labelBorder = this.options.keybindingLabelBorder;
-		this.labelBottomBorder = this.options.keybindingLabelBottomBorder;
-		this.labelShadow = this.options.keybindingLabelShadow;
-
 		const labelForeground = this.options.keybindingLabelForeground;
 
 		this.domNode = dom.append(container, $('.monaco-keybinding'));
@@ -158,17 +154,17 @@ export class KeybindingLabel {
 		const keyElement = $('span.monaco-keybinding-key' + extraClass, undefined, label);
 		this.keyElements.add(keyElement);
 
-		if (this.labelBackground) {
-			keyElement.style.backgroundColor = this.labelBackground;
+		if (this.options.keybindingLabelBackground) {
+			keyElement.style.backgroundColor = this.options.keybindingLabelBackground;
 		}
-		if (this.labelBorder) {
-			keyElement.style.borderColor = this.labelBorder;
+		if (this.options.keybindingLabelForeground) {
+			keyElement.style.borderColor = this.options.keybindingLabelForeground;
 		}
-		if (this.labelBottomBorder) {
-			keyElement.style.borderBottomColor = this.labelBottomBorder;
+		if (this.options.keybindingLabelBorder) {
+			keyElement.style.borderBottomColor = this.options.keybindingLabelBorder;
 		}
-		if (this.labelShadow) {
-			keyElement.style.boxShadow = `inset 0 -1px 0 ${this.labelShadow}`;
+		if (this.options.keybindingLabelShadow) {
+			keyElement.style.boxShadow = `inset 0 -1px 0 ${this.options.keybindingLabelShadow}`;
 		}
 
 		return keyElement;

src/vs/base/browser/ui/progressbar/progressbar.ts

@@ -18,12 +18,13 @@ const CSS_DISCRETE = 'discrete';
 export interface IProgressBarOptions extends IProgressBarStyles {
 }
 
-export type CSSValueString = string;
-
 export interface IProgressBarStyles {
-	progressBarBackground?: CSSValueString;
+	progressBarBackground: string | undefined;
 }
 
+export const unthemedProgressBarOptions: IProgressBarOptions = {
+	progressBarBackground: undefined
+};
 
 /**
  * A progress bar with support for infinite or discrete progress.

src/vs/base/parts/quickinput/test/browser/quickinput.test.ts

@@ -13,6 +13,8 @@ import { raceTimeout } from 'vs/base/common/async';
 import { QuickInputController } from 'vs/base/parts/quickinput/browser/quickInput';
 import { IQuickPick, IQuickPickItem } from 'vs/base/parts/quickinput/common/quickInput';
 import { unthemedCountStyles } from 'vs/base/browser/ui/countBadge/countBadge';
+import { unthemedKeybindingLabelOptions } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
+import { unthemedProgressBarOptions } from 'vs/base/browser/ui/progressbar/progressbar';
 
 // Sets up an `onShow` listener to allow us to wait until the quick pick is shown (useful when triggering an `accept()` right after launching a quick pick)
 // kick this off before you launch the picker and then await the promise returned after you launch the picker.
@@ -60,9 +62,9 @@ suite('QuickInput', () => { // https://github.com/microsoft/vscode/issues/147543
 				countBadge: unthemedCountStyles,
 				inputBox: unthemedInboxStyles,
 				toggle: unthemedToggleStyles,
-				keybindingLabel: {},
+				keybindingLabel: unthemedKeybindingLabelOptions,
 				list: unthemedListStyles,
-				progressBar: {},
+				progressBar: unthemedProgressBarOptions,
 				widget: {
 					quickInputBackground: undefined,
 					quickInputForeground: undefined,

src/vs/editor/contrib/inlineCompletions/browser/inlineSuggestionHintsWidget.ts

@@ -5,7 +5,7 @@
 
 import { h } from 'vs/base/browser/dom';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
-import { KeybindingLabel } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
+import { KeybindingLabel, unthemedKeybindingLabelOptions } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
 import { Action, IAction, Separator } from 'vs/base/common/actions';
 import { RunOnceScheduler } from 'vs/base/common/async';
 import { Codicon } from 'vs/base/common/codicons';
@@ -244,7 +244,7 @@ class StatusBarViewItem extends MenuEntryActionViewItem {
 		if (this.label) {
 			const div = h('div.keybinding').root;
 
-			const k = new KeybindingLabel(div, OS, { disableTitle: true });
+			const k = new KeybindingLabel(div, OS, { disableTitle: true, ...unthemedKeybindingLabelOptions });
 			k.set(kb);
 			this.label.textContent = this._action.label;
 			this.label.appendChild(div);