implement styler for infobutton (#14396)

* implement styler for infobutton

* comments

* one more comment
This commit is contained in:
Alan Ren
2021-02-23 13:28:48 -08:00
committed by GitHub
parent 948bb5bc34
commit 561242a0d9
6 changed files with 76 additions and 58 deletions

View File

@@ -3,7 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { registerColor } from 'vs/platform/theme/common/colorRegistry';
import { contrastBorder, registerColor } from 'vs/platform/theme/common/colorRegistry';
import { Color, RGBA } from 'vs/base/common/color';
import * as nls from 'vs/nls';
@@ -67,8 +67,13 @@ export const notebookFindMatchHighlight = registerColor('notebook.findMatchHighl
export const notebookFindRangeHighlight = registerColor('notebook.findRangeHighlightBackground', { dark: '#FFA500', light: '#FFA500', hc: null }, nls.localize('notebookFindRangeHighlight', "Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true);
// Info Box
export const InfoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
export const InfoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
export const InfoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hc: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
export const InfoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hc: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));
export const infoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information."));
export const infoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning."));
export const infoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hc: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error."));
export const infoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hc: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success."));
// Info Button
export const infoButtonForeground = registerColor('infoButton.foreground', { dark: '#FFFFFF', light: '#000000', hc: '#FFFFFF' }, nls.localize('infoButton.foreground', "Info button foreground color."));
export const infoButtonBackground = registerColor('infoButton.background', { dark: '#1B1A19', light: '#FFFFFF', hc: '#000000' }, nls.localize('infoButton.background', "Info button background color."));
export const infoButtonBorder = registerColor('infoButton.border', { dark: '#1B1A19', light: '#FFFFFF', hc: contrastBorder }, nls.localize('infoButton.border', "Info button border color."));
export const infoButtonHoverBackground = registerColor('infoButton.hoverBackground', { dark: '#282625', light: '#F3F2F1', hc: '#000000' }, nls.localize('infoButton.hoverBackground', "Info button hover background color."));

View File

@@ -299,12 +299,30 @@ export interface IInfoBoxStyleOverrides {
}
export const defaultInfoBoxStyles: IInfoBoxStyleOverrides = {
informationBackground: sqlcr.InfoBoxInformationBackground,
warningBackground: sqlcr.InfoBoxWarningBackground,
errorBackground: sqlcr.InfoBoxErrorBackground,
successBackground: sqlcr.InfoBoxSuccessBackground
informationBackground: sqlcr.infoBoxInformationBackground,
warningBackground: sqlcr.infoBoxWarningBackground,
errorBackground: sqlcr.infoBoxErrorBackground,
successBackground: sqlcr.infoBoxSuccessBackground
};
export function attachInfoBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInfoBoxStyleOverrides): IDisposable {
return attachStyler(themeService, { ...defaultInfoBoxStyles, ...style }, widget);
}
export interface IInfoButtonStyleOverrides {
buttonBackground: cr.ColorIdentifier,
buttonForeground: cr.ColorIdentifier,
buttonBorder: cr.ColorIdentifier,
buttonHoverBackground: cr.ColorIdentifier
}
export const defaultInfoButtonStyles: IInfoButtonStyleOverrides = {
buttonBackground: sqlcr.infoButtonBackground,
buttonForeground: sqlcr.infoButtonForeground,
buttonBorder: sqlcr.infoButtonBorder,
buttonHoverBackground: sqlcr.infoButtonHoverBackground
};
export function attachInfoButtonStyler(widget: IThemable, themeService: IThemeService, style?: IInfoButtonStyleOverrides): IDisposable {
return attachStyler(themeService, { ...defaultInfoButtonStyles, ...style }, widget);
}