theming - cleanup

extensions/theme-abyss/themes/abyss-color-theme.json

@@ -253,6 +253,7 @@
 
 		// Base Colors
 		"inputBackground": "#181f2f",
+		"selectBackground": "#181f2f",
 
 		// Editor Colors
 		"editorBackground": "#000c18",

src/vs/base/browser/ui/selectBox/selectBox.css

@@ -7,20 +7,3 @@
 	width: 100%;
 	height: 20px;
 }
-
-.vs .monaco-workbench .select-box {
-	background-color: white;
-	border-color: #CECECE;
-}
-
-.vs-dark .monaco-workbench .select-box {
-	background-color: #3C3C3C;
-	border-color: #3C3C3C;
-	color: rgb(204, 204, 204);
-}
-
-.hc-black .monaco-workbench .select-box {
-	background-color: #3C3C3C;
-	border-color: #3C3C3C;
-	color: white;
-}

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

@@ -15,6 +15,7 @@ import { Color } from "vs/base/common/color";
 export interface ISelectBoxStyles {
 	selectBackground?: Color;
 	selectForeground?: Color;
+	selectBorder?: Color;
 }
 
 export class SelectBox extends Widget {
@@ -27,6 +28,7 @@ export class SelectBox extends Widget {
 	private toDispose: IDisposable[];
 	private selectBackground: Color;
 	private selectForeground: Color;
+	private selectBorder: Color;
 
 	constructor(options: string[], selected: number, styles?: ISelectBoxStyles) {
 		super();
@@ -41,6 +43,7 @@ export class SelectBox extends Widget {
 		if (styles) {
 			this.selectBackground = styles.selectBackground;
 			this.selectForeground = styles.selectForeground;
+			this.selectBorder = styles.selectBorder;
 		}
 
 		this.toDispose.push(dom.addStandardDisposableListener(this.selectElement, 'change', (e) => {
@@ -101,6 +104,7 @@ export class SelectBox extends Widget {
 	public style(styles: ISelectBoxStyles) {
 		this.selectBackground = styles.selectBackground;
 		this.selectForeground = styles.selectForeground;
+		this.selectBorder = styles.selectBorder;
 
 		this._applyStyles();
 	}
@@ -109,9 +113,11 @@ export class SelectBox extends Widget {
 		if (this.selectElement) {
 			const background = this.selectBackground ? this.selectBackground.toString() : null;
 			const foreground = this.selectForeground ? this.selectForeground.toString() : null;
+			const border = this.selectBorder ? this.selectBorder.toString() : null;
 
 			this.selectElement.style.backgroundColor = background;
 			this.selectElement.style.color = foreground;
+			this.selectElement.style.borderColor = border;
 		}
 	}
 

src/vs/platform/theme/common/colorRegistry.ts

@@ -127,6 +127,10 @@ export const highContrastOutline = registerColor('highContrastOutline', { light:
 export const inputBackground = registerColor('inputBackground', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('inputBackground', 'Input field background'));
 export const inputForeground = registerColor('inputForeground', { dark: foreground, light: foreground, hc: foreground }, nls.localize('inputForeground', 'Input field foreground'));
 
+export const selectBackground = registerColor('selectBackground', { dark: '#3C3C3C', light: Color.white, hc: '#3C3C3C' }, nls.localize('selectBackground', 'Select field background'));
+export const selectForeground = registerColor('selectForeground', { dark: '#F0F0F0', light: null, hc: Color.white }, nls.localize('selectForeground', 'Select field foreground'));
+export const selectBorder = registerColor('selectBorder', { dark: selectBackground, light: '#CECECE', hc: selectBackground }, nls.localize('selectBorder', 'Select field border'));
+
 /**
  * Editor background color.
  * Because of bug https://monacotools.visualstudio.com/DefaultCollection/Monaco/_workitems/edit/13254

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

@@ -6,7 +6,7 @@
 'use strict';
 
 import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
-import { inputBackground, inputForeground, ColorIdentifier } from 'vs/platform/theme/common/colorRegistry';
+import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable } from "vs/base/common/lifecycle";
 
 export interface IThemable {
@@ -33,5 +33,5 @@ export function attachInputBoxStyler(widget: IThemable, themeService: IThemeServ
 }
 
 export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService): IDisposable {
-	return attachStyler(themeService, widget, { selectBackground: inputBackground, selectForeground: inputForeground });
+	return attachStyler(themeService, widget, { selectBackground, selectForeground, selectBorder });
 }

src/vs/workbench/browser/parts/editor/editorGroupsControl.ts

@@ -1486,7 +1486,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		element.style.outlineColor = useOutline ? this.getColor(highContrastOutline) : null;
 		element.style.outlineStyle = useOutline ? 'dashed' : null;
 		element.style.outlineWidth = useOutline ? '2px' : null;
-		(<any>element).style.outlineOffset = useOutline ? '-2px' : null; // TODO@theme TS fail (gulp watch)
+		(<any>element).style.outlineOffset = useOutline ? '-2px' : null; // TS fail (gulp watch)
 	}
 
 	private posSilo(pos: number, leftTop: string | number, rightBottom?: string | number, borderLeftTopWidth?: string | number): void {

src/vs/workbench/browser/parts/editor/tabsTitleControl.ts

@@ -225,12 +225,12 @@ export class TabsTitleControl extends TitleControl {
 			element.style.outlineWidth = '2px';
 			element.style.outlineStyle = 'dashed';
 			element.style.outlineColor = this.getColor(highContrastOutline);
-			(<any>element).style.outlineOffset = isTab ? '-5px' : '-3px'; // TODO@theme TS fail (gulp watch)
+			(<any>element).style.outlineOffset = isTab ? '-5px' : '-3px'; // TS fail (gulp watch)
 		} else {
 			element.style.outlineWidth = null;
 			element.style.outlineStyle = null;
 			element.style.outlineColor = this.isHighContrastTheme ? this.getColor(highContrastOutline) : null;
-			(<any>element).style.outlineOffset = null; // TODO@theme TS fail (gulp watch)
+			(<any>element).style.outlineOffset = null; // TS fail (gulp watch)
 		}
 	}
 

src/vs/workbench/browser/parts/editor/textEditor.ts

@@ -67,7 +67,6 @@ export abstract class BaseTextEditor extends BaseEditor {
 
 		this.toUnbind.push(this.configurationService.onDidUpdateConfiguration(e => this.handleConfigurationChangeEvent(e.config)));
 		this.toUnbind.push(themeService.onDidColorThemeChange(e => this.handleConfigurationChangeEvent())); // TODO@theme this should be done from the editor itself and not from the outside
-
 	}
 
 	protected get instantiationService(): IInstantiationService {

src/vs/workbench/parts/debug/browser/media/debugActionsWidget.css

@@ -20,7 +20,6 @@
 }
 
 .monaco-workbench .debug-actions-widget .monaco-action-bar .action-item .select-box {
-	background-color: initial;
 	margin-top: 6px;
 }
 

src/vs/workbench/parts/debug/browser/media/debugViewlet.css

@@ -94,18 +94,18 @@
 }
 
 .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .select-box {
-	background-color: #f3f3f3;
+	background-color: #f3f3f3 !important;
 	border: none;
 	margin-top: 0px;
 	cursor: pointer;
 }
 
 .vs-dark .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .select-box {
-	background-color: #252526;
+	background-color: #252526 !important;
 }
 
 .hc-black .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .select-box {
-	background-color: #000;
+	background-color: #000 !important;
 }
 
 .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration.disabled .select-box {

src/vs/workbench/parts/files/browser/media/explorerviewlet.css

@@ -183,20 +183,3 @@
 .hc-black .monaco-workbench .explorer-viewlet .editor-group {
 	line-height: 20px;
 }
-
-.hc-black .monaco-workbench .explorer-viewlet .explorer-item .monaco-inputbox > .wrapper > .input:focus {
-	outline-offset: -2px !important;
-	outline: 1px solid !important;
-	padding-left: 2px; /* push text by the width of the outline offset to prevent overlaying */
-}
-
-.hc-black .monaco-workbench .explorer-viewlet .explorer-item .monaco-inputbox.synthetic-focus {
-	outline: none !important;
-	border: none;
-}
-
-/* TODO@theme */
-
-.hc-black .monaco-workbench .explorer-viewlet .explorer-item .monaco-inputbox > .wrapper > .input:focus {
-	outline-color: #f38518 !important;
-}