fix(editor): Executions view popup in dark mode (#9517)

n8n-io · May 27, 2024 · 1abb26e · 1abb26e
1 parent 008f62a
commit 1abb26e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
@@ -154,8 +154,11 @@
 	// Notification
 	--color-notification-background: var(--prim-gray-740);
 
-	// Execution card
+	// Execution
 	--execution-card-background-hover: var(--color-foreground-base);
+	--execution-selector-background: var(--prim-gray-740);
+	--execution-selector-text: var(--color-text-base);
+	--execution-select-all-text: var(--color-text-base);
 
 	// NDV
 	--color-run-data-background: var(--prim-gray-800);

diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
@@ -201,13 +201,16 @@
 	// Notification
 	--color-notification-background: var(--color-background-xlight);
 
-	// Execution card
+	// Execution
 	--execution-card-border-success: var(--prim-color-alt-a-tint-300);
 	--execution-card-border-error: var(--prim-color-alt-c-tint-250);
 	--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);
+	--execution-selector-background: var(--color-background-dark);
+	--execution-selector-text: var(--color-text-xlight);
+	--execution-select-all-text: var(--color-danger);
 
 	// NDV
 	--color-run-data-background: var(--color-background-base);

diff --git a/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue b/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
@@ -454,9 +454,9 @@ async function onAutoRefreshToggle(value: boolean) {
 	left: 50%;
 	transform: translateX(-50%);
 	bottom: var(--spacing-3xl);
-	background: var(--color-background-dark);
+	background: var(--execution-selector-background);
 	border-radius: var(--border-radius-base);
-	color: var(--color-text-xlight);
+	color: var(--execution-selector-text);
 	font-size: var(--font-size-2xs);
 
 	button {
@@ -534,7 +534,7 @@ async function onAutoRefreshToggle(value: boolean) {
 .selectAll {
 	display: inline-block;
 	margin: 0 0 var(--spacing-s) var(--spacing-s);
-	color: var(--color-danger);
+	color: var(--execution-select-all-text);
 }
 
 .filterLoader {