Skip to content

Commit

Permalink
Update tab bar colors (#209451)
Browse files Browse the repository at this point in the history 
tab bar colors debt
  • Loading branch information
@benibenj
benibenj authored Apr 3, 2024
1 parent b5f97ae commit de571f4
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 45 deletions.
32 changes: 32 additions & 0 deletions src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,38 @@
padding-left: 10px;
}

/* Tab Background Color in/active group/tab */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
background-color: var(--vscode-tab-unfocusedInactiveBackground);
}
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab {
background-color: var(--vscode-tab-inactiveBackground);
}
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
background-color: var(--vscode-tab-unfocusedActiveBackground);
}
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active {
background-color: var(--vscode-tab-activeBackground);
}

/* Tab Foreground Color in/active group/tab */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
color: var(--vscode-tab-unfocusedInactiveForeground);
}
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab {
color: var(--vscode-tab-inactiveForeground);
}
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
color: var(--vscode-tab-unfocusedActiveForeground);
}
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active {
color: var(--vscode-tab-activeForeground);
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.active) {
box-shadow: none;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child {
margin-right: var(--last-tab-margin-right); /* when tabs wrap, we need a margin away from the absolute positioned editor actions */
}
Expand Down
58 changes: 13 additions & 45 deletions src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElemen
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { getOrSet } from 'vs/base/common/map';
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BACKGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_BACKGROUND, TAB_HOVER_FOREGROUND, TAB_UNFOCUSED_HOVER_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BORDER, TAB_LAST_PINNED_BORDER } from 'vs/workbench/common/theme';
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_BACKGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_BACKGROUND, TAB_HOVER_FOREGROUND, TAB_UNFOCUSED_HOVER_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BORDER, TAB_LAST_PINNED_BORDER } from 'vs/workbench/common/theme';
import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { ResourcesDropHandler, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, extractTreeDropData, isWindowDraggedOver } from 'vs/workbench/browser/dnd';
import { Color } from 'vs/base/common/color';
Expand Down Expand Up @@ -1504,55 +1504,23 @@ export class MultiEditorTabsControl extends EditorTabsControl {

private doRedrawTabActive(isGroupActive: boolean, allowBorderTop: boolean, editor: EditorInput, tabContainer: HTMLElement, tabActionBar: ActionBar): void {

// Tab is active
if (this.tabsModel.isActive(editor)) {
const isActive = this.tabsModel.isActive(editor);

// Container
tabContainer.classList.add('active');
tabContainer.setAttribute('aria-selected', 'true');
tabContainer.tabIndex = 0; // Only active tab can be focused into
tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_ACTIVE_BACKGROUND : TAB_UNFOCUSED_ACTIVE_BACKGROUND) || '';
tabContainer.classList.toggle('active', isActive);
tabContainer.setAttribute('aria-selected', isActive ? 'true' : 'false');
tabContainer.tabIndex = isActive ? 0 : -1; // Only active tab can be focused into
tabActionBar.setFocusable(isActive);

if (isActive) {
// Set border BOTTOM if theme defined color
const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
if (activeTabBorderColorBottom) {
tabContainer.classList.add('tab-border-bottom');
tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom.toString());
} else {
tabContainer.classList.remove('tab-border-bottom');
tabContainer.style.removeProperty('--tab-border-bottom-color');
}
tabContainer.classList.toggle('tab-border-bottom', !!activeTabBorderColorBottom);
tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom?.toString() ?? '');

// Set border TOP if theme defined color
const activeTabBorderColorTop = allowBorderTop ? this.getColor(isGroupActive ? TAB_ACTIVE_BORDER_TOP : TAB_UNFOCUSED_ACTIVE_BORDER_TOP) : undefined;
if (activeTabBorderColorTop) {
tabContainer.classList.add('tab-border-top');
tabContainer.style.setProperty('--tab-border-top-color', activeTabBorderColorTop.toString());
} else {
tabContainer.classList.remove('tab-border-top');
tabContainer.style.removeProperty('--tab-border-top-color');
}

// Label
tabContainer.style.color = this.getColor(isGroupActive ? TAB_ACTIVE_FOREGROUND : TAB_UNFOCUSED_ACTIVE_FOREGROUND) || '';

// Actions
tabActionBar.setFocusable(true);
}

// Tab is inactive
else {

// Container
tabContainer.classList.remove('active');
tabContainer.setAttribute('aria-selected', 'false');
tabContainer.tabIndex = -1; // Only active tab can be focused into
tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_INACTIVE_BACKGROUND : TAB_UNFOCUSED_INACTIVE_BACKGROUND) || '';
tabContainer.style.boxShadow = '';

// Label
tabContainer.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_FOREGROUND : TAB_UNFOCUSED_INACTIVE_FOREGROUND) || '';

// Actions
tabActionBar.setFocusable(false);
tabContainer.classList.toggle('tab-border-top', !!activeTabBorderColorTop);
tabContainer.style.setProperty('--tab-border-top-color', activeTabBorderColorTop?.toString() ?? '');
}
}

Expand Down

0 comments on commit de571f4

Please sign in to comment.