CompositeBar: colors

src/vs/workbench/browser/parts/activitybar/activitybarActions.ts

@@ -21,8 +21,7 @@ import { activeContrastBorder, focusBorder } from 'vs/platform/theme/common/colo
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import { ACTIVITY_BAR_FOREGROUND } from 'vs/workbench/common/theme';
-import { ActivityAction, ActivityActionItem } from 'vs/workbench/browser/parts/compositebar/compositeBarActions';
+import { ActivityAction, ActivityActionItem, ICompositeBarColors } from 'vs/workbench/browser/parts/compositebar/compositeBarActions';
 
 export class ViewletActivityAction extends ActivityAction {
 
@@ -96,10 +95,11 @@ export class GlobalActivityActionItem extends ActivityActionItem {
 
 	constructor(
 		action: GlobalActivityAction,
+		colors: ICompositeBarColors,
 		@IThemeService themeService: IThemeService,
 		@IContextMenuService protected contextMenuService: IContextMenuService
 	) {
-		super(action, { draggable: false, backgroundColor: ACTIVITY_BAR_FOREGROUND }, themeService);
+		super(action, { draggable: false, colors }, themeService);
 	}
 
 	public render(container: HTMLElement): void {

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -27,7 +27,7 @@ import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { dispose, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
 import { ToggleActivityBarVisibilityAction } from 'vs/workbench/browser/actions/toggleActivityBarVisibility';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND } from 'vs/workbench/common/theme';
+import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { CompositeBar } from 'vs/workbench/browser/parts/compositebar/compositeBar';
 import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositebar/compositeBarActions';
@@ -35,6 +35,12 @@ import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/composit
 export class ActivitybarPart extends Part {
 
 	private static readonly PINNED_VIEWLETS = 'workbench.activity.pinnedViewlets';
+	private static COLORS = {
+		backgroundColor: ACTIVITY_BAR_FOREGROUND,
+		badgeBackground: ACTIVITY_BAR_BADGE_BACKGROUND,
+		badgeForeground: ACTIVITY_BAR_BADGE_FOREGROUND,
+		dragAndDropBackground: ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND
+	};
 
 	public _serviceBrand: any;
 
@@ -69,7 +75,7 @@ export class ActivitybarPart extends Part {
 			getOnCompositeClickAction: (compositeId: string) => this.instantiationService.createInstance(ToggleViewletAction, this.viewletService.getViewlet(compositeId)),
 			getDefaultCompositeId: () => this.viewletService.getDefaultViewletId(),
 			hidePart: () => this.partService.setSideBarHidden(true),
-			backgroundColor: ACTIVITY_BAR_FOREGROUND
+			colors: ActivitybarPart.COLORS
 		});
 		this.registerListeners();
 	}
@@ -161,7 +167,7 @@ export class ActivitybarPart extends Part {
 			.map(a => new GlobalActivityAction(a));
 
 		this.globalActionBar = new ActionBar(container, {
-			actionItemProvider: a => this.instantiationService.createInstance(GlobalActivityActionItem, a),
+			actionItemProvider: a => this.instantiationService.createInstance(GlobalActivityActionItem, a, ActivitybarPart.COLORS),
 			orientation: ActionsOrientation.VERTICAL,
 			ariaLabel: nls.localize('globalActions', "Global Actions"),
 			animated: false

src/vs/workbench/browser/parts/compositebar/compositeBar.ts

@@ -17,7 +17,7 @@ import { IStorageService, StorageScope } from 'vs/platform/storage/common/storag
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ActionBar, IActionItem, ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 import Event, { Emitter } from 'vs/base/common/event';
-import { CompositeActionItem, CompositeOverflowActivityAction, ICompositeActivity, CompositeOverflowActivityActionItem, ActivityAction, ICompositeBar } from 'vs/workbench/browser/parts/compositebar/compositeBarActions';
+import { CompositeActionItem, CompositeOverflowActivityAction, ICompositeActivity, CompositeOverflowActivityActionItem, ActivityAction, ICompositeBar, ICompositeBarColors } from 'vs/workbench/browser/parts/compositebar/compositeBarActions';
 import { TPromise } from 'vs/base/common/winjs.base';
 
 export interface ICompositeBarOptions {
@@ -25,7 +25,7 @@ export interface ICompositeBarOptions {
 	storageId: string;
 	orientation: ActionsOrientation;
 	composites: { id: string, name: string }[];
-	backgroundColor: string;
+	colors: ICompositeBarColors;
 	getActivityAction: (compositeId: string) => ActivityAction;
 	getCompositePinnedAction: (compositeId: string) => Action;
 	getOnCompositeClickAction: (compositeId: string) => Action;
@@ -283,7 +283,7 @@ export class CompositeBar implements ICompositeBar {
 				() => this.activeCompositeId,
 				(compositeId: string) => this.compositeIdToActivityStack[compositeId] && this.compositeIdToActivityStack[compositeId][0].badge,
 				this.options.getOnCompositeClickAction,
-				this.options.backgroundColor
+				this.options.colors
 			);
 
 			this.compositeSwitcherBar.push(this.compositeOverflowAction, { label: false, icon: true });
@@ -327,7 +327,7 @@ export class CompositeBar implements ICompositeBar {
 
 		const compositeActivityAction = this.options.getActivityAction(compositeId);
 		const pinnedAction = this.options.getCompositePinnedAction(compositeId);
-		this.compositeIdToActionItems[compositeId] = this.instantiationService.createInstance(CompositeActionItem, compositeActivityAction, pinnedAction, this, this.options.backgroundColor);
+		this.compositeIdToActionItems[compositeId] = this.instantiationService.createInstance(CompositeActionItem, compositeActivityAction, pinnedAction, this.options.colors, this);
 		this.compositeIdToActions[compositeId] = compositeActivityAction;
 
 		return compositeActivityAction;

src/vs/workbench/browser/parts/compositebar/compositeBarActions.ts

@@ -18,7 +18,6 @@ import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { TextBadge, NumberBadge, IBadge, IconBadge, ProgressBadge } from 'vs/workbench/services/activity/common/activity';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_BADGE_BACKGROUND } from 'vs/workbench/common/theme';
 import { DelayedDragHandler } from 'vs/base/browser/dnd';
 import { IActivity } from 'vs/workbench/common/activity';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -31,17 +30,17 @@ export interface ICompositeActivity {
 
 export interface ICompositeBar {
 	/**
-	 * Unpins a composite from the activitybar.
+	 * Unpins a composite from the composite bar.
 	 */
 	unpin(compositeId: string): void;
 
 	/**
-	 * Pin a composite inside the activity bar.
+	 * Pin a composite inside the composite bar.
 	 */
 	pin(compositeId: string): void;
 
 	/**
-	 * Find out if a composite is pinned in the activity bar.
+	 * Find out if a composite is pinned in the composite bar.
 	 */
 	isPinned(compositeId: string): boolean;
 
@@ -91,9 +90,16 @@ export class ActivityAction extends Action {
 	}
 }
 
+export interface ICompositeBarColors {
+	backgroundColor: string;
+	badgeBackground: string;
+	badgeForeground: string;
+	dragAndDropBackground: string;
+}
+
 export interface IActivityActionItemOptions extends IBaseActionItemOptions {
 	icon?: boolean;
-	backgroundColor: string;
+	colors: ICompositeBarColors;
 }
 
 export class ActivityActionItem extends BaseActionItem {
@@ -125,15 +131,15 @@ export class ActivityActionItem extends BaseActionItem {
 
 		// Label
 		if (this.$label) {
-			const background = theme.getColor(this.options.backgroundColor);
+			const background = theme.getColor(this.options.colors.backgroundColor);
 
 			this.$label.style('background-color', background ? background.toString() : null);
 		}
 
 		// Badge
 		if (this.$badgeContent) {
-			const badgeForeground = theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND);
-			const badgeBackground = theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND);
+			const badgeForeground = theme.getColor(this.options.colors.badgeForeground);
+			const badgeBackground = theme.getColor(this.options.colors.badgeBackground);
 			const contrastBorderColor = theme.getColor(contrastBorder);
 
 			this.$badgeContent.style('color', badgeForeground ? badgeForeground.toString() : null);
@@ -295,12 +301,12 @@ export class CompositeOverflowActivityActionItem extends ActivityActionItem {
 		private getActiveCompositeId: () => string,
 		private getBadge: (compositeId: string) => IBadge,
 		private getCompositeOpenAction: (compositeId: string) => Action,
-		backgroundColor: string,
+		colors: ICompositeBarColors,
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IContextMenuService private contextMenuService: IContextMenuService,
 		@IThemeService themeService: IThemeService
 	) {
-		super(action, { icon: true, backgroundColor }, themeService);
+		super(action, { icon: true, colors }, themeService);
 
 		this.cssClass = action.class;
 		this.name = action.label;
@@ -374,14 +380,14 @@ export class CompositeActionItem extends ActivityActionItem {
 	constructor(
 		private compositeActivityAction: ActivityAction,
 		private toggleCompositePinnedAction: Action,
+		colors: ICompositeBarColors,
 		private compositeBar: ICompositeBar,
-		backgroundColor: string,
 		@IContextMenuService private contextMenuService: IContextMenuService,
 		@IKeybindingService private keybindingService: IKeybindingService,
 		@IInstantiationService instantiationService: IInstantiationService,
 		@IThemeService themeService: IThemeService
 	) {
-		super(compositeActivityAction, { draggable: true, backgroundColor }, themeService);
+		super(compositeActivityAction, { draggable: true, colors }, themeService);
 
 		this.cssClass = compositeActivityAction.class;
 
@@ -497,7 +503,7 @@ export class CompositeActionItem extends ActivityActionItem {
 
 	private updateFromDragging(element: HTMLElement, isDragging: boolean): void {
 		const theme = this.themeService.getTheme();
-		const dragBackground = theme.getColor(ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND);
+		const dragBackground = theme.getColor(this.options.colors.dragAndDropBackground);
 
 		element.style.backgroundColor = isDragging && dragBackground ? dragBackground.toString() : null;
 	}

src/vs/workbench/browser/parts/panel/panelPart.ts

@@ -24,7 +24,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ClosePanelAction, ToggleMaximizedPanelAction, PanelActivityAction, OpenPanelAction } from 'vs/workbench/browser/parts/panel/panelActions';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER } from 'vs/workbench/common/theme';
+import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_BADGE_BACKGROUND, PANEL_BADGE_FOREGROUND, PANEL_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
 import { activeContrastBorder, focusBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
 import { CompositeBar } from 'vs/workbench/browser/parts/compositebar/compositeBar';
 import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositebar/compositeBarActions';
@@ -84,7 +84,12 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 			getOnCompositeClickAction: (compositeId: string) => this.instantiationService.createInstance(OpenPanelAction, this.getPanel(compositeId)),
 			getDefaultCompositeId: () => Registry.as<PanelRegistry>(PanelExtensions.Panels).getDefaultPanelId(),
 			hidePart: () => this.partService.setPanelHidden(true),
-			backgroundColor: PANEL_BACKGROUND
+			colors: {
+				backgroundColor: PANEL_BACKGROUND,
+				badgeBackground: PANEL_BADGE_BACKGROUND,
+				badgeForeground: PANEL_BADGE_FOREGROUND,
+				dragAndDropBackground: PANEL_DRAG_AND_DROP_BACKGROUND
+			}
 		});
 		this.toUnbind.push(this.compositeBar);
 

src/vs/workbench/common/theme.ts

@@ -108,6 +108,24 @@ export const EDITOR_DRAG_AND_DROP_BACKGROUND = registerColor('editorGroup.dropBa
 
 // < --- Panels --- >
 
+const DRAG_AND_DROP_BACKGROUND = {
+	dark: Color.white.transparent(0.12),
+	light: Color.white.transparent(0.12),
+	hc: Color.white.transparent(0.12),
+};
+
+const BADGE_BACKGROUND = {
+	dark: '#007ACC',
+	light: '#007ACC',
+	hc: '#000000'
+};
+
+const BADGE_FOREGROUND = {
+	dark: Color.white,
+	light: Color.white,
+	hc: Color.white
+};
+
 export const PANEL_BACKGROUND = registerColor('panel.background', {
 	dark: editorBackground,
 	light: editorBackground,
@@ -138,6 +156,12 @@ export const PANEL_ACTIVE_TITLE_BORDER = registerColor('panelTitle.activeBorder'
 	hc: contrastBorder
 }, nls.localize('panelActiveTitleBorder', "Border color for the active panel title. Panels are shown below the editor area and contain views like output and integrated terminal."));
 
+export const PANEL_DRAG_AND_DROP_BACKGROUND = registerColor('panel.dropBackground', DRAG_AND_DROP_BACKGROUND, nls.localize('panelDragAndDropBackground', "Drag and drop feedback color for the panel title items. The color should have transparency so that the panel entries can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal."));
+
+export const PANEL_BADGE_BACKGROUND = registerColor('panelBadge.background', BADGE_BACKGROUND, nls.localize('panelBadgeBackground', "Activity notification badge background color. Panels are shown below the editor area and contain views like output and integrated terminal."));
+
+export const PANEL_BADGE_FOREGROUND = registerColor('panelBadge.foreground', BADGE_FOREGROUND, nls.localize('panelBadgeForeground', "Activity notification badge foreground color. Panels are shown below the editor area and contain views like output and integrated terminal."));
+
 
 
 // < --- Status --- >
@@ -224,24 +248,12 @@ export const ACTIVITY_BAR_BORDER = registerColor('activityBar.border', {
 	hc: contrastBorder
 }, nls.localize('activityBarBorder', "Activity bar border color separating to the side bar. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
-export const ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND = registerColor('activityBar.dropBackground', {
-	dark: Color.white.transparent(0.12),
-	light: Color.white.transparent(0.12),
-	hc: Color.white.transparent(0.12),
-}, nls.localize('activityBarDragAndDropBackground', "Drag and drop feedback color for the activity bar items. The color should have transparency so that the activity bar entries can still shine through. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
-export const ACTIVITY_BAR_BADGE_BACKGROUND = registerColor('activityBarBadge.background', {
-	dark: '#007ACC',
-	light: '#007ACC',
-	hc: '#000000'
-}, nls.localize('activityBarBadgeBackground', "Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
+export const ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND = registerColor('activityBar.dropBackground', DRAG_AND_DROP_BACKGROUND, nls.localize('activityBarDragAndDropBackground', "Drag and drop feedback color for the activity bar items. The color should have transparency so that the activity bar entries can still shine through. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
-export const ACTIVITY_BAR_BADGE_FOREGROUND = registerColor('activityBarBadge.foreground', {
-	dark: Color.white,
-	light: Color.white,
-	hc: Color.white
-}, nls.localize('activityBarBadgeForeground', "Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
+export const ACTIVITY_BAR_BADGE_BACKGROUND = registerColor('activityBarBadge.background', BADGE_BACKGROUND, nls.localize('activityBarBadgeBackground', "Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
+export const ACTIVITY_BAR_BADGE_FOREGROUND = registerColor('activityBarBadge.foreground', BADGE_FOREGROUND, nls.localize('activityBarBadgeForeground', "Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
 
 // < --- Side Bar --- >