mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(editor): Color palette updates, introduce dark mode (#6980)

Browse Source 
Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Mutasem <mutdmour@gmail.com>
This commit is contained in:
Giulio Andreini
2023-11-01 13:33:36 +01:00
committed by GitHub
parent b72040aa54
commit 0746783e02
81 changed files with 1694 additions and 1318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor-ui/src/components/Banner.vue
View File

@@ -112,7 +112,7 @@ export default defineComponent({
.dangerMessage {
composes: message;
color: var(--color-danger);
color: var(--color-callout-danger-font);
}
.banner {

2
packages/editor-ui/src/components/CodeNodeEditor/theme.ts
View File

@@ -61,6 +61,7 @@ export const codeNodeEditorTheme = ({
},
'&.cm-editor': {
...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
borderColor: 'var(--border-color-base)',
},
'&.cm-editor.cm-focused': {
outline: 'none',
@@ -78,6 +79,7 @@ export const codeNodeEditorTheme = ({
: 'var(--color-code-gutterBackground)',
color: 'var(--color-code-gutterForeground)',
borderRadius: 'var(--border-radius-base)',
borderRightColor: 'var(--border-color-base)',
},
'.cm-tooltip': {
maxWidth: BASE_STYLING.tooltip.maxWidth,

20
packages/editor-ui/src/components/CollectionParameter.vue
View File

@@ -208,7 +208,27 @@ export default defineComponent({
margin-top: var(--spacing-xs);
.button {
font-weight: var(--font-weight-normal);
--button-border-color: var(--color-foreground-base);
--button-background-color: var(--color-background-base);
--button-hover-font-color: var(--color-button-secondary-font);
--button-hover-border-color: var(--color-foreground-base);
--button-hover-background-color: var(--color-background-base);
--button-active-font-color: var(--color-button-secondary-font);
--button-active-border-color: var(--color-foreground-base);
--button-active-background-color: var(--color-background-base);
--button-focus-font-color: var(--color-button-secondary-font);
--button-focus-border-color: var(--color-foreground-base);
--button-focus-background-color: var(--color-background-base);
&:active,
&.active,
&:focus {
outline: none;
}
}
}

7
packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
View File

@@ -53,7 +53,12 @@
<template #content>
<div :class="$style.container" data-test-id="credential-edit-dialog">
<div :class="$style.sidebar">
<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
<n8n-menu
mode="tabs"
:items="sidebarItems"
:transparentBackground="true"
@select="onTabSelect"
></n8n-menu>
</div>
<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
<CredentialConfig

10
packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
View File

@@ -7,14 +7,16 @@
</template>
<script lang="ts" setup>
import { useUIStore } from '@/stores';
import { useRootStore } from '@/stores/n8nRoot.store';
const { baseUrl } = useRootStore();
const type = useUIStore().appliedTheme === 'dark' ? '.dark.png' : '.png';
const googleAuthButtons = {
'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal.png`,
'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus.png`,
'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed.png`,
'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled.png`,
'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal${type}`,
'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus${type}`,
'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed${type}`,
'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled${type}`,
};
</script>

2
packages/editor-ui/src/components/Error/NodeErrorView.vue
View File

@@ -271,7 +271,7 @@ export default defineComponent({
}
.error-message {
color: #ff0000;
color: var(--color-ndv-ouptut-error-font);
font-weight: bold;
font-size: 1.1rem;
}

19
packages/editor-ui/src/components/ExecutionsList.vue
View File

@@ -1074,7 +1074,7 @@ export default defineComponent({
top: calc(var(--spacing-3xl) * -1);
z-index: 2;
padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
background: var(--color-background-base);
background: var(--color-table-header-background);
&:first-child {
padding-left: var(--spacing-s);
@@ -1085,7 +1085,7 @@ export default defineComponent({
td {
height: 100%;
padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
background: var(--color-background-xlight);
background: var(--color-table-row-background);
&:not(:first-child, :nth-last-child(-n + 3)) {
width: 100%;
@@ -1127,33 +1127,33 @@ export default defineComponent({
}
&:nth-child(even) td {
background: var(--color-background-light);
background: var(--color-table-row-even-background);
}
&:hover td {
background: var(--color-primary-tint-3);
background: var(--color-table-row-hover-background);
}
&.crashed td:first-child::before,
&.failed td:first-child::before {
background: hsl(var(--color-danger-h), 94%, 80%);
background: var(--execution-card-border-error);
}
&.success td:first-child::before {
background: hsl(var(--color-success-h), 60%, 70%);
background: var(--execution-card-border-success);
}
&.new td:first-child::before,
&.running td:first-child::before {
background: hsl(var(--color-warning-h), 94%, 80%);
background: var(--execution-card-border-running);
}
&.waiting td:first-child::before {
background: hsl(var(--color-secondary-h), 94%, 80%);
background: var(--execution-card-border-waiting);
}
&.unknown td:first-child::before {
background: var(--color-text-light);
background: var(--execution-card-border-unknown);
}
}
}
@@ -1167,6 +1167,7 @@ export default defineComponent({
.loadedAll {
text-align: center;
font-size: var(--font-size-s);
color: var(--color-text-light);
margin: var(--spacing-l) 0;
}

11
packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
View File

@@ -170,7 +170,7 @@ export default defineComponent({
}
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-warning-h), 94%, 80%);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-running);
}
.statusLabel,
.spinner {
@@ -181,15 +181,14 @@ export default defineComponent({
&.success {
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-success-h), 60%, 70%);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-success);
}
}
&.waiting {
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base)
hsl(var(--color-secondary-h), 94%, 80%);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-waiting);
}
.statusLabel {
color: var(--color-secondary);
@@ -199,7 +198,7 @@ export default defineComponent({
&.error {
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-danger-h), 94%, 80%);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-error);
}
.statusLabel {
color: var(--color-danger);
@@ -209,7 +208,7 @@ export default defineComponent({
&.unknown {
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base) var(--color-text-light);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-unknown);
}
}
}

14
packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
View File

@@ -296,19 +296,7 @@ export default defineComponent({
}
.debugLink {
padding: 0;
height: 42px;
margin-right: var(--spacing-xs);
&.secondary {
a span {
color: var(--color-primary-shade-1);
}
}
a span {
display: block;
padding: var(--spacing-xs) var(--spacing-m);
color: var(--color-text-xlight);
}
}
</style>

1
packages/editor-ui/src/components/ExpressionEditorModal/theme.ts
View File

@@ -18,6 +18,7 @@ const commonThemeProps = {
height: '220px',
padding: 'var(--spacing-xs)',
color: 'var(--input-font-color, var(--color-text-dark))',
caretColor: 'var(--color-code-caret)',
},
'.cm-line': {
padding: '0',

8
packages/editor-ui/src/components/ExpressionParameterInput.vue
View File

@@ -164,6 +164,10 @@ export default defineComponent({
.expression-parameter-input {
position: relative;
:global(.cm-editor) {
background-color: var(--color-code-background);
}
.all-sections {
height: 30px;
display: flex;
@@ -188,7 +192,7 @@ export default defineComponent({
position: absolute;
right: 0;
bottom: 0;
background-color: white;
background-color: var(--color-code-background);
padding: 3px;
line-height: 9px;
border: var(--border-base);
@@ -219,6 +223,6 @@ export default defineComponent({
.focused > .expression-editor-modal-opener {
border-color: var(--color-secondary);
border-bottom-right-radius: 0;
background-color: white;
background-color: var(--color-code-background);
}
</style>

22
packages/editor-ui/src/components/FixedCollectionParameter.vue
View File

@@ -347,8 +347,28 @@ export default defineComponent({
padding-left: var(--spacing-s);
:deep(.button) {
--button-background-color: var(--color-background-base);
font-weight: var(--font-weight-normal);
--button-font-color: var(--color-text-dark);
--button-border-color: var(--color-foreground-base);
--button-background-color: var(--color-background-base);
--button-hover-font-color: var(--color-text-dark);
--button-hover-border-color: var(--color-foreground-base);
--button-hover-background-color: var(--color-background-base);
--button-active-font-color: var(--color-text-dark);
--button-active-border-color: var(--color-foreground-base);
--button-active-background-color: var(--color-background-base);
--button-focus-font-color: var(--color-text-dark);
--button-focus-border-color: var(--color-foreground-base);
--button-focus-background-color: var(--color-background-base);
&:active,
&.active,
&:focus {
outline: none;
}
}
}

2
packages/editor-ui/src/components/HtmlEditor/theme.ts
View File

@@ -20,6 +20,7 @@ export const theme = ({ isReadOnly }: { isReadOnly: boolean }) => [
},
'&.cm-editor': {
...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
borderColor: 'var(--border-color-base)',
},
'&.cm-editor.cm-focused': {
outline: '0',
@@ -40,6 +41,7 @@ export const theme = ({ isReadOnly }: { isReadOnly: boolean }) => [
color: 'var(--color-code-gutterForeground)',
borderTopLeftRadius: 'var(--border-radius-base)',
borderBottomLeftRadius: 'var(--border-radius-base)',
borderRightColor: 'var(--border-color-base)',
},
'.cm-scroller': {
overflow: 'auto',

8
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
View File

@@ -140,7 +140,7 @@ export default defineComponent({
flex-direction: column;
position: absolute;
z-index: 2; // cover tooltips
background: white;
background: var(--color-code-background);
border: var(--border-base);
border-top: none;
width: 100%;
@@ -148,6 +148,10 @@ export default defineComponent({
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
:global(.cm-editor) {
background-color: var(--color-code-background);
}
.header,
.body,
.footer {
@@ -179,7 +183,7 @@ export default defineComponent({
display: inline-block;
font-size: var(--font-size-2xs);
height: var(--font-size-m);
background-color: #f0f0f0;
background-color: var(--color-expression-syntax-example);
margin-left: var(--spacing-5xs);
margin-right: var(--spacing-5xs);
}

1
packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
View File

@@ -8,6 +8,7 @@ const commonThemeProps = {
'.cm-content': {
fontFamily: 'var(--font-family-monospace)',
color: 'var(--input-font-color, var(--color-text-dark))',
caretColor: 'var(--color-code-caret)',
},
'.cm-line': {
padding: '0',

2
packages/editor-ui/src/components/MainSidebar.vue
View File

@@ -18,7 +18,7 @@
<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
<template #header>
<div :class="$style.logo">
<img :src="logoPath" :class="$style.icon" alt="n8n" />
<img :src="logoPath" data-test-id="n8n-logo" :class="$style.icon" alt="n8n" />
</div>
</template>

4
packages/editor-ui/src/components/MainSidebarSourceControl.vue
View File

@@ -206,10 +206,6 @@ const goToSourceControlSetup = async () => {
display: none;
}
span {
color: var(--color-text-base);
}
button {
font-size: var(--font-size-3xs);
}

11
packages/editor-ui/src/components/Node.vue
View File

@@ -502,7 +502,7 @@ export default defineComponent({
returnStyles['border-width'] = '2px';
returnStyles['border-style'] = 'solid';
} else if (this.waiting || this.showPinnedDataInfo) {
borderColor = getStyleTokenValue('--color-secondary');
borderColor = getStyleTokenValue('--color-canvas-node-pinned-border');
} else if (this.nodeExecutionStatus === 'unknown') {
borderColor = getStyleTokenValue('--color-foreground-xdark');
} else if (this.workflowDataItems) {
@@ -781,7 +781,7 @@ export default defineComponent({
height: 100%;
border: 2px solid var(--color-foreground-xdark);
border-radius: var(--border-radius-large);
background-color: $node-background-default;
background-color: var(--color-canvas-node-background);
&.executing {
background-color: $node-background-executing !important;
@@ -1045,12 +1045,7 @@ export default defineComponent({
--node--selected--box-shadow-radius: 8px;
display: block;
background-color: hsla(
var(--color-foreground-base-h),
var(--color-foreground-base-s),
var(--color-foreground-base-l),
60%
);
background-color: var(--color-canvas-selected);
border-radius: var(--border-radius-xlarge);
overflow: hidden;
position: absolute;

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

@@ -170,13 +170,13 @@ function nodeTypeSelected(nodeTypes: string[]) {
pointer-events: all !important;
button {
border-color: var(--color-foreground-xdark);
color: var(--color-foreground-xdark);
border-color: var(--color-button-node-creator-border-font);
color: var(--color-button-node-creator-border-font);
&:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-background-xlight);
border-color: var(--color-button-node-creator-hover-border-font);
color: var(--color-button-node-creator-hover-border-font);
background: var(--color-button-node-creator-background);
}
}
}

2
packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
View File

@@ -174,7 +174,7 @@ onBeforeUnmount(() => {
left: $sidebar-width;
opacity: 0;
z-index: 1;
background: var(--color-background-dark);
background: var(--color-dialog-overlay-background);
pointer-events: none;
transition: opacity 200ms ease-in-out;

1
packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
View File

@@ -133,6 +133,7 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
.mouseOverTooltip {
opacity: 0;
margin-left: var(--spacing-3xs);
color: var(--color-foreground-xdark);
&:hover {
color: var(--color-primary);
}

4
packages/editor-ui/src/components/NodeDetailsView.vue
View File

@@ -783,6 +783,10 @@ $main-panel-width: 360px;
top: var(--spacing-xs);
left: var(--spacing-l);
span {
color: var(--color-ndv-back-font);
}
&:hover {
cursor: pointer;
}

4
packages/editor-ui/src/components/ParameterInput.vue
View File

@@ -1302,7 +1302,7 @@ export default defineComponent({
}
.droppable {
--input-border-color: var(--color-secondary);
--input-border-color: var(--color-ndv-droppable-parameter);
--input-border-style: dashed;
textarea,
@@ -1378,7 +1378,7 @@ export default defineComponent({
position: absolute;
right: 0;
bottom: 0;
background-color: white;
background-color: var(--color-code-background);
padding: 3px;
line-height: 9px;
border: var(--border-base);

2
packages/editor-ui/src/components/RunData.vue
View File

@@ -1509,7 +1509,7 @@ export default defineComponent({
position: relative;
width: 100%;
height: 100%;
background-color: var(--color-background-base);
background-color: var(--color-run-data-background);
display: flex;
flex-direction: column;
}

1
packages/editor-ui/src/components/RunDataJson.vue
View File

@@ -210,7 +210,6 @@ export default defineComponent({
word-break: normal;
height: 100%;
padding-bottom: var(--spacing-3xl);
background-color: var(--color-background-base);
&:hover {
/* Shows .actionsGroup element from <run-data-json-actions /> child component */

1
packages/editor-ui/src/components/RunDataSchema.vue
View File

@@ -111,7 +111,6 @@ const onDragEnd = (el: HTMLElement) => {
word-break: normal;
height: 100%;
width: 100%;
background-color: var(--color-background-base);
> div[class*='info'] {
padding: 0 var(--spacing-s);

7
packages/editor-ui/src/components/Sticky.vue
View File

@@ -313,12 +313,7 @@ export default defineComponent({
.select-sticky-background {
display: block;
position: absolute;
background-color: hsla(
var(--color-foreground-base-h),
var(--color-foreground-base-s),
var(--color-foreground-base-l),
60%
);
background-color: var(--color-canvas-selected);
border-radius: var(--border-radius-xlarge);
overflow: hidden;
height: calc(100% + 16px);

12
packages/editor-ui/src/components/TagsManager/NoTagsView.vue
View File

@@ -3,8 +3,10 @@
<el-col class="notags" :span="16">
<div class="icon">🗄️</div>
<div>
<div class="headline">
{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
<div class="mb-s">
<n8n-heading size="large">
{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
</n8n-heading>
</div>
<div class="description">
{{ $locale.baseText('noTagsView.withWorkflowTagsYouReFree') }}
@@ -47,12 +49,6 @@ $--footer-spacing: 45px;
line-height: 14px;
}
.headline {
font-size: 17.6px;
color: black;
margin-bottom: 12px;
}
.description {
font-size: 14px;
line-height: 21px;

11
packages/editor-ui/src/components/ValueSurvey.vue
View File

@@ -200,6 +200,10 @@ export default defineComponent({
margin-top: 10px;
padding: 0 15px;
}
h2 {
color: var(--color-value-survey-font);
}
}
.content {
@@ -214,6 +218,9 @@ export default defineComponent({
.wrapper {
display: flex;
flex-direction: column;
.text span {
color: var(--color-value-survey-font);
}
}
.buttons {
@@ -256,7 +263,7 @@ export default defineComponent({
}
.valueSurvey {
background: var(--color-background-dark);
background: var(--color-value-survey-background);
height: 120px;
top: auto;
@@ -278,7 +285,7 @@ export default defineComponent({
right: 16px;
position: absolute;
font-weight: var(--font-weight-bold);
color: var(--color-text-xlight);
color: var(--color-value-survey-font);
@media (max-width: $breakpoint-xs) {
top: 2px;

4
packages/editor-ui/src/components/VariablesRow.vue
View File

@@ -264,8 +264,8 @@ function focusFirstInput() {
.usageSyntax {
cursor: pointer;
background: var(--color-success-tint-2);
color: var(--color-success);
background: var(--color-variables-usage-syntax-bg);
color: var(--color-variables-usage-font);
font-family: var(--font-family-monospace);
font-size: var(--font-size-s);
}

2
packages/editor-ui/src/components/WorkflowActivator.vue
View File

@@ -163,7 +163,7 @@ export default defineComponent({
.could-not-be-started {
display: inline-block;
color: #ff4949;
color: var(--color-text-danger);
margin-left: 0.5em;
}
</style>