implement the style for dropdown, inputbox and table filter (#23502)

* dropdown, inputbox, headerfilter styles

* fix missing reference

* remove unused import

src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts

@@ -4,15 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./media/dropdownList';
-import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { DropdownDataSource, DropdownListRenderer, IDropdownListItem, SELECT_OPTION_ENTRY_TEMPLATE_ID } from 'sql/base/browser/ui/editableDropdown/browser/dropdownList';
 import * as DOM from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
-import { IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
+import { IInputBoxStyles, IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
 import { IListStyles, List } from 'vs/base/browser/ui/list/listWidget';
-import { Color } from 'vs/base/common/color';
 import { Emitter, Event } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { Disposable } from 'vs/base/common/lifecycle';
@@ -20,10 +19,8 @@ import { clamp } from 'vs/base/common/numbers';
 import { mixin } from 'vs/base/common/objects';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import * as nls from 'vs/nls';
-import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
 
-
+export interface IDropdownOptions extends Partial<IEditableDropdownStyles> {
-export interface IDropdownOptions extends IDropdownStyles {
 	/**
 	 * Whether or not a options in the list must be selected or a "new" option can be set
 	 */
@@ -58,9 +55,9 @@ export interface IDropdownOptions extends IDropdownStyles {
 	ariaDescription?: string;
 }
 
-export interface IDropdownStyles {
+export interface IEditableDropdownStyles extends IInputBoxStyles, IListStyles {
-	contextBackground?: Color;
+	contextBackground?: string;
-	contextBorder?: Color;
+	contextBorder?: string;
 }
 
 const errorMessage = nls.localize('editableDropdown.errorValidate', "Must be an option from the list");
@@ -96,7 +93,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 	constructor(
 		container: HTMLElement,
 		private readonly contextViewService: IContextViewProvider,
-		opt?: IDropdownOptions
+		opt: IDropdownOptions
 	) {
 		super();
 		this._options = opt || Object.create(null);
@@ -116,7 +113,8 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 		this._inputContainer.style.width = '100%';
 		this._inputContainer.style.height = '100%';
 		this._selectListContainer = DOM.$('div');
-
+		this._selectListContainer.style.backgroundColor = opt.contextBackground;
+		this._selectListContainer.style.outline = `1px solid ${opt.contextBorder}`;
 		this._input = new InputBox(this._inputContainer, contextViewService, {
 			validationOptions: {
 				// @SQLTODO
@@ -126,7 +124,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 			placeholder: this._options.placeholder,
 			ariaLabel: this._options.ariaLabel,
 			ariaDescription: this._options.ariaDescription,
-			inputBoxStyles: defaultInputBoxStyles
+			inputBoxStyles: <IInputBoxStyles>this._options
 		});
 
 		// Clear title from input box element (defaults to placeholder value) since we don't want a tooltip for the selected value
@@ -206,6 +204,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 				getWidgetRole: () => 'listbox'
 			}
 		});
+		this._selectList.style(<IListStyles>this._options);
 
 		this.values = this._options.values;
 		this._register(this._selectList.onDidBlur(() => {
@@ -378,13 +377,6 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 		this._hideList();
 	}
 
-	style(style: IListStyles & IInputBoxStyles & IDropdownStyles) {
-		this._selectList.style(style);
-		this._input.style(style);
-		this._selectListContainer.style.backgroundColor = style.contextBackground ? style.contextBackground.toString() : '';
-		this._selectListContainer.style.outline = `1px solid ${style.contextBorder}`;
-	}
-
 	private _inputValidator(value: string): IMessage | null {
 		if (!this._input.hasFocus() && this._input.isEnabled() && !this._selectList.isDOMFocused() && !this._dataSource.values.some(i => i === value)) {
 			if (this._options.strictSelection && this._options.errorMessage) {

src/sql/base/browser/ui/inputBox/inputBox.ts

@@ -3,9 +3,8 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { InputBox as vsInputBox, IInputOptions as vsIInputBoxOptions, IInputBoxStyles as vsIInputBoxStyles, IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
+import { InputBox as vsInputBox, IInputOptions as vsIInputBoxOptions, IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
-import { Color } from 'vs/base/common/color';
 import { Event, Emitter } from 'vs/base/common/event';
 import { AdsWidget } from 'sql/base/browser/ui/adsWidget';
 
@@ -14,11 +13,6 @@ export interface OnLoseFocusParams {
 	hasChanged: boolean;
 }
 
-export interface IInputBoxStyles extends vsIInputBoxStyles {
-	disabledInputBackground?: Color;
-	disabledInputForeground?: Color;
-}
-
 export interface IInputOptions extends vsIInputBoxOptions {
 	/**
 	 * Whether calls to validate require the force parameter to be set to true
@@ -31,13 +25,6 @@ export interface IInputOptions extends vsIInputBoxOptions {
 }
 
 export class InputBox extends vsInputBox implements AdsWidget {
-	// private enabledInputBackground?: Color;
-	// private enabledInputForeground?: Color;
-	// private enabledInputBorder?: Color;
-	// private disabledInputBackground?: Color;
-	// private disabledInputForeground?: Color;
-	// private disabledInputBorder?: Color;
-
 	private _lastLoseFocusValue: string;
 
 	private _onLoseFocus = this._register(new Emitter<OnLoseFocusParams>());
@@ -51,11 +38,6 @@ export class InputBox extends vsInputBox implements AdsWidget {
 
 	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, private _sqlOptions?: IInputOptions, id?: string) {
 		super(container, contextViewProvider, _sqlOptions);
-		// {{SQL CARBON TODO}} - fix styles
-		// this.enabledInputBackground = this.inputBackground;
-		// this.enabledInputForeground = this.inputForeground;
-		// this.enabledInputBorder = this.inputBorder;
-		//this.disabledInputBackground = Color.transparent;
 
 		this._lastLoseFocusValue = this.value;
 		let self = this;
@@ -80,23 +62,12 @@ export class InputBox extends vsInputBox implements AdsWidget {
 		if (id !== undefined) {
 			this.inputElement.id = id;
 		}
-	}
+		this.updateInputEnabledDisabledColors();
-
-	public override style(styles: IInputBoxStyles): void {
-		// 	super.style(styles);
-		// 	this.enabledInputBackground = this.inputBackground;
-		// 	this.enabledInputForeground = this.inputForeground;
-		// 	this.enabledInputBorder = this.inputBorder;
-		// 	this.disabledInputBackground = styles.disabledInputBackground;
-		// 	this.disabledInputForeground = styles.disabledInputForeground;
-		// 	this.updateInputEnabledDisabledColors();
-		// 	this.applyStyles();
 	}
 
 	public override enable(): void {
 		super.enable();
 		this.updateInputEnabledDisabledColors();
-		this.applyStyles();
 	}
 
 	public set rows(value: number) {
@@ -116,7 +87,6 @@ export class InputBox extends vsInputBox implements AdsWidget {
 	public override disable(): void {
 		super.disable();
 		this.updateInputEnabledDisabledColors();
-		this.applyStyles();
 	}
 
 	public setHeight(value: string) {
@@ -169,10 +139,14 @@ export class InputBox extends vsInputBox implements AdsWidget {
 	}
 
 	private updateInputEnabledDisabledColors(): void {
-		// let enabled = this.isEnabled();
+		const enabled = this.isEnabled();
-		// this.inputBackground = enabled ? this.enabledInputBackground : this.disabledInputBackground;
+		const background = enabled ? this._sqlOptions.inputBoxStyles.inputBackground : this._sqlOptions.inputBoxStyles.disabledInputBackground
-		// this.inputForeground = enabled ? this.enabledInputForeground : this.disabledInputForeground;
+		const foreground = enabled ? this._sqlOptions.inputBoxStyles.inputForeground : this._sqlOptions.inputBoxStyles.disabledInputForeground;
-		// this.inputBorder = enabled ? this.enabledInputBorder : this.disabledInputBorder;
+		const border = enabled ? this._sqlOptions.inputBoxStyles.inputBorder : this._sqlOptions.inputBoxStyles.disabledInputBorder;
+		this.element.style.backgroundColor = background;
+		this.element.style.color = foreground;
+		this.input.style.color = foreground;
+		this.element.style.border = `1px solid ${border}`;
 	}
 
 	public override validate(force?: boolean): MessageType | undefined {

src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts

@@ -11,7 +11,7 @@ import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle'
 import { withNullAsUndefined } from 'vs/base/common/types';
 import { IDisposableDataProvider, instanceOfIDisposableDataProvider } from 'sql/base/common/dataProvider';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
-import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { trapKeyboardNavigation } from 'sql/base/browser/dom';
 import { IListAccessibilityProvider, IListStyles, List } from 'vs/base/browser/ui/list/listWidget';
 import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
@@ -19,8 +19,8 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { Emitter } from 'vs/base/common/event';
-import { CountBadge } from 'vs/base/browser/ui/countBadge/countBadge';
+import { CountBadge, ICountBadgeStyles } from 'vs/base/browser/ui/countBadge/countBadge';
-import { defaultCountBadgeStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox';
 
 export type HeaderFilterCommands = 'sort-asc' | 'sort-desc';
 
@@ -30,7 +30,7 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
 	command: HeaderFilterCommands
 }
 
-export interface ITableFilterOptions {
+export interface ITableFilterOptions extends ITableFilterStyles {
 	/**
 	 * The message to be displayed when the filter is disabled and the user tries to open the filter menu.
 	 */
@@ -40,13 +40,9 @@ export interface ITableFilterOptions {
 	 * Set to false to prevent the grid from being re-drawn multiple times by different plugins.
 	 */
 	refreshColumns?: boolean;
-	/**
-	 * The button styles.
-	 */
-	buttonStyles: IButtonStyles;
 }
 
-export interface ITableFilterStyles extends IInputBoxStyles, IListStyles {
+export interface ITableFilterStyles extends IInputBoxStyles, IListStyles, IButtonStyles, ICountBadgeStyles {
 }
 
 interface NotificationProvider {
@@ -70,9 +66,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
 	private okButton?: Button;
 	private clearButton?: Button;
 	private cancelButton?: Button;
-	// {{SQL CARBON TODO}} - disable
-	// private sortAscButton?: Button;
-	// private sortDescButton?: Button;
 	private selectAllCheckBox?: Checkbox;
 	private searchInputBox?: InputBox;
 	private countBadge?: CountBadge;
@@ -82,7 +75,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
 	private filteredListData?: TableFilterListElement[];
 	private elementDisposables?: IDisposable[];
 	private columnDef!: FilterableColumn<T>;
-	private filterStyles?: ITableFilterStyles;
 	private disposableStore = new DisposableStore();
 	private columnButtonMapping: Map<string, HTMLElement> = new Map<string, HTMLElement>();
 	private previouslyFocusedElement: HTMLElement;
@@ -184,7 +176,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
 
 	private createButtonMenuItem(title: string, command: HeaderFilterCommands, iconClass: string): Button {
 		const buttonContainer = append(this.menu, $('.slick-header-menu-image-button-container'));
-		const button = new Button(buttonContainer, this.options.buttonStyles);
+		const button = new Button(buttonContainer, this.options);
 		button.icon = `slick-header-menuicon ${iconClass}`;
 		button.label = title;
 		button.onDidClick(async () => {
@@ -208,20 +200,20 @@ export class HeaderFilter<T extends Slick.SlickData> {
 
 		this.searchInputBox = new InputBox(append(searchRow, $('.search-input')), this.contextViewProvider, {
 			placeholder: localize('table.searchPlaceHolder', "Search"),
-			inputBoxStyles: defaultInputBoxStyles
+			inputBoxStyles: this.options
 		});
 		const visibleCountContainer = append(searchRow, $('.visible-count'));
 		visibleCountContainer.setAttribute('aria-live', 'polite');
 		visibleCountContainer.setAttribute('aria-atomic', 'true');
 		this.visibleCountBadge = new CountBadge(visibleCountContainer, {
 			countFormat: localize({ key: 'tableFilter.visibleCount', comment: ['This tells the user how many items are shown in the list. Currently not visible, but read by screen readers.'] }, "{0} Results")
-		}, defaultCountBadgeStyles);
+		}, this.options);
 
 		const selectedCountBadgeContainer = append(searchRow, $('.selected-count'));
 		selectedCountBadgeContainer.setAttribute('aria-live', 'polite');
 		this.countBadge = new CountBadge(selectedCountBadgeContainer, {
 			countFormat: localize({ key: 'tableFilter.selectedCount', comment: ['This tells the user how many items are selected in the list'] }, "{0} Selected")
-		}, defaultCountBadgeStyles);
+		}, this.options);
 
 		this.searchInputBox.onDidChange(async (newString) => {
 			this.filteredListData = this.listData.filter(element => element.value?.toUpperCase().indexOf(newString.toUpperCase()) !== -1);
@@ -408,9 +400,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		// Make sure the menu can fit in the screen.
 		this.menu.style.height = `${Math.min(DefaultMenuHeight, window.innerHeight - MenuBarHeight) - MenuVerticalPadding}px`;
 
-		// {{SQL CARBON TODO}} - style buttons
-		// this.sortAscButton = this.createButtonMenuItem(localize('table.sortAscending', "Sort Ascending"), 'sort-asc', 'ascending');
-		// this.sortDescButton = this.createButtonMenuItem(localize('table.sortDescending', "Sort Descending"), 'sort-desc', 'descending');
 		this.createButtonMenuItem(localize('table.sortAscending', "Sort Ascending"), 'sort-asc', 'ascending');
 		this.createButtonMenuItem(localize('table.sortDescending', "Sort Descending"), 'sort-desc', 'descending');
 
@@ -418,49 +407,28 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		await this.createFilterList();
 
 		const buttonGroupContainer = append(this.menu, $('.filter-menu-button-container'));
-		this.okButton = this.createButton(buttonGroupContainer, 'filter-ok-button', localize('headerFilter.ok', "OK"), this.options.buttonStyles);
+		this.okButton = this.createButton(buttonGroupContainer, 'filter-ok-button', localize('headerFilter.ok', "OK"), this.options);
 		this.okButton.onDidClick(async () => {
 			this.columnDef.filterValues = this.listData.filter(element => element.checked).map(element => element.value);
 			this.setButtonImage($menuButton, this.columnDef.filterValues.length > 0);
 			await this.handleApply(this.columnDef);
 		});
 
-		this.clearButton = this.createButton(buttonGroupContainer, 'filter-clear-button', localize('headerFilter.clear', "Clear"), { secondary: true, ...this.options.buttonStyles });
+		this.clearButton = this.createButton(buttonGroupContainer, 'filter-clear-button', localize('headerFilter.clear', "Clear"), { secondary: true, ...this.options });
 		this.clearButton.onDidClick(async () => {
 			this.columnDef.filterValues!.length = 0;
 			this.setButtonImage($menuButton, false);
 			await this.handleApply(this.columnDef);
 		});
 
-		this.cancelButton = this.createButton(buttonGroupContainer, 'filter-cancel-button', localize('headerFilter.cancel', "Cancel"), { secondary: true, ...this.options.buttonStyles });
+		this.cancelButton = this.createButton(buttonGroupContainer, 'filter-cancel-button', localize('headerFilter.cancel', "Cancel"), { secondary: true, ...this.options });
 		this.cancelButton.onDidClick(() => {
 			this.hideMenu();
 		});
-		this.applyStyles();
 		// No need to add this to disposable store, it will be disposed when the menu is closed.
 		trapKeyboardNavigation(this.menu);
 	}
 
-	public style(styles: ITableFilterStyles): void {
-		this.filterStyles = styles;
-		this.applyStyles();
-	}
-
-	private applyStyles() {
-		if (this.filterStyles) {
-			// {{SQL CARBON TODO}} - apply styles
-			// this.okButton?.style(this.filterStyles);
-			// this.cancelButton?.style(this.filterStyles);
-			// this.clearButton?.style(this.filterStyles);
-			// this.sortAscButton?.style(this.filterStyles);
-			// this.sortDescButton?.style(this.filterStyles);
-			// this.searchInputBox?.style(this.filterStyles);
-			// this.countBadge?.style(this.filterStyles);
-			// this.visibleCountBadge?.style(this.filterStyles);
-			// this.list?.style(this.filterStyles);
-		}
-	}
-
 	private columnsResized() {
 		this.hideMenu();
 	}

src/sql/base/browser/ui/table/tableCellEditorFactory.ts

@@ -8,10 +8,11 @@ import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 import { KeyCode, EVENT_KEY_CODE_MAP } from 'vs/base/common/keyCodes';
 import * as DOM from 'vs/base/browser/dom';
-import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
+import { Dropdown, IEditableDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
-import { Event } from 'vs/base/common/event';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox';
+import { ISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox';
 
 const InverseKeyCodeMap: { [k: string]: number } = Object.fromEntries(Object.entries(EVENT_KEY_CODE_MAP).map(([key, value]) => [value, Number(key)]));
 
@@ -19,8 +20,9 @@ export interface ITableCellEditorOptions {
 	valueGetter?: (item: Slick.SlickData, column: Slick.Column<Slick.SlickData>) => string,
 	valueSetter?: (context: any, row: number, item: Slick.SlickData, column: Slick.Column<Slick.SlickData>, value: string) => void,
 	optionsGetter?: (item: Slick.SlickData, column: Slick.Column<Slick.SlickData>) => string[],
-	editorStyler: (component: InputBox | SelectBox | Dropdown) => void,
+	inputBoxStyles: IInputBoxStyles,
-	onStyleChange: Event<void>;
+	editableDropdownStyles: IEditableDropdownStyles,
+	selectBoxStyles: ISelectBoxStyles
 }
 
 export class TableCellEditorFactory {
@@ -37,8 +39,9 @@ export class TableCellEditorFactory {
 			optionsGetter: options.optionsGetter ?? function (item, column) {
 				return [];
 			},
-			editorStyler: options.editorStyler,
+			inputBoxStyles: options.inputBoxStyles,
-			onStyleChange: options.onStyleChange
+			editableDropdownStyles: options.editableDropdownStyles,
+			selectBoxStyles: options.selectBoxStyles
 		};
 	}
 
@@ -68,17 +71,12 @@ export class TableCellEditorFactory {
 					type: inputType,
 					inputBoxStyles: defaultInputBoxStyles
 				});
-				self._options.editorStyler(this._input);
 				this._input.element.style.height = '100%';
 				this._input.focus();
 				this._input.onLoseFocus(async () => {
 					await this.commitEdit();
 				});
 				this._register(this._input);
-				this._register(self._options.onStyleChange(() => {
-					self._options.editorStyler(this._input);
-				}));
-
 				this._input.value = presetValue ?? '';
 			}
 
@@ -163,7 +161,7 @@ export class TableCellEditorFactory {
 				container.style.height = '100%';
 				container.style.width = '100%';
 				if (isEditable) {
-					this._component = new Dropdown(container, self._contextViewProvider);
+					this._component = new Dropdown(container, self._contextViewProvider, self._options.editableDropdownStyles);
 					this._component.onValueChange(async () => {
 						await this.commitEdit();
 					});
@@ -178,12 +176,8 @@ export class TableCellEditorFactory {
 						await this.commitEdit();
 					});
 				}
-				self._options.editorStyler(this._component);
 				this._component.focus();
 				this._register(this._component);
-				this._register(self._options.onStyleChange(() => {
-					self._options.editorStyler(this._component);
-				}));
 			}
 
 			private async commitEdit(): Promise<void> {

src/sql/platform/browser/editableDropdown/editableDropdown.component.ts

@@ -10,10 +10,8 @@ import {
 
 import { AngularDisposable } from 'sql/base/browser/lifecycle';
 import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
-import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler';
+import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
-
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 @Component({
 	selector: 'editable-select-box',
@@ -32,7 +30,6 @@ export class EditableDropDown extends AngularDisposable implements OnInit, OnCha
 
 	constructor(
 		@Inject(forwardRef(() => ElementRef)) private readonly _el: ElementRef,
-		@Inject(IThemeService) private readonly themeService: IThemeService,
 		@Inject(IContextViewService) private readonly contextViewService: IContextViewService
 	) {
 		super();
@@ -44,7 +41,8 @@ export class EditableDropDown extends AngularDisposable implements OnInit, OnCha
 			strictSelection: false,
 			placeholder: '',
 			maxHeight: 125,
-			ariaLabel: ''
+			ariaLabel: '',
+			...defaultEditableDropdownStyles
 		};
 		this._selectbox = new Dropdown(this._el.nativeElement, this.contextViewService, dropdownOptions);
 		this._selectbox.values = this.options;
@@ -61,7 +59,6 @@ export class EditableDropDown extends AngularDisposable implements OnInit, OnCha
 				this.onDidSelect.emit(e);
 			}
 		});
-		this._register(attachEditableDropdownStyler(this._selectbox, this.themeService));
 	}
 
 	ngOnChanges(changes: SimpleChanges): void {

src/sql/platform/browser/inputbox/inputBox.component.ts

@@ -10,9 +10,6 @@ import {
 
 import { InputBox as vsInputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { AngularDisposable } from 'sql/base/browser/lifecycle';
-
-import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
 
@@ -34,7 +31,6 @@ export class InputBox extends AngularDisposable implements OnInit, OnChanges {
 
 	constructor(
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
-		@Inject(IThemeService) private themeService: IThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService
 	) {
 		super();
@@ -63,7 +59,6 @@ export class InputBox extends AngularDisposable implements OnInit, OnChanges {
 					this.onDidChange.emit(e);
 			}
 		});
-		this._register(attachInputBoxStyler(this._inputbox, this.themeService));
 	}
 
 	ngOnChanges(changes: SimpleChanges): void {

src/sql/platform/theme/browser/defaultStyles.ts

@@ -4,10 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import { ICheckboxStyles } from 'sql/base/browser/ui/checkbox/checkbox';
 import { IDropdownStyles } from 'sql/base/browser/ui/dropdownList/dropdownList';
+import { IEditableDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
+import { ITableFilterStyles } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
 import *  as sqlcr from 'sql/platform/theme/common/colorRegistry';
 import { disabledCheckboxForeground } from 'sql/platform/theme/common/colors';
 import { IButtonStyles } from 'vs/base/browser/ui/button/button';
-import { IStyleOverride, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { asCssVariable, editorBackground, inputBorder, inputForeground } from 'vs/platform/theme/common/colorRegistry';
 
 
@@ -34,6 +36,20 @@ export const defaultInfoButtonStyles: IButtonStyles = {
 	buttonDisabledBorder: undefined
 }
 
+export const defaultEditableDropdownStyles: IEditableDropdownStyles = {
+	contextBackground: asCssVariable(editorBackground),
+	contextBorder: asCssVariable(inputBorder),
+	...defaultInputBoxStyles,
+	...defaultListStyles
+}
+
+export const defaultTableFilterStyles: ITableFilterStyles = {
+	...defaultInputBoxStyles,
+	...defaultButtonStyles,
+	...defaultCountBadgeStyles,
+	...defaultListStyles
+}
+
 export const defaultDropdownStyles: IDropdownStyles = {
 	foregroundColor: asCssVariable(inputForeground),
 	borderColor: asCssVariable(inputBorder),

src/sql/platform/theme/common/styler.ts

@@ -8,41 +8,9 @@ import * as colors from './colors';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import * as cr from 'vs/platform/theme/common/colorRegistry';
 import * as sqlcr from 'sql/platform/theme/common/colorRegistry';
-import { IThemable, attachStyler, computeStyles, defaultListStyles, IColorMapping, IStyleOverrides } from 'sql/platform/theme/common/vsstyler';
+import { IThemable, attachStyler, computeStyles, IStyleOverrides } from 'sql/platform/theme/common/vsstyler';
 import { IDisposable } from 'vs/base/common/lifecycle';
 
-export interface IInputBoxStyleOverrides extends IStyleOverrides {
-	inputBackground?: cr.ColorIdentifier,
-	inputForeground?: cr.ColorIdentifier,
-	disabledInputBackground?: cr.ColorIdentifier,
-	disabledInputForeground?: cr.ColorIdentifier,
-	inputBorder?: cr.ColorIdentifier,
-	inputValidationInfoBorder?: cr.ColorIdentifier,
-	inputValidationInfoBackground?: cr.ColorIdentifier,
-	inputValidationWarningBorder?: cr.ColorIdentifier,
-	inputValidationWarningBackground?: cr.ColorIdentifier,
-	inputValidationErrorBorder?: cr.ColorIdentifier,
-	inputValidationErrorBackground?: cr.ColorIdentifier
-}
-
-export const defaultInputBoxStyles: IInputBoxStyleOverrides = {
-	inputBackground: cr.inputBackground,
-	inputForeground: cr.inputForeground,
-	disabledInputBackground: colors.disabledInputBackground,
-	disabledInputForeground: colors.disabledInputForeground,
-	inputBorder: cr.inputBorder,
-	inputValidationInfoBorder: cr.inputValidationInfoBorder,
-	inputValidationInfoBackground: cr.inputValidationInfoBackground,
-	inputValidationWarningBorder: cr.inputValidationWarningBorder,
-	inputValidationWarningBackground: cr.inputValidationWarningBackground,
-	inputValidationErrorBorder: cr.inputValidationErrorBorder,
-	inputValidationErrorBackground: cr.inputValidationErrorBackground
-};
-
-export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInputBoxStyleOverrides): IDisposable {
-	return attachStyler(themeService, { ...defaultInputBoxStyles, ...(style || {}) }, widget);
-}
-
 export interface ISelectBoxStyleOverrides extends IStyleOverrides {
 	selectBackground?: cr.ColorIdentifier,
 	selectListBackground?: cr.ColorIdentifier,
@@ -161,120 +129,6 @@ export function attachTableStyler(widget: IThemable, themeService: IThemeService
 	return attachStyler(themeService, { ...defaultTableStyles, ...(style || {}) }, widget);
 }
 
-export interface IHighPerfTableStyleOverrides extends IStyleOverrides {
-	listFocusBackground?: cr.ColorIdentifier,
-	listFocusForeground?: cr.ColorIdentifier,
-	listActiveSelectionBackground?: cr.ColorIdentifier,
-	listActiveSelectionForeground?: cr.ColorIdentifier,
-	listFocusAndSelectionBackground?: cr.ColorIdentifier,
-	listFocusAndSelectionForeground?: cr.ColorIdentifier,
-	listInactiveFocusBackground?: cr.ColorIdentifier,
-	listInactiveSelectionBackground?: cr.ColorIdentifier,
-	listInactiveSelectionForeground?: cr.ColorIdentifier,
-	listHoverBackground?: cr.ColorIdentifier,
-	listHoverForeground?: cr.ColorIdentifier,
-	listDropBackground?: cr.ColorIdentifier,
-	listFocusOutline?: cr.ColorIdentifier,
-	listInactiveFocusOutline?: cr.ColorIdentifier,
-	listSelectionOutline?: cr.ColorIdentifier,
-	listHoverOutline?: cr.ColorIdentifier,
-	tableHeaderBackground?: cr.ColorIdentifier,
-	tableHeaderForeground?: cr.ColorIdentifier,
-	cellOutlineColor?: cr.ColorIdentifier,
-	tableHeaderAndRowCountColor?: cr.ColorIdentifier
-}
-
-export const defaultHighPerfTableStyles: IColorMapping = {
-	listFocusBackground: cr.listFocusBackground,
-	listFocusForeground: cr.listFocusForeground,
-	listActiveSelectionBackground: cr.listActiveSelectionBackground,
-	listActiveSelectionForeground: cr.listActiveSelectionForeground,
-	listFocusAndSelectionBackground: colors.listFocusAndSelectionBackground,
-	listFocusAndSelectionForeground: cr.listActiveSelectionForeground,
-	listInactiveFocusBackground: cr.listInactiveFocusBackground,
-	listInactiveSelectionBackground: cr.listInactiveSelectionBackground,
-	listInactiveSelectionForeground: cr.listInactiveSelectionForeground,
-	listHoverBackground: cr.listHoverBackground,
-	listHoverForeground: cr.listHoverForeground,
-	listDropBackground: cr.listDropBackground,
-	listFocusOutline: cr.activeContrastBorder,
-	listSelectionOutline: cr.activeContrastBorder,
-	listHoverOutline: cr.activeContrastBorder,
-	tableHeaderBackground: colors.tableHeaderBackground,
-	tableHeaderForeground: colors.tableHeaderForeground,
-	cellOutlineColor: colors.tableCellOutline,
-	tableHeaderAndRowCountColor: colors.tableCellOutline
-};
-
-export function attachHighPerfTableStyler(widget: IThemable, themeService: IThemeService, overrides?: IHighPerfTableStyleOverrides): IDisposable {
-	return attachStyler(themeService, { ...defaultHighPerfTableStyles, ...(overrides || {}) }, widget);
-}
-
-export interface IEditableDropdownStyleOverrides extends IStyleOverrides {
-	listFocusBackground?: cr.ColorIdentifier,
-	listFocusForeground?: cr.ColorIdentifier,
-	listActiveSelectionBackground?: cr.ColorIdentifier,
-	listActiveSelectionForeground?: cr.ColorIdentifier,
-	listFocusAndSelectionBackground?: cr.ColorIdentifier,
-	listFocusAndSelectionForeground?: cr.ColorIdentifier,
-	listInactiveFocusBackground?: cr.ColorIdentifier,
-	listInactiveSelectionBackground?: cr.ColorIdentifier,
-	listInactiveSelectionForeground?: cr.ColorIdentifier,
-	listHoverBackground?: cr.ColorIdentifier,
-	listHoverForeground?: cr.ColorIdentifier,
-	listDropBackground?: cr.ColorIdentifier,
-	listFocusOutline?: cr.ColorIdentifier,
-	listInactiveFocusOutline?: cr.ColorIdentifier,
-	listSelectionOutline?: cr.ColorIdentifier,
-	listHoverOutline?: cr.ColorIdentifier,
-	inputBackground?: cr.ColorIdentifier,
-	inputForeground?: cr.ColorIdentifier,
-	inputBorder?: cr.ColorIdentifier,
-	inputValidationInfoBorder?: cr.ColorIdentifier,
-	inputValidationInfoBackground?: cr.ColorIdentifier,
-	inputValidationWarningBorder?: cr.ColorIdentifier,
-	inputValidationWarningBackground?: cr.ColorIdentifier,
-	inputValidationErrorBorder?: cr.ColorIdentifier,
-	inputValidationErrorBackground?: cr.ColorIdentifier,
-	contextBackground?: cr.ColorIdentifier,
-	contextBorder?: cr.ColorIdentifier
-}
-
-export const defaultEditableDropdownStyle: IEditableDropdownStyleOverrides = {
-	listFocusBackground: cr.listFocusBackground,
-	listFocusForeground: cr.listFocusForeground,
-	listActiveSelectionBackground: cr.listActiveSelectionBackground,
-	listActiveSelectionForeground: cr.listActiveSelectionForeground,
-	listFocusAndSelectionBackground: cr.listActiveSelectionBackground,
-	listFocusAndSelectionForeground: cr.listActiveSelectionForeground,
-	listInactiveFocusBackground: cr.listInactiveFocusBackground,
-	listInactiveSelectionBackground: cr.listInactiveSelectionBackground,
-	listInactiveSelectionForeground: cr.listInactiveSelectionForeground,
-	listHoverBackground: cr.listHoverBackground,
-	listHoverForeground: cr.listHoverForeground,
-	listDropBackground: cr.listDropBackground,
-	listFocusOutline: cr.activeContrastBorder,
-	listSelectionOutline: cr.activeContrastBorder,
-	listHoverOutline: cr.activeContrastBorder,
-	listInactiveFocusOutline: cr.listInactiveFocusOutline,
-	inputBackground: cr.inputBackground,
-	inputForeground: cr.inputForeground,
-	inputBorder: cr.inputBorder,
-	inputValidationInfoBorder: cr.inputValidationInfoBorder,
-	inputValidationInfoBackground: cr.inputValidationInfoBackground,
-	inputValidationWarningBorder: cr.inputValidationWarningBorder,
-	inputValidationWarningBackground: cr.inputValidationWarningBackground,
-	inputValidationErrorBorder: cr.inputValidationErrorBorder,
-	inputValidationErrorBackground: cr.inputValidationErrorBackground,
-	contextBackground: cr.editorBackground,
-	contextBorder: cr.inputBorder
-};
-
-
-export function attachEditableDropdownStyler(widget: IThemable, themeService: IThemeService, style?: IEditableDropdownStyleOverrides): IDisposable {
-	return attachStyler(themeService, { ...defaultEditableDropdownStyle, ...(style || {}) }, widget);
-}
-
 export interface IInfoBoxStyleOverrides {
 	informationBackground: cr.ColorIdentifier,
 	warningBackground: cr.ColorIdentifier,
@@ -300,39 +154,14 @@ export interface IInfoButtonStyleOverrides {
 	buttonHoverBackground: cr.ColorIdentifier
 }
 
-export function attachTableFilterStyler(widget: IThemable, themeService: IThemeService): IDisposable {
-	return attachStyler(themeService, {
-		...defaultInputBoxStyles,
-		buttonForeground: cr.buttonForeground,
-		buttonBackground: cr.buttonBackground,
-		buttonHoverBackground: cr.buttonHoverBackground,
-		buttonSecondaryForeground: cr.buttonSecondaryForeground,
-		buttonSecondaryBackground: cr.buttonSecondaryBackground,
-		buttonSecondaryHoverBackground: cr.buttonSecondaryHoverBackground,
-		buttonBorder: cr.buttonBorder,
-		buttonSecondaryBorder: cr.buttonSecondaryBorder,
-		buttonDisabledBorder: cr.buttonDisabledBorder,
-		buttonDisabledBackground: cr.buttonDisabledBackground,
-		buttonDisabledForeground: cr.buttonDisabledForeground,
-		badgeBackground: cr.badgeBackground,
-		badgeForeground: cr.badgeForeground,
-		badgeBorder: cr.contrastBorder,
-		...defaultListStyles,
-	}, widget);
-}
-
 export function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable {
 	function applyStyles(): void {
 		const colorTheme = themeService.getColorTheme();
-		const inputStyles = computeStyles(colorTheme, defaultInputBoxStyles);
 		const selectBoxStyles = computeStyles(colorTheme, defaultSelectBoxStyles);
 		const tableStyles = computeStyles(colorTheme, defaultTableStyles);
-		const editableDropdownStyles = computeStyles(colorTheme, defaultEditableDropdownStyle);
 		widget.style({
-			inputBoxStyles: inputStyles,
 			selectBoxStyles: selectBoxStyles,
 			tableStyles: tableStyles,
-			dropdownStyles: editableDropdownStyles,
 			paneSeparator: cr.resolveColorValue(sqlcr.DesignerPaneSeparator, colorTheme),
 			groupHeaderBackground: cr.resolveColorValue(sqlcr.GroupHeaderBackground, colorTheme)
 		});

src/sql/platform/theme/common/vsstyler.ts

@@ -5,7 +5,7 @@
 
 import { Color } from 'vs/base/common/color';
 import { IDisposable } from 'vs/base/common/lifecycle';
-import { activeContrastBorder, badgeBackground, badgeForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; // {{SQL CARBON EDIT}} Added buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground to import list
+import { activeContrastBorder, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; // {{SQL CARBON EDIT}} Added buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground to import list
 import { isHighContrast } from 'vs/platform/theme/common/theme';
 import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
 
@@ -60,54 +60,6 @@ export function attachStyler<T extends IColorMapping>(themeService: IThemeServic
 	return themeService.onDidColorThemeChange(applyStyles);
 }
 
-export interface IBadgeStyleOverrides extends IStyleOverrides {
-	badgeBackground?: ColorIdentifier;
-	badgeForeground?: ColorIdentifier;
-}
-
-export function attachBadgeStyler(widget: IThemable, themeService: IThemeService, style?: IBadgeStyleOverrides): IDisposable {
-	return attachStyler(themeService, {
-		badgeBackground: style?.badgeBackground || badgeBackground,
-		badgeForeground: style?.badgeForeground || badgeForeground,
-		badgeBorder: contrastBorder
-	} as IBadgeStyleOverrides, widget);
-}
-
-export interface IInputBoxStyleOverrides extends IStyleOverrides {
-	inputBackground?: ColorIdentifier;
-	inputForeground?: ColorIdentifier;
-	inputBorder?: ColorIdentifier;
-	inputActiveOptionBorder?: ColorIdentifier;
-	inputActiveOptionForeground?: ColorIdentifier;
-	inputActiveOptionBackground?: ColorIdentifier;
-	inputValidationInfoBorder?: ColorIdentifier;
-	inputValidationInfoBackground?: ColorIdentifier;
-	inputValidationInfoForeground?: ColorIdentifier;
-	inputValidationWarningBorder?: ColorIdentifier;
-	inputValidationWarningBackground?: ColorIdentifier;
-	inputValidationWarningForeground?: ColorIdentifier;
-	inputValidationErrorBorder?: ColorIdentifier;
-	inputValidationErrorBackground?: ColorIdentifier;
-	inputValidationErrorForeground?: ColorIdentifier;
-}
-
-export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInputBoxStyleOverrides): IDisposable {
-	return attachStyler(themeService, {
-		inputBackground: style?.inputBackground || inputBackground,
-		inputForeground: style?.inputForeground || inputForeground,
-		inputBorder: style?.inputBorder || inputBorder,
-		inputValidationInfoBorder: style?.inputValidationInfoBorder || inputValidationInfoBorder,
-		inputValidationInfoBackground: style?.inputValidationInfoBackground || inputValidationInfoBackground,
-		inputValidationInfoForeground: style?.inputValidationInfoForeground || inputValidationInfoForeground,
-		inputValidationWarningBorder: style?.inputValidationWarningBorder || inputValidationWarningBorder,
-		inputValidationWarningBackground: style?.inputValidationWarningBackground || inputValidationWarningBackground,
-		inputValidationWarningForeground: style?.inputValidationWarningForeground || inputValidationWarningForeground,
-		inputValidationErrorBorder: style?.inputValidationErrorBorder || inputValidationErrorBorder,
-		inputValidationErrorBackground: style?.inputValidationErrorBackground || inputValidationErrorBackground,
-		inputValidationErrorForeground: style?.inputValidationErrorForeground || inputValidationErrorForeground
-	} as IInputBoxStyleOverrides, widget);
-}
-
 export interface ISelectBoxStyleOverrides extends IStyleOverrides, IListStyleOverrides {
 	selectBackground?: ColorIdentifier;
 	selectListBackground?: ColorIdentifier;
@@ -136,26 +88,6 @@ export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeSer
 	} as ISelectBoxStyleOverrides, widget);
 }
 
-export function attachFindReplaceInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInputBoxStyleOverrides): IDisposable {
-	return attachStyler(themeService, {
-		inputBackground: style?.inputBackground || inputBackground,
-		inputForeground: style?.inputForeground || inputForeground,
-		inputBorder: style?.inputBorder || inputBorder,
-		inputActiveOptionBorder: style?.inputActiveOptionBorder || inputActiveOptionBorder,
-		inputActiveOptionForeground: style?.inputActiveOptionForeground || inputActiveOptionForeground,
-		inputActiveOptionBackground: style?.inputActiveOptionBackground || inputActiveOptionBackground,
-		inputValidationInfoBorder: style?.inputValidationInfoBorder || inputValidationInfoBorder,
-		inputValidationInfoBackground: style?.inputValidationInfoBackground || inputValidationInfoBackground,
-		inputValidationInfoForeground: style?.inputValidationInfoForeground || inputValidationInfoForeground,
-		inputValidationWarningBorder: style?.inputValidationWarningBorder || inputValidationWarningBorder,
-		inputValidationWarningBackground: style?.inputValidationWarningBackground || inputValidationWarningBackground,
-		inputValidationWarningForeground: style?.inputValidationWarningForeground || inputValidationWarningForeground,
-		inputValidationErrorBorder: style?.inputValidationErrorBorder || inputValidationErrorBorder,
-		inputValidationErrorBackground: style?.inputValidationErrorBackground || inputValidationErrorBackground,
-		inputValidationErrorForeground: style?.inputValidationErrorForeground || inputValidationErrorForeground
-	} as IInputBoxStyleOverrides, widget);
-}
-
 export interface IListStyleOverrides extends IStyleOverrides {
 	listBackground?: ColorIdentifier;
 	listFocusBackground?: ColorIdentifier;

src/sql/workbench/browser/designer/designer.ts

@@ -14,7 +14,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { Emitter, Event } from 'vs/base/common/event';
 import { Orientation, Sizing, SplitView } from 'vs/base/browser/ui/splitview/splitview';
 import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
-import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import 'vs/css!./media/designer';
 import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
 import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
@@ -41,8 +41,7 @@ import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticip
 import { listActiveSelectionBackground, listActiveSelectionForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { alert } from 'vs/base/browser/ui/aria/aria';
 import { layoutDesignerTable, TableHeaderRowHeight, TableRowHeight } from 'sql/workbench/browser/designer/designerTableUtil';
-import { Dropdown, IDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
+import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
-import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
 import { IAction } from 'vs/base/common/actions';
 import { InsertAfterSelectedRowAction, InsertBeforeSelectedRowAction, AddRowAction, DesignerTableActionContext, MoveRowDownAction, MoveRowUpAction, DesignerTableAction } from 'sql/workbench/browser/designer/tableActions';
 import { RowMoveManager, RowMoveOnDragEventData } from 'sql/base/browser/ui/table/plugins/rowMoveManager.plugin';
@@ -54,16 +53,14 @@ import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
-import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultInputBoxStyles, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { ThemeIcon } from 'vs/base/common/themables';
-import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 export interface IDesignerStyle {
 	tabbedPanelStyles?: ITabbedPanelStyles;
-	inputBoxStyles?: IInputBoxStyles;
 	tableStyles?: ITableStyles;
 	selectBoxStyles?: ISelectBoxStyles;
-	dropdownStyles?: IListStyles & IInputBoxStyles & IDropdownStyles;
 	paneSeparator?: Color;
 	groupHeaderBackground?: Color;
 }
@@ -136,10 +133,9 @@ export class Designer extends Disposable {
 				optionsGetter: (item, column): string[] => {
 					return item[column.field].values;
 				},
-				editorStyler: (component) => {
+				inputBoxStyles: defaultInputBoxStyles,
-					this.styleComponent(component);
+				editableDropdownStyles: defaultEditableDropdownStyles,
-				},
+				selectBoxStyles: defaultSelectBoxStyles
-				onStyleChange: this._onStyleChangeEventEmitter.event
 			}, this._contextViewProvider
 		);
 		this._loadingSpinner = new LoadingSpinner(this._container, { showText: true, fullSize: true });
@@ -218,7 +214,6 @@ export class Designer extends Disposable {
 
 	private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Dropdown): void {
 		if (component instanceof InputBox) {
-			component.style(this._styles.inputBoxStyles);
 		} else if (component instanceof Checkbox) {
 		} else if (component instanceof TabbedPanel) {
 			component.style(this._styles.tabbedPanelStyles);
@@ -226,7 +221,6 @@ export class Designer extends Disposable {
 			this.removeTableSelectionStyles();
 			component.style(this._styles.tableStyles);
 		} else if (component instanceof Dropdown) {
-			component.style(this._styles.dropdownStyles);
 		} else {
 			component.style(this._styles.selectBoxStyles);
 		}
@@ -252,7 +246,7 @@ export class Designer extends Disposable {
 	public style(styles: IDesignerStyle): void {
 		this._styles = styles;
 		this._componentMap.forEach((value, key, map) => {
-			if (!(value.component instanceof Checkbox)) {
+			if (value.component instanceof Table) {
 				if (value.component.style) {
 					this.styleComponent(value.component);
 				}
@@ -792,7 +786,8 @@ export class Designer extends Disposable {
 					dropdown = new Dropdown(dropdownContainer, this._contextViewProvider, {
 						values: dropdownProperties.values as string[] || [],
 						ariaLabel: componentDefinition.componentProperties?.title,
-						ariaDescription: componentDefinition.description
+						ariaDescription: componentDefinition.description,
+						...defaultEditableDropdownStyles
 					});
 					dropdown.onValueChange((value) => {
 						this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: value, source: view });

src/sql/workbench/browser/modelComponents/dropdown.component.ts

@@ -13,7 +13,6 @@ import * as azdata from 'azdata';
 
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler';
 import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -26,6 +25,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { errorForeground, inputValidationErrorBorder } from 'vs/platform/theme/common/colorRegistry';
 import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
+import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 @Component({
 	selector: 'modelview-dropdown',
@@ -88,13 +88,11 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 				strictSelection: false,
 				placeholder: this.placeholder,
 				maxHeight: 125,
-				ariaLabel: ''
+				ariaLabel: '',
+				...defaultEditableDropdownStyles
 			};
-			this._editableDropdown = new Dropdown(this._editableDropDownContainer.nativeElement, this.contextViewService,
+			this._editableDropdown = new Dropdown(this._editableDropDownContainer.nativeElement, this.contextViewService, dropdownOptions);
-				dropdownOptions);
-
 			this._register(this._editableDropdown);
-			this._register(attachEditableDropdownStyler(this._editableDropdown, this.themeService));
 			this._register(this._editableDropdown.onValueChange(async e => {
 				if (this.editable) {
 					this.setSelectedValue(e);

src/sql/workbench/browser/modelComponents/inputbox.component.ts

@@ -12,13 +12,11 @@ import * as azdata from 'azdata';
 
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { IInputOptions, InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 
 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import * as nls from 'vs/nls';
-import { inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
+import { asCssVariable, inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import * as DOM from 'vs/base/browser/dom';
@@ -27,7 +25,7 @@ import { isNumber } from 'vs/base/common/types';
 import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { ILogService } from 'vs/platform/log/common/log';
-import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles';
 
 @Component({
 	selector: 'modelview-inputBox',
@@ -46,7 +44,6 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 	@ViewChild('textarea', { read: ElementRef }) private _textareaContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(ILogService) logService: ILogService
@@ -71,7 +68,10 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 				}
 			},
 			useDefaultValidation: true,
-			inputBoxStyles: defaultInputBoxStyles
+			inputBoxStyles: getInputBoxStyle({
+				inputValidationInfoBackground: asCssVariable(inputBackground),
+				inputValidationInfoBorder: asCssVariable(inputBorder),
+			})
 		};
 		if (this._inputContainer) {
 			inputOptions.requireForceValidations = true; // Non-text area input boxes handle our own validations when the text changes so don't run the base ones
@@ -132,10 +132,6 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 			this._validations.push(() => !input.inputElement.validationMessage);
 
 			this._register(input);
-			this._register(attachInputBoxStyler(input, this.themeService, {
-				inputValidationInfoBackground: inputBackground,
-				inputValidationInfoBorder: inputBorder,
-			}));
 			this._register(input.onDidChange(async e => {
 				if (checkOption()) {
 					this.value = input.value;

src/sql/workbench/browser/modelComponents/table.component.ts

@@ -15,7 +15,7 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa
 
 import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
-import { attachTableFilterStyler, attachTableStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/base/browser/dom';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
@@ -41,7 +41,7 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
 import { deepClone, equals } from 'vs/base/common/objects';
-import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 export enum ColumnSizingMode {
 	ForceFit = 0,	// all columns will be sized to fit in viewable space, no horiz scroll bar
@@ -607,8 +607,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 
 
 	private registerFilterPlugin() {
-		const filterPlugin = new HeaderFilter<Slick.SlickData>({ buttonStyles: defaultButtonStyles }, this.contextViewService);
+		const filterPlugin = new HeaderFilter<Slick.SlickData>(defaultTableFilterStyles, this.contextViewService);
-		this._register(attachTableFilterStyler(filterPlugin, this.themeService));
 		this._filterPlugin = filterPlugin;
 		this._filterPlugin.onFilterApplied.subscribe((e, args) => {
 			let filterValues = (<any>args).column.filterValues;

src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts

@@ -46,12 +46,12 @@ import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys';
 import { LocalizedStrings } from 'sql/workbench/contrib/assessment/common/strings';
 import { ConnectionManagementInfo } from 'sql/platform/connection/common/connectionManagementInfo';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
 import { DASHBOARD_BORDER } from 'sql/workbench/common/theme';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
-import { defaultButtonStyles, defaultListStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultListStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 export const ASMTRESULTSVIEW_SELECTOR: string = 'asmt-results-view-component';
 export const ROW_HEIGHT: number = 25;
@@ -326,8 +326,7 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom
 		columnDef.formatter = (row, cell, value, columnDef, dataContext) => this.detailSelectionFormatter(row, cell, value, columnDef, dataContext as ExtendedItem<Slick.SlickData>);
 		columns.unshift(columnDef);
 
-		let filterPlugin = new HeaderFilter<Slick.SlickData>({ buttonStyles: defaultButtonStyles }, this._contextViewService);
+		let filterPlugin = new HeaderFilter<Slick.SlickData>(defaultTableFilterStyles, this._contextViewService);
-		this._register(attachTableFilterStyler(filterPlugin, this._themeService));
 		this.filterPlugin = filterPlugin;
 		this.filterPlugin.onFilterApplied.subscribe((e, args) => {
 			let filterValues = args.column.filterValues;

src/sql/workbench/contrib/backup/browser/backup.component.ts

@@ -11,7 +11,7 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { ListBox } from 'sql/base/browser/ui/listBox/listBox';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
+import { attachListBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import * as BackupConstants from 'sql/workbench/contrib/backup/common/constants';
 import { IBackupService, TaskExecutionMode } from 'sql/platform/backup/common/backupService';
@@ -606,17 +606,11 @@ export class BackupComponent extends AngularDisposable {
 
 	private registerListeners(): void {
 		// Theme styler
-		this._register(attachInputBoxStyler(this.backupNameBox!, this.themeService));
-		this._register(attachInputBoxStyler(this.recoveryBox!, this.themeService));
 		this._register(attachSelectBoxStyler(this.backupTypeSelectBox!, this.themeService));
 		this._register(attachListBoxStyler(this.pathListBox!, this.themeService));
 		this._register(attachSelectBoxStyler(this.compressionSelectBox!, this.themeService));
 		this._register(attachSelectBoxStyler(this.algorithmSelectBox!, this.themeService));
 		this._register(attachSelectBoxStyler(this.encryptorSelectBox!, this.themeService));
-		this._register(attachInputBoxStyler(this.mediaNameBox!, this.themeService));
-		this._register(attachInputBoxStyler(this.urlInputBox!, this.themeService));
-		this._register(attachInputBoxStyler(this.mediaDescriptionBox!, this.themeService));
-		this._register(attachInputBoxStyler(this.backupRetainDaysBox!, this.themeService));
 
 		this._register(this.backupTypeSelectBox!.onDidSelect(selected => this.onBackupTypeChanged()));
 		this._register(this.addUrlPathButton!.onDidClick(() => this.onAddUrlClick()));

src/sql/workbench/contrib/charts/browser/chartView.ts

@@ -25,7 +25,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { Registry } from 'vs/platform/registry/common/platform';
-import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
+import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ChartOptions, ControlType, IChartOption } from './chartOptions';
 import { Insight } from './insight';
@@ -385,7 +385,6 @@ export class ChartView extends Disposable implements IPanelView {
 						input.value = val;
 					}
 				};
-				this.optionDisposables.push(attachInputBoxStyler(input, this._themeService));
 				break;
 			case ControlType.numberInput:
 				let numberInput = new InputBox(optionInput, this._contextViewService, {
@@ -408,7 +407,6 @@ export class ChartView extends Disposable implements IPanelView {
 						numberInput.value = val;
 					}
 				};
-				this.optionDisposables.push(attachInputBoxStyler(numberInput, this._themeService));
 				break;
 			case ControlType.dateInput:
 				let dateInput = new InputBox(optionInput, this._contextViewService, {
@@ -431,7 +429,6 @@ export class ChartView extends Disposable implements IPanelView {
 						dateInput.value = val;
 					}
 				};
-				this.optionDisposables.push(attachInputBoxStyler(dateInput, this._themeService));
 				break;
 		}
 		this.optionMap[entry] = { element: optionContainer, set: setFunc };

src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts

@@ -11,7 +11,7 @@ import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 import { Action } from 'vs/base/common/actions';
 import { Codicon } from 'vs/base/common/codicons';
 import { filterIconClassNames, propertiesSearchDescription, searchPlaceholder, sortAlphabeticallyIconClassNames, sortByDisplayOrderIconClassNames, sortReverseAlphabeticallyIconClassNames } from 'sql/workbench/contrib/executionPlan/browser/constants';
-import { attachInputBoxStyler, attachTableStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
 import { contrastBorder, inputBackground, listHoverBackground, listInactiveSelectionBackground } from 'vs/platform/theme/common/colorRegistry';
 import { TreeGrid } from 'sql/base/browser/ui/table/treeGrid';
@@ -149,7 +149,6 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
 			inputBoxStyles: defaultInputBoxStyles
 		}));
 
-		this._register(attachInputBoxStyler(this._propertiesSearchInput, this._themeService));
 		this._propertiesSearchInput.element.classList.add('codicon', filterIconClassNames);
 		this._searchAndActionBarContainer.appendChild(this._propertiesSearchInputContainer);
 		this._register(this._propertiesSearchInput.onDidChange(e => {

src/sql/workbench/contrib/executionPlan/browser/topOperationsTab.ts

@@ -14,7 +14,7 @@ import { ExecutionPlanState } from 'sql/workbench/common/editor/query/executionP
 import { Table } from 'sql/base/browser/ui/table/table';
 import { hyperLinkFormatter, textFormatter } from 'sql/base/browser/ui/table/formatters';
 import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
-import { attachInputBoxStyler, attachTableStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { ExecutionPlanViewHeader } from 'sql/workbench/contrib/executionPlan/browser/executionPlanViewHeader';
 import { QueryResultsView } from 'sql/workbench/contrib/query/browser/queryResultsView';
@@ -186,7 +186,6 @@ export class TopOperationsTabView extends Disposable implements IPanelView {
 			placeholder: searchPlaceholder,
 			inputBoxStyles: defaultInputBoxStyles,
 		}));
-		this._register(attachInputBoxStyler(topOperationsSearchInput, this._themeService));
 		topOperationsSearchInput.element.classList.add('codicon', filterIconClassNames);
 
 		const header = this._register(this._instantiationService.createInstance(ExecutionPlanViewHeader, headerInfoContainer, {

src/sql/workbench/contrib/executionPlan/browser/widgets/customZoomWidget.ts

@@ -5,7 +5,6 @@
 
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 import { ExecutionPlanWidgetBase } from 'sql/workbench/contrib/executionPlan/browser/executionPlanWidgetBase';
 import * as DOM from 'vs/base/browser/dom';
 import { Action } from 'vs/base/common/actions';
@@ -43,7 +42,6 @@ export class CustomZoomWidget extends ExecutionPlanWidgetBase {
 			flexibleWidth: false,
 			inputBoxStyles: defaultInputBoxStyles
 		}));
-		this._register(attachInputBoxStyler(this.customZoomInputBox, this.themeService));
 
 		const currentZoom = this.executionPlanDiagram.getZoomLevel();
 

src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts

@@ -10,7 +10,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { localize } from 'vs/nls';
 import { Codicon } from 'vs/base/common/codicons';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
+import { attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { Action } from 'vs/base/common/actions';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
@@ -131,7 +131,6 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase {
 			}));
 		this._searchTextInputBox.setAriaLabel(ENTER_SEARCH_VALUE_TITLE);
 		this._searchTextInputBox.element.style.marginLeft = '5px';
-		this._register(attachInputBoxStyler(this._searchTextInputBox, this.themeService));
 		this._register(this._searchTextInputBox.onDidChange(e => {
 			this._usePreviousSearchResult = false;
 		}));

src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts

@@ -33,11 +33,10 @@ import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
-import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
-import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -189,8 +188,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		});
 		this.rowDetail = rowDetail;
 		columns.unshift(this.rowDetail.getColumnDefinition());
-		let filterPlugin = new HeaderFilter<IItem>({ buttonStyles: defaultButtonStyles }, this._contextViewService);
+		let filterPlugin = new HeaderFilter<IItem>(defaultTableFilterStyles, this._contextViewService);
-		this._register(attachTableFilterStyler(filterPlugin, this._themeService));
 		this.filterPlugin = filterPlugin;
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();

src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts

@@ -34,11 +34,10 @@ import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
-import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
-import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 
 export const NOTEBOOKSVIEW_SELECTOR: string = 'notebooksview-component';
@@ -188,8 +187,7 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 		});
 		this.rowDetail = rowDetail;
 		columns.unshift(this.rowDetail.getColumnDefinition());
-		let filterPlugin = new HeaderFilter<IItem>({ buttonStyles: defaultButtonStyles }, this._contextViewService);
+		let filterPlugin = new HeaderFilter<IItem>(defaultTableFilterStyles, this._contextViewService);
-		this._register(attachTableFilterStyler(filterPlugin, this._themeService));
 		this.filterPlugin = filterPlugin;
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();

src/sql/workbench/contrib/notebook/browser/cellViews/stdin.component.ts

@@ -13,18 +13,16 @@ import { nb } from 'azdata';
 import { localize } from 'vs/nls';
 
 import { IInputOptions } from 'vs/base/browser/ui/inputbox/inputBox';
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
+import { asCssVariable, inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 import { AngularDisposable } from 'sql/base/browser/lifecycle';
 import { Deferred } from 'sql/base/common/promise';
 import { ICellModel, CellExecutionState } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
-import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles';
 
 export const STDIN_SELECTOR: string = 'stdin-component';
 @Component({
@@ -44,7 +42,6 @@ export class StdInComponent extends AngularDisposable implements AfterViewInit {
 
 
 	constructor(
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService
 	) {
 		super();
@@ -54,17 +51,16 @@ export class StdInComponent extends AngularDisposable implements AfterViewInit {
 		let inputOptions: IInputOptions = {
 			placeholder: '',
 			ariaLabel: this.prompt,
-			inputBoxStyles: defaultInputBoxStyles
+			inputBoxStyles: getInputBoxStyle({
+				inputValidationInfoBackground: asCssVariable(inputBackground),
+				inputValidationInfoBorder: asCssVariable(inputBorder)
+			})
 		};
 		this._input = new InputBox(this._inputContainer.nativeElement, this.contextViewService, inputOptions);
 		if (this.password) {
 			this._input.inputElement.type = 'password';
 		}
 		this._register(this._input);
-		this._register(attachInputBoxStyler(this._input, this.themeService, {
-			inputValidationInfoBackground: inputBackground,
-			inputValidationInfoBorder: inputBorder,
-		}));
 		if (this.cellModel) {
 			this._register(this.cellModel.onExecutionStateChange((status) => this.handleExecutionChange(status)));
 		}

src/sql/workbench/contrib/notebook/browser/notebookViews/viewOptionsModal.ts

@@ -14,7 +14,6 @@ import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { ILogService } from 'vs/platform/log/common/log';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import * as DOM from 'vs/base/browser/dom';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 import { localize } from 'vs/nls';
 import { IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
@@ -99,8 +98,6 @@ export class ViewOptionsModal extends Modal {
 		this._submitButton = this.addFooterButton(localize('save', "Save"), () => this.onSubmitHandler());
 		this.addFooterButton(localize('cancel', "Cancel"), () => this.onCancelHandler(), 'right', true);
 
-		this._register(attachInputBoxStyler(this._viewNameInput!, this._themeService));
-
 		this._register(this._viewNameInput.onDidChange(v => this.validate()));
 
 		attachModalDialogStyler(this, this._themeService);

src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts

@@ -241,7 +241,6 @@ class DataResourceTable extends GridTableBase<any> {
 		@IUntitledTextEditorService untitledEditorService: IUntitledTextEditorService,
 		@IConfigurationService configurationService: IConfigurationService,
 		@IQueryModelService queryModelService: IQueryModelService,
-		@IThemeService themeService: IThemeService,
 		@IContextViewService contextViewService: IContextViewService,
 		@INotificationService notificationService: INotificationService,
 		@IExecutionPlanService executionPlanService: IExecutionPlanService,
@@ -254,7 +253,7 @@ class DataResourceTable extends GridTableBase<any> {
 		super(state, createResultSet(source), {
 			actionOrientation: ActionsOrientation.HORIZONTAL,
 			inMemoryDataProcessing: true
-		}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService, componentContextService, contextKeyService, logService);
+		}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService, componentContextService, contextKeyService, logService);
 		this._gridDataProvider = this.instantiationService.createInstance(DataResourceDataProvider, source, this.resultSet, this.cellModel);
 		this._chart = this.instantiationService.createInstance(ChartView, false);
 

src/sql/workbench/contrib/query/browser/gridPanel.ts

@@ -6,7 +6,7 @@
 import 'vs/css!./media/gridPanel';
 
 import { ITableStyles, ITableMouseEvent, FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
-import { attachTableFilterStyler, attachTableStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import QueryRunner, { QueryGridDataProvider } from 'sql/workbench/services/query/common/queryRunner';
 import { ResultSetSummary, IColumn, ICellValue } from 'sql/workbench/services/query/common/query';
 import { VirtualizedCollection } from 'sql/base/browser/ui/table/asyncDataView';
@@ -60,7 +60,7 @@ import { queryEditorNullBackground } from 'sql/platform/theme/common/colorRegist
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
 import { GridRange } from 'sql/base/common/gridRange';
 import { onUnexpectedError } from 'vs/base/common/errors';
-import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 const ROW_HEIGHT = 29;
 const HEADER_HEIGHT = 26;
@@ -422,7 +422,6 @@ export abstract class GridTableBase<T> extends Disposable implements IView, IQue
 		@IUntitledTextEditorService private readonly untitledEditorService: IUntitledTextEditorService,
 		@IConfigurationService protected readonly configurationService: IConfigurationService,
 		@IQueryModelService private readonly queryModelService: IQueryModelService,
-		@IThemeService private readonly themeService: IThemeService,
 		@IContextViewService private readonly contextViewService: IContextViewService,
 		@INotificationService private readonly notificationService: INotificationService,
 		@IExecutionPlanService private readonly executionPlanService: IExecutionPlanService,
@@ -622,9 +621,8 @@ export abstract class GridTableBase<T> extends Disposable implements IView, IQue
 		this.filterPlugin = new HeaderFilter({
 			disabledFilterMessage: localize('resultsGrid.maxRowCountExceeded', "Max row count for filtering/sorting has been exceeded. To update it, navigate to User Settings and change the setting: 'queryEditor.results.inMemoryDataProcessingThreshold'"),
 			refreshColumns: !autoSizeOnRender, // The auto size columns plugin refreshes the columns so we don't need to refresh twice if both plugins are on.
-			buttonStyles: defaultButtonStyles
+			...defaultTableFilterStyles
 		}, this.contextViewService, this.notificationService,);
-		this._register(attachTableFilterStyler(this.filterPlugin, this.themeService));
 		this._register(registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
 			const nullBackground = theme.getColor(queryEditorNullBackground);
 			if (nullBackground) {
@@ -1114,7 +1112,6 @@ class GridTable<T> extends GridTableBase<T> {
 		@IUntitledTextEditorService untitledEditorService: IUntitledTextEditorService,
 		@IConfigurationService configurationService: IConfigurationService,
 		@IQueryModelService queryModelService: IQueryModelService,
-		@IThemeService themeService: IThemeService,
 		@IContextViewService contextViewService: IContextViewService,
 		@INotificationService notificationService: INotificationService,
 		@IExecutionPlanService executionPlanService: IExecutionPlanService,
@@ -1128,7 +1125,7 @@ class GridTable<T> extends GridTableBase<T> {
 			inMemoryDataProcessing: true,
 			showActionBar: configurationService.getValue<IQueryEditorConfiguration>('queryEditor').results.showActionBar,
 			inMemoryDataCountThreshold: configurationService.getValue<IQueryEditorConfiguration>('queryEditor').results.inMemoryDataProcessingThreshold,
-		}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService, componentContextService, contextKeyService, logService);
+		}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService, componentContextService, contextKeyService, logService);
 		this._gridDataProvider = this.instantiationService.createInstance(QueryGridDataProvider, this._runner, resultSet.batchId, resultSet.id);
 		this.providerId = this._runner.getProviderId();
 	}

src/sql/workbench/contrib/query/browser/queryActions.ts

@@ -7,10 +7,9 @@ import 'vs/css!./media/queryActions';
 import * as nls from 'vs/nls';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { Action, IAction, IActionRunner } from 'vs/base/common/actions';
-import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
+import { Disposable } from 'vs/base/common/lifecycle';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import Severity from 'vs/base/common/severity';
 import { append, $ } from 'vs/base/browser/dom';
@@ -26,7 +25,6 @@ import {
 } from 'sql/platform/connection/common/connectionManagement';
 import { QueryEditor } from 'sql/workbench/contrib/query/browser/queryEditor';
 import { IQueryModelService } from 'sql/workbench/services/query/common/queryModel';
-import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler';
 import { Task } from 'sql/workbench/services/tasks/browser/tasksRegistry';
 import { IObjectExplorerService } from 'sql/workbench/services/objectExplorer/browser/objectExplorerService';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
@@ -49,6 +47,7 @@ import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { Codicon } from 'vs/base/common/codicons';
 import { ThemeIcon } from 'vs/base/common/themables';
+import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 /**
  * Action class that query-based Actions will extend. This base class automatically handles activating and
@@ -650,7 +649,8 @@ export class ListDatabasesActionItem extends Disposable implements IActionViewIt
 		this._dropdown = new Dropdown(this._databaseListDropdown, contextViewProvider, {
 			strictSelection: true,
 			placeholder: this._selectDatabaseString,
-			ariaLabel: this._selectDatabaseString
+			ariaLabel: this._selectDatabaseString,
+			...defaultEditableDropdownStyles
 		});
 
 		// Allows database selector to commit typed or pasted DB names without the need to click
@@ -666,10 +666,6 @@ export class ListDatabasesActionItem extends Disposable implements IActionViewIt
 		append(container, this._databaseListDropdown);
 	}
 
-	public style(styles) {
-		this._dropdown.style(styles);
-	}
-
 	public setActionContext(context: any): void {
 	}
 
@@ -685,10 +681,6 @@ export class ListDatabasesActionItem extends Disposable implements IActionViewIt
 		this._dropdown.blur();
 	}
 
-	public attachStyler(themeService: IThemeService): IDisposable {
-		return attachEditableDropdownStyler(this, themeService);
-	}
-
 	// EVENT HANDLERS FROM EDITOR //////////////////////////////////////////
 	public onConnected(): void {
 		let dbName = this.getCurrentDatabaseName();

src/sql/workbench/contrib/query/browser/queryEditor.ts

@@ -284,7 +284,6 @@ export class QueryEditor extends EditorPane {
 		if (action.id === actions.ListDatabasesAction.ID) {
 			if (!this._listDatabasesActionItem) {
 				this._listDatabasesActionItem = this.instantiationService.createInstance(actions.ListDatabasesActionItem, this, action);
-				this._register(this._listDatabasesActionItem.attachStyler(this.themeService));
 			}
 			return this._listDatabasesActionItem;
 		}

src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts

@@ -6,7 +6,7 @@
 import 'vs/css!./media/resourceViewerTable';
 import * as azdata from 'azdata';
 import { Table } from 'sql/base/browser/ui/table/table';
-import { attachTableFilterStyler, attachTableStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
 
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -28,7 +28,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
-import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 export class ResourceViewerTable extends Disposable {
 
@@ -62,8 +62,7 @@ export class ResourceViewerTable extends Disposable {
 		}));
 
 		this._resourceViewerTable.setSelectionModel(new RowSelectionModel());
-		let filterPlugin = new HeaderFilter<azdata.DataGridItem>({ buttonStyles: defaultButtonStyles }, this._contextViewService);
+		let filterPlugin = new HeaderFilter<azdata.DataGridItem>(defaultTableFilterStyles, this._contextViewService);
-		this._register(attachTableFilterStyler(filterPlugin, this._themeService));
 		this._register(attachTableStyler(this._resourceViewerTable, this._themeService));
 		this._register(this._resourceViewerTable.onClick(this.onTableClick, this));
 		this._register(this._resourceViewerTable.onContextMenu((e: ITableMouseEvent) => {

src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts

@@ -6,7 +6,6 @@
 import 'vs/css!./media/autoOAuthDialog';
 
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
@@ -112,8 +111,6 @@ export class AutoOAuthDialog extends Modal {
 		// Theme styler
 		this._register(this._copyAndOpenButton!);
 		this._register(this._closeButton!);
-		this._register(attachInputBoxStyler(this._userCodeInputBox!, this._themeService));
-		this._register(attachInputBoxStyler(this._websiteInputBox!, this._themeService));
 
 	}
 

src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts

@@ -13,7 +13,7 @@ import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { localize } from 'vs/nls';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
+import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import * as DOM from 'vs/base/browser/dom';
 import * as strings from 'vs/base/common/strings';
 import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
@@ -445,11 +445,6 @@ export class BackupRestoreUrlBrowserDialog extends Modal {
 		this._register(attachSelectBoxStyler(this._subscriptionSelectorBox, this._themeService));
 		this._register(attachSelectBoxStyler(this._storageAccountSelectorBox, this._themeService));
 		this._register(attachSelectBoxStyler(this._blobContainerSelectorBox, this._themeService));
-		this._register(attachInputBoxStyler(this._sasInputBox, this._themeService));
-
-		if (this._backupFileInputBox) {
-			this._register(attachInputBoxStyler(this._backupFileInputBox, this._themeService));
-		}
 		if (this._backupFileSelectorBox) {
 			this._register(attachSelectBoxStyler(this._backupFileSelectorBox, this._themeService));
 		}

src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts

@@ -13,7 +13,6 @@ import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import { ConnectionOptionSpecialType } from 'sql/workbench/api/common/sqlExtHostTypes';
 import * as Constants from 'sql/platform/connection/common/constants';
 import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
-import * as styler from 'sql/platform/theme/common/styler';
 import { IAccountManagementService } from 'sql/platform/accounts/common/interfaces';
 
 import * as azdata from 'azdata';
@@ -60,13 +59,6 @@ export class CmsConnectionWidget extends ConnectionWidget {
 		}
 	}
 
-	protected override registerListeners(): void {
-		super.registerListeners();
-		if (this._serverDescriptionInputBox) {
-			this._register(styler.attachInputBoxStyler(this._serverDescriptionInputBox, this._themeService));
-		}
-	}
-
 	protected override fillInConnectionForm(authTypeChanged: boolean = false): void {
 		// Server Name
 		this.addServerNameOption();

src/sql/workbench/services/connection/browser/connectionBrowseTab.ts

@@ -10,7 +10,6 @@ import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilit
 import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
 import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
 import { ConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 import { ITreeItem } from 'sql/workbench/common/views';
 import { CONNECTIONS_SORT_BY_CONFIG_KEY } from 'sql/platform/connection/common/connectionConfig';
 import { ConnectionSource } from 'sql/workbench/services/connection/browser/connectionDialogWidget';
@@ -118,7 +117,6 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
 		//this._register(attachProgressBarStyler(this.filterProgressBar, this.themeService));
 		this.filterInput.element.style.margin = '5px';
 		this._register(this.filterInput);
-		this._register(attachInputBoxStyler(this.filterInput, this.themeService));
 		this._register(this.filterInput.onDidChange(async () => {
 			await this.applyFilter();
 		}));

src/sql/workbench/services/connection/browser/connectionWidget.ts

@@ -46,7 +46,7 @@ import { isMssqlAuthProviderEnabled } from 'sql/workbench/services/connection/br
 import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label';
 import { FieldSet } from 'sql/base/browser/ui/fieldset/fieldset';
 import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 const ConnectionStringText = localize('connectionWidget.connectionString', "Connection string");
 
@@ -309,7 +309,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
 							placeholder: option.placeholder,
 							inputBoxStyles: defaultInputBoxStyles
 						});
-						this._register(styler.attachInputBoxStyler(this._customOptionWidgets[i] as InputBox, this._themeService));
 						break;
 				}
 				this._register(this._customOptionWidgets[i]);
@@ -468,7 +467,8 @@ export class ConnectionWidget extends lifecycle.Disposable {
 				strictSelection: false,
 				placeholder: databaseOption.placeholder ?? this._defaultDatabaseName,
 				maxHeight: 125,
-				ariaLabel: databaseOption.displayName
+				ariaLabel: databaseOption.displayName,
+				...defaultEditableDropdownStyles
 			});
 			this._register(this._databaseNameInputBox);
 		}
@@ -541,10 +541,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
 
 	protected registerListeners(): void {
 		// Theme styler
-		this._register(styler.attachInputBoxStyler(this._serverNameInputBox, this._themeService));
-		this._register(styler.attachInputBoxStyler(this._connectionNameInputBox, this._themeService));
-		this._register(styler.attachInputBoxStyler(this._userNameInputBox, this._themeService));
-		this._register(styler.attachInputBoxStyler(this._passwordInputBox, this._themeService));
 		this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService));
 		if (this._serverGroupSelectBox) {
 			this._register(styler.attachSelectBoxStyler(this._serverGroupSelectBox, this._themeService));
@@ -553,7 +549,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
 			}));
 		}
 		if (this._databaseNameInputBox) {
-			this._register(styler.attachEditableDropdownStyler(this._databaseNameInputBox, this._themeService));
 			this._register(this._databaseNameInputBox.onFocus(() => {
 				this._databaseDropdownExpanded = true;
 				if (this.serverName) {
@@ -581,10 +576,6 @@ export class ConnectionWidget extends lifecycle.Disposable {
 			}));
 		}
 
-		if (this._connectionStringInputBox) {
-			this._register(styler.attachInputBoxStyler(this._connectionStringInputBox, this._themeService));
-		}
-
 		if (this._authTypeSelectBox) {
 			// Theme styler
 			this._register(styler.attachSelectBoxStyler(this._authTypeSelectBox, this._themeService));

src/sql/workbench/services/connection/browser/passwordChangeDialog.ts

@@ -7,7 +7,6 @@ import 'vs/css!./media/passwordDialog';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
@@ -102,7 +101,6 @@ export class PasswordChangeDialog extends Modal {
 			type: 'password',
 			inputBoxStyles: defaultInputBoxStyles
 		});
-		this._register(attachInputBoxStyler(this._passwordValueText, this._themeService));
 
 		contentElement.appendChild(DOM.$('')).appendChild(DOM.$('span.component-label')).innerText = confirmPasswordText;
 		const confirmInputContainer = contentElement.appendChild(DOM.$(''));
@@ -110,7 +108,6 @@ export class PasswordChangeDialog extends Modal {
 			type: 'password',
 			inputBoxStyles: defaultInputBoxStyles
 		});
-		this._register(attachInputBoxStyler(this._confirmValueText, this._themeService));
 	}
 
 	protected layout(height?: number): void {

src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts

@@ -20,7 +20,7 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
+import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import * as DOM from 'vs/base/browser/dom';
 import * as strings from 'vs/base/common/strings';
 import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
@@ -227,7 +227,6 @@ export class FileBrowserDialog extends Modal {
 		}));
 
 		// Theme styler
-		this._register(attachInputBoxStyler(this._filePathInputBox, this._themeService));
 		this._register(attachSelectBoxStyler(this._fileFilterSelectBox, this._themeService));
 
 		this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme()));

src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./../media/filterDialog';
-import { Button } from 'sql/base/browser/ui/button/button';
 import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { Modal } from 'sql/workbench/browser/modal/modal'
@@ -15,13 +14,10 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { localize } from 'vs/nls';
 import { attachModalDialogStyler } from 'sql/workbench/common/styler';
-//import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
 import * as DOM from 'vs/base/browser/dom';
 import * as azdata from 'azdata';
-import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { NodeFilterPropertyDataType, NodeFilterOperator } from 'sql/workbench/api/common/sqlExtHostTypes';
-import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { TableCellEditorFactory } from 'sql/base/browser/ui/table/tableCellEditorFactory';
 import { Emitter } from 'vs/base/common/event';
@@ -30,15 +26,14 @@ import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import { TableHeaderRowHeight, TableRowHeight } from 'sql/workbench/browser/designer/designerTableUtil';
 import { textFormatter } from 'sql/base/browser/ui/table/formatters';
-import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
-import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
-import { TabbedPanel } from 'sql/base/browser/ui/panel/panel';
 import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
 import Severity from 'vs/base/common/severity';
 import { status } from 'vs/base/browser/ui/aria/aria';
 import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { defaultInputBoxStyles, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 // strings for filter dialog
 const OkButtonText = localize('objectExplorer.okButtonText', "OK");
@@ -83,7 +78,6 @@ export class FilterDialog extends Modal {
 
 	private filterTable: Table<Slick.SlickData>;
 	private _tableCellEditorFactory: TableCellEditorFactory;
-	private _onStyleChangeEventEmitter = new Emitter<void>();
 	private _description: HTMLElement;
 	private _onFilterApplied = new Emitter<azdata.NodeFilter[]>();
 	public readonly onFilterApplied = this._onFilterApplied.event;
@@ -226,10 +220,9 @@ export class FilterDialog extends Modal {
 				optionsGetter: (item, column): string[] => {
 					return item[column.field].values;
 				},
-				editorStyler: (component) => {
+				inputBoxStyles: defaultInputBoxStyles,
-					this.styleComponent(component);
+				editableDropdownStyles: defaultEditableDropdownStyles,
-				},
+				selectBoxStyles: defaultSelectBoxStyles
-				onStyleChange: this._onStyleChangeEventEmitter.event
 			}, this._contextViewProvider
 		);
 		const columns: Slick.Column<Slick.SlickData>[] = [
@@ -675,17 +668,6 @@ export class FilterDialog extends Modal {
 		});
 	}
 
-	private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Button | Dropdown): void {
-		// if (component instanceof InputBox) {
-		// 	this._register(attachInputBoxStyler(component, this._themeService));
-		// } else if (component instanceof SelectBox) {
-		// 	this._register(attachSelectBoxStyler(component, this._themeService));
-		// } else if (component instanceof Table) {
-		// 	this._register(attachTableStyler(component, this._themeService));
-		// }
-	}
-
-
 	/**
 	 * This method is used to let user apply filters on the given filters properties.
 	 * @param properties Properties on which user can apply filters.

src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts

@@ -7,7 +7,6 @@ import 'vs/css!./media/profilerFilterDialog';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -251,7 +250,6 @@ export class ProfilerFilterDialog extends Modal {
 			ariaLabel: ValueText,
 			inputBoxStyles: defaultInputBoxStyles
 		});
-		this._register(attachInputBoxStyler(valueText, this._themeService));
 
 		const removeCell = DOM.append(row, DOM.$('td'));
 		const removeClauseButton = DOM.append(removeCell, DOM.$('.profiler-filter-remove-condition.codicon.remove', {

src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts

@@ -10,7 +10,6 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
 import { buttonBackground } from 'vs/platform/theme/common/colorRegistry';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
@@ -266,9 +265,6 @@ export class FirewallRuleDialog extends Modal {
 		// Theme styler
 		this._register(this._createButton!);
 		this._register(this._closeButton!);
-		this._register(attachInputBoxStyler(this._ruleNameInpuBox!, this._themeService));
-		this._register(attachInputBoxStyler(this._fromRangeinputBox!, this._themeService));
-		this._register(attachInputBoxStyler(this._toRangeinputBox!, this._themeService));
 
 		// handler for firewall rule name change events
 		this._register(this._ruleNameInpuBox!.onDidChange(ruleName => {

src/sql/workbench/services/restore/browser/restoreDialog.ts

@@ -30,7 +30,7 @@ import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
 import { HideReason, Modal } from 'sql/workbench/browser/modal/modal';
-import { attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/workbench/services/restore/browser/restoreViewModel';
 import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants';
@@ -51,7 +51,7 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
 import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 interface FileListElement {
 	logicalFileName: string;
@@ -265,7 +265,8 @@ export class RestoreDialog extends Modal {
 		this._databaseDropdown = this._register(new Dropdown(dropdownContainer, this._contextViewService,
 			{
 				strictSelection: false,
-				ariaLabel: LocalizedStrings.TARGETDATABASE
+				ariaLabel: LocalizedStrings.TARGETDATABASE,
+				...defaultEditableDropdownStyles
 			}
 		));
 		this._databaseDropdown.onValueChange(s => {
@@ -281,7 +282,6 @@ export class RestoreDialog extends Modal {
 		});
 
 		this._databaseDropdown.value = this.viewModel.targetDatabaseName!;
-		attachEditableDropdownStyler(this._databaseDropdown, this._themeService);
 
 		this._targetDatabaseInputElement = DOM.append(destinationElement, DOM.$('.dialog-input-section'));
 		DOM.append(this._targetDatabaseInputElement, DOM.$('.dialog-label')).innerText = LocalizedStrings.TARGETDATABASE;
@@ -303,7 +303,8 @@ export class RestoreDialog extends Modal {
 
 		const restoreToLabel = localize('restoreTo', "Restore to");
 		const destinationRestoreToAriaOptions = {
-			ariaLabel: restoreToLabel
+			ariaLabel: restoreToLabel,
+			inputBoxStyles: defaultInputBoxStyles
 		};
 		this._destinationRestoreToContainer = DOM.append(destinationElement, DOM.$('.dialog-input-section'));
 		DOM.append(this._destinationRestoreToContainer, DOM.$('.dialog-label')).innerText = restoreToLabel;
@@ -525,8 +526,7 @@ export class RestoreDialog extends Modal {
 				}));
 				break;
 			case ServiceOptionType.string:
-				propertyWidget = this.createInputBoxHelper(container, option.description);
+				propertyWidget = this.createInputBoxHelper(container, option.description, { inputBoxStyles: defaultInputBoxStyles });
-				this._register(attachInputBoxStyler(propertyWidget, this._themeService));
 				this._register(propertyWidget.onLoseFocus(params => {
 					this.onStringOptionChanged(optionName, params);
 				}));
@@ -572,7 +572,7 @@ export class RestoreDialog extends Modal {
 		return selectBox;
 	}
 
-	private createInputBoxHelper(container: HTMLElement, label: string, options?: IInputOptions): InputBox {
+	private createInputBoxHelper(container: HTMLElement, label: string, options: IInputOptions): InputBox {
 		const ariaOptions = {
 			ariaLabel: label
 		};
@@ -663,10 +663,6 @@ export class RestoreDialog extends Modal {
 
 	private registerListeners(): void {
 		// Theme styler
-		this._register(attachInputBoxStyler(this._targetDatabaseInputBox, this._themeService));
-		this._register(attachInputBoxStyler(this._urlInputBox!, this._themeService));
-		this._register(attachInputBoxStyler(this._filePathInputBox!, this._themeService));
-		this._register(attachInputBoxStyler(this._destinationRestoreToInputBox!, this._themeService));
 		this._register(attachSelectBoxStyler(this._restoreFromSelectBox!, this._themeService));
 		this._register(attachSelectBoxStyler(this._sourceDatabaseSelectBox!, this._themeService));
 		this._register(this._browseFileButton!);

src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts

@@ -11,7 +11,6 @@ import * as DOM from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler';
 import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
@@ -175,9 +174,6 @@ export class ServerGroupDialog extends Modal {
 
 	private registerListeners(): void {
 		const renderedDialog = this.withRenderedDialog;
-		// Theme styler
-		this._register(attachInputBoxStyler(renderedDialog.groupNameInputBox, this._themeService));
-		this._register(attachInputBoxStyler(renderedDialog.groupDescriptionInputBox, this._themeService));
 		this._register(renderedDialog.addServerButton);
 		this._register(renderedDialog.closeButton);
 

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

@@ -220,6 +220,7 @@ export class Button extends Disposable implements IButton {
 			background = border = 'transparent';
 			foreground = this.options.buttonSecondaryForeground;
 			fontWeight = fontSize = 'inherit';
+			this._element.style.backgroundRepeat = 'no-repeat';
 		} else {
 			if (this.enabled) {
 				if (this.options.secondary) {

src/vs/base/browser/ui/inputbox/inputBox.ts

@@ -57,6 +57,11 @@ export interface IInputBoxStyles {
 	readonly inputValidationErrorBorder: string | undefined;
 	readonly inputValidationErrorBackground: string | undefined;
 	readonly inputValidationErrorForeground: string | undefined;
+	// {{SQL CARBON EDIT}}
+	readonly disabledInputBackground: string | undefined;
+	readonly disabledInputForeground: string | undefined;
+	readonly disabledInputBorder: string | undefined;
+	// {{SQL CARBON EDIT}} - End
 }
 
 export interface IInputValidator {
@@ -97,7 +102,12 @@ export const unthemedInboxStyles: IInputBoxStyles = {
 	inputBorder: undefined,
 	inputValidationErrorForeground: undefined,
 	inputValidationInfoForeground: undefined,
-	inputValidationWarningForeground: undefined
+	inputValidationWarningForeground: undefined,
+	// {{SQL CARBON EDIT}}
+	disabledInputBackground: undefined,
+	disabledInputForeground: undefined,
+	disabledInputBorder: undefined
+	// {{SQL CARBON EDIT}} - End
 };
 
 export class InputBox extends Widget {
@@ -233,9 +243,6 @@ export class InputBox extends Widget {
 		this.applyStyles();
 	}
 
-	public style(styles: IInputBoxStyles): void { // {{SQL CARBON TODO}} - remove this method
-	}
-
 	protected onBlur(): void {
 		this._hideMessage();
 		if (this.options.showPlaceholderOnFocus) {

src/vs/platform/theme/browser/defaultStyles.ts

@@ -16,6 +16,7 @@ import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
 import { ISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox';
 import { Color } from 'vs/base/common/color';
 import { IMenuStyles } from 'vs/base/browser/ui/menu/menu';
+import { disabledInputBackground, disabledInputForeground } from 'sql/platform/theme/common/colors'; // {{SQL CARBON EDIT}}
 
 export type IStyleOverride<T> = {
 	[P in keyof T]?: ColorIdentifier | undefined;
@@ -118,7 +119,12 @@ export const defaultInputBoxStyles: IInputBoxStyles = {
 	inputValidationWarningForeground: asCssVariable(inputValidationWarningForeground),
 	inputValidationErrorBorder: asCssVariable(inputValidationErrorBorder),
 	inputValidationErrorBackground: asCssVariable(inputValidationErrorBackground),
-	inputValidationErrorForeground: asCssVariable(inputValidationErrorForeground)
+	inputValidationErrorForeground: asCssVariable(inputValidationErrorForeground),
+	// {{SQL CARBON EDIT}}
+	disabledInputBackground: asCssVariable(disabledInputBackground),
+	disabledInputForeground: asCssVariable(disabledInputForeground),
+	disabledInputBorder: 'transparent'
+	// {{SQL CARBON EDIT}} - END
 };
 
 export function getInputBoxStyle(override: IStyleOverride<IInputBoxStyles>): IInputBoxStyles {