mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 21:37:32 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Move all colors to css variables (#3723)

Browse source 
* update white color

* update white color

* update more whites

* update color

* update curr running

* update text color #555

* update white color

* set search bar colors

* update colors

* update node executing

* update text colors

* update light color

* update theme

* update theme

* update overlays carousel

* update theme vars

* add dark theme tokens

* update text

* update table colors

* fix conflict

* update colors
This commit is contained in:
Mutasem Aldmour 2022-07-26 12:45:55 +02:00 committed by GitHub
parent 92614c81ab
commit b4525d06ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 411 additions and 402 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nSpinner/Spinner.vue
View file

@ -50,7 +50,7 @@ export default {
position: absolute;
width: 48px;
height: 48px;
border: 4px solid #fff;
border: 4px solid var(--color-foreground-xlight);
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--color-primary) transparent transparent transparent;

524
packages/design-system/theme/src/_tokens.dark.scss
View file

@ -1,296 +1,316 @@
@use 'sass:math';
@mixin theme {
--color-primary-h: 7;
--color-primary-s: 100%;
--color-primary-l: 68%;
--color-primary: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-l)
);
--color-primary-h: 7;
--color-primary-s: 100%;
--color-primary-l: 68%;
--color-primary: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-l)
);
--color-primary-tint-1-l: 18%;
--color-primary-tint-1: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-1-l)
);
--color-primary-tint-1-l: 18%;
--color-primary-tint-1: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-1-l)
);
--color-primary-tint-2-l: 9%;
--color-primary-tint-2: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-2-l)
);
--color-primary-tint-2-l: 9%;
--color-primary-tint-2: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-2-l)
);
--color-primary-tint-3-l: 3%;
--color-primary-tint-3: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-3-l)
);
--color-primary-tint-3-l: 3%;
--color-primary-tint-3: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-3-l)
);
--color-primary-shade-1-l: 89%;
--color-primary-shade-1: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-shade-1-l)
);
--color-primary-shade-1-l: 89%;
--color-primary-shade-1: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-shade-1-l)
);
--color-secondary-h: 247;
--color-secondary-s: 100%;
--color-secondary-l: 35%;
--color-secondary: hsl(
var(--color-secondary-h),
var(--color-secondary-s),
var(--color-secondary-l)
);
--color-secondary-h: 247;
--color-secondary-s: 100%;
--color-secondary-l: 55%;
--color-secondary: hsl(
var(--color-secondary-h),
var(--color-secondary-s),
var(--color-secondary-l)
);
--color-success-h: 150;
--color-success-s: 74%;
--color-success-l: 60%;
--color-success: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-l)
);
--color-success-h: 150;
--color-success-s: 74%;
--color-success-l: 60%;
--color-success: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-l)
);
--color-success-tint-1-l: 12%;
--color-success-tint-1: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-tint-1-l)
);
--color-success-tint-1-l: 12%;
--color-success-tint-1: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-tint-1-l)
);
--color-success-tint-2-l: 3%;
--color-success-tint-2: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-tint-2-l)
);
--color-success-tint-2-l: 3%;
--color-success-tint-2: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-tint-2-l)
);
--color-warning-h: 36;
--color-warning-s: 77%;
--color-warning-l: 43%;
--color-warning: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-l)
);
--color-warning-h: 36;
--color-warning-s: 77%;
--color-warning-l: 43%;
--color-warning: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-l)
);
--color-warning-tint-1-l: 12%;
--color-warning-tint-1: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-tint-1-l)
);
--color-warning-tint-1-l: 12%;
--color-warning-tint-1: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-tint-1-l)
);
--color-warning-tint-2-l: 4%;
--color-warning-tint-2: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-tint-2-l)
);
--color-warning-tint-2-l: 4%;
--color-warning-tint-2: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-tint-2-l)
);
--color-danger-h: 0;
--color-danger-s: 88%;
--color-danger-l: 35%;
--color-danger: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-l)
);
--color-danger-h: 0;
--color-danger-s: 88%;
--color-danger-l: 35%;
--color-danger: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-l)
);
--color-danger-tint-1-l: 8%;
--color-danger-tint-1: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-tint-1-l)
);
--color-danger-tint-1-l: 8%;
--color-danger-tint-1: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-tint-1-l)
);
--color-danger-tint-2-l: 3%;
--color-danger-tint-2: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-tint-2-l)
);
--color-danger-tint-2-l: 3%;
--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: 42%;
--color-info: hsl(
var(--color-info-h),
var(--color-info-s),
var(--color-info-l)
);
--color-info-h: 220;
--color-info-s: 4%;
--color-info-l: 82%;
--color-info: hsl(
var(--color-info-h),
var(--color-info-s),
var(--color-info-l)
);
--color-info-tint-1-l: 12%;
--color-info-tint-1: hsl(
var(--color-info-h),
var(--color-info-s),
var(--color-info-tint-1-l)
);
--color-info-tint-1-l: 12%;
--color-info-tint-1: hsl(
var(--color-info-h),
var(--color-info-s),
var(--color-info-tint-1-l)
);
--color-info-tint-2-l: 4%;
--color-info-tint-2: hsl(
var(--color-info-h),
var(--color-info-s),
var(--color-info-tint-2-l)
);
--color-info-tint-2-l: 4%;
--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-text-dark-h: 0;
--color-text-dark-s: 0%;
--color-text-dark-l: 100%;
--color-text-dark: hsl(
var(--color-text-dark-h),
var(--color-text-dark-s),
var(--color-text-dark-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-text-base-h: 240;
--color-text-base-s: 4%;
--color-text-base-l: 70%;
--color-text-base: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
var(--color-text-base-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-light-h: 220;
--color-text-light-s: 4%;
--color-text-light-l: 82%;
--color-text-light: hsl(
var(--color-text-light-h),
var(--color-text-light-s),
var(--color-text-light-l)
);
--color-text-dark-h: 0;
--color-text-dark-s: 0%;
--color-text-dark-l: 100%;
--color-text-dark: hsl(
var(--color-text-dark-h),
var(--color-text-dark-s),
var(--color-text-dark-l)
);
--color-text-lighter-h: 222;
--color-text-lighter-s: 17%;
--color-text-lighter-l: 92%;
--color-text-lighter: hsl(
var(--color-text-lighter-h),
var(--color-text-lighter-s),
var(--color-text-lighter-l)
);
--color-text-base-h: 240;
--color-text-base-s: 4%;
--color-text-base-l: 49%;
--color-text-base: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
var(--color-text-base-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-text-light-h: 220;
--color-text-light-s: 4%;
--color-text-light-l: 42%;
--color-text-light: hsl(
var(--color-text-light-h),
var(--color-text-light-s),
var(--color-text-light-l)
);
--color-foreground-base-h: 220;
--color-foreground-base-s: 20%;
--color-foreground-base-l: 30%;
--color-foreground-base: hsl(
var(--color-foreground-base-h),
var(--color-foreground-base-s),
var(--color-foreground-base-l)
);
--color-text-lighter-h: 222;
--color-text-lighter-s: 17%;
--color-text-lighter-l: 12%;
--color-text-lighter: hsl(
var(--color-text-lighter-h),
var(--color-text-lighter-s),
var(--color-text-lighter-l)
);
--color-foreground-light-h: 0;
--color-foreground-light-s: 0%;
--color-foreground-light-l: 7%;
--color-foreground-light: hsl(
var(--color-foreground-light-h),
var(--color-foreground-light-s),
var(--color-foreground-light-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-xlight-h: 0;
--color-foreground-xlight-s: 0%;
--color-foreground-xlight-l: 0%;
--color-foreground-xlight: hsl(
var(--color-foreground-xlight-h),
var(--color-foreground-xlight-s),
var(--color-foreground-xlight-l)
);
--color-foreground-base-h: 220;
--color-foreground-base-s: 20%;
--color-foreground-base-l: 12%;
--color-foreground-base: hsl(
var(--color-foreground-base-h),
var(--color-foreground-base-s),
var(--color-foreground-base-l)
);
--color-background-dark-h: 0;
--color-background-dark-s: 0%;
--color-background-dark-l: 100%;
--color-background-dark: hsl(
var(--color-background-dark-h),
var(--color-background-dark-s),
var(--color-background-dark-l)
);
--color-foreground-light-h: 0;
--color-foreground-light-s: 0%;
--color-foreground-light-l: 7%;
--color-foreground-light: hsl(
var(--color-foreground-light-h),
var(--color-foreground-light-s),
var(--color-foreground-light-l)
);
--color-background-base-h: 0;
--color-background-base-s: 0%;
--color-background-base-l: 10%;
--color-background-base: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
var(--color-background-base-l)
);
--color-foreground-xlight-h: 0;
--color-foreground-xlight-s: 0%;
--color-foreground-xlight-l: 0%;
--color-foreground-xlight: hsl(
var(--color-foreground-xlight-h),
var(--color-foreground-xlight-s),
var(--color-foreground-xlight-l)
);
--color-background-light-h: 220;
--color-background-light-s: 27%;
--color-background-light-l: 0%;
--color-background-light: hsl(
var(--color-background-light-h),
var(--color-background-light-s),
var(--color-background-light-l)
);
--color-background-dark-h: 0;
--color-background-dark-s: 0%;
--color-background-dark-l: 100%;
--color-background-dark: hsl(
var(--color-background-dark-h),
var(--color-background-dark-s),
var(--color-background-dark-l)
);
--color-background-lighter-h: 0;
--color-background-lighter-s: 0%;
--color-background-lighter-l: 36%;
--color-background-lighter: hsl(
var(--color-background-lighter-h),
var(--color-background-lighter-s),
var(--color-background-lighter-l)
);
--color-background-base-h: 252;
--color-background-base-s: 71%;
--color-background-base-l: 99%;
--color-background-base: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
var(--color-background-base-l)
);
--color-background-xlight-h: 240;
--color-background-xlight-s: 4%;
--color-background-xlight-l: 19%;
--color-background-xlight: hsl(
var(--color-background-xlight-h),
var(--color-background-xlight-s),
var(--color-background-xlight-l)
);
--color-background-light-h: 220;
--color-background-light-s: 27%;
--color-background-light-l: 98%;
--color-background-light: hsl(
var(--color-background-light-h),
var(--color-background-light-s),
var(--color-background-light-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-background-lighter-h: 220;
--color-background-lighter-s: 30%;
--color-background-lighter-l: 96%;
--color-background-lighter: hsl(
var(--color-background-lighter-h),
var(--color-background-lighter-s),
var(--color-background-lighter-l)
);
--color-canvas-background-h: 90;
--color-canvas-background-s: 10%;
--color-canvas-background-l: 0%;
--color-canvas-background: hsl(
var(--color-canvas-background-h),
var(--color-canvas-background-s),
var(--color-canvas-background-l)
);
--color-background-xlight-h: 240;
--color-background-xlight-s: 4%;
--color-background-xlight-l: 19%;
--color-background-xlight: hsl(
var(--color-background-xlight-h),
var(--color-background-xlight-s),
var(--color-background-xlight-l)
);
--color-sticky-default-background-h: 46;
--color-sticky-default-background-s: 100%;
--color-sticky-default-background-l: 12%;
--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)
);
--color-json-default: #5045A1;
--color-json-null: var(--color-danger);
--color-json-boolean: #1d8ce0;
--color-json-number: #1d8ce0;
--color-json-string: #726b9f;
--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: hsl(226, 13%, 71%);
// 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));
@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));
}
}
}
}
body.theme-dark {

2
packages/design-system/theme/src/autocomplete.scss
View file

@ -65,7 +65,7 @@
height: 100px;
line-height: 100px;
font-size: 20px;
color: #999;
color: var(--color-text-light);
@include utils.utils-vertical-center;
&:hover {

2
packages/design-system/theme/src/calendar.scss
View file

@ -3,7 +3,7 @@
@use "button-group";
@include mixins.b(calendar) {
background-color: #fff;
background-color: var(--color-foreground-xlight);
@include mixins.e(header) {
display: flex;

14
packages/design-system/theme/src/common/var.scss
View file

@ -17,8 +17,8 @@ $color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
/* Color
-------------------------- */
$color-white: #ffffff;
$color-black: #000000;
$color-white: var(--color-foreground-xlight);
$color-black: var(--color-foreground-dark);
$color-primary-light-1: function.lightness(
--color-primary-h,
@ -275,7 +275,7 @@ $disabled-border-base: var(--disabled-border, var(--border-color-base));
/* Icon
-------------------------- */
$icon-color: #666;
$icon-color: var(--color-text-base);
$icon-color-base: var(--color-info);
/* Checkbox
@ -412,7 +412,7 @@ $select-font-size: $font-size-base;
$select-close-hover-color: var(--color-text-light);
$select-input-color: var(--color-text-lighter);
$select-multiple-input-color: #666;
$select-multiple-input-color: var(--color-text-base);
/// color||Color|0
$select-input-focus-border-color: var(--color-secondary);
/// fontSize||Font|1
@ -434,7 +434,7 @@ $select-group-font-size: 12px;
$select-dropdown-background: $color-white;
$select-dropdown-shadow: $box-shadow-light;
$select-dropdown-empty-color: #999;
$select-dropdown-empty-color: var(--color-text-light);
/// height||Other|4
$select-dropdown-max-height: 274px;
$select-dropdown-padding: 6px 0;
@ -986,7 +986,7 @@ $datepicker-inrange-hover-background-color: var(--border-color-light);
$datepicker-active-color: var(--color-primary);
/// color||Color|0
$datepicker-hover-font-color: var(--color-primary);
$datepicker-cell-hover-color: #fff;
$datepicker-cell-hover-color: var(--color-foreground-xlight);
/* Loading
--------------------------*/
@ -1128,7 +1128,7 @@ $form-label-font-size: $font-size-base;
/* Avatar
--------------------------*/
/// color||Color|0
$avatar-font-color: #fff;
$avatar-font-color: var(--color-text-xlight);
/// color||Color|0
$avatar-background-color: #c0c4cc;
/// fontSize||Font Size|1

2
packages/design-system/theme/src/date-picker/picker-panel.scss
View file

@ -68,7 +68,7 @@
font-size: 12px;
&[disabled] {
color: #cccccc;
color: var(--color-text-lighter);
cursor: not-allowed;
}
}

14
packages/design-system/theme/src/image.scss
View file

@ -73,7 +73,7 @@
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
color: var(--color-foreground-xlight);
background-color: #606266;
}
@ -93,7 +93,7 @@
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
border-color: var(--color-foreground-xlight);
border-radius: 22px;
@include mixins.e(actions__inner) {
@ -102,7 +102,7 @@
text-align: justify;
cursor: default;
font-size: 23px;
color: #fff;
color: var(--color-foreground-xlight);
display: flex;
align-items: center;
justify-content: space-around;
@ -115,9 +115,9 @@
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
color: var(--color-foreground-xlight);
background-color: #606266;
border-color: #fff;
border-color: var(--color-foreground-xlight);
left: 40px;
}
@ -127,9 +127,9 @@
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
color: var(--color-foreground-xlight);
background-color: #606266;
border-color: #fff;
border-color: var(--color-foreground-xlight);
right: 40px;
text-indent: 2px;
}

4
packages/design-system/theme/src/menu.scss
View file

@ -68,7 +68,7 @@
&:not(.is-disabled):hover,
&:not(.is-disabled):focus {
background-color: #fff;
background-color: var(--color-foreground-xlight);
}
}
& > .el-submenu {
@ -96,7 +96,7 @@
color: var(--color-text-light);
&:hover {
background-color: #fff;
background-color: var(--color-foreground-xlight);
}
}
& .el-submenu__icon-arrow {

2
packages/design-system/theme/src/mixins/mixins.scss
View file

@ -21,7 +21,7 @@
-------------------------- */
@mixin scroll-bar {
$scrollbar-thumb-background: #b4bccc;
$scrollbar-track-background: #fff;
$scrollbar-track-background: var(--color-foreground-xlight);
&::-webkit-scrollbar {
z-index: 11;

6
packages/design-system/theme/src/table.scss
View file

@ -44,7 +44,7 @@
@include mixins.e(expand-icon) {
position: relative;
cursor: pointer;
color: #666;
color: var(--color-text-base);
font-size: 12px;
transition: transform 0.2s ease-in-out;
height: 20px;
@ -461,12 +461,12 @@
left: 7px;
&.ascending {
border-bottom-color: var(--color-text-lighter);
border-bottom-color: var(--color-text-light);
top: 5px;
}
&.descending {
border-top-color: var(--color-text-lighter);
border-top-color: var(--color-text-light);
bottom: 7px;
}
}

4
packages/design-system/theme/src/tabs.scss
View file

@ -405,7 +405,7 @@
}
.el-tabs__item.is-left.is-active {
border: 1px solid var(--border-color-base);
border-right-color: #fff;
border-right-color: var(--color-foreground-xlight);
border-left: none;
border-bottom: none;
@ -477,7 +477,7 @@
}
.el-tabs__item.is-right.is-active {
border: 1px solid var(--border-color-base);
border-left-color: #fff;
border-left-color: var(--color-foreground-xlight);
border-right: none;
border-bottom: none;

2
packages/design-system/theme/src/tree.scss
View file

@ -48,7 +48,7 @@
@include mixins.when(drop-inner) {
> .el-tree-node__content .el-tree-node__label {
background-color: var(--color-primary);
color: #fff;
color: var(--color-foreground-xlight);
}
}

12
packages/design-system/theme/src/upload.scss
View file

@ -60,7 +60,7 @@
}
@include mixins.b(upload-dragger) {
background-color: #fff;
background-color: var(--color-foreground-xlight);
border: 1px dashed #d9d9d9;
border-radius: 6px;
box-sizing: border-box;
@ -276,7 +276,7 @@
.el-upload-list__item {
overflow: hidden;
background-color: #fff;
background-color: var(--color-foreground-xlight);
border: 1px solid #c0ccda;
border-radius: 6px;
box-sizing: border-box;
@ -339,7 +339,7 @@
top: 0;
cursor: default;
text-align: center;
color: #fff;
color: var(--color-foreground-xlight);
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.5);
@ -391,7 +391,7 @@
.el-upload-list__item {
overflow: hidden;
z-index: 0;
background-color: #fff;
background-color: var(--color-foreground-xlight);
border: 1px solid #c0ccda;
border-radius: 6px;
box-sizing: border-box;
@ -462,7 +462,7 @@
background: #13ce66;
text-align: center;
transform: rotate(45deg);
box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px var(--color-text-light);
i {
font-size: 12px;
@ -510,7 +510,7 @@
font-size: 12px;
margin-top: 11px;
transform: rotate(-45deg);
color: #fff;
color: var(--color-foreground-xlight);
}
}

2
packages/editor-ui/src/components/BinaryDataDisplay.vue
View file

@ -117,7 +117,7 @@ export default mixins(
}
.binary-data {
background-color: #fff;
background-color: var(--color-foreground-xlight);
&.image {
max-height: calc(100% - 1em);

2
packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
View file

@ -68,7 +68,7 @@ export default mixins(
<style lang="scss">
.binary-data {
background-color: #fff;
background-color: var(--color-foreground-xlight);
&.image {
max-height: calc(100% - 1em);

8
packages/editor-ui/src/components/CollectionsCarousel.vue
View file

@ -142,7 +142,9 @@ export default mixins(genericHelpers).extend({
&:after {
left: 27px;
background: linear-gradient(270deg, rgba(255, 255, 255, 0.25) 0%, rgba(248, 249, 251, 1) 86%);
background: linear-gradient(270deg,
hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 50%),
hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 100%));
}
}
@ -151,7 +153,9 @@ export default mixins(genericHelpers).extend({
right: -30px;
&:after {
right: 27px;
background: linear-gradient(270deg,rgba(248, 249, 251, 1) 25%, rgba(255, 255, 255, 0.25) 100%);
background: linear-gradient(90deg,
hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 50%),
hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 100%));
}
}
</style>

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

@ -259,7 +259,7 @@ details[open] {
}
.el-divider__text {
background-color: #f9f9f9;
background-color: var(--color-background-light);
}
.box-card {

4
packages/editor-ui/src/components/ExecutionsList.vue
View file

@ -803,11 +803,11 @@ export default mixins(
<style lang="scss">
.currently-running {
background-color: $--color-primary-light !important;
background-color: var(--color-primary-tint-3) !important;
}
.el-table tr:hover.currently-running td {
background-color: darken($--color-primary-light, 3% ) !important;
background-color: var(--color-primary-tint-2) !important;
}
</style>

2
packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
View file

@ -58,7 +58,7 @@ div.el-input {
&:hover {
input:not(:focus) {
border: $--custom-input-border-shadow
border: 1px solid var(--color-text-lighter);
}
}
}

4
packages/editor-ui/src/components/ExpressionEdit.vue
View file

@ -211,7 +211,7 @@ export default mixins(
}
.right-side {
background-color: #f9f9f9;
background-color: var(--color-background-light);
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
@ -222,7 +222,7 @@ export default mixins(
border-top-left-radius: 8px;
background-color: var(--color-background-base);
color: #555;
color: var(--color-text-dark);
border-bottom: 1px solid $--color-primary;
margin-bottom: 1em;

14
packages/editor-ui/src/components/ExpressionInput.vue
View file

@ -304,8 +304,8 @@ export default mixins(
.variable-value {
font-weight: bold;
color: #000;
background-color: #c0c0c0;
color: var(--color-text-dark);
background-color: var(--color-text-base);
padding: 3px;
border-radius: 3px;
}
@ -315,21 +315,21 @@ export default mixins(
left: -3px;
top: -8px;
display: none;
color: #fff;
color: var(--color-text-xlight);
font-weight: bold;
padding: 2px 4px;
}
.variable-wrapper:hover .variable-delete {
display: inline;
background-color: #AA2200;
background-color: var(--color-danger);
border-radius: 5px;
}
.variable {
font-weight: bold;
color: #000;
background-color: #c0c0c0;
background-color: var(--color-text-base);
padding: 3px;
border-radius: 3px;
margin: 0 2px;
@ -339,11 +339,11 @@ export default mixins(
}
&.invalid {
background-color: #e25e5e;
background-color: var(--color-danger);
}
&.valid {
background-color: #37ac37;
background-color: var(--color-success);
}
}

2
packages/editor-ui/src/components/HoverableNodeIcon.vue
View file

@ -92,7 +92,7 @@ export default Vue.extend({
'line-height': this.size + 'px',
'border-radius': this.circle ? '50%' : '2px',
...(this.disabled && {
color: '#ccc',
color: 'var(--color-text-light)',
'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
filter: 'contrast(40%) brightness(1.5) grayscale(100%)',
}),

2
packages/editor-ui/src/components/MainHeader/MainHeader.vue
View file

@ -57,7 +57,7 @@ export default mixins(
.main-header {
position: fixed;
top: 0;
background-color: #fff;
background-color: var(--color-background-xlight);
height: 65px;
width: 100%;
box-sizing: border-box;

10
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -647,7 +647,7 @@ export default mixins(
height: 35px;
line-height: 35px;
color: $--custom-dialog-text-color;
--menu-item-hover-fill: #fff0ef;
--menu-item-hover-fill: var(--color-primary-tint-3);
.item-title {
position: absolute;
@ -667,7 +667,7 @@ export default mixins(
.el-menu {
border: none;
font-size: 14px;
--menu-item-hover-fill: #fff0ef;
--menu-item-hover-fill: var(--color-primary-tint-3);
.el-menu--collapse {
width: 75px;
@ -718,7 +718,7 @@ export default mixins(
.el-menu-item {
a {
color: #666;
color: var(--color-text-base);
&.primary-item {
color: $--color-primary;
@ -758,7 +758,7 @@ export default mixins(
line-height: 24px;
height: 20px;
width: 20px;
background-color: #fff;
background-color: var(--color-foreground-xlight);
border: none;
border-radius: 15px;
@ -789,7 +789,7 @@ export default mixins(
top: -3px;
left: 5px;
font-weight: bold;
color: #fff;
color: var(--color-foreground-xlight);
text-decoration: none;
}

4
packages/editor-ui/src/components/Node.vue
View file

@ -485,7 +485,7 @@ export default mixins(
background-color: var(--color-background-xlight);
&.executing {
background-color: $--color-primary-light !important;
background-color: var(--color-primary-tint-3) !important;
.node-executing-info {
display: inline-block;
@ -515,7 +515,7 @@ export default mixins(
font-size: 3.75em;
line-height: 1.65em;
text-align: center;
color: rgba($--color-primary, 0.7);
color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.7);
}
.node-icon {

4
packages/editor-ui/src/components/NodeCreator/SearchBar.vue
View file

@ -88,6 +88,8 @@ export default mixins(externalHooks).extend({
outline: none;
font-size: 18px;
-webkit-appearance: none;
background-color: var(--color-background-xlight);
color: var(--color-text-dark);
&::placeholder,
&::-webkit-input-placeholder {
@ -126,4 +128,4 @@ export default mixins(externalHooks).extend({
justify-content: center;
}
}
</style>
</style>

2
packages/editor-ui/src/components/NodeIcon.vue
View file

@ -55,7 +55,7 @@ export default Vue.extend({
'line-height': this.size + 'px',
'border-radius': this.circle ? '50%': '2px',
...(this.disabled && {
color: '#ccc',
color: 'var(--color-text-light)',
'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
'filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
}),

8
packages/editor-ui/src/components/NodeWebhooks.vue
View file

@ -113,7 +113,7 @@ export default mixins(
.webhoooks {
padding-bottom: var(--spacing-xs);
margin: var(--spacing-xs) 0;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid var(--color-text-lighter);
.headline {
color: $--color-primary;
@ -139,7 +139,7 @@ export default mixins(
border-radius: 2px;
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
color: #fff;
color: var(--color-foreground-xlight);
}
.minimize-icon {
@ -192,7 +192,7 @@ export default mixins(
white-space: normal;
overflow: visible;
text-overflow: initial;
color: #404040;
color: var(--color-text-dark);
text-align: left;
direction: ltr;
word-break: break-all;
@ -202,7 +202,7 @@ export default mixins(
line-height: 1.5;
position: relative;
margin-top: var(--spacing-xs);
background-color: #fff;
background-color: var(--color-foreground-xlight);
border-radius: 3px;
}
</style>

2
packages/editor-ui/src/components/ParameterInput.vue
View file

@ -1067,7 +1067,7 @@ export default mixins(
}
.el-dropdown {
color: #999;
color: var(--color-text-light);
}
.list-option {

2
packages/editor-ui/src/components/ParameterInputList.vue
View file

@ -361,7 +361,7 @@ export default mixins(
}
.parameter-notice {
background-color: #fff5d3;
background-color: var(--color-warning-tint-2);
color: $--custom-font-black;
margin: 0.3em 0;
padding: 0.7em;

4
packages/editor-ui/src/components/RunData.vue
View file

@ -1447,7 +1447,7 @@ export default mixins(
display: inline-block;
width: 300px;
overflow: hidden;
background-color: #fff;
background-color: var(--color-foreground-xlight);
margin-right: var(--spacing-s);
margin-bottom: var(--spacing-s);
border-radius: var(--border-radius-base);
@ -1461,7 +1461,7 @@ export default mixins(
font-size: 1.2em;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid var(--color-text-light);
}
.binaryButtonContainer {

2
packages/editor-ui/src/components/TagsDropdown.vue
View file

@ -308,7 +308,7 @@ $--max-input-height: 60px;
li {
height: $--item-height;
background-color: white;
background-color: var(--color-foreground-xlight);
padding: $--item-padding;
margin: 0;
line-height: $--item-line-height;

115
packages/editor-ui/src/n8n-theme-variables.scss
View file

@ -1,57 +1,41 @@
// Primary Theme Color
$--color-primary: #ff6d5a;
$--color-primary-light: #fbebed;
$--color-primary: var(--color-primary);
// Dialog
$--custom-dialog-text-color: #666;
$--custom-dialog-background: #fff;
$--custom-dialog-text-color: var(--color-text-dark);
$--custom-dialog-background: var(--color-background-xlight);
$--custom-font-black: #000;
$--custom-font-dark: #595e67;
$--custom-font-light: #777;
$--custom-font-very-light: #999;
$--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-header-background: #384d5b;
$--custom-expression-text: #996688;
$--custom-expression-background: #f7f5ff;
$--custom-window-sidebar-top : #fff5f2;
$--custom-expression-text: var(--color-secondary);
$--custom-expression-background: var(--color-background-lighter);
// Badge
$--badge-danger-color: #f45959;
$--badge-danger-background-color: #fef0f0;
$--badge-danger-border-color: #fde2e2;
$--badge-warning-background-color: rgba(255, 229, 100, 0.3);
$--badge-warning-color: #6b5900;
$--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: #ff8080;
// Table
$--custom-table-background-main: $--custom-header-background;
$--custom-table-background-stripe-color: #f6f6f6;
$--custom-table-background-hover-color: #e9f0f4;
$--custom-input-background: #f0f0f0;
$--custom-input-background-disabled: #ccc;
$--custom-input-font: #333;
$--custom-input-border-color: #dcdfe6;
$--custom-input-font-disabled: #555;
$--custom-input-border-shadow: 1px solid $--custom-input-border-color;
$--warning-tooltip-color: var(--color-danger);
$--header-height: 65px;
// sidebar
$--sidebar-width: 65px;
$--sidebar-expanded-width: 200px;
$--sidebar-inactive-color: #909399;
$--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: #fff;
$--gift-notification-outer-color: var(--color-text-xlight);
// based on element.io breakpoints
$--breakpoint-2xs: 600px;
@ -61,48 +45,47 @@ $--breakpoint-md: 1200px;
$--breakpoint-lg: 1920px;
// tags
$--tag-background-color: #dce1e9;
$--tag-text-color: #3d3f46;
$--tag-close-background-color: #717782;
$--tag-close-background-hover-color: #3d3f46;
$--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: #555;
$--node-creator-select-background-color: #f2f4f8;
$--node-creator-background-color: #fff;
$--node-creator-search-background-color: #fff;
$--node-creator-border-color: #dbdfe7;
$--node-creator-item-hover-border-color: #8d939c;
$--node-creator-arrow-color: #8d939c;
$--node-creator-no-results-background-color: #f8f9fb;
$--node-creator-close-button-color: #fff;
$--node-creator-search-clear-background-color: #8d939c;
$--node-creator-search-clear-background-color-hover: #3d3f46;
$--node-creator-search-placeholder-color: #909399;
$--node-creator-subcategory-panel-header-bacground-color: #f2f4f8;
$--node-creator-description-color: #7d7d87;
$--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: #dcdfe6;
$--trigger-icon-background-color: #fff;
$--trigger-icon-border-color: var(--color-text-lighter);
$--trigger-icon-background-color: var(--color-background-xlight);
// drawer
$--drawer-background-color: #fff;
$--drawer-background-color: var(--color-background-xlight);
// updates-panel
$--updates-panel-info-url-color: $--color-primary;
$--updates-panel-border: 1px #dbdfe7 solid;
$--updates-panel-dark-background-color: #f8f9fb;
$--updates-panel-description-text-color: #7d7d87;
$--updates-panel-text-color: #555;
$--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: #666;
$--version-card-background-color: #fff;
$--version-card-border: 1px #dbdfe7 solid;
$--version-card-description-text-color: #7d7d87;
$--version-card-release-date-text-color: #909399;
$--version-card-box-shadow-color: rgba(109, 48, 40, 0.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);

26
packages/editor-ui/src/n8n-theme.scss
View file

@ -34,8 +34,8 @@
position: absolute;
top: 0;
right: -50px;
color: #fff;
background-color: $--custom-table-background-main;
color: var(--color-foreground-xlight);
background-color: var(--color-background-dark);
border-radius: 0 18px 18px 0;
z-index: 110;
font-size: 1.7em;
@ -44,7 +44,7 @@
height: 50px;
width: 50px;
.el-dialog__close {
color: #fff;
color: var(--color-foreground-xlight);
font-weight: 400;
}
.el-dialog__close:hover {
@ -83,31 +83,31 @@
// Table
.el-table {
thead th {
color: #fff;
background-color: $--custom-table-background-main;
color: var(--color-text-base);
background-color: var(--color-background-base);
}
tr {
color: #555;
color: var(--color-text-dark);
td {
border: none;
}
}
.tr {
color: #555;
color: var(--color-text-dark);
}
}
.el-table--striped {
.el-table__body {
tr.el-table__row--striped {
background-color: $--custom-table-background-stripe-color;
background-color: var(--color-background-light);
td {
background: none;
}
}
tr.el-table__row:hover,
tr.el-table__row:hover > td {
background-color: $--custom-table-background-hover-color;
background-color: var(--color-primary-tint-3);
}
}
}
@ -127,7 +127,7 @@
// Loading Indicator
.el-loading-mask {
background-color: #fff;
background-color: var(--color-foreground-xlight);
opacity: 0.8;
}
@ -137,15 +137,15 @@
.el-pagination .btn-prev,
.el-pagination .btn-next {
background: none;
color: #555;
color: var(--color-text-dark);
}
.el-pagination button:disabled {
background: none;
color: $--custom-input-background-disabled;
color: var(--color-text-lighter);
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
color: #555;
color: var(--color-text-dark);
}
// Notification

2
packages/editor-ui/src/views/NodeView.vue
View file

@ -3260,7 +3260,7 @@ export default mixins(
}
.drop-add-node-label {
color: #555;
color: var(--color-text-dark);
font-weight: 600;
font-size: 0.8em;
text-align: center;