fix(editor): Fix issues in dark mode (#9068)

Co-authored-by: Giulio Andreini <andreini@netseven.it>
n8n-io · Apr 8, 2024 · 7467aa3 · 7467aa3
1 parent df56153
commit 7467aa3
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {