admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 10:31:15 +00:00
Code Issues 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

474
packages/design-system/src/css/_tokens.scss Normal file
View File

@@ -0,0 +1,474 @@
@use 'sass:math';
@mixin theme {
--color-primary-h: 6.9;
--color-primary-s: 100%;
--color-primary-l: 67.6%;
--color-primary: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-l)
);
--color-primary-tint-1-l: 88%;
--color-primary-tint-1: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-1-l)
);
--color-primary-tint-2-l: 94.5%;
--color-primary-tint-2: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-2-l)
);
--color-primary-tint-3-l: 96.9%;
--color-primary-tint-3: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-3-l)
);
--color-primary-shade-1-l: 57.6%;
--color-primary-shade-1: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-shade-1-l)
);
--color-primary-shade-2-l: 23%;
--color-primary-shade-2: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-shade-2-l)
);
--color-avatar-accent-1-h: 40;
--color-avatar-accent-1-s: 15.3%;
--color-avatar-accent-1-l: 88.4%;
--color-avatar-accent-1: hsl(
var(--color-avatar-accent-1-h),
var(--color-avatar-accent-1-s),
var(--color-avatar-accent-1-l)
);
--color-avatar-accent-2-h: 212;
--color-avatar-accent-2-s: 71%;
--color-avatar-accent-2-l: 48.6%;
--color-avatar-accent-2: hsl(
var(--color-avatar-accent-2-h),
var(--color-avatar-accent-2-s),
var(--color-avatar-accent-2-l)
);
--color-secondary-h: 247;
--color-secondary-s: 49%;
--color-secondary-l: 53%;
--color-secondary: hsl(
var(--color-secondary-h),
var(--color-secondary-s),
var(--color-secondary-l)
);
--color-secondary-tint-1-h: 247;
--color-secondary-tint-1-s: 49%;
--color-secondary-tint-1-l: 85%;
--color-secondary-tint-1: hsl(
var(--color-secondary-tint-1-h),
var(--color-secondary-tint-1-s),
var(--color-secondary-tint-1-l)
);
--color-secondary-tint-2-h: 247;
--color-secondary-tint-2-s: 49%;
--color-secondary-tint-2-l: 92%;
--color-secondary-tint-2: hsl(
var(--color-secondary-tint-2-h),
var(--color-secondary-tint-2-s),
var(--color-secondary-tint-2-l)
);
--color-secondary-tint-3-h: 247;
--color-secondary-tint-3-s: 49%;
--color-secondary-tint-3-l: 95%;
--color-secondary-tint-3: hsl(
var(--color-secondary-tint-3-h),
var(--color-secondary-tint-3-s),
var(--color-secondary-tint-3-l)
);
--color-success-h: 150.4;
--color-success-s: 60%;
--color-success-l: 40.4%;
--color-success: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-l)
);
--color-success-tint-1-l: 90%;
--color-success-tint-1: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-tint-1-l)
);
--color-success-tint-2-l: 94.9%;
--color-success-tint-2: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-tint-2-l)
);
--color-success-light-h: 150;
--color-success-light-s: 54%;
--color-success-light-l: 70%;
--color-success-light: hsl(
var(--color-success-light-h),
var(--color-success-light-s),
var(--color-success-light-l)
);
--color-warning-h: 36;
--color-warning-s: 77%;
--color-warning-l: 57%;
--color-warning: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-l)
);
--color-warning-tint-1-h: 35;
--color-warning-tint-1-s: 77%;
--color-warning-tint-1-l: 84%;
--color-warning-tint-1: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-tint-1-l)
);
--color-warning-tint-2-h: 34;
--color-warning-tint-2-s: 80%;
--color-warning-tint-2-l: 96%;
--color-warning-tint-2: hsl(
var(--color-warning-tint-2-h),
var(--color-warning-tint-2-s),
var(--color-warning-tint-2-l)
);
--color-danger-h: 355;
--color-danger-s: 83%;
--color-danger-l: 52%;
--color-danger: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-l)
);
--color-danger-tint-1-l: 93.9%;
--color-danger-tint-1: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-tint-1-l)
);
--color-danger-tint-2-l: 96.9%;
--color-danger-tint-2: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-tint-2-l)
);
--color-info-h: 220;
--color-info-s: 4%;
--color-info-l: 58%;
--color-info: hsl(
var(--color-info-h),
var(--color-info-s),
var(--color-info-l)
);
--color-info-tint-1-l: 88%;
--color-info-tint-1: hsl(
var(--color-info-h),
var(--color-info-s),
var(--color-info-tint-1-l)
);
--color-info-tint-2-l: 96%;
--color-info-tint-2: hsl(
var(--color-info-h),
var(--color-info-s),
var(--color-info-tint-2-l)
);
--color-grey-h: 228;
--color-grey-s: 10%;
--color-grey-l: 80%;
--color-grey: hsl(
var(--color-grey-h),
var(--color-grey-s),
var(--color-grey-l)
);
--color-light-grey-h: 220;
--color-light-grey-s: 20%;
--color-light-grey-l: 88%;
--color-light-grey: hsl(
var(--color-light-grey-h),
var(--color-light-grey-s),
var(--color-light-grey-l)
);
--color-neutral-h: 228;
--color-neutral-s: 10%;
--color-neutral-l: 50%;
--color-neutral: hsl(
var(--color-neutral-h),
var(--color-neutral-s),
var(--color-neutral-l)
);
--color-text-dark-h: 0;
--color-text-dark-s: 0%;
--color-text-dark-l: 33.3%;
--color-text-dark: hsl(
var(--color-text-dark-h),
var(--color-text-dark-s),
var(--color-text-dark-l)
);
--color-text-base-h: 240;
--color-text-base-s: 4%;
--color-text-base-l: 51%;
--color-text-base: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
var(--color-text-base-l)
);
--color-text-light-h: 220;
--color-text-light-s: 4.2%;
--color-text-light-l: 58.2%;
--color-text-light: hsl(
var(--color-text-light-h),
var(--color-text-light-s),
var(--color-text-light-l)
);
--color-text-lighter-h: 222;
--color-text-lighter-s: 16.7%;
--color-text-lighter-l: 88.2%;
--color-text-lighter: hsl(
var(--color-text-lighter-h),
var(--color-text-lighter-s),
var(--color-text-lighter-l)
);
--color-text-xlight-h: 0;
--color-text-xlight-s: 0%;
--color-text-xlight-l: 100%;
--color-text-xlight: hsl(
var(--color-text-xlight-h),
var(--color-text-xlight-s),
var(--color-text-xlight-l)
);
--color-foreground-xdark-h: 220;
--color-foreground-xdark-s: 7.4%;
--color-foreground-xdark-l: 52.5%;
--color-foreground-xdark: hsl(
var(--color-foreground-xdark-h),
var(--color-foreground-xdark-s),
var(--color-foreground-xdark-l)
);
--color-foreground-dark-h: 228;
--color-foreground-dark-s: 9.6%;
--color-foreground-dark-l: 79.6%;
--color-foreground-dark: hsl(
var(--color-foreground-dark-h),
var(--color-foreground-dark-s),
var(--color-foreground-dark-l)
);
--color-foreground-base-h: 220;
--color-foreground-base-s: 20%;
--color-foreground-base-l: 88.2%;
--color-foreground-base: hsl(
var(--color-foreground-base-h),
var(--color-foreground-base-s),
var(--color-foreground-base-l)
);
--color-foreground-light-h: 0;
--color-foreground-light-s: 0%;
--color-foreground-light-l: 93.3%;
--color-foreground-light: hsl(
var(--color-foreground-light-h),
var(--color-foreground-light-s),
var(--color-foreground-light-l)
);
--color-foreground-xlight-h: 0;
--color-foreground-xlight-s: 0%;
--color-foreground-xlight-l: 100%;
--color-foreground-xlight: hsl(
var(--color-foreground-xlight-h),
var(--color-foreground-xlight-s),
var(--color-foreground-xlight-l)
);
--color-background-dark-h: 240;
--color-background-dark-s: 4.2%;
--color-background-dark-l: 18.8%;
--color-background-dark: hsl(
var(--color-background-dark-h),
var(--color-background-dark-s),
var(--color-background-dark-l)
);
--color-background-base-h: 220;
--color-background-base-s: 30%;
--color-background-base-l: 96.1%;
--color-background-base: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
var(--color-background-base-l)
);
--color-background-light-h: 220;
--color-background-light-s: 60%;
--color-background-light-l: 99%;
--color-background-light: hsl(
var(--color-background-light-h),
var(--color-background-light-s),
var(--color-background-light-l)
);
--color-background-lighter-h: 252;
--color-background-lighter-s: 71.4%;
--color-background-lighter-l: 98.6%;
--color-background-lighter: hsl(
var(--color-background-lighter-h),
var(--color-background-lighter-s),
var(--color-background-lighter-l)
);
--color-background-xlight-h: 0;
--color-background-xlight-s: 0%;
--color-background-xlight-l: 100%;
--color-background-xlight: hsl(
var(--color-background-xlight-h),
var(--color-background-xlight-s),
var(--color-background-xlight-l)
);
--color-canvas-dot-h: 204;
--color-canvas-dot-s: 15.6%;
--color-canvas-dot-l: 87.5%;
--color-canvas-dot: hsl(
var(--color-canvas-dot-h),
var(--color-canvas-dot-s),
var(--color-canvas-dot-l)
);
--color-canvas-background-h: 260;
--color-canvas-background-s: 100%;
--color-canvas-background-l: 99.4%;
--color-canvas-background: hsl(
var(--color-canvas-background-h),
var(--color-canvas-background-s),
var(--color-canvas-background-l)
);
--color-json-default: #5045A1;
--color-json-null: var(--color-danger);
--color-json-boolean: var(--color-success);
--color-json-number: var(--color-success);
--color-json-string: #5045A1;
--color-json-key: var(--color-text-dark);
--color-json-brackets: var(--color-text-dark);
--color-json-brackets-hover: #1890ff;
--color-json-line: #bfcbd9;
--color-json-highlight: #E2E5EE;
--color-sticky-default-background-h: 46;
--color-sticky-default-background-s: 100%;
--color-sticky-default-background-l: 92%;
--color-sticky-default-background: hsl(
var(--color-sticky-default-background-h),
var(--color-sticky-default-background-s),
var(--color-sticky-default-background-l)
);
--color-sticky-default-border-h: 43;
--color-sticky-default-border-s: 75%;
--color-sticky-default-border-l: 80%;
--color-sticky-default-border: hsl(
var(--color-sticky-default-border-h),
var(--color-sticky-default-border-s),
var(--color-sticky-default-border-l)
);
// Generated Color Shades from 50 to 950
// Not yet used in design system
@each $color in ('neutral', 'success', 'warning', 'danger') {
@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
--color-#{$color}-#{$shade}: hsl(
var(--color-#{$color}-h),
var(--color-#{$color}-s),
var(--color-#{$color}-#{$shade}-l)
);
}
}
--border-radius-xlarge: 12px;
--border-radius-large: 8px;
--border-radius-base: 4px;
--border-radius-small: 2px;
--border-color-base: var(--color-foreground-base);
--border-color-light: var(--color-foreground-light);
--border-style-base: solid;
--border-width-base: 1px;
--border-base: var(--border-width-base) var(--border-style-base)
var(--color-foreground-base);
--font-size-3xs: 0.625rem;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;
--font-size-s: 0.875rem;
--font-size-m: 1rem;
--font-size-l: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.75rem;
--font-line-height-compact: 1.25;
--font-line-height-regular: 1.3;
--font-line-height-loose: 1.35;
--font-line-height-xloose: 1.5;
--font-weight-regular: 400;
--font-weight-bold: 600;
--font-family: 'Open Sans', sans-serif;
--spacing-5xs: 0.125rem;
--spacing-4xs: 0.25rem;
--spacing-3xs: 0.375rem;
--spacing-2xs: 0.5rem;
--spacing-xs: 0.75rem;
--spacing-s: 1rem;
--spacing-m: 1.25rem;
--spacing-l: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 8rem;
--spacing-5xl: 16rem;
}
:root {
@include theme;
}