Merge pull request microsoft#269105 from microsoft/mrleemurray/quick-crane-green

Improve status bar item hover colors for accessibility

Author: mrleemurray

extensions/theme-defaults/themes/dark_modern.json

@@ -88,6 +88,8 @@
 		"sideBarTitle.foreground": "#CCCCCC",
 		"statusBar.background": "#181818",
 		"statusBar.border": "#2B2B2B",
+		"statusBarItem.hoverBackground": "#F1F1F133",
+		"statusBarItem.hoverForeground": "#FFFFFF",
 		"statusBar.debuggingBackground": "#0078D4",
 		"statusBar.debuggingForeground": "#FFFFFF",
 		"statusBar.focusBorder": "#0078D4",

extensions/theme-defaults/themes/light_modern.json

@@ -104,7 +104,8 @@
 		"statusBar.background": "#F8F8F8",
 		"statusBar.foreground": "#3B3B3B",
 		"statusBar.border": "#E5E5E5",
-		"statusBarItem.hoverBackground": "#B8B8B850",
+		"statusBarItem.hoverBackground": "#1F1F1F11",
+		"statusBarItem.hoverForeground": "#000000",
 		"statusBarItem.compactHoverBackground": "#CCCCCC",
 		"statusBar.debuggingBackground": "#FD716C",
 		"statusBar.debuggingForeground": "#000000",

src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css

@@ -177,8 +177,8 @@
 	outline-offset: -1px;
 }
 
-.monaco-workbench:not(.hc-light):not(.hc-black) .part.statusbar > .items-container > .statusbar-item a:hover:not(.disabled) {
-	background-color: var(--vscode-statusBarItem-hoverBackground);
+.monaco-workbench .part.statusbar > .items-container > .statusbar-item a:hover:not(.disabled) {
+	background-color: var(--vscode-statusBarItem-hoverBackground) !important;
 }
 
 /** Status bar entry item kinds */

src/vs/workbench/common/theme.ts

@@ -336,18 +336,18 @@ export const STATUS_BAR_ITEM_FOCUS_BORDER = registerColor('statusBarItem.focusBo
 
 export const STATUS_BAR_ITEM_HOVER_BACKGROUND = registerColor('statusBarItem.hoverBackground', {
 	dark: Color.white.transparent(0.12),
-	light: Color.white.transparent(0.12),
-	hcDark: Color.white.transparent(0.12),
-	hcLight: Color.black.transparent(0.12)
+	light: Color.black.transparent(0.12),
+	hcDark: Color.black,
+	hcLight: Color.white
 }, localize('statusBarItemHoverBackground', "Status bar item background color when hovering. The status bar is shown in the bottom of the window."));
 
 export const STATUS_BAR_ITEM_HOVER_FOREGROUND = registerColor('statusBarItem.hoverForeground', STATUS_BAR_FOREGROUND, localize('statusBarItemHoverForeground', "Status bar item foreground color when hovering. The status bar is shown in the bottom of the window."));
 
 export const STATUS_BAR_ITEM_COMPACT_HOVER_BACKGROUND = registerColor('statusBarItem.compactHoverBackground', {
-	dark: Color.white.transparent(0.20),
-	light: Color.white.transparent(0.20),
-	hcDark: Color.white.transparent(0.20),
-	hcLight: Color.black.transparent(0.20)
+	dark: Color.white.transparent(0.12),
+	light: Color.black.transparent(0.12),
+	hcDark: Color.black,
+	hcLight: Color.white
 }, localize('statusBarItemCompactHoverBackground', "Status bar item background color when hovering an item that contains two hovers. The status bar is shown in the bottom of the window."));
 
 export const STATUS_BAR_PROMINENT_ITEM_FOREGROUND = registerColor('statusBarItem.prominentForeground', STATUS_BAR_FOREGROUND, localize('statusBarProminentItemForeground', "Status bar prominent items foreground color. Prominent items stand out from other status bar entries to indicate importance. The status bar is shown in the bottom of the window."));