From 1abb26e2dacc2891417ea66f6a5f3dccc4b784cd Mon Sep 17 00:00:00 2001
From: Giulio Andreini <g.andreini@gmail.com>
Date: Mon, 27 May 2024 15:30:29 +0200
Subject: [PATCH] fix(editor): Executions view popup in dark mode (#9517)

---
 packages/design-system/src/css/_tokens.dark.scss            | 5 ++++-
 packages/design-system/src/css/_tokens.scss                 | 5 ++++-
 .../components/executions/global/GlobalExecutionsList.vue   | 6 +++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index cce44df6c6..6ca311c0cc 100644
--- 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
index d40e4d8ae0..dadfe51043 100644
--- 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
index 32731bfb80..0572fafe53 100644
--- 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 {