notifications - theme color tweaks

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

@@ -78,6 +78,11 @@
 	flex: 1; /* let the message always grow */
 }
 
+.monaco-workbench .notifications-list-container .notification-list-item .notification-list-item-message a:focus {
+	outline-width: 1px;
+	outline-style: solid;
+}
+
 .monaco-workbench .notifications-list-container .notification-list-item.expanded .notification-list-item-message {
 	white-space: normal;
 }

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

@@ -7,7 +7,7 @@
 
 import 'vs/css!./media/notificationsCenter';
 import 'vs/css!./media/notificationsActions';
-import { Themable, NOTIFICATIONS_BORDER, NOTIFICATIONS_CENTER_HEADER_FOREGROUND, NOTIFICATIONS_CENTER_HEADER_BACKGROUND } from 'vs/workbench/common/theme';
+import { Themable, NOTIFICATIONS_BORDER, NOTIFICATIONS_CENTER_HEADER_FOREGROUND, NOTIFICATIONS_CENTER_HEADER_BACKGROUND, NOTIFICATIONS_CENTER_BORDER } from 'vs/workbench/common/theme';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { INotificationsModel, INotificationChangeEvent, NotificationChangeType } from 'vs/workbench/common/notifications';
 import { Dimension } from 'vs/base/browser/builder';
@@ -221,6 +221,9 @@ export class NotificationsCenter extends Themable {
 			const widgetShadowColor = this.getColor(widgetShadow);
 			this.notificationsCenterContainer.style.boxShadow = widgetShadowColor ? `0 0px 8px ${widgetShadowColor}` : null;
 
+			const borderColor = this.getColor(NOTIFICATIONS_CENTER_BORDER);
+			this.notificationsCenterContainer.style.border = borderColor ? `1px solid ${borderColor}` : null;
+
 			const headerForeground = this.getColor(NOTIFICATIONS_CENTER_HEADER_FOREGROUND);
 			this.notificationsCenterHeader.style.color = headerForeground ? headerForeground.toString() : null;
 

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

@@ -12,7 +12,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { IListOptions } from 'vs/base/browser/ui/list/listWidget';
 import { Themable, NOTIFICATIONS_LINKS, NOTIFICATIONS_BACKGROUND, NOTIFICATIONS_FOREGROUND } from 'vs/workbench/common/theme';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, focusBorder } from 'vs/platform/theme/common/colorRegistry';
 import { INotificationViewItem } from 'vs/workbench/common/notifications';
 import { NotificationsListDelegate, NotificationRenderer } from 'vs/workbench/browser/parts/notifications/notificationsViewer';
 import { NotificationActionRunner } from 'vs/workbench/browser/parts/notifications/notificationsActions';
@@ -224,4 +224,12 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	if (linkColor) {
 		collector.addRule(`.monaco-workbench .notifications-list-container .notification-list-item .notification-list-item-message a { color: ${linkColor}; }`);
 	}
+
+	const focusOutline = theme.getColor(focusBorder);
+	if (focusOutline) {
+		collector.addRule(`
+		.monaco-workbench .notifications-list-container .notification-list-item .notification-list-item-message a:focus {
+			outline-color: ${focusOutline};
+		}`);
+	}
 });

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

@@ -14,7 +14,7 @@ import { NotificationsList } from 'vs/workbench/browser/parts/notifications/noti
 import { Dimension } from 'vs/base/browser/builder';
 import { once } from 'vs/base/common/event';
 import { IPartService, Parts } from 'vs/workbench/services/part/common/partService';
-import { Themable } from 'vs/workbench/common/theme';
+import { Themable, NOTIFICATIONS_TOAST_BORDER } from 'vs/workbench/common/theme';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { widgetShadow } from 'vs/platform/theme/common/colorRegistry';
 import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService';
@@ -324,6 +324,9 @@ export class NotificationsToasts extends Themable {
 		this.mapNotificationToToast.forEach(t => {
 			const widgetShadowColor = this.getColor(widgetShadow);
 			t.toast.style.boxShadow = widgetShadowColor ? `0 0px 8px ${widgetShadowColor}` : null;
+
+			const borderColor = this.getColor(NOTIFICATIONS_TOAST_BORDER);
+			t.toast.style.border = borderColor ? `1px solid ${borderColor}` : null;
 		});
 	}
 

src/vs/workbench/common/theme.ts

@@ -366,6 +366,18 @@ export const TITLE_BAR_BORDER = registerColor('titleBar.border', {
 
 // < --- Notifications --- >
 
+export const NOTIFICATIONS_CENTER_BORDER = registerColor('notificationsCenter.border', {
+	dark: null,
+	light: null,
+	hc: contrastBorder
+}, nls.localize('notificationsCenterBorder', "Notifications center border color. Notifications slide in from the bottom right of the window."));
+
+export const NOTIFICATIONS_TOAST_BORDER = registerColor('notificationsToast.border', {
+	dark: null,
+	light: null,
+	hc: contrastBorder
+}, nls.localize('notificationsToastBorder', "Notification toast border color. Notifications slide in from the bottom right of the window."));
+
 export const NOTIFICATIONS_FOREGROUND = registerColor('notifications.foreground', {
 	dark: null,
 	light: null,
@@ -378,12 +390,6 @@ export const NOTIFICATIONS_BACKGROUND = registerColor('notifications.background'
 	hc: editorWidgetBackground
 }, nls.localize('notificationsBackground', "Notifications background color. Notifications slide in from the bottom right 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_LINKS = registerColor('notificationLink.foreground', {
 	dark: textLinkForeground,
 	light: textLinkForeground,
@@ -399,9 +405,15 @@ export const NOTIFICATIONS_CENTER_HEADER_FOREGROUND = registerColor('notificatio
 export const NOTIFICATIONS_CENTER_HEADER_BACKGROUND = registerColor('notificationsCenterHeader.background', {
 	dark: lighten(NOTIFICATIONS_BACKGROUND, 0.3),
 	light: darken(NOTIFICATIONS_BACKGROUND, 0.05),
-	hc: null
+	hc: NOTIFICATIONS_BACKGROUND
 }, nls.localize('notificationsCenterHeaderBackground', "Notifications center header background color. Notifications slide in from the bottom right of the window."));
 
+export const NOTIFICATIONS_BORDER = registerColor('notifications.border', {
+	dark: NOTIFICATIONS_CENTER_HEADER_BACKGROUND,
+	light: NOTIFICATIONS_CENTER_HEADER_BACKGROUND,
+	hc: NOTIFICATIONS_CENTER_HEADER_BACKGROUND
+}, nls.localize('notificationsBorder', "Notifications border color separating from other notifications in the notifications center. Notifications slide in from the bottom right of the window."));
+
 /**
  * Base class for all themable workbench components.
  */