diff --git a/src/vs/workbench/contrib/styleOverrides/browser/media/shadows.css b/src/vs/workbench/contrib/styleOverrides/browser/media/shadows.css new file mode 100644 index 00000000000..3d2ede1bfca --- /dev/null +++ b/src/vs/workbench/contrib/styleOverrides/browser/media/shadows.css @@ -0,0 +1,44 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +/* + * Style-override module: "No Part Shadows". + * + * The `workbench.shadows` setting (default on) casts elevation shadows from the + * workbench parts onto their neighbours: the title bar, the activity bar, the + * editor tabs and the panel "depth" shadows that fall on the editor surface. + * The Modern UI look is flat, so this module neutralises those part shadows + * regardless of the `workbench.shadows` setting. + * + * Only the part-level shadows are suppressed. The floating-modal shadows + * (`--vscode-shadow-lg` / `--vscode-shadow-xl` used by hovers, dropdowns, + * dialogs and notifications) are intentionally left alone — these are preserved + * even when `workbench.shadows` is disabled. + * + * All rules are gated behind the `.style-override` class, which the + * StyleOverridesContribution toggles onto the workbench container(s) when the + * `workbench.experimental.modernUI` (Modern UI Update) setting is enabled. + */ + +.style-override.monaco-workbench { + /* + * Use zero-offset transparent shadows instead of `none` because these + * variables are interpolated into multi-value box-shadow declarations. + */ + --vscode-shadow-active-tab: 0 0 0 0 transparent; + --vscode-shadow-depth-x: 0 0 0 0 transparent; + --vscode-shadow-depth-y: 0 0 0 0 transparent; + --vscode-shadow-sm: 0 0 0 0 transparent; +} + +.style-override.monaco-workbench .part.titlebar, +.style-override.monaco-workbench .part.activitybar, +.style-override.monaco-workbench.nosidebar .part.activitybar, +.style-override.monaco-workbench.activitybar-right .part.activitybar, +.style-override.monaco-workbench .part.editor .tabs-container > .tab, +.style-override.monaco-workbench .part.editor .tabs-container > .tab:hover:not(.active), +.style-override.monaco-workbench .part.editor .tabs-container > .tab.active { + box-shadow: none !important; +} diff --git a/src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css b/src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css index f82eab72807..8aad1d9ed51 100644 --- a/src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css +++ b/src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css @@ -41,13 +41,30 @@ } .style-override .part.editor .tabs-container > .tab.active { - background-color: color-mix(in srgb, var(--vscode-foreground) 10%, transparent) !important; + background-color: color-mix(in srgb, var(--vscode-foreground) 18%, transparent) !important; } .style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):hover { background-color: color-mix(in srgb, var(--vscode-foreground) 8%, transparent) !important; } +/* + * Light themes: the foreground is dark, so the same foreground-based mixes read + * much heavier on a light surface than on a dark one. Tone the tab backgrounds + * down so the pills stay subtle. + */ +.style-override.monaco-workbench.vs .part.editor .tabs-container > .tab { + background-color: color-mix(in srgb, var(--vscode-foreground) 4%, transparent) !important; +} + +.style-override.monaco-workbench.vs .part.editor .tabs-container > .tab.active { + background-color: color-mix(in srgb, var(--vscode-foreground) 10%, transparent) !important; +} + +.style-override.monaco-workbench.vs .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):hover { + background-color: color-mix(in srgb, var(--vscode-foreground) 6%, transparent) !important; +} + .style-override .part.editor .tabs-container > .tab .tab-border-top-container, .style-override .part.editor .tabs-container > .tab .tab-border-bottom-container { display: none !important; @@ -149,6 +166,19 @@ font-weight: var(--vscode-agents-fontWeight-semiBold); } +/* + * Dim the foreground of inactive tabs so the active tab reads as the clear + * focal point. The active tab keeps the full `--vscode-foreground` colour + * (paired with the stronger active background above). + */ +.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.active) .tab-label a { + color: color-mix(in srgb, var(--vscode-foreground) 50%, transparent) !important; +} + +.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active .tab-label a { + color: var(--vscode-foreground) !important; +} + /* * Settings switcher tabs (User / Remote / Workspace / Folder) in the Settings * editor header. These are action-bar items whose active state is drawn as a diff --git a/src/vs/workbench/contrib/styleOverrides/browser/styleOverrides.contribution.ts b/src/vs/workbench/contrib/styleOverrides/browser/styleOverrides.contribution.ts index c2c773c405c..381293ce376 100644 --- a/src/vs/workbench/contrib/styleOverrides/browser/styleOverrides.contribution.ts +++ b/src/vs/workbench/contrib/styleOverrides/browser/styleOverrides.contribution.ts @@ -22,6 +22,7 @@ import './media/padding.css'; import './media/paneHeaders.css'; import './media/roundedCorners.css'; import './media/scrollShadows.css'; +import './media/shadows.css'; import './media/statusBar.css'; import './media/tabs.css'; @@ -61,6 +62,7 @@ const STYLE_OVERRIDE_MODULES: readonly IStyleOverrideModule[] = [ { id: 'paneHeaders', layoutAffecting: true }, { id: 'roundedCorners' }, { id: 'scrollShadows' }, + { id: 'shadows' }, { id: 'statusBar' }, { id: 'tabs' } ];