redo the table styles (#23538)

2026-01-14 01:25:37 -05:00 · 2023-06-28 22:19:40 -07:00
parent 562a0ce595
commit dec81143bc
35 changed files with 137 additions and 262 deletions
--- a/src/sql/base/browser/ui/table/interfaces.ts
+++ b/src/sql/base/browser/ui/table/interfaces.ts
@@ -4,17 +4,31 @@
 *--------------------------------------------------------------------------------------------*/

 import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
-import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
-import { Color } from 'vs/base/common/color';

 export interface ITableMouseEvent {
 	anchor: HTMLElement | { x: number, y: number };
 	cell?: { row: number, cell: number };
 }

-export interface ITableStyles extends IListStyles {
-	tableHeaderBackground?: Color;
-	tableHeaderForeground?: Color;
+export interface ITableStyles {
+	listFocusBackground: string | undefined;
+	listFocusForeground: string | undefined;
+	listActiveSelectionBackground: string | undefined;
+	listActiveSelectionForeground: string | undefined;
+	listFocusAndSelectionBackground: string | undefined;
+	listFocusAndSelectionForeground: string | undefined;
+	listInactiveFocusBackground: string | undefined;
+	listInactiveSelectionBackground: string | undefined;
+	listInactiveSelectionForeground: string | undefined;
+	listHoverBackground: string | undefined;
+	listHoverForeground: string | undefined;
+	listDropBackground: string | undefined;
+	listFocusOutline: string | undefined;
+	listSelectionOutline: string | undefined;
+	listHoverOutline: string | undefined;
+	listInactiveFocusOutline: string | undefined;
+	tableHeaderBackground: string | undefined;
+	tableHeaderForeground: string | undefined;
 }

 export interface ITableSorter<T> {
--- a/src/sql/base/browser/ui/table/table.ts
+++ b/src/sql/base/browser/ui/table/table.ts
@@ -23,7 +23,6 @@ import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 import { IAccessibilityProvider } from 'sql/base/browser/ui/accessibility/accessibilityProvider';
 import { IQuickInputProvider } from 'sql/base/browser/ui/quickInput/quickInputProvider';
 import { localize } from 'vs/nls';
-import { IThemable } from 'sql/platform/theme/common/vsstyler';

 function getDefaultOptions<T>(): Slick.GridOptions<T> {
 	return <Slick.GridOptions<T>>{
@@ -33,7 +32,7 @@ function getDefaultOptions<T>(): Slick.GridOptions<T> {
 	};
 }

-export class Table<T extends Slick.SlickData> extends Widget implements IDisposable, IThemable {
+export class Table<T extends Slick.SlickData> extends Widget implements IDisposable {
 	protected styleElement: HTMLStyleElement;
 	protected idPrefix: string;

@@ -73,6 +72,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 		parent: HTMLElement,
 		accessibilityProvider: IAccessibilityProvider,
 		private _quickInputProvider: IQuickInputProvider,
+		styles: ITableStyles,
 		configuration?: ITableConfiguration<T>,
 		options?: Slick.GridOptions<T>) {
 		super();
@@ -142,6 +142,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 		this.mapMouseEvent(this._grid.onHeaderClick, this._onHeaderClick);
 		this.mapMouseEvent(this._grid.onDblClick, this._onDoubleClick);
 		this._grid.onColumnsResized.subscribe(() => this._onColumnResize.fire());
+		this.style(styles);
 	}

 	public async resizeActiveColumn(): Promise<void> {
--- a/src/sql/base/browser/ui/table/treeGrid.ts
+++ b/src/sql/base/browser/ui/table/treeGrid.ts
@@ -40,8 +40,8 @@ function defaultTreeGridFilter<T extends Slick.SlickData>(data: T[], columns: Fi
 * TreeGrid component displays a hierarchical table data grouped into expandable and collapsible nodes.
 */
 export class TreeGrid<T extends Slick.SlickData> extends Table<T> {
-	constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, quickInputProvider: IQuickInputProvider, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
-		super(parent, accessibilityProvider, quickInputProvider, configuration, options);
+	constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, quickInputProvider: IQuickInputProvider, styles: ITableStyles, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
+		super(parent, accessibilityProvider, quickInputProvider, styles, configuration, options);
 		this._tableContainer.setAttribute('role', 'treegrid');
 		if (configuration?.dataProvider && configuration.dataProvider instanceof TableDataView) {
 			this._data = configuration.dataProvider;
@@ -117,6 +117,7 @@ export class TreeGrid<T extends Slick.SlickData> extends Table<T> {
 			}
 			return false;
 		});
+		this.style(styles);
 	}

 	override setData(data: Array<T>): void;
--- a/src/sql/platform/theme/browser/defaultStyles.ts
+++ b/src/sql/platform/theme/browser/defaultStyles.ts
@@ -7,9 +7,10 @@ import { IDropdownStyles } from 'sql/base/browser/ui/dropdownList/dropdownList';
 import { IEditableDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
 import { IListBoxStyles } from 'sql/base/browser/ui/listBox/listBox';
 import { ISelectBoxStyles } from 'sql/base/browser/ui/selectBox/selectBox';
+import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
 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 { disabledCheckboxForeground, listFocusAndSelectionBackground, tableHeaderBackground, tableHeaderForeground } from 'sql/platform/theme/common/colors';
 import { IInfoBoxStyles } from 'sql/workbench/browser/ui/infoBox/infoBox';
 import { IButtonStyles } from 'vs/base/browser/ui/button/button';
 import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, defaultSelectBoxStyles as vsDefaultSelectBoxStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
@@ -85,3 +86,28 @@ export const defaultInfoBoxStyles: IInfoBoxStyles = {
 	errorBackground: cr.asCssVariable(sqlcr.infoBoxErrorBackground),
 	successBackground: cr.asCssVariable(sqlcr.infoBoxSuccessBackground)
 };
+
+export const defaultTableStyles: ITableStyles = {
+	listFocusBackground: cr.asCssVariable(cr.listFocusBackground),
+	listFocusForeground: cr.asCssVariable(cr.listFocusForeground),
+	listActiveSelectionBackground: cr.asCssVariable(cr.listActiveSelectionBackground),
+	listActiveSelectionForeground: cr.asCssVariable(cr.listActiveSelectionForeground),
+	listFocusAndSelectionBackground: cr.asCssVariable(listFocusAndSelectionBackground),
+	listFocusAndSelectionForeground: cr.asCssVariable(cr.listActiveSelectionForeground),
+	listInactiveFocusBackground: undefined,
+	listInactiveSelectionBackground: cr.asCssVariable(cr.listInactiveSelectionBackground),
+	listInactiveSelectionForeground: undefined,
+	listHoverBackground: cr.asCssVariable(cr.listHoverBackground),
+	listHoverForeground: cr.asCssVariable(cr.listHoverForeground),
+	listDropBackground: cr.asCssVariable(cr.listDropBackground),
+	listFocusOutline: cr.asCssVariable(cr.activeContrastBorder),
+	listSelectionOutline: cr.asCssVariable(cr.activeContrastBorder),
+	listHoverOutline: cr.asCssVariable(cr.activeContrastBorder),
+	listInactiveFocusOutline: cr.asCssVariable(cr.listInactiveFocusOutline),
+	tableHeaderBackground: cr.asCssVariable(tableHeaderBackground),
+	tableHeaderForeground: cr.asCssVariable(tableHeaderForeground)
+};
+
+export function getTableStyles(styles: IStyleOverride<ITableStyles>): ITableStyles {
+	return overrideStyles(styles, defaultTableStyles);
+}
--- a/src/sql/platform/theme/common/styler.ts
+++ b/src/sql/platform/theme/common/styler.ts
@@ -3,68 +3,16 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-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, IStyleOverrides } from 'sql/platform/theme/common/vsstyler';
 import { IDisposable } from 'vs/base/common/lifecycle';

-export interface ITableStyleOverrides 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,
-}
-
-export const defaultTableStyles: ITableStyleOverrides = {
-	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,
-	listInactiveFocusOutline: cr.listInactiveFocusOutline,
-	tableHeaderBackground: colors.tableHeaderBackground,
-	tableHeaderForeground: colors.tableHeaderForeground
-};
-
-export function attachTableStyler(widget: IThemable, themeService: IThemeService, style?: ITableStyleOverrides): IDisposable {
-	return attachStyler(themeService, { ...defaultTableStyles, ...(style || {}) }, widget);
-}
-
 export function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable {
 	function applyStyles(): void {
 		const colorTheme = themeService.getColorTheme();
-		const tableStyles = computeStyles(colorTheme, defaultTableStyles);
 		widget.style({
-			tableStyles: tableStyles,
 			paneSeparator: cr.resolveColorValue(sqlcr.DesignerPaneSeparator, colorTheme),
-			groupHeaderBackground: cr.resolveColorValue(sqlcr.GroupHeaderBackground, colorTheme)
 		});
 	}

--- a/src/sql/workbench/browser/designer/designer.ts
+++ b/src/sql/workbench/browser/designer/designer.ts
@@ -9,14 +9,13 @@ import {
 	DesignerEditProcessedEventArgs, DesignerStateChangedEventArgs, DesignerAction, ScriptProperty, DesignerRootObjectPath, CanBeDeletedProperty, DesignerUIArea
 }
 	from 'sql/workbench/browser/designer/interfaces';
-import { IPanelTab, ITabbedPanelStyles, TabbedPanel } from 'sql/base/browser/ui/panel/panel';
+import { IPanelTab, TabbedPanel } from 'sql/base/browser/ui/panel/panel';
 import * as DOM from 'vs/base/browser/dom';
-import { Emitter, Event } from 'vs/base/common/event';
+import { 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 { 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';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
@@ -38,7 +37,7 @@ import { DesignerIssuesTabPanelView } from 'sql/workbench/browser/designer/desig
 import { DesignerScriptEditorTabPanelView } from 'sql/workbench/browser/designer/designerScriptEditorTabPanelView';
 import { DesignerPropertyPathValidator } from 'sql/workbench/browser/designer/designerPropertyPathValidator';
 import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { listActiveSelectionBackground, listActiveSelectionForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
+import { asCssVariable, 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 } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
@@ -55,20 +54,18 @@ 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 { ThemeIcon } from 'vs/base/common/themables';
-import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
-
-export interface IDesignerStyle {
-	tabbedPanelStyles?: ITabbedPanelStyles;
-	tableStyles?: ITableStyles;
-	paneSeparator?: Color;
-	groupHeaderBackground?: Color;
-}
+import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles, getTableStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { GroupHeaderBackground } from 'sql/platform/theme/common/colorRegistry';

 export type DesignerUIComponent = InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Dropdown;

 export type CreateComponentsFunc = (container: HTMLElement, components: DesignerDataPropertyInfo[], parentPath: DesignerPropertyPath) => DesignerUIComponent[];
 export type SetComponentValueFunc = (definition: DesignerDataPropertyInfo, component: DesignerUIComponent, data: DesignerViewModel) => void;

+export interface IDesignerStyles {
+	paneSeparator: Color;
+}
+
 interface DesignerTableCellContext {
 	view: DesignerUIArea;
 	path: DesignerPropertyPath;
@@ -90,7 +87,6 @@ export class Designer extends Disposable {
 	private _contentContainer: HTMLElement;
 	private _topContentContainer: HTMLElement;
 	private _propertiesPaneContainer: HTMLElement;
-	private _styles: IDesignerStyle = {};
 	private _supressEditProcessing: boolean = false;
 	private _componentMap = new Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>();
 	private _input: DesignerComponentInput;
@@ -98,12 +94,10 @@ export class Designer extends Disposable {
 	private _propertiesPane: DesignerPropertiesPane;
 	private _inputDisposable: DisposableStore;
 	private _loadingTimeoutHandle: any;
-	private _groupHeaders: HTMLElement[] = [];
 	private _issuesView: DesignerIssuesTabPanelView;
 	private _scriptEditorView: DesignerScriptEditorTabPanelView;
 	private _taskbars: Taskbar[] = [];
 	private _actionsMap: Map<Taskbar, DesignerTableAction[]> = new Map<Taskbar, DesignerTableAction[]>();
-	private _onStyleChangeEventEmitter = new Emitter<void>();

 	constructor(private readonly _container: HTMLElement,
 		@IInstantiationService private readonly _instantiationService: IInstantiationService,
@@ -205,54 +199,13 @@ export class Designer extends Disposable {


 		this._propertiesPane = new DesignerPropertiesPane(this._propertiesPaneContainer, (container, components, parentPath) => {
-			return this.createComponents(container, components, this._propertiesPane.componentMap, this._propertiesPane.groupHeaders, parentPath, 'PropertiesView');
+			return this.createComponents(container, components, this._propertiesPane.componentMap, parentPath, 'PropertiesView');
 		}, (definition, component, viewModel) => {
 			this.setComponentValue(definition, component, viewModel);
 		}, this._instantiationService);
 	}

-	private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Dropdown): void {
-		if (component instanceof InputBox) {
-		} else if (component instanceof Checkbox) {
-		} else if (component instanceof TabbedPanel) {
-			component.style(this._styles.tabbedPanelStyles);
-		} else if (component instanceof Table) {
-			this.removeTableSelectionStyles();
-			component.style(this._styles.tableStyles);
-		} else if (component instanceof Dropdown) {
-		} else {
-		}
-	}
-
-	private removeTableSelectionStyles(): void {
-		this._styles.tableStyles.listActiveSelectionBackground = undefined;
-		this._styles.tableStyles.listActiveSelectionForeground = undefined;
-		this._styles.tableStyles.listFocusAndSelectionBackground = undefined;
-		this._styles.tableStyles.listFocusAndSelectionForeground = undefined;
-		this._styles.tableStyles.listInactiveFocusBackground = undefined;
-		this._styles.tableStyles.listInactiveFocusForeground = undefined;
-		this._styles.tableStyles.listInactiveSelectionBackground = undefined;
-		this._styles.tableStyles.listInactiveSelectionForeground = undefined;
-	}
-
-	private styleGroupHeader(header: HTMLElement): void {
-		if (this._styles.groupHeaderBackground) {
-			header.style.backgroundColor = this._styles.groupHeaderBackground.toString();
-		}
-	}
-
-	public style(styles: IDesignerStyle): void {
-		this._styles = styles;
-		this._componentMap.forEach((value, key, map) => {
-			if (value.component instanceof Table) {
-				if (value.component.style) {
-					this.styleComponent(value.component);
-				}
-			}
-		});
-		this._propertiesPane.componentMap.forEach((value) => {
-			this.styleComponent(value.component);
-		});
+	public style(styles: IDesignerStyles): void {
 		this._verticalSplitView.style({
 			separatorBorder: styles.paneSeparator
 		});
@@ -261,16 +214,7 @@ export class Designer extends Disposable {
 			separatorBorder: styles.paneSeparator
 		});

-		this._groupHeaders.forEach((header) => {
-			this.styleGroupHeader(header);
-		});
-
-		this._propertiesPane.groupHeaders.forEach((header) => {
-			this.styleGroupHeader(header);
-		});
-
 		this._propertiesPane.descriptionElement.style.borderColor = styles.paneSeparator.toString();
-		this._onStyleChangeEventEmitter.fire();
 	}

 	public layout(dimension: DOM.Dimension) {
@@ -336,14 +280,13 @@ export class Designer extends Disposable {
 		DOM.clearNode(this._topContentContainer);
 		this._contentTabbedPanel.clearTabs();
 		this._propertiesPane.clear();
-		this._groupHeaders = [];
 		this._taskbars.map(t => t.dispose());
 	}

 	private initializeDesigner(): void {
 		const view = this._input.view;
 		if (view.components) {
-			this.createComponents(this._topContentContainer, view.components, this._componentMap, this._groupHeaders, DesignerRootObjectPath, 'TopContentView');
+			this.createComponents(this._topContentContainer, view.components, this._componentMap, DesignerRootObjectPath, 'TopContentView');
 		}
 		view.tabs.forEach(tab => {
 			this._contentTabbedPanel.pushTab(this.createTabView(tab));
@@ -617,7 +560,7 @@ export class Designer extends Disposable {

 	private createTabView(tab: DesignerTab): IPanelTab {
 		const view = new DesignerTabPanelView(tab, (container, components, identifierGetter) => {
-			return this.createComponents(container, components, this._componentMap, this._groupHeaders, identifierGetter, 'TabsView');
+			return this.createComponents(container, components, this._componentMap, identifierGetter, 'TabsView');
 		});
 		return {
 			identifier: tab.title,
@@ -705,7 +648,6 @@ export class Designer extends Disposable {
 	private createComponents(container: HTMLElement,
 		components: DesignerDataPropertyInfo[],
 		componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>,
-		groupHeaders: HTMLElement[],
 		parentPath: DesignerPropertyPath,
 		area: DesignerUIArea): DesignerUIComponent[] {
 		const uiComponents = [];
@@ -727,8 +669,7 @@ export class Designer extends Disposable {
 		} else {
 			groupNames.forEach(group => {
 				const groupHeader = container.appendChild(DOM.$('div.full-row.group-header'));
-				groupHeaders.push(groupHeader);
-				this.styleGroupHeader(groupHeader);
+				groupHeader.style.backgroundColor = asCssVariable(GroupHeaderBackground);
 				groupHeader.innerText = group;
 				componentsToCreate.forEach(component => {
 					if (component.group === group) {
@@ -841,7 +782,15 @@ export class Designer extends Disposable {
 				const tableProperties = componentDefinition.componentProperties as DesignerTableProperties;
 				const taskbar = this.addTableTaskbar(container, tableProperties);
 				const tableContainer = container.appendChild(DOM.$('.full-row'));
-				const table = new Table(tableContainer, this._accessibilityService, this._quickInputService, {
+				const table = new Table(tableContainer, this._accessibilityService, this._quickInputService, getTableStyles({
+					listActiveSelectionBackground: undefined,
+					listActiveSelectionForeground: undefined,
+					listFocusAndSelectionBackground: undefined,
+					listFocusAndSelectionForeground: undefined,
+					listInactiveFocusBackground: undefined,
+					listInactiveSelectionBackground: undefined,
+					listInactiveSelectionForeground: undefined
+				}), {
 					dataProvider: new TableDataView()
 				}, {
 					editable: true,
@@ -1030,8 +979,6 @@ export class Designer extends Disposable {
 			defintion: componentDefinition,
 			component: component
 		});
-
-		this.styleComponent(component);
 		return component;
 	}

--- a/src/sql/workbench/browser/designer/designerIssuesTabPanelView.ts
+++ b/src/sql/workbench/browser/designer/designerIssuesTabPanelView.ts
@@ -11,13 +11,13 @@ import { Emitter, Event } from 'vs/base/common/event';
 import { IListAccessibilityProvider, List } from 'vs/base/browser/ui/list/listWidget';
 import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
 import { localize } from 'vs/nls';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { attachListStyler } from 'sql/platform/theme/common/vsstyler';
+import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground } from 'vs/platform/theme/common/colorRegistry';
 import { Codicon } from 'vs/base/common/codicons';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { Link } from 'vs/platform/opener/browser/link';
 import { ThemeIcon } from 'vs/base/common/themables';
+import { getListStyles } from 'vs/platform/theme/browser/defaultStyles';

 export class DesignerIssuesTabPanelView extends Disposable implements IPanelView {
 	private _container: HTMLElement;
@@ -27,7 +27,6 @@ export class DesignerIssuesTabPanelView extends Disposable implements IPanelView
 	public readonly onIssueSelected: Event<DesignerPropertyPath> = this._onIssueSelected.event;

 	constructor(
-		@IThemeService private _themeService: IThemeService,
 		@IInstantiationService private _instantiationService: IInstantiationService
 	) {
 		super();
@@ -41,12 +40,15 @@ export class DesignerIssuesTabPanelView extends Disposable implements IPanelView
 			mouseSupport: true,
 			accessibilityProvider: new DesignerIssueListAccessibilityProvider()
 		});
+		this._issueList.style(getListStyles({
+			listInactiveSelectionIconForeground: undefined,
+			listActiveSelectionIconForeground: undefined
+		}));
 		this._register(this._issueList.onDidChangeSelection((e) => {
 			if (e.elements && e.elements.length === 1) {
 				this._onIssueSelected.fire(e.elements[0].propertyPath);
 			}
 		}));
-		this._register(attachListStyler(this._issueList, this._themeService));
 	}

 	layout(dimension: DOM.Dimension): void {
--- a/src/sql/workbench/browser/designer/designerPropertiesPane.ts
+++ b/src/sql/workbench/browser/designer/designerPropertiesPane.ts
@@ -25,7 +25,6 @@ export class DesignerPropertiesPane {
 	private _contentElement: HTMLElement;
 	private _objectPath: DesignerPropertyPath;
 	private _componentMap = new Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>();
-	private _groupHeaders: HTMLElement[] = [];

 	// Description variables
 	private _descriptionContainer: HTMLElement;
@@ -45,10 +44,6 @@ export class DesignerPropertiesPane {

 	}

-	public get groupHeaders(): HTMLElement[] {
-		return this._groupHeaders;
-	}
-
 	public get descriptionElement(): HTMLElement {
 		return this._descriptionContainer;
 	}
@@ -78,7 +73,6 @@ export class DesignerPropertiesPane {
 			value.component.dispose();
 		});
 		this._componentMap.clear();
-		this._groupHeaders = [];
 		DOM.clearNode(this._contentElement);
 		this._objectPath = undefined;
 	}
--- a/src/sql/workbench/browser/modelComponents/table.component.ts
+++ b/src/sql/workbench/browser/modelComponents/table.component.ts
@@ -15,8 +15,6 @@ 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 { 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';
 import { ActionOnCheck, CheckboxSelectColumn, ICheckboxCellActionEventArgs } from 'sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin';
@@ -41,7 +39,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 { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles, defaultTableStyles } 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
@@ -88,7 +86,6 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 	@ViewChild('table', { read: ElementRef }) private _inputContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(ILogService) logService: ILogService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
@@ -283,12 +280,11 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 				enableInGridTabNavigation: this.moveFocusOutWithTab
 			};

-			this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, this.quickInputService, { dataProvider: this._tableData, columns: this._tableColumns }, options);
+			this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, this.quickInputService, defaultTableStyles, { dataProvider: this._tableData, columns: this._tableColumns }, options);
 			this._table.setData(this._tableData);
 			this._table.setSelectionModel(new RowSelectionModel({ selectActiveRow: true }));

 			this._register(this._table);
-			this._register(attachTableStyler(this._table, this.themeService));
 			this._register(this._table.onSelectedRowsChanged((e, data) => {
 				if (this.isCheckboxColumnsUsedForSelection()) {
 					return;
--- a/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts
+++ b/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts
@@ -41,7 +41,6 @@ import { AssessmentType, TARGET_ICON_CLASS } from 'sql/workbench/contrib/assessm
 import { ILogService } from 'vs/platform/log/common/log';
 import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService';
 import * as themeColors from 'vs/workbench/common/theme';
-import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
 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';
@@ -50,8 +49,7 @@ 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 { defaultListStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export const ASMTRESULTSVIEW_SELECTOR: string = 'asmt-results-view-component';
 export const ROW_HEIGHT: number = 25;
@@ -358,7 +356,7 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom
 			this.initActionBar(databaseInvokeAsmt, databaseSelectAsmt);
 		}

-		this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, options));
+		this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, defaultTableStyles, { columns }, options));
 		this._table.grid.setData(this.dataView, true);
 		this._table.registerPlugin(<any>this.rowDetail);
 		this._table.registerPlugin(filterPlugin);
@@ -596,12 +594,6 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom

 	private _updateStyles(theme: IColorTheme): void {
 		this.actionBarContainer.nativeElement.style.borderTopColor = theme.getColor(DASHBOARD_BORDER, true).toString();
-		// {{SQL CARBON TODO}} - do defaultListStyles work here?
-		let tableStyle: ITableStyles = {
-			tableHeaderBackground: theme.getColor(themeColors.PANEL_BACKGROUND),
-			...defaultListStyles
-		};
-		this._table.style(tableStyle);
 		const rowExclSelector = '.asmtview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row';
 		dom.removeCSSRulesContainingSelector(`${rowExclSelector} .${KIND_CLASS[AssessmentResultItemKind.Error]}`);
 		dom.createCSSRule(`${rowExclSelector} .${KIND_CLASS[AssessmentResultItemKind.Error]}`, `color: ${theme.getColor(themeColors.NOTIFICATIONS_ERROR_ICON_FOREGROUND).toString()}`);
--- a/src/sql/workbench/contrib/charts/browser/tableInsight.ts
+++ b/src/sql/workbench/contrib/charts/browser/tableInsight.ts
@@ -6,17 +6,16 @@
 import { IInsight } from './interfaces';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import { Table } from 'sql/base/browser/ui/table/table';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { CellSelectionModel } from 'sql/base/browser/ui/table/plugins/cellSelectionModel.plugin';

 import { $, Dimension } from 'vs/base/browser/dom';
 import { Disposable } from 'vs/base/common/lifecycle';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IInsightOptions, InsightType } from 'sql/workbench/contrib/charts/common/interfaces';
 import { IInsightData } from 'sql/platform/dashboard/browser/insightRegistry';
 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 { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export class TableInsight extends Disposable implements IInsight {
 	public static readonly types = [InsightType.Table];
@@ -28,7 +27,6 @@ export class TableInsight extends Disposable implements IInsight {
 	public options: IInsightOptions = { type: InsightType.Table };

 	constructor(container: HTMLElement, options: any,
-		@IThemeService themeService: IThemeService,
 		@IAccessibilityService accessibilityService: IAccessibilityService,
 		@IQuickInputService quickInputService: IQuickInputService,
 		@IComponentContextService private componentContextService: IComponentContextService
@@ -39,9 +37,8 @@ export class TableInsight extends Disposable implements IInsight {
 		tableContainer.style.height = '100%';
 		container.appendChild(tableContainer);
 		this.dataView = new TableDataView();
-		this.table = new Table(tableContainer, accessibilityService, quickInputService, { dataProvider: this.dataView }, { showRowNumber: true });
+		this.table = new Table(tableContainer, accessibilityService, quickInputService, defaultTableStyles, { dataProvider: this.dataView }, { showRowNumber: true });
 		this.table.setSelectionModel(new CellSelectionModel());
-		this._register(attachTableStyler(this.table, themeService));
 		this._register(this.componentContextService.registerTable(this.table));
 	}

--- a/src/sql/workbench/contrib/dashboard/browser/widgets/explorer/explorerTable.ts
+++ b/src/sql/workbench/contrib/dashboard/browser/widgets/explorer/explorerTable.ts
@@ -12,7 +12,6 @@ import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
 import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardService';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { BaseActionContext, ManageActionContext } from 'sql/workbench/browser/actions';
 import { getFlavor, ObjectListViewProperty } from 'sql/workbench/contrib/dashboard/browser/dashboardRegistry';
 import { ItemContextKey } from 'sql/workbench/contrib/dashboard/browser/widgets/explorer/explorerContext';
@@ -36,6 +35,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { IEditorProgressService } from 'vs/platform/progress/common/progress';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 const ShowActionsText: string = nls.localize('dashboard.explorer.actions', "Show Actions");
 const LabelColoumnActions: string = nls.localize('dashboard.explorer.actionsColumn', "Actions");
@@ -78,7 +78,7 @@ export class ExplorerTable extends Disposable {
 		this._view = new TableDataView<Slick.SlickData>(undefined, undefined, undefined, (data: Slick.SlickData[]): Slick.SlickData[] => {
 			return explorerFilter.filter(this._filterStr, data);
 		});
-		this._table = new Table<Slick.SlickData>(parentElement, accessibilityService, quickInputService, { dataProvider: this._view }, { forceFitColumns: true });
+		this._table = new Table<Slick.SlickData>(parentElement, accessibilityService, quickInputService, defaultTableStyles, { dataProvider: this._view }, { forceFitColumns: true });
 		this._table.setSelectionModel(new RowSelectionModel());
 		this._actionsColumn = new ButtonColumn<Slick.SlickData>({
 			id: 'actions',
@@ -102,7 +102,6 @@ export class ExplorerTable extends Disposable {
 				this.handleDoubleClick(this._view.getItem(e.cell.row));
 			}
 		}));
-		this._register(attachTableStyler(this._table, themeService));
 		this._register(this._view);
 		this._register(this._view.onRowCountChange(() => {
 			this._table.updateRowCount();
--- a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/tableInsight.component.ts
+++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/tableInsight.component.ts
@@ -7,16 +7,14 @@ import { Component, Input, Inject, forwardRef, ElementRef, OnInit } from '@angul

 import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/dom';
 import { Disposable } from 'vs/base/common/lifecycle';
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
-
 import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { CellSelectionModel } from 'sql/base/browser/ui/table/plugins/cellSelectionModel.plugin';
 import { IInsightsView, IInsightData } from 'sql/platform/dashboard/browser/insightRegistry';
 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 { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

@Component({
 	template: ''
@@ -28,7 +26,6 @@ export default class TableInsight extends Disposable implements IInsightsView, O

 	constructor(
 		@Inject(forwardRef(() => ElementRef)) private _elementRef: ElementRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(IAccessibilityService) private accessibilityService: IAccessibilityService,
 		@Inject(IQuickInputService) private quickInputService: IQuickInputService,
 		@Inject(IComponentContextService) private componentContextService: IComponentContextService
@@ -67,9 +64,8 @@ export default class TableInsight extends Disposable implements IInsightsView, O

 	private createTable() {
 		if (!this.table) {
-			this.table = new Table(this._elementRef.nativeElement, this.accessibilityService, this.quickInputService, { dataProvider: this.dataView, columns: this.columns }, { showRowNumber: true });
+			this.table = new Table(this._elementRef.nativeElement, this.accessibilityService, this.quickInputService, defaultTableStyles, { dataProvider: this.dataView, columns: this.columns }, { showRowNumber: true });
 			this.table.setSelectionModel(new CellSelectionModel());
-			this._register(attachTableStyler(this.table, this.themeService));
 			this._register(this.componentContextService.registerTable(this.table));
 		}
 	}
--- a/src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts
+++ b/src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts
@@ -37,6 +37,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { localize } from 'vs/nls';
+import { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 const cellWithNullCharMessage = localize('editData.cellWithNullCharMessage', "This cell contains the Unicode null character which is currently not supported for editing.");

@@ -938,7 +939,7 @@ export class EditDataGridPanel extends GridParentComponent {
 			};

 			if (dataSet.columnDefinitions) {
-				this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService, this.quickInputService, { dataProvider: this.gridDataProvider, columns: dataSet.columnDefinitions }, options);
+				this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService, this.quickInputService, defaultTableStyles, { dataProvider: this.gridDataProvider, columns: dataSet.columnDefinitions }, options);
 				for (let plugin of this.plugins) {
 					this.table.registerPlugin(plugin);
 				}
@@ -948,7 +949,7 @@ export class EditDataGridPanel extends GridParentComponent {
 			}
 		}
 		else {
-			this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService, this.quickInputService);
+			this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService, this.quickInputService, defaultTableStyles);
 		}
 	}

--- a/src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonPropertiesView.ts
+++ b/src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonPropertiesView.ts
@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/

 import { ExecutionPlanPropertiesViewBase, PropertiesSortType } from 'sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import * as azdata from 'azdata';
 import { localize } from 'vs/nls';
 import { iconCssFormatter, textFormatter } from 'sql/base/browser/ui/table/formatters';
@@ -63,7 +62,6 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti

 	public constructor(
 		parentContainer: HTMLElement,
-		@IThemeService themeService: IThemeService,
 		@IInstantiationService instantiationService: IInstantiationService,
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IContextViewService contextViewService: IContextViewService,
@@ -71,7 +69,7 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
 		@IQuickInputService quickInputService: IQuickInputService,
 		@IComponentContextService componentContextService: IComponentContextService
 	) {
-		super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService, quickInputService, componentContextService);
+		super(parentContainer, instantiationService, contextMenuService, contextViewService, accessibilityService, quickInputService, componentContextService);
 		this._model = <ExecutionPlanComparisonPropertiesViewModel>{};
 		this._parentContainer.style.display = 'none';
 		const header = DOM.$('.compare-operation-name');
--- a/src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesView.ts
+++ b/src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesView.ts
@@ -6,7 +6,6 @@
 import * as DOM from 'vs/base/browser/dom';
 import type * as azdata from 'azdata';
 import { localize } from 'vs/nls';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { removeLineBreaks } from 'sql/base/common/strings';
 import { isString } from 'vs/base/common/types';
 import { textFormatter } from 'sql/base/browser/ui/table/formatters';
@@ -24,7 +23,6 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase

 	public constructor(
 		parentContainer: HTMLElement,
-		@IThemeService themeService: IThemeService,
 		@IInstantiationService instantiationService: IInstantiationService,
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IContextViewService contextViewService: IContextViewService,
@@ -32,7 +30,7 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
 		@IQuickInputService quickInputService: IQuickInputService,
 		@IComponentContextService componentContextService: IComponentContextService
 	) {
-		super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService, quickInputService, componentContextService);
+		super(parentContainer, instantiationService, contextMenuService, contextViewService, accessibilityService, quickInputService, componentContextService);
 		this._model = <ExecutionPlanPropertiesView>{};
 		this._operationName = DOM.$('h3');
 		this._operationName.classList.add('operation-name');
--- a/src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts
+++ b/src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts
@@ -5,13 +5,12 @@

 import * as DOM from 'vs/base/browser/dom';
 import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { localize } from 'vs/nls';
 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 { 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';
@@ -30,6 +29,7 @@ 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 { ThemeIcon } from 'vs/base/common/themables';
+import { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export abstract class ExecutionPlanPropertiesViewBase extends Disposable implements IVerticalSashLayoutProvider {
 	// Title bar with close button action
@@ -69,7 +69,6 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme

 	constructor(
 		public _parentContainer: HTMLElement,
-		private _themeService: IThemeService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
 		@IContextViewService private _contextViewService: IContextViewService,
@@ -163,7 +162,7 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme

 		this._selectionModel = new CellSelectionModel<Slick.SlickData>();

-		this._tableComponent = this._register(new TreeGrid(table, accessibilityService, quickInputService, {
+		this._tableComponent = this._register(new TreeGrid(table, accessibilityService, quickInputService, defaultTableStyles, {
 			columns: []
 		}, {
 			rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,
@@ -173,7 +172,6 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
 			autoEdit: false
 		}));

-		this._register(attachTableStyler(this._tableComponent, this._themeService));
 		this._tableComponent.setSelectionModel(this._selectionModel);

 		const contextMenuAction = [
--- a/src/sql/workbench/contrib/executionPlan/browser/executionPlanTreeTab.ts
+++ b/src/sql/workbench/contrib/executionPlan/browser/executionPlanTreeTab.ts
@@ -9,8 +9,6 @@ import { localize } from 'vs/nls';
 import * as DOM from 'vs/base/browser/dom';
 import { ExecutionPlanState } from 'sql/workbench/common/editor/query/executionPlanState';
 import { TreeGrid } from 'sql/base/browser/ui/table/treeGrid';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import * as sqlExtHostType from 'sql/workbench/api/common/sqlExtHostTypes';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
@@ -27,6 +25,7 @@ import { deepClone } from 'vs/base/common/objects';
 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 { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export class ExecutionPlanTreeTab extends Disposable implements IPanelTab {
 	public readonly title: string = localize('planTreeTab.title', 'Plan Tree');
@@ -52,7 +51,6 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {
 	private _planTreeContainers: HTMLElement[] = [];

 	constructor(
-		@IThemeService private _themeService: IThemeService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
 		@IAccessibilityService private _accessibilityService: IAccessibilityService,
@@ -198,7 +196,7 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {

 		const selectionModel = new CellSelectionModel<Slick.SlickData>();

-		const treeGrid = this._register(new TreeGrid<Slick.SlickData>(tableContainer, this._accessibilityService, this._quickInputService, {
+		const treeGrid = this._register(new TreeGrid<Slick.SlickData>(tableContainer, this._accessibilityService, this._quickInputService, defaultTableStyles, {
 			columns: columns,
 			sorter: (args) => {
 				const sortColumn = args.sortCol.field;
@@ -346,8 +344,6 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {

 		}));

-		this._register(attachTableStyler(treeGrid, this._themeService));
-
 		new ResizeObserver((e) => {
 			treeGrid.layout(new DOM.Dimension(tableContainer.clientWidth, tableContainer.clientHeight));
 		}).observe(tableContainer);
--- a/src/sql/workbench/contrib/executionPlan/browser/topOperationsTab.ts
+++ b/src/sql/workbench/contrib/executionPlan/browser/topOperationsTab.ts
@@ -14,8 +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 { attachTableStyler } from 'sql/platform/theme/common/styler';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { IColorTheme, ICssStyleCollector, 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';
 import { RowNumberColumn } from 'sql/base/browser/ui/table/plugins/rowNumberColumn.plugin';
@@ -34,6 +33,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 { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 const TABLE_SORT_COLUMN_KEY = 'tableCostColumnForSorting';

@@ -62,7 +62,6 @@ export class TopOperationsTabView extends Disposable implements IPanelView {

 	constructor(
 		private _queryResultsView: QueryResultsView,
-		@IThemeService private _themeService: IThemeService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
 		@IContextViewService private _contextViewService: IContextViewService,
@@ -243,7 +242,7 @@ export class TopOperationsTabView extends Disposable implements IPanelView {

 		const selectionModel = new CellSelectionModel<Slick.SlickData>({ hasRowSelector: true });

-		const table = this._register(new Table<Slick.SlickData>(tableContainer, this._accessibilityService, this._quickInputService, {
+		const table = this._register(new Table<Slick.SlickData>(tableContainer, this._accessibilityService, this._quickInputService, defaultTableStyles, {
 			columns: columns,
 			sorter: (args) => {
 				const column = args.sortCol.field;
@@ -405,8 +404,6 @@ export class TopOperationsTabView extends Disposable implements IPanelView {
 			});
 		}));

-		this._register(attachTableStyler(table, this._themeService));
-
 		new ResizeObserver((e) => {
 			table.layout(new DOM.Dimension(tableContainer.clientWidth, tableContainer.clientHeight));
 		}).observe(tableContainer);
--- a/src/sql/workbench/contrib/jobManagement/browser/alertsView.component.ts
+++ b/src/sql/workbench/contrib/jobManagement/browser/alertsView.component.ts
@@ -27,6 +27,7 @@ import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
 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 { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export const VIEW_SELECTOR: string = 'jobalertsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -149,7 +150,7 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();

-		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, this.options);
+		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, defaultTableStyles, { columns }, this.options);
 		this._register(this._componentContextService.registerTable(this._table));
 		this._table.grid.setData(this.dataView, true);
 		this._register(this._table.onContextMenu(e => {
--- a/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts
+++ b/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts
@@ -36,7 +36,7 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 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 { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -193,7 +193,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
-		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, options);
+		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, defaultTableStyles, { columns }, options);
 		this._table.grid.setData(this.dataView, true);
 		this._table.grid.onClick.subscribe((e, args) => {
 			let job = self.getJob(args);
--- a/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts
+++ b/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts
@@ -37,7 +37,7 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 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 { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';


 export const NOTEBOOKSVIEW_SELECTOR: string = 'notebooksview-component';
@@ -192,7 +192,7 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
-		this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, options));
+		this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, defaultTableStyles, { columns }, options));
 		this._table.grid.setData(this.dataView, true);
 		this._table.grid.onClick.subscribe((e, args) => {
 			let notebook = self.getNotebook(args);
--- a/src/sql/workbench/contrib/jobManagement/browser/operatorsView.component.ts
+++ b/src/sql/workbench/contrib/jobManagement/browser/operatorsView.component.ts
@@ -27,6 +27,7 @@ import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
 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 { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export const VIEW_SELECTOR: string = 'joboperatorsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -149,7 +150,7 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit,
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
-		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, this.options);
+		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, defaultTableStyles, { columns }, this.options);
 		this._table.grid.setData(this.dataView, true);
 		this._register(this._componentContextService.registerTable(this._table));

--- a/src/sql/workbench/contrib/jobManagement/browser/proxiesView.component.ts
+++ b/src/sql/workbench/contrib/jobManagement/browser/proxiesView.component.ts
@@ -27,6 +27,7 @@ import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
 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 { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export const VIEW_SELECTOR: string = 'jobproxiesview-component';
 export const ROW_HEIGHT: number = 45;
@@ -149,7 +150,7 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
-		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, this.options);
+		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, defaultTableStyles, { columns }, this.options);
 		this._register(this._componentContextService.registerTable(this._table));
 		this._table.grid.setData(this.dataView, true);

--- a/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts
@@ -16,8 +16,6 @@ import { getEolString, shouldSkipNewLineAfterTrailingLineBreak, shouldIncludeHea
 import { ResultSetSummary, ResultSetSubset, ICellValue } from 'sql/workbench/services/query/common/query';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { localize } from 'vs/nls';
 import { IAction } from 'vs/base/common/actions';
 import { AngularDisposable } from 'sql/base/browser/lifecycle';
@@ -79,7 +77,6 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
 		@Inject(IInstantiationService) private instantiationService: IInstantiationService,
-		@Inject(IThemeService) private readonly themeService: IThemeService,
 		@Inject(IConfigurationService) private configurationService: IConfigurationService
 	) {
 		super();
@@ -163,7 +160,6 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
 			this._table = this.instantiationService.createInstance(DataResourceTable, source, this.cellModel, this.cellOutput, state);
 			let outputElement = <HTMLElement>this.output.nativeElement;
 			outputElement.appendChild(this._table.element);
-			this._register(attachTableStyler(this._table, this.themeService));
 			await this._table.onDidInsert();
 			this.layout();
 			this._initialized = true;
--- a/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts
+++ b/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts
@@ -9,7 +9,6 @@ import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import { IProfilerService, IProfilerViewTemplate } from 'sql/workbench/services/profiler/browser/interfaces';
 import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { IProfilerStateChangedEvent } from 'sql/workbench/common/editor/profiler/profilerState';
 import { ProfilerTableEditor, ProfilerTableViewState } from 'sql/workbench/contrib/profiler/browser/profilerTableEditor';
 import * as Actions from 'sql/workbench/contrib/profiler/browser/profilerActions';
@@ -56,7 +55,7 @@ import { CommonFindController, FindStartFocusAction } from 'vs/editor/contrib/fi
 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 { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultSelectBoxStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 class BasicView implements IView {
 	public get element(): HTMLElement {
@@ -390,7 +389,7 @@ export class ProfilerEditor extends EditorPane {
 		detailTableContainer.style.width = '100%';
 		detailTableContainer.style.height = '100%';
 		this._detailTableData = new TableDataView<IDetailData>();
-		this._detailTable = new Table(detailTableContainer, this._accessibilityService, this._quickInputService, {
+		this._detailTable = new Table(detailTableContainer, this._accessibilityService, this._quickInputService, defaultTableStyles, {
 			dataProvider: this._detailTableData, columns: [
 				{
 					id: 'label',
@@ -442,11 +441,7 @@ export class ProfilerEditor extends EditorPane {
 		});

 		this._collapsedPanelAction = this._instantiationService.createInstance(Actions.ProfilerCollapsablePanelAction, Actions.ProfilerCollapsablePanelAction.ID, Actions.ProfilerCollapsablePanelAction.LABEL);
-
 		this._tabbedPanel.pushAction(this._collapsedPanelAction, { icon: true, label: false });
-
-		this._register(attachTableStyler(this._detailTable, this.themeService));
-
 		return tabbedPanelContainer;
 	}

--- a/src/sql/workbench/contrib/profiler/browser/profilerTableEditor.ts
+++ b/src/sql/workbench/contrib/profiler/browser/profilerTableEditor.ts
@@ -6,7 +6,6 @@
 import { IProfilerController } from 'sql/workbench/contrib/profiler/common/interfaces';
 import { ProfilerInput } from 'sql/workbench/browser/editor/profiler/profilerInput';
 import { Table } from 'sql/base/browser/ui/table/table';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
 import { IProfilerStateChangedEvent } from 'sql/workbench/common/editor/profiler/profilerState';
 import { FindWidget, ITableController, IConfigurationChangedEvent, ACTION_IDS, PROFILER_MAX_MATCHES } from 'sql/workbench/contrib/profiler/browser/profilerFindWidget';
@@ -36,6 +35,7 @@ import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contri
 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 { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export interface ProfilerTableViewState {
 	scrollTop: number;
@@ -90,7 +90,7 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
 		this._overlay.style.zIndex = '4';
 		parent.appendChild(this._overlay);

-		this._profilerTable = new Table(parent, this._accessibilityService, this._quickInputService, {
+		this._profilerTable = new Table(parent, this._accessibilityService, this._quickInputService, defaultTableStyles, {
 			sorter: (args) => {
 				let input = this.input as ProfilerInput;
 				if (input && input.data) {
@@ -116,7 +116,6 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
 			});
 		});
 		this._profilerTable.registerPlugin(copyKeybind);
-		attachTableStyler(this._profilerTable, this._themeService);
 		this._register(this._componentContextService.registerTable(this._profilerTable));

 		this._findState = new FindReplaceState();
--- a/src/sql/workbench/contrib/query/browser/gridPanel.ts
+++ b/src/sql/workbench/contrib/query/browser/gridPanel.ts
@@ -6,7 +6,6 @@
 import 'vs/css!./media/gridPanel';

 import { ITableStyles, ITableMouseEvent, FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
-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';
@@ -24,7 +23,7 @@ import { IContextMenuService, IContextViewService } from 'vs/platform/contextvie
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { Emitter, Event } from 'vs/base/common/event';
-import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { isUndefinedOrNull } from 'vs/base/common/types';
 import { Disposable, dispose, DisposableStore } from 'vs/base/common/lifecycle';
 import { range } from 'vs/base/common/arrays';
@@ -60,7 +59,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 { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 const ROW_HEIGHT = 29;
 const HEADER_HEIGHT = 26;
@@ -103,8 +102,7 @@ export class GridPanel extends Disposable {
 	constructor(
 		@IConfigurationService private readonly configurationService: IConfigurationService,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
-		@ILogService private readonly logService: ILogService,
-		@IThemeService private readonly themeService: IThemeService,
+		@ILogService private readonly logService: ILogService
 	) {
 		super();
 		this.scrollableView = new ScrollableView(this.container);
@@ -258,7 +256,6 @@ export class GridPanel extends Disposable {
 					this.minimizeTables();
 				}
 			}));
-			this.tableDisposable.add(attachTableStyler(table, this.themeService));

 			tables.push(table);
 		}
@@ -589,7 +586,7 @@ export abstract class GridTableBase<T> extends Disposable implements IView, IQue
 				inMemoryDataProcessing: this.options.inMemoryDataProcessing,
 				inMemoryDataCountThreshold: this.options.inMemoryDataCountThreshold
 			});
-		this.table = this._register(new Table(this.tableContainer, this.accessibilityService, this.quickInputService, { dataProvider: this.dataProvider, columns: this.columns }, tableOptions));
+		this.table = this._register(new Table(this.tableContainer, this.accessibilityService, this.quickInputService, defaultTableStyles, { dataProvider: this.dataProvider, columns: this.columns }, tableOptions));
 		this.table.setTableTitle(localize('resultsGrid', "Results grid"));
 		this.table.setSelectionModel(this.selectionModel);
 		this.table.registerPlugin(new MouseWheelSupport());
--- a/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts
+++ b/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts
@@ -6,10 +6,7 @@
 import 'vs/css!./media/resourceViewerTable';
 import * as azdata from 'azdata';
 import { Table } from 'sql/base/browser/ui/table/table';
-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';
 import { HyperlinkCellValue, isHyperlinkCellValue, TextCellValue } from 'sql/base/browser/ui/table/formatters';
 import { HeaderFilter, CommandEventArgs } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
 import { Disposable } from 'vs/base/common/lifecycle';
@@ -28,7 +25,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 { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 export class ResourceViewerTable extends Disposable {

@@ -39,7 +36,6 @@ export class ResourceViewerTable extends Disposable {
 	public onContextMenu = this._onContextMenu.event;

 	constructor(parent: HTMLElement,
-		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
 		@IOpenerService private _openerService: IOpenerService,
 		@ICommandService private _commandService: ICommandService,
 		@INotificationService private _notificationService: INotificationService,
@@ -53,7 +49,7 @@ export class ResourceViewerTable extends Disposable {
 		};

 		this._dataView = new TableDataView<azdata.DataGridItem>(undefined, undefined, undefined, filterFn);
-		this._resourceViewerTable = this._register(new Table(parent, this._accessibilityService, this._quickInputService, {
+		this._resourceViewerTable = this._register(new Table(parent, this._accessibilityService, this._quickInputService, defaultTableStyles, {
 			sorter: (args) => {
 				this._dataView.sort(args);
 			}
@@ -63,7 +59,6 @@ export class ResourceViewerTable extends Disposable {

 		this._resourceViewerTable.setSelectionModel(new RowSelectionModel());
 		let filterPlugin = new HeaderFilter<azdata.DataGridItem>(defaultTableFilterStyles, this._contextViewService);
-		this._register(attachTableStyler(this._resourceViewerTable, this._themeService));
 		this._register(this._resourceViewerTable.onClick(this.onTableClick, this));
 		this._register(this._resourceViewerTable.onContextMenu((e: ITableMouseEvent) => {
 			this._onContextMenu.fire({
--- a/src/sql/workbench/services/insights/browser/insightsDialogView.ts
+++ b/src/sql/workbench/services/insights/browser/insightsDialogView.ts
@@ -7,7 +7,6 @@ import 'vs/css!./media/insightsDialog';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import { Modal } from 'sql/workbench/browser/modal/modal';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { IInsightsDialogModel, ListResource, IInsightDialogActionContext, insertValueRegex } from 'sql/workbench/services/insights/browser/insightsDialogService';
@@ -53,6 +52,7 @@ import { ITextResourcePropertiesService } from 'vs/editor/common/services/textRe
 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 { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 const labelDisplay = nls.localize("insights.item", "Item");
 const valueDisplay = nls.localize("insights.value", "Value");
@@ -97,7 +97,7 @@ class InsightTableView extends ViewPane {
 	}

 	protected override renderBody(container: HTMLElement): void {
-		this._table = new Table(container, this._accessibilityService, this._quickInputService, {
+		this._table = new Table(container, this._accessibilityService, this._quickInputService, defaultTableStyles, {
 			columns: this.columns,
 			dataProvider: this.data
 		}, this.tableOptions);
@@ -305,9 +305,6 @@ export class InsightsDialogView extends Modal {
 		this._splitView.addView(topTableView, Sizing.Distribute);
 		this._splitView.addView(bottomTableView, Sizing.Distribute);

-		this._register(attachTableStyler(this._topTable, this._themeService));
-		this._register(attachTableStyler(this._bottomTable, this._themeService));
-
 		this._topTable.grid.onKeyDown.subscribe(e => {
 			let event = new StandardKeyboardEvent(<unknown>e as KeyboardEvent);
 			if (event.equals(KeyMod.Shift | KeyCode.Tab)) {
--- a/src/sql/workbench/services/notebook/browser/outputs/tableRenderers.ts
+++ b/src/sql/workbench/services/notebook/browser/outputs/tableRenderers.ts
@@ -9,7 +9,6 @@ import { textFormatter } from 'sql/base/browser/ui/table/formatters';
 import { RowNumberColumn } from 'sql/base/browser/ui/table/plugins/rowNumberColumn.plugin';
 import { escape } from 'sql/base/common/strings';
 import { IDataResource, IDataResourceRow, rowHasColumnNameKeys } from 'sql/workbench/services/notebook/browser/sql/sqlSessionManager';
-import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { MouseWheelSupport } from 'sql/base/browser/ui/table/plugins/mousewheelTableScroll.plugin';
 import { AutoColumnSize } from 'sql/base/browser/ui/table/plugins/autoSizeColumns.plugin';
@@ -17,6 +16,7 @@ import { AdditionalKeyBindings } from 'sql/base/browser/ui/table/plugins/additio
 import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
+import { defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 /**
 * Render DataResource as a grid into a host node.
@@ -56,7 +56,7 @@ export function renderDataResource(
 	let transformedData = transformData(sourceObject.data, columnsTransformed);
 	tableResultsData.push(transformedData);

-	let detailTable = new Table(tableContainer, options.accessibilityService, options.quickInputService, {
+	let detailTable = new Table(tableContainer, options.accessibilityService, options.quickInputService, defaultTableStyles, {
 		dataProvider: tableResultsData, columns: columnsTransformed
 	}, {
 		rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,
@@ -77,8 +77,6 @@ export function renderDataResource(
 		// Set the height dynamically if the grid's height is < 500px high; otherwise, set height to 500px
 		tableContainer.style.height = rowsHeight >= 500 ? '500px' : rowsHeight.toString() + 'px';
 	}
-
-	attachTableStyler(detailTable, options.themeService);
 	host.appendChild(tableContainer);
 	detailTable.resizeCanvas();

--- a/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts
+++ b/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts
@@ -26,14 +26,13 @@ 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 { 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 } from 'vs/platform/theme/browser/defaultStyles';
-import { defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultEditableDropdownStyles, defaultSelectBoxStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 // strings for filter dialog
 const OkButtonText = localize('objectExplorer.okButtonText', "OK");
@@ -356,7 +355,7 @@ export class FilterDialog extends Modal {
 			};
 		}

-		this.filterTable = new Table(filter, this._accessibilityService, this._quickInputService, {
+		this.filterTable = new Table(filter, this._accessibilityService, this._quickInputService, defaultTableStyles, {
 			dataProvider: dataProvider!,
 			columns: columns,
 		}, {
@@ -389,7 +388,6 @@ export class FilterDialog extends Modal {

 		this.filterTable.registerPlugin(clearValueColumn);
 		this.filterTable.layout(new DOM.Dimension(600, (tableData.length + 2) * TableRowHeight));
-		this._register(attachTableStyler(this.filterTable, this._themeService));

 		this._description = DOM.append(body, DOM.$('.filter-dialog-description'));
 		this._description.innerHTML = this._properties[0].description;
--- a/src/sql/workbench/services/restore/browser/restoreDialog.ts
+++ b/src/sql/workbench/services/restore/browser/restoreDialog.ts
@@ -30,7 +30,6 @@ 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 } 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 +50,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, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles, defaultTableStyles } from 'sql/platform/theme/browser/defaultStyles';

 interface FileListElement {
 	logicalFileName: string;
@@ -319,7 +318,7 @@ export class RestoreDialog extends Modal {
 		this._restorePlanTableContainer = DOM.append(restorePlanElement, DOM.$('.dialog-input-section.restore-list'));
 		DOM.hide(this._restorePlanTableContainer);
 		this._restorePlanData = new TableDataView<Slick.SlickData>();
-		this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService, this._quickInputService,
+		this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService, this._quickInputService, defaultTableStyles,
 			{ dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false }));
 		this._restorePlanTable.setTableTitle(localize('restorePlan', "Restore plan"));
 		this._restorePlanTable.setSelectionModel(new RowSelectionModel({ selectActiveRow: false }));
@@ -371,7 +370,7 @@ export class RestoreDialog extends Modal {
 			field: 'restoreAs'
 		}];
 		this._fileListData = new TableDataView<FileListElement>();
-		this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService, this._quickInputService,
+		this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService, this._quickInputService, defaultTableStyles,
 			{ dataProvider: this._fileListData, columns }, { enableColumnReorder: false }));
 		this._fileListTable.setSelectionModel(new RowSelectionModel());
 		this._register(this._componentContextService.registerTable(this._fileListTable));
@@ -666,8 +665,6 @@ export class RestoreDialog extends Modal {
 		this._register(this._scriptButton!);
 		this._register(this._restoreButton!);
 		this._register(this._closeButton!);
-		this._register(attachTableStyler(this._fileListTable!, this._themeService));
-		this._register(attachTableStyler(this._restorePlanTable!, this._themeService));

 		this._register(this._targetDatabaseInputBox.onDidChange(dbName => {
 			if (!this.viewModel.databases?.includes(dbName)) {
--- a/src/sql/workbench/test/electron-browser/modalComponents/table.component.test.ts
+++ b/src/sql/workbench/test/electron-browser/modalComponents/table.component.test.ts
@@ -19,7 +19,7 @@ suite('TableComponent Tests', () => {
 			['4', '5', '6']
 		];
 		let columns = ['c1', 'c2', 'c3'];
-		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined, undefined);
+		const tableComponent = new TableComponent(undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined, undefined);

 		let actual = tableComponent.transformData(data, columns);
 		let expected: { [key: string]: string }[] = [
@@ -39,7 +39,7 @@ suite('TableComponent Tests', () => {

 	test('Table transformData should return empty array given undefined rows', () => {
 		let data = undefined;
-		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined, undefined);
+		const tableComponent = new TableComponent(undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined, undefined);
 		let columns = ['c1', 'c2', 'c3'];
 		let actual = tableComponent.transformData(data, columns);
 		let expected: { [key: string]: string }[] = [];
@@ -52,7 +52,7 @@ suite('TableComponent Tests', () => {
 			['4', '5', '6']
 		];
 		let columns;
-		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined, undefined);
+		const tableComponent = new TableComponent(undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined, undefined);
 		let actual = tableComponent.transformData(data, columns);
 		let expected: { [key: string]: string }[] = [];
 		assert.deepStrictEqual(actual, expected);
@@ -63,7 +63,7 @@ suite('TableComponent Tests', () => {
 			['1', '2'],
 			['4', '5']
 		];
-		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined, undefined);
+		const tableComponent = new TableComponent(undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined, undefined);
 		let columns = ['c1', 'c2', 'c3'];
 		let actual = tableComponent.transformData(data, columns);
 		let expected: { [key: string]: string }[] = [
--- a/src/vs/base/browser/ui/list/listWidget.ts
+++ b/src/vs/base/browser/ui/list/listWidget.ts
@@ -1006,7 +1006,6 @@ export interface IListStyles {
 	listInactiveFocusOutline: string | undefined;
 	listSelectionOutline: string | undefined;
 	listHoverOutline: string | undefined;
-	listMatchesShadow?: Color; // {{SQL CARBON EDIT}}
 	treeIndentGuidesStroke: string | undefined;
 	treeInactiveIndentGuidesStroke: string | undefined;
 	tableColumnsBorder: string | undefined;