From 6d698fd97d896cab185cf61ee7b27ecf040923fc Mon Sep 17 00:00:00 2001 From: Alex Grozav Date: Thu, 15 Aug 2024 13:18:20 +0300 Subject: [PATCH] feat(editor): Improve node selection outline in new canvas (no-changelog) (#10430) --- packages/design-system/src/css/_tokens.dark.scss | 1 + packages/design-system/src/css/_tokens.scss | 1 + .../canvas/elements/nodes/render-types/CanvasNodeDefault.vue | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 6a812552ac..8865fb2e3e 100644 --- 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 index e65856f192..7b1adf0d36 100644 --- 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 index 4a62ee0e18..847c5bad2c 100644 --- 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 {