fix button styling (microsoft#166362)

Author: aeschli

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

@@ -23,20 +23,19 @@ export interface IButtonOptions extends IButtonStyles {
 	readonly secondary?: boolean;
 }
 
-export type CSSValueString = string;
 
 export interface IButtonStyles {
-	readonly buttonBackground?: CSSValueString;
-	readonly buttonHoverBackground?: CSSValueString;
-	readonly buttonForeground?: CSSValueString;
-	readonly buttonSeparator?: CSSValueString;
-	readonly buttonSecondaryBackground?: CSSValueString;
-	readonly buttonSecondaryHoverBackground?: CSSValueString;
-	readonly buttonSecondaryForeground?: CSSValueString;
-	readonly buttonBorder?: CSSValueString;
+	readonly buttonBackground: string | undefined;
+	readonly buttonHoverBackground: string | undefined;
+	readonly buttonForeground: string | undefined;
+	readonly buttonSeparator: string | undefined;
+	readonly buttonSecondaryBackground: string | undefined;
+	readonly buttonSecondaryHoverBackground: string | undefined;
+	readonly buttonSecondaryForeground: string | undefined;
+	readonly buttonBorder: string | undefined;
 }
 
-export const defaultOptions: IButtonStyles = {
+export const unthemedButtonStyles: IButtonStyles = {
 	buttonBackground: '#0E639C',
 	buttonHoverBackground: '#006BB3',
 	buttonSeparator: Color.white.toString(),
@@ -255,16 +254,11 @@ export class ButtonWithDropdown extends Disposable implements IButton {
 		// Separator styles
 		const border = options.buttonBorder;
 		if (border) {
-			this.separatorContainer.style.borderTopWidth = '1px';
-			this.separatorContainer.style.borderTopStyle = 'solid';
-			this.separatorContainer.style.borderTopColor = border;
-
-			this.separatorContainer.style.borderBottomWidth = '1px';
-			this.separatorContainer.style.borderBottomStyle = 'solid';
-			this.separatorContainer.style.borderBottomColor = border;
+			this.separatorContainer.style.borderTop = '1px solid ' + border;
+			this.separatorContainer.style.borderBottom = '1px solid ' + border;
 		}
-		this.separatorContainer.style.backgroundColor = options.buttonBackground?.toString() ?? '';
-		this.separator.style.backgroundColor = options.buttonSeparator?.toString() ?? '';
+		this.separatorContainer.style.backgroundColor = options.buttonBackground ?? '';
+		this.separator.style.backgroundColor = options.buttonSeparator ?? '';
 
 
 		this.dropdownButton = this._register(new Button(this.element, { ...options, title: false, supportIcons: true }));

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

@@ -38,6 +38,7 @@ export interface IDialogOptions {
 	readonly buttonDetails?: string[];
 	readonly disableCloseAction?: boolean;
 	readonly disableDefaultAction?: boolean;
+	readonly buttonStyles: IButtonStyles;
 }
 
 export interface IDialogResult {
@@ -46,7 +47,7 @@ export interface IDialogResult {
 	readonly values?: string[];
 }
 
-export interface IDialogStyles extends IButtonStyles, ICheckboxStyles {
+export interface IDialogStyles extends ICheckboxStyles {
 	readonly dialogForeground?: Color;
 	readonly dialogBackground?: Color;
 	readonly dialogShadow?: Color;
@@ -81,8 +82,9 @@ export class Dialog extends Disposable {
 	private focusToReturn: HTMLElement | undefined;
 	private readonly inputs: InputBox[];
 	private readonly buttons: string[];
+	private readonly buttonStyles: IButtonStyles;
 
-	constructor(private container: HTMLElement, private message: string, buttons: string[] | undefined, private options: IDialogOptions) {
+	constructor(private container: HTMLElement, private message: string, buttons: string[] | undefined, private readonly options: IDialogOptions) {
 		super();
 
 		this.modalElement = this.container.appendChild($(`.monaco-dialog-modal-block.dimmed`));
@@ -92,6 +94,8 @@ export class Dialog extends Disposable {
 		this.element.tabIndex = -1;
 		hide(this.element);
 
+		this.buttonStyles = options.buttonStyles;
+
 		if (Array.isArray(buttons) && buttons.length > 0) {
 			this.buttons = buttons;
 		} else if (!this.options.disableDefaultAction) {
@@ -202,7 +206,7 @@ export class Dialog extends Disposable {
 			// Handle button clicks
 			buttonMap.forEach((entry, index) => {
 				const primary = buttonMap[index].index === 0;
-				const button = this.options.buttonDetails ? this._register(buttonBar.addButtonWithDescription({ title: true, secondary: !primary })) : this._register(buttonBar.addButton({ title: true, secondary: !primary }));
+				const button = this.options.buttonDetails ? this._register(buttonBar.addButtonWithDescription({ title: true, secondary: !primary, ...this.buttonStyles })) : this._register(buttonBar.addButton({ title: true, secondary: !primary, ...this.buttonStyles }));
 				button.label = mnemonicButtonLabel(buttonMap[index].label, true);
 				if (button instanceof ButtonWithDescription) {
 					button.description = this.options.buttonDetails![buttonMap[index].index];

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

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as assert from 'assert';
+import { unthemedButtonStyles } from 'vs/base/browser/ui/button/button';
 import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
 import { IListOptions, List } from 'vs/base/browser/ui/list/listWidget';
 import { raceTimeout } from 'vs/base/common/async';
@@ -52,7 +53,7 @@ suite('QuickInput', () => { // https://github.com/microsoft/vscode/issues/147543
 				options: IListOptions<T>,
 			) => new List<T>(user, container, delegate, renderers, options),
 			styles: {
-				button: {},
+				button: unthemedButtonStyles,
 				countBadge: {},
 				inputBox: {},
 				keybindingLabel: {},

src/vs/code/electron-sandbox/issue/issueReporterMain.ts

@@ -7,7 +7,7 @@ import 'vs/css!./media/issueReporter';
 import 'vs/base/browser/ui/codicons/codiconStyles'; // make sure codicon css is loaded
 import { localize } from 'vs/nls';
 import { $, reset, safeInnerHtml, windowOpenNoOpener } from 'vs/base/browser/dom';
-import { Button, defaultOptions } from 'vs/base/browser/ui/button/button';
+import { Button, unthemedButtonStyles } from 'vs/base/browser/ui/button/button';
 import { renderIcon } from 'vs/base/browser/ui/iconLabel/iconLabels';
 import { Delayer } from 'vs/base/common/async';
 import { Codicon } from 'vs/base/common/codicons';
@@ -88,7 +88,7 @@ export class IssueReporter extends Disposable {
 
 		const issueReporterElement = this.getElementById('issue-reporter');
 		if (issueReporterElement) {
-			this.previewButton = new Button(issueReporterElement, defaultOptions);
+			this.previewButton = new Button(issueReporterElement, unthemedButtonStyles);
 			this.updatePreviewButtonState();
 		}
 

src/vs/workbench/browser/parts/dialogs/dialogHandler.ts

@@ -20,6 +20,7 @@ import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService
 import { fromNow } from 'vs/base/common/date';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { MarkdownRenderer } from 'vs/editor/contrib/markdownRenderer/browser/markdownRenderer';
+import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
 
 export class BrowserDialogHandler implements IDialogHandler {
 
@@ -117,7 +118,8 @@ export class BrowserDialogHandler implements IDialogHandler {
 				buttonDetails: customOptions?.buttonDetails,
 				checkboxLabel: checkbox?.label,
 				checkboxChecked: checkbox?.checked,
-				inputs
+				inputs,
+				buttonStyles: defaultButtonStyles
 			});
 
 		dialogDisposables.add(dialog);

src/vs/workbench/contrib/bulkEdit/browser/preview/bulkEditPane.ts

@@ -37,6 +37,7 @@ import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { ResourceEdit } from 'vs/editor/browser/services/bulkEditService';
 import { ButtonBar } from 'vs/base/browser/ui/button/button';
+import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
 
 const enum State {
 	Data = 'data',
@@ -150,11 +151,11 @@ export class BulkEditPane extends ViewPane {
 		const buttonBar = new ButtonBar(buttonsContainer);
 		this._disposables.add(buttonBar);
 
-		const btnConfirm = buttonBar.addButton({ supportIcons: true });
+		const btnConfirm = buttonBar.addButton({ supportIcons: true, ...defaultButtonStyles });
 		btnConfirm.label = localize('ok', 'Apply');
 		btnConfirm.onDidClick(() => this.accept(), this, this._disposables);
 
-		const btnCancel = buttonBar.addButton({ /* secondary: true */ });
+		const btnCancel = buttonBar.addButton(defaultButtonStyles /*{  secondary: true } */);
 		btnCancel.label = localize('cancel', 'Discard');
 		btnCancel.onDidClick(() => this.discard(), this, this._disposables);
 

src/vs/workbench/contrib/search/browser/searchWidget.ts

@@ -292,7 +292,11 @@ export class SearchWidget extends Widget {
 			buttonBackground: undefined,
 			buttonBorder: undefined,
 			buttonForeground: undefined,
-			buttonHoverBackground: undefined
+			buttonHoverBackground: undefined,
+			buttonSecondaryBackground: undefined,
+			buttonSecondaryForeground: undefined,
+			buttonSecondaryHoverBackground: undefined,
+			buttonSeparator: undefined
 		};
 		this.toggleReplaceButton = this._register(new Button(parent, opts));
 		this.toggleReplaceButton.element.setAttribute('aria-expanded', 'false');

src/vs/workbench/services/progress/browser/progressService.ts

@@ -26,6 +26,7 @@ import { parseLinkedText } from 'vs/base/common/linkedText';
 import { IViewsService, IViewDescriptorService, ViewContainerLocation } from 'vs/workbench/common/views';
 import { IPaneCompositePartService } from 'vs/workbench/services/panecomposite/browser/panecomposite';
 import { stripIcons } from 'vs/base/common/iconLabels';
+import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
 
 export class ProgressService extends Disposable implements IProgressService {
 
@@ -563,7 +564,8 @@ export class ProgressService extends Disposable implements IProgressService {
 								EventHelper.stop(event, true);
 							}
 						}
-					}
+					},
+					buttonStyles: defaultButtonStyles
 				}
 			);