Merge pull request #299237 from microsoft/mrleemurray/port-misc-2026-theme-styles-2

Final port of misc 2026 theme styles - refine color theme styles for improved UI consistency

extensions/theme-2026/package.json

@@ -8,9 +8,6 @@
 	"engines": {
 		"vscode": "^1.85.0"
 	},
-    "enabledApiProposals": [
-      "css"
-  ],
 	"categories": [
 		"Themes"
 	],
@@ -28,11 +25,6 @@
 				"uiTheme": "vs-dark",
 				"path": "./themes/2026-dark.json"
 			}
-		],
-    "css": [
-      {
-        "path": "./themes/styles.css"
-      }
-    ]
+		]
 	}
 }

extensions/theme-2026/themes/2026-dark.json

@@ -10,7 +10,6 @@
 		"descriptionForeground": "#8C8C8C",
 		"icon.foreground": "#8C8C8C",
 		"focusBorder": "#3994BCB3",
-		"contrastBorder": "#333536",
 		"textBlockQuote.background": "#242526",
 		"textBlockQuote.border": "#2A2B2CFF",
 		"textCodeBlock.background": "#242526",
@@ -26,7 +25,7 @@
 		"button.secondaryHoverBackground": "#FFFFFF10",
 		"checkbox.background": "#242526",
 		"checkbox.border": "#333536",
-		"checkbox.foreground": "#bfbfbf",
+		"checkbox.foreground": "#8C8C8C",
 		"dropdown.background": "#191A1B",
 		"dropdown.border": "#333536",
 		"dropdown.foreground": "#bfbfbf",
@@ -100,12 +99,13 @@
 		"commandCenter.foreground": "#bfbfbf",
 		"commandCenter.activeForeground": "#bfbfbf",
 		"commandCenter.background": "#191A1B",
-		"commandCenter.activeBackground": "#252627",
+		"commandCenter.activeBackground": "#FFFFFF0F",
 		"commandCenter.border": "#2E3031",
 		"editor.background": "#121314",
 		"editor.foreground": "#BBBEBF",
 		"editorStickyScroll.background": "#121314",
 		"editorStickyScrollHover.background": "#202122",
+		"editorStickyScroll.border": "#2A2B2CFF",
 		"editorLineNumber.foreground": "#858889",
 		"editorLineNumber.activeForeground": "#BBBEBF",
 		"editorCursor.foreground": "#BBBEBF",
@@ -190,7 +190,6 @@
 		"tab.inactiveForeground": "#8C8C8C",
 		"tab.border": "#2A2B2CFF",
 		"tab.lastPinnedBorder": "#2A2B2CFF",
-		"tab.activeBorder": "#121314",
 		"tab.activeBorderTop": "#3994BC",
 		"tab.hoverBackground": "#262728",
 		"tab.hoverForeground": "#bfbfbf",
@@ -199,7 +198,8 @@
 		"tab.unfocusedInactiveBackground": "#191A1B",
 		"tab.unfocusedInactiveForeground": "#444444",
 		"editorGroupHeader.tabsBackground": "#191A1B",
-		"editorGroupHeader.tabsBorder": "#2A2B2CFF",
+		"tab.activeBorder": "#00000000",
+		"editorGroupHeader.tabsBorder": "#00000000",
 		"breadcrumb.foreground": "#8C8C8C",
 		"breadcrumb.background": "#121314",
 		"breadcrumb.focusForeground": "#bfbfbf",
@@ -266,7 +266,8 @@
 		"charts.yellow": "#E0B97F",
 		"charts.orange": "#CD861A",
 		"charts.green": "#86CF86",
-		"charts.purple": "#AD80D7"
+		"charts.purple": "#AD80D7",
+		"inlineChat.border": "#00000000"
 	},
 	"tokenColors": [
 		{

extensions/theme-2026/themes/2026-light.json

@@ -10,7 +10,6 @@
 		"descriptionForeground": "#606060",
 		"icon.foreground": "#606060",
 		"focusBorder": "#0069CCFF",
-		"contrastBorder": "#F0F1F2FF",
 		"textBlockQuote.background": "#EAEAEA",
 		"textBlockQuote.border": "#F0F1F2FF",
 		"textCodeBlock.background": "#EAEAEA",
@@ -28,7 +27,7 @@
 		"button.secondaryHoverBackground": "#F2F3F4",
 		"checkbox.background": "#EAEAEA",
 		"checkbox.border": "#D8D8D8",
-		"checkbox.foreground": "#202020",
+		"checkbox.foreground": "#606060",
 		"dropdown.background": "#FFFFFF",
 		"dropdown.border": "#D8D8D8",
 		"dropdown.foreground": "#202020",
@@ -54,6 +53,7 @@
 		"widget.border": "#EEEEF1",
 		"editorStickyScroll.shadow": "#00000000",
 		"editorStickyScrollHover.background": "#F0F0F3",
+		"editorStickyScroll.border": "#F0F1F2FF",
 		"sideBarStickyScroll.shadow": "#00000000",
 		"panelStickyScroll.shadow": "#00000000",
 		"listFilterWidget.shadow": "#00000000",
@@ -195,7 +195,6 @@
 		"tab.inactiveForeground": "#606060",
 		"tab.border": "#F0F1F2FF",
 		"tab.lastPinnedBorder": "#F0F1F2FF",
-		"tab.activeBorder": "#FAFAFD",
 		"tab.activeBorderTop": "#000000",
 		"tab.hoverBackground": "#DADADA4f",
 		"tab.hoverForeground": "#202020",
@@ -204,7 +203,8 @@
 		"tab.unfocusedInactiveBackground": "#FAFAFD",
 		"tab.unfocusedInactiveForeground": "#BBBBBB",
 		"editorGroupHeader.tabsBackground": "#FAFAFD",
-		"editorGroupHeader.tabsBorder": "#F0F1F2FF",
+		"tab.activeBorder": "#00000000",
+		"editorGroupHeader.tabsBorder": "#00000000",
 		"breadcrumb.foreground": "#606060",
 		"breadcrumb.background": "#FFFFFF",
 		"breadcrumb.focusForeground": "#202020",
@@ -272,6 +272,7 @@
 		"charts.green": "#388A34",
 		"charts.purple": "#652D90",
 		"agentStatusIndicator.background": "#FFFFFF",
+		"inlineChat.border": "#00000000"
 	},
 	"tokenColors": [
 		{

extensions/theme-2026/themes/styles.css

@@ -1,196 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-:root {
-	--radius-sm: 4px;
-	--radius-lg: 8px;
-}
-
-.monaco-pane-view .split-view-view:first-of-type > .pane > .pane-header {
-	border-top: 1px solid var(--vscode-sideBarSectionHeader-border) !important;
-}
-
-/* Tab border bottom - make transparent */
-.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container {
-	--tabs-border-bottom-color: transparent !important;
-}
-
-.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
-	--tab-border-bottom-color: transparent !important;
-}
-
-/* Quick Input (Command Palette) */
-
-.monaco-workbench .quick-input-list .quick-input-list-entry .quick-input-list-separator {
-	height: 16px;
-	margin-top: 2px;
-	display: flex;
-	align-items: center;
-	font-size: 11px;
-	padding: 0 4px;
-	border-radius: var(--vscode-cornerRadius-small) !important;
-	background: transparent !important;
-	color: var(--vscode-descriptionForeground) !important;
-	border: 1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 50%, transparent) !important;
-	margin-right: 8px;
-}
-
-.monaco-workbench .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator,
-.monaco-workbench .monaco-list-row.selected .quick-input-list-entry .quick-input-list-separator,
-.monaco-workbench .monaco-list-row:hover .quick-input-list-entry .quick-input-list-separator {
-	background: transparent !important;
-	color: inherit !important;
-	border: none !important;
-	padding: 0;
-}
-
-
-/* Settings */
-.monaco-workbench .settings-editor > .settings-header > .search-container > .search-container-widgets > .settings-count-widget {
-	border-radius: var(--radius-sm);
-	background: transparent !important;
-	color: var(--vscode-descriptionForeground) !important;
-	border: 1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 50%, transparent) !important;
-}
-
-/* Input Boxes */
-.monaco-inputbox .monaco-action-bar .action-item .codicon,
-.monaco-workbench .search-container .input-box,
-.monaco-custom-toggle {
-	color: var(--vscode-icon-foreground) !important;
-}
-
-/* Chat input toolbar icons should follow icon foreground token */
-.monaco-workbench .interactive-session .chat-input-toolbars .monaco-action-bar .action-item .codicon,
-.monaco-workbench .interactive-session .chat-input-toolbars .action-label .codicon {
-	color: var(--vscode-icon-foreground) !important;
-}
-
-/* Todo List Widget - remove shadows from buttons */
-.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button,
-.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button:hover,
-.monaco-workbench.vs .chat-todo-list-widget .todo-list-expand .monaco-button:active,
-.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button,
-.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button:hover,
-.monaco-workbench.vs .chat-todo-list-widget .todo-clear-button-container .monaco-button:active {
-	box-shadow: none;
-}
-
-/* Link buttons and tool call buttons - remove shadows */
-.monaco-workbench .monaco-button.link-button,
-.monaco-workbench .monaco-button.link-button:hover,
-.monaco-workbench .monaco-button.link-button:active,
-.monaco-workbench .chat-confirmation-widget-title.monaco-button,
-.monaco-workbench .chat-confirmation-widget-title.monaco-button:hover,
-.monaco-workbench .chat-confirmation-widget-title.monaco-button:active,
-.monaco-workbench .chat-used-context-label .monaco-button,
-.monaco-workbench .chat-used-context-label .monaco-button:hover,
-.monaco-workbench .chat-used-context-label .monaco-button:active {
-	box-shadow: none;
-}
-
-.monaco-workbench .debug-hover-widget {
-	color: var(--vscode-editor-foreground) !important;
-}
-
-.monaco-editor .debug-hover-widget .debug-hover-tree .monaco-list-rows .monaco-list-row:hover:not(.highlighted):not(.selected):not(.focused) {
-	background-color: var(--vscode-list-hoverBackground);
-}
-
-/* Minimap */
-
-.monaco-workbench .monaco-editor .minimap canvas {
-	opacity: 0.85;
-}
-
-.monaco-workbench.vs-dark .monaco-editor .minimap,
-.monaco-workbench .monaco-editor .minimap-shadow-visible {
-	opacity: 0.85;
-	background-color: var(--vscode-editor-background);
-	left: 0;
-}
-
-/* Minimap autohide: ensure opacity:0 overrides the 0.85 above */
-.monaco-workbench .monaco-editor .minimap:is(.minimap-autohide-mouseover, .minimap-autohide-scroll) {
-	opacity: 0;
-}
-
-.monaco-workbench .monaco-editor .minimap:is(.minimap-autohide-mouseover:hover, .minimap-autohide-scroll.active) {
-	opacity: 0.85;
-}
-
-/* Sticky Scroll */
-.monaco-workbench .monaco-editor .sticky-widget {
-	border-bottom: var(--vscode-editorWidget-border) !important;
-	background: transparent !important;
-}
-
-.monaco-workbench .monaco-editor .sticky-widget > * {
-	background: transparent !important;
-}
-
-.monaco-workbench.vs-dark .monaco-editor .sticky-widget {
-	border-bottom: none !important;
-}
-
-.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-lines-scrollable {
-	background: var(--vscode-editor-background) !important;
-}
-
-.monaco-editor .sticky-widget .sticky-line-content {
-	background: var(--vscode-editor-background) !important;
-}
-
-.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-line-numbers {
-	background: var(--vscode-editor-background) !important;
-}
-
-.monaco-workbench .monaco-editor .sticky-widget .sticky-line-content:hover {
-	background: var(--vscode-editorStickyScrollHover-background) !important;
-}
-
-.monaco-editor .rename-box.preview {
-	border: 1px solid var(--vscode-editorWidget-border);
-}
-
-/* Notebook */
-
-.notebookOverlay .monaco-list-row .cell-title-toolbar {
-	background-color: var(--vscode-editorWidget-background) !important;
-}
-
-/* Inline Chat */
-.monaco-workbench .monaco-editor .inline-chat {
-	border: none;
-}
-
-/* Command Center */
-.monaco-workbench .part.titlebar .command-center .agent-status-pill {
-	border-color: var(--vscode-input-border);
-}
-
-.monaco-workbench .part.titlebar .command-center .agent-status-badge {
-	border-color: var(--vscode-input-border);
-}
-
-.monaco-workbench.vs-dark .monaco-action-bar:not(.vertical) .agent-status-badge-section.sparkle .action-container:hover,
-.monaco-workbench.vs-dark .monaco-action-bar:not(.vertical) .agent-status-badge-section.sparkle .dropdown-action-container:hover
- {
-	background-color: var(--vscode-toolbar-hoverBackground);
-}
-
-.monaco-workbench.vs-dark .monaco-action-bar:not(.vertical) .agent-status-badge .monaco-dropdown-with-primary:not(.disabled):hover {
-	background-color: var(--vscode-commandCenter-activeBackground);
-}
-
-.monaco-workbench .unified-quick-access-tabs {
-	background: transparent;
-}
-
-/* Quick Input List - use descriptionForeground color for descriptions */
-.monaco-workbench .quick-input-list .monaco-icon-label .label-description {
-	opacity: 1;
-	color: var(--vscode-descriptionForeground);
-}

src/vs/base/browser/ui/inputbox/inputBox.css

@@ -103,4 +103,5 @@
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
+	color: var(--vscode-icon-foreground);
 }

src/vs/editor/browser/viewParts/minimap/minimap.css

@@ -61,3 +61,7 @@
 .monaco-editor .minimap {
 	z-index: 5;
 }
+
+.monaco-editor .minimap canvas {
+	opacity: 0.9;
+}

src/vs/platform/quickinput/browser/media/quickInput.css

@@ -308,6 +308,8 @@
 
 .quick-input-list .quick-input-list-entry .quick-input-list-separator {
 	margin-right: 4px;
+	font-size: var(--vscode-bodyFontSize-xSmall);
+	color: var(--vscode-descriptionForeground);
 	/* separate from keybindings or actions */
 }
 

src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditingEditorOverlay.css

@@ -8,7 +8,7 @@
 	color: var(--vscode-foreground);
 	background-color: var(--vscode-editorWidget-background);
 	border-radius: 6px;
-	border: 1px solid var(--vscode-contrastBorder);
+	border: 1px solid var(--vscode-editorWidget-border);
 	display: flex;
 	align-items: center;
 	justify-content: center;

src/vs/workbench/contrib/chat/browser/chatEditing/media/chatEditorController.css

@@ -21,7 +21,7 @@
 	border-radius: 6px;
 	background-color: var(--vscode-editorWidget-background);
 	color: var(--vscode-foreground);
-	border: 1px solid var(--vscode-contrastBorder);
+	border: 1px solid var(--vscode-editorWidget-border);
 	overflow: hidden;
 }
 

src/vs/workbench/contrib/notebook/browser/media/notebook.css

@@ -385,9 +385,9 @@
 .notebookOverlay .monaco-list-row .cell-title-toolbar {
 	border-radius: var(--vscode-cornerRadius-medium);
 	box-shadow: var(--vscode-shadow-sm);
+	background-color: var(--vscode-editorWidget-background);
 }
 
-.notebookOverlay .monaco-list-row .cell-title-toolbar,
 .notebookOverlay .monaco-list-row.cell-drag-image,
 .notebookOverlay .cell-bottom-toolbar-container .action-item,
 .notebookOverlay .cell-list-top-cell-toolbar-container .action-item {

src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css

@@ -62,6 +62,7 @@
 .settings-editor > .settings-header > .search-container > .search-container-widgets > .settings-count-widget {
 	margin-right: 3px;
 	padding-bottom: 3px;
+	color: var(--vscode-descriptionForeground);
 }
 
 .settings-editor > .settings-header > .search-container > .search-container-widgets > .settings-count-widget:empty {

src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts

@@ -44,7 +44,7 @@ import { Registry } from '../../../../platform/registry/common/platform.js';
 import { IStorageService, StorageScope, StorageTarget } from '../../../../platform/storage/common/storage.js';
 import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js';
 import { defaultButtonStyles, defaultToggleStyles } from '../../../../platform/theme/browser/defaultStyles.js';
-import { asCssVariable, asCssVariableWithDefault, badgeBackground, badgeForeground, contrastBorder, editorForeground, inputBackground } from '../../../../platform/theme/common/colorRegistry.js';
+import { asCssVariable, editorForeground } from '../../../../platform/theme/common/colorRegistry.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.js';
 import { IUserDataSyncEnablementService, IUserDataSyncService, SyncStatus } from '../../../../platform/userDataSync/common/userDataSync.js';
 import { IWorkspaceTrustManagementService } from '../../../../platform/workspace/common/workspaceTrust.js';
@@ -801,9 +801,6 @@ export class SettingsEditor2 extends EditorPane {
 		this.controlsElement = DOM.append(this.searchContainer, DOM.$('.search-container-widgets'));
 
 		this.countElement = DOM.append(this.controlsElement, DOM.$('.settings-count-widget.monaco-count-badge.long'));
-		this.countElement.style.backgroundColor = asCssVariable(badgeBackground);
-		this.countElement.style.color = asCssVariable(badgeForeground);
-		this.countElement.style.border = `1px solid ${asCssVariableWithDefault(contrastBorder, asCssVariable(inputBackground))}`;
 
 		this.searchInputActionBar = this._register(new ActionBar(this.controlsElement, {
 			actionViewItemProvider: (action, options) => {