mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests 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
6 changed files with 32 additions and 38 deletions
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 {
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([

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 { 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;
},