Skip to content

Commit 3053bc6

Browse files
ParkourKarthikbpasero
ParkourKarthik
authored and
bpasero
committed
add option for input validation foreground color (microsoft#57734)
* add option for input validation foreground color for findWidget * fix copy paste mistakes * removing defaults for foreground color * add inputValidationForeground wherever inputValidationBackground is used * add inputValidationForeground color
1 parent 3483750 commit 3053bc6

11 files changed

Lines changed: 85 additions & 13 deletions

File tree

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,13 @@ export class FindInput extends Widget {
5454

5555
private inputValidationInfoBorder: Color;
5656
private inputValidationInfoBackground: Color;
57+
private inputValidationInfoForeground: Color;
5758
private inputValidationWarningBorder: Color;
5859
private inputValidationWarningBackground: Color;
60+
private inputValidationWarningForeground: Color;
5961
private inputValidationErrorBorder: Color;
6062
private inputValidationErrorBackground: Color;
63+
private inputValidationErrorForeground: Color;
6164

6265
private regex: RegexCheckbox;
6366
private wholeWords: WholeWordsCheckbox;
@@ -101,10 +104,13 @@ export class FindInput extends Widget {
101104

102105
this.inputValidationInfoBorder = options.inputValidationInfoBorder;
103106
this.inputValidationInfoBackground = options.inputValidationInfoBackground;
107+
this.inputValidationInfoForeground = options.inputValidationInfoForeground;
104108
this.inputValidationWarningBorder = options.inputValidationWarningBorder;
105109
this.inputValidationWarningBackground = options.inputValidationWarningBackground;
110+
this.inputValidationWarningForeground = options.inputValidationWarningForeground;
106111
this.inputValidationErrorBorder = options.inputValidationErrorBorder;
107112
this.inputValidationErrorBackground = options.inputValidationErrorBackground;
113+
this.inputValidationErrorForeground = options.inputValidationErrorForeground;
108114

109115
this.regex = null;
110116
this.wholeWords = null;
@@ -178,10 +184,13 @@ export class FindInput extends Widget {
178184
this.inputBorder = styles.inputBorder;
179185

180186
this.inputValidationInfoBackground = styles.inputValidationInfoBackground;
187+
this.inputValidationInfoForeground = styles.inputValidationInfoForeground;
181188
this.inputValidationInfoBorder = styles.inputValidationInfoBorder;
182189
this.inputValidationWarningBackground = styles.inputValidationWarningBackground;
190+
this.inputValidationWarningForeground = styles.inputValidationWarningForeground;
183191
this.inputValidationWarningBorder = styles.inputValidationWarningBorder;
184192
this.inputValidationErrorBackground = styles.inputValidationErrorBackground;
193+
this.inputValidationErrorForeground = styles.inputValidationErrorForeground;
185194
this.inputValidationErrorBorder = styles.inputValidationErrorBorder;
186195

187196
this.applyStyles();
@@ -201,10 +210,13 @@ export class FindInput extends Widget {
201210
inputForeground: this.inputForeground,
202211
inputBorder: this.inputBorder,
203212
inputValidationInfoBackground: this.inputValidationInfoBackground,
213+
inputValidationInfoForeground: this.inputValidationInfoForeground,
204214
inputValidationInfoBorder: this.inputValidationInfoBorder,
205215
inputValidationWarningBackground: this.inputValidationWarningBackground,
216+
inputValidationWarningForeground: this.inputValidationWarningForeground,
206217
inputValidationWarningBorder: this.inputValidationWarningBorder,
207218
inputValidationErrorBackground: this.inputValidationErrorBackground,
219+
inputValidationErrorForeground: this.inputValidationErrorForeground,
208220
inputValidationErrorBorder: this.inputValidationErrorBorder
209221
};
210222
this.inputBox.style(inputBoxStyles);
@@ -282,10 +294,13 @@ export class FindInput extends Widget {
282294
inputForeground: this.inputForeground,
283295
inputBorder: this.inputBorder,
284296
inputValidationInfoBackground: this.inputValidationInfoBackground,
297+
inputValidationInfoForeground: this.inputValidationInfoForeground,
285298
inputValidationInfoBorder: this.inputValidationInfoBorder,
286299
inputValidationWarningBackground: this.inputValidationWarningBackground,
300+
inputValidationWarningForeground: this.inputValidationWarningForeground,
287301
inputValidationWarningBorder: this.inputValidationWarningBorder,
288302
inputValidationErrorBackground: this.inputValidationErrorBackground,
303+
inputValidationErrorForeground: this.inputValidationErrorForeground,
289304
inputValidationErrorBorder: this.inputValidationErrorBorder,
290305
history
291306
}));

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,13 @@ export interface IInputBoxStyles {
3838
inputBorder?: Color;
3939
inputValidationInfoBorder?: Color;
4040
inputValidationInfoBackground?: Color;
41+
inputValidationInfoForeground?: Color;
4142
inputValidationWarningBorder?: Color;
4243
inputValidationWarningBackground?: Color;
44+
inputValidationWarningForeground?: Color;
4345
inputValidationErrorBorder?: Color;
4446
inputValidationErrorBackground?: Color;
47+
inputValidationErrorForeground?: Color;
4548
}
4649

4750
export interface IInputValidator {
@@ -100,10 +103,13 @@ export class InputBox extends Widget {
100103

101104
private inputValidationInfoBorder: Color;
102105
private inputValidationInfoBackground: Color;
106+
private inputValidationInfoForeground: Color;
103107
private inputValidationWarningBorder: Color;
104108
private inputValidationWarningBackground: Color;
109+
private inputValidationWarningForeground: Color;
105110
private inputValidationErrorBorder: Color;
106111
private inputValidationErrorBackground: Color;
112+
private inputValidationErrorForeground: Color;
107113

108114
private _onDidChange = this._register(new Emitter<string>());
109115
public readonly onDidChange: Event<string> = this._onDidChange.event;
@@ -128,10 +134,13 @@ export class InputBox extends Widget {
128134

129135
this.inputValidationInfoBorder = this.options.inputValidationInfoBorder;
130136
this.inputValidationInfoBackground = this.options.inputValidationInfoBackground;
137+
this.inputValidationInfoForeground = this.options.inputValidationInfoForeground;
131138
this.inputValidationWarningBorder = this.options.inputValidationWarningBorder;
132139
this.inputValidationWarningBackground = this.options.inputValidationWarningBackground;
140+
this.inputValidationWarningForeground = this.options.inputValidationWarningForeground;
133141
this.inputValidationErrorBorder = this.options.inputValidationErrorBorder;
134142
this.inputValidationErrorBackground = this.options.inputValidationErrorBackground;
143+
this.inputValidationErrorForeground = this.options.inputValidationErrorForeground;
135144

136145
if (this.options.validationOptions) {
137146
this.validation = this.options.validationOptions.validation;
@@ -349,11 +358,11 @@ export class InputBox extends Widget {
349358
return !errorMsg;
350359
}
351360

352-
private stylesForType(type: MessageType): { border: Color; background: Color } {
361+
private stylesForType(type: MessageType): { border: Color; background: Color; foreground: Color } {
353362
switch (type) {
354-
case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground };
355-
case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground };
356-
default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground };
363+
case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground, foreground: this.inputValidationInfoForeground };
364+
case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground, foreground: this.inputValidationWarningForeground };
365+
default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground, foreground: this.inputValidationErrorForeground };
357366
}
358367
}
359368

@@ -394,6 +403,7 @@ export class InputBox extends Widget {
394403

395404
const styles = this.stylesForType(this.message.type);
396405
spanElement.style.backgroundColor = styles.background ? styles.background.toString() : null;
406+
spanElement.style.color = styles.foreground ? styles.foreground.toString() : null;
397407
spanElement.style.border = styles.border ? `1px solid ${styles.border}` : null;
398408

399409
dom.append(div, spanElement);
@@ -443,10 +453,13 @@ export class InputBox extends Widget {
443453
this.inputBorder = styles.inputBorder;
444454

445455
this.inputValidationInfoBackground = styles.inputValidationInfoBackground;
456+
this.inputValidationInfoForeground = styles.inputValidationInfoForeground;
446457
this.inputValidationInfoBorder = styles.inputValidationInfoBorder;
447458
this.inputValidationWarningBackground = styles.inputValidationWarningBackground;
459+
this.inputValidationWarningForeground = styles.inputValidationWarningForeground;
448460
this.inputValidationWarningBorder = styles.inputValidationWarningBorder;
449461
this.inputValidationErrorBackground = styles.inputValidationErrorBackground;
462+
this.inputValidationErrorForeground = styles.inputValidationErrorForeground;
450463
this.inputValidationErrorBorder = styles.inputValidationErrorBorder;
451464

452465
this.applyStyles();

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,10 +184,13 @@ export class QuickOpenWidget extends Disposable implements IModelProvider {
184184
inputForeground: this.styles.inputForeground,
185185
inputBorder: this.styles.inputBorder,
186186
inputValidationInfoBackground: this.styles.inputValidationInfoBackground,
187+
inputValidationInfoForeground: this.styles.inputValidationInfoForeground,
187188
inputValidationInfoBorder: this.styles.inputValidationInfoBorder,
188189
inputValidationWarningBackground: this.styles.inputValidationWarningBackground,
190+
inputValidationWarningForeground: this.styles.inputValidationWarningForeground,
189191
inputValidationWarningBorder: this.styles.inputValidationWarningBorder,
190192
inputValidationErrorBackground: this.styles.inputValidationErrorBackground,
193+
inputValidationErrorForeground: this.styles.inputValidationErrorForeground,
191194
inputValidationErrorBorder: this.styles.inputValidationErrorBorder
192195
}));
193196

@@ -398,10 +401,13 @@ export class QuickOpenWidget extends Disposable implements IModelProvider {
398401
inputForeground: this.styles.inputForeground,
399402
inputBorder: this.styles.inputBorder,
400403
inputValidationInfoBackground: this.styles.inputValidationInfoBackground,
404+
inputValidationInfoForeground: this.styles.inputValidationInfoForeground,
401405
inputValidationInfoBorder: this.styles.inputValidationInfoBorder,
402406
inputValidationWarningBackground: this.styles.inputValidationWarningBackground,
407+
inputValidationWarningForeground: this.styles.inputValidationWarningForeground,
403408
inputValidationWarningBorder: this.styles.inputValidationWarningBorder,
404409
inputValidationErrorBackground: this.styles.inputValidationErrorBackground,
410+
inputValidationErrorForeground: this.styles.inputValidationErrorForeground,
405411
inputValidationErrorBorder: this.styles.inputValidationErrorBorder
406412
});
407413
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/c
2929
import { ITheme, registerThemingParticipant, IThemeService } from 'vs/platform/theme/common/themeService';
3030
import { Color } from 'vs/base/common/color';
3131
import { IConfigurationChangedEvent } from 'vs/editor/common/config/editorOptions';
32-
import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, contrastBorder, inputBackground, editorWidgetBackground, inputActiveOptionBorder, widgetShadow, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorBorder, errorForeground, editorWidgetBorder, editorFindMatchBorder, editorFindMatchHighlightBorder, editorFindRangeHighlightBorder, editorWidgetResizeBorder } from 'vs/platform/theme/common/colorRegistry';
32+
import { editorFindRangeHighlight, editorFindMatch, editorFindMatchHighlight, contrastBorder, inputBackground, editorWidgetBackground, inputActiveOptionBorder, widgetShadow, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorForeground, inputValidationErrorBorder, errorForeground, editorWidgetBorder, editorFindMatchBorder, editorFindMatchHighlightBorder, editorFindRangeHighlightBorder, editorWidgetResizeBorder } from 'vs/platform/theme/common/colorRegistry';
3333
import { ContextScopedFindInput, ContextScopedHistoryInputBox } from 'vs/platform/widget/browser/contextScopedHistoryWidget';
3434
import { toDisposable } from 'vs/base/common/lifecycle';
3535

@@ -521,10 +521,13 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
521521
inputForeground: theme.getColor(inputForeground),
522522
inputBorder: theme.getColor(inputBorder),
523523
inputValidationInfoBackground: theme.getColor(inputValidationInfoBackground),
524+
inputValidationInfoForeground: theme.getColor(inputValidationInfoForeground),
524525
inputValidationInfoBorder: theme.getColor(inputValidationInfoBorder),
525526
inputValidationWarningBackground: theme.getColor(inputValidationWarningBackground),
527+
inputValidationWarningForeground: theme.getColor(inputValidationWarningForeground),
526528
inputValidationWarningBorder: theme.getColor(inputValidationWarningBorder),
527529
inputValidationErrorBackground: theme.getColor(inputValidationErrorBackground),
530+
inputValidationErrorForeground: theme.getColor(inputValidationErrorForeground),
528531
inputValidationErrorBorder: theme.getColor(inputValidationErrorBorder)
529532
};
530533
this._findInput.style(inputStyles);

‎src/vs/editor/contrib/find/simpleFindWidget.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import * as dom from 'vs/base/browser/dom';
1212
import { FindInput } from 'vs/base/browser/ui/findinput/findInput';
1313
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
1414
import { registerThemingParticipant, ITheme } from 'vs/platform/theme/common/themeService';
15-
import { inputBackground, inputActiveOptionBorder, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorBorder, editorWidgetBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
15+
import { inputBackground, inputActiveOptionBorder, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorForeground, inputValidationErrorBorder, editorWidgetBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
1616
import { SimpleButton } from './findWidget';
1717
import { ContextScopedFindInput } from 'vs/platform/widget/browser/contextScopedHistoryWidget';
1818
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -144,10 +144,13 @@ export abstract class SimpleFindWidget extends Widget {
144144
inputForeground: theme.getColor(inputForeground),
145145
inputBorder: theme.getColor(inputBorder),
146146
inputValidationInfoBackground: theme.getColor(inputValidationInfoBackground),
147+
inputValidationInfoForeground: theme.getColor(inputValidationInfoForeground),
147148
inputValidationInfoBorder: theme.getColor(inputValidationInfoBorder),
148149
inputValidationWarningBackground: theme.getColor(inputValidationWarningBackground),
150+
inputValidationWarningForeground: theme.getColor(inputValidationWarningForeground),
149151
inputValidationWarningBorder: theme.getColor(inputValidationWarningBorder),
150152
inputValidationErrorBackground: theme.getColor(inputValidationErrorBackground),
153+
inputValidationErrorForeground: theme.getColor(inputValidationErrorForeground),
151154
inputValidationErrorBorder: theme.getColor(inputValidationErrorBorder)
152155
};
153156
this._findInput.style(inputStyles);

‎src/vs/editor/contrib/message/messageController.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { ICodeEditor, IContentWidget, IContentWidgetPosition, ContentWidgetPosit
1818
import { IContextKeyService, RawContextKey, IContextKey } from 'vs/platform/contextkey/common/contextkey';
1919
import { IPosition } from 'vs/editor/common/core/position';
2020
import { registerThemingParticipant, HIGH_CONTRAST } from 'vs/platform/theme/common/themeService';
21-
import { inputValidationInfoBorder, inputValidationInfoBackground } from 'vs/platform/theme/common/colorRegistry';
21+
import { inputValidationInfoBorder, inputValidationInfoBackground, inputValidationInfoForeground } from 'vs/platform/theme/common/colorRegistry';
2222
import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
2323

2424
export class MessageController extends Disposable implements editorCommon.IEditorContribution {
@@ -194,4 +194,8 @@ registerThemingParticipant((theme, collector) => {
194194
if (background) {
195195
collector.addRule(`.monaco-editor .monaco-editor-overlaymessage .message { background-color: ${background}; }`);
196196
}
197+
let foreground = theme.getColor(inputValidationInfoForeground);
198+
if (foreground) {
199+
collector.addRule(`.monaco-editor .monaco-editor-overlaymessage .message { color: ${foreground}; }`);
200+
}
197201
});

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,13 @@ export const inputActiveOptionBorder = registerColor('inputOption.activeBorder',
180180
export const inputPlaceholderForeground = registerColor('input.placeholderForeground', { light: transparent(foreground, 0.5), dark: transparent(foreground, 0.5), hc: transparent(foreground, 0.7) }, nls.localize('inputPlaceholderForeground', "Input box foreground color for placeholder text."));
181181

182182
export const inputValidationInfoBackground = registerColor('inputValidation.infoBackground', { dark: '#063B49', light: '#D6ECF2', hc: Color.black }, nls.localize('inputValidationInfoBackground', "Input validation background color for information severity."));
183+
export const inputValidationInfoForeground = registerColor('inputValidation.infoForeground', { dark: null, light: null, hc: null }, nls.localize('inputValidationInfoForeground', "Input validation foreground color for information severity."));
183184
export const inputValidationInfoBorder = registerColor('inputValidation.infoBorder', { dark: '#007acc', light: '#007acc', hc: contrastBorder }, nls.localize('inputValidationInfoBorder', "Input validation border color for information severity."));
184185
export const inputValidationWarningBackground = registerColor('inputValidation.warningBackground', { dark: '#352A05', light: '#F6F5D2', hc: Color.black }, nls.localize('inputValidationWarningBackground', "Input validation background color for warning severity."));
186+
export const inputValidationWarningForeground = registerColor('inputValidation.warningForeground', { dark: null, light: null, hc: null }, nls.localize('inputValidationWarningForeground', "Input validation foreground color for warning severity."));
185187
export const inputValidationWarningBorder = registerColor('inputValidation.warningBorder', { dark: '#B89500', light: '#B89500', hc: contrastBorder }, nls.localize('inputValidationWarningBorder', "Input validation border color for warning severity."));
186188
export const inputValidationErrorBackground = registerColor('inputValidation.errorBackground', { dark: '#5A1D1D', light: '#F2DEDE', hc: Color.black }, nls.localize('inputValidationErrorBackground', "Input validation background color for error severity."));
189+
export const inputValidationErrorForeground = registerColor('inputValidation.errorForeground', { dark: null, light: null, hc: null }, nls.localize('inputValidationErrorForeground', "Input validation foreground color for error severity."));
187190
export const inputValidationErrorBorder = registerColor('inputValidation.errorBorder', { dark: '#BE1100', light: '#BE1100', hc: contrastBorder }, nls.localize('inputValidationErrorBorder', "Input validation border color for error severity."));
188191

189192
export const selectBackground = registerColor('dropdown.background', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('dropdownBackground', "Dropdown background."));

0 commit comments

Comments
 (0)