mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests 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
35 changed files with 411 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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);