Skip to content

Commit 8ebaa0c

Browse files
rebornixrebornix
authored
Merge pull request microsoft#97207 from microsoft/misolori/issue97204
Add active toggle foreground color tokens
2 parents fbdc028 + 45a80ba commit 8ebaa0c

11 files changed

Lines changed: 50 additions & 7 deletions

File tree

‎src/vs/base/browser/ui/checkbox/checkbox.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface ICheckboxOpts extends ICheckboxStyles {
2323

2424
export interface ICheckboxStyles {
2525
inputActiveOptionBorder?: Color;
26+
inputActiveOptionForeground?: Color;
2627
inputActiveOptionBackground?: Color;
2728
}
2829

@@ -34,6 +35,7 @@ export interface ISimpleCheckboxStyles {
3435

3536
const defaultOpts = {
3637
inputActiveOptionBorder: Color.fromHex('#007ACC00'),
38+
inputActiveOptionForeground: Color.fromHex('#FFFFFF'),
3739
inputActiveOptionBackground: Color.fromHex('#0E639C50')
3840
};
3941

@@ -170,6 +172,9 @@ export class Checkbox extends Widget {
170172
if (styles.inputActiveOptionBorder) {
171173
this._opts.inputActiveOptionBorder = styles.inputActiveOptionBorder;
172174
}
175+
if (styles.inputActiveOptionForeground) {
176+
this._opts.inputActiveOptionForeground = styles.inputActiveOptionForeground;
177+
}
173178
if (styles.inputActiveOptionBackground) {
174179
this._opts.inputActiveOptionBackground = styles.inputActiveOptionBackground;
175180
}
@@ -179,6 +184,7 @@ export class Checkbox extends Widget {
179184
protected applyStyles(): void {
180185
if (this.domNode) {
181186
this.domNode.style.borderColor = this._checked && this._opts.inputActiveOptionBorder ? this._opts.inputActiveOptionBorder.toString() : 'transparent';
187+
this.domNode.style.color = this._checked && this._opts.inputActiveOptionForeground ? this._opts.inputActiveOptionForeground.toString() : 'inherit';
182188
this.domNode.style.backgroundColor = this._checked && this._opts.inputActiveOptionBackground ? this._opts.inputActiveOptionBackground.toString() : 'transparent';
183189
}
184190
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export interface IFindInputOptions extends IFindInputStyles {
3535

3636
export interface IFindInputStyles extends IInputBoxStyles {
3737
inputActiveOptionBorder?: Color;
38+
inputActiveOptionForeground?: Color;
3839
inputActiveOptionBackground?: Color;
3940
}
4041

@@ -51,6 +52,7 @@ export class FindInput extends Widget {
5152
private fixFocusOnOptionClickEnabled = true;
5253

5354
private inputActiveOptionBorder?: Color;
55+
private inputActiveOptionForeground?: Color;
5456
private inputActiveOptionBackground?: Color;
5557
private inputBackground?: Color;
5658
private inputForeground?: Color;
@@ -101,6 +103,7 @@ export class FindInput extends Widget {
101103
this.label = options.label || NLS_DEFAULT_LABEL;
102104

103105
this.inputActiveOptionBorder = options.inputActiveOptionBorder;
106+
this.inputActiveOptionForeground = options.inputActiveOptionForeground;
104107
this.inputActiveOptionBackground = options.inputActiveOptionBackground;
105108
this.inputBackground = options.inputBackground;
106109
this.inputForeground = options.inputForeground;
@@ -155,6 +158,7 @@ export class FindInput extends Widget {
155158
appendTitle: appendRegexLabel,
156159
isChecked: false,
157160
inputActiveOptionBorder: this.inputActiveOptionBorder,
161+
inputActiveOptionForeground: this.inputActiveOptionForeground,
158162
inputActiveOptionBackground: this.inputActiveOptionBackground
159163
}));
160164
this._register(this.regex.onChange(viaKeyboard => {
@@ -172,6 +176,7 @@ export class FindInput extends Widget {
172176
appendTitle: appendWholeWordsLabel,
173177
isChecked: false,
174178
inputActiveOptionBorder: this.inputActiveOptionBorder,
179+
inputActiveOptionForeground: this.inputActiveOptionForeground,
175180
inputActiveOptionBackground: this.inputActiveOptionBackground
176181
}));
177182
this._register(this.wholeWords.onChange(viaKeyboard => {
@@ -186,6 +191,7 @@ export class FindInput extends Widget {
186191
appendTitle: appendCaseSensitiveLabel,
187192
isChecked: false,
188193
inputActiveOptionBorder: this.inputActiveOptionBorder,
194+
inputActiveOptionForeground: this.inputActiveOptionForeground,
189195
inputActiveOptionBackground: this.inputActiveOptionBackground
190196
}));
191197
this._register(this.caseSensitive.onChange(viaKeyboard => {
@@ -301,6 +307,7 @@ export class FindInput extends Widget {
301307

302308
public style(styles: IFindInputStyles): void {
303309
this.inputActiveOptionBorder = styles.inputActiveOptionBorder;
310+
this.inputActiveOptionForeground = styles.inputActiveOptionForeground;
304311
this.inputActiveOptionBackground = styles.inputActiveOptionBackground;
305312
this.inputBackground = styles.inputBackground;
306313
this.inputForeground = styles.inputForeground;
@@ -323,6 +330,7 @@ export class FindInput extends Widget {
323330
if (this.domNode) {
324331
const checkBoxStyles: ICheckboxStyles = {
325332
inputActiveOptionBorder: this.inputActiveOptionBorder,
333+
inputActiveOptionForeground: this.inputActiveOptionForeground,
326334
inputActiveOptionBackground: this.inputActiveOptionBackground,
327335
};
328336
this.regex.style(checkBoxStyles);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface IFindInputCheckboxOpts {
1212
readonly appendTitle: string;
1313
readonly isChecked: boolean;
1414
readonly inputActiveOptionBorder?: Color;
15+
readonly inputActiveOptionForeground?: Color;
1516
readonly inputActiveOptionBackground?: Color;
1617
}
1718

@@ -26,6 +27,7 @@ export class CaseSensitiveCheckbox extends Checkbox {
2627
title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + opts.appendTitle,
2728
isChecked: opts.isChecked,
2829
inputActiveOptionBorder: opts.inputActiveOptionBorder,
30+
inputActiveOptionForeground: opts.inputActiveOptionForeground,
2931
inputActiveOptionBackground: opts.inputActiveOptionBackground
3032
});
3133
}
@@ -38,6 +40,7 @@ export class WholeWordsCheckbox extends Checkbox {
3840
title: NLS_WHOLE_WORD_CHECKBOX_LABEL + opts.appendTitle,
3941
isChecked: opts.isChecked,
4042
inputActiveOptionBorder: opts.inputActiveOptionBorder,
43+
inputActiveOptionForeground: opts.inputActiveOptionForeground,
4144
inputActiveOptionBackground: opts.inputActiveOptionBackground
4245
});
4346
}
@@ -50,6 +53,7 @@ export class RegexCheckbox extends Checkbox {
5053
title: NLS_REGEX_CHECKBOX_LABEL + opts.appendTitle,
5154
isChecked: opts.isChecked,
5255
inputActiveOptionBorder: opts.inputActiveOptionBorder,
56+
inputActiveOptionForeground: opts.inputActiveOptionForeground,
5357
inputActiveOptionBackground: opts.inputActiveOptionBackground
5458
});
5559
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface IReplaceInputOptions extends IReplaceInputStyles {
3333

3434
export interface IReplaceInputStyles extends IInputBoxStyles {
3535
inputActiveOptionBorder?: Color;
36+
inputActiveOptionForeground?: Color;
3637
inputActiveOptionBackground?: Color;
3738
}
3839

@@ -47,6 +48,7 @@ export class PreserveCaseCheckbox extends Checkbox {
4748
title: NLS_PRESERVE_CASE_LABEL + opts.appendTitle,
4849
isChecked: opts.isChecked,
4950
inputActiveOptionBorder: opts.inputActiveOptionBorder,
51+
inputActiveOptionForeground: opts.inputActiveOptionForeground,
5052
inputActiveOptionBackground: opts.inputActiveOptionBackground
5153
});
5254
}
@@ -63,6 +65,7 @@ export class ReplaceInput extends Widget {
6365
private fixFocusOnOptionClickEnabled = true;
6466

6567
private inputActiveOptionBorder?: Color;
68+
private inputActiveOptionForeground?: Color;
6669
private inputActiveOptionBackground?: Color;
6770
private inputBackground?: Color;
6871
private inputForeground?: Color;
@@ -109,6 +112,7 @@ export class ReplaceInput extends Widget {
109112
this.label = options.label || NLS_DEFAULT_LABEL;
110113

111114
this.inputActiveOptionBorder = options.inputActiveOptionBorder;
115+
this.inputActiveOptionForeground = options.inputActiveOptionForeground;
112116
this.inputActiveOptionBackground = options.inputActiveOptionBackground;
113117
this.inputBackground = options.inputBackground;
114118
this.inputForeground = options.inputForeground;
@@ -160,6 +164,7 @@ export class ReplaceInput extends Widget {
160164
appendTitle: '',
161165
isChecked: false,
162166
inputActiveOptionBorder: this.inputActiveOptionBorder,
167+
inputActiveOptionForeground: this.inputActiveOptionForeground,
163168
inputActiveOptionBackground: this.inputActiveOptionBackground,
164169
}));
165170
this._register(this.preserveCase.onChange(viaKeyboard => {
@@ -271,6 +276,7 @@ export class ReplaceInput extends Widget {
271276

272277
public style(styles: IReplaceInputStyles): void {
273278
this.inputActiveOptionBorder = styles.inputActiveOptionBorder;
279+
this.inputActiveOptionForeground = styles.inputActiveOptionForeground;
274280
this.inputActiveOptionBackground = styles.inputActiveOptionBackground;
275281
this.inputBackground = styles.inputBackground;
276282
this.inputForeground = styles.inputForeground;
@@ -293,6 +299,7 @@ export class ReplaceInput extends Widget {
293299
if (this.domNode) {
294300
const checkBoxStyles: ICheckboxStyles = {
295301
inputActiveOptionBorder: this.inputActiveOptionBorder,
302+
inputActiveOptionForeground: this.inputActiveOptionForeground,
296303
inputActiveOptionBackground: this.inputActiveOptionBackground,
297304
};
298305
this.preserveCase.style(checkBoxStyles);

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, OverlayWidgetPosit
1111
import { FIND_IDS } from 'vs/editor/contrib/find/findModel';
1212
import { FindReplaceState } from 'vs/editor/contrib/find/findState';
1313
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
14-
import { contrastBorder, editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry';
14+
import { contrastBorder, editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, widgetShadow, editorWidgetForeground, inputActiveOptionForeground } from 'vs/platform/theme/common/colorRegistry';
1515
import { IColorTheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
1616

1717
export class FindOptionsWidget extends Widget implements IOverlayWidget {
@@ -47,12 +47,14 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
4747
this._domNode.setAttribute('aria-hidden', 'true');
4848

4949
const inputActiveOptionBorderColor = themeService.getColorTheme().getColor(inputActiveOptionBorder);
50+
const inputActiveOptionForegroundColor = themeService.getColorTheme().getColor(inputActiveOptionForeground);
5051
const inputActiveOptionBackgroundColor = themeService.getColorTheme().getColor(inputActiveOptionBackground);
5152

5253
this.caseSensitive = this._register(new CaseSensitiveCheckbox({
5354
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleCaseSensitiveCommand),
5455
isChecked: this._state.matchCase,
5556
inputActiveOptionBorder: inputActiveOptionBorderColor,
57+
inputActiveOptionForeground: inputActiveOptionForegroundColor,
5658
inputActiveOptionBackground: inputActiveOptionBackgroundColor
5759
}));
5860
this._domNode.appendChild(this.caseSensitive.domNode);
@@ -66,6 +68,7 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
6668
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleWholeWordCommand),
6769
isChecked: this._state.wholeWord,
6870
inputActiveOptionBorder: inputActiveOptionBorderColor,
71+
inputActiveOptionForeground: inputActiveOptionForegroundColor,
6972
inputActiveOptionBackground: inputActiveOptionBackgroundColor
7073
}));
7174
this._domNode.appendChild(this.wholeWords.domNode);
@@ -79,6 +82,7 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
7982
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleRegexCommand),
8083
isChecked: this._state.isRegex,
8184
inputActiveOptionBorder: inputActiveOptionBorderColor,
85+
inputActiveOptionForeground: inputActiveOptionForegroundColor,
8286
inputActiveOptionBackground: inputActiveOptionBackgroundColor
8387
}));
8488
this._domNode.appendChild(this.regex.domNode);
@@ -185,6 +189,7 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
185189
private _applyTheme(theme: IColorTheme) {
186190
let inputStyles = {
187191
inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
192+
inputActiveOptionForeground: theme.getColor(inputActiveOptionForeground),
188193
inputActiveOptionBackground: theme.getColor(inputActiveOptionBackground)
189194
};
190195
this.caseSensitive.style(inputStyles);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { CONTEXT_FIND_INPUT_FOCUSED, CONTEXT_REPLACE_INPUT_FOCUSED, FIND_IDS, MA
3030
import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/findState';
3131
import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
3232
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
33-
import { contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetResizeBorder, errorForeground, inputActiveOptionBorder, inputActiveOptionBackground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground, focusBorder } from 'vs/platform/theme/common/colorRegistry';
33+
import { contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetResizeBorder, errorForeground, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground, focusBorder } from 'vs/platform/theme/common/colorRegistry';
3434
import { IColorTheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
3535
import { ContextScopedFindInput, ContextScopedReplaceInput } from 'vs/platform/browser/contextScopedHistoryWidget';
3636
import { AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility';
@@ -662,6 +662,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IVerticalSashL
662662
let inputStyles: IFindInputStyles = {
663663
inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
664664
inputActiveOptionBackground: theme.getColor(inputActiveOptionBackground),
665+
inputActiveOptionForeground: theme.getColor(inputActiveOptionForeground),
665666
inputBackground: theme.getColor(inputBackground),
666667
inputForeground: theme.getColor(inputForeground),
667668
inputBorder: theme.getColor(inputBorder),

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,8 @@ export const inputBackground = registerColor('input.background', { dark: '#3C3C3
202202
export const inputForeground = registerColor('input.foreground', { dark: foreground, light: foreground, hc: foreground }, nls.localize('inputBoxForeground', "Input box foreground."));
203203
export const inputBorder = registerColor('input.border', { dark: null, light: null, hc: contrastBorder }, nls.localize('inputBoxBorder', "Input box border."));
204204
export const inputActiveOptionBorder = registerColor('inputOption.activeBorder', { dark: '#007ACC00', light: '#007ACC00', hc: contrastBorder }, nls.localize('inputBoxActiveOptionBorder', "Border color of activated options in input fields."));
205-
export const inputActiveOptionBackground = registerColor('inputOption.activeBackground', { dark: transparent(focusBorder, 0.5), light: transparent(focusBorder, 0.3), hc: null }, nls.localize('inputOption.activeBackground', "Background color of activated options in input fields."));
205+
export const inputActiveOptionBackground = registerColor('inputOption.activeBackground', { dark: transparent(focusBorder, 0.7), light: transparent(focusBorder, 0.5), hc: Color.transparent }, nls.localize('inputOption.activeBackground', "Background color of activated options in input fields."));
206+
export const inputActiveOptionForeground = registerColor('inputOption.activeForeground', { dark: '#FFFFFF', light: Color.black, hc: null }, nls.localize('inputOption.activeForeground', "Foreground color of activated options in input fields."));
206207
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."));
207208

208209
export const inputValidationInfoBackground = registerColor('inputValidation.infoBackground', { dark: '#063B49', light: '#D6ECF2', hc: Color.black }, nls.localize('inputValidationInfoBackground', "Input validation background color for information severity."));

0 commit comments

Comments
 (0)