Skip to content

Commit de571f4

Browse files
benibenjbenibenj
authored
Update tab bar colors (microsoft#209451)
tab bar colors debt
1 parent b5f97ae commit de571f4

File tree

2 files changed

+45
-45
lines changed

2 files changed

+45
-45
lines changed

‎src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,38 @@
106106
padding-left: 10px;
107107
}
108108

109+
/* Tab Background Color in/active group/tab */
110+
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
111+
background-color: var(--vscode-tab-unfocusedInactiveBackground);
112+
}
113+
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab {
114+
background-color: var(--vscode-tab-inactiveBackground);
115+
}
116+
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
117+
background-color: var(--vscode-tab-unfocusedActiveBackground);
118+
}
119+
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active {
120+
background-color: var(--vscode-tab-activeBackground);
121+
}
122+
123+
/* Tab Foreground Color in/active group/tab */
124+
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
125+
color: var(--vscode-tab-unfocusedInactiveForeground);
126+
}
127+
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab {
128+
color: var(--vscode-tab-inactiveForeground);
129+
}
130+
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
131+
color: var(--vscode-tab-unfocusedActiveForeground);
132+
}
133+
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active {
134+
color: var(--vscode-tab-activeForeground);
135+
}
136+
137+
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.active) {
138+
box-shadow: none;
139+
}
140+
109141
.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child {
110142
margin-right: var(--last-tab-margin-right); /* when tabs wrap, we need a margin away from the absolute positioned editor actions */
111143
}

‎src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts

Lines changed: 13 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElemen
2626
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
2727
import { getOrSet } from 'vs/base/common/map';
2828
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
29-
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';
29+
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';
3030
import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
3131
import { ResourcesDropHandler, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, extractTreeDropData, isWindowDraggedOver } from 'vs/workbench/browser/dnd';
3232
import { Color } from 'vs/base/common/color';
@@ -1504,55 +1504,23 @@ export class MultiEditorTabsControl extends EditorTabsControl {
15041504

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

1507-
// Tab is active
1508-
if (this.tabsModel.isActive(editor)) {
1507+
const isActive = this.tabsModel.isActive(editor);
15091508

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

1514+
if (isActive) {
1515+
// Set border BOTTOM if theme defined color
15161516
const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
1517-
if (activeTabBorderColorBottom) {
1518-
tabContainer.classList.add('tab-border-bottom');
1519-
tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom.toString());
1520-
} else {
1521-
tabContainer.classList.remove('tab-border-bottom');
1522-
tabContainer.style.removeProperty('--tab-border-bottom-color');
1523-
}
1517+
tabContainer.classList.toggle('tab-border-bottom', !!activeTabBorderColorBottom);
1518+
tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom?.toString() ?? '');
15241519

1520+
// Set border TOP if theme defined color
15251521
const activeTabBorderColorTop = allowBorderTop ? this.getColor(isGroupActive ? TAB_ACTIVE_BORDER_TOP : TAB_UNFOCUSED_ACTIVE_BORDER_TOP) : undefined;
1526-
if (activeTabBorderColorTop) {
1527-
tabContainer.classList.add('tab-border-top');
1528-
tabContainer.style.setProperty('--tab-border-top-color', activeTabBorderColorTop.toString());
1529-
} else {
1530-
tabContainer.classList.remove('tab-border-top');
1531-
tabContainer.style.removeProperty('--tab-border-top-color');
1532-
}
1533-
1534-
// Label
1535-
tabContainer.style.color = this.getColor(isGroupActive ? TAB_ACTIVE_FOREGROUND : TAB_UNFOCUSED_ACTIVE_FOREGROUND) || '';
1536-
1537-
// Actions
1538-
tabActionBar.setFocusable(true);
1539-
}
1540-
1541-
// Tab is inactive
1542-
else {
1543-
1544-
// Container
1545-
tabContainer.classList.remove('active');
1546-
tabContainer.setAttribute('aria-selected', 'false');
1547-
tabContainer.tabIndex = -1; // Only active tab can be focused into
1548-
tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_INACTIVE_BACKGROUND : TAB_UNFOCUSED_INACTIVE_BACKGROUND) || '';
1549-
tabContainer.style.boxShadow = '';
1550-
1551-
// Label
1552-
tabContainer.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_FOREGROUND : TAB_UNFOCUSED_INACTIVE_FOREGROUND) || '';
1553-
1554-
// Actions
1555-
tabActionBar.setFocusable(false);
1522+
tabContainer.classList.toggle('tab-border-top', !!activeTabBorderColorTop);
1523+
tabContainer.style.setProperty('--tab-border-top-color', activeTabBorderColorTop?.toString() ?? '');
15561524
}
15571525
}
15581526

0 commit comments

Comments
 (0)