mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
81 changed files with 1694 additions and 1318 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
cypress/e2e/14-mapping.cy.ts
View file

@ -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', () => {

19
cypress/e2e/18-user-management.cy.ts
View file

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

7
cypress/pages/settings-personal.ts
View file

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

1
cypress/pages/sidebar/main-sidebar.ts
View file

@ -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: () => {

6
packages/design-system/.storybook/preview.js
View file

@ -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'],
},
},
};

2
packages/design-system/src/components/N8nAvatar/Avatar.vue
View file

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

177
packages/design-system/src/components/N8nButton/Button.scss
View file

@ -26,23 +26,72 @@
@include utils-user-select(none);
&:hover {
color: $button-hover-color unquote($important);
border-color: $button-hover-border-color unquote($important);
background-color: $button-hover-background-color unquote($important);
// Solution for a inside button
& a {
color: $button-font-color unquote($important);
}
&:focus {
border-color: $button-focus-outline-color unquote($important);
outline: $focus-outline-width solid $button-focus-outline-color unquote($important);
&:hover {
color: $button-hover-font-color unquote($important);
border-color: $button-hover-border-color unquote($important);
background-color: $button-hover-background-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-active-background-color: var(--color-primary-tint-2);
--button-active-color: var(--color-primary);
--button-active-border-color: var(--color-primary);
--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-hover-background-color: var(--color-primary-tint-3);
--button-hover-color: var(--color-primary);
--button-hover-border-color: var(--color-primary);
--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-outline-color: var(--color-primary-tint-1);
--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-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-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-loading-font-color: var(--color-button-danger-font);
--button-loading-border-color: var(--color-danger);
--button-loading-background-color: var(--color-danger);
}

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

57
packages/design-system/src/components/N8nCallout/Callout.vue
View file

@ -93,6 +93,9 @@ export default defineComponent({
border: var(--border-width-base) var(--border-style-base);
align-items: center;
line-height: var(--font-line-height-loose);
border-color: var(--color-callout-info-border);
background-color: var(--color-callout-info-background);
color: var(--color-callout-info-font);
&.slim {
line-height: var(--font-line-height-loose);
@ -111,27 +114,43 @@ export default defineComponent({
.info,
.custom {
border-color: var(--color-foreground-base);
background-color: var(--color-foreground-xlight);
color: var(--color-info);
}
border-color: var(--color-callout-info-border);
background-color: var(--color-callout-info-background);
color: var(--color-callout-info-font);
.warning {
border-color: var(--color-warning-tint-1);
background-color: var(--color-warning-tint-2);
color: var(--color-warning);
.icon {
color: var(--color-callout-info-icon);
}
}
.success {
border-color: var(--color-success-tint-1);
background-color: var(--color-success-tint-2);
color: var(--color-success);
border-color: var(--color-callout-success-border);
background-color: var(--color-callout-success-background);
color: var(--color-callout-success-font);
.icon {
color: var(--color-callout-success-icon);
}
}
.warning {
border-color: var(--color-callout-warning-border);
background-color: var(--color-callout-warning-background);
color: var(--color-callout-warning-font);
.icon {
color: var(--color-callout-warning-icon);
}
}
.danger {
border-color: var(--color-danger-tint-1);
background-color: var(--color-danger-tint-2);
color: var(--color-danger);
border-color: var(--color-callout-danger-border);
background-color: var(--color-callout-danger-background);
color: var(--color-callout-danger-font);
.icon {
color: var(--color-callout-danger-icon);
}
}
.icon {
@ -142,8 +161,12 @@ export default defineComponent({
.secondary {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
background-color: var(--color-secondary-tint-3);
border-color: var(--color-secondary-tint-1);
border-color: var(--color-callout-secondary-border);
background-color: var(--color-callout-secondary-background);
color: var(--color-callout-secondary-font);
.icon {
color: var(--color-callout-secondary-icon);
}
}
</style>

13
packages/design-system/src/components/N8nLink/Link.vue
View file

@ -50,12 +50,13 @@ export default defineComponent({
<style lang="scss" module>
@import '../../utils';
@import '../../css/common/var';
.primary {
color: var(--color-primary);
color: $link-color;
&:active {
color: saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(30%));
color: $link-color-active;
}
}
@ -63,11 +64,11 @@ export default defineComponent({
color: var(--color-text-base);
&:hover {
color: var(--color-primary);
color: $link-color;
}
&:active {
color: saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(30%));
color: $link-color-active;
}
}
@ -75,7 +76,7 @@ export default defineComponent({
color: var(--color-danger);
&:active {
color: saturation(--color-danger-h, --color-danger-s, --color-danger-l, -(20%));
color: var(--color-danger-shade-1);
}
}
@ -83,7 +84,7 @@ export default defineComponent({
color: var(--color-secondary);
&:active {
color: saturation(--color-secondary-h, --color-secondary-s, --color-secondary-l, -(20%));
color: var(--color-secondary-shade-1);
}
}

13
packages/design-system/src/components/N8nMarkdown/Markdown.vue
View file

@ -261,7 +261,16 @@ export default defineComponent({
}
.sticky {
color: var(--color-text-dark);
color: var(--color-sticky-font);
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-sticky-font);
}
h1,
h2,
@ -327,6 +336,8 @@ export default defineComponent({
img {
object-fit: contain;
margin-top: var(--spacing-xs);
margin-bottom: var(--spacing-2xs);
&[src*='#full-width'] {
width: 100%;

9
packages/design-system/src/components/N8nMenu/Menu.vue
View file

@ -4,6 +4,7 @@
['menu-container']: true,
[$style.container]: true,
[$style.menuCollapsed]: collapsed,
[$style.transparentBackground]: transparentBackground,
}"
>
<div v-if="$slots.header" :class="$style.menuHeader">
@ -83,6 +84,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
transparentBackground: {
type: Boolean,
default: false,
},
mode: {
type: String,
default: 'router',
@ -202,4 +207,8 @@ export default defineComponent({
display: none !important;
}
}
.transparentBackground {
background-color: transparent;
}
</style>

6
packages/design-system/src/components/N8nNotice/Notice.vue
View file

@ -95,7 +95,7 @@ export default defineComponent({
.notice {
font-size: var(--font-size-2xs);
display: flex;
color: var(--custom-font-black);
color: var(--color-notice-font);
margin: var(--notice-margin, var(--spacing-s) 0);
padding: var(--spacing-2xs);
background-color: var(--background-color);
@ -111,8 +111,8 @@ export default defineComponent({
}
.warning {
--border-color: var(--color-warning-tint-1);
--background-color: var(--color-warning-tint-2);
--border-color: var(--color-notice-warning-border);
--background-color: var(--color-notice-warning-background);
}
.danger {

6
packages/design-system/src/components/N8nTag/Tag.vue
View file

@ -29,11 +29,7 @@ export default defineComponent({
transition: background-color 0.3s ease;
&:hover {
background-color: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
calc(var(--color-background-base-l) - 4%)
);
background-color: var(--color-background-medium);
}
}
</style>

2
packages/design-system/src/components/N8nText/Text.vue
View file

@ -129,7 +129,7 @@ export default defineComponent({
}
.danger {
color: var(--color-danger);
color: var(--color-text-danger);
}
.success {

347
packages/design-system/src/css/_primitives.scss Normal file
View file

@ -0,0 +1,347 @@
// Primitive Colors
// Primitive colors shouldn't be used directly in components an other UI elements.
// They can be only mapped to tokens.
// Tokens should be used instead in components an other UI elements
@mixin primitives {
// Gray
--prim-gray-h: 220;
--prim-gray-s: 30%;
--prim-gray-820: hsl(var(--prim-gray-h), 1%, 18%);
--prim-gray-800: hsl(var(--prim-gray-h), 1%, 20%);
--prim-gray-740: hsl(var(--prim-gray-h), 2%, 26%);
--prim-gray-670: hsl(var(--prim-gray-h), 2%, 33%);
--prim-gray-540: hsl(var(--prim-gray-h), 4%, 46%);
--prim-gray-490: hsl(var(--prim-gray-h), 3%, 51%);
--prim-gray-420: hsl(var(--prim-gray-h), 4%, 58%);
--prim-gray-320: hsl(var(--prim-gray-h), 10%, 68%);
--prim-gray-200: hsl(var(--prim-gray-h), 18%, 80%);
--prim-gray-120: hsl(var(--prim-gray-h), 25%, 88%);
--prim-gray-70: hsl(var(--prim-gray-h), 32%, 93%);
--prim-gray-40: hsl(var(--prim-gray-h), 40%, 96%);
--prim-gray-10: hsl(var(--prim-gray-h), 47%, 99%);
--prim-gray-0-alpha-075: hsla(var(--prim-gray-h), 50%, 100%, 0.75);
--prim-gray-0-alpha-025: hsla(var(--prim-gray-h), 50%, 100%, 0.25);
--prim-gray-0: hsl(var(--prim-gray-h), 50%, 100%);
// Color Primary
--prim-color-primary-h: 7;
--prim-color-primary-s: 100%;
--prim-color-primary-l: 68%;
--prim-color-primary-shade-100: hsl(
var(--prim-color-primary-h),
calc(var(--prim-color-primary-s) - 15%),
calc(var(--prim-color-primary-l) - 10%)
);
--prim-color-primary: hsl(
var(--prim-color-primary-h),
var(--prim-color-primary-s),
var(--prim-color-primary-l)
);
--prim-color-primary-alpha-04: hsla(
var(--prim-color-primary-h),
var(--prim-color-primary-s),
var(--prim-color-primary-l),
0.4
);
--prim-color-primary-tint-100: hsl(
var(--prim-color-primary-h),
var(--prim-color-primary-s),
calc(var(--prim-color-primary-l) + 10%)
);
--prim-color-primary-tint-200: hsl(
var(--prim-color-primary-h),
var(--prim-color-primary-s),
calc(var(--prim-color-primary-l) + 20%)
);
--prim-color-primary-tint-250: hsl(
var(--prim-color-primary-h),
var(--prim-color-primary-s),
calc(var(--prim-color-primary-l) + 25%)
);
--prim-color-primary-tint-300: hsl(
var(--prim-color-primary-h),
var(--prim-color-primary-s),
calc(var(--prim-color-primary-l) + 30%)
);
// Color Secondary
--prim-color-secondary-h: 247;
--prim-color-secondary-s: 49%;
--prim-color-secondary-l: 53%;
--prim-color-secondary-shade-100: hsl(
var(--prim-color-secondary-h),
var(--prim-color-secondary-s),
calc(var(--prim-color-secondary-l) - 10%)
);
--prim-color-secondary: hsl(
var(--prim-color-secondary-h),
var(--prim-color-secondary-s),
var(--prim-color-secondary-l)
);
--prim-color-secondary-alpha-025: hsla(
var(--prim-color-secondary-h),
var(--prim-color-secondary-s),
var(--prim-color-secondary-l),
0.25
);
--prim-color-secondary-tint-100: hsl(
var(--prim-color-secondary-h),
var(--prim-color-secondary-s),
calc(var(--prim-color-secondary-l) + 10%)
);
--prim-color-secondary-tint-200: hsl(
var(--prim-color-secondary-h),
var(--prim-color-secondary-s),
calc(var(--prim-color-secondary-l) + 20%)
);
--prim-color-secondary-tint-300: hsl(
var(--prim-color-secondary-h),
var(--prim-color-secondary-s),
calc(var(--prim-color-secondary-l) + 30%)
);
--prim-color-secondary-tint-400: hsl(
var(--prim-color-secondary-h),
var(--prim-color-secondary-s),
calc(var(--prim-color-secondary-l) + 40%)
);
// Color Alternate A
--prim-color-alt-a-h: 150;
--prim-color-alt-a-s: 60%;
--prim-color-alt-a-l: 40%;
--prim-color-alt-a-shade-100: hsl(
var(--prim-color-alt-a-h),
var(--prim-color-alt-a-s),
calc(var(--prim-color-alt-a-l) - 10%)
);
--prim-color-alt-a: hsl(
var(--prim-color-alt-a-h),
var(--prim-color-alt-a-s),
var(--prim-color-alt-a-l)
);
--prim-color-alt-a-alpha-025: hsl(
var(--prim-color-alt-a-h),
var(--prim-color-alt-a-s),
var(--prim-color-alt-a-l),
0.25
);
--prim-color-alt-a-tint-300: hsl(
var(--prim-color-alt-a-h),
var(--prim-color-alt-a-s),
calc(var(--prim-color-alt-a-l) + 30%)
);
--prim-color-alt-a-tint-400: hsl(
var(--prim-color-alt-a-h),
var(--prim-color-alt-a-s),
calc(var(--prim-color-alt-a-l) + 40%)
);
--prim-color-alt-a-tint-500: hsl(
var(--prim-color-alt-a-h),
var(--prim-color-alt-a-s),
calc(var(--prim-color-alt-a-l) + 50%)
);
--prim-color-alt-a-tint-550: hsl(
var(--prim-color-alt-a-h),
var(--prim-color-alt-a-s),
calc(var(--prim-color-alt-a-l) + 55%)
);
// Color Alternate B
--prim-color-alt-b-h: 36;
--prim-color-alt-b-s: 77%;
--prim-color-alt-b-l: 57%;
--prim-color-alt-b-shade-100: hsl(
var(--prim-color-alt-b-h),
var(--prim-color-alt-b-s),
calc(var(--prim-color-alt-b-l) - 10%)
);
--prim-color-alt-b: hsl(
var(--prim-color-alt-b-h),
var(--prim-color-alt-b-s),
var(--prim-color-alt-b-l)
);
--prim-color-alt-b-alpha-02: hsla(
var(--prim-color-alt-b-h),
var(--prim-color-alt-b-s),
var(--prim-color-alt-b-l),
0.2
);
--prim-color-alt-b-tint-250: hsl(
var(--prim-color-alt-b-h),
var(--prim-color-alt-b-s),
calc(var(--prim-color-alt-b-l) + 25%)
);
--prim-color-alt-b-tint-400: hsl(
var(--prim-color-alt-b-h),
var(--prim-color-alt-b-s),
calc(var(--prim-color-alt-b-l) + 40%)
);
// Color Alternate C
--prim-color-alt-c-h: 355;
--prim-color-alt-c-s: 83%;
--prim-color-alt-c-l: 52%;
--prim-color-alt-c-shade-100: hsl(
var(--prim-color-alt-c-h),
var(--prim-color-alt-c-s),
calc(var(--prim-color-alt-c-l) - 10%)
);
--prim-color-alt-c: hsl(
var(--prim-color-alt-c-h),
var(--prim-color-alt-c-s),
var(--prim-color-alt-c-l)
);
--prim-color-alt-c-alpha-02: hsl(
var(--prim-color-alt-c-h),
var(--prim-color-alt-c-s),
var(--prim-color-alt-c-l),
0.2
);
--prim-color-alt-c-tint-150: hsl(
var(--prim-color-alt-c-h),
var(--prim-color-alt-c-s),
calc(var(--prim-color-alt-c-l) + 15%)
);
--prim-color-alt-c-tint-250: hsl(
var(--prim-color-alt-c-h),
var(--prim-color-alt-c-s),
calc(var(--prim-color-alt-c-l) + 25%)
);
--prim-color-alt-c-tint-400: hsl(
var(--prim-color-alt-c-h),
var(--prim-color-alt-c-s),
calc(var(--prim-color-alt-c-l) + 40%)
);
--prim-color-alt-c-tint-450: hsl(
var(--prim-color-alt-c-h),
var(--prim-color-alt-c-s),
calc(var(--prim-color-alt-c-l) + 45%)
);
// Color Alternate D
--prim-color-alt-d-h: 46;
--prim-color-alt-d-s: 100%;
--prim-color-alt-d-l: 92%;
--prim-color-alt-d-shade-150: hsl(
var(--prim-color-alt-d-h),
var(--prim-color-alt-d-s),
calc(var(--prim-color-alt-d-l) - 15%)
);
--prim-color-alt-d: hsl(
var(--prim-color-alt-d-h),
var(--prim-color-alt-d-s),
var(--prim-color-alt-d-l)
);
// Color Alternate E
--prim-color-alt-e-h: 210;
--prim-color-alt-e-s: 67%;
--prim-color-alt-e-l: 57%;
--prim-color-alt-e-shade-150: hsl(
var(--prim-color-alt-e-h),
var(--prim-color-alt-e-s),
calc(var(--prim-color-alt-e-l) - 15%)
);
--prim-color-alt-e-shade-100: hsl(
var(--prim-color-alt-e-h),
var(--prim-color-alt-e-s),
calc(var(--prim-color-alt-e-l) - 10%)
);
--prim-color-alt-e: hsl(
var(--prim-color-alt-e-h),
var(--prim-color-alt-e-s),
var(--prim-color-alt-e-l)
);
--prim-color-alt-e-alpha-04: hsla(
var(--prim-color-alt-e-h),
var(--prim-color-alt-e-s),
var(--prim-color-alt-e-l),
0.4
);
// Color Alternate F
--prim-color-alt-f-h: 72;
--prim-color-alt-f-s: 100%;
--prim-color-alt-f-l: 27%;
--prim-color-alt-f: hsl(
var(--prim-color-alt-f-h),
var(--prim-color-alt-f-s),
var(--prim-color-alt-f-l)
);
--prim-color-alt-f-tint-150: hsl(
var(--prim-color-alt-f-h),
var(--prim-color-alt-f-s),
calc(var(--prim-color-alt-f-l) + 15%)
);
// Color Alternate G
--prim-color-alt-g-h: 276;
--prim-color-alt-g-s: 31%;
--prim-color-alt-g-l: 50%;
--prim-color-alt-g: hsl(
var(--prim-color-alt-g-h),
var(--prim-color-alt-g-s),
var(--prim-color-alt-g-l)
);
--prim-color-alt-g-tint-150: hsl(
var(--prim-color-alt-g-h),
var(--prim-color-alt-g-s),
calc(var(--prim-color-alt-g-l) + 15%)
);
// Color Alternate H
--prim-color-alt-h-h: 184;
--prim-color-alt-h-s: 44%;
--prim-color-alt-h-l: 43%;
--prim-color-alt-h: hsl(
var(--prim-color-alt-h-h),
var(--prim-color-alt-h-s),
var(--prim-color-alt-h-l)
);
// Color Alternate I
--prim-color-alt-i-h: 147;
--prim-color-alt-i-s: 83%;
--prim-color-alt-i-l: 44%;
--prim-color-alt-i: hsl(
var(--prim-color-alt-i-h),
var(--prim-color-alt-i-s),
var(--prim-color-alt-i-l)
);
// Color Alternate J
--prim-color-alt-j-h: 247;
--prim-color-alt-j-s: 10%;
--prim-color-alt-j-l: 30%;
--prim-color-alt-j: hsl(
var(--prim-color-alt-j-h),
var(--prim-color-alt-j-s),
var(--prim-color-alt-j-l)
);
--prim-color-alt-j-alpha-075: hsla(
var(--prim-color-alt-j-h),
var(--prim-color-alt-j-s),
var(--prim-color-alt-j-l),
0.75
);
}
:root {
@include primitives;
}

423
packages/design-system/src/css/_tokens.dark.scss
View file

@ -1,334 +1,151 @@
@use 'sass:math';
@mixin theme {
--color-primary-h: 7;
--color-primary-s: 90%;
--color-primary-l: 68%;
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
// Primary tokens
--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)
);
// Text
--color-text-dark: var(--prim-gray-40);
--color-text-base: var(--prim-gray-200);
--color-text-light: var(--prim-gray-320);
--color-text-lighter: var(--prim-gray-740);
--color-text-xlight: var(--prim-gray-820);
--color-text-danger: var(--prim-color-alt-c-tint-150);
--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)
);
// Foreground
--color-foreground-xdark: var(--prim-gray-200);
--color-foreground-dark: var(--prim-gray-420);
--color-foreground-base: var(--prim-gray-670);
--color-foreground-light: var(--prim-gray-740);
--color-foreground-xlight: var(--prim-gray-820);
--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)
);
// Background
--color-background-dark: var(--prim-gray-70);
--color-background-medium: var(--prim-gray-540);
--color-background-base: var(--prim-gray-670);
--color-background-light: var(--prim-gray-820);
--color-background-xlight: var(--prim-gray-740);
--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)
);
// Secondary tokens
--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)
);
// Canvas
--color-canvas-background: var(--prim-gray-820);
--color-canvas-dot: var(--prim-gray-670);
--color-canvas-read-only-line: var(--prim-gray-800);
--color-canvas-node-background: var(--prim-gray-40);
--color-canvas-node-pinned-border: var(--prim-color-secondary-tint-100);
--color-canvas-selected: var(--prim-gray-0-alpha-025);
--node-type-main-color: var(--prim-gray-420);
--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));
// Expressions
--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);
--color-invalid-resolvable-foreground: var(--prim-color-alt-c-tint-250);
--color-invalid-resolvable-background: var(--prim-color-alt-c-alpha-02);
--color-expression-editor-background: var(--prim-gray-800);
--color-expression-syntax-example: var(--prim-gray-670);
--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)
);
// Code
--color-code-tags-string: var(--prim-color-alt-f-tint-150);
--color-code-tags-primitive: var(--prim-color-alt-b-shade-100);
--color-code-tags-keyword: var(--prim-color-alt-g-tint-150);
--color-code-tags-operator: var(--prim-color-alt-h);
--color-code-tags-variable: var(--prim-color-primary-tint-100);
--color-code-tags-definition: var(--prim-color-alt-e);
--color-json-default: var(--prim-color-secondary-tint-200);
--color-json-null: var(--prim-color-alt-c-tint-150);
--color-json-boolean: var(--prim-color-alt-a);
--color-json-number: var(--prim-color-alt-a);
--color-json-string: var(--prim-color-secondary-tint-200);
--color-json-key: var(--prim-gray-670);
--color-json-brackets: var(--prim-gray-670);
--color-json-brackets-hover: var(--prim-color-alt-e);
--color-json-line: var(--prim-gray-200);
--color-json-highlight: var(--prim-gray-70);
--color-code-background: var(--prim-gray-800);
--color-code-background-readonly: var(--prim-gray-740);
--color-code-lineHighlight: var(--prim-gray-740);
--color-code-foreground: var(--prim-gray-70);
--color-code-caret: var(--prim-gray-10);
--color-code-selection: var(--prim-color-alt-e-alpha-04);
--color-code-gutterBackground: var(--prim-gray-670);
--color-code-gutterForeground: var(--prim-gray-320);
--color-code-tags-comment: var(--prim-gray-200);
--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)
);
// Variables
--color-variables-usage-font: var(--prim-color-alt-a-tint-300);
--color-variables-usage-syntax-bg: var(--prim-color-alt-a-alpha-025);
--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));
// Button primary
--color-button-primary-disabled-font: var(--prim-gray-0-alpha-025);
--color-button-primary-disabled-border: transparent;
--color-button-primary-disabled-background: var(--prim-color-primary-alpha-04);
--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)
);
// Button secondary
--color-button-secondary-border: var(--prim-gray-420);
--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)
);
// Text button
--color-text-button-secondary-font: var(--prim-gray-320);
--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));
// Table
--color-table-header-background: var(--prim-gray-740);
--color-table-row-background: var(--prim-gray-820);
--color-table-row-even-background: var(--prim-gray-800);
--color-table-row-hover-background: var(--prim-gray-740);
--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)
);
// Notification
--color-notification-background: var(--prim-gray-740);
--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)
);
// NDV
--color-run-data-background: var(--prim-gray-800);
--color-ndv-droppable-parameter: var(--prim-color-primary);
--color-ndv-back-font: var(--prim-gray-0);
--color-ndv-ouptut-error-font: var(--prim-color-alt-c-tint-150);
--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));
// Notice
--color-notice-warning-border: var(--prim-color-alt-b-tint-250);
--color-notice-warning-background: var(--prim-color-alt-b-alpha-02);
--color-notice-font: var(--prim-gray-0);
--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));
// Callout
--color-callout-info-border: var(--prim-gray-420);
--color-callout-info-background: var(--prim-gray-740);
--color-callout-info-font: var(--prim-gray-0);
--color-callout-success-border: var(--color-success);
--color-callout-success-background: var(--prim-color-alt-a-alpha-025);
--color-callout-success-font: var(--prim-gray-0);
--color-callout-warning-border: var(--color-warning);
--color-callout-warning-background: var(--prim-color-alt-b-alpha-02);
--color-callout-warning-font: var(--prim-gray-0);
--color-callout-danger-border: var(--color-danger);
--color-callout-danger-background: var(--prim-color-alt-c-alpha-02);
--color-callout-danger-font: var(--prim-gray-0);
--color-callout-secondary-border: var(--color-secondary);
--color-callout-secondary-background: var(--prim-color-secondary-alpha-025);
--color-callout-secondary-font: var(--prim-gray-0);
--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));
// Dialog
--color-dialog-overlay-background: var(--prim-color-alt-j-alpha-075);
--color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075);
--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)
);
// Avatar
--color-avatar-font: var(--prim-gray-0);
--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)
);
// Value Survey
--color-value-survey-background: var(--prim-gray-740);
--color-value-survey-font: var(--prim-gray-0);
--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)
);
--border-color-base: var(--color-foreground-base);
--border-color-light: var(--color-foreground-light);
--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)
);
--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
}
--color-text-xlight-h: 0;
--color-text-xlight-s: 0%;
--color-text-xlight-l: 10%;
--color-text-xlight: hsl(
var(--color-text-xlight-h),
var(--color-text-xlight-s),
var(--color-text-xlight-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-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-foreground-xlight-h: 0;
--color-foreground-xlight-s: 0%;
--color-foreground-xlight-l: 10%;
--color-foreground-xlight: hsl(
var(--color-foreground-xlight-h),
var(--color-foreground-xlight-s),
var(--color-foreground-xlight-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-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-background-light-h: 220;
--color-background-light-s: 10%;
--color-background-light-l: 15%;
--color-background-light: hsl(
var(--color-background-light-h),
var(--color-background-light-s),
var(--color-background-light-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-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-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-canvas-background-h: 200;
--color-canvas-background-s: 10%;
--color-canvas-background-l: 10%;
--color-canvas-background: hsl(
var(--color-canvas-background-h),
var(--color-canvas-background-s),
var(--color-canvas-background-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: #dcdfea;
--color-code-background: #222020;
--color-code-background-readonly: #323230;
--color-code-foreground: #f8f8f2;
--color-code-caret: #f8f8f0;
--color-code-selection: #312b25;
--color-code-gutterBackground: #2d2a26;
--color-code-gutterForeground: #818080;
--color-code-lineHighlight: #312b25;
--color-code-tags-comment: #6272a4;
--color-code-tags-string: #f1fa8c;
--color-code-tags-primitive: #bd93f9;
--color-code-tags-keyword: #ff79c6;
--color-code-tags-operator: #ff79c6;
--color-code-tags-variable: #ea6465;
--color-code-tags-definition: #368da5;
// 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)
);
}
}
body[data-theme='dark'] {
@include theme;
}
@media (prefers-color-scheme: dark) {
body.theme-dark-beta {
body:not([data-theme]) {
@include theme;
}
}

564
packages/design-system/src/css/_tokens.scss
View file

@ -1,403 +1,233 @@
@use 'sass:math';
@mixin theme {
--color-primary-h: 6.9;
--color-primary-s: 100%;
--color-primary-l: 67.6%;
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
--color-primary-h: var(--prim-color-primary-h);
--color-primary-s: var(--prim-color-primary-s);
--color-primary-l: 68%;
--color-primary-tint-1-l: 88%;
--color-primary-tint-1: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-1-l)
);
// Primary tokens
--color-primary-tint-2-l: 94.5%;
--color-primary-tint-2: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-2-l)
);
// Primary
--color-primary-shade-1: var(--prim-color-primary-shade-100);
--color-primary: var(--prim-color-primary);
--color-primary-tint-1: var(--prim-color-primary-tint-200);
--color-primary-tint-2: var(--prim-color-primary-tint-250);
--color-primary-tint-3: var(--prim-color-primary-tint-300);
--color-primary-tint-3-l: 96.9%;
--color-primary-tint-3: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-tint-3-l)
);
// Secondary
--color-secondary-shade-1: var(--prim-color-secondary-shade-100);
--color-secondary: var(--prim-color-secondary);
--color-secondary-tint-1: var(--prim-color-secondary-tint-300);
--color-secondary-tint-3: var(--prim-color-secondary-tint-400);
--color-primary-shade-1-l: 57.6%;
--color-primary-shade-1: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-shade-1-l)
);
// Success
--color-success-shade-1: var(--prim-color-alt-a-shade-100);
--color-success: var(--prim-color-alt-a);
--color-success-light: var(--prim-color-alt-a-tint-300);
--color-success-light-2: var(--prim-color-alt-a-tint-400);
--color-success-tint-1: var(--prim-color-alt-a-tint-500);
--color-success-tint-2: var(--prim-color-alt-a-tint-550);
--color-primary-shade-2-l: 23%;
--color-primary-shade-2: hsl(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-shade-2-l)
);
// Warning
--color-warning-shade-1: var(--prim-color-alt-b-shade-100);
--color-warning: var(--prim-color-alt-b);
--color-warning-tint-1: var(--prim-color-alt-b-tint-250);
--color-warning-tint-2: var(--prim-color-alt-b-tint-400);
--color-avatar-accent-1-h: 40;
--color-avatar-accent-1-s: 15.3%;
--color-avatar-accent-1-l: 88.4%;
--color-avatar-accent-1: hsl(
var(--color-avatar-accent-1-h),
var(--color-avatar-accent-1-s),
var(--color-avatar-accent-1-l)
);
// Danger
--color-danger-shade-1: var(--prim-color-alt-c-shade-100);
--color-danger: var(--prim-color-alt-c);
--color-danger-tint-1: var(--prim-color-alt-c-tint-400);
--color-danger-tint-2: var(--prim-color-alt-c-tint-450);
--color-avatar-accent-2-h: 212;
--color-avatar-accent-2-s: 71%;
--color-avatar-accent-2-l: 48.6%;
--color-avatar-accent-2: hsl(
var(--color-avatar-accent-2-h),
var(--color-avatar-accent-2-s),
var(--color-avatar-accent-2-l)
);
// Text
--color-text-dark: var(--prim-gray-740);
--color-text-base: var(--prim-gray-540);
--color-text-light: var(--prim-gray-420);
--color-text-lighter: var(--prim-gray-120);
--color-text-xlight: var(--prim-gray-0);
--color-text-danger: var(--prim-color-alt-c);
--color-secondary-h: 247;
--color-secondary-s: 49%;
--color-secondary-l: 53%;
--color-secondary: hsl(
var(--color-secondary-h),
var(--color-secondary-s),
var(--color-secondary-l)
);
// Foreground
--color-foreground-xdark: var(--prim-gray-490);
--color-foreground-dark: var(--prim-gray-200);
--color-foreground-base: var(--prim-gray-120);
--color-foreground-light: var(--prim-gray-70);
--color-foreground-xlight: var(--prim-gray-0);
--color-secondary-tint-1-l: 85%;
--color-secondary-tint-1: hsl(
var(--color-secondary-h),
var(--color-secondary-s),
var(--color-secondary-tint-1-l)
);
// Background
--color-background-dark: var(--prim-gray-820);
--color-background-medium: var(--prim-gray-120);
--color-background-base: var(--prim-gray-40);
--color-background-light: var(--prim-gray-10);
--color-background-xlight: var(--prim-gray-0);
--color-secondary-tint-2-l: 92%;
--color-secondary-tint-2: hsl(
var(--color-secondary-h),
var(--color-secondary-s),
var(--color-secondary-tint-2-l)
);
// Secondary tokens
--color-secondary-tint-3-l: 95%;
--color-secondary-tint-3: hsl(
var(--color-secondary-h),
var(--color-secondary-s),
var(--color-secondary-tint-3-l)
);
// Canvas
--color-canvas-background: var(--prim-gray-10);
--color-canvas-dot: var(--prim-gray-120);
--color-canvas-read-only-line: var(--prim-gray-40);
--color-canvas-node-background: var(--prim-gray-0);
--color-canvas-node-pinned-border: var(--color-secondary);
--color-canvas-selected: var(--prim-gray-70);
--node-type-main-color: var(--prim-gray-490);
--color-secondary-tint-4-l: 98%;
--color-secondary-tint-4: hsl(
var(--color-secondary-h),
var(--color-secondary-s),
var(--color-secondary-tint-4-l)
);
// Sticky
--color-sticky-default-background: var(--prim-color-alt-d);
--color-sticky-default-border: var(--prim-color-alt-d-shade-150);
--color-sticky-font: var(--prim-gray-740);
--color-success-h: 150.4;
--color-success-s: 60%;
--color-success-l: 40.4%;
--color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
// Expressions
--color-valid-resolvable-foreground: var(--prim-color-alt-a);
--color-valid-resolvable-background: var(--prim-color-alt-a-tint-500);
--color-invalid-resolvable-foreground: var(--prim-color-alt-c);
--color-invalid-resolvable-background: var(--prim-color-alt-c-tint-450);
--color-expression-editor-background: var(--prim-gray-0);
--color-expression-syntax-example: var(--prim-gray-40);
--color-success-tint-1-l: 90%;
--color-success-tint-1: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-tint-1-l)
);
// Code
--color-code-tags-string: var(--prim-color-alt-f);
--color-code-tags-primitive: var(--prim-color-alt-b-shade-100);
--color-code-tags-keyword: var(--prim-color-alt-g);
--color-code-tags-operator: var(--prim-color-alt-h);
--color-code-tags-variable: var(--prim-color-alt-c-shade-100);
--color-code-tags-definition: var(--prim-color-alt-e-shade-150);
--color-json-default: var(--prim-color-secondary-shade-100);
--color-json-null: var(--prim-color-alt-c);
--color-json-boolean: var(--prim-color-alt-a);
--color-json-number: var(--prim-color-alt-a);
--color-json-string: var(--prim-color-secondary-shade-100);
--color-json-key: var(--prim-gray-670);
--color-json-brackets: var(--prim-gray-670);
--color-json-brackets-hover: var(--prim-color-alt-e);
--color-json-line: var(--prim-gray-200);
--color-json-highlight: var(--prim-gray-70);
--color-code-background: var(--prim-gray-0);
--color-code-background-readonly: var(--prim-gray-40);
--color-code-lineHighlight: var(--prim-gray-40);
--color-code-foreground: var(--prim-gray-670);
--color-code-caret: var(--prim-gray-420);
--color-code-selection: var(--prim-gray-120);
--color-code-gutterBackground: var(--prim-gray-0);
--color-code-gutterForeground: var(--prim-gray-320);
--color-code-tags-comment: var(--prim-gray-420);
--color-autocomplete-selected-background: var(--prim-color-alt-e);
--color-autocomplete-selected-font: var(--prim-gray-0);
--color-success-tint-2-l: 94.9%;
--color-success-tint-2: hsl(
var(--color-success-h),
var(--color-success-s),
var(--color-success-tint-2-l)
);
// Variables
--color-variables-usage-font: var(--color-success);
--color-variables-usage-syntax-bg: var(--color-success-tint-2);
--color-success-light-h: 150;
--color-success-light-s: 54%;
--color-success-light-l: 70%;
--color-success-light: hsl(
var(--color-success-light-h),
var(--color-success-light-s),
var(--color-success-light-l)
);
// Button primary
--color-button-primary-font: var(--prim-gray-0);
--color-button-primary-border: var(--prim-color-primary);
--color-button-primary-background: var(--prim-color-primary);
--color-button-primary-hover-active-border: var(--prim-color-primary-shade-100);
--color-button-primary-hover-active-background: var(--prim-color-primary-shade-100);
--color-button-primary-focus-outline: var(--prim-color-primary-tint-200);
--color-button-primary-disabled-font: var(--prim-gray-0-alpha-075);
--color-button-primary-disabled-border: var(--prim-color-primary-tint-200);
--color-button-primary-disabled-background: var(--prim-color-primary-tint-200);
--color-warning-h: 36;
--color-warning-s: 77%;
--color-warning-l: 57%;
--color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
// Button secondary
--color-button-secondary-font: var(--prim-gray-670);
--color-button-secondary-border: var(--prim-gray-320);
--color-button-secondary-background: var(--prim-gray-0);
--color-button-secondary-hover-active-focus-font: var(--prim-color-primary);
--color-button-secondary-hover-active-border: var(--prim-color-primary);
--color-button-secondary-hover-background: var(--prim-color-primary-tint-300);
--color-button-secondary-active-background: var(--prim-color-primary-tint-250);
--color-button-secondary-focus-outline: var(--prim-gray-120);
--color-button-secondary-disabled-font: var(--prim-gray-200);
--color-button-secondary-disabled-border: var(--prim-gray-200);
--color-warning-tint-1-h: 35;
--color-warning-tint-1-s: 77%;
--color-warning-tint-1-l: 84%;
--color-warning-tint-1: hsl(
var(--color-warning-h),
var(--color-warning-s),
var(--color-warning-tint-1-l)
);
// Button success, warning, danger
--color-button-success-font: var(--prim-gray-0);
--color-button-success-disabled-font: var(--prim-gray-0-alpha-075);
--color-button-warning-font: var(--color-text-xlight);
--color-button-warning-disabled-font: var(--prim-gray-0-alpha-075);
--color-button-danger-font: var(--color-text-xlight);
--color-button-danger-disabled-font: var(--prim-gray-0-alpha-075);
--color-warning-tint-2-h: 34;
--color-warning-tint-2-s: 80%;
--color-warning-tint-2-l: 96%;
--color-warning-tint-2: hsl(
var(--color-warning-tint-2-h),
var(--color-warning-tint-2-s),
var(--color-warning-tint-2-l)
);
// Text button
--color-text-button-secondary-font: var(--prim-gray-670);
--color-danger-h: 355;
--color-danger-s: 83%;
--color-danger-l: 52%;
--color-danger: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
// Node Creator Button
--color-button-node-creator-border-font: var(--prim-gray-540);
--color-button-node-creator-hover-border-font: var(--prim-color-primary);
--color-button-node-creator-background: var(--prim-gray-0);
--color-danger-tint-1-l: 93.9%;
--color-danger-tint-1: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-tint-1-l)
);
--color-danger-tint-2-l: 96.9%;
--color-danger-tint-2: hsl(
var(--color-danger-h),
var(--color-danger-s),
var(--color-danger-tint-2-l)
);
// Table
--color-table-header-background: var(--color-background-base);
--color-table-row-background: var(--color-background-xlight);
--color-table-row-even-background: var(--color-background-light);
--color-table-row-hover-background: var(--color-primary-tint-3);
--color-info-h: 220;
--color-info-s: 4%;
--color-info-l: 58%;
--color-info: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
// Notification
--color-notification-background: var(--color-background-xlight);
--color-info-tint-1-l: 88%;
--color-info-tint-1: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-1-l));
--color-info-tint-2-l: 96%;
--color-info-tint-2: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-2-l));
// Execution card
--execution-card-border-success: var(--prim-color-alt-a-tint-300);
--execution-card-border-error: var(--prim-color-alt-c-tint-250);
--execution-card-border-waiting: var(--prim-color-secondary-tint-300);
--execution-card-border-running: var(--prim-color-alt-b-tint-250);
--execution-card-border-unknown: var(--prim-gray-120);
--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));
// NDV
--color-run-data-background: var(--color-background-base);
--color-ndv-droppable-parameter: var(--color-secondary);
--color-ndv-back-font: var(--prim-gray-0);
--color-ndv-ouptut-error-font: var(--prim-color-alt-c);
--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)
);
// Notice
--color-notice-warning-border: var(--color-warning-tint-1);
--color-notice-warning-background: var(--color-warning-tint-2);
--color-notice-font: var(--color-text-base);
--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));
// Callout
--color-callout-info-border: var(--color-foreground-base);
--color-callout-info-background: var(--color-foreground-xlight);
--color-callout-info-font: var(--color-info);
--color-callout-info-icon: var(--color-info);
--color-callout-success-border: var(--color-success-light-2);
--color-callout-success-background: var(--color-success-tint-2);
--color-callout-success-font: var(--color-success);
--color-callout-success-icon: var(--color-success);
--color-callout-warning-border: var(--color-warning-tint-1);
--color-callout-warning-background: var(--color-warning-tint-2);
--color-callout-warning-font: var(--color-warning);
--color-callout-warning-icon: var(--color-warning);
--color-callout-danger-border: var(--color-danger-tint-1);
--color-callout-danger-background: var(--color-danger-tint-2);
--color-callout-danger-font: var(--color-danger);
--color-callout-danger-icon: var(--color-danger);
--color-callout-secondary-border: var(--color-secondary-tint-1);
--color-callout-secondary-background: var(--color-secondary-tint-3);
--color-callout-secondary-font: var(--color-secondary);
--color-callout-secondary-icon: var(--color-secondary);
--color-text-dark-h: 0;
--color-text-dark-s: 0%;
--color-text-dark-l: 33.3%;
--color-text-dark: hsl(
var(--color-text-dark-h),
var(--color-text-dark-s),
var(--color-text-dark-l)
);
// Dialog
--color-dialog-overlay-background: var(--prim-gray-0-alpha-075);
--color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075);
--color-text-base-h: 240;
--color-text-base-s: 4%;
--color-text-base-l: 51%;
--color-text-base: hsl(
var(--color-text-base-h),
var(--color-text-base-s),
var(--color-text-base-l)
);
// Avatar
--color-avatar-font: var(--color-text-xlight);
--color-text-light-h: 220;
--color-text-light-s: 4.2%;
--color-text-light-l: 58.2%;
--color-text-light: hsl(
var(--color-text-light-h),
var(--color-text-light-s),
var(--color-text-light-l)
);
// Value Survey
--color-value-survey-background: var(--prim-gray-740);
--color-value-survey-font: var(--prim-gray-0);
--color-text-lighter-h: 222;
--color-text-lighter-s: 16.7%;
--color-text-lighter-l: 88.2%;
--color-text-lighter: hsl(
var(--color-text-lighter-h),
var(--color-text-lighter-s),
var(--color-text-lighter-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-xdark-h: 220;
--color-foreground-xdark-s: 7.4%;
--color-foreground-xdark-l: 52.5%;
--color-foreground-xdark: hsl(
var(--color-foreground-xdark-h),
var(--color-foreground-xdark-s),
var(--color-foreground-xdark-l)
);
--color-foreground-dark-h: 228;
--color-foreground-dark-s: 9.6%;
--color-foreground-dark-l: 79.6%;
--color-foreground-dark: hsl(
var(--color-foreground-dark-h),
var(--color-foreground-dark-s),
var(--color-foreground-dark-l)
);
--color-foreground-base-h: 220;
--color-foreground-base-s: 20%;
--color-foreground-base-l: 88.2%;
--color-foreground-base: hsl(
var(--color-foreground-base-h),
var(--color-foreground-base-s),
var(--color-foreground-base-l)
);
--color-foreground-light-h: 0;
--color-foreground-light-s: 0%;
--color-foreground-light-l: 93.3%;
--color-foreground-light: hsl(
var(--color-foreground-light-h),
var(--color-foreground-light-s),
var(--color-foreground-light-l)
);
--color-foreground-xlight-h: 0;
--color-foreground-xlight-s: 0%;
--color-foreground-xlight-l: 100%;
--color-foreground-xlight: hsl(
var(--color-foreground-xlight-h),
var(--color-foreground-xlight-s),
var(--color-foreground-xlight-l)
);
--color-background-dark-h: 240;
--color-background-dark-s: 4.2%;
--color-background-dark-l: 18.8%;
--color-background-dark: hsl(
var(--color-background-dark-h),
var(--color-background-dark-s),
var(--color-background-dark-l)
);
--color-background-base-h: 220;
--color-background-base-s: 30%;
--color-background-base-l: 96.1%;
--color-background-base: hsl(
var(--color-background-base-h),
var(--color-background-base-s),
var(--color-background-base-l)
);
--color-background-light-h: 220;
--color-background-light-s: 60%;
--color-background-light-l: 99%;
--color-background-light: hsl(
var(--color-background-light-h),
var(--color-background-light-s),
var(--color-background-light-l)
);
--color-background-lighter-h: 252;
--color-background-lighter-s: 71.4%;
--color-background-lighter-l: 98.6%;
--color-background-lighter: hsl(
var(--color-background-lighter-h),
var(--color-background-lighter-s),
var(--color-background-lighter-l)
);
--color-background-xlight-h: 0;
--color-background-xlight-s: 0%;
--color-background-xlight-l: 100%;
--color-background-xlight: hsl(
var(--color-background-xlight-h),
var(--color-background-xlight-s),
var(--color-background-xlight-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-canvas-background-h: 260;
--color-canvas-background-s: 100%;
--color-canvas-background-l: 99.4%;
--color-canvas-background: hsl(
var(--color-canvas-background-h),
var(--color-canvas-background-s),
var(--color-canvas-background-l)
);
--color-json-default: #5045a1;
--color-json-null: var(--color-danger);
--color-json-boolean: var(--color-success);
--color-json-number: var(--color-success);
--color-json-string: #5045a1;
--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: #e2e5ee;
--color-sticky-default-background-h: 46;
--color-sticky-default-background-s: 100%;
--color-sticky-default-background-l: 92%;
--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-code-background: #ffffff;
--color-code-background-readonly: #f5f2f0;
--color-code-foreground: #4d4d4c;
--color-code-caret: #aeafad;
--color-code-selection: #d6d6d6;
--color-code-gutterBackground: #ffffff;
--color-code-gutterForeground: #4d4d4c80;
--color-code-lineHighlight: #efefef;
--color-code-tags-comment: #8e908c;
--color-code-tags-string: #718c00;
--color-code-tags-primitive: #f5871f;
--color-code-tags-keyword: #8959a8;
--color-code-tags-operator: #3e999f;
--color-code-tags-variable: #c82829;
--color-code-tags-definition: #4271ae;
--color-expression-editor-background: #fff;
--color-valid-resolvable-foreground: #29a568;
--color-valid-resolvable-background: #e1f3d8;
--color-invalid-resolvable-foreground: #f45959;
--color-invalid-resolvable-background: #fef0f0;
--color-expression-syntax-example: #f0f0f0;
// Various
--color-avatar-accent-1: var(--prim-gray-120);
--color-avatar-accent-2: var(--prim-color-alt-e-shade-100);
--color-info: var(--prim-gray-420);
--color-info-tint-1: var(--prim-gray-120);
--color-info-tint-2: var(--prim-gray-40);
--color-grey: var(--prim-gray-200);
--color-light-grey: var(--prim-gray-120);
--color-neutral: var(--prim-gray-490);
--color-switch: var(--prim-color-alt-i);
// Generated Color Shades from 50 to 950
// Not yet used in design system

313
packages/design-system/src/css/common/var.scss
View file

@ -21,162 +21,36 @@ $color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$color-white: var(--color-foreground-xlight);
$color-black: var(--color-foreground-dark);
$color-primary-light-1: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
4%
);
$color-primary-light-2: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
8%
);
$color-primary-light-3: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
12%
);
$color-primary-light-4: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
16%
);
$color-primary-light-5: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
20%
);
$color-primary-light-6: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
24%
);
$color-primary-light-7: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
28%
);
$color-primary-light-8: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
32%
);
$color-primary-light-9: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
36%
);
$color-primary-light: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
30%
);
$color-primary-lighter: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
34%
);
$color-primary-light-1: var(--color-primary);
$color-primary-light-2: var(--prim-color-primary-tint-100); // ! TODO Token should be used here
$color-primary-light-3: var(--prim-color-primary-tint-100); // ! TODO Token should be used here
$color-primary-light-4: var(--color-primary-tint-1);
$color-primary-light-5: var(--color-primary-tint-1);
$color-primary-light-6: var(--color-primary-tint-2);
$color-primary-light-9: var(--color-primary-tint-3);
$color-primary-light: var(--color-primary-tint-3);
$color-primary-lighter: var(--color-primary-tint-3);
$color-primary-shade-1: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
-(10)
);
$color-success-light-1: var(--color-success);
$color-success-light: var(--color-success-light);
$color-success-lighter: var(--color-success-tint-1);
$color-success-light-1: function.lightness(
--color-success-h,
--color-success-s,
--color-success-l,
4%
);
$color-success-light-3: function.lightness(
--color-success-h,
--color-success-s,
--color-success-l,
12%
);
$color-success-light-5: function.lightness(
--color-success-h,
--color-success-s,
--color-success-l,
20%
);
$color-success-light: function.lightness(
--color-success-h,
--color-success-s,
--color-success-l,
41%
);
$color-success-lighter: function.lightness(
--color-success-h,
--color-success-s,
--color-success-l,
48%
);
$color-warning-light-1: var(--color-warning);
$color-warning-light-3: var(--color-warning-tint-1);
$color-warning-light-5: var(--color-warning-tint-1);
$color-warning-light: var(--color-warning-tint-2);
$color-warning-lighter: var(--color-warning-tint-2);
$color-warning-light-1: function.lightness(
--color-warning-h,
--color-warning-s,
--color-warning-l,
4%
);
$color-warning-light-3: function.lightness(
--color-warning-h,
--color-warning-s,
--color-warning-l,
12%
);
$color-warning-light-5: function.lightness(
--color-warning-h,
--color-warning-s,
--color-warning-l,
20%
);
$color-warning-light: function.lightness(
--color-warning-h,
--color-warning-s,
--color-warning-l,
34%
);
$color-warning-lighter: function.lightness(
--color-warning-h,
--color-warning-s,
--color-warning-l,
40%
);
$color-danger-light-1: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 4%);
$color-danger-light-3: function.lightness(
--color-danger-h,
--color-danger-s,
--color-danger-l,
12%
);
$color-danger-light-5: function.lightness(
--color-danger-h,
--color-danger-s,
--color-danger-l,
20%
);
$color-danger-light: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 24%);
$color-danger-light-1: var(--color-danger);
$color-danger-light-3: var(--prim-color-alt-c-tint-150); // ! TODO Token should be used here
$color-danger-light-5: var(--prim-color-alt-c-tint-150); // ! TODO Token should be used here
$color-danger-light: var(--color-danger-tint-1);
$color-danger-lighter: var(--color-danger-tint-2);
$color-info-light-1: function.lightness(--color-info-h, --color-info-s, --color-info-l, 4%);
$color-info-light-3: function.lightness(--color-info-h, --color-info-s, --color-info-l, 12%);
$color-info-light-5: function.lightness(--color-info-h, --color-info-s, --color-info-l, 20%);
$color-info-lighter: function.lightness(--color-info-h, --color-info-s, --color-info-l, 39%);
$color-info-light-1: var(-color-info);
$color-info-light-3: var(--prim-gray-320); // ! TODO Token should be used here
$color-info-light-5: var(--prim-gray-200); // ! TODO Token should be used here
$color-info-lighter: var(--color-info-tint-2);
// Background
/// color|1|Background Color|4
@ -184,8 +58,9 @@ $background-color-base: var(--color-background-base);
/* Link
-------------------------- */
$link-color: $color-primary-light-2;
$link-hover-color: var(--color-primary);
$link-color: var(--color-primary);
$link-color-hover: var(--color-primary-shade-1);
$link-color-active: var(--color-primary-shade-1);
/* Border
-------------------------- */
@ -234,7 +109,7 @@ $font-size-extra-small: var(--font-size-2xs);
$font-weight-primary: var(--font-weight-regular);
/// fontLineHeight|1|Line Height|2
$font-line-height-primary: 24px;
$font-color-disabled-base: #bbb;
$font-color-disabled-base: var(--color-text-light);
/* z-index
-------------------------- */
@ -264,12 +139,12 @@ $checkbox-input-width: 14px;
/// borderRadius||Border|2
$checkbox-border-radius: var(--border-radius-small);
/// color||Color|0
$checkbox-background-color: $color-white;
$checkbox-background-color: var(--color-background-xlight);
$checkbox-input-border: var(--border-base);
/// color||Color|0
$checkbox-disabled-border-color: var(--border-color-base);
$checkbox-disabled-input-fill: #edf2fc;
$checkbox-disabled-input-fill: var(--color-background-base);
$checkbox-disabled-icon-color: var(--color-text-lighter);
$checkbox-disabled-checked-input-fill: var(--border-color-light);
@ -310,7 +185,7 @@ $checkbox-bordered-mini-height: 28px;
/// color||Color|0
$checkbox-button-checked-background-color: var(--color-primary);
/// color||Color|0
$checkbox-button-checked-font-color: $color-white;
$checkbox-button-checked-font-color: var(--color-text-xlight);
/// color||Color|0
$checkbox-button-checked-border-color: var(--color-primary);
@ -327,12 +202,12 @@ $radio-input-width: 14px;
/// borderRadius||Border|2
$radio-input-border-radius: $border-radius-circle;
/// color||Color|0
$radio-input-background-color: $color-white;
$radio-input-background-color: var(--color-background-xlight);
$radio-input-border: var(--border-base);
/// color||Color|0
$radio-input-border-color: var(--border-color-base);
/// color||Color|0
$radio-icon-color: $color-white;
$radio-icon-color: var(--color-text-xlight);
$radio-disabled-input-border-color: $disabled-border-base;
$radio-disabled-input-fill: $disabled-fill-base;
@ -347,7 +222,7 @@ $radio-checked-font-color: var(--color-primary);
/// color||Color|0
$radio-checked-input-border-color: var(--color-primary);
/// color||Color|0
$radio-checked-input-background-color: $color-white;
$radio-checked-input-background-color: var(--color-background-xlight);
/// color||Color|0
$radio-checked-icon-color: var(--color-primary);
@ -373,7 +248,7 @@ $radio-button-font-size: $font-size-base;
/// color||Color|0
$radio-button-checked-background-color: var(--color-primary);
/// color||Color|0
$radio-button-checked-font-color: $color-white;
$radio-button-checked-font-color: var(--color-background-xlight);
/// color||Color|0
$radio-button-checked-border-color: var(--color-primary);
$radio-button-disabled-checked-fill: var(--border-color-light);
@ -395,7 +270,7 @@ $select-input-font-size: 14px;
$select-option-color: var(--color-text-dark);
$select-option-disabled-color: var(--color-text-lighter);
$select-option-disabled-background: $color-white;
$select-option-disabled-background: var(--color-background-xlight);
/// height||Other|4
$select-option-height: 34px;
$select-option-hover-background: $background-color-base;
@ -468,7 +343,7 @@ $messagebox-danger-color: var(--color-danger);
-------------------------- */
$message-shadow: $box-shadow-base;
$message-min-width: 380px;
$message-background-color: #edf2fc;
$message-background-color: var(--color-background-base);
$message-padding: 16px 16px 16px 20px;
/// color||Color|0
$message-close-icon-color: var(--color-text-lighter);
@ -585,7 +460,7 @@ $cascader-menu-shadow: $box-shadow-light;
$cascader-node-background-hover: $background-color-base;
$cascader-node-color-disabled: var(--color-text-lighter);
$cascader-color-empty: var(--color-text-lighter);
$cascader-tag-background: #f0f2f5;
$cascader-tag-background: var(--color-background-base);
/* Group
-------------------------- */
@ -599,7 +474,7 @@ $group-title-width: 66px;
/* Tab
-------------------------- */
$tab-font-size: $font-size-base;
$tab-border-line: 1px solid #e4e4e4;
$tab-border-line: 1px solid var(--color-foreground-base);
$tab-header-color-active: var(--color-text-light);
$tab-header-color-hover: var(--color-text-dark);
$tab-header-color: var(--color-text-dark);
@ -612,14 +487,10 @@ $tab-vertical-header-count-fill: var(--color-text-light);
/* Button
-------------------------- */
$button-font-size: var(--button-font-size, var(--font-size-s));
$button-padding-vertical: var(--button-padding-vertical, var(--spacing-xs));
$button-padding-horizontal: var(--button-padding-horizontal, var(--spacing-m));
$button-border-radius: var(--button-border-radius, 4px);
$button-border-color: var(--button-border-color, var(--color-primary));
/// fontSize||Font|1
$button-medium-font-size: $font-size-base;
/// borderRadius||Border|2
@ -644,42 +515,91 @@ $button-mini-padding-vertical: 7px;
/// padding||Spacing|3
$button-mini-padding-horizontal: 15px;
$button-font-color: var(--button-color, var(--color-text-xlight));
$button-background-color: var(--button-background-color, var(--color-primary));
// All buttons colors (defaults to primary buttons style).
// Default
$button-font-color: var(--button-font-color, var(--color-button-primary-font));
$button-border-color: var(--button-border-color, var(--color-button-primary-border));
$button-background-color: var(--button-background-color, var(--color-button-primary-background));
$button-active-color: var(--button-active-color, var(--color-text-xlight));
$button-active-border-color: var(--button-active-border-color, var(--color-primary-shade-1));
$button-active-background-color: var(
--button-active-background-color,
var(--color-primary-shade-1)
// Hover
$button-hover-font-color: var(--button-hover-font-color, var(--color-button-primary-font));
$button-hover-border-color: var(
--button-hover-border-color,
var(--color-button-primary-hover-active-border)
);
$button-hover-background-color: var(
--button-hover-background-color,
var(--color-button-primary-hover-active-background)
);
$button-focus-outline-color: var(--button-focus-outline-color, var(--color-primary-tint-1));
// Active
$button-active-font-color: var(--button-active-font-color, var(--color-button-primary-font));
$button-active-border-color: var(
--button-active-border-color,
var(--color-button-primary-hover-active-border)
);
$button-active-background-color: var(
--button-active-background-color,
var(--color-button-primary-hover-active-background)
);
$button-hover-color: var(--button-hover-color, var(--color-text-xlight));
$button-hover-border-color: var(--button-hover-border-color, var(--color-primary-shade-1));
$button-hover-background-color: var(--button-hover-background-color, var(--color-primary-shade-1));
// Focus
$button-focus-font-color: var(--button-focus-font-color, var(--color-button-primary-font));
$button-focus-border-color: var(--button-focus-border-color, var(--color-button-primary-border));
$button-focus-background-color: var(
--button-focus-background-color,
var(--color-button-primary-background)
);
$button-focus-outline-color: var(
--button-focus-outline-color,
var(--color-button-primary-focus-outline)
);
// Disabled
$button-disabled-font-color: var(
--button-disabled-font-color,
var(--color-button-primary-disabled-font)
);
$button-disabled-border-color: var(
--button-disabled-border-color,
var(--color-button-primary-disabled-border)
);
$button-disabled-background-color: var(
--button-disabled-background-color,
var(--color-button-primary-disabled-background)
);
// Loading
$button-loading-font-color: var(--button-loading-font-color, var(--color-button-primary-font));
$button-loading-border-color: var(
--button-loading-border-color,
var(--color-button-primary-border)
);
$button-loading-background-color: var(
--button-loading-background-color,
var(--color-button-primary-background)
);
/// color||Color|0
$button-default-font-color: var(--color-text-dark);
$button-default-font-color: var(--color-text-dark); // ! Actually used by checkbox
/// color||Color|0
$button-default-background-color: $color-white;
$button-default-background-color: $color-white; // ! Actually used by checkbox
/// color||Color|0
$button-default-border-color: var(--border-color-base);
// $button-default-border-color: var(--border-color-base); // ! Never used
/// color||Color|0
$button-disabled-font-color: var(--button-disabled-color, var(--color-text-dark));
// $button-disabled-font-color: var(--button-disabled-color, var(--color-text-dark));
/// color||Color|0
$button-disabled-background-color: var(--button-disabled-background-color, var(--color-light-grey));
// $button-disabled-background-color: var(--button-disabled-background-color, var(--color-light-grey));
/// color||Color|0
$button-disabled-border-color: var(--button-disabled-border-color, var(--color-light-grey));
// $button-disabled-border-color: var(--button-disabled-border-color, var(--color-light-grey));
/// color||Color|0
$button-primary-border-color: var(--color-primary);
$button-primary-border-color: $button-border-color; // var(--color-primary);
/// color||Color|0
$button-primary-font-color: $color-white;
$button-primary-font-color: $button-font-color; // $color-white;
/// color||Color|0
$button-primary-background-color: var(--color-primary);
$button-primary-background-color: $button-background-color; // var(--color-primary);
/// color||Color|0
$button-success-border-color: var(--color-success);
/// color||Color|0
@ -716,7 +636,7 @@ $cascader-height: 200px;
/* Switch
-------------------------- */
/// color||Color|0
$switch-on-color: #13ce66;
$switch-on-color: var(--color-switch);
/// color||Color|0
$switch-off-color: var(--color-text-light);
/// fontSize||Font|1
@ -749,8 +669,9 @@ $table-font-color: var(--color-text-dark);
/// color||Color|0
$table-header-font-color: var(--color-text-light);
/// color||Color|0
$table-row-hover-background-color: $background-color-base;
$table-row-hover-background-color: var(--color-table-row-hover-background);
$table-current-row-background-color: $color-primary-light-9;
$table-row-striped-background-color: var(--color-table-row-even-background);
/// color||Color|0
$table-header-background-color: $color-white;
$table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
@ -780,7 +701,7 @@ $pagination-hover-color: var(--color-primary);
/* Popup
-------------------------- */
/// color||Color|0
$popup-modal-background-color: hsla(247, 14%, 30%, 0.75);
$popup-modal-background-color: var(--color-dialog-overlay-background);
/// opacity||Other|1
$popup-modal-opacity: 0.65;
@ -844,7 +765,7 @@ $tree-expand-icon-color: var(--color-text-lighter);
/* Dropdown
-------------------------- */
$dropdown-menu-box-shadow: $box-shadow-light;
$dropdown-menuItem-hover-fill: $color-primary-light-9;
$dropdown-menuItem-hover-fill: var(--color-background-xlight);
$dropdown-menuItem-hover-color: $link-color;
/* Badge
@ -934,7 +855,7 @@ $datepicker-off-font-color: var(--color-text-lighter);
$datepicker-header-font-color: var(--color-text-dark);
$datepicker-icon-color: var(--color-text-dark);
$datepicker-border-color: $disabled-border-base;
$datepicker-inner-border-color: #e4e4e4;
$datepicker-inner-border-color: var(--color-foreground-base);
/// color||Color|0
$datepicker-inrange-background-color: var(--border-color-light);
/// color||Color|0
@ -1074,7 +995,7 @@ $link-info-font-color: var(--color-info);
/// border||Other|4
$calendar-border: $table-border;
/// color||Other|4
$calendar-selected-background-color: #f2f8fe;
$calendar-selected-background-color: var(--color-background-base);
$calendar-cell-width: 85px;
/* Form
@ -1087,7 +1008,7 @@ $form-label-font-size: $font-size-base;
/// color||Color|0
$avatar-font-color: var(--color-text-xlight);
/// color||Color|0
$avatar-background-color: #c0c4cc;
$avatar-background-color: var(--color-foreground-dark);
/// fontSize||Font Size|1
$avatar-text-font-size: 14px;
/// fontSize||Font Size|1

1
packages/design-system/src/css/index.scss
View file

@ -1,3 +1,4 @@
@use './primitives.scss';
@use './tokens.scss';
@use './tokens.dark.scss' as dark;
@use './reset.scss';

2
packages/design-system/src/css/notification.scss
View file

@ -9,7 +9,7 @@
box-sizing: border-box;
border: 1px solid var.$notification-border-color;
position: fixed;
background-color: var.$color-white;
background-color: var(--color-notification-background);
box-shadow: var.$notification-shadow;
transition:
opacity 0.3s,

4
packages/design-system/src/css/radio-button.scss
View file

@ -12,11 +12,11 @@
line-height: 1;
white-space: nowrap;
vertical-align: middle;
background: var.$button-default-background-color;
background: var.$radio-input-background-color;
border: var(--border-base);
font-weight: var(--font-weight-bold);
border-left: 0;
color: var.$button-default-font-color;
color: var.$radio-font-color;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;

14
packages/design-system/src/css/skeleton.scss vendored
View file

@ -40,6 +40,7 @@
-ms-flex-pack: center;
justify-content: center;
border-radius: 8px !important;
color: var(--color-foreground-dark);
}
.el-skeleton__image svg {
@ -58,11 +59,16 @@
linear,
left top,
right top,
color-stop(25%, #f2f2f2),
color-stop(37%, #e6e6e6),
color-stop(63%, #f2f2f2)
color-stop(25%, var(--color-background-base)),
color-stop(37%, var(--color-background-medium)),
color-stop(63%, var(--color-background-base))
);
background: linear-gradient(
90deg,
var(--color-background-base) 25%,
var(--color-background-medium) 37%,
var(--color-background-base) 63%
);
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
background-size: 400% 100%;
-webkit-animation: el-skeleton-loading 1.4s ease infinite;
animation: el-skeleton-loading 1.4s ease infinite;

2
packages/design-system/src/css/table.scss
View file

@ -489,7 +489,7 @@
& .el-table__body {
& tr.el-table__row--striped {
td {
background: #fafafa;
background: var.$table-row-striped-background-color;
}
&.current-row td {

54
packages/design-system/src/css/tag.scss
View file

@ -2,9 +2,9 @@
@use './common/var';
@mixin genTheme() {
background-color: var.$color-primary-lighter;
border-color: var.$color-primary-light-5;
color: var.$color-primary-light-1;
border-color: var(--color-callout-info-border);
background-color: var(--color-callout-info-background);
color: var(--color-callout-info-font);
font-weight: var(--font-weight-regular);
@include mixins.when(hit) {
@ -20,14 +20,20 @@
}
&.el-tag--info {
background-color: var.$color-info-lighter;
border-color: var.$color-info-light-5;
color: var.$color-info-light-3;
border-color: var(--color-callout-info-border);
background-color: var(--color-callout-info-background);
color: var(--color-callout-info-font);
border-width: 1px;
border-style: solid;
@include mixins.when(hit) {
border-color: var.$tag-info-color;
}
.svg-inline--fa {
color: var(--color-callout-info-icon);
}
.el-tag__close {
color: var.$color-info-light-1;
&:hover {
@ -38,9 +44,15 @@
}
&.el-tag--success {
background-color: var(--color-success-tint-2);
border-color: var(--color-success-tint-1);
color: var(--color-success);
border-color: var(--color-callout-success-border);
background-color: var(--color-callout-success-background);
color: var(--color-callout-success-font);
border-width: 1px;
border-style: solid;
.svg-inline--fa {
color: var(--color-callout-success-icon);
}
@include mixins.when(hit) {
border-color: var.$tag-success-color;
@ -56,14 +68,20 @@
}
&.el-tag--warning {
background-color: var.$color-warning-lighter;
border-color: var.$color-warning-light-5;
color: var.$color-warning-light-3;
border-color: var(--color-callout-warning-border);
background-color: var(--color-callout-warning-background);
color: var(--color-callout-warning-font);
border-width: 1px;
border-style: solid;
@include mixins.when(hit) {
border-color: var.$tag-warning-color;
}
.svg-inline--fa {
color: var(--color-callout-warning-icon);
}
.el-tag__close {
color: var.$color-warning-light-1;
&:hover {
@ -74,14 +92,20 @@
}
&.el-tag--danger {
background-color: var.$color-danger-lighter;
border-color: var.$color-danger-light-5;
color: var.$color-danger-light-3;
border-color: var(--color-callout-danger-border);
background-color: var(--color-callout-danger-background);
color: var(--color-callout-danger-font);
border-width: 1px;
border-style: solid;
@include mixins.when(hit) {
border-color: var.$tag-danger-color;
}
.svg-inline--fa {
color: var(--color-callout-danger-icon);
}
.el-tag__close {
color: var.$color-danger-light-1;
&:hover {

2
packages/design-system/src/css/upload.scss
View file

@ -195,7 +195,7 @@
.el-upload-list__item-name:hover,
.el-upload-list__item-name:focus {
color: var.$link-hover-color;
color: var.$link-color-hover;
cursor: pointer;
}

20
packages/design-system/src/styleguide/ColorCircles.vue
View file

@ -3,7 +3,7 @@
<div v-for="color in colors" :key="color" :class="$style.container">
<div :class="$style.circle" :style="{ backgroundColor: `var(${color})` }"></div>
<span>{{ color }}</span>
<span :class="$style.hsl">{{ hsl[color] }}</span>
<span :class="$style.hsl">{{ getHSLValue(color) }}</span>
<span :class="$style.color">{{ getHexValue(color) }}</span>
</div>
</div>
@ -26,7 +26,22 @@ function hslToHex(h: number, s: number, l: number): string {
return `#${f(0)}${f(8)}${f(4)}`;
}
function resolveHSLCalc(hslString: string): string {
const calcRegex = /calc\(([^)]+)\)/;
const matchCalc = hslString.match(calcRegex);
if (!matchCalc) {
return hslString;
}
const expression = matchCalc[1];
const noPercentageExpression = expression.replace(/%/g, '');
const evaluation: number = eval(noPercentageExpression);
const finalPercentage = evaluation.toString() + '%';
const resolvedHslString = hslString.replace(calcRegex, finalPercentage);
return resolvedHslString;
}
function getHex(hsl: string): string {
hsl = resolveHSLCalc(hsl);
const colors = hsl
.replace('hsl(', '')
.replace(')', '')
@ -87,6 +102,9 @@ export default defineComponent({
getHexValue(color: string) {
return getHex(this.hsl[color]);
},
getHSLValue(color: string) {
return resolveHSLCalc(this.hsl[color]);
},
},
});
</script>

88
packages/design-system/src/styleguide/colors.stories.mdx
View file

@ -2,7 +2,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import ColorCircles from './ColorCircles.vue';
<Meta
title="Styleguide/Colors"
title="Styleguide/Colors Tokens"
parameters={{
design: {
type: 'figma',
@ -31,7 +31,7 @@ import ColorCircles from './ColorCircles.vue';
<Canvas>
<Story name="secondary">
{{
template: `<color-circles :colors="['--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-2', '--color-secondary-tint-3', '--color-secondary-tint-4']" />`,
template: `<color-circles :colors="['--color-secondary-shade-1', '--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-3']" />`,
components: {
ColorCircles,
},
@ -44,7 +44,7 @@ import ColorCircles from './ColorCircles.vue';
<Canvas>
<Story name="success">
{{
template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2', '--color-success-light']" />`,
template: `<color-circles :colors="['--color-success-shade-1', '--color-success', '--color-success-light', '--color-success-light-2', '--color-success-tint-1', '--color-success-tint-2']" />`,
components: {
ColorCircles,
},
@ -57,7 +57,7 @@ import ColorCircles from './ColorCircles.vue';
<Canvas>
<Story name="warning">
{{
template: `<color-circles :colors="['--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
template: `<color-circles :colors="['--color-warning-shade-1', '--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
components: {
ColorCircles,
},
@ -70,33 +70,7 @@ import ColorCircles from './ColorCircles.vue';
<Canvas>
<Story name="danger">
{{
template: `<color-circles :colors="['--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Info
<Canvas>
<Story name="info">
{{
template: `<color-circles :colors="['--color-info', '--color-info-tint-1', '--color-info-tint-2']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Neutral
<Canvas>
<Story name="neutral">
{{
template: `<color-circles :colors="['--color-neutral']" />`,
template: `<color-circles :colors="['--color-danger-shade-1', '--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
components: {
ColorCircles,
},
@ -109,7 +83,7 @@ import ColorCircles from './ColorCircles.vue';
<Canvas>
<Story name="text">
{{
template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight']" />`,
template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight', '--color-text-danger']" />`,
components: {
ColorCircles,
},
@ -135,55 +109,7 @@ import ColorCircles from './ColorCircles.vue';
<Canvas>
<Story name="background">
{{
template: `<color-circles :colors="['--color-background-dark', '--color-background-base', '--color-background-light', '--color-background-lighter', '--color-background-xlight']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Canvas
<Canvas>
<Story name="canvas">
{{
template: `<color-circles :colors="['--color-canvas-background', '--color-canvas-dot']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
<Canvas>
<Story name="avatar">
{{
template: `<color-circles :colors="['--color-avatar-accent-1', '--color-avatar-accent-2']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
<Canvas>
<Story name="json">
{{
template: `<color-circles :colors="['--color-json-default', '--color-json-null', '--color-json-boolean', '--color-json-number', '--color-json-string', '--color-json-key', '--color-json-brackets', '--color-json-brackets-hover', '--color-json-line', '--color-json-highlight']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Sticky
<Canvas>
<Story name="sticky">
{{
template: `<color-circles :colors="['--color-sticky-default-background', '--color-sticky-default-border']" />`,
template: `<color-circles :colors="['--color-background-dark', '--color-background-medium', '--color-background-base', '--color-background-light', '--color-background-xlight']" />`,
components: {
ColorCircles,
},

183
packages/design-system/src/styleguide/colorsprimitives.stories.mdx Normal file
View file

@ -0,0 +1,183 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import ColorCircles from './ColorCircles.vue';
<Meta
title="Styleguide/Colors Primitives"
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
},
}}
/>
# Colors Primitives
## Gray
<Canvas>
<Story name="gray">
{{
template: `<color-circles :colors="['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Primary
<Canvas>
<Story name="primary">
{{
template: `<color-circles :colors="['--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Secondary
<Canvas>
<Story name="secondary">
{{
template: `<color-circles :colors="['--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate A
<Canvas>
<Story name="alternate-a">
{{
template: `<color-circles :colors="['--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate B
<Canvas>
<Story name="alternate-b">
{{
template: `<color-circles :colors="['--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-400']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate C
<Canvas>
<Story name="alternate-c">
{{
template: `<color-circles :colors="['--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate D
<Canvas>
<Story name="alternate-d">
{{
template: `<color-circles :colors="['--prim-color-alt-d-shade-150', '--prim-color-alt-d']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate E
<Canvas>
<Story name="alternate-e">
{{
template: `<color-circles :colors="['--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate F
<Canvas>
<Story name="alternate-f">
{{
template: `<color-circles :colors="['--prim-color-alt-f', '--prim-color-alt-f-tint-150']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate G
<Canvas>
<Story name="alternate-g">
{{
template: `<color-circles :colors="['--prim-color-alt-g', '--prim-color-alt-g-tint-150']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate H
<Canvas>
<Story name="alternate-h">
{{
template: `<color-circles :colors="['--prim-color-alt-h']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate I
<Canvas>
<Story name="alternate-i">
{{
template: `<color-circles :colors="['--prim-color-alt-i']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>
## Alternate J
<Canvas>
<Story name="alternate-j">
{{
template: `<color-circles :colors="['--prim-color-alt-j']" />`,
components: {
ColorCircles,
},
}}
</Story>
</Canvas>

BIN
packages/editor-ui/public/google-auth/disabled.dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
packages/editor-ui/public/google-auth/focus.dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
packages/editor-ui/public/google-auth/normal.dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
packages/editor-ui/public/google-auth/pressed.dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

20
packages/editor-ui/public/n8n-beta-logo-dark-mode.svg Normal file
View file

@ -0,0 +1,20 @@
<svg width="201" height="40" viewBox="0 0 201 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1486_25932)">
<mask id="mask0_1486_25932" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="143" height="40">
<path d="M143 0H0V40H143V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_1486_25932)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.9736 8C78.9736 12.4183 75.3919 16 70.9736 16C67.246 16 64.1138 13.4505 63.2257 10H52.0564C50.101 10 48.4323 11.4137 48.1108 13.3424L47.782 15.3152C47.4698 17.1883 46.5223 18.8185 45.1824 20C46.5223 21.1815 47.4698 22.8117 47.782 24.6848L48.1108 26.6576C48.4323 28.5863 50.101 30 52.0564 30H55.2257C56.1138 26.5495 59.246 24 62.9736 24C67.3919 24 70.9736 27.5817 70.9736 32C70.9736 36.4183 67.3919 40 62.9736 40C59.246 40 56.1138 37.4505 55.2257 34H52.0564C48.1457 34 44.8082 31.1727 44.1653 27.3152L43.8364 25.3424C43.515 23.4137 41.8462 22 39.8909 22H36.628C35.6294 25.2801 32.5802 27.6667 28.9736 27.6667C25.367 27.6667 22.3179 25.2801 21.3193 22H16.628C15.6294 25.2801 12.5802 27.6667 8.97363 27.6667C4.55536 27.6667 0.973633 24.0849 0.973633 19.6667C0.973633 15.2484 4.55536 11.6667 8.97363 11.6667C12.8204 11.6667 16.033 14.3817 16.7998 18H21.1475C21.9143 14.3817 25.1269 11.6667 28.9736 11.6667C32.8204 11.6667 36.033 14.3817 36.7998 18H39.8909C41.8462 18 43.515 16.5863 43.8364 14.6576L44.1653 12.6848C44.8082 8.8273 48.1457 6 52.0564 6H63.2257C64.1138 2.54955 67.246 0 70.9736 0C75.3919 0 78.9736 3.58172 78.9736 8ZM74.9736 8C74.9736 10.2091 73.1828 12 70.9736 12C68.7645 12 66.9736 10.2091 66.9736 8C66.9736 5.79086 68.7645 4 70.9736 4C73.1828 4 74.9736 5.79086 74.9736 8ZM8.97363 23.6667C11.1828 23.6667 12.9736 21.8758 12.9736 19.6667C12.9736 17.4575 11.1828 15.6667 8.97363 15.6667C6.76449 15.6667 4.97363 17.4575 4.97363 19.6667C4.97363 21.8758 6.76449 23.6667 8.97363 23.6667ZM28.9736 23.6667C31.1828 23.6667 32.9736 21.8758 32.9736 19.6667C32.9736 17.4575 31.1828 15.6667 28.9736 15.6667C26.7645 15.6667 24.9736 17.4575 24.9736 19.6667C24.9736 21.8758 26.7645 23.6667 28.9736 23.6667ZM62.9736 36C65.1828 36 66.9736 34.2091 66.9736 32C66.9736 29.7909 65.1828 28 62.9736 28C60.7645 28 58.9736 29.7909 58.9736 32C58.9736 34.2091 60.7645 36 62.9736 36Z" fill="#EA4B71"/>
<path d="M86.9785 30.001H91.1554V21.1578C91.1554 18.2536 92.9175 16.981 94.908 16.981C96.8659 16.981 98.3996 18.2862 98.3996 20.962V30.001H102.576V20.1136C102.576 15.8389 100.096 13.3589 96.2133 13.3589C93.7659 13.3589 92.3954 14.3378 91.4164 15.6104H91.1554L90.7964 13.6852H86.9785V30.001Z" fill="white"/>
<path d="M118.563 19.0041V18.8083C119.999 18.0904 121.435 16.8504 121.435 14.4031C121.435 10.8789 118.53 8.75781 114.517 8.75781C110.405 8.75781 107.468 11.0094 107.468 14.4683C107.468 16.8178 108.839 18.0904 110.34 18.8083V19.0041C108.676 19.5915 106.685 21.3536 106.685 24.2904C106.685 27.8473 109.622 30.3273 114.484 30.3273C119.346 30.3273 122.185 27.8473 122.185 24.2904C122.185 21.3536 120.227 19.6241 118.563 19.0041ZM114.484 11.7599C116.116 11.7599 117.323 12.8041 117.323 14.5662C117.323 16.3283 116.083 17.3726 114.484 17.3726C112.885 17.3726 111.547 16.3283 111.547 14.5662C111.547 12.7715 112.82 11.7599 114.484 11.7599ZM114.484 27.1947C112.591 27.1947 111.058 25.9873 111.058 23.9315C111.058 22.0715 112.33 20.6683 114.451 20.6683C116.54 20.6683 117.813 22.0389 117.813 23.9968C117.813 25.9873 116.344 27.1947 114.484 27.1947Z" fill="white"/>
<path d="M126.428 30.001H130.605V21.1578C130.605 18.2536 132.367 16.981 134.358 16.981C136.316 16.981 137.849 18.2862 137.849 20.962V30.001H142.026V20.1136C142.026 15.8389 139.546 13.3589 135.663 13.3589C133.216 13.3589 131.845 14.3378 130.866 15.6104H130.605L130.246 13.6852H126.428V30.001Z" fill="white"/>
</g>
<path d="M198 12.5H157C155.343 12.5 154 13.8431 154 15.5V28.5C154 30.1569 155.343 31.5 157 31.5H198C199.657 31.5 201 30.1569 201 28.5V15.5C201 13.8431 199.657 12.5 198 12.5Z" fill="#EA4B71"/>
<path d="M164.496 21.334C165.196 21.586 166.134 22.272 166.134 23.784C166.134 25.506 164.944 26.5 162.97 26.5H158.966V16.7H162.998C164.93 16.7 165.854 17.708 165.854 19.15C165.854 20.326 165.21 20.914 164.496 21.25V21.334ZM160.772 18.184V20.718H162.718C163.558 20.718 164.006 20.214 164.006 19.444C164.006 18.66 163.502 18.184 162.746 18.184H160.772ZM162.802 25.016C163.754 25.016 164.244 24.442 164.244 23.644C164.244 22.818 163.712 22.202 162.802 22.202H160.772V25.016H162.802ZM170.963 24.89H175.863V26.5H169.157V16.7H175.723V18.31H170.963V20.746H175.065V22.314H170.963V24.89ZM185.606 16.7V18.352H182.834V26.5H180.986V18.352H178.214V16.7H185.606ZM193.795 26.5L192.997 24.134H189.329L188.531 26.5H186.557L190.057 16.7H192.283L195.769 26.5H193.795ZM189.833 22.608H192.493L191.219 18.828H191.107L189.833 22.608Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1486_25932">
<rect width="201" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB

11
packages/editor-ui/public/n8n-dev-logo-dark-mode.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="240" height="40" viewBox="0 0 240 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1486_25943" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="143" height="40">
<path d="M0 0H143V40H0V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_1486_25943)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.974 7.99999C78.9759 9.94852 78.2666 11.8308 76.9792 13.2934C75.6919 14.7561 73.9149 15.6987 71.9819 15.9442C70.0489 16.1896 68.0927 15.7212 66.4806 14.6268C64.8685 13.5323 63.7112 11.8871 63.226 9.99999H52.056C51.1093 10.0001 50.1933 10.336 49.471 10.9479C48.7486 11.5599 48.2667 12.4082 48.111 13.342L47.782 15.315C47.4809 17.1296 46.5625 18.7845 45.182 20C46.5625 21.2155 47.4809 22.8704 47.782 24.685L48.111 26.658C48.2667 27.5918 48.7486 28.4401 49.471 29.052C50.1933 29.664 51.1093 29.9999 52.056 30H55.226C55.7128 28.1147 56.8704 26.4716 58.482 25.3788C60.0936 24.286 62.0484 23.8184 63.98 24.0638C65.9116 24.3091 67.6875 25.2505 68.9746 26.7115C70.2618 28.1725 70.972 30.0528 70.972 32C70.972 33.9471 70.2618 35.8274 68.9746 37.2885C67.6875 38.7495 65.9116 39.6909 63.98 39.9362C62.0484 40.1816 60.0936 39.714 58.482 38.6212C56.8704 37.5284 55.7128 35.8853 55.226 34H52.056C50.1624 33.9997 48.3304 33.3278 46.8857 32.1037C45.4409 30.8796 44.4772 29.1828 44.166 27.315L43.836 25.342C43.6803 24.4082 43.1984 23.5599 42.476 22.9479C41.7537 22.336 40.8377 22.0001 39.891 22H36.628C36.1269 23.6394 35.1128 25.0747 33.7348 26.0945C32.3568 27.1142 30.6878 27.6646 28.9735 27.6646C27.2592 27.6646 25.5902 27.1142 24.2122 26.0945C22.8342 25.0747 21.82 23.6394 21.319 22H16.628C16.0603 23.8624 14.8329 25.4538 13.1758 26.476C11.5187 27.4982 9.54577 27.881 7.62666 27.5527C5.70756 27.2244 3.97405 26.2075 2.75102 24.6926C1.52799 23.1777 0.899395 21.2687 0.983038 19.3236C1.06668 17.3784 1.85682 15.5305 3.20538 14.1261C4.55394 12.7218 6.36834 11.8575 8.30854 11.6951C10.2487 11.5327 12.1816 12.0835 13.7448 13.2442C15.308 14.4049 16.3942 16.0958 16.8 18H21.148C21.5311 16.2087 22.5172 14.603 23.9415 13.4511C25.3658 12.2992 27.1422 11.6708 28.974 11.6708C30.8058 11.6708 32.5822 12.2992 34.0065 13.4511C35.4308 14.603 36.4169 16.2087 36.8 18H39.89C40.8369 18.0001 41.7531 17.6643 42.4756 17.0524C43.1982 16.4404 43.6802 15.592 43.836 14.658L44.166 12.685C44.4772 10.8174 45.4408 9.12065 46.8853 7.8966C48.3298 6.67255 50.1616 6.00051 52.055 5.99999H63.225C63.7102 4.11284 64.8675 2.46765 66.4796 1.37321C68.0917 0.278773 70.0479 -0.189661 71.9809 0.0558311C73.9139 0.301323 75.6909 1.24386 76.9782 2.70654C78.2656 4.16921 78.9759 6.05146 78.974 7.99999ZM74.974 7.99999C74.974 9.06086 74.5526 10.0783 73.8024 10.8284C73.0523 11.5786 72.0349 12 70.974 12C69.9131 12 68.8957 11.5786 68.1456 10.8284C67.3954 10.0783 66.974 9.06086 66.974 7.99999C66.974 6.93913 67.3954 5.92171 68.1456 5.17156C68.8957 4.42142 69.9131 3.99999 70.974 3.99999C72.0349 3.99999 73.0523 4.42142 73.8024 5.17156C74.5526 5.92171 74.974 6.93913 74.974 7.99999ZM8.97399 23.667C10.0349 23.667 11.0523 23.2456 11.8024 22.4954C12.5526 21.7453 12.974 20.7279 12.974 19.667C12.974 18.6061 12.5526 17.5887 11.8024 16.8386C11.0523 16.0884 10.0349 15.667 8.97399 15.667C7.91312 15.667 6.89571 16.0884 6.14556 16.8386C5.39542 17.5887 4.97399 18.6061 4.97399 19.667C4.97399 20.7279 5.39542 21.7453 6.14556 22.4954C6.89571 23.2456 7.91312 23.667 8.97399 23.667ZM28.974 23.667C30.0349 23.667 31.0523 23.2456 31.8024 22.4954C32.5526 21.7453 32.974 20.7279 32.974 19.667C32.974 18.6061 32.5526 17.5887 31.8024 16.8386C31.0523 16.0884 30.0349 15.667 28.974 15.667C27.9131 15.667 26.8957 16.0884 26.1456 16.8386C25.3954 17.5887 24.974 18.6061 24.974 19.667C24.974 20.7279 25.3954 21.7453 26.1456 22.4954C26.8957 23.2456 27.9131 23.667 28.974 23.667ZM62.974 36C64.0349 36 65.0523 35.5786 65.8024 34.8284C66.5526 34.0783 66.974 33.0609 66.974 32C66.974 30.9391 66.5526 29.9217 65.8024 29.1716C65.0523 28.4214 64.0349 28 62.974 28C61.9131 28 60.8957 28.4214 60.1456 29.1716C59.3954 29.9217 58.974 30.9391 58.974 32C58.974 33.0609 59.3954 34.0783 60.1456 34.8284C60.8957 35.5786 61.9131 36 62.974 36Z" fill="#838383"/>
<path d="M86.978 30.0009H91.155V21.1579C91.155 18.2539 92.917 16.9809 94.908 16.9809C96.866 16.9809 98.4 18.2859 98.4 20.9619V30.0009H102.576V20.1139C102.576 15.8389 100.096 13.3589 96.213 13.3589C93.766 13.3589 92.395 14.3379 91.416 15.6099H91.156L90.796 13.6849H86.98L86.978 30.0009ZM118.563 19.0039V18.8079C119.999 18.0899 121.435 16.8499 121.435 14.4029C121.435 10.8789 118.53 8.75793 114.517 8.75793C110.405 8.75793 107.468 11.0089 107.468 14.4679C107.468 16.8179 108.839 18.0899 110.34 18.8079V19.0039C109.257 19.396 108.323 20.1157 107.668 21.0631C107.013 22.0104 106.669 23.1383 106.685 24.2899C106.685 27.8469 109.622 30.3269 114.484 30.3269C119.346 30.3269 122.185 27.8469 122.185 24.2899C122.185 21.3539 120.227 19.6239 118.563 19.0039ZM114.484 11.7599C116.116 11.7599 117.323 12.8039 117.323 14.5659C117.323 16.3279 116.083 17.3729 114.484 17.3729C112.885 17.3729 111.547 16.3279 111.547 14.5659C111.547 12.7719 112.82 11.7599 114.484 11.7599ZM114.484 27.1949C112.591 27.1949 111.058 25.9869 111.058 23.9319C111.058 22.0719 112.33 20.6679 114.451 20.6679C116.54 20.6679 117.813 22.0379 117.813 23.9969C117.813 25.9869 116.344 27.1949 114.484 27.1949ZM126.428 30.0009H130.605V21.1579C130.605 18.2539 132.367 16.9809 134.358 16.9809C136.316 16.9809 137.849 18.2859 137.849 20.9619V30.0009H142.026V20.1139C142.026 15.8389 139.546 13.3589 135.663 13.3589C133.216 13.3589 131.845 14.3379 130.866 15.6099H130.605L130.246 13.6849H126.428V30.0009Z" fill="white"/>
</g>
<path d="M221.216 6.65698H159.716C157.231 6.65698 155.216 8.6717 155.216 11.157V30.657C155.216 33.1423 157.231 35.157 159.716 35.157H221.216C223.701 35.157 225.716 33.1423 225.716 30.657V11.157C225.716 8.6717 223.701 6.65698 221.216 6.65698Z" fill="#858585"/>
<path d="M183.47 20.765C183.47 22.4964 183.241 23.924 182.782 25.048C182.331 26.172 181.715 27.05 180.935 27.682C180.156 28.3054 179.27 28.7444 178.277 28.999C177.292 29.253 176.271 29.38 175.212 29.38H170.609V12.322H174.917C176.008 12.322 177.063 12.437 178.08 12.667C179.106 12.8884 180.021 13.3027 180.825 13.91C181.637 14.5087 182.281 15.362 182.757 16.47C183.233 17.5694 183.47 19.001 183.47 20.765ZM179.286 20.765C179.286 19.2304 179.118 18.0694 178.782 17.282C178.453 16.494 178.002 15.9607 177.428 15.682C176.861 15.3954 176.221 15.252 175.508 15.252H174.646V26.463H175.508C176.255 26.463 176.911 26.303 177.477 25.983C178.044 25.655 178.487 25.0767 178.807 24.248C179.127 23.4194 179.287 22.2584 179.287 20.765H179.286ZM190.425 15.202V19.3H196.332V22.131H190.425V26.488H197.551V29.38H186.388V12.322H197.538L197.132 15.202H190.425ZM206.326 26.23L209.539 12.322H213.674L208.75 29.38H203.753L198.854 12.322H203.138L206.326 26.23Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

13
packages/editor-ui/public/n8n-logo-expanded-dark-mode.svg Normal file
View file

@ -0,0 +1,13 @@
<svg width="58" height="16" viewBox="0 0 58 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1486_25927)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2 6.4C25.7089 6.4 24.4561 5.38018 24.1008 4H20.4331C19.651 4 18.9835 4.56546 18.8549 5.33696L18.7234 6.12608C18.5985 6.87531 18.2195 7.52738 17.6835 8C18.2195 8.47262 18.5985 9.12469 18.7234 9.87392L18.8549 10.663C18.9835 11.4345 19.651 12 20.4331 12H20.9008C21.2561 10.6198 22.5089 9.6 24 9.6C25.7673 9.6 27.2 11.0327 27.2 12.8C27.2 14.5673 25.7673 16 24 16C22.5089 16 21.256 14.9802 20.9008 13.6H20.4331C18.8688 13.6 17.5338 12.4691 17.2766 10.9261L17.1451 10.137C17.0165 9.36546 16.349 8.8 15.5669 8.8H14.2992C13.944 10.1802 12.6911 11.2 11.2 11.2C9.70893 11.2 8.45605 10.1802 8.10081 8.8H6.29919C5.94395 10.1802 4.69107 11.2 3.2 11.2C1.43269 11.2 0 9.76731 0 8C0 6.23269 1.43269 4.8 3.2 4.8C4.69107 4.8 5.94395 5.81982 6.29919 7.2H8.10081C8.45605 5.81982 9.70893 4.8 11.2 4.8C12.6911 4.8 13.944 5.81982 14.2992 7.2H15.5669C16.349 7.2 17.0165 6.63454 17.1451 5.86304L17.2766 5.07392C17.5338 3.53092 18.8688 2.4 20.4331 2.4H24.1008C24.456 1.01982 25.7089 0 27.2 0C28.9673 0 30.4 1.43269 30.4 3.2C30.4 4.96731 28.9673 6.4 27.2 6.4ZM27.2 4.8C28.0837 4.8 28.8 4.08366 28.8 3.2C28.8 2.31634 28.0837 1.6 27.2 1.6C26.3163 1.6 25.6 2.31634 25.6 3.2C25.6 4.08366 26.3163 4.8 27.2 4.8ZM3.2 9.6C4.08366 9.6 4.8 8.88366 4.8 8C4.8 7.11634 4.08366 6.4 3.2 6.4C2.31634 6.4 1.6 7.11634 1.6 8C1.6 8.88366 2.31634 9.6 3.2 9.6ZM12.8 8C12.8 8.88366 12.0837 9.6 11.2 9.6C10.3163 9.6 9.6 8.88366 9.6 8C9.6 7.11634 10.3163 6.4 11.2 6.4C12.0837 6.4 12.8 7.11634 12.8 8ZM25.6 12.8C25.6 13.6837 24.8837 14.4 24 14.4C23.1163 14.4 22.4 13.6837 22.4 12.8C22.4 11.9163 23.1163 11.2 24 11.2C24.8837 11.2 25.6 11.9163 25.6 12.8Z" fill="#EA4B71"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.0015 6.9183V6.84205C48.5598 6.56248 49.118 6.07957 49.118 5.12647C49.118 3.754 47.9888 2.92798 46.4282 2.92798C44.8296 2.92798 43.6877 3.80484 43.6877 5.15189C43.6877 6.06686 44.2206 6.56248 44.8042 6.84205V6.9183C44.1571 7.14705 43.3832 7.83328 43.3832 8.977C43.3832 10.3622 44.5251 11.328 46.4155 11.328C48.306 11.328 49.4098 10.3622 49.4098 8.977C49.4098 7.83328 48.6486 7.15975 48.0015 6.9183ZM46.4155 4.09712C47.0499 4.09712 47.5194 4.50378 47.5194 5.19001C47.5194 5.87624 47.0372 6.2829 46.4155 6.2829C45.7938 6.2829 45.2737 5.87624 45.2737 5.19001C45.2737 4.49107 45.7685 4.09712 46.4155 4.09712ZM46.4155 10.108C45.6797 10.108 45.0833 9.63782 45.0833 8.83721C45.0833 8.11285 45.5782 7.56641 46.4029 7.56641C47.2149 7.56641 47.7097 8.10015 47.7097 8.86263C47.7097 9.63782 47.1387 10.108 46.4155 10.108Z" fill="white"/>
<path d="M51.3672 11.2009H52.9912V7.75707C52.9912 6.62606 53.6763 6.13044 54.4503 6.13044C55.2116 6.13044 55.8079 6.63876 55.8079 7.68082V11.2009H57.4319V7.35041C57.4319 5.68566 56.4676 4.71985 54.9578 4.71985C54.0062 4.71985 53.4733 5.10109 53.0927 5.59671H52.9912L52.8516 4.84693H51.3672V11.2009Z" fill="white"/>
<path d="M36.9912 11.2009H35.3672V4.84693H36.8516L36.9912 5.59671H37.0927C37.4733 5.10109 38.0062 4.71985 38.9578 4.71985C40.4676 4.71985 41.4319 5.68566 41.4319 7.35041V11.2009H39.8079V7.68082C39.8079 6.63876 39.2116 6.13044 38.4503 6.13044C37.6763 6.13044 36.9912 6.62606 36.9912 7.75707V11.2009Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1486_25927">
<rect width="58" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

11
packages/editor-ui/public/n8n-nightly-logo-dark-mode.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="230" height="40" viewBox="0 0 230 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1486_25952" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="143" height="40">
<path d="M0 0H143V40H0V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_1486_25952)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.974 7.99999C78.9759 9.94852 78.2666 11.8308 76.9792 13.2934C75.6919 14.7561 73.9149 15.6987 71.9819 15.9442C70.0489 16.1896 68.0927 15.7212 66.4806 14.6268C64.8685 13.5323 63.7112 11.8871 63.226 9.99999H52.056C51.1093 10.0001 50.1933 10.336 49.471 10.9479C48.7486 11.5599 48.2667 12.4082 48.111 13.342L47.782 15.315C47.4809 17.1296 46.5625 18.7845 45.182 20C46.5625 21.2155 47.4809 22.8704 47.782 24.685L48.111 26.658C48.2667 27.5918 48.7486 28.4401 49.471 29.052C50.1933 29.664 51.1093 29.9999 52.056 30H55.226C55.7128 28.1147 56.8704 26.4716 58.482 25.3788C60.0936 24.286 62.0484 23.8184 63.98 24.0638C65.9116 24.3091 67.6875 25.2505 68.9746 26.7115C70.2618 28.1725 70.972 30.0528 70.972 32C70.972 33.9471 70.2618 35.8274 68.9746 37.2885C67.6875 38.7495 65.9116 39.6909 63.98 39.9362C62.0484 40.1816 60.0936 39.714 58.482 38.6212C56.8704 37.5284 55.7128 35.8853 55.226 34H52.056C50.1624 33.9997 48.3304 33.3278 46.8857 32.1037C45.4409 30.8796 44.4772 29.1828 44.166 27.315L43.836 25.342C43.6803 24.4082 43.1984 23.5599 42.476 22.9479C41.7537 22.336 40.8377 22.0001 39.891 22H36.628C36.1269 23.6394 35.1128 25.0747 33.7348 26.0945C32.3568 27.1142 30.6878 27.6646 28.9735 27.6646C27.2592 27.6646 25.5902 27.1142 24.2122 26.0945C22.8342 25.0747 21.82 23.6394 21.319 22H16.628C16.0603 23.8624 14.8329 25.4538 13.1758 26.476C11.5187 27.4982 9.54577 27.881 7.62666 27.5527C5.70756 27.2244 3.97405 26.2075 2.75102 24.6926C1.52799 23.1777 0.899395 21.2687 0.983038 19.3236C1.06668 17.3784 1.85682 15.5305 3.20538 14.1261C4.55394 12.7218 6.36834 11.8575 8.30854 11.6951C10.2487 11.5327 12.1816 12.0835 13.7448 13.2442C15.308 14.4049 16.3942 16.0958 16.8 18H21.148C21.5311 16.2087 22.5172 14.603 23.9415 13.4511C25.3658 12.2992 27.1422 11.6708 28.974 11.6708C30.8058 11.6708 32.5822 12.2992 34.0065 13.4511C35.4308 14.603 36.4169 16.2087 36.8 18H39.89C40.8369 18.0001 41.7531 17.6643 42.4756 17.0524C43.1982 16.4404 43.6802 15.592 43.836 14.658L44.166 12.685C44.4772 10.8174 45.4408 9.12065 46.8853 7.8966C48.3298 6.67255 50.1616 6.00051 52.055 5.99999H63.225C63.7102 4.11284 64.8675 2.46765 66.4796 1.37321C68.0917 0.278773 70.0479 -0.189661 71.9809 0.0558311C73.9139 0.301323 75.6909 1.24386 76.9782 2.70654C78.2656 4.16921 78.9759 6.05146 78.974 7.99999ZM74.974 7.99999C74.974 9.06086 74.5526 10.0783 73.8024 10.8284C73.0523 11.5786 72.0349 12 70.974 12C69.9131 12 68.8957 11.5786 68.1456 10.8284C67.3954 10.0783 66.974 9.06086 66.974 7.99999C66.974 6.93913 67.3954 5.92171 68.1456 5.17156C68.8957 4.42142 69.9131 3.99999 70.974 3.99999C72.0349 3.99999 73.0523 4.42142 73.8024 5.17156C74.5526 5.92171 74.974 6.93913 74.974 7.99999ZM8.97399 23.667C10.0349 23.667 11.0523 23.2456 11.8024 22.4954C12.5526 21.7453 12.974 20.7279 12.974 19.667C12.974 18.6061 12.5526 17.5887 11.8024 16.8386C11.0523 16.0884 10.0349 15.667 8.97399 15.667C7.91312 15.667 6.89571 16.0884 6.14556 16.8386C5.39542 17.5887 4.97399 18.6061 4.97399 19.667C4.97399 20.7279 5.39542 21.7453 6.14556 22.4954C6.89571 23.2456 7.91312 23.667 8.97399 23.667ZM28.974 23.667C30.0349 23.667 31.0523 23.2456 31.8024 22.4954C32.5526 21.7453 32.974 20.7279 32.974 19.667C32.974 18.6061 32.5526 17.5887 31.8024 16.8386C31.0523 16.0884 30.0349 15.667 28.974 15.667C27.9131 15.667 26.8957 16.0884 26.1456 16.8386C25.3954 17.5887 24.974 18.6061 24.974 19.667C24.974 20.7279 25.3954 21.7453 26.1456 22.4954C26.8957 23.2456 27.9131 23.667 28.974 23.667ZM62.974 36C64.0349 36 65.0523 35.5786 65.8024 34.8284C66.5526 34.0783 66.974 33.0609 66.974 32C66.974 30.9391 66.5526 29.9217 65.8024 29.1716C65.0523 28.4214 64.0349 28 62.974 28C61.9131 28 60.8957 28.4214 60.1456 29.1716C59.3954 29.9217 58.974 30.9391 58.974 32C58.974 33.0609 59.3954 34.0783 60.1456 34.8284C60.8957 35.5786 61.9131 36 62.974 36Z" fill="#EA4B71"/>
<path d="M86.978 30.0009H91.155V21.1579C91.155 18.2539 92.917 16.9809 94.908 16.9809C96.866 16.9809 98.4 18.2859 98.4 20.9619V30.0009H102.576V20.1139C102.576 15.8389 100.096 13.3589 96.213 13.3589C93.766 13.3589 92.395 14.3379 91.416 15.6099H91.156L90.796 13.6849H86.98L86.978 30.0009ZM118.563 19.0039V18.8079C119.999 18.0899 121.435 16.8499 121.435 14.4029C121.435 10.8789 118.53 8.75793 114.517 8.75793C110.405 8.75793 107.468 11.0089 107.468 14.4679C107.468 16.8179 108.839 18.0899 110.34 18.8079V19.0039C109.257 19.396 108.323 20.1157 107.668 21.0631C107.013 22.0104 106.669 23.1383 106.685 24.2899C106.685 27.8469 109.622 30.3269 114.484 30.3269C119.346 30.3269 122.185 27.8469 122.185 24.2899C122.185 21.3539 120.227 19.6239 118.563 19.0039ZM114.484 11.7599C116.116 11.7599 117.323 12.8039 117.323 14.5659C117.323 16.3279 116.083 17.3729 114.484 17.3729C112.885 17.3729 111.547 16.3279 111.547 14.5659C111.547 12.7719 112.82 11.7599 114.484 11.7599ZM114.484 27.1949C112.591 27.1949 111.058 25.9869 111.058 23.9319C111.058 22.0719 112.33 20.6679 114.451 20.6679C116.54 20.6679 117.813 22.0379 117.813 23.9969C117.813 25.9869 116.344 27.1949 114.484 27.1949ZM126.428 30.0009H130.605V21.1579C130.605 18.2539 132.367 16.9809 134.358 16.9809C136.316 16.9809 137.849 18.2859 137.849 20.9619V30.0009H142.026V20.1139C142.026 15.8389 139.546 13.3589 135.663 13.3589C133.216 13.3589 131.845 14.3379 130.866 15.6099H130.605L130.246 13.6849H126.428V30.0009Z" fill="white"/>
</g>
<path d="M214.852 12.5H158.149C155.858 12.5 154 14.3576 154 16.649V27.351C154 29.6424 155.858 31.5 158.149 31.5H214.852C217.143 31.5 219.001 29.6424 219.001 27.351V16.649C219.001 14.3576 217.143 12.5 214.852 12.5Z" fill="#EA4B71"/>
<path d="M162.985 26.3119L160.489 18.6879C160.53 18.9573 160.577 19.3039 160.632 19.7279C160.687 20.1473 160.732 20.6143 160.769 21.1289C160.81 21.6443 160.831 22.1799 160.831 22.7359V26.3119H158.923V16.8349H161.72L164.14 24.4179C164.067 23.9846 163.991 23.4309 163.914 22.7569C163.837 22.0823 163.798 21.3186 163.798 20.4659V16.8359H165.706V26.3119H162.985ZM173.596 16.8349V18.4759H171.641V24.6639H173.596V26.3119H167.443V24.6639H169.398V18.4759H167.443V16.8359L173.596 16.8349ZM179.073 26.5449C177.728 26.5449 176.7 26.1209 175.989 25.2729C175.282 24.4203 174.929 23.1803 174.929 21.5529C174.929 20.4776 175.125 19.5729 175.518 18.8389C175.91 18.1003 176.439 17.5419 177.104 17.1639C177.769 16.7853 178.512 16.5959 179.333 16.5959C180.026 16.5959 180.61 16.7029 181.083 16.9169C181.557 17.1316 181.979 17.4143 182.348 17.7649L181.172 18.9819C180.885 18.7266 180.61 18.5376 180.345 18.4149C180.08 18.2916 179.779 18.2299 179.442 18.2299C179.018 18.2299 178.64 18.3439 178.307 18.5719C177.979 18.7953 177.719 19.1533 177.527 19.6459C177.336 20.1333 177.241 20.7733 177.241 21.5659C177.241 22.3913 177.307 23.0479 177.439 23.5359C177.576 24.0239 177.781 24.3749 178.054 24.5889C178.327 24.7983 178.674 24.9029 179.094 24.9029C179.317 24.9029 179.527 24.8779 179.723 24.8279C179.919 24.7733 180.101 24.7026 180.27 24.6159V22.4499H179.08L178.861 20.8769H182.389V25.5879C181.916 25.8799 181.405 26.1126 180.858 26.2859C180.315 26.4593 179.72 26.5449 179.073 26.5449ZM188.078 26.3119V22.3189H185.781V26.3119H183.538V16.8349H185.781V20.4729H188.078V16.8349H190.321V26.3119H188.078ZM196.242 18.5519V26.3119H193.999V18.5519H191.339V16.8349H199.011L198.779 18.5519H196.242ZM200.508 26.3119V16.8349H202.751V24.5409H206.861L206.628 26.3119H200.508ZM212.665 22.7569V26.3119H210.423V22.7699L207.333 16.8349H209.787L211.585 20.9169L213.397 16.8349H215.756L212.665 22.7569Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

10
packages/editor-ui/src/App.vue
View file

@ -35,13 +35,12 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useStorage } from '@vueuse/core';
import BannerStack from '@/components/banners/BannerStack.vue';
import Modals from '@/components/Modals.vue';
import LoadingView from '@/views/LoadingView.vue';
import Telemetry from '@/components/Telemetry.vue';
import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from '@/constants';
import { HIRING_BANNER, VIEWS } from '@/constants';
import { userHelpers } from '@/mixins/userHelpers';
import { loadLanguage } from '@/plugins/i18n';
@ -212,12 +211,6 @@ export default defineComponent({
}
return;
},
setTheme() {
const theme = useStorage(LOCAL_STORAGE_THEME, undefined).value;
if (theme) {
window.document.body.classList.add(`theme-${theme}`);
}
},
async postAuthenticate() {
if (this.postAuthenticateDone) {
return;
@ -235,7 +228,6 @@ export default defineComponent({
},
},
async created() {
this.setTheme();
await this.initialize();
this.logHiringBanner();
await this.authenticate();

4
packages/editor-ui/src/Interface.ts
View file

@ -1121,6 +1121,7 @@ export interface UIState {
executionSidebarAutoRefresh: boolean;
bannersHeight: number;
bannerStack: BannerName[];
theme: ThemeOption;
}
export type IFakeDoor = {
@ -1677,3 +1678,6 @@ export type ToggleNodeCreatorOptions = {
source?: NodeCreatorOpenSource;
nodeCreatorView?: string;
};
export type AppliedThemeOption = 'light' | 'dark';
export type ThemeOption = AppliedThemeOption | 'system';

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

@ -112,7 +112,7 @@ export default defineComponent({
.dangerMessage {
composes: message;
color: var(--color-danger);
color: var(--color-callout-danger-font);
}
.banner {

2
packages/editor-ui/src/components/CodeNodeEditor/theme.ts
View file

@ -61,6 +61,7 @@ export const codeNodeEditorTheme = ({
},
'&.cm-editor': {
...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
borderColor: 'var(--border-color-base)',
},
'&.cm-editor.cm-focused': {
outline: 'none',
@ -78,6 +79,7 @@ export const codeNodeEditorTheme = ({
: 'var(--color-code-gutterBackground)',
color: 'var(--color-code-gutterForeground)',
borderRadius: 'var(--border-radius-base)',
borderRightColor: 'var(--border-color-base)',
},
'.cm-tooltip': {
maxWidth: BASE_STYLING.tooltip.maxWidth,

20
packages/editor-ui/src/components/CollectionParameter.vue
View file

@ -208,7 +208,27 @@ export default defineComponent({
margin-top: var(--spacing-xs);
.button {
font-weight: var(--font-weight-normal);
--button-border-color: var(--color-foreground-base);
--button-background-color: var(--color-background-base);
--button-hover-font-color: var(--color-button-secondary-font);
--button-hover-border-color: var(--color-foreground-base);
--button-hover-background-color: var(--color-background-base);
--button-active-font-color: var(--color-button-secondary-font);
--button-active-border-color: var(--color-foreground-base);
--button-active-background-color: var(--color-background-base);
--button-focus-font-color: var(--color-button-secondary-font);
--button-focus-border-color: var(--color-foreground-base);
--button-focus-background-color: var(--color-background-base);
&:active,
&.active,
&:focus {
outline: none;
}
}
}

7
packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
View file

@ -53,7 +53,12 @@
<template #content>
<div :class="$style.container" data-test-id="credential-edit-dialog">
<div :class="$style.sidebar">
<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
<n8n-menu
mode="tabs"
:items="sidebarItems"
:transparentBackground="true"
@select="onTabSelect"
></n8n-menu>
</div>
<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
<CredentialConfig

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

@ -7,14 +7,16 @@
</template>
<script lang="ts" setup>
import { useUIStore } from '@/stores';
import { useRootStore } from '@/stores/n8nRoot.store';
const { baseUrl } = useRootStore();
const type = useUIStore().appliedTheme === 'dark' ? '.dark.png' : '.png';
const googleAuthButtons = {
'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal.png`,
'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus.png`,
'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed.png`,
'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled.png`,
'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal${type}`,
'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus${type}`,
'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed${type}`,
'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled${type}`,
};
</script>

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

@ -271,7 +271,7 @@ export default defineComponent({
}
.error-message {
color: #ff0000;
color: var(--color-ndv-ouptut-error-font);
font-weight: bold;
font-size: 1.1rem;
}

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

@ -1074,7 +1074,7 @@ export default defineComponent({
top: calc(var(--spacing-3xl) * -1);
z-index: 2;
padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
background: var(--color-background-base);
background: var(--color-table-header-background);
&:first-child {
padding-left: var(--spacing-s);
@ -1085,7 +1085,7 @@ export default defineComponent({
td {
height: 100%;
padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
background: var(--color-background-xlight);
background: var(--color-table-row-background);
&:not(:first-child, :nth-last-child(-n + 3)) {
width: 100%;
@ -1127,33 +1127,33 @@ export default defineComponent({
}
&:nth-child(even) td {
background: var(--color-background-light);
background: var(--color-table-row-even-background);
}
&:hover td {
background: var(--color-primary-tint-3);
background: var(--color-table-row-hover-background);
}
&.crashed td:first-child::before,
&.failed td:first-child::before {
background: hsl(var(--color-danger-h), 94%, 80%);
background: var(--execution-card-border-error);
}
&.success td:first-child::before {
background: hsl(var(--color-success-h), 60%, 70%);
background: var(--execution-card-border-success);
}
&.new td:first-child::before,
&.running td:first-child::before {
background: hsl(var(--color-warning-h), 94%, 80%);
background: var(--execution-card-border-running);
}
&.waiting td:first-child::before {
background: hsl(var(--color-secondary-h), 94%, 80%);
background: var(--execution-card-border-waiting);
}
&.unknown td:first-child::before {
background: var(--color-text-light);
background: var(--execution-card-border-unknown);
}
}
}
@ -1167,6 +1167,7 @@ export default defineComponent({
.loadedAll {
text-align: center;
font-size: var(--font-size-s);
color: var(--color-text-light);
margin: var(--spacing-l) 0;
}

11
packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
View file

@ -170,7 +170,7 @@ export default defineComponent({
}
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-warning-h), 94%, 80%);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-running);
}
.statusLabel,
.spinner {
@ -181,15 +181,14 @@ export default defineComponent({
&.success {
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-success-h), 60%, 70%);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-success);
}
}
&.waiting {
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base)
hsl(var(--color-secondary-h), 94%, 80%);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-waiting);
}
.statusLabel {
color: var(--color-secondary);
@ -199,7 +198,7 @@ export default defineComponent({
&.error {
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-danger-h), 94%, 80%);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-error);
}
.statusLabel {
color: var(--color-danger);
@ -209,7 +208,7 @@ export default defineComponent({
&.unknown {
&,
& .executionLink {
border-left: var(--spacing-4xs) var(--border-style-base) var(--color-text-light);
border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-unknown);
}
}
}

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

@ -296,19 +296,7 @@ export default defineComponent({
}
.debugLink {
padding: 0;
height: 42px;
margin-right: var(--spacing-xs);
&.secondary {
a span {
color: var(--color-primary-shade-1);
}
}
a span {
display: block;
padding: var(--spacing-xs) var(--spacing-m);
color: var(--color-text-xlight);
}
}
</style>

1
packages/editor-ui/src/components/ExpressionEditorModal/theme.ts
View file

@ -18,6 +18,7 @@ const commonThemeProps = {
height: '220px',
padding: 'var(--spacing-xs)',
color: 'var(--input-font-color, var(--color-text-dark))',
caretColor: 'var(--color-code-caret)',
},
'.cm-line': {
padding: '0',

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

@ -164,6 +164,10 @@ export default defineComponent({
.expression-parameter-input {
position: relative;
:global(.cm-editor) {
background-color: var(--color-code-background);
}
.all-sections {
height: 30px;
display: flex;
@ -188,7 +192,7 @@ export default defineComponent({
position: absolute;
right: 0;
bottom: 0;
background-color: white;
background-color: var(--color-code-background);
padding: 3px;
line-height: 9px;
border: var(--border-base);
@ -219,6 +223,6 @@ export default defineComponent({
.focused > .expression-editor-modal-opener {
border-color: var(--color-secondary);
border-bottom-right-radius: 0;
background-color: white;
background-color: var(--color-code-background);
}
</style>

22
packages/editor-ui/src/components/FixedCollectionParameter.vue
View file

@ -347,8 +347,28 @@ export default defineComponent({
padding-left: var(--spacing-s);
:deep(.button) {
--button-background-color: var(--color-background-base);
font-weight: var(--font-weight-normal);
--button-font-color: var(--color-text-dark);
--button-border-color: var(--color-foreground-base);
--button-background-color: var(--color-background-base);
--button-hover-font-color: var(--color-text-dark);
--button-hover-border-color: var(--color-foreground-base);
--button-hover-background-color: var(--color-background-base);
--button-active-font-color: var(--color-text-dark);
--button-active-border-color: var(--color-foreground-base);
--button-active-background-color: var(--color-background-base);
--button-focus-font-color: var(--color-text-dark);
--button-focus-border-color: var(--color-foreground-base);
--button-focus-background-color: var(--color-background-base);
&:active,
&.active,
&:focus {
outline: none;
}
}
}

2
packages/editor-ui/src/components/HtmlEditor/theme.ts
View file

@ -20,6 +20,7 @@ export const theme = ({ isReadOnly }: { isReadOnly: boolean }) => [
},
'&.cm-editor': {
...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
borderColor: 'var(--border-color-base)',
},
'&.cm-editor.cm-focused': {
outline: '0',
@ -40,6 +41,7 @@ export const theme = ({ isReadOnly }: { isReadOnly: boolean }) => [
color: 'var(--color-code-gutterForeground)',
borderTopLeftRadius: 'var(--border-radius-base)',
borderBottomLeftRadius: 'var(--border-radius-base)',
borderRightColor: 'var(--border-color-base)',
},
'.cm-scroller': {
overflow: 'auto',

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

@ -140,7 +140,7 @@ export default defineComponent({
flex-direction: column;
position: absolute;
z-index: 2; // cover tooltips
background: white;
background: var(--color-code-background);
border: var(--border-base);
border-top: none;
width: 100%;
@ -148,6 +148,10 @@ export default defineComponent({
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
:global(.cm-editor) {
background-color: var(--color-code-background);
}
.header,
.body,
.footer {
@ -179,7 +183,7 @@ export default defineComponent({
display: inline-block;
font-size: var(--font-size-2xs);
height: var(--font-size-m);
background-color: #f0f0f0;
background-color: var(--color-expression-syntax-example);
margin-left: var(--spacing-5xs);
margin-right: var(--spacing-5xs);
}

1
packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
View file

@ -8,6 +8,7 @@ const commonThemeProps = {
'.cm-content': {
fontFamily: 'var(--font-family-monospace)',
color: 'var(--input-font-color, var(--color-text-dark))',
caretColor: 'var(--color-code-caret)',
},
'.cm-line': {
padding: '0',

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

@ -18,7 +18,7 @@
<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
<template #header>
<div :class="$style.logo">
<img :src="logoPath" :class="$style.icon" alt="n8n" />
<img :src="logoPath" data-test-id="n8n-logo" :class="$style.icon" alt="n8n" />
</div>
</template>

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

@ -206,10 +206,6 @@ const goToSourceControlSetup = async () => {
display: none;
}
span {
color: var(--color-text-base);
}
button {
font-size: var(--font-size-3xs);
}

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

@ -502,7 +502,7 @@ export default defineComponent({
returnStyles['border-width'] = '2px';
returnStyles['border-style'] = 'solid';
} else if (this.waiting || this.showPinnedDataInfo) {
borderColor = getStyleTokenValue('--color-secondary');
borderColor = getStyleTokenValue('--color-canvas-node-pinned-border');
} else if (this.nodeExecutionStatus === 'unknown') {
borderColor = getStyleTokenValue('--color-foreground-xdark');
} else if (this.workflowDataItems) {
@ -781,7 +781,7 @@ export default defineComponent({
height: 100%;
border: 2px solid var(--color-foreground-xdark);
border-radius: var(--border-radius-large);
background-color: $node-background-default;
background-color: var(--color-canvas-node-background);
&.executing {
background-color: $node-background-executing !important;
@ -1045,12 +1045,7 @@ export default defineComponent({
--node--selected--box-shadow-radius: 8px;
display: block;
background-color: hsla(
var(--color-foreground-base-h),
var(--color-foreground-base-s),
var(--color-foreground-base-l),
60%
);
background-color: var(--color-canvas-selected);
border-radius: var(--border-radius-xlarge);
overflow: hidden;
position: absolute;

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

@ -170,13 +170,13 @@ function nodeTypeSelected(nodeTypes: string[]) {
pointer-events: all !important;
button {
border-color: var(--color-foreground-xdark);
color: var(--color-foreground-xdark);
border-color: var(--color-button-node-creator-border-font);
color: var(--color-button-node-creator-border-font);
&:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-background-xlight);
border-color: var(--color-button-node-creator-hover-border-font);
color: var(--color-button-node-creator-hover-border-font);
background: var(--color-button-node-creator-background);
}
}
}

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

@ -174,7 +174,7 @@ onBeforeUnmount(() => {
left: $sidebar-width;
opacity: 0;
z-index: 1;
background: var(--color-background-dark);
background: var(--color-dialog-overlay-background);
pointer-events: none;
transition: opacity 200ms ease-in-out;

1
packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
View file

@ -133,6 +133,7 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
.mouseOverTooltip {
opacity: 0;
margin-left: var(--spacing-3xs);
color: var(--color-foreground-xdark);
&:hover {
color: var(--color-primary);
}

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

@ -783,6 +783,10 @@ $main-panel-width: 360px;
top: var(--spacing-xs);
left: var(--spacing-l);
span {
color: var(--color-ndv-back-font);
}
&:hover {
cursor: pointer;
}

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

@ -1302,7 +1302,7 @@ export default defineComponent({
}
.droppable {
--input-border-color: var(--color-secondary);
--input-border-color: var(--color-ndv-droppable-parameter);
--input-border-style: dashed;
textarea,
@ -1378,7 +1378,7 @@ export default defineComponent({
position: absolute;
right: 0;
bottom: 0;
background-color: white;
background-color: var(--color-code-background);
padding: 3px;
line-height: 9px;
border: var(--border-base);

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

@ -1509,7 +1509,7 @@ export default defineComponent({
position: relative;
width: 100%;
height: 100%;
background-color: var(--color-background-base);
background-color: var(--color-run-data-background);
display: flex;
flex-direction: column;
}

1
packages/editor-ui/src/components/RunDataJson.vue
View file

@ -210,7 +210,6 @@ export default defineComponent({
word-break: normal;
height: 100%;
padding-bottom: var(--spacing-3xl);
background-color: var(--color-background-base);
&:hover {
/* Shows .actionsGroup element from <run-data-json-actions /> child component */

1
packages/editor-ui/src/components/RunDataSchema.vue
View file

@ -111,7 +111,6 @@ const onDragEnd = (el: HTMLElement) => {
word-break: normal;
height: 100%;
width: 100%;
background-color: var(--color-background-base);
> div[class*='info'] {
padding: 0 var(--spacing-s);

7
packages/editor-ui/src/components/Sticky.vue
View file

@ -313,12 +313,7 @@ export default defineComponent({
.select-sticky-background {
display: block;
position: absolute;
background-color: hsla(
var(--color-foreground-base-h),
var(--color-foreground-base-s),
var(--color-foreground-base-l),
60%
);
background-color: var(--color-canvas-selected);
border-radius: var(--border-radius-xlarge);
overflow: hidden;
height: calc(100% + 16px);

12
packages/editor-ui/src/components/TagsManager/NoTagsView.vue
View file

@ -3,8 +3,10 @@
<el-col class="notags" :span="16">
<div class="icon">🗄️</div>
<div>
<div class="headline">
{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
<div class="mb-s">
<n8n-heading size="large">
{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
</n8n-heading>
</div>
<div class="description">
{{ $locale.baseText('noTagsView.withWorkflowTagsYouReFree') }}
@ -47,12 +49,6 @@ $--footer-spacing: 45px;
line-height: 14px;
}
.headline {
font-size: 17.6px;
color: black;
margin-bottom: 12px;
}
.description {
font-size: 14px;
line-height: 21px;

11
packages/editor-ui/src/components/ValueSurvey.vue
View file

@ -200,6 +200,10 @@ export default defineComponent({
margin-top: 10px;
padding: 0 15px;
}
h2 {
color: var(--color-value-survey-font);
}
}
.content {
@ -214,6 +218,9 @@ export default defineComponent({
.wrapper {
display: flex;
flex-direction: column;
.text span {
color: var(--color-value-survey-font);
}
}
.buttons {
@ -256,7 +263,7 @@ export default defineComponent({
}
.valueSurvey {
background: var(--color-background-dark);
background: var(--color-value-survey-background);
height: 120px;
top: auto;
@ -278,7 +285,7 @@ export default defineComponent({
right: 16px;
position: absolute;
font-weight: var(--font-weight-bold);
color: var(--color-text-xlight);
color: var(--color-value-survey-font);
@media (max-width: $breakpoint-xs) {
top: 2px;

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

@ -264,8 +264,8 @@ function focusFirstInput() {
.usageSyntax {
cursor: pointer;
background: var(--color-success-tint-2);
color: var(--color-success);
background: var(--color-variables-usage-syntax-bg);
color: var(--color-variables-usage-font);
font-family: var(--font-family-monospace);
font-size: var(--font-size-s);
}

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

@ -163,7 +163,7 @@ export default defineComponent({
.could-not-be-started {
display: inline-block;
color: #ff4949;
color: var(--color-text-danger);
margin-left: 0.5em;
}
</style>

2
packages/editor-ui/src/composables/useLoadingService.ts
View file

@ -20,7 +20,7 @@ export function useLoadingService() {
lock: true,
text: text || i18n.baseText('genericHelpers.loading'),
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.8)',
background: 'var(--color-dialog-overlay-background)',
}) as unknown as LoadingService;
}

2
packages/editor-ui/src/mixins/genericHelpers.ts
View file

@ -71,7 +71,7 @@ export const genericHelpers = defineComponent({
lock: true,
text: text || this.$locale.baseText('genericHelpers.loading'),
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.8)',
background: 'var(--color-dialog-overlay-background)',
});
},
setLoadingText(text: string) {

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

@ -11,7 +11,7 @@ $custom-font-light: var(--color-text-light);
$custom-font-very-light: var(--color-text-light);
$custom-expression-text: var(--color-secondary);
$custom-expression-background: var(--color-background-lighter);
$custom-expression-background: var(--color-background-light);
// Badge
$badge-danger-color: var(--color-danger);
@ -100,7 +100,7 @@ $drawer-background-color: var(--color-background-xlight);
// updates-panel
$updates-panel-info-url-color: $color-primary;
$updates-panel-border: var(--border-base);
$updates-panel-dark-background-color: var(--color-background-lighter);
$updates-panel-dark-background-color: var(--color-background-light);
$updates-panel-description-text-color: var(--color-text-base);
$updates-panel-text-color: var(--color-text-dark);

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

@ -1,13 +1,6 @@
:root {
--node-type-background-l: 95%;
--node-type-main-color-h: var(--color-foreground-xdark-h);
--node-type-main-color-s: var(--color-foreground-xdark-s);
--node-type-main-color-l: var(--color-foreground-xdark-l);
--node-type-main-color: hsl(
var(--node-type-main-color-h),
var(--node-type-main-color-s),
var(--node-type-main-color-l)
);
--node-type-supplemental-label-color-h: 235;
--node-type-supplemental-label-color-s: 28%;
--node-type-supplemental-label-color-l: 40%;
@ -188,6 +181,12 @@
font-weight: 400;
}
// Dialog
.el-overlay {
background-color: var(--color-dialog-overlay-background-dark);
backdrop-filter: blur(2px);
}
.el-dialog {
border: var(--border-base);
box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
@ -280,20 +279,6 @@
color: var(--color-text-dark);
}
}
.el-table--striped {
.el-table__body {
tr.el-table__row--striped {
background-color: var(--color-background-light);
td {
background: none;
}
}
tr.el-table__row:hover,
tr.el-table__row:hover > td {
background-color: var(--color-primary-tint-3);
}
}
}
// Tabs
.type-selector:focus,
@ -416,6 +401,7 @@
&,
&:hover,
&:focus {
padding-left: 35px;
border-radius: var(--border-radius-base);
color: var(--color-text-dark);
background-color: var(--color-background-base);

5
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -2198,6 +2198,11 @@
"mfa.setup.step2.toast.setupFinished.error.message": "Error enabling two-factor authentication",
"mfa.setup.step2.toast.tokenExpired.error.message": "MFA token expired. Close the modal and enable MFA again",
"settings.personal.mfa.section.title": "Two-factor authentication (2FA)",
"settings.personal.personalisation": "Personalisation",
"settings.personal.theme": "Theme",
"settings.personal.theme.systemDefault": "System default",
"settings.personal.theme.light": "Light theme",
"settings.personal.theme.dark": "Dark theme",
"settings.personal.mfa.button.disabled.infobox": "Two-factor authentication is currently disabled.",
"settings.personal.mfa.button.enabled.infobox": "Two-factor authentication is currently enabled.",
"settings.personal.mfa.button.enabled": "Enable 2FA",

4
packages/editor-ui/src/plugins/telemetry/index.ts
View file

@ -14,7 +14,7 @@ import {
TELEGRAM_NODE_TYPE,
} from '@/constants';
import { usePostHog } from '@/stores/posthog.store';
import { useNDVStore } from '@/stores';
import { useNDVStore, useUIStore } from '@/stores';
export class Telemetry {
private pageEventQueue: Array<{ route: RouteLocation }>;
@ -128,6 +128,8 @@ export class Telemetry {
properties = route.meta.telemetry.getProperties(route);
}
properties.theme = useUIStore().appliedTheme;
const category = route.meta?.telemetry?.pageCategory || 'Editor';
this.rudderStack.page(category, pageName, properties);
} else {

49
packages/editor-ui/src/stores/ui.store.ts
View file

@ -37,6 +37,7 @@ import {
DEBUG_PAYWALL_MODAL_KEY,
N8N_PRICING_PAGE_URL,
WORKFLOW_HISTORY_VERSION_RESTORE,
LOCAL_STORAGE_THEME,
} from '@/constants';
import type {
CloudUpdateLinkSourceType,
@ -51,6 +52,8 @@ import type {
XYPosition,
Modals,
NewCredentialsModal,
ThemeOption,
AppliedThemeOption,
} from '@/Interface';
import { defineStore } from 'pinia';
import { useRootStore } from '@/stores/n8nRoot.store';
@ -63,10 +66,41 @@ import { getStyleTokenValue } from '@/utils/htmlUtils';
import { dismissBannerPermanently } from '@/api/ui';
import type { BannerName } from 'n8n-workflow';
let savedTheme: ThemeOption = 'system';
try {
const value = localStorage.getItem(LOCAL_STORAGE_THEME) as AppliedThemeOption;
if (['light', 'dark'].includes(value)) {
savedTheme = value;
addThemeToBody(value);
}
} catch (e) {}
function addThemeToBody(theme: AppliedThemeOption) {
window.document.body.setAttribute('data-theme', theme);
}
function updateTheme(theme: ThemeOption) {
if (theme === 'system') {
window.document.body.removeAttribute('data-theme');
localStorage.removeItem(LOCAL_STORAGE_THEME);
} else {
addThemeToBody(theme);
localStorage.setItem(LOCAL_STORAGE_THEME, theme);
}
}
function getPreferredTheme(): AppliedThemeOption {
const isDarkMode =
!!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')?.matches;
return isDarkMode ? 'dark' : 'light';
}
export const useUIStore = defineStore(STORES.UI, {
state: (): UIState => ({
activeActions: [],
activeCredentialType: null,
theme: savedTheme,
modals: {
[ABOUT_MODAL_KEY]: {
open: false,
@ -199,11 +233,16 @@ export const useUIStore = defineStore(STORES.UI, {
bannerStack: [],
}),
getters: {
logo() {
appliedTheme(): AppliedThemeOption {
return this.theme === 'system' ? getPreferredTheme() : this.theme;
},
logo(): string {
const { releaseChannel } = useSettingsStore().settings;
const type = this.appliedTheme === 'dark' ? '-dark-mode.svg' : '.svg';
return releaseChannel === 'stable'
? 'n8n-logo-expanded.svg'
: `n8n-${releaseChannel}-logo.svg`;
? `n8n-logo-expanded${type}`
: `n8n-${releaseChannel}-logo${type}`;
},
contextBasedTranslationKeys() {
const settingsStore = useSettingsStore();
@ -377,6 +416,10 @@ export const useUIStore = defineStore(STORES.UI, {
},
},
actions: {
setTheme(theme: ThemeOption): void {
this.theme = theme;
updateTheme(theme);
},
setMode(name: keyof Modals, mode: string): void {
this.modals[name] = {
...this.modals[name],

6
packages/editor-ui/src/styles/autocomplete-theme.scss
View file

@ -30,8 +30,12 @@
}
}
.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] {
background-color: var(--color-autocomplete-selected-background);
}
.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel {
color: var(--color-text-xlight) !important;
color: var(--color-autocomplete-selected-font) !important;
font-weight: 600;
}

2
packages/editor-ui/src/utils/nodeViewUtils.ts
View file

@ -585,7 +585,7 @@ export const getBackgroundStyles = (
if (executionPreview) {
return {
'background-image':
'linear-gradient(135deg, #f9f9fb 25%, #ffffff 25%, #ffffff 50%, #f9f9fb 50%, #f9f9fb 75%, #ffffff 75%, #ffffff 100%)',
'linear-gradient(135deg, var(--color-canvas-read-only-line) 25%, var(--color-canvas-background) 25%, var(--color-canvas-background) 50%, var(--color-canvas-read-only-line) 50%, var(--color-canvas-read-only-line) 75%, var(--color-canvas-background) 75%, var(--color-canvas-background) 100%)',
'background-size': `${squareSize}px ${squareSize}px`,
'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
};

110
packages/editor-ui/src/views/SettingsPersonalView.vue
View file

@ -16,7 +16,7 @@
</div>
</div>
<div>
<div :class="$style.sectionHeader">
<div class="mb-s">
<n8n-heading size="large">{{
i18n.baseText('settings.personal.basicInformation')
}}</n8n-heading>
@ -33,10 +33,10 @@
</div>
</div>
<div v-if="!signInWithLdap && !signInWithSaml">
<div :class="$style.sectionHeader">
<div class="mb-s">
<n8n-heading size="large">{{ i18n.baseText('settings.personal.security') }}</n8n-heading>
</div>
<div>
<div class="mb-s">
<n8n-input-label :label="i18n.baseText('auth.password')">
<n8n-link @click="openPasswordModal" data-test-id="change-password-link">{{
i18n.baseText('auth.changePassword')
@ -44,9 +44,8 @@
</n8n-input-label>
</div>
<div v-if="isMfaFeatureEnabled">
<div :class="$style.mfaSection">
<n8n-input-label :label="$locale.baseText('settings.personal.mfa.section.title')">
</n8n-input-label>
<div class="mb-xs">
<n8n-input-label :label="$locale.baseText('settings.personal.mfa.section.title')" />
<n8n-text :bold="false" :class="$style.infoText">
{{
mfaDisabled
@ -58,26 +57,49 @@
</n8n-link>
</n8n-text>
</div>
<div :class="$style.mfaButtonContainer" v-if="mfaDisabled">
<n8n-button
:class="$style.button"
float="left"
type="tertiary"
:label="$locale.baseText('settings.personal.mfa.button.enabled')"
data-test-id="enable-mfa-button"
@click="onMfaEnableClick"
/>
</div>
<div v-else>
<n8n-button
:class="$style.disableMfaButton"
float="left"
type="tertiary"
:label="$locale.baseText('settings.personal.mfa.button.disabled')"
data-test-id="disable-mfa-button"
@click="onMfaDisableClick"
/>
</div>
<n8n-button
v-if="mfaDisabled"
:class="$style.button"
type="tertiary"
:label="$locale.baseText('settings.personal.mfa.button.enabled')"
data-test-id="enable-mfa-button"
@click="onMfaEnableClick"
/>
<n8n-button
v-else
:class="$style.disableMfaButton"
type="tertiary"
:label="$locale.baseText('settings.personal.mfa.button.disabled')"
data-test-id="disable-mfa-button"
@click="onMfaDisableClick"
/>
</div>
</div>
<div>
<div class="mb-s">
<n8n-heading size="large">{{
i18n.baseText('settings.personal.personalisation')
}}</n8n-heading>
</div>
<div>
<n8n-input-label :label="i18n.baseText('settings.personal.theme')">
<n8n-select
:class="$style.themeSelect"
data-test-id="theme-select"
size="small"
@update:modelValue="selectTheme"
:modelValue="currentTheme"
filterable
>
<n8n-option
v-for="item in themeOptions"
:key="item.name"
:label="$t(item.label)"
:value="item.name"
>
</n8n-option>
</n8n-select>
</n8n-input-label>
</div>
</div>
<div>
@ -95,7 +117,7 @@
<script lang="ts">
import { useI18n, useToast } from '@/composables';
import type { IFormInputs, IUser } from '@/Interface';
import type { IFormInputs, IUser, ThemeOption } from '@/Interface';
import { CHANGE_PASSWORD_MODAL_KEY, MFA_DOCS_URL, MFA_SETUP_MODAL_KEY } from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { useUsersStore } from '@/stores/users.store';
@ -121,6 +143,20 @@ export default defineComponent({
formBus: createEventBus(),
readyToSubmit: false,
mfaDocsUrl: MFA_DOCS_URL,
themeOptions: [
{
name: 'system',
label: 'settings.personal.theme.systemDefault',
},
{
name: 'light',
label: 'settings.personal.theme.light',
},
{
name: 'dark',
label: 'settings.personal.theme.dark',
},
] as Array<{ name: ThemeOption; label: string }>,
};
},
mounted() {
@ -186,8 +222,14 @@ export default defineComponent({
isMfaFeatureEnabled(): boolean {
return this.settingsStore.isMfaFeatureEnabled;
},
currentTheme(): ThemeOption {
return this.uiStore.theme;
},
},
methods: {
selectTheme(theme: ThemeOption) {
this.uiStore.setTheme(theme);
},
onInput() {
this.hasAnyChanges = true;
},
@ -283,7 +325,6 @@ export default defineComponent({
.disableMfaButton {
--button-color: var(--color-danger);
margin-top: var(--spacing-2xs);
> span {
font-weight: var(--font-weight-bold);
}
@ -296,21 +337,12 @@ export default defineComponent({
}
}
.mfaSection {
margin-top: var(--spacing-l);
}
.infoText {
font-size: var(--font-size-2xs);
color: var(--color-text-light);
}
.sectionHeader {
margin-top: var(--spacing-2xl);
margin-bottom: var(--spacing-s);
}
.mfaButtonContainer {
margin-top: var(--spacing-2xs);
.themeSelect {
max-width: 50%;
}
</style>

9
packages/editor-ui/src/views/SettingsUsageAndPlan.vue
View file

@ -188,7 +188,7 @@ const openPricingPage = () => {
type="tertiary"
size="large"
>
<strong>{{ locale.baseText('settings.usageAndPlan.button.activation') }}</strong>
<span>{{ locale.baseText('settings.usageAndPlan.button.activation') }}</span>
</n8n-button>
<n8n-button v-if="usageStore.managementToken" @click="onManagePlan" size="large">
<a :href="managePlanUrl" target="_blank">{{
@ -319,13 +319,6 @@ div[class*='info'] > span > span:last-child {
line-height: 1.4;
padding: 0 0 0 var(--spacing-4xs);
}
.buttonTertiary {
&,
&:hover {
background: transparent;
}
}
</style>
<style lang="scss" scoped>