From 9c39b52bafd535ae83c4800841afbd0f8a1cedd7 Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Tue, 4 Oct 2022 15:29:50 -0400
Subject: [PATCH] Improves Graph row dimming

---
 src/webviews/apps/plus/graph/graph.scss | 12 ------------
 src/webviews/apps/plus/graph/graph.tsx  | 26 ++++++++++++++++++--------
 src/webviews/apps/shared/theme.ts       |  8 ++++++++
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index f05e13d..f91ec23 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/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 {
diff --git a/src/webviews/apps/plus/graph/graph.tsx b/src/webviews/apps/plus/graph/graph.tsx
index aeaac05..afd717a 100644
--- a/src/webviews/apps/plus/graph/graph.tsx
+++ b/src/webviews/apps/plus/graph/graph.tsx
@@ -316,18 +316,28 @@ export class GraphApp extends App<State> {
 				'--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,
diff --git a/src/webviews/apps/shared/theme.ts b/src/webviews/apps/shared/theme.ts
index e58ddf5..e5b7b7e 100644
--- a/src/webviews/apps/shared/theme.ts
+++ b/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();