From ae00b446a79e86cf570287c904fd6dde41ddf71a Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Mon, 10 Jun 2024 16:02:47 +0200 Subject: [PATCH] fix(editor): Node background for executing nodes in dark mode (#9682) --- packages/design-system/src/css/_tokens.dark.scss | 8 ++++++-- packages/design-system/src/css/_tokens.scss | 8 ++++++-- packages/editor-ui/src/components/NDVFloatingNodes.vue | 2 +- .../editor-ui/src/components/NDVSubConnections.vue | 2 +- packages/editor-ui/src/components/Node.vue | 10 +++++----- .../nodes/render-types/CanvasNodeConfigurable.vue | 2 +- .../elements/nodes/render-types/CanvasNodeDefault.vue | 2 +- packages/editor-ui/src/n8n-theme-variables.scss | 7 ------- 8 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 2f20b13f95..5aa56c2677 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -47,9 +47,13 @@ --color-canvas-background-l: 18%; --color-canvas-dot: var(--prim-gray-670); --color-canvas-read-only-line: var(--prim-gray-800); - --color-canvas-node-background: var(--prim-gray-740); - --color-canvas-node-pinned-border: var(--prim-color-secondary-tint-100); --color-canvas-selected: var(--prim-gray-0-alpha-025); + + // Nodes + --color-node-background: var(--prim-gray-740); + --color-node-executing-background: var(--prim-gray-670); + --color-node-executing-other-background: var(--prim-gray-670); + --color-node-pinned-border: var(--prim-color-secondary-tint-100); --node-type-main-color: var(--prim-gray-420); // Sticky diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index 6a0293e609..ed8b5ac490 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -79,9 +79,13 @@ --color-canvas-background-l: 99%; --color-canvas-dot: var(--prim-gray-120); --color-canvas-read-only-line: var(--prim-gray-30); - --color-canvas-node-background: var(--color-background-xlight); - --color-canvas-node-pinned-border: var(--color-secondary); --color-canvas-selected: var(--prim-gray-70); + + // Nodes + --color-node-background: var(--color-background-xlight); + --color-node-executing-background: var(--color-primary-tint-3); + --color-node-executing-other-background: var(--color-primary-tint-3); + --color-node-pinned-border: var(--color-secondary); --node-type-main-color: var(--prim-gray-490); // Sticky diff --git a/packages/editor-ui/src/components/NDVFloatingNodes.vue b/packages/editor-ui/src/components/NDVFloatingNodes.vue index fd1aa2d054..626ca63191 100644 --- a/packages/editor-ui/src/components/NDVFloatingNodes.vue +++ b/packages/editor-ui/src/components/NDVFloatingNodes.vue @@ -202,7 +202,7 @@ defineExpose({ } .connectedNode { border: var(--border-base); - background-color: var(--color-canvas-node-background); + background-color: var(--color-node-background); border-radius: 100%; padding: var(--spacing-s); cursor: pointer; diff --git a/packages/editor-ui/src/components/NDVSubConnections.vue b/packages/editor-ui/src/components/NDVSubConnections.vue index 66032fe96d..d8187df358 100644 --- a/packages/editor-ui/src/components/NDVSubConnections.vue +++ b/packages/editor-ui/src/components/NDVSubConnections.vue @@ -406,7 +406,7 @@ defineExpose({ } .connectedNode { border: var(--border-base); - background-color: var(--color-canvas-node-background); + background-color: var(--color-node-background); border-radius: 100%; padding: var(--spacing-xs); cursor: pointer; diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 2668281e86..03f19d7b96 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -563,7 +563,7 @@ export default defineComponent({ returnStyles['border-style'] = 'solid'; } } else if (!!this.waiting || this.showPinnedDataInfo) { - borderColor = '--color-canvas-node-pinned-border'; + borderColor = '--color-node-pinned-border'; } else if (this.nodeExecutionStatus === 'unknown') { borderColor = '--color-foreground-xdark'; } else if (this.workflowDataItems) { @@ -909,10 +909,10 @@ export default defineComponent({ height: 100%; border: 2px solid var(--color-foreground-xdark); border-radius: var(--border-radius-large); - background-color: var(--color-canvas-node-background); - --color-background-node-icon-badge: var(--color-canvas-node-background); + background-color: var(--color-node-background); + --color-background-node-icon-badge: var(--color-node-background); &.executing { - background-color: $node-background-executing !important; + background-color: var(--color-node-executing-background) !important; .node-executing-info { display: inline-block; @@ -993,7 +993,7 @@ export default defineComponent({ border-radius: 50px; &.executing { - background-color: $node-background-executing-other !important; + background-color: var(--color-node-executing-other-background) !important; } .node-executing-info { diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue index 6a8a5d4fac..fb4554abb1 100644 --- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue +++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue @@ -63,7 +63,7 @@ const styles = computed(() => { display: flex; align-items: center; justify-content: center; - background: var(--canvas-node--background, var(--color-canvas-node-background)); + background: var(--canvas-node--background, var(--color-node-background)); border: 2px solid var(--canvas-node--border-color, var(--color-foreground-xdark)); border-radius: var(--border-radius-large); } 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 0fee29e777..7a301a8ce9 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 @@ -44,7 +44,7 @@ const styles = computed(() => { display: flex; align-items: center; justify-content: center; - background: var(--canvas-node--background, var(--color-canvas-node-background)); + background: var(--canvas-node--background, var(--color-node-background)); border: 2px solid var(--canvas-node--border-color, var(--color-foreground-xdark)); border-radius: var(--border-radius-large); } diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss index eb29815edd..b1cfe2ce58 100644 --- a/packages/editor-ui/src/n8n-theme-variables.scss +++ b/packages/editor-ui/src/n8n-theme-variables.scss @@ -62,13 +62,6 @@ $tag-text-color: var(--color-text-dark); $tag-close-background-color: var(--color-text-light); $tag-close-background-hover-color: var(--color-text-dark); -// nodes -$node-background-default: var(--color-background-xlight); -$node-background-executing: var(--color-primary-tint-3); -$node-background-executing-other: #ede9ff; -// TODO: Define that differently -$node-background-type-other: #ede9ff; - // Node creator $node-creator-width: 385px; $node-creator-text-color: var(--color-text-dark);