From 61d812c07d367c7f995672b0aee7367deea20f90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <aditya@netroy.in>
Date: Fri, 13 Dec 2024 20:39:12 +0100
Subject: [PATCH] fix(editor): Use contrasting colors for popovers and tooltips

---
 packages/design-system/src/css/common/var.scss           | 9 +++++----
 packages/design-system/src/css/popper.scss               | 1 +
 packages/editor-ui/src/components/Sticky.vue             | 1 -
 .../nodes/toolbar/CanvasNodeStickyColorSelector.vue      | 1 -
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss
index aa1fddd842..a6f1b06884 100644
--- a/packages/design-system/src/css/common/var.scss
+++ b/packages/design-system/src/css/common/var.scss
@@ -748,14 +748,15 @@ $popover-title-font-color: var(--color-text-dark);
 /* Tooltip
 -------------------------- */
 /// color|1|Color|0
-$tooltip-fill: var(--color-background-dark);
+$tooltip-fill: var(--color-background-xlight);
 /// color|1|Color|0
-$tooltip-color: $color-white;
+$tooltip-color: var(--color-text-base);
 /// fontSize||Font|1
 $tooltip-font-size: 12px;
 /// color||Color|0
-$tooltip-border-color: var(--color-background-dark);
-$tooltip-arrow-size: 6px;
+$tooltip-border-color: var(--color-background-medium);
+$tooltip-border-width: 1px;
+$tooltip-arrow-size: 8px;
 /// padding||Spacing|3
 $tooltip-padding: 10px;
 
diff --git a/packages/design-system/src/css/popper.scss b/packages/design-system/src/css/popper.scss
index bbc1d6d144..c08dc8e383 100644
--- a/packages/design-system/src/css/popper.scss
+++ b/packages/design-system/src/css/popper.scss
@@ -114,6 +114,7 @@
 
 	@include mixins.when(dark) {
 		background: var.$tooltip-fill;
+		border: var.$tooltip-border-width solid var.$tooltip-border-color;
 		color: var.$tooltip-color;
 
 		&[data-popper-placement^='top'] .el-popper__arrow {
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index ea4e2d7aa2..4a6a2b47dc 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -358,7 +358,6 @@ const onContextMenu = (e: MouseEvent): void => {
 					<font-awesome-icon icon="trash" />
 				</div>
 				<n8n-popover
-					effect="dark"
 					trigger="click"
 					placement="top"
 					:popper-style="{ width: '208px' }"
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/toolbar/CanvasNodeStickyColorSelector.vue b/packages/editor-ui/src/components/canvas/elements/nodes/toolbar/CanvasNodeStickyColorSelector.vue
index 3b05bb5302..ca46443871 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/toolbar/CanvasNodeStickyColorSelector.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/toolbar/CanvasNodeStickyColorSelector.vue
@@ -59,7 +59,6 @@ onBeforeUnmount(() => {
 
 <template>
 	<N8nPopover
-		effect="dark"
 		trigger="click"
 		placement="top"
 		:popper-class="$style.popover"