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

refactor(editor): Dark theme improvements (no-changelog) (#7574)

Browse source 
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™ 2023-11-01 17:56:15 +01:00 committed by GitHub
parent ff279ab411
commit 100291e109
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/editor-ui/src/components/CodeNodeEditor/theme.ts
View file

@ -27,8 +27,6 @@ const BASE_STYLING = {
}, },
}; };
const cssStyleDeclaration = getComputedStyle(document.documentElement);
interface ThemeSettings { interface ThemeSettings {
isReadOnly?: boolean; isReadOnly?: boolean;
customMaxHeight?: string; customMaxHeight?: string;
@ -43,8 +41,8 @@ export const codeNodeEditorTheme = ({
EditorView.theme({ EditorView.theme({
'&': { '&': {
'font-size': BASE_STYLING.fontSize, 'font-size': BASE_STYLING.fontSize,
border: cssStyleDeclaration.getPropertyValue('--border-base'), border: 'var(--border-base)',
borderRadius: cssStyleDeclaration.getPropertyValue('--border-radius-base'), borderRadius: 'var(--border-radius-base)',
backgroundColor: 'var(--color-code-background)', backgroundColor: 'var(--color-code-background)',
color: 'var(--color-code-foreground)', color: 'var(--color-code-foreground)',
height: '100%', height: '100%',
@ -95,12 +93,18 @@ export const codeNodeEditorTheme = ({
}, },
'.cm-diagnosticAction': { '.cm-diagnosticAction': {
backgroundColor: BASE_STYLING.diagnosticButton.backgroundColor, backgroundColor: BASE_STYLING.diagnosticButton.backgroundColor,
color: cssStyleDeclaration.getPropertyValue('--color-primary'), color: 'var(--color-primary)',
lineHeight: BASE_STYLING.diagnosticButton.lineHeight, lineHeight: BASE_STYLING.diagnosticButton.lineHeight,
textDecoration: BASE_STYLING.diagnosticButton.textDecoration, textDecoration: BASE_STYLING.diagnosticButton.textDecoration,
marginLeft: BASE_STYLING.diagnosticButton.marginLeft, marginLeft: BASE_STYLING.diagnosticButton.marginLeft,
cursor: BASE_STYLING.diagnosticButton.cursor, cursor: BASE_STYLING.diagnosticButton.cursor,
}, },
'.cm-diagnostic-error': {
backgroundColor: 'var(--color-background-base)',
},
'.cm-diagnosticText': {
color: 'var(--color-text-base)',
},
}), }),
syntaxHighlighting( syntaxHighlighting(
HighlightStyle.define([ HighlightStyle.define([

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

@ -199,7 +199,7 @@ import NodeIcon from '@/components/NodeIcon.vue';
import TitledList from '@/components/TitledList.vue'; import TitledList from '@/components/TitledList.vue';
import { get } from 'lodash-es'; import { get } from 'lodash-es';
import { getStyleTokenValue, getTriggerNodeServiceName } from '@/utils'; import { getTriggerNodeServiceName } from '@/utils';
import type { INodeUi, XYPosition } from '@/Interface'; import type { INodeUi, XYPosition } from '@/Interface';
import { debounceHelper } from '@/mixins/debounce'; import { debounceHelper } from '@/mixins/debounce';
import { useUIStore } from '@/stores/ui.store'; import { useUIStore } from '@/stores/ui.store';
@ -488,31 +488,31 @@ export default defineComponent({
[key: string]: string; [key: string]: string;
} = {}; } = {};
let borderColor = getStyleTokenValue('--color-foreground-xdark'); let borderColor = '--color-foreground-xdark';
if (this.isConfigurableNode || this.isConfigNode) { if (this.isConfigurableNode || this.isConfigNode) {
borderColor = getStyleTokenValue('--color-foreground-dark'); borderColor = '--color-foreground-dark';
} }
if (this.data.disabled) { if (this.data.disabled) {
borderColor = getStyleTokenValue('--color-foreground-base'); borderColor = '--color-foreground-base';
} else if (!this.isExecuting) { } else if (!this.isExecuting) {
if (this.hasIssues) { if (this.hasIssues) {
borderColor = getStyleTokenValue('--color-danger'); borderColor = '--color-danger';
returnStyles['border-width'] = '2px'; returnStyles['border-width'] = '2px';
returnStyles['border-style'] = 'solid'; returnStyles['border-style'] = 'solid';
} else if (this.waiting || this.showPinnedDataInfo) { } else if (this.waiting || this.showPinnedDataInfo) {
borderColor = getStyleTokenValue('--color-canvas-node-pinned-border'); borderColor = '--color-canvas-node-pinned-border';
} else if (this.nodeExecutionStatus === 'unknown') { } else if (this.nodeExecutionStatus === 'unknown') {
borderColor = getStyleTokenValue('--color-foreground-xdark'); borderColor = '--color-foreground-xdark';
} else if (this.workflowDataItems) { } else if (this.workflowDataItems) {
returnStyles['border-width'] = '2px'; returnStyles['border-width'] = '2px';
returnStyles['border-style'] = 'solid'; returnStyles['border-style'] = 'solid';
borderColor = getStyleTokenValue('--color-success'); borderColor = '--color-success';
} }
} }
returnStyles['border-color'] = borderColor; returnStyles['border-color'] = `var(${borderColor})`;
return returnStyles; return returnStyles;
}, },

3
packages/editor-ui/src/mixins/nodeBase.ts
View file

@ -27,7 +27,6 @@ import * as NodeViewUtils from '@/utils/nodeViewUtils';
import { useHistoryStore } from '@/stores/history.store'; import { useHistoryStore } from '@/stores/history.store';
import { useCanvasStore } from '@/stores/canvas.store'; import { useCanvasStore } from '@/stores/canvas.store';
import type { EndpointSpec } from '@jsplumb/common'; import type { EndpointSpec } from '@jsplumb/common';
import { getStyleTokenValue } from '@/utils';
const createAddInputEndpointSpec = ( const createAddInputEndpointSpec = (
connectionName: NodeConnectionType, connectionName: NodeConnectionType,
@ -591,7 +590,7 @@ export const nodeBase = defineComponent({
nodeTypeData, nodeTypeData,
this.__getEndpointColor(NodeConnectionType.Main), this.__getEndpointColor(NodeConnectionType.Main),
), ),
fill: getStyleTokenValue('--node-error-output-color', true), fill: 'var(--node-error-output-color)',
}, },
cssClass: `dot-${type}-endpoint`, cssClass: `dot-${type}-endpoint`,
}; };

4
packages/editor-ui/src/stores/ui.store.ts
View file

@ -62,7 +62,6 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
import { useSettingsStore, useUsersStore } from '@/stores/settings.store'; import { useSettingsStore, useUsersStore } from '@/stores/settings.store';
import { useCloudPlanStore } from '@/stores/cloudPlan.store'; import { useCloudPlanStore } from '@/stores/cloudPlan.store';
import { useTelemetryStore } from '@/stores/telemetry.store'; import { useTelemetryStore } from '@/stores/telemetry.store';
import { getStyleTokenValue } from '@/utils/htmlUtils';
import { dismissBannerPermanently } from '@/api/ui'; import { dismissBannerPermanently } from '@/api/ui';
import type { BannerName } from 'n8n-workflow'; import type { BannerName } from 'n8n-workflow';
@ -412,7 +411,8 @@ export const useUIStore = defineStore(STORES.UI, {
}; };
}, },
headerHeight() { headerHeight() {
return Number(getStyleTokenValue('--header-height')); const style = getComputedStyle(document.body);
return Number(style.getPropertyValue('--header-height'));
}, },
}, },
actions: { actions: {

7
packages/editor-ui/src/utils/htmlUtils.ts
View file

@ -33,13 +33,6 @@ export function sanitizeHtml(dirtyHtml: string) {
return sanitizedHtml; return sanitizedHtml;
} }
export function getStyleTokenValue(name: string, cssVariable = false): string {
if (cssVariable) return `var(${name})`;
const style = getComputedStyle(document.body);
return style.getPropertyValue(name);
}
export function setPageTitle(title: string) { export function setPageTitle(title: string) {
window.document.title = title; window.document.title = title;
} }

24
packages/editor-ui/src/utils/nodeViewUtils.ts
View file

@ -1,4 +1,3 @@
import { getStyleTokenValue } from '@/utils/htmlUtils';
import { isNumber, closestNumberDivisibleBy } from '@/utils'; import { isNumber, closestNumberDivisibleBy } from '@/utils';
import { NODE_OUTPUT_DEFAULT_KEY, STICKY_NODE_TYPE } from '@/constants'; import { NODE_OUTPUT_DEFAULT_KEY, STICKY_NODE_TYPE } from '@/constants';
import type { EndpointStyle, IBounds, INodeUi, XYPosition } from '@/Interface'; import type { EndpointStyle, IBounds, INodeUi, XYPosition } from '@/Interface';
@ -88,7 +87,7 @@ export const CONNECTOR_FLOWCHART_TYPE: ConnectorSpec = {
}; };
export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = { export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = {
stroke: getStyleTokenValue('--color-foreground-dark', true), stroke: 'var(--color-foreground-dark)',
strokeWidth: 2, strokeWidth: 2,
outlineWidth: 12, outlineWidth: 12,
outlineStroke: 'transparent', outlineStroke: 'transparent',
@ -96,12 +95,12 @@ export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = {
export const CONNECTOR_PAINT_STYLE_PULL: PaintStyle = { export const CONNECTOR_PAINT_STYLE_PULL: PaintStyle = {
...CONNECTOR_PAINT_STYLE_DEFAULT, ...CONNECTOR_PAINT_STYLE_DEFAULT,
stroke: getStyleTokenValue('--color-foreground-xdark', true), stroke: 'var(--color-foreground-xdark)',
}; };
export const CONNECTOR_PAINT_STYLE_PRIMARY = { export const CONNECTOR_PAINT_STYLE_PRIMARY = {
...CONNECTOR_PAINT_STYLE_DEFAULT, ...CONNECTOR_PAINT_STYLE_DEFAULT,
stroke: getStyleTokenValue('--color-primary', true), stroke: 'var(--color-primary)',
}; };
export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = { export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = {
@ -109,7 +108,7 @@ export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = {
...{ ...{
dashstyle: '5 3', dashstyle: '5 3',
}, },
stroke: getStyleTokenValue('--color-foreground-dark', true), stroke: 'var(--color-foreground-dark)',
}; };
export const getConnectorColor = (type: ConnectionTypes, category?: string): string => { export const getConnectorColor = (type: ConnectionTypes, category?: string): string => {
@ -135,7 +134,7 @@ export const getConnectorPaintStylePull = (connection: Connection): PaintStyle =
} }
return { return {
...CONNECTOR_PAINT_STYLE_PULL, ...CONNECTOR_PAINT_STYLE_PULL,
...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}), ...(connectorColor ? { stroke: `var(${connectorColor})` } : {}),
...additionalStyles, ...additionalStyles,
}; };
}; };
@ -147,7 +146,7 @@ export const getConnectorPaintStyleDefault = (connection: Connection): PaintStyl
); );
return { return {
...CONNECTOR_PAINT_STYLE_DEFAULT, ...CONNECTOR_PAINT_STYLE_DEFAULT,
...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}), ...(connectorColor ? { stroke: `var(${connectorColor})` } : {}),
}; };
}; };
@ -158,7 +157,7 @@ export const getConnectorPaintStyleData = (
const connectorColor = getConnectorColor(connection.parameters.type as ConnectionTypes, category); const connectorColor = getConnectorColor(connection.parameters.type as ConnectionTypes, category);
return { return {
...CONNECTOR_PAINT_STYLE_DATA, ...CONNECTOR_PAINT_STYLE_DATA,
...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}), ...(connectorColor ? { stroke: `var(${connectorColor})` } : {}),
}; };
}; };
@ -261,8 +260,8 @@ export const getInputEndpointStyle = (
return { return {
width, width,
height, height,
fill: getStyleTokenValue(color), fill: `var(${color})`,
stroke: getStyleTokenValue(color), stroke: `var(${color})`,
lineWidth: 0, lineWidth: 0,
}; };
}; };
@ -298,7 +297,7 @@ export const getOutputEndpointStyle = (
color: string, color: string,
): PaintStyle => ({ ): PaintStyle => ({
strokeWidth: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9, strokeWidth: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
fill: getStyleTokenValue(color, true), fill: `var(${color})`,
outlineStroke: 'none', outlineStroke: 'none',
}); });
@ -596,10 +595,9 @@ export const getBackgroundStyles = (
'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`, 'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
}; };
if (squareSize > 10.5) { if (squareSize > 10.5) {
const dotColor = getStyleTokenValue('--color-canvas-dot', true);
return { return {
...styles, ...styles,
'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, ${dotColor} ${dotSize}px, transparent 0)`, 'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, var(--color-canvas-dot) ${dotSize}px, transparent 0)`,
}; };
} }