fix(editor): Hover and active states not showing in execution list on…

… dark mode (#9002) Co-authored-by: Giulio Andreini <[email protected]>
n8n-io · Mar 29, 2024 · bead7eb · bead7eb
1 parent 8788e2a
commit bead7eb
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
@@ -135,6 +135,9 @@
 	// Notification
 	--color-notification-background: var(--prim-gray-740);
 
+	// Execution card
+	--execution-card-background-hover: var(--color-foreground-base);
+
 	// NDV
 	--color-run-data-background: var(--prim-gray-800);
 	--color-ndv-droppable-parameter: var(--prim-color-primary);

diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
@@ -202,6 +202,7 @@
 	--execution-card-border-waiting: var(--prim-color-secondary-tint-300);
 	--execution-card-border-running: var(--prim-color-alt-b-tint-250);
 	--execution-card-border-unknown: var(--prim-gray-120);
+	--execution-card-background-hover: var(--color-foreground-light);
 
 	// NDV
 	--color-run-data-background: var(--color-background-base);

diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
@@ -159,7 +159,7 @@ export default defineComponent({
 	&:hover,
 	&.active {
 		.executionLink {
-			background-color: var(--color-foreground-light);
+			background-color: var(--execution-card-background-hover);
 		}
 	}