Improves Graph row dimming

src/webviews/apps/plus/graph/graph.scss

@@ -597,18 +597,6 @@ a {
 		align-items: center;
 		justify-content: center;
 	}
-
-	.graph-zone-column {
-		.graph-row {
-			transition: opacity 0.2s ease-in;
-
-			&.is-missing-hovered-ref-group {
-				opacity: 0.2;
-				transition: opacity 0.5s ease-out;
-				transition-delay: 0.5s;
-			}
-		}
-	}
 }
 
 .mr-loose {

src/webviews/apps/plus/graph/graph.tsx

@@ -316,18 +316,28 @@ export class GraphApp extends App {
 				'--panel__bg0': computedStyle.getPropertyValue('--graph-panel-bg'),
 				'--panel__bg1': computedStyle.getPropertyValue('--graph-panel-bg2'),
 				'--section-border': computedStyle.getPropertyValue('--graph-panel-bg2'),
-				'--text-selected': computedStyle.getPropertyValue('--color-foreground'),
+
+				'--selected-row': computedStyle.getPropertyValue('--graph-selected-row'),
+				'--selected-row-border': isHighContrastTheme
+					? `1px solid ${computedStyle.getPropertyValue('--graph-contrast-border-color')}`
+					: 'none',
+				'--hover-row': computedStyle.getPropertyValue('--graph-hover-row'),
+				'--hover-row-border': isHighContrastTheme
+					? `1px dashed ${computedStyle.getPropertyValue('--graph-contrast-border-color')}`
+					: 'none',
+
+				'--text-selected': computedStyle.getPropertyValue('--graph-text-selected'),
 				'--text-selected-row': computedStyle.getPropertyValue('--graph-text-selected-row'),
-				'--text-normal': computedStyle.getPropertyValue('--color-foreground--85'),
-				'--text-secondary': computedStyle.getPropertyValue('--color-foreground--65'),
-				'--text-disabled': computedStyle.getPropertyValue('--color-foreground--50'),
+				'--text-hovered': computedStyle.getPropertyValue('--graph-text-hovered'),
+				'--text-dimmed-selected': computedStyle.getPropertyValue('--graph-text-dimmed-selected'),
+				'--text-dimmed': computedStyle.getPropertyValue('--graph-text-dimmed'),
+				'--text-normal': computedStyle.getPropertyValue('--graph-text-normal'),
+				'--text-secondary': computedStyle.getPropertyValue('--graph-text-secondary'),
+				'--text-disabled': computedStyle.getPropertyValue('--graph-text-disabled'),
+
 				'--text-accent': computedStyle.getPropertyValue('--color-link-foreground'),
 				'--text-inverse': computedStyle.getPropertyValue('--vscode-input-background'),
 				'--text-bright': computedStyle.getPropertyValue('--vscode-input-background'),
-				'--hover-row': computedStyle.getPropertyValue('--graph-hover-row'),
-				'--hover-row-border': isHighContrastTheme ? `1px dashed ${computedStyle.getPropertyValue('--graph-contrast-border-color')}` : 'none',
-				'--selected-row': computedStyle.getPropertyValue('--graph-selected-row'),
-				'--selected-row-border': isHighContrastTheme ? `1px solid ${computedStyle.getPropertyValue('--graph-contrast-border-color')}` : 'none',
 				...mixedGraphColors,
 			},
 			themeOpacityFactor: parseInt(computedStyle.getPropertyValue('--graph-theme-opacity-factor')) || 1,

src/webviews/apps/shared/theme.ts

@@ -121,6 +121,14 @@ export function initializeAndWatchThemeColors() {
 		bodyStyle.setProperty('--graph-hover-row', color);
 		color = computedStyle.getPropertyValue('--vscode-list-activeSelectionForeground').trim();
 		bodyStyle.setProperty('--graph-text-selected-row', color);
+		bodyStyle.setProperty('--graph-text-dimmed-selected', opacity(color, 50));
+		bodyStyle.setProperty('--graph-text-dimmed', opacity(foregroundColor, 20));
+		color = computedStyle.getPropertyValue('--vscode-list-hoverForeground').trim();
+		bodyStyle.setProperty('--graph-text-hovered', color);
+		bodyStyle.setProperty('--graph-text-selected', foregroundColor);
+		bodyStyle.setProperty('--graph-text-normal', opacity(foregroundColor, 85));
+		bodyStyle.setProperty('--graph-text-secondary', opacity(foregroundColor, 65));
+		bodyStyle.setProperty('--graph-text-disabled', opacity(foregroundColor, 50));
 
 		// alert colors
 		color = computedStyle.getPropertyValue('--vscode-inputValidation-infoBackground').trim();