theming - status bar items

src/vs/workbench/browser/parts/editor/editorGroupsControl.ts

@@ -1145,14 +1145,15 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 				const containers = $this.visibleEditors.filter(e => !!e).map(e => e.getContainer());
 				containers.forEach((container, index) => {
 					if (container && DOM.isAncestor(target, container.getHTMLElement())) {
+						const useOutline = $this.isHighContrastTheme;
 						overlay = $('div').style({
 							top: $this.tabOptions.showTabs ? `${EditorGroupsControl.EDITOR_TITLE_HEIGHT}px` : 0,
 							height: $this.tabOptions.showTabs ? `calc(100% - ${EditorGroupsControl.EDITOR_TITLE_HEIGHT}px` : '100%',
 							backgroundColor: $this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND),
-							outlineColor: $this.isHighContrastTheme ? $this.getColor(highContrastOutline) : null,
-							outlineOffset: $this.isHighContrastTheme ? '-2px' : null,
-							outlineStyle: $this.isHighContrastTheme ? 'dashed' : null,
-							outlineWidth: $this.isHighContrastTheme ? '2px' : null
+							outlineColor: useOutline ? $this.getColor(highContrastOutline) : null,
+							outlineOffset: useOutline ? '-2px' : null,
+							outlineStyle: useOutline ? 'dashed' : null,
+							outlineWidth: useOutline ? '2px' : null
 						}).id(overlayId);
 
 						overlay.appendTo(container);

src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css

@@ -55,34 +55,4 @@
 
 .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) {
 	text-decoration: none;
-}
-
-/* TODO@theme */
-
-.hc-black .monaco-workbench > .part.statusbar {
-	border-top-width: 1px;
-	border-top-style: solid;
-	border-top-color: #6FC3DF;
-}
-
-.vs .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled),
-.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled),
-.hc-black .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) {
-	background-color: rgba(255, 255, 255, 0.12);
-}
-
-.vs .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled),
-.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled),
-.hc-black .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled) {
-	background-color: rgba(255, 255, 255, 0.18);
-}
-
-.vs .monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info,
-.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info {
-	background-color: #388a34;
-}
-
-.vs .monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled),
-.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled) {
-	background-color: #369432;
 }
\ No newline at end of file

src/vs/workbench/browser/parts/statusbar/statusbarPart.ts

@@ -26,9 +26,10 @@ import { IStatusbarService, IStatusbarEntry } from 'vs/platform/statusbar/common
 import { getCodeEditor } from 'vs/editor/common/services/codeEditorService';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { Action } from 'vs/base/common/actions';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND } from 'vs/workbench/common/theme';
+import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND, STATUS_BAR_INFO_ITEM_BACKGROUND, STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND, STATUS_BAR_ITEM_HOVER_BACKGROUND, STATUS_BAR_ITEM_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
+import { highContrastBorder } from 'vs/platform/theme/common/colorRegistry';
 
 export class StatusbarPart extends Part implements IStatusbarService {
 
@@ -135,6 +136,11 @@ export class StatusbarPart extends Part implements IStatusbarService {
 
 		container.style('color', this.getColor(STATUS_BAR_FOREGROUND));
 		container.style('background-color', this.getColor(this.contextService.hasWorkspace() ? STATUS_BAR_BACKGROUND : STATUS_BAR_NO_FOLDER_BACKGROUND));
+
+		const useBorder = this.isHighContrastTheme;
+		container.style('border-top-width', useBorder ? '1px' : null);
+		container.style('border-top-style', useBorder ? 'solid' : null);
+		container.style('border-top-color', useBorder ? this.getColor(highContrastBorder) : null);
 	}
 
 	private doCreateStatusItem(alignment: StatusbarAlignment, priority: number = 0): HTMLElement {
@@ -309,4 +315,26 @@ class ManageExtensionAction extends Action {
 	public run(extensionId: string): TPromise<any> {
 		return this.commandService.executeCommand('_extensions.manage', extensionId);
 	}
-}
\ No newline at end of file
+}
+
+registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
+	const statusBarItemHoverBackground = theme.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND);
+	if (statusBarItemHoverBackground) {
+		collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) { background-color: ${statusBarItemHoverBackground}; }`);
+	}
+
+	const statusBarItemActiveBackground = theme.getColor(STATUS_BAR_ITEM_ACTIVE_BACKGROUND);
+	if (statusBarItemActiveBackground) {
+		collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled) { background-color: ${statusBarItemActiveBackground}; }`);
+	}
+
+	const statusBarInfoItemBackground = theme.getColor(STATUS_BAR_INFO_ITEM_BACKGROUND);
+	if (statusBarInfoItemBackground) {
+		collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info { background-color: ${statusBarInfoItemBackground}; }`);
+	}
+
+	const statusBarInfoItemHoverBackground = theme.getColor(STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND);
+	if (statusBarInfoItemHoverBackground) {
+		collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled) { background-color: ${statusBarInfoItemHoverBackground}; }`);
+	}
+});
\ No newline at end of file

src/vs/workbench/common/theme.ts

@@ -124,6 +124,30 @@ export const STATUS_BAR_NO_FOLDER_BACKGROUND = registerColor('statusBarNoFolderB
 	hc: null
 }, nls.localize('statusBarNoFolderBackground', "Status bar background color when no folder is opened. The status bar is shown in the bottom of the window"));
 
+export const STATUS_BAR_ITEM_ACTIVE_BACKGROUND = registerColor('statusBarItemActiveBackground', {
+	dark: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18),
+	light: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18),
+	hc: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18)
+}, nls.localize('statusBarItemActiveBackground', "Status bar item background color when clicking. The status bar is shown in the bottom of the window"));
+
+export const STATUS_BAR_ITEM_HOVER_BACKGROUND = registerColor('statusBarItemHoverBackground', {
+	dark: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12),
+	light: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12),
+	hc: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12)
+}, nls.localize('statusBarItemHoverBackground', "Status bar item background color when hovering. The status bar is shown in the bottom of the window"));
+
+export const STATUS_BAR_INFO_ITEM_BACKGROUND = registerColor('statusBarInfoItemBackground', {
+	dark: '#388a34',
+	light: '#388a34',
+	hc: '#388a34'
+}, nls.localize('statusBarInfoItemBackground', "Status bar info item background color. The status bar is shown in the bottom of the window"));
+
+export const STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND = registerColor('statusBarInfoItemHoverBackground', {
+	dark: '#369432',
+	light: '#369432',
+	hc: '#369432'
+}, nls.localize('statusBarInfoItemHoverBackground', "Status bar info item background color when hovering. The status bar is shown in the bottom of the window"));
+
 /**
  * Base class for all themable workbench components.
  */