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

feat: migrate editor-ui to Vite.js and various DX improvements (N8N-2277) (#4061)

Browse Source 
* feat: Added vite.js dependencies.

* chore: Removed tests folder to follow same structure as design-system

* chore: Removed unused testing config.

* chore: Created vite.js index.html

* refactor: Updated scss structure and imports.

* refactor: Updated workflow building.

* fix: Cleared up all workflow dependency cycles. Added proper package.json imports config.

* feat: Got a working build using Vite. Need to fix issues next.

* fix: Progress! Getting process.env error.

* fix: Changed process.env to import.meta.env.

* fix: Fixed circular imports that used require(). Fixed monaco editor.

* chore: Removed commented code.

* chore: Cleaned up package.json

* feat: Made necessary changes to replace base path in css files.

* feat: Serve CSS files for `editor-ui` Vite migration (#4069)

⚡ Serve CSS files for Vite migration

* chore: Fixed package-lock.json.

* fix: Fixed build after centralized tsconfig update.

* fix: Removed lodash-es replacement.

* fix: Commented out vitest test command.

* style: Fixed linting issues.

* fix: Added lodash-es hotfix back.

* chore: Updated package-lock.json

* refactor: Renamed all n8n scss variables to no longer be defined as private.

* feat(editor): add application-wide el-button replacement.

* fix(editor): Fix import in page alert after merge.

* chore(editor): update package-lock.json.

* fix: Case sensitive lodash-es replacement for vue-agile.

* fix: add alias for lodash-es camelcase import.

* fix: add patch-package support for fixing quill

* feat: add patch-package on postinstall

* fix: update quill patch path.

* refactor: rename quill patch

* fix: update quill version.

* fix: update quill patch

* fix: fix linting rules after installing eslint in design-system

* fix: update date picker button to have primary color

* test: update callout component snapshots

* fix(editor): fix linting issues in editor after enabling eslint

* fix(cli): add /assets/* to auth ignore endpoints in server

* chore: update package-lock.json

* chore: update package-lock.json

* fix(editor): fix linting issues

* feat: add vite-legacy support

* fix: update workflow package interface imports to type imports.

* chore: update package-lock.json

* fix(editor) fix importing translations other than english

* fix(editor): remove test command until vitest is added

* fix: increase memory allocation for vite build

* fix: add patch-package patches to n8n-custom docker build

* fix: add performance and load time improvements

* fix: add proper typing to setNodeType

* chore: update package-lock.json

* style: use generic type for reduce in setNodeType

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
This commit is contained in:
Alex Grozav
2022-09-23 17:14:28 +03:00
committed by GitHub
parent e709cb5fe2
commit 27e2ce0470
248 changed files with 6220 additions and 10845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
packages/editor-ui/src/n8n-theme-variables.scss
View File

@@ -1,91 +1,91 @@
// Primary Theme Color
$--color-primary: var(--color-primary);
$color-primary: var(--color-primary);
// Dialog
$--custom-dialog-text-color: var(--color-text-dark);
$--custom-dialog-background: var(--color-background-xlight);
$custom-dialog-text-color: var(--color-text-dark);
$custom-dialog-background: var(--color-background-xlight);
$--custom-font-black: var(--color-text-dark);
$--custom-font-dark: var(--color-text-dark);
$--custom-font-light: var(--color-text-light);
$--custom-font-very-light: var(--color-text-light);
$custom-font-black: var(--color-text-dark);
$custom-font-dark: var(--color-text-dark);
$custom-font-light: var(--color-text-light);
$custom-font-very-light: var(--color-text-light);
$--custom-expression-text: var(--color-secondary);
$--custom-expression-background: var(--color-background-lighter);
$custom-expression-text: var(--color-secondary);
$custom-expression-background: var(--color-background-lighter);
// Badge
$--badge-danger-color: var(--color-danger);
$--badge-danger-background-color: var(--color-primary-tint-3);
$--badge-danger-border-color: var(--color-primary-tint-2);
$--badge-warning-background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);
$--badge-warning-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);;
$--badge-warning-color: var(--color-text-dark);
$badge-danger-color: var(--color-danger);
$badge-danger-background-color: var(--color-primary-tint-3);
$badge-danger-border-color: var(--color-primary-tint-2);
$badge-warning-background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);
$badge-warning-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);;
$badge-warning-color: var(--color-text-dark);
// Warning tooltip
$--warning-tooltip-color: var(--color-danger);
$warning-tooltip-color: var(--color-danger);
$--header-height: 65px;
$header-height: 65px;
// sidebar
$--sidebar-width: 65px;
$--sidebar-expanded-width: 200px;
$--sidebar-inactive-color: var(--color-foreground-xdark);
$--sidebar-active-color: $--color-primary;
$sidebar-width: 65px;
$sidebar-expanded-width: 200px;
$sidebar-inactive-color: var(--color-foreground-xdark);
$sidebar-active-color: $color-primary;
// gifts notification
$--gift-notification-active-color: $--color-primary;
$--gift-notification-inner-color: $--color-primary;
$--gift-notification-outer-color: var(--color-text-xlight);
$gift-notification-active-color: $color-primary;
$gift-notification-inner-color: $color-primary;
$gift-notification-outer-color: var(--color-text-xlight);
// based on element.io breakpoints
$--breakpoint-2xs: 600px;
$--breakpoint-xs: 768px;
$--breakpoint-sm: 992px;
$--breakpoint-md: 1200px;
$--breakpoint-lg: 1920px;
$breakpoint-2xs: 600px;
$breakpoint-xs: 768px;
$breakpoint-sm: 992px;
$breakpoint-md: 1200px;
$breakpoint-lg: 1920px;
// tags
$--tag-background-color: var(--color-foreground-base);
$--tag-text-color: var(--color-text-dark);
$--tag-close-background-color: var(--color-text-light);
$--tag-close-background-hover-color: var(--color-text-dark);
$tag-background-color: var(--color-foreground-base);
$tag-text-color: var(--color-text-dark);
$tag-close-background-color: var(--color-text-light);
$tag-close-background-hover-color: var(--color-text-dark);
// Node creator
$--node-creator-width: 385px;
$--node-creator-text-color: var(--color-text-dark);
$--node-creator-select-background-color: var(--color-background-base);
$--node-creator-background-color: var(--color-background-xlight);
$--node-creator-search-background-color: var(--color-background-xlight);
$--node-creator-border-color: var(--color-foreground-base);
$--node-creator-item-hover-border-color: var(--color-text-light);
$--node-creator-arrow-color: var(--color-text-light);
$--node-creator-no-results-background-color: var(--color-background-xlight);
$--node-creator-close-button-color: var(--color-text-xlight);
$--node-creator-search-clear-background-color: var(--color-text-light);
$--node-creator-search-clear-background-color-hover: var(--color-text-base);
$--node-creator-search-placeholder-color: var(--color-text-light);
$--node-creator-subcategory-panel-header-bacground-color: var(--color-background-base);
$--node-creator-description-color: var(--color-text-base);
$node-creator-width: 385px;
$node-creator-text-color: var(--color-text-dark);
$node-creator-select-background-color: var(--color-background-base);
$node-creator-background-color: var(--color-background-xlight);
$node-creator-search-background-color: var(--color-background-xlight);
$node-creator-border-color: var(--color-foreground-base);
$node-creator-item-hover-border-color: var(--color-text-light);
$node-creator-arrow-color: var(--color-text-light);
$node-creator-no-results-background-color: var(--color-background-xlight);
$node-creator-close-button-color: var(--color-text-xlight);
$node-creator-search-clear-background-color: var(--color-text-light);
$node-creator-search-clear-background-color-hover: var(--color-text-base);
$node-creator-search-placeholder-color: var(--color-text-light);
$node-creator-subcategory-panel-header-bacground-color: var(--color-background-base);
$node-creator-description-color: var(--color-text-base);
// trigger icon
$--trigger-icon-border-color: var(--color-text-lighter);
$--trigger-icon-background-color: var(--color-background-xlight);
$trigger-icon-border-color: var(--color-text-lighter);
$trigger-icon-background-color: var(--color-background-xlight);
// drawer
$--drawer-background-color: var(--color-background-xlight);
$drawer-background-color: var(--color-background-xlight);
// updates-panel
$--updates-panel-info-url-color: $--color-primary;
$--updates-panel-border: var(--border-base);
$--updates-panel-dark-background-color: var(--color-background-lighter);
$--updates-panel-description-text-color: var(--color-text-base);
$--updates-panel-text-color: var(--color-text-dark);
$updates-panel-info-url-color: $color-primary;
$updates-panel-border: var(--border-base);
$updates-panel-dark-background-color: var(--color-background-lighter);
$updates-panel-description-text-color: var(--color-text-base);
$updates-panel-text-color: var(--color-text-dark);
// versions card
$--version-card-name-text-color: var(--color-text-base);
$--version-card-background-color: var(--color-background-xlight);
$--version-card-border: var(--border-base);
$--version-card-description-text-color: var(--color-text-base);
$--version-card-release-date-text-color: var(--color-foreground-xdark);
$--version-card-box-shadow-color: hsla(var(--color-background-dark-h), var(--color-background-dark-s), var(--color-background-dark-l), .07);
$version-card-name-text-color: var(--color-text-base);
$version-card-background-color: var(--color-background-xlight);
$version-card-border: var(--border-base);
$version-card-description-text-color: var(--color-text-base);
$version-card-release-date-text-color: var(--color-foreground-xdark);
$version-card-box-shadow-color: hsla(var(--color-background-dark-h), var(--color-background-dark-s), var(--color-background-dark-l), .07);