Migrate over hover CSS rules

Ref #159088
microsoft · Nov 22, 2022 · edb79a5 · edb79a5
1 parent e43bf31
commit edb79a5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 50 deletions.
diff --git a/src/vs/workbench/services/hover/browser/hoverService.ts b/src/vs/workbench/services/hover/browser/hoverService.ts
@@ -6,7 +6,7 @@
 import 'vs/css!./media/hover';
 import { InstantiationType, registerSingleton } from 'vs/platform/instantiation/common/extensions';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { editorHoverBackground, editorHoverBorder, textLinkForeground, editorHoverForeground, editorHoverStatusBarBackground, textCodeBlockBackground, widgetShadow, textLinkActiveForeground, focusBorder, toolbarHoverBackground } from 'vs/platform/theme/common/colorRegistry';
+import { editorHoverBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IHoverService, IHoverOptions, IHoverWidget } from 'vs/workbench/services/hover/browser/hover';
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@@ -159,57 +159,9 @@ class HoverContextViewDelegate implements IDelegate {
 registerSingleton(IHoverService, HoverService, InstantiationType.Delayed);
 
 registerThemingParticipant((theme, collector) => {
-	const hoverBackground = theme.getColor(editorHoverBackground);
-	if (hoverBackground) {
-		collector.addRule(`.monaco-workbench .workbench-hover { background-color: ${hoverBackground}; }`);
-		collector.addRule(`.monaco-workbench .workbench-hover-pointer:after { background-color: ${hoverBackground}; }`);
-	}
 	const hoverBorder = theme.getColor(editorHoverBorder);
 	if (hoverBorder) {
-		collector.addRule(`.monaco-workbench .workbench-hover { border: 1px solid ${hoverBorder}; }`);
-		collector.addRule(`.monaco-workbench .workbench-hover-container.locked .workbench-hover { outline: 1px solid ${hoverBorder}; }`);
-
 		collector.addRule(`.monaco-workbench .workbench-hover .hover-row:not(:first-child):not(:empty) { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`);
 		collector.addRule(`.monaco-workbench .workbench-hover hr { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`);
-		collector.addRule(`.monaco-workbench .workbench-hover hr { border-bottom: 0px solid ${hoverBorder.transparent(0.5)}; }`);
-
-		collector.addRule(`.monaco-workbench .workbench-hover-pointer:after { border-right: 1px solid ${hoverBorder}; }`);
-		collector.addRule(`.monaco-workbench .workbench-hover-pointer:after { border-bottom: 1px solid ${hoverBorder}; }`);
-	}
-	const focus = theme.getColor(focusBorder);
-	if (focus) {
-		collector.addRule(`.monaco-workbench .workbench-hover-container.locked .workbench-hover:focus { outline-color: ${focus}; }`);
-		collector.addRule(`.monaco-workbench .workbench-hover-lock:focus { outline: 1px solid ${focus}; }`);
-	}
-	const toolbarHoverBackgroundColor = theme.getColor(toolbarHoverBackground);
-	if (toolbarHoverBackgroundColor) {
-		collector.addRule(`.monaco-workbench .workbench-hover-container.locked .workbench-hover-lock:hover { background-color: ${toolbarHoverBackgroundColor}; }`);
-	}
-	const link = theme.getColor(textLinkForeground);
-	if (link) {
-		collector.addRule(`.monaco-workbench .workbench-hover a { color: ${link}; }`);
-	}
-	const linkHover = theme.getColor(textLinkActiveForeground);
-	if (linkHover) {
-		collector.addRule(`.monaco-workbench .workbench-hover a:hover { color: ${linkHover}; }`);
-	}
-	const hoverForeground = theme.getColor(editorHoverForeground);
-	if (hoverForeground) {
-		collector.addRule(`.monaco-workbench .workbench-hover { color: ${hoverForeground}; }`);
-	}
-	const actionsBackground = theme.getColor(editorHoverStatusBarBackground);
-	if (actionsBackground) {
-		collector.addRule(`.monaco-workbench .workbench-hover .hover-row .actions { background-color: ${actionsBackground}; }`);
-	}
-	const codeBackground = theme.getColor(textCodeBlockBackground);
-	if (codeBackground) {
-		collector.addRule(`.monaco-workbench .workbench-hover code { background-color: ${codeBackground}; }`);
-	}
-});
-
-registerThemingParticipant((theme, collector) => {
-	const widgetShadowColor = theme.getColor(widgetShadow);
-	if (widgetShadowColor) {
-		collector.addRule(`.monaco-workbench .workbench-hover { box-shadow: 0 2px 8px ${widgetShadowColor}; }`);
 	}
 });
diff --git a/src/vs/workbench/services/hover/browser/media/hover.css b/src/vs/workbench/services/hover/browser/media/hover.css
@@ -11,6 +11,14 @@
 	z-index: 40;
 	overflow: hidden;
 	max-width: 700px;
+	background: var(--vscode-editorHoverWidget-background);
+	border: 1px solid var(--vscode-editorHoverWidget-border);
+	color: var(--vscode-editorHoverWidget-foreground);
+	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
+}
+
+.monaco-workbench .workbench-hover hr {
+	border-bottom: none;
 }
 
 .monaco-workbench .workbench-hover:not(.skip-fade-in) {
@@ -25,6 +33,17 @@
 	padding: 2px 8px;
 }
 
+.monaco-workbench .workbench-hover-container.locked .workbench-hover {
+	outline: 1px solid var(--vscode-editorHoverWidget-border);
+}
+.monaco-workbench .workbench-hover-container.locked .workbench-hover:focus,
+.monaco-workbench .workbench-hover-lock:focus {
+	outline: 1px solid var(--vscode-focusBorder);
+}
+.monaco-workbench .workbench-hover-container.locked .workbench-hover-lock:hover {
+	background: var(--vscode-toolbar-hoverBackground);
+}
+
 .monaco-workbench .workbench-hover-pointer {
 	position: absolute;
 	/* Must be higher than workbench hover z-index */
@@ -37,6 +56,9 @@
 	position: absolute;
 	width: 5px;
 	height: 5px;
+	background-color: var(--vscode-editorHoverWidget-background);
+	border-right: 1px solid var(--vscode-editorHoverWidget-border);
+	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
 }
 .monaco-workbench .locked .workbench-hover-pointer:after {
 	width: 4px;
@@ -67,7 +89,27 @@
 }
 
 .monaco-workbench .workbench-hover a {
-	color: #3794ff;
+	color: var(--vscode-textLink-foreground);
+}
+
+.monaco-workbench .workbench-hover a:focus {
+	outline: 1px solid;
+	outline-offset: -1px;
+	text-decoration: underline;
+	outline-color: var(--vscode-focusBorder);
+}
+
+.monaco-workbench .workbench-hover a:hover,
+.monaco-workbench .workbench-hover a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+.monaco-workbench .workbench-hover code {
+	background: var(--vscode-textCodeBlock-background);
+}
+
+.monaco-workbench .workbench-hover .hover-row .actions {
+	background: var(--vscode-editorHoverWidget-statusBarBackground);
 }
 
 .monaco-workbench .workbench-hover.right-aligned {