fix(editor): Fix execution list hover & selection colour in dark mode

n8n-io · Jan 16, 2025 · 81381ee · 81381ee
1 parent da8aafc
commit 81381ee
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
@@ -227,6 +227,7 @@
 	--color-notification-background: var(--prim-gray-740);
 
 	// Execution
+	--execution-card-background: var(--color-foreground-light);
 	--execution-card-background-hover: var(--color-foreground-base);
 	--execution-selector-background: var(--prim-gray-740);
 	--execution-selector-text: var(--color-text-base);

diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
@@ -289,6 +289,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: var(--color-foreground-xlight);
 	--execution-card-background-hover: var(--color-foreground-light);
 	--execution-card-text-waiting: var(--color-secondary);
 	--execution-selector-background: var(--color-background-dark);

diff --git a/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsCard.vue b/packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsCard.vue
@@ -182,7 +182,7 @@ function onRetryMenuItemSelect(action: string): void {
 @import '@/styles/variables';
 
 .WorkflowExecutionsCard {
-	--execution-list-item-background: var(--color-foreground-xlight);
+	--execution-list-item-background: var(--execution-card-background);
 	--execution-list-item-highlight-background: var(--color-warning-tint-1);
 
 	display: flex;
@@ -200,7 +200,7 @@ function onRetryMenuItemSelect(action: string): void {
 	&:hover,
 	&.active {
 		.executionLink {
-			--execution-list-item-background: var(--color-foreground-light);
+			--execution-list-item-background: var(--execution-card-background-hover);
 		}
 	}