theming - info/warning/error for input box

src/vs/base/browser/ui/findinput/findInput.ts

@@ -48,6 +48,14 @@ export class FindInput extends Widget {
 	private inputActiveOptionBorder: Color;
 	private inputBackground: Color;
 	private inputForeground: Color;
+	private inputBorder: Color;
+
+	private infoBorder: Color;
+	private infoBackground: Color;
+	private warningBorder: Color;
+	private warningBackground: Color;
+	private errorBorder: Color;
+	private errorBackground: Color;
 
 	private regex: RegexCheckbox;
 	private wholeWords: WholeWordsCheckbox;
@@ -81,6 +89,14 @@ export class FindInput extends Widget {
 		this.inputActiveOptionBorder = options.inputActiveOptionBorder;
 		this.inputBackground = options.inputBackground;
 		this.inputForeground = options.inputForeground;
+		this.inputBorder = options.inputBorder;
+
+		this.infoBorder = options.infoBorder;
+		this.infoBackground = options.infoBackground;
+		this.warningBorder = options.warningBorder;
+		this.warningBackground = options.warningBackground;
+		this.errorBorder = options.errorBorder;
+		this.errorBackground = options.errorBackground;
 
 		this.regex = null;
 		this.wholeWords = null;
@@ -150,6 +166,14 @@ export class FindInput extends Widget {
 		this.inputActiveOptionBorder = styles.inputActiveOptionBorder;
 		this.inputBackground = styles.inputBackground;
 		this.inputForeground = styles.inputForeground;
+		this.inputBorder = styles.inputBorder;
+
+		this.infoBackground = styles.infoBackground;
+		this.infoBorder = styles.infoBorder;
+		this.warningBackground = styles.warningBackground;
+		this.warningBorder = styles.warningBorder;
+		this.errorBackground = styles.errorBackground;
+		this.errorBorder = styles.errorBorder;
 
 		this.applyStyles();
 	}
@@ -165,7 +189,14 @@ export class FindInput extends Widget {
 
 			const inputBoxStyles: IInputBoxStyles = {
 				inputBackground: this.inputBackground,
-				inputForeground: this.inputForeground
+				inputForeground: this.inputForeground,
+				inputBorder: this.inputBorder,
+				infoBackground: this.infoBackground,
+				infoBorder: this.infoBorder,
+				warningBackground: this.warningBackground,
+				warningBorder: this.warningBorder,
+				errorBackground: this.errorBackground,
+				errorBorder: this.errorBorder
 			};
 			this.inputBox.style(inputBoxStyles);
 		}
@@ -235,7 +266,14 @@ export class FindInput extends Widget {
 				showMessage: true
 			},
 			inputBackground: this.inputBackground,
-			inputForeground: this.inputForeground
+			inputForeground: this.inputForeground,
+			inputBorder: this.inputBorder,
+			infoBackground: this.infoBackground,
+			infoBorder: this.infoBorder,
+			warningBackground: this.warningBackground,
+			warningBorder: this.warningBorder,
+			errorBackground: this.errorBackground,
+			errorBorder: this.errorBorder
 		}));
 
 		this.regex = this._register(new RegexCheckbox({

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

@@ -18,6 +18,10 @@
 	font-size: inherit;
 }
 
+.monaco-inputbox.idle {
+	border: 1px solid transparent;
+}
+
 .monaco-inputbox > .wrapper > .input,
 .monaco-inputbox > .wrapper > .mirror {
 
@@ -112,94 +116,4 @@
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
-}
-
-/* Theming */
-
-.monaco-inputbox.idle {
-	border: 1px solid transparent;
-}
-
-.monaco-inputbox.info {
-	border: 1px solid #009CCC;
-}
-
-.monaco-inputbox-container .monaco-inputbox-message.info {
-	background: #D6ECF2;
-	border: 1px solid #009CCC;
-}
-
-.monaco-inputbox.warning {
-	border: 1px solid #F2CB1D;
-}
-
-.monaco-inputbox-container .monaco-inputbox-message.warning {
-	background: #F6F5D2;
-	border: 1px solid #F2CB1D;
-}
-
-.monaco-inputbox.error {
-	border: 1px solid #E51400;
-}
-
-.monaco-inputbox-container .monaco-inputbox-message.error {
-	background: #f2dede;
-	border: 1px solid #E51400;
-}
-
-/* VS Dark */
-
-.vs-dark .monaco-inputbox.info {
-	border-color: #55AAFF;
-}
-
-.vs-dark .monaco-inputbox-container .monaco-inputbox-message.info {
-	background-color: #063B49;
-	border-color: #55AAFF;
-}
-
-.vs-dark .monaco-inputbox.warning {
-	border-color: #B89500;
-}
-
-.vs-dark .monaco-inputbox-container .monaco-inputbox-message.warning {
-	background-color: #352A05;
-	border-color: #B89500;
-}
-
-.vs-dark .monaco-inputbox.error {
-	border-color: #BE1100;
-}
-
-.vs-dark .monaco-inputbox-container .monaco-inputbox-message.error {
-	background-color: #5A1D1D;
-	border-color: #BE1100;
-}
-
-/* High Contrast Theming */
-.hc-black .monaco-inputbox.idle {
-	border: 1px solid #6FC3DF;
-}
-
-.hc-black .monaco-inputbox-container .monaco-inputbox-message.info {
-	background-color: #000;
-	border-color: #6FC3DF;
-}
-
-.hc-black .monaco-inputbox.warning {
-	border-color: #B89500;
-}
-
-.hc-black .monaco-inputbox-container .monaco-inputbox-message.warning {
-	background-color: #000;
-	border-color: #B89500;
-}
-
-.hc-black .monaco-inputbox.error {
-	border-color: #BE1100;
-}
-
-.hc-black .monaco-inputbox-container .monaco-inputbox-message.error {
-	background-color: #000;
-	border-color: #BE1100;
 }

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

@@ -35,6 +35,12 @@ export interface IInputBoxStyles {
 	inputBackground?: Color;
 	inputForeground?: Color;
 	inputBorder?: Color;
+	infoBorder?: Color;
+	infoBackground?: Color;
+	warningBorder?: Color;
+	warningBackground?: Color;
+	errorBorder?: Color;
+	errorBackground?: Color;
 }
 
 export interface IInputValidator {
@@ -65,7 +71,13 @@ export interface IRange {
 
 const defaultOpts = {
 	inputBackground: Color.fromHex('#3C3C3C'),
-	inputForeground: Color.fromHex('#CCCCCC')
+	inputForeground: Color.fromHex('#CCCCCC'),
+	infoBorder: Color.fromHex('#55AAFF'),
+	infoBackground: Color.fromHex('#063B49'),
+	warningBorder: Color.fromHex('#B89500'),
+	warningBackground: Color.fromHex('#352A05'),
+	errorBorder: Color.fromHex('#BE1100'),
+	errorBackground: Color.fromHex('#5A1D1D')
 };
 
 export class InputBox extends Widget {
@@ -87,6 +99,13 @@ export class InputBox extends Widget {
 	private inputForeground: Color;
 	private inputBorder: Color;
 
+	private infoBorder: Color;
+	private infoBackground: Color;
+	private warningBorder: Color;
+	private warningBackground: Color;
+	private errorBorder: Color;
+	private errorBackground: Color;
+
 	private _onDidChange = this._register(new Emitter<string>());
 	public onDidChange: Event<string> = this._onDidChange.event;
 
@@ -103,10 +122,18 @@ export class InputBox extends Widget {
 		this.cachedHeight = null;
 		this.placeholder = this.options.placeholder || '';
 		this.ariaLabel = this.options.ariaLabel || '';
+
 		this.inputBackground = this.options.inputBackground;
 		this.inputForeground = this.options.inputForeground;
 		this.inputBorder = this.options.inputBorder;
 
+		this.infoBorder = this.options.infoBorder;
+		this.infoBackground = this.options.infoBackground;
+		this.warningBorder = this.options.warningBorder;
+		this.warningBackground = this.options.warningBackground;
+		this.errorBorder = this.options.errorBorder;
+		this.errorBackground = this.options.errorBackground;
+
 		if (this.options.validationOptions) {
 			this.validation = this.options.validationOptions.validation;
 			this.showValidationMessage = this.options.validationOptions.showMessage || false;
@@ -267,6 +294,9 @@ export class InputBox extends Widget {
 		dom.removeClass(this.element, 'error');
 		dom.addClass(this.element, this.classForType(message.type));
 
+		const styles = this.stylesForType(this.message.type);
+		this.element.style.border = styles.border ? `1px solid ${styles.border}` : null;
+
 		// ARIA Support
 		let alertText: string;
 		if (message.type === MessageType.ERROR) {
@@ -293,6 +323,7 @@ export class InputBox extends Widget {
 		dom.addClass(this.element, 'idle');
 
 		this._hideMessage();
+		this.applyStyles();
 	}
 
 	public isInputValid(): boolean {
@@ -317,6 +348,14 @@ export class InputBox extends Widget {
 		return !result;
 	}
 
+	private stylesForType(type: MessageType): { border: Color; background: Color } {
+		switch (type) {
+			case MessageType.INFO: return { border: this.infoBorder, background: this.infoBackground };
+			case MessageType.WARNING: return { border: this.warningBorder, background: this.warningBackground };
+			default: return { border: this.errorBorder, background: this.errorBackground };
+		}
+	}
+
 	private classForType(type: MessageType): string {
 		switch (type) {
 			case MessageType.INFO: return 'info';
@@ -355,7 +394,13 @@ export class InputBox extends Widget {
 
 				let spanElement: HTMLElement = <any>renderHtml(renderOptions);
 				dom.addClass(spanElement, this.classForType(this.message.type));
+
+				const styles = this.stylesForType(this.message.type);
+				spanElement.style.backgroundColor = styles.background ? styles.background.toString() : null;
+				spanElement.style.border = styles.border ? `1px solid ${styles.border}` : null;
+
 				dom.append(div, spanElement);
+
 				return null;
 			},
 			layout: layout
@@ -400,6 +445,13 @@ export class InputBox extends Widget {
 		this.inputForeground = styles.inputForeground;
 		this.inputBorder = styles.inputBorder;
 
+		this.infoBackground = styles.infoBackground;
+		this.infoBorder = styles.infoBorder;
+		this.warningBackground = styles.warningBackground;
+		this.warningBorder = styles.warningBorder;
+		this.errorBackground = styles.errorBackground;
+		this.errorBorder = styles.errorBorder;
+
 		this.applyStyles();
 	}
 

src/vs/base/parts/quickopen/browser/quickOpenWidget.ts

@@ -170,7 +170,13 @@ export class QuickOpenWidget implements IModelProvider {
 					ariaLabel: DEFAULT_INPUT_ARIA_LABEL,
 					inputBackground: this.styles.inputBackground,
 					inputForeground: this.styles.inputForeground,
-					inputBorder: this.styles.inputBorder
+					inputBorder: this.styles.inputBorder,
+					infoBackground: this.styles.infoBackground,
+					infoBorder: this.styles.infoBorder,
+					warningBackground: this.styles.warningBackground,
+					warningBorder: this.styles.warningBorder,
+					errorBackground: this.styles.errorBackground,
+					errorBorder: this.styles.errorBorder
 				});
 
 				// ARIA
@@ -349,7 +355,13 @@ export class QuickOpenWidget implements IModelProvider {
 			this.inputBox.style({
 				inputBackground: this.styles.inputBackground,
 				inputForeground: this.styles.inputForeground,
-				inputBorder: this.styles.inputBorder
+				inputBorder: this.styles.inputBorder,
+				infoBackground: this.styles.infoBackground,
+				infoBorder: this.styles.infoBorder,
+				warningBackground: this.styles.warningBackground,
+				warningBorder: this.styles.warningBorder,
+				errorBackground: this.styles.errorBackground,
+				errorBorder: this.styles.errorBorder
 			});
 		}
 

src/vs/editor/contrib/find/browser/findWidget.ts

@@ -26,7 +26,7 @@ import { CONTEXT_FIND_INPUT_FOCUSSED } from 'vs/editor/contrib/find/common/findC
 import { ITheme, registerThemingParticipant, IThemeService } from 'vs/platform/theme/common/themeService';
 import { Color } from 'vs/base/common/color';
 import { IConfigurationChangedEvent } from "vs/editor/common/config/editorOptions";
-import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, highContrastOutline, highContrastBorder, inputBackground, editorWidgetBackground, inputActiveOptionBorder, widgetShadow, inputForeground, inputBorder } from "vs/platform/theme/common/colorRegistry";
+import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, highContrastOutline, highContrastBorder, inputBackground, editorWidgetBackground, inputActiveOptionBorder, widgetShadow, inputForeground, inputBorder, infoBackground, infoBorder, warningBackground, warningBorder, errorBackground, errorBorder } from "vs/platform/theme/common/colorRegistry";
 
 export interface IFindController {
 	replace(): void;
@@ -352,7 +352,13 @@ export class FindWidget extends Widget implements IOverlayWidget {
 			inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
 			inputBackground: theme.getColor(inputBackground),
 			inputForeground: theme.getColor(inputForeground),
-			inputBorder: theme.getColor(inputBorder)
+			inputBorder: theme.getColor(inputBorder),
+			infoBackground: theme.getColor(infoBackground),
+			infoBorder: theme.getColor(infoBorder),
+			warningBackground: theme.getColor(warningBackground),
+			warningBorder: theme.getColor(warningBorder),
+			errorBackground: theme.getColor(errorBackground),
+			errorBorder: theme.getColor(errorBorder)
 		};
 		this._findInput.style(inputStyles);
 		this._replaceInputBox.style(inputStyles);

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

@@ -126,6 +126,13 @@ export const focus = registerColor('focusedElementOutline', {
 	hc: '#F38518'
 }, nls.localize('focusedElementOutline', "Overall outline/border color for focused elements. This color is only used if not overridden by a component."));
 
+export const infoBackground = registerColor('infoBackground', { dark: '#063B49', light: '#D6ECF2', hc: Color.black }, nls.localize('infoBackground', "Overall info background color. This color is only used if not overridden by a component."));
+export const infoBorder = registerColor('infoBorder', { dark: '#55AAFF', light: '#009CCC', hc: '#6FC3DF' }, nls.localize('infoBorder', "Overall info border color. This color is only used if not overridden by a component."));
+export const warningBackground = registerColor('warningBackground', { dark: '#352A05', light: '#F6F5D2', hc: Color.black }, nls.localize('warningBackground', "Overall warning background color. This color is only used if not overridden by a component."));
+export const warningBorder = registerColor('warningBorder', { dark: '#B89500', light: '#F2CB1D', hc: '#B89500' }, nls.localize('warningBorder', "Overall warning border color. This color is only used if not overridden by a component."));
+export const errorBackground = registerColor('errorBackground', { dark: '#5A1D1D', light: '#F2DEDE', hc: Color.black }, nls.localize('errorBackground', "Overall error background color. This color is only used if not overridden by a component."));
+export const errorBorder = registerColor('errorBorder', { dark: '#BE1100', light: '#E51400', hc: '#BE1100' }, nls.localize('errorBorder', "Overall error border color. This color is only used if not overridden by a component."));
+
 /**
  * Commonly used High contrast colors.
  */

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, inputBorder, foreground, editorBackground, highContrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusAndSelectionBackground, listFocusAndSelectionForeground, listInactiveFocusBackground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, listHoverOutline, listSelectionOutline, listFocusOutline, listInactiveFocusOutline, pickerGroupBorder, pickerGroupForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
+import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, highContrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusAndSelectionBackground, listFocusAndSelectionForeground, listInactiveFocusBackground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, listHoverOutline, listSelectionOutline, listFocusOutline, listInactiveFocusOutline, pickerGroupBorder, pickerGroupForeground, widgetShadow, infoBorder, infoBackground, warningBorder, warningBackground, errorBorder, errorBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable } from "vs/base/common/lifecycle";
 
 export interface IThemable {
@@ -34,11 +34,28 @@ export function attachCheckboxStyler(widget: IThemable, themeService: IThemeServ
 	});
 }
 
-export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: { inputBackground?: ColorIdentifier, inputForeground?: ColorIdentifier, inputBorder?: ColorIdentifier }): IDisposable {
+export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?:
+	{
+		inputBackground?: ColorIdentifier,
+		inputForeground?: ColorIdentifier,
+		inputBorder?: ColorIdentifier,
+		infoBorder?: ColorIdentifier,
+		infoBackground?: ColorIdentifier,
+		warningBorder?: ColorIdentifier,
+		warningBackground?: ColorIdentifier,
+		errorBorder?: ColorIdentifier,
+		errorBackground?: ColorIdentifier
+	}): IDisposable {
 	return attachStyler(themeService, widget, {
 		inputBackground: (style && style.inputBackground) || inputBackground,
 		inputForeground: (style && style.inputForeground) || inputForeground,
-		inputBorder: (style && style.inputBorder) || inputBorder
+		inputBorder: (style && style.inputBorder) || inputBorder,
+		infoBorder: (style && style.infoBorder) || infoBorder,
+		infoBackground: (style && style.infoBackground) || infoBackground,
+		warningBorder: (style && style.warningBorder) || warningBorder,
+		warningBackground: (style && style.warningBackground) || warningBackground,
+		errorBorder: (style && style.errorBorder) || errorBorder,
+		errorBackground: (style && style.errorBackground) || errorBackground
 	});
 }
 
@@ -50,12 +67,30 @@ export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeSer
 	});
 }
 
-export function attachFindInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: { inputBackground?: ColorIdentifier, inputForeground?: ColorIdentifier, inputBorder?: ColorIdentifier, inputActiveOptionBorder?: ColorIdentifier }): IDisposable {
+export function attachFindInputBoxStyler(widget: IThemable, themeService: IThemeService, style?:
+	{
+		inputBackground?: ColorIdentifier,
+		inputForeground?: ColorIdentifier,
+		inputBorder?: ColorIdentifier,
+		inputActiveOptionBorder?: ColorIdentifier,
+		infoBorder?: ColorIdentifier,
+		infoBackground?: ColorIdentifier,
+		warningBorder?: ColorIdentifier,
+		warningBackground?: ColorIdentifier,
+		errorBorder?: ColorIdentifier,
+		errorBackground?: ColorIdentifier
+	}): IDisposable {
 	return attachStyler(themeService, widget, {
 		inputBackground: (style && style.inputBackground) || inputBackground,
 		inputForeground: (style && style.inputForeground) || inputForeground,
 		inputBorder: (style && style.inputBorder) || inputBorder,
-		inputActiveOptionBorder: (style && style.inputActiveOptionBorder) || inputActiveOptionBorder
+		inputActiveOptionBorder: (style && style.inputActiveOptionBorder) || inputActiveOptionBorder,
+		infoBorder: (style && style.infoBorder) || infoBorder,
+		infoBackground: (style && style.infoBackground) || infoBackground,
+		warningBorder: (style && style.warningBorder) || warningBorder,
+		warningBackground: (style && style.warningBackground) || warningBackground,
+		errorBorder: (style && style.errorBorder) || errorBorder,
+		errorBackground: (style && style.errorBackground) || errorBackground
 	});
 }
 
@@ -67,6 +102,12 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
 	inputBackground?: ColorIdentifier,
 	inputForeground?: ColorIdentifier,
 	inputBorder?: ColorIdentifier,
+	infoBorder?: ColorIdentifier,
+	infoBackground?: ColorIdentifier,
+	warningBorder?: ColorIdentifier,
+	warningBackground?: ColorIdentifier,
+	errorBorder?: ColorIdentifier,
+	errorBackground?: ColorIdentifier
 	pickerGroupForeground?: ColorIdentifier,
 	pickerGroupBorder?: ColorIdentifier,
 	listFocusBackground?: ColorIdentifier,
@@ -91,6 +132,12 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
 		inputBackground: (style && style.inputBackground) || inputBackground,
 		inputForeground: (style && style.inputForeground) || inputForeground,
 		inputBorder: (style && style.inputBorder) || inputBorder,
+		infoBorder: (style && style.infoBorder) || infoBorder,
+		infoBackground: (style && style.infoBackground) || infoBackground,
+		warningBorder: (style && style.warningBorder) || warningBorder,
+		warningBackground: (style && style.warningBackground) || warningBackground,
+		errorBorder: (style && style.errorBorder) || errorBorder,
+		errorBackground: (style && style.errorBackground) || errorBackground,
 		listFocusBackground: (style && style.listFocusBackground) || listFocusBackground,
 		listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || listActiveSelectionBackground,
 		listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || listActiveSelectionForeground,