theming - 💄

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

@@ -33,6 +33,7 @@ export interface IInputOptions extends IInputBoxStyles {
 export interface IInputBoxStyles {
 	inputBackground?: Color;
 	inputForeground?: Color;
+	inputBorder?: Color;
 }
 
 export interface IInputValidator {
@@ -78,6 +79,7 @@ export class InputBox extends Widget {
 
 	private inputBackground: Color;
 	private inputForeground: Color;
+	private inputBorder: Color;
 
 	private _onDidChange = this._register(new Emitter<string>());
 	public onDidChange: Event<string> = this._onDidChange.event;
@@ -96,6 +98,7 @@ export class InputBox extends Widget {
 		this.ariaLabel = this.options.ariaLabel || '';
 		this.inputBackground = this.options.inputBackground;
 		this.inputForeground = this.options.inputForeground;
+		this.inputBorder = this.options.inputBorder;
 
 		if (this.options.validationOptions) {
 			this.validation = this.options.validationOptions.validation;
@@ -388,6 +391,7 @@ export class InputBox extends Widget {
 	public style(styles: IInputBoxStyles) {
 		this.inputBackground = styles.inputBackground;
 		this.inputForeground = styles.inputForeground;
+		this.inputBorder = styles.inputBorder;
 
 		this._applyStyles();
 	}
@@ -396,11 +400,16 @@ export class InputBox extends Widget {
 		if (this.element) {
 			const background = this.inputBackground ? this.inputBackground.toString() : null;
 			const foreground = this.inputForeground ? this.inputForeground.toString() : null;
+			const border = this.inputBorder ? this.inputBorder.toString() : null;
 
 			this.element.style.backgroundColor = background;
 			this.element.style.color = foreground;
 			this.input.style.backgroundColor = background;
 			this.input.style.color = foreground;
+
+			this.element.style.borderWidth = border ? '1px' : null;
+			this.element.style.borderStyle = border ? 'solid' : null;
+			this.element.style.borderColor = border;
 		}
 	}
 

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

@@ -126,6 +126,7 @@ 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 inputBorder = registerColor('inputBorder', { dark: null, light: null, hc: highContrastBorder }, nls.localize('inputBorder', 'Input field border'));
 
 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'));

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, selectForeground, selectBackground, selectBorder } from 'vs/platform/theme/common/colorRegistry';
+import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable } from "vs/base/common/lifecycle";
 
 export interface IThemable {
@@ -28,10 +28,11 @@ export function attachStyler(themeService: IThemeService, widget: IThemable, opt
 	return themeService.onThemeChange(applyStyles);
 }
 
-export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: { inputBackground?: ColorIdentifier, inputForeground?: ColorIdentifier }): IDisposable {
+export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: { inputBackground?: ColorIdentifier, inputForeground?: ColorIdentifier, inputBorder?: ColorIdentifier }): IDisposable {
 	return attachStyler(themeService, widget, {
 		inputBackground: (style && style.inputBackground) || inputBackground,
-		inputForeground: (style && style.inputForeground) || inputForeground
+		inputForeground: (style && style.inputForeground) || inputForeground,
+		inputBorder: (style && style.inputBorder) || inputBorder
 	});
 }
 

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

@@ -341,11 +341,6 @@
 	animation-name: debugViewletValueChanged;
 }
 
-.vs-dark .debug-viewlet .monaco-inputbox > .wrapper > .input,
-.hc-black .debug-viewlet .monaco-inputbox > .wrapper > .input {
-	color: #CCC;
-}
-
 /* Breakpoints */
 
 .debug-viewlet .debug-breakpoints .breakpoint {

src/vs/workbench/parts/search/browser/media/searchviewlet.css

@@ -374,11 +374,6 @@
 	background-color: rgba(234, 92, 0, 0.3);
 }
 
-.vs .search-viewlet .input-box,
-.vs .search-viewlet .file-types .monaco-inputbox {
-	background-color: white;
-}
-
 .vs .search-viewlet .filematch .name {
 	color: #1E1E1E;
 }
@@ -395,11 +390,6 @@
 	background-image: url('expando-expanded.svg');
 }
 
-.vs-dark .search-viewlet .input-box,
-.vs-dark .search-viewlet .file-types .monaco-inputbox {
-	background-color: #3C3C3C;
-}
-
 .vs-dark .search-viewlet .monaco-tree .filematch .name {
 	color: #FFF;
 }
@@ -438,18 +428,6 @@
 }
 
 /* High Contrast Theming */
-.hc-black .monaco-workbench .search-viewlet .input-box,
-.hc-black .monaco-workbench .search-viewlet .file-types .monaco-inputbox {
-	background-color: #000;
-}
-
-.hc-black .monaco-workbench .input-box {
-	border: 1px solid #6FC3DF;
-}
-
-.hc-black .monaco-workbench .input-box .monaco-inputbox.idle {
-	border: none;
-}
 
 .hc-black .monaco-workbench .search-viewlet .filematch,
 .hc-black .monaco-workbench .search-viewlet .linematch {