From 7467aa30e6c2a226cb9fee5f5d82fbd01db23e9e Mon Sep 17 00:00:00 2001 From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com> Date: Mon, 8 Apr 2024 09:21:54 +0300 Subject: [PATCH] fix(editor): Fix issues in dark mode (#9068) Co-authored-by: Giulio Andreini --- packages/design-system/src/css/_tokens.dark.scss | 5 ++++- packages/design-system/src/css/_tokens.scss | 3 +++ packages/editor-ui/src/components/BinaryDataDisplay.vue | 2 +- packages/editor-ui/src/components/Node.vue | 6 +++--- .../src/components/Node/NodeCreator/Panel/SearchBar.vue | 2 +- packages/editor-ui/src/mixins/nodeBase.ts | 2 +- packages/editor-ui/src/n8n-theme.scss | 1 - packages/editor-ui/src/utils/nodeViewUtils.ts | 2 +- 8 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index eb306801668f3..04cfe54ec5db7 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -96,7 +96,7 @@ --color-json-boolean: var(--prim-color-alt-a); --color-json-number: var(--prim-color-alt-a); --color-json-string: var(--prim-color-secondary-tint-200); - --color-json-key: var(--prim-gray-670); + --color-json-key: var(--color-text-dark); --color-json-brackets: var(--prim-gray-670); --color-json-brackets-hover: var(--prim-color-alt-e); --color-json-line: var(--prim-gray-200); @@ -191,6 +191,9 @@ // Input Triple --color-background-input-triple: var(--prim-gray-800); + // Node error + --color-node-error-output-text-color: var(--prim-color-alt-c-tint-150); + // Various --color-info-tint-1: var(--prim-gray-420); --color-info-tint-2: var(--prim-gray-740); diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index a02179d303b3b..0ac9d97618ffa 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -267,6 +267,9 @@ // Input Triple --color-background-input-triple: var(--color-background-light); + // Node error + --color-node-error-output-text-color: var(--color-danger); + // Various --color-avatar-accent-1: var(--prim-gray-120); --color-avatar-accent-2: var(--prim-color-alt-e-shade-100); diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue index 711923397592e..b84af41bb4feb 100644 --- a/packages/editor-ui/src/components/BinaryDataDisplay.vue +++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue @@ -99,7 +99,7 @@ export default defineComponent({ z-index: 10; width: 100%; height: calc(100% - 50px); - background-color: var(--color-background-base); + background-color: var(--color-run-data-background); overflow: hidden; text-align: center; diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index c3db780cb43f6..246373600002e 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -1294,10 +1294,10 @@ export default defineComponent({ &.error { path { - fill: var(--node-error-output-color); + fill: var(--color-node-error-output-text-color); } rect { - stroke: var(--node-error-output-color); + stroke: var(--color-node-error-output-text-color); } } @@ -1436,7 +1436,7 @@ export default defineComponent({ } .node-output-endpoint-label.node-connection-category-error { - color: var(--node-error-output-color); + color: var(--color-node-error-output-text-color); } .node-output-endpoint-label { diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue index 6f2bc8637ea14..eb43450826716 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue +++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue @@ -130,7 +130,7 @@ defineExpose({ } .clear { - background-color: $node-creator-search-clear-color; + background-color: transparent; padding: 0; border: none; cursor: pointer; diff --git a/packages/editor-ui/src/mixins/nodeBase.ts b/packages/editor-ui/src/mixins/nodeBase.ts index d80d813519af0..2852021bb0c31 100644 --- a/packages/editor-ui/src/mixins/nodeBase.ts +++ b/packages/editor-ui/src/mixins/nodeBase.ts @@ -600,7 +600,7 @@ export const nodeBase = defineComponent({ nodeTypeData, this.__getEndpointColor(NodeConnectionType.Main), ), - fill: 'var(--node-error-output-color)', + fill: 'var(--color-danger)', }, cssClass: `dot-${type}-endpoint`, }; diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss index 93061ca1296d8..d3eed63484613 100644 --- a/packages/editor-ui/src/n8n-theme.scss +++ b/packages/editor-ui/src/n8n-theme.scss @@ -170,7 +170,6 @@ var(--node-type-ai_vectorStore-color-s), var(--node-type-background-l) ); - --node-error-output-color: #991818; --chat--spacing: var(--spacing-s); diff --git a/packages/editor-ui/src/utils/nodeViewUtils.ts b/packages/editor-ui/src/utils/nodeViewUtils.ts index 15fc1e7384654..bafa67891200b 100644 --- a/packages/editor-ui/src/utils/nodeViewUtils.ts +++ b/packages/editor-ui/src/utils/nodeViewUtils.ts @@ -113,7 +113,7 @@ export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = { export const getConnectorColor = (type: ConnectionTypes, category?: string): string => { if (category === 'error') { - return '--node-error-output-color'; + return '--color-node-error-output-text-color'; } if (type === NodeConnectionType.Main) {