From 100291e109a7f46973bba3ddc4fb95ff379d4e5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?= =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?= =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?= Date: Wed, 1 Nov 2023 17:56:15 +0100 Subject: [PATCH] refactor(editor): Dark theme improvements (no-changelog) (#7574) Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> --- .../src/components/CodeNodeEditor/theme.ts | 14 +++++++---- packages/editor-ui/src/components/Node.vue | 18 +++++++------- packages/editor-ui/src/mixins/nodeBase.ts | 3 +-- packages/editor-ui/src/stores/ui.store.ts | 4 ++-- packages/editor-ui/src/utils/htmlUtils.ts | 7 ------ packages/editor-ui/src/utils/nodeViewUtils.ts | 24 +++++++++---------- 6 files changed, 32 insertions(+), 38 deletions(-) diff --git a/packages/editor-ui/src/components/CodeNodeEditor/theme.ts b/packages/editor-ui/src/components/CodeNodeEditor/theme.ts index ffaaf0cd35..64184abd7d 100644 --- a/packages/editor-ui/src/components/CodeNodeEditor/theme.ts +++ b/packages/editor-ui/src/components/CodeNodeEditor/theme.ts @@ -27,8 +27,6 @@ const BASE_STYLING = { }, }; -const cssStyleDeclaration = getComputedStyle(document.documentElement); - interface ThemeSettings { isReadOnly?: boolean; customMaxHeight?: string; @@ -43,8 +41,8 @@ export const codeNodeEditorTheme = ({ EditorView.theme({ '&': { 'font-size': BASE_STYLING.fontSize, - border: cssStyleDeclaration.getPropertyValue('--border-base'), - borderRadius: cssStyleDeclaration.getPropertyValue('--border-radius-base'), + border: 'var(--border-base)', + borderRadius: 'var(--border-radius-base)', backgroundColor: 'var(--color-code-background)', color: 'var(--color-code-foreground)', height: '100%', @@ -95,12 +93,18 @@ export const codeNodeEditorTheme = ({ }, '.cm-diagnosticAction': { backgroundColor: BASE_STYLING.diagnosticButton.backgroundColor, - color: cssStyleDeclaration.getPropertyValue('--color-primary'), + color: 'var(--color-primary)', lineHeight: BASE_STYLING.diagnosticButton.lineHeight, textDecoration: BASE_STYLING.diagnosticButton.textDecoration, marginLeft: BASE_STYLING.diagnosticButton.marginLeft, cursor: BASE_STYLING.diagnosticButton.cursor, }, + '.cm-diagnostic-error': { + backgroundColor: 'var(--color-background-base)', + }, + '.cm-diagnosticText': { + color: 'var(--color-text-base)', + }, }), syntaxHighlighting( HighlightStyle.define([ diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 9d20fb633a..98284c93a8 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -199,7 +199,7 @@ import NodeIcon from '@/components/NodeIcon.vue'; import TitledList from '@/components/TitledList.vue'; import { get } from 'lodash-es'; -import { getStyleTokenValue, getTriggerNodeServiceName } from '@/utils'; +import { getTriggerNodeServiceName } from '@/utils'; import type { INodeUi, XYPosition } from '@/Interface'; import { debounceHelper } from '@/mixins/debounce'; import { useUIStore } from '@/stores/ui.store'; @@ -488,31 +488,31 @@ export default defineComponent({ [key: string]: string; } = {}; - let borderColor = getStyleTokenValue('--color-foreground-xdark'); + let borderColor = '--color-foreground-xdark'; if (this.isConfigurableNode || this.isConfigNode) { - borderColor = getStyleTokenValue('--color-foreground-dark'); + borderColor = '--color-foreground-dark'; } if (this.data.disabled) { - borderColor = getStyleTokenValue('--color-foreground-base'); + borderColor = '--color-foreground-base'; } else if (!this.isExecuting) { if (this.hasIssues) { - borderColor = getStyleTokenValue('--color-danger'); + borderColor = '--color-danger'; returnStyles['border-width'] = '2px'; returnStyles['border-style'] = 'solid'; } else if (this.waiting || this.showPinnedDataInfo) { - borderColor = getStyleTokenValue('--color-canvas-node-pinned-border'); + borderColor = '--color-canvas-node-pinned-border'; } else if (this.nodeExecutionStatus === 'unknown') { - borderColor = getStyleTokenValue('--color-foreground-xdark'); + borderColor = '--color-foreground-xdark'; } else if (this.workflowDataItems) { returnStyles['border-width'] = '2px'; returnStyles['border-style'] = 'solid'; - borderColor = getStyleTokenValue('--color-success'); + borderColor = '--color-success'; } } - returnStyles['border-color'] = borderColor; + returnStyles['border-color'] = `var(${borderColor})`; return returnStyles; }, diff --git a/packages/editor-ui/src/mixins/nodeBase.ts b/packages/editor-ui/src/mixins/nodeBase.ts index c610d3d276..97a82ae31b 100644 --- a/packages/editor-ui/src/mixins/nodeBase.ts +++ b/packages/editor-ui/src/mixins/nodeBase.ts @@ -27,7 +27,6 @@ import * as NodeViewUtils from '@/utils/nodeViewUtils'; import { useHistoryStore } from '@/stores/history.store'; import { useCanvasStore } from '@/stores/canvas.store'; import type { EndpointSpec } from '@jsplumb/common'; -import { getStyleTokenValue } from '@/utils'; const createAddInputEndpointSpec = ( connectionName: NodeConnectionType, @@ -591,7 +590,7 @@ export const nodeBase = defineComponent({ nodeTypeData, this.__getEndpointColor(NodeConnectionType.Main), ), - fill: getStyleTokenValue('--node-error-output-color', true), + fill: 'var(--node-error-output-color)', }, cssClass: `dot-${type}-endpoint`, }; diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts index 7358971c8b..c8038fbd9d 100644 --- a/packages/editor-ui/src/stores/ui.store.ts +++ b/packages/editor-ui/src/stores/ui.store.ts @@ -62,7 +62,6 @@ import { useWorkflowsStore } from '@/stores/workflows.store'; import { useSettingsStore, useUsersStore } from '@/stores/settings.store'; import { useCloudPlanStore } from '@/stores/cloudPlan.store'; import { useTelemetryStore } from '@/stores/telemetry.store'; -import { getStyleTokenValue } from '@/utils/htmlUtils'; import { dismissBannerPermanently } from '@/api/ui'; import type { BannerName } from 'n8n-workflow'; @@ -412,7 +411,8 @@ export const useUIStore = defineStore(STORES.UI, { }; }, headerHeight() { - return Number(getStyleTokenValue('--header-height')); + const style = getComputedStyle(document.body); + return Number(style.getPropertyValue('--header-height')); }, }, actions: { diff --git a/packages/editor-ui/src/utils/htmlUtils.ts b/packages/editor-ui/src/utils/htmlUtils.ts index 7d5f4db345..48a6794e65 100644 --- a/packages/editor-ui/src/utils/htmlUtils.ts +++ b/packages/editor-ui/src/utils/htmlUtils.ts @@ -33,13 +33,6 @@ export function sanitizeHtml(dirtyHtml: string) { 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) { window.document.title = title; } diff --git a/packages/editor-ui/src/utils/nodeViewUtils.ts b/packages/editor-ui/src/utils/nodeViewUtils.ts index 6f7ee1b8d9..3edcf2fe64 100644 --- a/packages/editor-ui/src/utils/nodeViewUtils.ts +++ b/packages/editor-ui/src/utils/nodeViewUtils.ts @@ -1,4 +1,3 @@ -import { getStyleTokenValue } from '@/utils/htmlUtils'; import { isNumber, closestNumberDivisibleBy } from '@/utils'; import { NODE_OUTPUT_DEFAULT_KEY, STICKY_NODE_TYPE } from '@/constants'; 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 = { - stroke: getStyleTokenValue('--color-foreground-dark', true), + stroke: 'var(--color-foreground-dark)', strokeWidth: 2, outlineWidth: 12, outlineStroke: 'transparent', @@ -96,12 +95,12 @@ export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = { export const CONNECTOR_PAINT_STYLE_PULL: PaintStyle = { ...CONNECTOR_PAINT_STYLE_DEFAULT, - stroke: getStyleTokenValue('--color-foreground-xdark', true), + stroke: 'var(--color-foreground-xdark)', }; export const CONNECTOR_PAINT_STYLE_PRIMARY = { ...CONNECTOR_PAINT_STYLE_DEFAULT, - stroke: getStyleTokenValue('--color-primary', true), + stroke: 'var(--color-primary)', }; export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = { @@ -109,7 +108,7 @@ export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = { ...{ dashstyle: '5 3', }, - stroke: getStyleTokenValue('--color-foreground-dark', true), + stroke: 'var(--color-foreground-dark)', }; export const getConnectorColor = (type: ConnectionTypes, category?: string): string => { @@ -135,7 +134,7 @@ export const getConnectorPaintStylePull = (connection: Connection): PaintStyle = } return { ...CONNECTOR_PAINT_STYLE_PULL, - ...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}), + ...(connectorColor ? { stroke: `var(${connectorColor})` } : {}), ...additionalStyles, }; }; @@ -147,7 +146,7 @@ export const getConnectorPaintStyleDefault = (connection: Connection): PaintStyl ); return { ...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); return { ...CONNECTOR_PAINT_STYLE_DATA, - ...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}), + ...(connectorColor ? { stroke: `var(${connectorColor})` } : {}), }; }; @@ -261,8 +260,8 @@ export const getInputEndpointStyle = ( return { width, height, - fill: getStyleTokenValue(color), - stroke: getStyleTokenValue(color), + fill: `var(${color})`, + stroke: `var(${color})`, lineWidth: 0, }; }; @@ -298,7 +297,7 @@ export const getOutputEndpointStyle = ( color: string, ): PaintStyle => ({ strokeWidth: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9, - fill: getStyleTokenValue(color, true), + fill: `var(${color})`, outlineStroke: 'none', }); @@ -596,10 +595,9 @@ export const getBackgroundStyles = ( 'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`, }; if (squareSize > 10.5) { - const dotColor = getStyleTokenValue('--color-canvas-dot', true); return { ...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)`, }; }