Style overrides: Update tab background colors and add shadows override module (#323104)

style: update tab background colors and add shadows override module

Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com>
Co-authored-by: Copilot <copilot@github.com>

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;
+}

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

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' }
 ];