development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-25 03:56:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update tab bar colors (#209451)

Browse source 
tab bar colors debt
This commit is contained in:
Benjamin Christopher Simmonds 2024-04-03 17:43:34 +02:00 committed by GitHub
parent b5f97ae0e1
commit de571f4bbc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css
View file

@ -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 */
}

58
src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts
View file

@ -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';
@ -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() ?? '');
}
}