themes - let more specific border colors win over contrastBorder color

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

@@ -176,14 +176,14 @@ export class ActivityActionItem extends ThemableActivityActionItem {
 		if (this.$badgeContent) {
 			const badgeForeground = theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND);
 			const badgeBackground = theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND);
-			const hcBorder = theme.getColor(contrastBorder);
+			const contrastBorderColor = theme.getColor(contrastBorder);
 
 			this.$badgeContent.style('color', badgeForeground ? badgeForeground.toString() : null);
 			this.$badgeContent.style('background-color', badgeBackground ? badgeBackground.toString() : null);
 
-			this.$badgeContent.style('border-style', hcBorder ? 'solid' : null);
-			this.$badgeContent.style('border-width', hcBorder ? '1px' : null);
-			this.$badgeContent.style('border-color', hcBorder ? hcBorder.toString() : null);
+			this.$badgeContent.style('border-style', contrastBorderColor ? 'solid' : null);
+			this.$badgeContent.style('border-width', contrastBorderColor ? '1px' : null);
+			this.$badgeContent.style('border-color', contrastBorderColor ? contrastBorderColor.toString() : null);
 		}
 	}
 

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

@@ -216,15 +216,15 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		const background = this.getColor(ACTIVITY_BAR_BACKGROUND);
 		container.style('background-color', background);
 
-		const hcBorder = this.getColor(contrastBorder);
+		const contrastBorderColor = this.getColor(contrastBorder);
 		const isPositionLeft = this.partService.getSideBarPosition() === SideBarPosition.LEFT;
-		container.style('box-sizing', hcBorder && isPositionLeft ? 'border-box' : null);
-		container.style('border-right-width', hcBorder && isPositionLeft ? '1px' : null);
-		container.style('border-right-style', hcBorder && isPositionLeft ? 'solid' : null);
-		container.style('border-right-color', isPositionLeft ? hcBorder : null);
-		container.style('border-left-width', hcBorder && !isPositionLeft ? '1px' : null);
-		container.style('border-left-style', hcBorder && !isPositionLeft ? 'solid' : null);
-		container.style('border-left-color', !isPositionLeft ? hcBorder : null);
+		container.style('box-sizing', contrastBorderColor && isPositionLeft ? 'border-box' : null);
+		container.style('border-right-width', contrastBorderColor && isPositionLeft ? '1px' : null);
+		container.style('border-right-style', contrastBorderColor && isPositionLeft ? 'solid' : null);
+		container.style('border-right-color', isPositionLeft ? contrastBorderColor : null);
+		container.style('border-left-width', contrastBorderColor && !isPositionLeft ? '1px' : null);
+		container.style('border-left-style', contrastBorderColor && !isPositionLeft ? 'solid' : null);
+		container.style('border-left-color', !isPositionLeft ? contrastBorderColor : null);
 	}
 
 	private showContextMenu(e: MouseEvent): void {

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

@@ -1009,19 +1009,19 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 			silo.style('background-color', this.getColor(editorBackground));
 
 			// Border
-			silo.style('border-left-color', index > Position.ONE ? (this.getColor(contrastBorder) || this.getColor(EDITOR_GROUP_BORDER_COLOR)) : null);
-			silo.style('border-top-color', index > Position.ONE ? (this.getColor(contrastBorder) || this.getColor(EDITOR_GROUP_BORDER_COLOR)) : null);
+			silo.style('border-left-color', index > Position.ONE ? (this.getColor(EDITOR_GROUP_BORDER_COLOR) || this.getColor(contrastBorder)) : null);
+			silo.style('border-top-color', index > Position.ONE ? (this.getColor(EDITOR_GROUP_BORDER_COLOR) || this.getColor(contrastBorder)) : null);
 		});
 
 		// Title control
 		POSITIONS.forEach(position => {
 			const container = this.getTitleAreaControl(position).getContainer();
-			const hcBorder = this.getColor(contrastBorder);
+			const contrastBorderColor = this.getColor(contrastBorder);
 
 			container.style.backgroundColor = this.getColor(this.tabOptions.showTabs ? TABS_CONTAINER_BACKGROUND : EDITOR_GROUP_HEADER_BACKGROUND);
-			container.style.borderBottomWidth = (hcBorder && this.tabOptions.showTabs) ? '1px' : null;
-			container.style.borderBottomStyle = (hcBorder && this.tabOptions.showTabs) ? 'solid' : null;
-			container.style.borderBottomColor = this.tabOptions.showTabs ? hcBorder : null;
+			container.style.borderBottomWidth = (contrastBorderColor && this.tabOptions.showTabs) ? '1px' : null;
+			container.style.borderBottomStyle = (contrastBorderColor && this.tabOptions.showTabs) ? 'solid' : null;
+			container.style.borderBottomColor = this.tabOptions.showTabs ? contrastBorderColor : null;
 		});
 	}
 
@@ -1226,15 +1226,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 hcOutline = $this.getColor(activeContrastBorder);
+						const activeContrastBorderColor = $this.getColor(activeContrastBorder);
 						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: hcOutline,
-							outlineOffset: hcOutline ? '-2px' : null,
-							outlineStyle: hcOutline ? 'dashed' : null,
-							outlineWidth: hcOutline ? '2px' : null
+							outlineColor: activeContrastBorderColor,
+							outlineOffset: activeContrastBorderColor ? '-2px' : null,
+							outlineStyle: activeContrastBorderColor ? 'dashed' : null,
+							outlineWidth: activeContrastBorderColor ? '2px' : null
 						}).id(overlayId);
 
 						overlay.appendTo(container);
@@ -1555,7 +1555,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		if (isDragging) {
 			this.parent.addClass('dragging');
 			silo.addClass('dragging');
-			borderColor = (this.getColor(contrastBorder) || this.getColor(EDITOR_GROUP_BORDER_COLOR));
+			borderColor = this.getColor(EDITOR_GROUP_BORDER_COLOR) || this.getColor(contrastBorder);
 		} else {
 			this.parent.removeClass('dragging');
 			silo.removeClass('dragging');
@@ -1575,11 +1575,11 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		const background = this.getColor(isDropping ? EDITOR_DRAG_AND_DROP_BACKGROUND : groupCount > 0 ? EDITOR_GROUP_BACKGROUND : null);
 		element.style.backgroundColor = background;
 
-		const hcOutline = this.getColor(activeContrastBorder);
-		element.style.outlineColor = isDropping ? hcOutline : null;
-		element.style.outlineStyle = isDropping && hcOutline ? 'dashed' : null;
-		element.style.outlineWidth = isDropping && hcOutline ? '2px' : null;
-		element.style.outlineOffset = isDropping && hcOutline ? '-2px' : null;
+		const activeContrastBorderColor = this.getColor(activeContrastBorder);
+		element.style.outlineColor = isDropping ? activeContrastBorderColor : null;
+		element.style.outlineStyle = isDropping && activeContrastBorderColor ? 'dashed' : null;
+		element.style.outlineWidth = isDropping && activeContrastBorderColor ? '2px' : null;
+		element.style.outlineOffset = isDropping && activeContrastBorderColor ? '-2px' : null;
 	}
 
 	private posSilo(pos: number, leftTop: string | number, rightBottom?: string | number, borderLeftTopWidth?: string | number): void {

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

@@ -219,16 +219,16 @@ export class TabsTitleControl extends TitleControl {
 		element.style.backgroundColor = isDND ? this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND) : noDNDBackgroundColor;
 
 		// Outline
-		const hcOutline = this.getColor(activeContrastBorder);
-		if (hcOutline && isDND) {
+		const activeContrastBorderColor = this.getColor(activeContrastBorder);
+		if (activeContrastBorderColor && isDND) {
 			element.style.outlineWidth = '2px';
 			element.style.outlineStyle = 'dashed';
-			element.style.outlineColor = hcOutline;
+			element.style.outlineColor = activeContrastBorderColor;
 			element.style.outlineOffset = isTab ? '-5px' : '-3px';
 		} else {
 			element.style.outlineWidth = null;
 			element.style.outlineStyle = null;
-			element.style.outlineColor = hcOutline;
+			element.style.outlineColor = activeContrastBorderColor;
 			element.style.outlineOffset = null;
 		}
 	}
@@ -272,8 +272,8 @@ export class TabsTitleControl extends TitleControl {
 				// Container
 				tabContainer.setAttribute('aria-label', `${name}, tab`);
 				tabContainer.title = title;
-				tabContainer.style.borderLeftColor = (index !== 0) ? (this.getColor(contrastBorder) || this.getColor(TAB_BORDER)) : null;
-				tabContainer.style.borderRightColor = (index === editorsOfGroup.length - 1) ? (this.getColor(contrastBorder) || this.getColor(TAB_BORDER)) : null;
+				tabContainer.style.borderLeftColor = (index !== 0) ? (this.getColor(TAB_BORDER) || this.getColor(contrastBorder)) : null;;
+				tabContainer.style.borderRightColor = (index === editorsOfGroup.length - 1) ? (this.getColor(TAB_BORDER) || this.getColor(contrastBorder)) : null;;
 				tabContainer.style.outlineColor = this.getColor(activeContrastBorder);
 
 				const tabOptions = this.editorGroupService.getTabOptions();
@@ -763,8 +763,8 @@ class TabActionRunner extends ActionRunner {
 registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 
 	// Styling with Outline color (e.g. high contrast theme)
-	const outline = theme.getColor(activeContrastBorder);
-	if (outline) {
+	const activeContrastBorderColor = theme.getColor(activeContrastBorder);
+	if (activeContrastBorderColor) {
 		collector.addRule(`
 			.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active,
 			.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:hover  {

src/vs/workbench/browser/parts/sidebar/sidebarPart.ts

@@ -83,14 +83,14 @@ export class SidebarPart extends CompositePart<Viewlet> {
 
 		container.style('background-color', this.getColor(SIDE_BAR_BACKGROUND));
 
-		const hcBorder = this.getColor(contrastBorder);
+		const contrastBorderColor = this.getColor(contrastBorder);
 		const isPositionLeft = this.partService.getSideBarPosition() === SideBarPosition.LEFT;
-		container.style('border-right-width', hcBorder && isPositionLeft ? '1px' : null);
-		container.style('border-right-style', hcBorder && isPositionLeft ? 'solid' : null);
-		container.style('border-right-color', isPositionLeft ? hcBorder : null);
-		container.style('border-left-width', hcBorder && !isPositionLeft ? '1px' : null);
-		container.style('border-left-style', hcBorder && !isPositionLeft ? 'solid' : null);
-		container.style('border-left-color', !isPositionLeft ? hcBorder : null);
+		container.style('border-right-width', contrastBorderColor && isPositionLeft ? '1px' : null);
+		container.style('border-right-style', contrastBorderColor && isPositionLeft ? 'solid' : null);
+		container.style('border-right-color', isPositionLeft ? contrastBorderColor : null);
+		container.style('border-left-width', contrastBorderColor && !isPositionLeft ? '1px' : null);
+		container.style('border-left-style', contrastBorderColor && !isPositionLeft ? 'solid' : null);
+		container.style('border-left-color', !isPositionLeft ? contrastBorderColor : null);
 	}
 
 	public openViewlet(id: string, focus?: boolean): TPromise<Viewlet> {

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

@@ -139,10 +139,10 @@ 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 hcBorder = this.getColor(contrastBorder);
-		container.style('border-top-width', hcBorder ? '1px' : null);
-		container.style('border-top-style', hcBorder ? 'solid' : null);
-		container.style('border-top-color', hcBorder);
+		const contrastBorderColor = this.getColor(contrastBorder);
+		container.style('border-top-width', contrastBorderColor ? '1px' : null);
+		container.style('border-top-style', contrastBorderColor ? 'solid' : null);
+		container.style('border-top-color', contrastBorderColor);
 	}
 
 	private doCreateStatusItem(alignment: StatusbarAlignment, priority: number = 0): HTMLElement {

src/vs/workbench/electron-browser/window.ts

@@ -134,17 +134,17 @@ export class ElectronWindow extends Themable {
 				// Find out if folders are dragged and show the appropiate feedback then
 				this.includesFolder(draggedExternalResources).done(includesFolder => {
 					if (includesFolder) {
-						const hcOutline = this.getColor(activeContrastBorder);
+						const activeContrastBorderColor = this.getColor(activeContrastBorder);
 						dropOverlay = $(window.document.getElementById(this.partService.getWorkbenchElementId()))
 							.div({
 								id: 'monaco-workbench-drop-overlay'
 							})
 							.style({
 								backgroundColor: this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND),
-								outlineColor: hcOutline,
-								outlineOffset: hcOutline ? '-2px' : null,
-								outlineStyle: hcOutline ? 'dashed' : null,
-								outlineWidth: hcOutline ? '2px' : null
+								outlineColor: activeContrastBorderColor,
+								outlineOffset: activeContrastBorderColor ? '-2px' : null,
+								outlineStyle: activeContrastBorderColor ? 'dashed' : null,
+								outlineWidth: activeContrastBorderColor ? '2px' : null
 							})
 							.on(DOM.EventType.DROP, (e: DragEvent) => {
 								DOM.EventHelper.stop(e, true);

src/vs/workbench/parts/debug/browser/debugActionsWidget.ts

@@ -149,10 +149,10 @@ export class DebugActionsWidget extends Themable implements IWorkbenchContributi
 			const widgetShadowColor = this.getColor(widgetShadow);
 			this.$el.style('box-shadow', widgetShadowColor ? `0 5px 8px ${widgetShadowColor}` : null);
 
-			const hcBorder = this.getColor(contrastBorder);
-			this.$el.style('border-style', hcBorder ? 'solid' : null);
-			this.$el.style('border-width', hcBorder ? '1px' : null);
-			this.$el.style('border-color', hcBorder);
+			const contrastBorderColor = this.getColor(contrastBorder);
+			this.$el.style('border-style', contrastBorderColor ? 'solid' : null);
+			this.$el.style('border-width', contrastBorderColor ? '1px' : null);
+			this.$el.style('border-color', contrastBorderColor);
 		}
 	}
 

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

@@ -146,14 +146,14 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 	public updateStyles(): void {
 		super.updateStyles();
 
-		const hcBorder = this.getColor(contrastBorder);
+		const contrastBorderColor = this.getColor(contrastBorder);
 
 		this.searchBox.style.backgroundColor = this.getColor(inputBackground);
 		this.searchBox.style.color = this.getColor(inputForeground);
 
-		this.searchBox.style.borderWidth = hcBorder ? '1px' : null;
-		this.searchBox.style.borderStyle = hcBorder ? 'solid' : null;
-		this.searchBox.style.borderColor = hcBorder;
+		this.searchBox.style.borderWidth = contrastBorderColor ? '1px' : null;
+		this.searchBox.style.borderStyle = contrastBorderColor ? 'solid' : null;
+		this.searchBox.style.borderColor = contrastBorderColor;
 	}
 
 	setVisible(visible: boolean): TPromise<void> {