From bead7eb840b3c6c074364c6a44d001ea561fee1f Mon Sep 17 00:00:00 2001 From: Ricardo Espinoza Date: Fri, 29 Mar 2024 11:13:48 -0400 Subject: [PATCH] fix(editor): Hover and active states not showing in execution list on dark mode (#9002) Co-authored-by: Giulio Andreini --- packages/design-system/src/css/_tokens.dark.scss | 3 +++ packages/design-system/src/css/_tokens.scss | 1 + .../editor-ui/src/components/ExecutionsView/ExecutionCard.vue | 2 +- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 2ce9b7c98f..eb30680166 100644 --- 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 index a54e4c329f..a02179d303 100644 --- 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 index cccdd3320a..eee8c47172 100644 --- 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); } }