notifications - introduce theming

build/lib/i18n.resources.json

@@ -170,10 +170,6 @@
 			"name": "vs/workbench/services/mode",
 			"project": "vscode-workbench"
 		},
-		{
-			"name": "vs/workbench/services/notification",
-			"project": "vscode-workbench"
-		},
 		{
 			"name": "vs/workbench/services/progress",
 			"project": "vscode-workbench"

src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css

@@ -10,7 +10,6 @@
 	right: 8px;
 	bottom: 30px; /* above status bar */
 	display: none;
-	background: #323232; /* TODO@notification make themable */
 	overflow: hidden;
 }
 
@@ -31,7 +30,6 @@
 	padding: 10px 5px;
 	height: 100%;
 	box-sizing: border-box;
-	border-bottom: 1px solid #1E1E1E;
 }
 
 /** Notification: Main Row */

src/vs/workbench/browser/parts/notifications/notificationsCenter.ts

@@ -11,9 +11,9 @@ import { WorkbenchList } from 'vs/platform/list/browser/listService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IListOptions } from 'vs/base/browser/ui/list/listWidget';
 import { localize } from 'vs/nls';
-import { Themable } from 'vs/workbench/common/theme';
+import { Themable, NOTIFICATIONS_BORDER, NOTIFICATIONS_LINKS, NOTIFICATIONS_BACKGROUND, NOTIFICATIONS_FOREGROUND } from 'vs/workbench/common/theme';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { contrastBorder, widgetShadow, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
 import { INotificationViewItem, INotificationsModel, INotificationChangeEvent, NotificationChangeType } from 'vs/workbench/common/notifications';
 import { NotificationsListDelegate, NotificationRenderer } from 'vs/workbench/browser/parts/notifications/notificationsViewer';
 import { NotificationActionRunner } from 'vs/workbench/browser/parts/notifications/notificationsActions';
@@ -184,6 +184,12 @@ export class NotificationsCenter extends Themable {
 
 	protected updateStyles(): void {
 		if (this.listContainer) {
+			const foreground = this.getColor(NOTIFICATIONS_FOREGROUND);
+			this.listContainer.style.color = foreground ? foreground.toString() : null;
+
+			const background = this.getColor(NOTIFICATIONS_BACKGROUND);
+			this.listContainer.style.background = background ? background.toString() : null;
+
 			const outlineColor = this.getColor(contrastBorder);
 			this.listContainer.style.outlineColor = outlineColor ? outlineColor.toString() : null;
 
@@ -238,8 +244,13 @@ export class NotificationsCenter extends Themable {
 }
 
 registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
-	const linkColor = theme.getColor(textLinkForeground);
+	const linkColor = theme.getColor(NOTIFICATIONS_LINKS);
 	if (linkColor) {
 		collector.addRule(`.monaco-workbench > .notifications-list-container .notification-list-item .notification-list-item-message a { color: ${linkColor}; }`);
 	}
+
+	const notificationBorderColor = theme.getColor(NOTIFICATIONS_BORDER);
+	if (notificationBorderColor) {
+		collector.addRule(`.monaco-workbench > .notifications-list-container .notification-list-item { border-bottom: 1px solid ${notificationBorderColor}; }`);
+	}
 });

src/vs/workbench/common/theme.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import nls = require('vs/nls');
-import { registerColor, editorBackground, contrastBorder, transparent, lighten, darken } from 'vs/platform/theme/common/colorRegistry';
+import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground } 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';
@@ -366,71 +366,29 @@ export const TITLE_BAR_BORDER = registerColor('titleBar.border', {
 
 // < --- Notifications --- >
 
-export const NOTIFICATIONS_FOREGROUND = registerColor('notification.foreground', {
-	dark: '#EEEEEE',
-	light: '#EEEEEE',
-	hc: '#FFFFFF'
-}, nls.localize('notificationsForeground', "Notifications foreground color. Notifications slide in from the top of the window."));
-
-export const NOTIFICATIONS_BACKGROUND = registerColor('notification.background', {
-	dark: '#333333',
-	light: '#2C2C2C',
-	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,
+export const NOTIFICATIONS_FOREGROUND = registerColor('notifications.foreground', {
+	dark: null,
+	light: null,
 	hc: null
-}, nls.localize('notificationsInfoForeground', "Notifications info foreground color. Notifications slide in from the top of the window."));
+}, nls.localize('notificationsForeground', "Notifications foreground color. Notifications slide in from the bottom right 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_BACKGROUND = registerColor('notifications.background', {
+	dark: editorWidgetBackground,
+	light: editorWidgetBackground,
+	hc: editorWidgetBackground
+}, nls.localize('notificationsBackground', "Notifications background color. Notifications slide in from the bottom right 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_BORDER = registerColor('notifications.border', {
+	dark: editorBackground,
+	light: editorBackground,
+	hc: editorBackground
+}, nls.localize('notificationsBorder', "Notifications border color. Notifications slide in from the bottom right 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."));
+export const NOTIFICATIONS_LINKS = registerColor('notificationLink.foreground', {
+	dark: textLinkForeground,
+	light: textLinkForeground,
+	hc: textLinkForeground
+}, nls.localize('notificationsLink', "Notification links foreground color. Notifications slide in from the bottom right of the window."));
 
 /**
  * Base class for all themable workbench components.