From 6a73139e8d575afbf887c64a0cd47ee55dcff8dd Mon Sep 17 00:00:00 2001 From: Shivank Gupta Date: Sat, 8 Nov 2025 16:05:29 +0530 Subject: [PATCH 1/3] hygiene: register new activityBar hover CSS variables and add test header/hygiene --- .../lib/stylelint/vscode-known-variables.json | 4 +++ .../activitybar/media/activityaction.css | 14 +++++++-- src/vs/workbench/common/theme.ts | 31 ++++++++++++++++++- .../themes/common/workbenchThemeService.ts | 4 +++ .../test/node/colorRegistrySmoke.test.ts | 24 ++++++++++++++ 5 files changed, 73 insertions(+), 4 deletions(-) create mode 100644 src/vs/workbench/services/themes/test/node/colorRegistrySmoke.test.ts diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 0476b5231b7d8..b3e2ba9afd6b6 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -9,6 +9,10 @@ "--vscode-activityBar-dropBorder", "--vscode-activityBar-foreground", "--vscode-activityBar-inactiveForeground", + "--vscode-activityBar-hoverForeground", + "--vscode-activityBar-hoverBackground", + "--vscode-activityBarTop-hoverForeground", + "--vscode-activityBarTop-hoverBackground", "--vscode-activityBarBadge-background", "--vscode-activityBarBadge-foreground", "--vscode-activityBarTop-activeBackground", diff --git a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css index 22cd4083df361..9ed4c2de60906 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css @@ -67,14 +67,22 @@ .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label.codicon, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.codicon, -.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.codicon { +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.codicon { color: var(--vscode-activityBar-foreground) !important; } +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.codicon { + /* hover can use a separate hover foreground and optional hover background */ + color: var(--vscode-activityBar-hoverForeground, var(--vscode-activityBar-foreground)) !important; + background-color: var(--vscode-activityBar-hoverBackground, transparent) !important; +} .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label.uri-icon, -.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.uri-icon, -.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.uri-icon { +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.uri-icon { background-color: var(--vscode-activityBar-foreground) !important; } +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.uri-icon { + background-color: var(--vscode-activityBar-hoverBackground, var(--vscode-activityBar-hoverForeground, var(--vscode-activityBar-foreground))) !important; +} + .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator:before, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .active-item-indicator:before { diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 143a09c1bf17c..32ec712ea91e4 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -473,7 +473,36 @@ export const ACTIVITY_BAR_TOP_INACTIVE_FOREGROUND = registerColor('activityBarTo export const ACTIVITY_BAR_TOP_DRAG_AND_DROP_BORDER = registerColor('activityBarTop.dropBorder', ACTIVITY_BAR_TOP_FOREGROUND, localize('activityBarTopDragAndDropBorder', "Drag and drop feedback color for the items in the Activity bar when it is on top / bottom. The activity allows to switch between views of the side bar.")); export const ACTIVITY_BAR_TOP_BACKGROUND = registerColor('activityBarTop.background', null, localize('activityBarTopBackground', "Background color of the activity bar when set to top / bottom.")); - +export const ACTIVITY_BAR_HOVER_FOREGROUND = registerColor( + 'activityBar.hoverForeground', + null, + localize('activityBarHoverForeground', 'Activity bar item foreground color when hovering.') +); +export const ACTIVITY_BAR_HOVER_BACKGROUND = registerColor( + 'activityBar.hoverBackground', + { + dark: null, + light: null, + hcDark: null, + hcLight: null + }, + localize('activityBarHoverBackground', 'Activity bar item background color when hovering.') +); +export const ACTIVITY_BAR_TOP_HOVER_FOREGROUND = registerColor( + 'activityBarTop.hoverForeground', + null, + localize('activityBarTopHoverForeground', 'Activity bar (top/bottom) item foreground color when hovering.') +); +export const ACTIVITY_BAR_TOP_HOVER_BACKGROUND = registerColor( + 'activityBarTop.hoverBackground', + { + dark: null, + light: null, + hcDark: null, + hcLight: null + }, + localize('activityBarTopHoverBackground', 'Activity bar (top/bottom) item background color when hovering.') +); // < --- Panels --- > diff --git a/src/vs/workbench/services/themes/common/workbenchThemeService.ts b/src/vs/workbench/services/themes/common/workbenchThemeService.ts index 9c0f9e254d359..aa951db041941 100644 --- a/src/vs/workbench/services/themes/common/workbenchThemeService.ts +++ b/src/vs/workbench/services/themes/common/workbenchThemeService.ts @@ -60,6 +60,8 @@ export const COLOR_THEME_DARK_INITIAL_COLORS = { 'activityBar.inactiveForeground': '#868686', 'activityBarBadge.background': '#0078D4', 'activityBarBadge.foreground': '#FFFFFF', + 'activityBar.hoverForeground': '#00a0df', + 'activityBar.hoverBackground': '#a4dcf3', 'badge.background': '#616161', 'badge.foreground': '#F8F8F8', 'button.background': '#0078D4', @@ -202,6 +204,8 @@ export const COLOR_THEME_LIGHT_INITIAL_COLORS = { 'activityBar.inactiveForeground': '#616161', 'activityBarBadge.background': '#005FB8', 'activityBarBadge.foreground': '#FFFFFF', + 'activityBar.hoverForeground': '#00a0df', + 'activityBar.hoverBackground': '#a4dcf3', 'badge.background': '#CCCCCC', 'badge.foreground': '#3B3B3B', 'button.background': '#005FB8', diff --git a/src/vs/workbench/services/themes/test/node/colorRegistrySmoke.test.ts b/src/vs/workbench/services/themes/test/node/colorRegistrySmoke.test.ts new file mode 100644 index 0000000000000..f011c3d982688 --- /dev/null +++ b/src/vs/workbench/services/themes/test/node/colorRegistrySmoke.test.ts @@ -0,0 +1,24 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import assert from 'assert'; +import { ensureNoDisposablesAreLeakedInTestSuite } from '../../../../../base/test/common/utils.js'; +import { + ACTIVITY_BAR_HOVER_FOREGROUND, + ACTIVITY_BAR_HOVER_BACKGROUND, + ACTIVITY_BAR_TOP_HOVER_FOREGROUND, + ACTIVITY_BAR_TOP_HOVER_BACKGROUND +} from '../../../../common/theme.js'; + +suite('Themes - Activity Bar hover color tokens (smoke)', () => { + ensureNoDisposablesAreLeakedInTestSuite(); + + test('hover color tokens are registered', () => { + assert.strictEqual(ACTIVITY_BAR_HOVER_FOREGROUND, 'activityBar.hoverForeground'); + assert.strictEqual(ACTIVITY_BAR_HOVER_BACKGROUND, 'activityBar.hoverBackground'); + assert.strictEqual(ACTIVITY_BAR_TOP_HOVER_FOREGROUND, 'activityBarTop.hoverForeground'); + assert.strictEqual(ACTIVITY_BAR_TOP_HOVER_BACKGROUND, 'activityBarTop.hoverBackground'); + }); +}); From e7304fa63a31b162c237a94bb42c5332c701d8e0 Mon Sep 17 00:00:00 2001 From: Shivank Gupta Date: Sat, 8 Nov 2025 16:41:03 +0530 Subject: [PATCH 2/3] Update src/vs/workbench/common/theme.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/vs/workbench/common/theme.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 32ec712ea91e4..7f225a3114442 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -480,12 +480,7 @@ export const ACTIVITY_BAR_HOVER_FOREGROUND = registerColor( ); export const ACTIVITY_BAR_HOVER_BACKGROUND = registerColor( 'activityBar.hoverBackground', - { - dark: null, - light: null, - hcDark: null, - hcLight: null - }, + null, localize('activityBarHoverBackground', 'Activity bar item background color when hovering.') ); export const ACTIVITY_BAR_TOP_HOVER_FOREGROUND = registerColor( From 124767b1d65e5d08d57fcfdcea786bb13a84c524 Mon Sep 17 00:00:00 2001 From: Shivank Gupta Date: Sat, 8 Nov 2025 16:41:15 +0530 Subject: [PATCH 3/3] Update src/vs/workbench/common/theme.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/vs/workbench/common/theme.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 7f225a3114442..8d7851b3c7005 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -490,12 +490,7 @@ export const ACTIVITY_BAR_TOP_HOVER_FOREGROUND = registerColor( ); export const ACTIVITY_BAR_TOP_HOVER_BACKGROUND = registerColor( 'activityBarTop.hoverBackground', - { - dark: null, - light: null, - hcDark: null, - hcLight: null - }, + null, localize('activityBarTopHoverBackground', 'Activity bar (top/bottom) item background color when hovering.') );