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

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

---------

Co-authored-by: Mutasem <mutdmour@gmail.com>

cypress/e2e/14-mapping.cy.ts

@@ -80,14 +80,14 @@ describe('Data mapping', () => {
 			.parameterExpressionPreview('value')
 			.should('include.text', '0')
 			.invoke('css', 'color')
-			.should('equal', 'rgb(125, 125, 135)');
+			.should('equal', 'rgb(113, 116, 122)');
 
 		ndv.getters.inputTbodyCell(2, 0).realHover();
 		ndv.getters
 			.parameterExpressionPreview('value')
 			.should('include.text', '1')
 			.invoke('css', 'color')
-			.should('equal', 'rgb(125, 125, 135)');
+			.should('equal', 'rgb(113, 116, 122)');
 
 		ndv.actions.execute();
 
@@ -96,14 +96,14 @@ describe('Data mapping', () => {
 			.parameterExpressionPreview('value')
 			.should('include.text', '0')
 			.invoke('css', 'color')
-			.should('equal', 'rgb(125, 125, 135)'); // todo update color
+			.should('equal', 'rgb(113, 116, 122)'); // todo update color
 
 		ndv.getters.outputTbodyCell(2, 0).realHover();
 		ndv.getters
 			.parameterExpressionPreview('value')
 			.should('include.text', '1')
 			.invoke('css', 'color')
-			.should('equal', 'rgb(125, 125, 135)');
+			.should('equal', 'rgb(113, 116, 122)');
 	});
 
 	it('maps expressions from json view', () => {

cypress/e2e/18-user-management.cy.ts

@@ -1,5 +1,5 @@
 import { INSTANCE_MEMBERS, INSTANCE_OWNER } from '../constants';
-import { SettingsUsersPage, WorkflowPage } from '../pages';
+import { MainSidebar, SettingsSidebar, SettingsUsersPage, WorkflowPage } from '../pages';
 import { PersonalSettingsPage } from '../pages/settings-personal';
 
 /**
@@ -25,6 +25,8 @@ const updatedPersonalData = {
 const usersSettingsPage = new SettingsUsersPage();
 const workflowPage = new WorkflowPage();
 const personalSettingsPage = new PersonalSettingsPage();
+const settingsSidebar = new SettingsSidebar();
+const mainSidebar = new MainSidebar();
 
 describe('User Management', { disableAutoLogin: true }, () => {
 	before(() => cy.enableFeature('sharing'));
@@ -55,6 +57,21 @@ describe('User Management', { disableAutoLogin: true }, () => {
 		usersSettingsPage.getters.userActionsToggle(INSTANCE_MEMBERS[1].email).should('exist');
 	});
 
+	it('should be able to change theme', () => {
+		personalSettingsPage.actions.loginAndVisit(INSTANCE_OWNER.email, INSTANCE_OWNER.password);
+
+		personalSettingsPage.actions.changeTheme('Dark');
+		cy.get('body').should('have.attr', 'data-theme', 'dark');
+		settingsSidebar.actions.back();
+		mainSidebar.getters.logo().should('have.attr', 'src', '/n8n-dev-logo-dark-mode.svg');
+
+		cy.visit(personalSettingsPage.url);
+		personalSettingsPage.actions.changeTheme('Light');
+		cy.get('body').should('have.attr', 'data-theme', 'light');
+		settingsSidebar.actions.back();
+		mainSidebar.getters.logo().should('have.attr', 'src', '/n8n-dev-logo.svg');
+	});
+
 	it('should delete user and their data', () => {
 		usersSettingsPage.actions.loginAndVisit(INSTANCE_OWNER.email, INSTANCE_OWNER.password, true);
 		usersSettingsPage.actions.opedDeleteDialog(INSTANCE_MEMBERS[0].email);

cypress/pages/settings-personal.ts

@@ -20,8 +20,15 @@ export class PersonalSettingsPage extends BasePage {
 		saveSettingsButton: () => cy.getByTestId('save-settings-button'),
 		enableMfaButton: () => cy.getByTestId('enable-mfa-button'),
 		disableMfaButton: () => cy.getByTestId('disable-mfa-button'),
+		themeSelector: () => cy.getByTestId('theme-select'),
+		selectOptionsVisible: () => cy.get('.el-select-dropdown:visible .el-select-dropdown__item'),
 	};
 	actions = {
+		changeTheme: (theme: 'System default' | 'Dark' | 'Light') => {
+			this.getters.themeSelector().click();
+			this.getters.selectOptionsVisible().should('have.length', 3);
+			this.getters.selectOptionsVisible().contains(theme).click();
+		},
 		loginAndVisit: (email: string, password: string) => {
 			cy.signin({ email, password });
 			cy.visit(this.url);

cypress/pages/sidebar/main-sidebar.ts

@@ -13,6 +13,7 @@ export class MainSidebar extends BasePage {
 		credentials: () => this.getters.menuItem('Credentials'),
 		executions: () => this.getters.menuItem('Executions'),
 		userMenu: () => cy.get('div[class="action-dropdown-container"]'),
+		logo: () => cy.getByTestId('n8n-logo'),
 	};
 	actions = {
 		goToSettings: () => {

packages/design-system/.storybook/preview.js

@@ -45,10 +45,6 @@ export const parameters = {
 				name: '--color-background-light',
 				value: 'var(--color-background-light)',
 			},
-			{
-				name: '--color-background-lighter',
-				value: 'var(--color-background-lighter)',
-			},
 			{
 				name: '--color-background-xlight',
 				value: 'var(--color-background-xlight)',
@@ -66,7 +62,7 @@ export const parameters = {
 	},
 	options: {
 		storySort: {
-			order: ['Docs', 'Styleguide', 'Atoms', 'Modules'],
+			order: ['Docs', 'Styleguide', ['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'], 'Atoms', 'Modules'],
 		},
 	},
 };

packages/design-system/src/components/N8nAvatar/Avatar.vue

@@ -89,7 +89,7 @@ export default defineComponent({
 	position: absolute;
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
-	color: var(--color-text-xlight);
+	color: var(--color-avatar-font);
 	text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.3);
 }
 

packages/design-system/src/components/N8nButton/Button.scss

@@ -26,23 +26,72 @@
 
 	@include utils-user-select(none);
 
+	// Solution for a inside button
+	& a {
+		color: $button-font-color unquote($important);
+	}
+
 	&:hover {
-		color: $button-hover-color unquote($important);
+		color: $button-hover-font-color unquote($important);
 		border-color: $button-hover-border-color unquote($important);
 		background-color: $button-hover-background-color unquote($important);
-	}
 
-	&:focus {
-		border-color: $button-focus-outline-color unquote($important);
-		outline: $focus-outline-width solid $button-focus-outline-color unquote($important);
+		& a {
+			color: $button-hover-font-color unquote($important);
+		}
 	}
 
 	&:active,
 	&.active {
-		color: $button-active-color unquote($important);
+		color: $button-active-font-color unquote($important);
 		border-color: $button-active-border-color unquote($important);
 		background-color: $button-active-background-color unquote($important);
 		outline: none;
+
+		& a {
+			color: $button-active-font-color unquote($important);
+		}
+	}
+
+	&:focus {
+		color: $button-focus-font-color unquote($important);
+		border-color: $button-focus-border-color unquote($important);
+		background-color: $button-focus-background-color unquote($important);
+		outline: $focus-outline-width solid $button-focus-outline-color unquote($important);
+
+		& a {
+			color: $button-focus-font-color unquote($important);
+		}
+	}
+
+	&.disabled {
+		&,
+		&:hover,
+		&:active,
+		&:focus {
+			color: $button-disabled-font-color;
+			border-color: $button-disabled-border-color;
+			background-color: $button-disabled-background-color;
+
+			& a {
+				color: $button-disabled-font-color;
+			}
+		}
+	}
+
+	.loading {
+		&,
+		&:hover,
+		&:active,
+		&:focus {
+			color: $button-loading-font-color;
+			border-color: $button-loading-border-color;
+			background-color: $button-loading-background-color;
+
+			& a {
+				color: $button-loading-font-color;
+			}
+		}
 	}
 
 	&::-moz-focus-inner {
@@ -65,17 +114,109 @@
 }
 
 @mixin n8n-button-secondary {
-	--button-color: var(--color-primary);
-	--button-border-color: var(--color-primary);
-	--button-background-color: var(--color-background-xlight);
+	--button-font-color: var(--color-button-secondary-font);
+	--button-border-color: var(--color-button-secondary-border);
+	--button-background-color: var(--color-button-secondary-background);
+
+	--button-hover-font-color: var(--color-button-secondary-hover-active-focus-font);
+	--button-hover-border-color: var(--color-button-secondary-hover-active-border);
+	--button-hover-background-color: var(--color-button-secondary-hover-background);
+
+	--button-active-font-color: var(--color-button-secondary-hover-active-focus-font);
+	--button-active-border-color: var(--color-button-secondary-hover-active-border);
+	--button-active-background-color: var(--color-button-secondary-active-background);
+
+	--button-focus-font-color: var(--color-button-secondary-hover-active-focus-font);
+	--button-focus-border-color: var(--color-button-secondary-border);
+	--button-focus-background-color: var(--color-button-secondary-background);
+	--button-focus-outline-color: var(--color-button-secondary-focus-outline);
+
+	--button-disabled-font-color: var(--color-button-secondary-disabled-font);
+	--button-disabled-border-color: var(--color-button-secondary-disabled-border);
+	--button-disabled-background-color: var(--color-button-secondary-background);
+
+	--button-loading-font-color: var(--color-button-secondary-loading-font);
+	--button-loading-border-color: var(--color-button-secondary-loading-border);
+	--button-loading-background-color: var(--color-button-secondary-loading-background);
+}
+
+@mixin n8n-button-success {
+	--button-font-color: var(--color-button-success-font);
+	--button-border-color: var(--color-success);
+	--button-background-color: var(--color-success);
+
+	--button-hover-font-color: var(--color-button-success-font);
+	--button-hover-border-color: var(--color-success-shade-1);
+	--button-hover-background-color: var(--color-success-shade-1);
+
+	--button-active-font-color: var(--color-button-success-font);
+	--button-active-border-color: var(--color-success-shade-1);
+	--button-active-background-color: var(--color-success-shade-1);
+
+	--button-focus-font-color: var(--color-button-success-font);
+	--button-focus-border-color: var(--color-success);
+	--button-focus-background-color: var(--color-success);
+	--button-focus-outline-color: var(--color-success-light);
+
+	--button-disabled-font-color: var(--color-button-success-disabled-font);
+	--button-disabled-border-color: var(--color-success-tint-1);
+	--button-disabled-background-color: var(--color-success-tint-1);
+
+	--button-loading-font-color: var(--color-button-success-font);
+	--button-loading-border-color: var(--color-success);
+	--button-loading-background-color: var(--color-success);
+}
+
+@mixin n8n-button-warning {
+	--button-font-color: var(--color-button-warning-font);
+	--button-border-color: var(--color-warning);
+	--button-background-color: var(--color-warning);
+
+	--button-hover-font-color: var(--color-button-warning-font);
+	--button-hover-border-color: var(--color-warning-shade-1);
+	--button-hover-background-color: var(--color-warning-shade-1);
+
+	--button-active-font-color: var(--color-button-warning-font);
+	--button-active-border-color: var(--color-warning-shade-1);
+	--button-active-background-color: var(--color-warning-shade-1);
+
+	--button-focus-font-color: var(--color-button-warning-font);
+	--button-focus-border-color: var(--color-warning);
+	--button-focus-background-color: var(--color-warning);
+	--button-focus-outline-color: var(--color-warning-tint-1);
+
+	--button-disabled-font-color: var(--color-button-warning-disabled-font);
+	--button-disabled-border-color: var(--color-warning-tint-1);
+	--button-disabled-background-color: var(--color-warning-tint-1);
+
+	--button-loading-font-color: var(--color-button-warning-font);
+	--button-loading-border-color: var(--color-warning);
+	--button-loading-background-color: var(--color-warning);
+}
+
+@mixin n8n-button-danger {
+	--button-font-color: var(--color-button-danger-font);
+	--button-border-color: var(--color-danger);
+	--button-background-color: var(--color-danger);
+
+	--button-hover-font-color: var(--color-button-danger-font);
+	--button-hover-border-color: var(--color-danger-shade-1);
+	--button-hover-background-color: var(--color-danger-shade-1);
+
+	--button-active-font-color: var(--color-button-danger-font);
+	--button-active-border-color: var(--color-danger-shade-1);
+	--button-active-background-color: var(--color-danger-shade-1);
 
-	--button-active-background-color: var(--color-primary-tint-2);
-	--button-active-color: var(--color-primary);
-	--button-active-border-color: var(--color-primary);
+	--button-focus-font-color: var(--color-button-danger-font);
+	--button-focus-border-color: var(--color-danger);
+	--button-focus-background-color: var(--color-danger);
+	--button-focus-outline-color: var(--color-danger-tint-1);
 
-	--button-hover-background-color: var(--color-primary-tint-3);
-	--button-hover-color: var(--color-primary);
-	--button-hover-border-color: var(--color-primary);
+	--button-disabled-font-color: var(--color-button-danger-disabled-font);
+	--button-disabled-border-color: var(--color-danger-tint-1);
+	--button-disabled-background-color: var(--color-danger-tint-1);
 
-	--button-focus-outline-color: var(--color-primary-tint-1);
+	--button-loading-font-color: var(--color-button-danger-font);
+	--button-loading-border-color: var(--color-danger);
+	--button-loading-background-color: var(--color-danger);
 }