Add options to theme notification buttons and badges (#28471)

src/vs/workbench/common/theme.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import nls = require('vs/nls');
-import { registerColor, editorBackground, contrastBorder, transparent, badgeForeground, badgeBackground } from 'vs/platform/theme/common/colorRegistry';
+import { registerColor, editorBackground, contrastBorder, transparent, badgeForeground, badgeBackground, lighten, darken } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { Color } from 'vs/base/common/color';
@@ -306,6 +306,60 @@ export const NOTIFICATIONS_BACKGROUND = registerColor('notification.background',
 	hc: '#000000'
 }, nls.localize('notificationsBackground', "Notifications background color. Notifications slide in from the top of the window."));
 
+export const NOTIFICATIONS_BUTTON_BACKGROUND = registerColor('notification.buttonBackground', {
+	dark: '#0E639C',
+	light: '#007ACC',
+	hc: null
+}, nls.localize('notificationsButtonBackground', "Notifications button background color. Notifications slide in from the top of the window."));
+
+export const NOTIFICATIONS_BUTTON_HOVER_BACKGROUND = registerColor('notification.buttonHoverBackground', {
+	dark: lighten(NOTIFICATIONS_BUTTON_BACKGROUND, 0.2),
+	light: darken(NOTIFICATIONS_BUTTON_BACKGROUND, 0.2),
+	hc: null
+}, nls.localize('notificationsButtonHoverBackground', "Notifications button background color when hovering. Notifications slide in from the top of the window."));
+
+export const NOTIFICATIONS_BUTTON_FOREGROUND = registerColor('notification.buttonForeground', {
+	dark: Color.white,
+	light: Color.white,
+	hc: Color.white
+}, nls.localize('notificationsButtonForeground', "Notifications button foreground color. Notifications slide in from the top of the window."));
+
+export const NOTIFICATIONS_INFO_BACKGROUND = registerColor('notification.infoBackground', {
+	dark: '#007acc',
+	light: '#007acc',
+	hc: contrastBorder
+}, nls.localize('notificationsInfoBackground', "Notifications info background color. Notifications slide in from the top of the window."));
+
+export const NOTIFICATIONS_INFO_FOREGROUND = registerColor('notification.infoForeground', {
+	dark: NOTIFICATIONS_FOREGROUND,
+	light: NOTIFICATIONS_FOREGROUND,
+	hc: null
+}, nls.localize('notificationsInfoForeground', "Notifications info foreground color. Notifications slide in from the top of the window."));
+
+export const NOTIFICATIONS_WARNING_BACKGROUND = registerColor('notification.warningBackground', {
+	dark: '#B89500',
+	light: '#B89500',
+	hc: contrastBorder
+}, nls.localize('notificationsWarningBackground', "Notifications warning background color. Notifications slide in from the top of the window."));
+
+export const NOTIFICATIONS_WARNING_FOREGROUND = registerColor('notification.warningForeground', {
+	dark: NOTIFICATIONS_FOREGROUND,
+	light: NOTIFICATIONS_FOREGROUND,
+	hc: null
+}, nls.localize('notificationsWarningForeground', "Notifications warning foreground color. Notifications slide in from the top of the window."));
+
+export const NOTIFICATIONS_ERROR_BACKGROUND = registerColor('notification.errorBackground', {
+	dark: '#BE1100',
+	light: '#BE1100',
+	hc: contrastBorder
+}, nls.localize('notificationsErrorBackground', "Notifications error background color. Notifications slide in from the top of the window."));
+
+export const NOTIFICATIONS_ERROR_FOREGROUND = registerColor('notification.errorForeground', {
+	dark: NOTIFICATIONS_FOREGROUND,
+	light: NOTIFICATIONS_FOREGROUND,
+	hc: null
+}, nls.localize('notificationsErrorForeground', "Notifications error foreground color. Notifications slide in from the top of the window."));
+
 /**
  * Base class for all themable workbench components.
  */

src/vs/workbench/services/message/browser/messageList.ts

@@ -19,10 +19,10 @@ import { Action } from 'vs/base/common/actions';
 import htmlRenderer = require('vs/base/browser/htmlContentRenderer');
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import { NOTIFICATIONS_FOREGROUND, NOTIFICATIONS_BACKGROUND } from 'vs/workbench/common/theme';
+import { NOTIFICATIONS_FOREGROUND, NOTIFICATIONS_BACKGROUND, NOTIFICATIONS_BUTTON_BACKGROUND, NOTIFICATIONS_BUTTON_HOVER_BACKGROUND, NOTIFICATIONS_BUTTON_FOREGROUND, NOTIFICATIONS_INFO_BACKGROUND, NOTIFICATIONS_WARNING_BACKGROUND, NOTIFICATIONS_ERROR_BACKGROUND, NOTIFICATIONS_INFO_FOREGROUND, NOTIFICATIONS_WARNING_FOREGROUND, NOTIFICATIONS_ERROR_FOREGROUND } from 'vs/workbench/common/theme';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { contrastBorder, buttonBackground, buttonHoverBackground, widgetShadow, inputValidationErrorBorder, inputValidationWarningBorder, inputValidationInfoBorder } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { Color } from 'vs/base/common/color';
 
@@ -77,9 +77,13 @@ export class MessageList {
 	private widgetShadow = Color.fromHex('#000000');
 	private outlineBorder: Color;
 	private buttonBackground = Color.fromHex('#0E639C');
+	private buttonForeground = this.foreground;
 	private infoBackground = Color.fromHex('#007ACC');
+	private infoForeground = this.foreground;
 	private warningBackground = Color.fromHex('#B89500');
+	private warningForeground = this.foreground;
 	private errorBackground = Color.fromHex('#BE1100');
+	private errorForeground = this.foreground;
 
 	constructor(
 		container: HTMLElement,
@@ -106,12 +110,16 @@ export class MessageList {
 			this.foreground = theme.getColor(NOTIFICATIONS_FOREGROUND);
 			this.widgetShadow = theme.getColor(widgetShadow);
 			this.outlineBorder = theme.getColor(contrastBorder);
-			this.buttonBackground = theme.getColor(buttonBackground);
-			this.infoBackground = theme.getColor(inputValidationInfoBorder);
-			this.warningBackground = theme.getColor(inputValidationWarningBorder);
-			this.errorBackground = theme.getColor(inputValidationErrorBorder);
-
-			const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground);
+			this.buttonBackground = theme.getColor(NOTIFICATIONS_BUTTON_BACKGROUND);
+			this.buttonForeground = theme.getColor(NOTIFICATIONS_BUTTON_FOREGROUND);
+			this.infoBackground = theme.getColor(NOTIFICATIONS_INFO_BACKGROUND);
+			this.infoForeground = theme.getColor(NOTIFICATIONS_INFO_FOREGROUND);
+			this.warningBackground = theme.getColor(NOTIFICATIONS_WARNING_BACKGROUND);
+			this.warningForeground = theme.getColor(NOTIFICATIONS_WARNING_FOREGROUND);
+			this.errorBackground = theme.getColor(NOTIFICATIONS_ERROR_BACKGROUND);
+			this.errorForeground = theme.getColor(NOTIFICATIONS_ERROR_FOREGROUND);
+
+			const buttonHoverBackgroundColor = theme.getColor(NOTIFICATIONS_BUTTON_HOVER_BACKGROUND);
 			if (buttonHoverBackgroundColor) {
 				collector.addRule(`.global-message-list li.message-list-entry .actions-container .message-action .action-button:hover { background-color: ${buttonHoverBackgroundColor} !important; }`);
 			}
@@ -281,6 +289,7 @@ export class MessageList {
 						div.a({ class: 'action-button', tabindex: '0', role: 'button' })
 							.style('border-color', this.outlineBorder ? this.outlineBorder.toString() : null)
 							.style('background-color', this.buttonBackground ? this.buttonBackground.toString() : null)
+							.style('color', this.buttonForeground ? this.buttonForeground.toString() : null)
 							.text(action.label)
 							.on([DOM.EventType.CLICK, DOM.EventType.KEY_DOWN], e => {
 								if (e instanceof KeyboardEvent) {
@@ -317,9 +326,11 @@ export class MessageList {
 				const sev = message.severity;
 				const label = (sev === Severity.Error) ? nls.localize('error', "Error") : (sev === Severity.Warning) ? nls.localize('warning', "Warn") : nls.localize('info', "Info");
 				const color = (sev === Severity.Error) ? this.errorBackground : (sev === Severity.Warning) ? this.warningBackground : this.infoBackground;
+				const foregroundColor = (sev === Severity.Error) ? this.errorForeground : (sev === Severity.Warning) ? this.warningForeground : this.infoForeground;
 				const sevLabel = $().span({ class: `message-left-side severity ${sev === Severity.Error ? 'app-error' : sev === Severity.Warning ? 'app-warning' : 'app-info'}`, text: label });
 				sevLabel.style('border-color', this.outlineBorder ? this.outlineBorder.toString() : null);
 				sevLabel.style('background-color', color ? color.toString() : null);
+				sevLabel.style('color', foregroundColor ? foregroundColor.toString() : null);
 				sevLabel.appendTo(div);
 
 				// Error message
@@ -469,4 +480,4 @@ export class MessageList {
 	public dispose(): void {
 		this.toDispose = dispose(this.toDispose);
 	}
-}
\ No newline at end of file
+}