admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): Color palette updates, introduce dark mode (#6980)

Browse Source 
Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Mutasem <mutdmour@gmail.com>
This commit is contained in:
Giulio Andreini
2023-11-01 13:33:36 +01:00
committed by GitHub
parent b72040aa54
commit 0746783e02
81 changed files with 1694 additions and 1318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
packages/design-system/src/components/N8nButton/Button.vue
View File

@@ -136,84 +136,19 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
}
.tertiary {
font-weight: var(--font-weight-bold) !important;
--button-background-color: var(--color-background-xlight);
--button-color: var(--color-text-dark);
--button-border-color: var(--color-neutral-850);
--button-active-background-color: var(--color-primary-tint-2);
--button-active-color: var(--color-primary);
--button-active-border-color: var(--color-primary);
--button-hover-background-color: var(--color-neutral-950);
--button-hover-color: var(--color-text-dark);
--button-hover-border-color: var(--color-neutral-800);
--button-focus-outline-color: hsla(
var(--color-neutral-h),
var(--color-neutral-s),
var(--color-neutral-l),
0.2
);
@include n8n-button-secondary;
}
.success {
--button-background-color: var(--color-success);
--button-color: var(--color-text-xlight);
--button-border-color: var(--color-success);
--button-active-background-color: var(--color-success-350);
--button-active-border-color: var(--color-success-350);
--button-hover-background-color: var(--color-success-450);
--button-hover-border-color: var(--color-success-450);
--button-focus-outline-color: hsla(
var(--color-success-h),
var(--color-success-s),
var(--color-success-l),
0.33
);
@include n8n-button-success;
}
.warning {
--button-background-color: var(--color-warning);
--button-color: var(--color-text-xlight);
--button-border-color: var(--color-warning);
--button-active-background-color: var(--color-warning-500);
--button-active-border-color: var(--color-warning-500);
--button-hover-background-color: var(--color-warning-650);
--button-hover-border-color: var(--color-warning-650);
--button-focus-outline-color: hsla(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-l),
0.33
);
@include n8n-button-warning;
}
.danger {
--button-background-color: var(--color-danger);
--button-color: var(--color-text-xlight);
--button-border-color: var(--color-danger);
--button-active-color: var(--color-text-xlight);
--button-active-background-color: var(--color-danger-600);
--button-active-border-color: var(--color-danger-600);
--button-hover-background-color: var(--color-danger-700);
--button-hover-border-color: var(--color-danger-700);
--button-focus-outline-color: hsla(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-l),
0.33
);
@include n8n-button-danger;
}
/**
@@ -285,85 +220,98 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
/**
* Modifiers
*/
.outline {
--button-color: var(--color-primary);
--button-background-color: transparent;
--button-disabled-background-color: transparent;
--button-active-background-color: transparent;
&.primary {
--button-color: var(--color-primary);
--button-border-color: var(--color-primary);
--button-active-background-color: var(--color-primary);
}
&.tertiary {
--button-color: var(--color-text-dark);
--button-font-color: var(--color-primary);
--button-disabled-font-color: var(--color-primary-tint-1);
--button-disabled-border-color: var(--color-primary-tint-1);
--button-disabled-background-color: transparent;
}
&.success {
--button-color: var(--color-success);
--button-font-color: var(--color-success);
--button-border-color: var(--color-success);
--button-hover-border-color: var(--color-success);
--button-hover-background-color: var(--color-success);
--button-active-background-color: var(--color-success);
--button-disabled-font-color: var(--color-success-light);
--button-disabled-border-color: var(--color-success-light);
--button-disabled-background-color: transparent;
}
&.warning {
--button-color: var(--color-warning);
--button-font-color: var(--color-warning);
--button-border-color: var(--color-warning);
--button-hover-border-color: var(--color-warning);
--button-hover-background-color: var(--color-warning);
--button-active-background-color: var(--color-warning);
--button-disabled-font-color: var(--color-warning-tint-1);
--button-disabled-border-color: var(--color-warning-tint-1);
--button-disabled-background-color: transparent;
}
&.danger {
--button-color: var(--color-danger);
--button-font-color: var(--color-danger);
--button-border-color: var(--color-danger);
--button-hover-border-color: var(--color-danger);
--button-hover-background-color: var(--color-danger);
--button-active-background-color: var(--color-danger);
--button-disabled-font-color: var(--color-danger-tint-1);
--button-disabled-border-color: var(--color-danger-tint-1);
--button-disabled-background-color: transparent;
}
}
.text {
--button-color: var(--color-text-light);
--button-font-color: var(--color-text-button-secondary-font);
--button-border-color: transparent;
--button-background-color: transparent;
--button-active-color: var(--color-text-light);
--button-active-background-color: transparent;
--button-active-border-color: transparent;
--button-hover-color: var(--color-text-light);
--button-hover-background-color: transparent;
--button-hover-border-color: transparent;
--button-hover-background-color: transparent;
--button-active-border-color: transparent;
--button-active-background-color: transparent;
--button-focus-border-color: transparent;
--button-focus-background-color: transparent;
--button-disabled-border-color: transparent;
--button-disabled-background-color: transparent;
&.primary {
--button-color: var(--color-primary);
--button-active-color: var(--color-primary);
--button-hover-color: var(--color-primary);
&:focus {
outline: 0;
}
&.secondary {
--button-color: var(--color-primary-tint-1);
--button-active-color: var(--color-primary-tint-1);
--button-hover-color: var(--color-primary-tint-1);
&.primary {
--button-font-color: var(--color-primary);
--button-hover-font-color: var(--color-primary-shade-1);
--button-active-font-color: var(--color-primary-shade-1);
--button-focus-font-color: var(--color-primary);
--button-disabled-font-color: var(--color-primary-tint-1);
}
&.success {
--button-color: var(--color-success);
--button-active-color: var(--color-success);
--button-hover-color: var(--color-success);
}
&.tertiary {
--button-hover-color: var(--color-primary);
--button-font-color: var(--color-success);
--button-hover-font-color: var(--color-success-shade-1);
--button-active-font-color: var(--color-success-shade-1);
--button-focus-font-color: var(--color-success);
--button-disabled-font-color: var(--color-success-light);
}
&.warning {
--button-color: var(--color-warning);
--button-active-color: var(--color-warning);
--button-hover-color: var(--color-warning);
--button-font-color: var(--color-warning);
--button-hover-font-color: var(--color-warning-shade-1);
--button-active-font-color: var(--color-warning-shade-1);
--button-focus-font-color: var(--color-warning);
--button-disabled-font-color: var(--color-warning-tint-1);
}
&.danger {
--button-color: var(--color-danger);
--button-active-color: var(--color-danger);
--button-hover-color: var(--color-danger);
--button-font-color: var(--color-danger);
--button-hover-font-color: var(--color-danger-shade-1);
--button-active-font-color: var(--color-danger-shade-1);
--button-focus-font-color: var(--color-danger);
--button-disabled-font-color: var(--color-danger-tint-1);
}
&:hover {
@@ -384,7 +332,6 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: $loading-overlay-background-color;
}
}
@@ -395,9 +342,6 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
&:focus {
cursor: not-allowed;
background-image: none;
color: $button-disabled-font-color;
background-color: $button-disabled-background-color;
border-color: $button-disabled-border-color;
}
}