mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-19 22:37:31 -07:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(editor): Node background for executing nodes in dark mode (#9682)

Browse source
This commit is contained in:
Giulio Andreini 2024-06-10 16:02:47 +02:00 committed by GitHub
parent b652405a06
commit ae00b446a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/design-system/src/css/_tokens.dark.scss
View file

@ -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

8
packages/design-system/src/css/_tokens.scss
View file

@ -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

2
packages/editor-ui/src/components/NDVFloatingNodes.vue
View file

@ -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;

2
packages/editor-ui/src/components/NDVSubConnections.vue
View file

@ -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;

10
packages/editor-ui/src/components/Node.vue
View file

@ -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 {

2
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeConfigurable.vue
View file

@ -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);
}

2
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
View file

@ -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);
}

7
packages/editor-ui/src/n8n-theme-variables.scss
View file

@ -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);