mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -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; position: absolute;
width: 48px; width: 48px;
height: 48px; height: 48px;
border: 4px solid #fff; border: 4px solid var(--color-foreground-xlight);
border-radius: 50%; border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--color-primary) transparent transparent transparent; 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'; @use 'sass:math';
@mixin theme { @mixin theme {
--color-primary-h: 7; --color-primary-h: 7;
--color-primary-s: 100%; --color-primary-s: 100%;
--color-primary-l: 68%; --color-primary-l: 68%;
--color-primary: hsl( --color-primary: hsl(
var(--color-primary-h), var(--color-primary-h),
var(--color-primary-s), var(--color-primary-s),
var(--color-primary-l) var(--color-primary-l)
); );
--color-primary-tint-1-l: 18%; --color-primary-tint-1-l: 18%;
--color-primary-tint-1: hsl( --color-primary-tint-1: hsl(
var(--color-primary-h), var(--color-primary-h),
var(--color-primary-s), var(--color-primary-s),
var(--color-primary-tint-1-l) var(--color-primary-tint-1-l)
); );
--color-primary-tint-2-l: 9%; --color-primary-tint-2-l: 9%;
--color-primary-tint-2: hsl( --color-primary-tint-2: hsl(
var(--color-primary-h), var(--color-primary-h),
var(--color-primary-s), var(--color-primary-s),
var(--color-primary-tint-2-l) var(--color-primary-tint-2-l)
); );
--color-primary-tint-3-l: 3%; --color-primary-tint-3-l: 3%;
--color-primary-tint-3: hsl( --color-primary-tint-3: hsl(
var(--color-primary-h), var(--color-primary-h),
var(--color-primary-s), var(--color-primary-s),
var(--color-primary-tint-3-l) var(--color-primary-tint-3-l)
); );
--color-primary-shade-1-l: 89%; --color-primary-shade-1-l: 89%;
--color-primary-shade-1: hsl( --color-primary-shade-1: hsl(
var(--color-primary-h), var(--color-primary-h),
var(--color-primary-s), var(--color-primary-s),
var(--color-primary-shade-1-l) var(--color-primary-shade-1-l)
); );
--color-secondary-h: 247; --color-secondary-h: 247;
--color-secondary-s: 100%; --color-secondary-s: 100%;
--color-secondary-l: 35%; --color-secondary-l: 55%;
--color-secondary: hsl( --color-secondary: hsl(
var(--color-secondary-h), var(--color-secondary-h),
var(--color-secondary-s), var(--color-secondary-s),
var(--color-secondary-l) var(--color-secondary-l)
); );
--color-success-h: 150; --color-success-h: 150;
--color-success-s: 74%; --color-success-s: 74%;
--color-success-l: 60%; --color-success-l: 60%;
--color-success: hsl( --color-success: hsl(
var(--color-success-h), var(--color-success-h),
var(--color-success-s), var(--color-success-s),
var(--color-success-l) var(--color-success-l)
); );
--color-success-tint-1-l: 12%; --color-success-tint-1-l: 12%;
--color-success-tint-1: hsl( --color-success-tint-1: hsl(
var(--color-success-h), var(--color-success-h),
var(--color-success-s), var(--color-success-s),
var(--color-success-tint-1-l) var(--color-success-tint-1-l)
); );
--color-success-tint-2-l: 3%; --color-success-tint-2-l: 3%;
--color-success-tint-2: hsl( --color-success-tint-2: hsl(
var(--color-success-h), var(--color-success-h),
var(--color-success-s), var(--color-success-s),
var(--color-success-tint-2-l) var(--color-success-tint-2-l)
); );
--color-warning-h: 36; --color-warning-h: 36;
--color-warning-s: 77%; --color-warning-s: 77%;
--color-warning-l: 43%; --color-warning-l: 43%;
--color-warning: hsl( --color-warning: hsl(
var(--color-warning-h), var(--color-warning-h),
var(--color-warning-s), var(--color-warning-s),
var(--color-warning-l) var(--color-warning-l)
); );
--color-warning-tint-1-l: 12%; --color-warning-tint-1-l: 12%;
--color-warning-tint-1: hsl( --color-warning-tint-1: hsl(
var(--color-warning-h), var(--color-warning-h),
var(--color-warning-s), var(--color-warning-s),
var(--color-warning-tint-1-l) var(--color-warning-tint-1-l)
); );
--color-warning-tint-2-l: 4%; --color-warning-tint-2-l: 4%;
--color-warning-tint-2: hsl( --color-warning-tint-2: hsl(
var(--color-warning-h), var(--color-warning-h),
var(--color-warning-s), var(--color-warning-s),
var(--color-warning-tint-2-l) var(--color-warning-tint-2-l)
); );
--color-danger-h: 0; --color-danger-h: 0;
--color-danger-s: 88%; --color-danger-s: 88%;
--color-danger-l: 35%; --color-danger-l: 35%;
--color-danger: hsl( --color-danger: hsl(
var(--color-danger-h), var(--color-danger-h),
var(--color-danger-s), var(--color-danger-s),
var(--color-danger-l) var(--color-danger-l)
); );
--color-danger-tint-1-l: 8%; --color-danger-tint-1-l: 8%;
--color-danger-tint-1: hsl( --color-danger-tint-1: hsl(
var(--color-danger-h), var(--color-danger-h),
var(--color-danger-s), var(--color-danger-s),
var(--color-danger-tint-1-l) var(--color-danger-tint-1-l)
); );
--color-danger-tint-2-l: 3%; --color-danger-tint-2-l: 3%;
--color-danger-tint-2: hsl( --color-danger-tint-2: hsl(
var(--color-danger-h), var(--color-danger-h),
var(--color-danger-s), var(--color-danger-s),
var(--color-danger-tint-2-l) var(--color-danger-tint-2-l)
); );
--color-info-h: 220; --color-info-h: 220;
--color-info-s: 4%; --color-info-s: 4%;
--color-info-l: 42%; --color-info-l: 82%;
--color-info: hsl( --color-info: hsl(
var(--color-info-h), var(--color-info-h),
var(--color-info-s), var(--color-info-s),
var(--color-info-l) var(--color-info-l)
); );
--color-info-tint-1-l: 12%; --color-info-tint-1-l: 12%;
--color-info-tint-1: hsl( --color-info-tint-1: hsl(
var(--color-info-h), var(--color-info-h),
var(--color-info-s), var(--color-info-s),
var(--color-info-tint-1-l) var(--color-info-tint-1-l)
); );
--color-info-tint-2-l: 4%; --color-info-tint-2-l: 4%;
--color-info-tint-2: hsl( --color-info-tint-2: hsl(
var(--color-info-h), var(--color-info-h),
var(--color-info-s), var(--color-info-s),
var(--color-info-tint-2-l) var(--color-info-tint-2-l)
); );
--color-grey-h: 228; --color-text-dark-h: 0;
--color-grey-s: 10%; --color-text-dark-s: 0%;
--color-grey-l: 80%; --color-text-dark-l: 100%;
--color-grey: hsl( --color-text-dark: hsl(
var(--color-grey-h), var(--color-text-dark-h),
var(--color-grey-s), var(--color-text-dark-s),
var(--color-grey-l) var(--color-text-dark-l)
); );
--color-light-grey-h: 220; --color-text-base-h: 240;
--color-light-grey-s: 20%; --color-text-base-s: 4%;
--color-light-grey-l: 88%; --color-text-base-l: 70%;
--color-light-grey: hsl( --color-text-base: hsl(
var(--color-light-grey-h), var(--color-text-base-h),
var(--color-light-grey-s), var(--color-text-base-s),
var(--color-light-grey-l) var(--color-text-base-l)
); );
--color-neutral-h: 228; --color-text-light-h: 220;
--color-neutral-s: 10%; --color-text-light-s: 4%;
--color-neutral-l: 50%; --color-text-light-l: 82%;
--color-neutral: hsl( --color-text-light: hsl(
var(--color-neutral-h), var(--color-text-light-h),
var(--color-neutral-s), var(--color-text-light-s),
var(--color-neutral-l) var(--color-text-light-l)
); );
--color-text-dark-h: 0; --color-text-lighter-h: 222;
--color-text-dark-s: 0%; --color-text-lighter-s: 17%;
--color-text-dark-l: 100%; --color-text-lighter-l: 92%;
--color-text-dark: hsl( --color-text-lighter: hsl(
var(--color-text-dark-h), var(--color-text-lighter-h),
var(--color-text-dark-s), var(--color-text-lighter-s),
var(--color-text-dark-l) var(--color-text-lighter-l)
); );
--color-text-base-h: 240; --color-text-xlight-h: 0;
--color-text-base-s: 4%; --color-text-xlight-s: 0%;
--color-text-base-l: 49%; --color-text-xlight-l: 100%;
--color-text-base: hsl( --color-text-xlight: hsl(
var(--color-text-base-h), var(--color-text-xlight-h),
var(--color-text-base-s), var(--color-text-xlight-s),
var(--color-text-base-l) var(--color-text-xlight-l)
); );
--color-text-light-h: 220; --color-foreground-base-h: 220;
--color-text-light-s: 4%; --color-foreground-base-s: 20%;
--color-text-light-l: 42%; --color-foreground-base-l: 30%;
--color-text-light: hsl( --color-foreground-base: hsl(
var(--color-text-light-h), var(--color-foreground-base-h),
var(--color-text-light-s), var(--color-foreground-base-s),
var(--color-text-light-l) var(--color-foreground-base-l)
); );
--color-text-lighter-h: 222; --color-foreground-light-h: 0;
--color-text-lighter-s: 17%; --color-foreground-light-s: 0%;
--color-text-lighter-l: 12%; --color-foreground-light-l: 7%;
--color-text-lighter: hsl( --color-foreground-light: hsl(
var(--color-text-lighter-h), var(--color-foreground-light-h),
var(--color-text-lighter-s), var(--color-foreground-light-s),
var(--color-text-lighter-l) var(--color-foreground-light-l)
); );
--color-text-xlight-h: 0; --color-foreground-xlight-h: 0;
--color-text-xlight-s: 0%; --color-foreground-xlight-s: 0%;
--color-text-xlight-l: 100%; --color-foreground-xlight-l: 0%;
--color-text-xlight: hsl( --color-foreground-xlight: hsl(
var(--color-text-xlight-h), var(--color-foreground-xlight-h),
var(--color-text-xlight-s), var(--color-foreground-xlight-s),
var(--color-text-xlight-l) var(--color-foreground-xlight-l)
); );
--color-foreground-base-h: 220; --color-background-dark-h: 0;
--color-foreground-base-s: 20%; --color-background-dark-s: 0%;
--color-foreground-base-l: 12%; --color-background-dark-l: 100%;
--color-foreground-base: hsl( --color-background-dark: hsl(
var(--color-foreground-base-h), var(--color-background-dark-h),
var(--color-foreground-base-s), var(--color-background-dark-s),
var(--color-foreground-base-l) var(--color-background-dark-l)
); );
--color-foreground-light-h: 0; --color-background-base-h: 0;
--color-foreground-light-s: 0%; --color-background-base-s: 0%;
--color-foreground-light-l: 7%; --color-background-base-l: 10%;
--color-foreground-light: hsl( --color-background-base: hsl(
var(--color-foreground-light-h), var(--color-background-base-h),
var(--color-foreground-light-s), var(--color-background-base-s),
var(--color-foreground-light-l) var(--color-background-base-l)
); );
--color-foreground-xlight-h: 0; --color-background-light-h: 220;
--color-foreground-xlight-s: 0%; --color-background-light-s: 27%;
--color-foreground-xlight-l: 0%; --color-background-light-l: 0%;
--color-foreground-xlight: hsl( --color-background-light: hsl(
var(--color-foreground-xlight-h), var(--color-background-light-h),
var(--color-foreground-xlight-s), var(--color-background-light-s),
var(--color-foreground-xlight-l) var(--color-background-light-l)
); );
--color-background-dark-h: 0; --color-background-lighter-h: 0;
--color-background-dark-s: 0%; --color-background-lighter-s: 0%;
--color-background-dark-l: 100%; --color-background-lighter-l: 36%;
--color-background-dark: hsl( --color-background-lighter: hsl(
var(--color-background-dark-h), var(--color-background-lighter-h),
var(--color-background-dark-s), var(--color-background-lighter-s),
var(--color-background-dark-l) var(--color-background-lighter-l)
); );
--color-background-base-h: 252; --color-background-xlight-h: 240;
--color-background-base-s: 71%; --color-background-xlight-s: 4%;
--color-background-base-l: 99%; --color-background-xlight-l: 19%;
--color-background-base: hsl( --color-background-xlight: hsl(
var(--color-background-base-h), var(--color-background-xlight-h),
var(--color-background-base-s), var(--color-background-xlight-s),
var(--color-background-base-l) var(--color-background-xlight-l)
); );
--color-background-light-h: 220; --color-canvas-dot-h: 204;
--color-background-light-s: 27%; --color-canvas-dot-s: 15.6%;
--color-background-light-l: 98%; --color-canvas-dot-l: 87.5%;
--color-background-light: hsl( --color-canvas-dot: hsl(
var(--color-background-light-h), var(--color-canvas-dot-h),
var(--color-background-light-s), var(--color-canvas-dot-s),
var(--color-background-light-l) var(--color-canvas-dot-l)
); );
--color-background-lighter-h: 220; --color-canvas-background-h: 90;
--color-background-lighter-s: 30%; --color-canvas-background-s: 10%;
--color-background-lighter-l: 96%; --color-canvas-background-l: 0%;
--color-background-lighter: hsl( --color-canvas-background: hsl(
var(--color-background-lighter-h), var(--color-canvas-background-h),
var(--color-background-lighter-s), var(--color-canvas-background-s),
var(--color-background-lighter-l) var(--color-canvas-background-l)
); );
--color-background-xlight-h: 240; --color-sticky-default-background-h: 46;
--color-background-xlight-s: 4%; --color-sticky-default-background-s: 100%;
--color-background-xlight-l: 19%; --color-sticky-default-background-l: 12%;
--color-background-xlight: hsl( --color-sticky-default-background: hsl(
var(--color-background-xlight-h), var(--color-sticky-default-background-h),
var(--color-background-xlight-s), var(--color-sticky-default-background-s),
var(--color-background-xlight-l) 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 // Generated Color Shades from 50 to 950
// Not yet used in design system // Not yet used in design system
@each $color in ('neutral', 'success', 'warning', 'danger') { @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) { @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}-l: #{math.div($shade, 10)}#{'%'};
--color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l)); --color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l));
}
} }
}
} }
body.theme-dark { body.theme-dark {

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

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

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

@ -3,7 +3,7 @@
@use "button-group"; @use "button-group";
@include mixins.b(calendar) { @include mixins.b(calendar) {
background-color: #fff; background-color: var(--color-foreground-xlight);
@include mixins.e(header) { @include mixins.e(header) {
display: flex; 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
-------------------------- */ -------------------------- */
$color-white: #ffffff; $color-white: var(--color-foreground-xlight);
$color-black: #000000; $color-black: var(--color-foreground-dark);
$color-primary-light-1: function.lightness( $color-primary-light-1: function.lightness(
--color-primary-h, --color-primary-h,
@ -275,7 +275,7 @@ $disabled-border-base: var(--disabled-border, var(--border-color-base));
/* Icon /* Icon
-------------------------- */ -------------------------- */
$icon-color: #666; $icon-color: var(--color-text-base);
$icon-color-base: var(--color-info); $icon-color-base: var(--color-info);
/* Checkbox /* Checkbox
@ -412,7 +412,7 @@ $select-font-size: $font-size-base;
$select-close-hover-color: var(--color-text-light); $select-close-hover-color: var(--color-text-light);
$select-input-color: var(--color-text-lighter); $select-input-color: var(--color-text-lighter);
$select-multiple-input-color: #666; $select-multiple-input-color: var(--color-text-base);
/// color||Color|0 /// color||Color|0
$select-input-focus-border-color: var(--color-secondary); $select-input-focus-border-color: var(--color-secondary);
/// fontSize||Font|1 /// fontSize||Font|1
@ -434,7 +434,7 @@ $select-group-font-size: 12px;
$select-dropdown-background: $color-white; $select-dropdown-background: $color-white;
$select-dropdown-shadow: $box-shadow-light; $select-dropdown-shadow: $box-shadow-light;
$select-dropdown-empty-color: #999; $select-dropdown-empty-color: var(--color-text-light);
/// height||Other|4 /// height||Other|4
$select-dropdown-max-height: 274px; $select-dropdown-max-height: 274px;
$select-dropdown-padding: 6px 0; $select-dropdown-padding: 6px 0;
@ -986,7 +986,7 @@ $datepicker-inrange-hover-background-color: var(--border-color-light);
$datepicker-active-color: var(--color-primary); $datepicker-active-color: var(--color-primary);
/// color||Color|0 /// color||Color|0
$datepicker-hover-font-color: var(--color-primary); $datepicker-hover-font-color: var(--color-primary);
$datepicker-cell-hover-color: #fff; $datepicker-cell-hover-color: var(--color-foreground-xlight);
/* Loading /* Loading
--------------------------*/ --------------------------*/
@ -1128,7 +1128,7 @@ $form-label-font-size: $font-size-base;
/* Avatar /* Avatar
--------------------------*/ --------------------------*/
/// color||Color|0 /// color||Color|0
$avatar-font-color: #fff; $avatar-font-color: var(--color-text-xlight);
/// color||Color|0 /// color||Color|0
$avatar-background-color: #c0c4cc; $avatar-background-color: #c0c4cc;
/// fontSize||Font Size|1 /// fontSize||Font Size|1

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -48,7 +48,7 @@
@include mixins.when(drop-inner) { @include mixins.when(drop-inner) {
> .el-tree-node__content .el-tree-node__label { > .el-tree-node__content .el-tree-node__label {
background-color: var(--color-primary); 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) { @include mixins.b(upload-dragger) {
background-color: #fff; background-color: var(--color-foreground-xlight);
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
@ -276,7 +276,7 @@
.el-upload-list__item { .el-upload-list__item {
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: var(--color-foreground-xlight);
border: 1px solid #c0ccda; border: 1px solid #c0ccda;
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
@ -339,7 +339,7 @@
top: 0; top: 0;
cursor: default; cursor: default;
text-align: center; text-align: center;
color: #fff; color: var(--color-foreground-xlight);
opacity: 0; opacity: 0;
font-size: 20px; font-size: 20px;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
@ -391,7 +391,7 @@
.el-upload-list__item { .el-upload-list__item {
overflow: hidden; overflow: hidden;
z-index: 0; z-index: 0;
background-color: #fff; background-color: var(--color-foreground-xlight);
border: 1px solid #c0ccda; border: 1px solid #c0ccda;
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
@ -462,7 +462,7 @@
background: #13ce66; background: #13ce66;
text-align: center; text-align: center;
transform: rotate(45deg); transform: rotate(45deg);
box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px var(--color-text-light);
i { i {
font-size: 12px; font-size: 12px;
@ -510,7 +510,7 @@
font-size: 12px; font-size: 12px;
margin-top: 11px; margin-top: 11px;
transform: rotate(-45deg); 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 { .binary-data {
background-color: #fff; background-color: var(--color-foreground-xlight);
&.image { &.image {
max-height: calc(100% - 1em); 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"> <style lang="scss">
.binary-data { .binary-data {
background-color: #fff; background-color: var(--color-foreground-xlight);
&.image { &.image {
max-height: calc(100% - 1em); 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 { &:after {
left: 27px; 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; right: -30px;
&:after { &:after {
right: 27px; 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> </style>

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

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

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

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

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

@ -58,7 +58,7 @@ div.el-input {
&:hover { &:hover {
input:not(:focus) { 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 { .right-side {
background-color: #f9f9f9; background-color: var(--color-background-light);
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
@ -222,7 +222,7 @@ export default mixins(
border-top-left-radius: 8px; border-top-left-radius: 8px;
background-color: var(--color-background-base); background-color: var(--color-background-base);
color: #555; color: var(--color-text-dark);
border-bottom: 1px solid $--color-primary; border-bottom: 1px solid $--color-primary;
margin-bottom: 1em; margin-bottom: 1em;

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

@ -304,8 +304,8 @@ export default mixins(
.variable-value { .variable-value {
font-weight: bold; font-weight: bold;
color: #000; color: var(--color-text-dark);
background-color: #c0c0c0; background-color: var(--color-text-base);
padding: 3px; padding: 3px;
border-radius: 3px; border-radius: 3px;
} }
@ -315,21 +315,21 @@ export default mixins(
left: -3px; left: -3px;
top: -8px; top: -8px;
display: none; display: none;
color: #fff; color: var(--color-text-xlight);
font-weight: bold; font-weight: bold;
padding: 2px 4px; padding: 2px 4px;
} }
.variable-wrapper:hover .variable-delete { .variable-wrapper:hover .variable-delete {
display: inline; display: inline;
background-color: #AA2200; background-color: var(--color-danger);
border-radius: 5px; border-radius: 5px;
} }
.variable { .variable {
font-weight: bold; font-weight: bold;
color: #000; color: #000;
background-color: #c0c0c0; background-color: var(--color-text-base);
padding: 3px; padding: 3px;
border-radius: 3px; border-radius: 3px;
margin: 0 2px; margin: 0 2px;
@ -339,11 +339,11 @@ export default mixins(
} }
&.invalid { &.invalid {
background-color: #e25e5e; background-color: var(--color-danger);
} }
&.valid { &.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', 'line-height': this.size + 'px',
'border-radius': this.circle ? '50%' : '2px', 'border-radius': this.circle ? '50%' : '2px',
...(this.disabled && { ...(this.disabled && {
color: '#ccc', color: 'var(--color-text-light)',
'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)', '-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
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 { .main-header {
position: fixed; position: fixed;
top: 0; top: 0;
background-color: #fff; background-color: var(--color-background-xlight);
height: 65px; height: 65px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;

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

@ -647,7 +647,7 @@ export default mixins(
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
color: $--custom-dialog-text-color; color: $--custom-dialog-text-color;
--menu-item-hover-fill: #fff0ef; --menu-item-hover-fill: var(--color-primary-tint-3);
.item-title { .item-title {
position: absolute; position: absolute;
@ -667,7 +667,7 @@ export default mixins(
.el-menu { .el-menu {
border: none; border: none;
font-size: 14px; font-size: 14px;
--menu-item-hover-fill: #fff0ef; --menu-item-hover-fill: var(--color-primary-tint-3);
.el-menu--collapse { .el-menu--collapse {
width: 75px; width: 75px;
@ -718,7 +718,7 @@ export default mixins(
.el-menu-item { .el-menu-item {
a { a {
color: #666; color: var(--color-text-base);
&.primary-item { &.primary-item {
color: $--color-primary; color: $--color-primary;
@ -758,7 +758,7 @@ export default mixins(
line-height: 24px; line-height: 24px;
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: #fff; background-color: var(--color-foreground-xlight);
border: none; border: none;
border-radius: 15px; border-radius: 15px;
@ -789,7 +789,7 @@ export default mixins(
top: -3px; top: -3px;
left: 5px; left: 5px;
font-weight: bold; font-weight: bold;
color: #fff; color: var(--color-foreground-xlight);
text-decoration: none; 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); background-color: var(--color-background-xlight);
&.executing { &.executing {
background-color: $--color-primary-light !important; background-color: var(--color-primary-tint-3) !important;
.node-executing-info { .node-executing-info {
display: inline-block; display: inline-block;
@ -515,7 +515,7 @@ export default mixins(
font-size: 3.75em; font-size: 3.75em;
line-height: 1.65em; line-height: 1.65em;
text-align: center; 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 { .node-icon {

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

@ -88,6 +88,8 @@ export default mixins(externalHooks).extend({
outline: none; outline: none;
font-size: 18px; font-size: 18px;
-webkit-appearance: none; -webkit-appearance: none;
background-color: var(--color-background-xlight);
color: var(--color-text-dark);
&::placeholder, &::placeholder,
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
@ -126,4 +128,4 @@ export default mixins(externalHooks).extend({
justify-content: center; 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', 'line-height': this.size + 'px',
'border-radius': this.circle ? '50%': '2px', 'border-radius': this.circle ? '50%': '2px',
...(this.disabled && { ...(this.disabled && {
color: '#ccc', color: 'var(--color-text-light)',
'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)', '-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
'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 { .webhoooks {
padding-bottom: var(--spacing-xs); padding-bottom: var(--spacing-xs);
margin: var(--spacing-xs) 0; margin: var(--spacing-xs) 0;
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--color-text-lighter);
.headline { .headline {
color: $--color-primary; color: $--color-primary;
@ -139,7 +139,7 @@ export default mixins(
border-radius: 2px; border-radius: 2px;
font-size: var(--font-size-2xs); font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: #fff; color: var(--color-foreground-xlight);
} }
.minimize-icon { .minimize-icon {
@ -192,7 +192,7 @@ export default mixins(
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
text-overflow: initial; text-overflow: initial;
color: #404040; color: var(--color-text-dark);
text-align: left; text-align: left;
direction: ltr; direction: ltr;
word-break: break-all; word-break: break-all;
@ -202,7 +202,7 @@ export default mixins(
line-height: 1.5; line-height: 1.5;
position: relative; position: relative;
margin-top: var(--spacing-xs); margin-top: var(--spacing-xs);
background-color: #fff; background-color: var(--color-foreground-xlight);
border-radius: 3px; border-radius: 3px;
} }
</style> </style>

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

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

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

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

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

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

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

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

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

@ -1,57 +1,41 @@
// Primary Theme Color // Primary Theme Color
$--color-primary: #ff6d5a; $--color-primary: var(--color-primary);
$--color-primary-light: #fbebed;
// Dialog // Dialog
$--custom-dialog-text-color: #666; $--custom-dialog-text-color: var(--color-text-dark);
$--custom-dialog-background: #fff; $--custom-dialog-background: var(--color-background-xlight);
$--custom-font-black: #000; $--custom-font-black: var(--color-text-dark);
$--custom-font-dark: #595e67; $--custom-font-dark: var(--color-text-dark);
$--custom-font-light: #777; $--custom-font-light: var(--color-text-light);
$--custom-font-very-light: #999; $--custom-font-very-light: var(--color-text-light);
$--custom-header-background: #384d5b; $--custom-expression-text: var(--color-secondary);
$--custom-expression-background: var(--color-background-lighter);
$--custom-expression-text: #996688;
$--custom-expression-background: #f7f5ff;
$--custom-window-sidebar-top : #fff5f2;
// Badge // Badge
$--badge-danger-color: #f45959; $--badge-danger-color: var(--color-danger);
$--badge-danger-background-color: #fef0f0; $--badge-danger-background-color: var(--color-primary-tint-3);
$--badge-danger-border-color: #fde2e2; $--badge-danger-border-color: var(--color-primary-tint-2);
$--badge-warning-background-color: rgba(255, 229, 100, 0.3); $--badge-warning-background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);
$--badge-warning-color: #6b5900; $--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
$--warning-tooltip-color: #ff8080; $--warning-tooltip-color: var(--color-danger);
// 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;
$--header-height: 65px; $--header-height: 65px;
// sidebar // sidebar
$--sidebar-width: 65px; $--sidebar-width: 65px;
$--sidebar-expanded-width: 200px; $--sidebar-expanded-width: 200px;
$--sidebar-inactive-color: #909399; $--sidebar-inactive-color: var(--color-foreground-xdark);
$--sidebar-active-color: $--color-primary; $--sidebar-active-color: $--color-primary;
// gifts notification // gifts notification
$--gift-notification-active-color: $--color-primary; $--gift-notification-active-color: $--color-primary;
$--gift-notification-inner-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 // based on element.io breakpoints
$--breakpoint-2xs: 600px; $--breakpoint-2xs: 600px;
@ -61,48 +45,47 @@ $--breakpoint-md: 1200px;
$--breakpoint-lg: 1920px; $--breakpoint-lg: 1920px;
// tags // tags
$--tag-background-color: #dce1e9; $--tag-background-color: var(--color-foreground-base);
$--tag-text-color: #3d3f46; $--tag-text-color: var(--color-text-dark);
$--tag-close-background-color: #717782; $--tag-close-background-color: var(--color-text-light);
$--tag-close-background-hover-color: #3d3f46; $--tag-close-background-hover-color: var(--color-text-dark);
// Node creator // Node creator
$--node-creator-width: 385px; $--node-creator-width: 385px;
$--node-creator-text-color: #555; $--node-creator-text-color: var(--color-text-dark);
$--node-creator-select-background-color: #f2f4f8; $--node-creator-select-background-color: var(--color-background-base);
$--node-creator-background-color: #fff; $--node-creator-background-color: var(--color-background-xlight);
$--node-creator-search-background-color: #fff; $--node-creator-search-background-color: var(--color-background-xlight);
$--node-creator-border-color: #dbdfe7; $--node-creator-border-color: var(--color-foreground-base);
$--node-creator-item-hover-border-color: #8d939c; $--node-creator-item-hover-border-color: var(--color-text-light);
$--node-creator-arrow-color: #8d939c; $--node-creator-arrow-color: var(--color-text-light);
$--node-creator-no-results-background-color: #f8f9fb; $--node-creator-no-results-background-color: var(--color-background-xlight);
$--node-creator-close-button-color: #fff; $--node-creator-close-button-color: var(--color-text-xlight);
$--node-creator-search-clear-background-color: #8d939c; $--node-creator-search-clear-background-color: var(--color-text-light);
$--node-creator-search-clear-background-color-hover: #3d3f46; $--node-creator-search-clear-background-color-hover: var(--color-text-base);
$--node-creator-search-placeholder-color: #909399; $--node-creator-search-placeholder-color: var(--color-text-light);
$--node-creator-subcategory-panel-header-bacground-color: #f2f4f8; $--node-creator-subcategory-panel-header-bacground-color: var(--color-background-base);
$--node-creator-description-color: #7d7d87; $--node-creator-description-color: var(--color-text-base);
// trigger icon // trigger icon
$--trigger-icon-border-color: #dcdfe6; $--trigger-icon-border-color: var(--color-text-lighter);
$--trigger-icon-background-color: #fff; $--trigger-icon-background-color: var(--color-background-xlight);
// drawer // drawer
$--drawer-background-color: #fff; $--drawer-background-color: var(--color-background-xlight);
// updates-panel // updates-panel
$--updates-panel-info-url-color: $--color-primary; $--updates-panel-info-url-color: $--color-primary;
$--updates-panel-border: 1px #dbdfe7 solid; $--updates-panel-border: var(--border-base);
$--updates-panel-dark-background-color: #f8f9fb; $--updates-panel-dark-background-color: var(--color-background-lighter);
$--updates-panel-description-text-color: #7d7d87; $--updates-panel-description-text-color: var(--color-text-base);
$--updates-panel-text-color: #555; $--updates-panel-text-color: var(--color-text-dark);
// versions card // versions card
$--version-card-name-text-color: #666; $--version-card-name-text-color: var(--color-text-base);
$--version-card-background-color: #fff; $--version-card-background-color: var(--color-background-xlight);
$--version-card-border: 1px #dbdfe7 solid; $--version-card-border: var(--border-base);
$--version-card-description-text-color: #7d7d87; $--version-card-description-text-color: var(--color-text-base);
$--version-card-release-date-text-color: #909399; $--version-card-release-date-text-color: var(--color-foreground-xdark);
$--version-card-box-shadow-color: rgba(109, 48, 40, 0.07); $--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; position: absolute;
top: 0; top: 0;
right: -50px; right: -50px;
color: #fff; color: var(--color-foreground-xlight);
background-color: $--custom-table-background-main; background-color: var(--color-background-dark);
border-radius: 0 18px 18px 0; border-radius: 0 18px 18px 0;
z-index: 110; z-index: 110;
font-size: 1.7em; font-size: 1.7em;
@ -44,7 +44,7 @@
height: 50px; height: 50px;
width: 50px; width: 50px;
.el-dialog__close { .el-dialog__close {
color: #fff; color: var(--color-foreground-xlight);
font-weight: 400; font-weight: 400;
} }
.el-dialog__close:hover { .el-dialog__close:hover {
@ -83,31 +83,31 @@
// Table // Table
.el-table { .el-table {
thead th { thead th {
color: #fff; color: var(--color-text-base);
background-color: $--custom-table-background-main; background-color: var(--color-background-base);
} }
tr { tr {
color: #555; color: var(--color-text-dark);
td { td {
border: none; border: none;
} }
} }
.tr { .tr {
color: #555; color: var(--color-text-dark);
} }
} }
.el-table--striped { .el-table--striped {
.el-table__body { .el-table__body {
tr.el-table__row--striped { tr.el-table__row--striped {
background-color: $--custom-table-background-stripe-color; background-color: var(--color-background-light);
td { td {
background: none; background: none;
} }
} }
tr.el-table__row:hover, tr.el-table__row:hover,
tr.el-table__row:hover > td { 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 // Loading Indicator
.el-loading-mask { .el-loading-mask {
background-color: #fff; background-color: var(--color-foreground-xlight);
opacity: 0.8; opacity: 0.8;
} }
@ -137,15 +137,15 @@
.el-pagination .btn-prev, .el-pagination .btn-prev,
.el-pagination .btn-next { .el-pagination .btn-next {
background: none; background: none;
color: #555; color: var(--color-text-dark);
} }
.el-pagination button:disabled { .el-pagination button:disabled {
background: none; background: none;
color: $--custom-input-background-disabled; color: var(--color-text-lighter);
} }
.el-pager li.btn-quicknext, .el-pager li.btn-quicknext,
.el-pager li.btn-quickprev { .el-pager li.btn-quickprev {
color: #555; color: var(--color-text-dark);
} }
// Notification // Notification

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

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