feat(editor): Improve node selection outline in new canvas (no-change…

…log) (n8n-io#10430)
netroy · Aug 15, 2024 · 6d698fd · 6d698fd
1 parent 469896a
commit 6d698fd
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 1 deletion.
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
@@ -71,6 +71,7 @@
 	--color-canvas-dot: var(--prim-gray-670);
 	--color-canvas-read-only-line: var(--prim-gray-800);
 	--color-canvas-selected: var(--prim-gray-0-alpha-025);
+	--color-canvas-selected-transparent: var(--color-canvas-selected);
 
 	// Nodes
 	--color-node-background: var(--prim-gray-740);

diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
@@ -79,6 +79,7 @@
 	--color-canvas-dot: var(--prim-gray-120);
 	--color-canvas-read-only-line: var(--prim-gray-30);
 	--color-canvas-selected: var(--prim-gray-70);
+	--color-canvas-selected-transparent: hsla(var(--prim-gray-h), 47%, 30%, 0.1);
 
 	// Nodes
 	--color-node-background: var(--color-background-xlight);

diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -184,7 +184,7 @@ function openContextMenu(event: MouseEvent) {
 	 */
 
 	&.selected {
-		box-shadow: 0 0 0 4px var(--color-canvas-selected);
+		box-shadow: 0 0 0 8px var(--color-canvas-selected-transparent);
 	}
 
 	&.success {