diff --git a/packages/frontend/@n8n/chat/README.md b/packages/frontend/@n8n/chat/README.md index 846781e7caa..b263ea1c053 100644 --- a/packages/frontend/@n8n/chat/README.md +++ b/packages/frontend/@n8n/chat/README.md @@ -214,10 +214,10 @@ The Chat window is entirely customizable using CSS variables. ```css :root { - --chat--color-primary: #e74266; - --chat--color-primary-shade-50: #db4061; - --chat--color-primary-shade-100: #cf3c5c; - --chat--color-secondary: #20b69e; + --chat--color--primary: #e74266; + --chat--color--primary-shade-50: #db4061; + --chat--color--primary--shade-100: #cf3c5c; + --chat--color--secondary: #20b69e; --chat--color-secondary-shade-50: #1ca08a; --chat--color-white: #ffffff; --chat--color-light: #f2f4f8; @@ -257,14 +257,14 @@ The Chat window is entirely customizable using CSS variables. --chat--message--bot--background: var(--chat--color-white); --chat--message--bot--color: var(--chat--color-dark); --chat--message--bot--border: none; - --chat--message--user--background: var(--chat--color-secondary); + --chat--message--user--background: var(--chat--color--secondary); --chat--message--user--color: var(--chat--color-white); --chat--message--user--border: none; --chat--message--pre--background: rgba(0, 0, 0, 0.05); - --chat--toggle--background: var(--chat--color-primary); - --chat--toggle--hover--background: var(--chat--color-primary-shade-50); - --chat--toggle--active--background: var(--chat--color-primary-shade-100); + --chat--toggle--background: var(--chat--color--primary); + --chat--toggle--hover--background: var(--chat--color--primary-shade-50); + --chat--toggle--active--background: var(--chat--color--primary--shade-100); --chat--toggle--color: var(--chat--color-white); --chat--toggle--size: 64px; } diff --git a/packages/frontend/@n8n/chat/src/components/Chat.vue b/packages/frontend/@n8n/chat/src/components/Chat.vue index 168021250f1..2eb95d19284 100644 --- a/packages/frontend/@n8n/chat/src/components/Chat.vue +++ b/packages/frontend/@n8n/chat/src/components/Chat.vue @@ -91,7 +91,7 @@ onMounted(async () => { cursor: pointer; &:hover { - color: var(--chat--close--button--color-hover, var(--chat--color-primary)); + color: var(--chat--close--button--color-hover, var(--chat--color--primary)); } } diff --git a/packages/frontend/@n8n/chat/src/components/Input.vue b/packages/frontend/@n8n/chat/src/components/Input.vue index bef3003b4b5..6fea97b5cb1 100644 --- a/packages/frontend/@n8n/chat/src/components/Input.vue +++ b/packages/frontend/@n8n/chat/src/components/Input.vue @@ -421,7 +421,7 @@ function adjustTextAreaHeight() { width: var(--chat--textarea--height); background: var(--chat--input--send--button--background, white); cursor: pointer; - color: var(--chat--input--send--button--color, var(--chat--color-secondary)); + color: var(--chat--input--send--button--color, var(--chat--color--secondary)); border: 0; font-size: 24px; display: inline-flex; diff --git a/packages/frontend/@n8n/chat/src/components/MessagesList.vue b/packages/frontend/@n8n/chat/src/components/MessagesList.vue index 2dcf3cb2d95..0811378cb4b 100644 --- a/packages/frontend/@n8n/chat/src/components/MessagesList.vue +++ b/packages/frontend/@n8n/chat/src/components/MessagesList.vue @@ -82,7 +82,7 @@ watch( .empty { text-align: center; - color: var(--color-text-base); + color: var(--color--text); display: flex; flex-direction: column; align-items: center; diff --git a/packages/frontend/@n8n/chat/src/components/PoweredBy.vue b/packages/frontend/@n8n/chat/src/components/PoweredBy.vue index bd899e6b164..e3e58779eac 100644 --- a/packages/frontend/@n8n/chat/src/components/PoweredBy.vue +++ b/packages/frontend/@n8n/chat/src/components/PoweredBy.vue @@ -10,7 +10,7 @@ text-align: center; a { - color: var(--chat--color-primary); + color: var(--chat--color--primary); text-decoration: none; } } diff --git a/packages/frontend/@n8n/chat/src/css/_tokens.scss b/packages/frontend/@n8n/chat/src/css/_tokens.scss index d55b71282fc..3bffcdab65b 100644 --- a/packages/frontend/@n8n/chat/src/css/_tokens.scss +++ b/packages/frontend/@n8n/chat/src/css/_tokens.scss @@ -1,9 +1,9 @@ :root { /* Colors */ - --chat--color-primary: #e74266; - --chat--color-primary-shade-50: #db4061; - --chat--color-primary-shade-100: #cf3c5c; - --chat--color-secondary: #20b69e; + --chat--color--primary: #e74266; + --chat--color--primary-shade-50: #db4061; + --chat--color--primary--shade-100: #cf3c5c; + --chat--color--secondary: #20b69e; --chat--color-secondary-shade-50: #1ca08a; --chat--color-white: #fff; --chat--color-light: #f2f4f8; @@ -62,7 +62,7 @@ --chat--message--bot--background: var(--chat--color-white); --chat--message--bot--color: var(--chat--color-dark); --chat--message--bot--border: none; - --chat--message--user--background: var(--chat--color-secondary); + --chat--message--user--background: var(--chat--color--secondary); --chat--message--user--color: var(--chat--color-white); --chat--message--user--border: none; --chat--message--pre--background: rgba(0, 0, 0, 0.05); @@ -73,9 +73,9 @@ --chat--toggle--width: var(--chat--toggle--size); --chat--toggle--height: var(--chat--toggle--size); --chat--toggle--border-radius: 50%; - --chat--toggle--background: var(--chat--color-primary); - --chat--toggle--hover--background: var(--chat--color-primary-shade-50); - --chat--toggle--active--background: var(--chat--color-primary-shade-100); + --chat--toggle--background: var(--chat--color--primary); + --chat--toggle--hover--background: var(--chat--color--primary-shade-50); + --chat--toggle--active--background: var(--chat--color--primary--shade-100); --chat--toggle--color: var(--chat--color-white); /* Input Area */ @@ -94,20 +94,20 @@ /* Button Styles */ --chat--button--color: var(--chat--color-light); - --chat--button--background: var(--chat--color-primary); + --chat--button--background: var(--chat--color--primary); --chat--button--padding: calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing); --chat--button--border-radius: var(--chat--border-radius); --chat--button--hover--color: var(--chat--color-light); - --chat--button--hover--background: var(--chat--color-primary-shade-50); - --chat--close--button--color-hover: var(--chat--color-primary); + --chat--button--hover--background: var(--chat--color--primary-shade-50); + --chat--close--button--color-hover: var(--chat--color--primary); /* Send and File Buttons */ --chat--input--send--button--background: var(--chat--color-white); - --chat--input--send--button--color: var(--chat--color-secondary); - --chat--input--send--button--background-hover: var(--chat--color-primary-shade-50); + --chat--input--send--button--color: var(--chat--color--secondary); + --chat--input--send--button--background-hover: var(--chat--color--primary-shade-50); --chat--input--send--button--color-hover: var(--chat--color-secondary-shade-50); --chat--input--file--button--background: var(--chat--color-white); - --chat--input--file--button--color: var(--chat--color-secondary); + --chat--input--file--button--color: var(--chat--color--secondary); --chat--input--file--button--background-hover: var(--chat--input--file--button--background); --chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50); --chat--files-spacing: 0.25rem; diff --git a/packages/frontend/@n8n/design-system/.storybook/preview.ts b/packages/frontend/@n8n/design-system/.storybook/preview.ts index aae7dcce6f5..577e51127a1 100644 --- a/packages/frontend/@n8n/design-system/.storybook/preview.ts +++ b/packages/frontend/@n8n/design-system/.storybook/preview.ts @@ -30,23 +30,23 @@ export const parameters = { }, }, backgrounds: { - default: '--color-background-xlight', + default: '--color--background--light-3', values: [ { - name: '--color-background-dark', - value: 'var(--color-background-dark)', + name: '--color--background--shade-2', + value: 'var(--color--background--shade-2)', }, { - name: '--color-background-base', - value: 'var(--color-background-base)', + name: '--color--background', + value: 'var(--color--background)', }, { - name: '--color-background-light', - value: 'var(--color-background-light)', + name: '--color--background--light-2', + value: 'var(--color--background--light-2)', }, { - name: '--color-background-xlight', - value: 'var(--color-background-xlight)', + name: '--color--background--light-3', + value: 'var(--color--background--light-3)', }, ], }, diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantButton/AskAssistantButton.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantButton/AskAssistantButton.vue index 2e02caeeae7..71aeac35523 100644 --- a/packages/frontend/@n8n/design-system/src/components/AskAssistantButton/AskAssistantButton.vue +++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantButton/AskAssistantButton.vue @@ -54,7 +54,7 @@ function onMouseLeave() { diff --git a/packages/frontend/@n8n/design-system/src/components/AskAssistantIcon/AssistantIcon.vue b/packages/frontend/@n8n/design-system/src/components/AskAssistantIcon/AssistantIcon.vue index 103b15b8cd3..66568c3c064 100644 --- a/packages/frontend/@n8n/design-system/src/components/AskAssistantIcon/AssistantIcon.vue +++ b/packages/frontend/@n8n/design-system/src/components/AskAssistantIcon/AssistantIcon.vue @@ -23,7 +23,7 @@ const svgFill = computed(() => { if (props.theme === 'blank') { return 'white'; } else if (props.theme === 'disabled') { - return 'var(--color-text-light)'; + return 'var(--color--text--tint-1)'; } return 'url(#paint0_linear_173_12825)'; }); diff --git a/packages/frontend/@n8n/design-system/src/components/BetaTag/BetaTag.vue b/packages/frontend/@n8n/design-system/src/components/BetaTag/BetaTag.vue index 393df5ea4dd..b93fad9634f 100644 --- a/packages/frontend/@n8n/design-system/src/components/BetaTag/BetaTag.vue +++ b/packages/frontend/@n8n/design-system/src/components/BetaTag/BetaTag.vue @@ -12,10 +12,10 @@ const { t } = useI18n(); .beta { display: inline-block; - color: var(--color-secondary); + color: var(--color--secondary); font-size: var(--font-size-3xs); font-weight: var(--font-weight-bold); - background-color: var(--color-secondary-tint-3); + background-color: var(--color--secondary--tint-2); padding: var(--spacing-5xs) var(--spacing-4xs); border-radius: 16px; } diff --git a/packages/frontend/@n8n/design-system/src/components/BlinkingCursor/BlinkingCursor.vue b/packages/frontend/@n8n/design-system/src/components/BlinkingCursor/BlinkingCursor.vue index 0ee505998a6..c33862bae72 100644 --- a/packages/frontend/@n8n/design-system/src/components/BlinkingCursor/BlinkingCursor.vue +++ b/packages/frontend/@n8n/design-system/src/components/BlinkingCursor/BlinkingCursor.vue @@ -19,7 +19,7 @@ background-color: transparent; } 50% { - background-color: var(--color-foreground-xdark); + background-color: var(--color--foreground--shade-2); } } diff --git a/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue b/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue index 1c79a51f2fc..4ac842b88db 100644 --- a/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue +++ b/packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue @@ -144,7 +144,7 @@ const diffs = computed(() => { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue index 0a4a56aa776..67a43bfc86b 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue @@ -283,7 +283,7 @@ const handleTooltipClose = () => { } .item.dragging:hover { - border: var(--border-width-base) var(--border-style-base) var(--color-secondary); + border: var(--border-width-base) var(--border-style-base) var(--color--secondary); border-radius: var(--border-radius-base); background-color: var(--color-callout-secondary-background); @@ -300,7 +300,7 @@ const handleTooltipClose = () => { } .item.current span { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } // Make disabled ellipsis look like a normal item @@ -309,7 +309,7 @@ const handleTooltipClose = () => { .tooltip-ellipsis { cursor: pointer; user-select: none; - color: var(--color-text-base); + color: var(--color--text); } &.disabled { .dots, @@ -318,9 +318,9 @@ const handleTooltipClose = () => { } .dots { cursor: default; - color: var(--color-text-base); + color: var(--color--text); &:hover { - color: var(--color-text-base); + color: var(--color--text); } } } @@ -328,7 +328,7 @@ const handleTooltipClose = () => { .hidden-items-menu { display: flex; - color: var(--color-text-base); + color: var(--color--text); } .hidden-items-menu-popper { @@ -370,7 +370,7 @@ const handleTooltipClose = () => { padding: var(--spacing-xs) var(--spacing-2xs); text-align: center; & > div { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); span { font-size: var(--font-size-2xs); } @@ -383,13 +383,13 @@ const handleTooltipClose = () => { .dots { padding: 0 var(--spacing-4xs); - color: var(--color-text-light); + color: var(--color--text--tint-1); border-radius: var(--border-radius-base); &:hover, &:focus { - background-color: var(--color-background-base); - color: var(--color-primary); + background-color: var(--color--background); + color: var(--color--primary); } } @@ -405,18 +405,18 @@ const handleTooltipClose = () => { .item, .item * { - color: var(--color-text-base); + color: var(--color--text); font-size: var(--font-size-2xs); line-height: var(--font-line-height-xsmall); } .item a:hover * { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } .separator { font-size: var(--font-size-s); - color: var(--color-text-base); + color: var(--color--text); } } @@ -428,7 +428,7 @@ const handleTooltipClose = () => { .item, .item * { - color: var(--color-text-base); + color: var(--color--text); font-size: var(--font-size-s); line-height: var(--font-line-height-xsmall); } @@ -438,21 +438,21 @@ const handleTooltipClose = () => { } .item:not(.dragging) a:hover * { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } .ellipsis { padding-right: 0; padding-left: 0; - color: var(--color-text-light); + color: var(--color--text--tint-1); &:hover { - color: var(--color-text-base); + color: var(--color--text); } } .separator { font-size: var(--font-size-xl); - color: var(--color-foreground-base); + color: var(--color--foreground); } } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss index e83cac774eb..33e44f3f987 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss +++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss @@ -174,74 +174,74 @@ @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-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-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-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-focus-border-color: var(--color--success); + --button-focus-background-color: var(--color--success); + --button-focus-outline-color: var(--color--success--tint-1); --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-disabled-border-color: var(--color--success--tint-3); + --button-disabled-background-color: var(--color--success--tint-3); --button-loading-font-color: var(--color-button-success-font); - --button-loading-border-color: var(--color-success); - --button-loading-background-color: var(--color-success); + --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-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-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-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-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-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); + --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-button-danger-border); - --button-background-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-hover-border-color: var(--color--danger--shade-1); + --button-hover-background-color: var(--color--danger--shade-1); --button-active-font-color: var(--color-button-danger-font); - --button-active-border-color: var(--color-danger-shade-1); - --button-active-background-color: var(--color-danger-shade-1); + --button-active-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-border-color: var(--color--danger); + --button-focus-background-color: var(--color--danger); --button-focus-outline-color: var(--color-button-danger-focus-outline); --button-disabled-font-color: var(--color-button-danger-disabled-font); @@ -249,6 +249,6 @@ --button-disabled-background-color: var(--color-button-danger-disabled-background); --button-loading-font-color: var(--color-button-danger-font); - --button-loading-border-color: var(--color-danger); - --button-loading-background-color: var(--color-danger); + --button-loading-border-color: var(--color--danger); + --button-loading-background-color: var(--color--danger); } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue index f4332761868..89cc3d40594 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue @@ -213,42 +213,42 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); --button-disabled-background-color: transparent; &.primary { - --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-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-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-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--tint-1); + --button-disabled-border-color: var(--color--success--tint-1); --button-disabled-background-color: transparent; } &.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-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-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-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-3); + --button-disabled-border-color: var(--color--danger--tint-3); --button-disabled-background-color: transparent; } } @@ -271,35 +271,35 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); } &.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); + --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-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); + --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--tint-1); } &.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); + --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-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); + --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-3); } &:hover { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue b/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue index d7a28939735..59fe8440d77 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue @@ -48,7 +48,7 @@ const classes = computed(() => ({ .card { border-radius: var(--border-radius-large); border: var(--border-base); - background-color: var(--color-background-xlight); + background-color: var(--color--background--light-3); padding: var(--card--padding, var(--spacing-s)); display: flex; flex-direction: row; @@ -96,8 +96,8 @@ const classes = computed(() => ({ &:hover, &:focus { - color: var(--color-primary); - border-color: var(--color-primary); + color: var(--color--primary); + border-color: var(--color--primary); } } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts index 4ec2b19c77f..724e9dd7811 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts @@ -115,7 +115,7 @@ export default { }, }, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; @@ -168,9 +168,9 @@ export const KeyboardShortcut: StoryFn = () => ({ }), template: `
-

- Press ⌘ + K - or Ctrl + K +

+ Press ⌘ + K + or Ctrl + K to open the command bar. Use arrow keys to navigate and Enter to select.

({ }), template: `
-

+

This example shows how items are grouped by sections:
• Recent items (no section) appear first
• Then items are grouped by Actions, Navigation, Tools, and Settings sections diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue index 49b0dc16017..2eb3924c05b 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue @@ -321,7 +321,7 @@ onUnmounted(() => { top: 20vh; left: 50%; transform: translateX(-50%); - background: var(--color-background-xlight); + background: var(--color--background--light-3); border: var(--border-base); border-radius: var(--border-radius-large); box-shadow: var(--box-shadow-dark); @@ -337,12 +337,12 @@ onUnmounted(() => { background: transparent; font-size: var(--font-size-m); font-family: var(--font-family); - color: var(--color-text-base); + color: var(--color--text); padding: var(--spacing-m) var(--spacing-l); border-bottom: var(--border-base); &::placeholder { - color: var(--color-text-light); + color: var(--color--text--tint-1); } } @@ -356,13 +356,13 @@ onUnmounted(() => { padding: var(--spacing-xs) var(--spacing-l); font-size: var(--font-size-2xs); font-weight: var(--font-weight-regular); - color: var(--color-text-light); + color: var(--color--text--tint-1); } .noResults { padding: var(--spacing-l); text-align: center; - color: var(--color-text-light); + color: var(--color--text--tint-1); font-size: var(--font-size-s); } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBarItem.vue b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBarItem.vue index d2f972af378..caf81106554 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBarItem.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBarItem.vue @@ -60,18 +60,18 @@ const handleSelect = () => { } &:hover { - background-color: var(--color-foreground-base); + background-color: var(--color--foreground); &::before { - background-color: var(--color-foreground-dark); + background-color: var(--color--foreground--shade-1); } } &.selected { - background-color: var(--color-foreground-base); + background-color: var(--color--foreground); &::before { - background-color: var(--color-primary); + background-color: var(--color--primary); } } } @@ -93,7 +93,7 @@ const handleSelect = () => { .title { font-size: var(--font-size-s); font-weight: var(--font-weight-regular); - color: var(--color-text-dark); + color: var(--color--text--shade-1); line-height: var(--font-line-height-compact); overflow: hidden; text-overflow: ellipsis; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue index 843f291126d..f118f4a7cbf 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue @@ -525,7 +525,7 @@ const table = useVueTable({ th { position: relative; text-align: left; - color: var(--color-text-base); + color: var(--color--text); font-weight: 600; font-size: 12px; padding: 0 8px; @@ -543,13 +543,13 @@ const table = useVueTable({ } thead { - background-color: var(--color-background-light-base); - border-bottom: 1px solid var(--color-foreground-base); + background-color: var(--color--background--light-1); + border-bottom: 1px solid var(--color--foreground); } tbody > tr { &:hover { - background-color: var(--color-background-light); + background-color: var(--color--background--light-2); } &:last-child > td { @@ -558,12 +558,12 @@ const table = useVueTable({ } tbody tr { - background-color: var(--color-background-xlight); - border-bottom: 1px solid var(--color-foreground-base); + background-color: var(--color--background--light-3); + border-bottom: 1px solid var(--color--foreground); } td { - color: var(--color-text-dark); + color: var(--color--text--shade-1); padding: 0 8px; height: 48px; @@ -586,7 +586,7 @@ const table = useVueTable({ .n8n-data-table-server-wrapper { border-radius: 8px; - border: 1px solid var(--color-foreground-base); + border: 1px solid var(--color--foreground); overflow: hidden; } @@ -614,7 +614,7 @@ th.loading-row { .progress-bar-value { width: 100%; height: 100%; - background-color: var(--color-primary); + background-color: var(--color--primary); animation: indeterminateAnimation 1s infinite linear; transform-origin: 0% 50%; position: absolute; @@ -648,9 +648,9 @@ th.loading-row { display: flex; &__label { - color: var(--color-text-base); - background-color: var(--color-background-light); - border: 1px solid var(--color-foreground-base); + color: var(--color--text); + background-color: var(--color--background--light-2); + border: 1px solid var(--color--foreground); border-right: 0; font-size: 12px; display: flex; @@ -673,7 +673,7 @@ th.loading-row { top: 0; height: 100%; width: 3px; - background: var(--color-primary); + background: var(--color--primary); cursor: col-resize; user-select: none; touch-action: none; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.vue b/packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.vue index 7d72408af95..74cb79a9e3b 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.vue @@ -32,7 +32,7 @@ withDefaults(defineProps(), { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts index 5b3445fa331..5b6a866e336 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts @@ -8,7 +8,7 @@ export default { component: N8nFormBox, argTypes: {}, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue b/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue index b13723e7471..1cbe1e5d526 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue @@ -92,7 +92,7 @@ const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event); } .container { - background-color: var(--color-background-xlight); + background-color: var(--color--background--light-3); padding: var(--spacing-l); border: var(--border-base); border-radius: var(--border-radius-large); diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue b/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue index 42b5724b67a..0a9eebcb912 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue @@ -279,16 +279,16 @@ defineExpose({ inputRef }); margin-top: var(--spacing-2xs); font-size: var(--font-size-2xs); font-weight: var(--font-weight-regular); - color: var(--color-text-base); + color: var(--color--text); } .errors { composes: infoText; - color: var(--color-danger); + color: var(--color--danger); } .errorInput { - --input-border-color: var(--color-danger); + --input-border-color: var(--color--danger); } .multiSelectSmallTags { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts index 83b1d0ee843..254d2d0d8d1 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts @@ -8,7 +8,7 @@ export default { component: N8nFormInputs, argTypes: {}, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.vue b/packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.vue index ef3190b8d33..9d4c53a7860 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.vue @@ -85,27 +85,27 @@ const classes = computed(() => { } .primary { - color: var(--color-primary); + color: var(--color--primary); } .text-dark { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } .text-base { - color: var(--color-text-base); + color: var(--color--text); } .text-light { - color: var(--color-text-light); + color: var(--color--text--tint-1); } .text-xlight { - color: var(--color-text-xlight); + color: var(--color--text--tint-3); } .danger { - color: var(--color-danger); + color: var(--color--danger); } .align-left { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts index 1e6fce3a645..949abec41bd 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts @@ -19,7 +19,7 @@ export default { }, }, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue index 41722a1269d..2a28a7a5b29 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue @@ -166,10 +166,10 @@ const togglePopup = () => { display: flex; flex-direction: column; margin-top: var(--spacing-4xs); - background-color: var(--color-background-xlight); + background-color: var(--color--background--light-3); border-radius: var(--border-radius-base); border: var(--border-base); - border-color: var(--color-foreground-dark); + border-color: var(--color--foreground--shade-1); .tabs { padding: var(--spacing-2xs); @@ -190,15 +190,15 @@ const togglePopup = () => { border-radius: var(--border-radius-small); &:hover { - background-color: var(--color-background-medium); + background-color: var(--color--background--shade-1); } } .icon { - color: var(--color-text-light); + color: var(--color--text--tint-1); &:hover { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts index 3ddb2ac4853..45a506ce0e6 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts @@ -8,7 +8,7 @@ export default { component: N8nInfoAccordion, argTypes: {}, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue index e66acfeb738..f9607ddb1b1 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue @@ -89,7 +89,7 @@ const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick', diff --git a/packages/frontend/@n8n/design-system/src/components/N8nLink/Link.vue b/packages/frontend/@n8n/design-system/src/components/N8nLink/Link.vue index b91e560b270..cbce7e60ba8 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nLink/Link.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nLink/Link.vue @@ -50,7 +50,7 @@ withDefaults(defineProps(), { } .text { - color: var(--color-text-base); + color: var(--color--text); &:hover { color: var.$link-color; @@ -62,10 +62,10 @@ withDefaults(defineProps(), { } .danger { - color: var(--color-danger); + color: var(--color--danger); &:active { - color: var(--color-danger-shade-1); + color: var(--color--danger--shade-1); } } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.vue b/packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.vue index 523ce24f113..a99510da529 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.vue @@ -72,7 +72,7 @@ onMounted(() => { .logoText { margin-left: var(--spacing-5xs); path { - fill: var(--color-text-dark); + fill: var(--color--text--shade-1); } } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue index 2382e558689..b75278e28e2 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue @@ -246,7 +246,7 @@ const onCheckboxChange = (index: number) => { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue b/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue index a7844bdd3ce..73ac9baf882 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue @@ -182,7 +182,7 @@ defineExpose({ :global(.el-menu--horizontal .el-menu .el-menu-item), :global(.el-menu--horizontal .el-menu .el-sub-menu__title) { - color: var(--color-text-dark); + color: var(--color--text--shade-1); background-color: var(--color-menu-background); } @@ -196,14 +196,14 @@ defineExpose({ } :global(.el-menu--popup) { - border: 1px solid var(--color-foreground-base); + border: 1px solid var(--color--foreground); border-radius: var(--border-radius-base); } :global(.el-menu--horizontal .el-menu .el-menu-item.is-disabled) { opacity: 1; cursor: default; - color: var(--color-text-light); + color: var(--color--text--tint-1); } :global(.el-sub-menu__icon-arrow svg) { @@ -213,6 +213,6 @@ defineExpose({ .submenu__icon { margin-right: var(--spacing-2xs); - color: var(--color-text-base); + color: var(--color--text); } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue b/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue index 37ab65e17f5..c7ab72d79ba 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue @@ -82,7 +82,7 @@ const { t } = useI18n(); } } .creatorNode:hover .panelIcon { - color: var(--action-arrow-color-hover, var(--color-text-light)); + color: var(--action-arrow-color-hover, var(--color--text--tint-1)); } :root .tag { margin-left: var(--spacing-2xs); @@ -101,14 +101,14 @@ const { t } = useI18n(); justify-content: flex-end; align-items: center; margin-left: var(--spacing-2xs); - color: var(--action-arrow-color, var(--color-text-lighter)); + color: var(--action-arrow-color, var(--color--text--tint-2)); cursor: pointer; background: transparent; border: none; } .tooltipIcon { margin-left: var(--spacing-3xs); - color: var(--color-text-base); + color: var(--color--text); font-size: var(--font-size-2xs); } .details { @@ -130,20 +130,20 @@ const { t } = useI18n(); font-size: var(--font-size-2xs); line-height: 1rem; font-weight: var(--font-weight-regular); - color: var(--node-creator-description-colos, var(--color-text-base)); + color: var(--node-creator-description-colos, var(--color--text)); } .aiIcon { - color: var(--color-secondary); + color: var(--color--secondary); } .triggerIcon { - color: var(--color-primary); + color: var(--color--primary); } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue index 949f9529ade..9fee09fd358 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue @@ -173,7 +173,7 @@ const N8nNodeIcon = getCurrentInstance()?.type; .badge { position: absolute; - background: var(--color-background-node-icon-badge, var(--color-background-base)); + background: var(--color-background-node-icon-badge, var(--color--background)); border-radius: 50%; } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.vue b/packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.vue index d713423a0cb..2ee07a0de2f 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.vue @@ -109,13 +109,13 @@ const onClick = (event: MouseEvent) => { } .danger { - --border-color: var(--color-danger-tint-1); - --background-color: var(--color-danger-tint-2); + --border-color: var(--color--danger--tint-3); + --background-color: var(--color--danger--tint-4); } .success { - --border-color: var(--color-success-tint-1); - --background-color: var(--color-success-tint-2); + --border-color: var(--color--success--tint-3); + --background-color: var(--color--success--tint-4); } .info { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts index 1bc82a37309..95f7076cd31 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts @@ -32,7 +32,7 @@ export default { }, }, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.stories.ts index 7fa0f1fe23f..8065e0ed2d0 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.stories.ts @@ -89,7 +89,7 @@ const ScrollableTemplate: StoryFn = (args) => ({

Menu Items

Menu Item {{ i }}: Some description text that explains what this item does diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.vue b/packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.vue index fcd1a711003..06780051021 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.vue @@ -111,7 +111,7 @@ function handleOpenAutoFocus(e: Event) { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts index 516c903229e..a7231861ced 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts @@ -13,7 +13,7 @@ export default { }, }, parameters: { - backgrounds: { default: '--color-background-xlight' }, + backgrounds: { default: '--color--background--light-3' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue index 65cc09194f5..ab287f36252 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue @@ -68,7 +68,7 @@ const onClick = ( line-height: 1; vertical-align: middle; font-size: 0; - background-color: var(--color-foreground-base); + background-color: var(--color--foreground); padding: var(--spacing-5xs); border-radius: var(--border-radius-base); } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts index d596fd26c63..c614576653b 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts @@ -40,7 +40,7 @@ const Template: StoryFn = (args) => ({ N8nScrollArea, }, template: ` -
+

Scrollable Content

@@ -98,7 +98,7 @@ const HorizontalScrollTemplate: StoryFn = (args) => ({ N8nScrollArea, }, template: ` -
+
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. @@ -147,11 +147,11 @@ const InPopoverTemplate: StoryFn = (args) => ({ N8nScrollArea, }, template: ` -
+

Long Menu Items

-
+
Menu item {{ i }}: Some descriptive text that might be quite long
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.vue b/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.vue index 4231be836ce..2cfae1f8249 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.vue @@ -219,7 +219,7 @@ defineExpose({ pointer-events: none; &:hover { - background: var(--color-foreground-light); + background: var(--color--foreground--tint-1); } &[data-orientation='vertical'] { @@ -234,35 +234,35 @@ defineExpose({ .thumb { flex: 1; - background: var(--color-foreground-base); + background: var(--color--foreground); border-radius: 4px; position: relative; pointer-events: auto; &:hover { - background: var(--color-foreground-dark); + background: var(--color--foreground--shade-1); } &:active { - background: var(--color-foreground-xdark); + background: var(--color--foreground--shade-2); } } // Style the scrollbar when type is 'always' to be more subtle .scrollAreaRoot[data-type='always'] { .scrollbar { - background: var(--color-foreground-xlight); + background: var(--color--foreground--tint-2); &:hover { - background: var(--color-foreground-light); + background: var(--color--foreground--tint-1); } } .thumb { - background: var(--color-foreground-light); + background: var(--color--foreground--tint-1); &:hover { - background: var(--color-foreground-base); + background: var(--color--foreground); } } } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts index 9b69ccb897f..cdb79a5d27f 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts @@ -37,7 +37,7 @@ export default { }, }, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue b/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue index 9c32eec3e4b..a39009a6c4c 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue @@ -179,10 +179,10 @@ defineExpose({ display: flex; align-items: center; padding: 0 var(--spacing-3xs); - background-color: var(--color-background-light); + background-color: var(--color--background--light-2); border-bottom-left-radius: var(--input-border-radius, var(--border-radius-base)); border-top-left-radius: var(--input-border-radius, var(--border-radius-base)); - color: var(--color-text-base); + color: var(--color--text); white-space: nowrap; } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts index 3bd9028de13..369540474e2 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts @@ -7,7 +7,7 @@ export default { component: N8nSelectableList, argTypes: {}, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue b/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue index f0afe9ba335..38016dd2430 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue @@ -141,7 +141,7 @@ function itemComparator(a: Item, b: Item) { } .slotRemoveIcon { - color: var(--color-text-light); + color: var(--color--text--tint-1); height: 10px; width: 10px; margin-top: 3px; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts index 686849fc3f0..c17eaddea70 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts @@ -21,7 +21,7 @@ export default { }, }, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; @@ -98,19 +98,19 @@ const AllSizesTemplate: StoryFn = () => ({
- Mini + Mini
- Small + Small
- Medium + Medium
- Large + Large
`, @@ -126,7 +126,7 @@ const InteractiveTemplate: StoryFn = () => ({ template: `
-

Interactive Demo

+

Interactive Demo

({ @send="handleSend" @stop="handleStop" /> - + {{ streaming ? 'Click to stop' : 'Click to send' }}
-
-
-

{{ response }}

+
+

{{ response }}

`, diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue b/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue index d1dee02cdde..5a393832dc0 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue @@ -41,10 +41,10 @@ withDefaults(defineProps(), { position: absolute; width: 48px; height: 48px; - border: 4px solid var(--color-foreground-xlight); + border: 4px solid var(--color--foreground--tint-2); border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: var(--color-primary) transparent transparent transparent; + border-color: var(--color--primary) transparent transparent transparent; } .lds-ring div:nth-child(1) { animation-delay: -0.45s; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.vue b/packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.vue index d3cc28af629..49f3aefbfd4 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.vue @@ -157,8 +157,8 @@ const handleIgnoreClick = (actionId: string) => { } .activeTrigger { - --tag-text-color: var(--color-primary); - --tag-border-color: var(--color-primary); + --tag-text-color: var(--color--primary); + --tag-border-color: var(--color--primary); } .popoverContent { @@ -189,12 +189,12 @@ const handleIgnoreClick = (actionId: string) => { cursor: pointer; .actionHeader { - color: var(--color-primary); + color: var(--color--primary); } &:has(a:hover) { .actionHeader { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } } } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts index 0882c0260c0..2525c722cae 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts @@ -9,7 +9,7 @@ export default { component: N8nTabs, argTypes: {}, parameters: { - backgrounds: { default: '--color-background-xlight' }, + backgrounds: { default: '--color--background--light-3' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue index 0d1964a9c18..9f293d2889c 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue @@ -175,7 +175,7 @@ const scrollRight = () => scroll(50); } .tabs { - color: var(--color-text-base); + color: var(--color--text); font-weight: var(--font-weight-medium); display: flex; align-items: center; @@ -208,9 +208,9 @@ const scrollRight = () => scroll(50); cursor: pointer; white-space: nowrap; - color: var(--color-text-base); + color: var(--color--text); &:hover { - color: var(--color-primary); + color: var(--color--primary); } span + span { @@ -233,9 +233,9 @@ const scrollRight = () => scroll(50); } .activeTab { - color: var(--color-primary); + color: var(--color--primary); padding-bottom: var(--spacing-2xs); - border-bottom: var(--color-primary) var(--active-tab-border-width) solid; + border-bottom: var(--color--primary) var(--active-tab-border-width) solid; .modern & { padding-bottom: var(--spacing-xs); @@ -248,10 +248,10 @@ const scrollRight = () => scroll(50); .link { cursor: pointer; - color: var(--color-text-base); + color: var(--color--text); &:hover { - color: var(--color-primary); + color: var(--color--primary); } } @@ -270,16 +270,16 @@ const scrollRight = () => scroll(50); } .dangerTab { - color: var(--color-danger); + color: var(--color--danger); &:hover { - color: var(--color-danger); + color: var(--color--danger); } } .button { position: absolute; - background-color: var(--color-tabs-arrow-buttons, var(--color-background-base)); + background-color: var(--color-tabs-arrow-buttons, var(--color--background)); z-index: 1; height: 24px; width: 10px; @@ -305,7 +305,7 @@ const scrollRight = () => scroll(50); display: block; height: 0.3em; width: 0.3em; - background-color: var(--color-primary); + background-color: var(--color--primary); border-radius: 50%; } } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue b/packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue index 2041076ccda..9442a6e40eb 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue @@ -86,47 +86,47 @@ const classes = computed(() => { } .primary { - color: var(--color-primary); + color: var(--color--primary); } .secondary { - color: var(--color-secondary); + color: var(--color--secondary); } .text-dark { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } .text-base { - color: var(--color-text-base); + color: var(--color--text); } .text-light { - color: var(--color-text-light); + color: var(--color--text--tint-1); } .text-xlight { - color: var(--color-text-xlight); + color: var(--color--text--tint-3); } .danger { - color: var(--color-text-danger); + color: var(--color--text--danger); } .success { - color: var(--color-success); + color: var(--color--success); } .warning { - color: var(--color-warning); + color: var(--color--warning); } .foreground-dark { - color: var(--color-foreground-dark); + color: var(--color--foreground--shade-1); } .foreground-xdark { - color: var(--color-foreground-xdark); + color: var(--color--foreground--shade-2); } .align-left { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts index aa4a8342efd..acf8987d0d5 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts @@ -32,7 +32,7 @@ export default { }, }, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts index be3ff2fd003..0b89cfbd3a5 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts @@ -6,7 +6,7 @@ export default { title: 'Modules/UserInfo', component: N8nUserInfo, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue index cc7382d1198..1344ab4e0de 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue @@ -71,7 +71,7 @@ const classes = computed( display: inline-flex; align-items: center; justify-content: center; - color: var(--color-text-light); + color: var(--color--text--tint-1); } .infoContainer { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts index ad19b2b73e4..16bb1b5c8ee 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts @@ -8,7 +8,7 @@ export default { component: N8nUserSelect, argTypes: {}, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue b/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue index 19d07f685f3..0d751305cd8 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue @@ -123,8 +123,8 @@ const menuHeight = computed(() => { align-items: center; width: 28px; height: 28px; - color: var(--color-text-base); - background-color: var(--color-background-xlight); + color: var(--color--text); + background-color: var(--color--background--light-3); font-weight: var(--font-weight-bold); font-size: var(--font-size-3xs); z-index: 999; @@ -142,7 +142,7 @@ const menuHeight = computed(() => { .groupName { font-size: var(--font-size-3xs); - color: var(--color-text-light); + color: var(--color--text--tint-1); text-transform: uppercase; font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-4xs); @@ -182,6 +182,6 @@ ul.user-stack-list { border-radius: var(--border-radius-base); padding: var(--spacing-5xs) 0; box-shadow: 0 2px 8px 0 #441c171a; - background-color: var(--color-background-xlight); + background-color: var(--color--background--light-3); } diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts index 3dac9b5e2ae..84bf88523e7 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts @@ -10,7 +10,7 @@ export default { component: N8nUsersList, argTypes: {}, parameters: { - backgrounds: { default: '--color-background-light' }, + backgrounds: { default: '--color--background--light-2' }, }, }; diff --git a/packages/frontend/@n8n/design-system/src/components/TableBase/TableBase.vue b/packages/frontend/@n8n/design-system/src/components/TableBase/TableBase.vue index 37c4ade537b..f24e6509eec 100644 --- a/packages/frontend/@n8n/design-system/src/components/TableBase/TableBase.vue +++ b/packages/frontend/@n8n/design-system/src/components/TableBase/TableBase.vue @@ -19,7 +19,7 @@ .n8nTable { height: 100%; border-radius: 8px; - border: 1px solid var(--color-foreground-base); + border: 1px solid var(--color--foreground); overflow: hidden; font-size: var(--font-size-s); @@ -42,15 +42,15 @@ } th { - background-color: var(--color-background-light-base); - color: var(--color-text-base); + background-color: var(--color--background--light-1); + color: var(--color--text); font-weight: 600; font-size: 12px; padding: 0 8px; text-transform: capitalize; height: 36px; white-space: nowrap; - border-bottom: 1px solid var(--color-foreground-base); + border-bottom: 1px solid var(--color--foreground); &:first-child { padding-left: 16px; @@ -62,7 +62,7 @@ tbody > tr { &:hover { - background-color: var(--color-background-light); + background-color: var(--color--background--light-2); } &:last-child > td { @@ -71,15 +71,15 @@ } tr { - background-color: var(--color-background-xlight); + background-color: var(--color--background--light-3); } td { - color: var(--color-text-dark); + color: var(--color--text--shade-1); padding: 0 8px; height: 48px; - border-bottom: 1px solid var(--color-foreground-base); + border-bottom: 1px solid var(--color--foreground); &:first-child { padding-left: 16px; diff --git a/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue b/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue index 203d8918994..062775b9179 100644 --- a/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue +++ b/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue @@ -234,7 +234,7 @@ const handleDragEnd = () => { } .grip { - color: var(--color-text-light); + color: var(--color--text--tint-1); cursor: move; &.hidden { @@ -249,7 +249,7 @@ const handleDragEnd = () => { .column { display: flex; gap: 12px; - color: var(--color-text-dark); + color: var(--color--text--shade-1); padding: 6px 0; align-items: center; @@ -295,10 +295,10 @@ const handleDragEnd = () => { } .hidden { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); label { - color: var(--color-text-light); + color: var(--color--text--tint-1); } } diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss index 7d439fddfd9..fc70629b6a3 100644 --- a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss +++ b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss @@ -2,30 +2,30 @@ @mixin theme { // Primary tokens - --color-danger: var(--p--color--alt-h-310); + --color--danger: var(--p--color--alt-h-310); // Text - --color-text-dark: var(--p--color--gray-040); - --color-text-base: var(--p--color--gray-200); - --color-text-light: var(--p--color--gray-320); - --color-text-lighter: var(--p--color--gray-740); - --color-text-xlight: var(--p--color--gray-820); - --color-text-danger: var(--p--color--alt-c-330); + --color--text--shade-1: var(--p--color--gray-040); + --color--text: var(--p--color--gray-200); + --color--text--tint-1: var(--p--color--gray-320); + --color--text--tint-2: var(--p--color--gray-740); + --color--text--tint-3: var(--p--color--gray-820); + --color--text--danger: var(--p--color--alt-c-330); // Foreground - --color-foreground-xdark: var(--p--color--gray-200); - --color-foreground-dark: var(--p--color--gray-420); - --color-foreground-base: var(--p--color--gray-670); - --color-foreground-light: var(--p--color--gray-740); - --color-foreground-xlight: var(--p--color--gray-820); + --color--foreground--shade-2: var(--p--color--gray-200); + --color--foreground--shade-1: var(--p--color--gray-420); + --color--foreground: var(--p--color--gray-670); + --color--foreground--tint-1: var(--p--color--gray-740); + --color--foreground--tint-2: var(--p--color--gray-820); // Background - --color-background-dark: var(--p--color--gray-070); - --color-background-medium: var(--p--color--gray-540); - --color-background-base: var(--p--color--gray-670); - --color-background-light-base: var(--p--color--gray-780); - --color-background-light: var(--p--color--gray-820); - --color-background-xlight: var(--p--color--gray-740); + --color--background--shade-2: var(--p--color--gray-070); + --color--background--shade-1: var(--p--color--gray-540); + --color--background: var(--p--color--gray-670); + --color--background--light-1: var(--p--color--gray-780); + --color--background--light-2: var(--p--color--gray-820); + --color--background--light-3: var(--p--color--gray-740); --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1); --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2); @@ -132,7 +132,7 @@ --color-valid-resolvable-background: var(--p--color--alt-a-600-a-025); --color-invalid-resolvable-foreground: var(--p--color--alt-c-230); --color-invalid-resolvable-background: var(--p--color--alt-c-480-a-020); - --color-pending-resolvable-foreground: var(--color-text-base); + --color-pending-resolvable-foreground: var(--color--text); --color-pending-resolvable-background: var(--p--color--gray-70-a-010); --color-expression-editor-background: var(--p--color--gray-800); --color-expression-editor-modal-background: var(--p--color--gray-800); @@ -158,15 +158,15 @@ --color-code-tags-invalid: #f97583; --color-code-tags-comment: #6a737d; --color-json-default: var(--p--color--secondary-270); - --color-json-null: var(--color-danger); + --color-json-null: var(--color--danger); --color-json-boolean: var(--p--color--alt-a-600); --color-json-number: var(--p--color--alt-a-600); --color-json-string: var(--p--color--secondary-270); - --color-json-key: var(--color-text-dark); + --color-json-key: var(--color--text--shade-1); --color-json-brackets: var(--p--color--gray-670); --color-json-brackets-hover: var(--p--color--alt-e-430); --color-json-line: var(--p--color--gray-200); - --color-json-highlight: var(--color-background-base); + --color-json-highlight: var(--color--background); --color-code-background: var(--p--color--gray-820); --color-code-background-readonly: var(--p--color--gray-740); --color-code-lineHighlight: var(--p--color--gray-320-a-010); @@ -187,7 +187,7 @@ --tag-background-hover-color: var(--p--color--gray-540); --tag-border-color: var(--p--color--gray-710); --tag-border-hover-color: var(--p--color--gray-670); - --tag-text-color: var(--color-text-dark); + --tag-text-color: var(--color--text--shade-1); // Variables --color-variables-usage-font: var(--p--color--alt-a-300); @@ -201,14 +201,14 @@ // Button secondary --color-button-secondary-font: var(--p--color--gray-070); - --color-button-secondary-border: var(--color-foreground-base); - --color-button-secondary-background: var(--color-background-light); + --color-button-secondary-border: var(--color--foreground); + --color-button-secondary-background: var(--color--background--light-2); --color-button-secondary-hover-active-focus-font: var(--p--color--primary-220); - --color-button-secondary-hover-background: var(--color-background-light); + --color-button-secondary-hover-background: var(--color--background--light-2); --color-button-secondary-active-focus-background: var(--p--color--primary-320-a-010); --color-button-secondary-focus-outline: var(--p--color--primary-320-a-035); --color-button-secondary-disabled-font: var(--p--color--white-a-030); - --color-button-secondary-disabled-border: var(--color-foreground-base); + --color-button-secondary-disabled-border: var(--color--foreground); // Button highlight --color-button-highlight-font: var(--p--color--gray-320); @@ -244,17 +244,17 @@ --color-table-row-background: var(--p--color--gray-820); --color-table-row-even-background: var(--p--color--gray-800); --color-table-row-hover-background: var(--p--color--gray-740); - --color-table-row-highlight-background: var(--color-warning-tint-1); + --color-table-row-highlight-background: var(--color--warning--tint-1); // Notification --color-notification-background: var(--p--color--gray-740); // Execution - --execution-card-background: var(--color-foreground-light); - --execution-card-background-hover: var(--color-foreground-base); - --execution-selector-background: var(--color-background-dark); - --execution-selector-text: var(--color-text-xlight); - --execution-select-all-text: var(--color-text-base); + --execution-card-background: var(--color--foreground--tint-1); + --execution-card-background-hover: var(--color--foreground); + --execution-selector-background: var(--color--background--shade-2); + --execution-selector-text: var(--color--text--tint-3); + --execution-select-all-text: var(--color--text); --execution-card-text-waiting: var(--p--color--secondary-370); // NDV @@ -274,17 +274,17 @@ --color-callout-info-border: var(--p--color--gray-670); --color-callout-info-background: var(--p--color--gray-740); --color-callout-info-font: var(--p--color--white); - --color-callout-success-border: var(--color-success); + --color-callout-success-border: var(--color--success); --color-callout-success-background: var(--p--color--alt-a-800); --color-callout-success-font: var(--p--color--white); - --color-callout-warning-border: var(--color-warning); + --color-callout-warning-border: var(--color--warning); --color-callout-warning-background: var(--p--color--alt-b-780); --color-callout-warning-font: var(--p--color--white); - --color-callout-danger-border: var(--color-danger); + --color-callout-danger-border: var(--color--danger); --color-callout-danger-background: var(--p--color--alt-c-730); --color-callout-danger-font: var(--p--color--white); - --color-callout-danger-icon: var(--color-danger); - --color-callout-secondary-border: var(--color-secondary); + --color-callout-danger-icon: var(--color--danger); + --color-callout-secondary-border: var(--color--secondary); --color-callout-secondary-background: var(--p--color--secondary-470-a-025); --color-callout-secondary-font: var(--p--color--white); @@ -306,18 +306,18 @@ --color-switch-toggle: var(--p--color--gray-040); // Action Dropdown - --color-action-dropdown-item-active-background: var(--color-background-xlight); + --color-action-dropdown-item-active-background: var(--color--background--light-3); // Input Triple --color-background-input-triple: var(--p--color--gray-800); // Node error - --color-node-error-output-text-color: var(--color-danger); + --color-node-error-output-text-color: var(--color--danger); // MFA Recovery codes - --color-mfa-recovery-code-background: var(--color-background-xlight); - --color-mfa-recovery-code-color: var(--color-text-dark); - --color-mfa-lose-access-text-color: var(--color-danger); + --color-mfa-recovery-code-background: var(--color--background--light-3); + --color-mfa-recovery-code-color: var(--color--text--shade-1); + --color-mfa-lose-access-text-color: var(--color--danger); // Text highlight --color-text-highlight-background: var(--p--color--alt-d-680); @@ -335,7 +335,7 @@ var(--node-type-supplemental-label-color-s), var(--node-type-supplemental-label-color-l) ); - --node-type-supplemental-icon: var(--color-foreground-dark); + --node-type-supplemental-icon: var(--color--foreground--shade-1); --node-type-supplemental-color: hsl( var(--node-type-supplemental-color-h), var(--node-type-supplemental-color-s), @@ -346,7 +346,7 @@ var(--node-type-supplemental-color-s), var(--node-type-background-l) ); - --node-type-supplemental-connector-color: var(--color-foreground-dark); + --node-type-supplemental-connector-color: var(--color--foreground--shade-1); --node-type-ai_chain-color-h: var(--node-type-supplemental-color-h); --node-type-ai_chain-color-s: var(--node-type-supplemental-color-s); --node-type-ai_chain-color-l: var(--node-type-supplemental-color-l); @@ -505,20 +505,20 @@ // Various --color-info-tint-1: var(--p--color--gray-420); --color-info-tint-2: var(--p--color--gray-740); - --border-color-base: var(--color-foreground-base); - --border-color-light: var(--color-foreground-light); - --border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); + --border-color-base: var(--color--foreground); + --border-color-light: var(--color--foreground--tint-1); + --border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground); --node-type-supplemental-label-color-l: 100%; --node-type-supplemental-label-color: hsl( var(--node-type-supplemental-label-color-h), var(--node-type-supplemental-label-color-s), var(--node-type-supplemental-label-color-l) ); - --color-configurable-node-name: var(--color-text-dark); + --color-configurable-node-name: var(--color--text--shade-1); --color-secondary-link: var(--p--color--secondary-270); --color-secondary-link-hover: var(--p--color--secondary-370); // Params - --color-icon-base: var(--color-text-light); + --color-icon-base: var(--color--text--tint-1); --color-icon-hover: var(--p--color--primary-320); --color-menu-background: var(--p--color--gray-740); diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.scss index 7a939cd7db7..1ca167b0a9e 100644 --- a/packages/frontend/@n8n/design-system/src/css/_tokens.scss +++ b/packages/frontend/@n8n/design-system/src/css/_tokens.scss @@ -1,77 +1,77 @@ @use 'sass:math'; @mixin theme { - --color-primary-h: var(--p--color--primary-h); - --color-primary-s: var(--p--color--primary-s); - --color-primary-l: var(--p--color--primary-l); + --color--primary-h: var(--p--color--primary-h); + --color--primary-s: var(--p--color--primary-s); + --color--primary-l: var(--p--color--primary-l); // Primary tokens // Primary - --color-primary-shade-1: var(--p--color--primary-420); - --color-primary: var(--p--color--primary-320); - --color-primary-tint-1: var(--p--color--primary-120); - --color-primary-tint-2: var(--p--color--primary-070); - --color-primary-tint-3: var(--p--color--primary-030); + --color--primary--shade-1: var(--p--color--primary-420); + --color--primary: var(--p--color--primary-320); + --color--primary--tint-1: var(--p--color--primary-120); + --color--primary--tint-2: var(--p--color--primary-070); + --color--primary--tint-3: var(--p--color--primary-030); // Secondary - --color-secondary-shade-1: var(--p--color--secondary-570); - --color-secondary: var(--p--color--secondary-470); - --color-secondary-tint-1: var(--p--color--secondary-170); - --color-secondary-tint-3: var(--p--color--secondary-070); + --color--secondary--shade-1: var(--p--color--secondary-570); + --color--secondary: var(--p--color--secondary-470); + --color--secondary--tint-1: var(--p--color--secondary-170); + --color--secondary--tint-2: var(--p--color--secondary-070); // Success - --color-success-shade-1: var(--p--color--alt-a-700); - --color-success: var(--p--color--alt-a-600); - --color-success-light: var(--p--color--alt-a-300); - --color-success-light-2: var(--p--color--alt-a-200); - --color-success-tint-1: var(--p--color--alt-a-100); - --color-success-tint-2: var(--p--color--alt-a-050); + --color--success--shade-1: var(--p--color--alt-a-700); + --color--success: var(--p--color--alt-a-600); + --color--success--tint-1: var(--p--color--alt-a-300); + --color--success--tint-2: var(--p--color--alt-a-200); + --color--success--tint-3: var(--p--color--alt-a-100); + --color--success--tint-4: var(--p--color--alt-a-050); // Warning - --color-warning-shade-1: var(--p--color--alt-b-530); - --color-warning: var(--p--color--alt-b-430); - --color-warning-tint-1: var(--p--color--alt-b-180); - --color-warning-tint-2: var(--p--color--alt-b-030); + --color--warning--shade-1: var(--p--color--alt-b-530); + --color--warning: var(--p--color--alt-b-430); + --color--warning--tint-1: var(--p--color--alt-b-180); + --color--warning--tint-2: var(--p--color--alt-b-030); // Danger - --color-danger-shade-1: var(--p--color--alt-c-580); - --color-danger: var(--p--color--alt-c-480); - --color-danger-light: var(--p--color--alt-c-330); - --color-danger-light-2: var(--p--color--alt-c-230); - --color-danger-tint-1: var(--p--color--alt-c-080); - --color-danger-tint-2: var(--p--color--alt-c-030); + --color--danger--shade-1: var(--p--color--alt-c-580); + --color--danger: var(--p--color--alt-c-480); + --color--danger--tint-1: var(--p--color--alt-c-330); + --color--danger--tint-2: var(--p--color--alt-c-230); + --color--danger--tint-3: var(--p--color--alt-c-080); + --color--danger--tint-4: var(--p--color--alt-c-030); // Text - --color-text-dark: var(--p--color--gray-740); - --color-text-base: var(--p--color--gray-540); - --color-text-light: var(--p--color--gray-420); - --color-text-lighter: var(--p--color--gray-120); - --color-text-xlight: var(--p--color--white); - --color-text-danger: var(--p--color--alt-c-480); + --color--text--shade-1: var(--p--color--gray-740); + --color--text: var(--p--color--gray-540); + --color--text--tint-1: var(--p--color--gray-420); + --color--text--tint-2: var(--p--color--gray-120); + --color--text--tint-3: var(--p--color--white); + --color--text--danger: var(--p--color--alt-c-480); // Foreground - --color-foreground-xdark: var(--p--color--gray-490); - --color-foreground-dark: var(--p--color--gray-200); - --color-foreground-base: var(--p--color--gray-120); - --color-foreground-light: var(--p--color--gray-070); - --color-foreground-xlight: var(--p--color--white); + --color--foreground--shade-2: var(--p--color--gray-490); + --color--foreground--shade-1: var(--p--color--gray-200); + --color--foreground: var(--p--color--gray-120); + --color--foreground--tint-1: var(--p--color--gray-070); + --color--foreground--tint-2: var(--p--color--white); // Background - --color-background-dark: var(--p--color--gray-820); - --color-background-medium: var(--p--color--gray-120); - --color-background-base: var(--p--color--gray-040); - --color-background-light-base: var(--p--color--gray-025); - --color-background-light: var(--p--color--gray-010); - --color-background-xlight: var(--p--color--white); + --color--background--shade-2: var(--p--color--gray-820); + --color--background--shade-1: var(--p--color--gray-120); + --color--background: var(--p--color--gray-040); + --color--background--light-1: var(--p--color--gray-025); + --color--background--light-2: var(--p--color--gray-010); + --color--background--light-3: var(--p--color--white); // Secondary tokens // LangChain - --color-lm-chat-messages-background: var(--color-background-base); + --color-lm-chat-messages-background: var(--color--background); --color-lm-chat-bot-background: var(--p--color--white); --color-lm-chat-user-background: var(--p--color--alt-a-600); - --color-lm-chat-user-color: var(--color-text-xlight); + --color-lm-chat-user-color: var(--color--text--tint-3); // Canvas --color-canvas-background: var(--p--color--gray-010); @@ -90,19 +90,19 @@ ); // Nodes - --color-node-background: var(--color-background-xlight); - --color-node-executing-background: var(--color-primary-tint-3); - --color-node-executing-other-background: var(--color-primary-tint-3); - --color-node-pinned-border: var(--color-secondary); - --color-node-running-border: var(--color-primary); + --color-node-background: var(--color--background--light-3); + --color-node-executing-background: var(--color--primary--tint-3); + --color-node-executing-other-background: var(--color--primary--tint-3); + --color-node-pinned-border: var(--color--secondary); + --color-node-running-border: var(--color--primary); --node-type-main-color: var(--p--color--gray-490); // Sticky --color-sticky-background: var(--p--color--alt-d-080); --color-sticky-border: var(--p--color--alt-d-230); --color-sticky-font: var(--p--color--gray-740); - --color-sticky-code-font: var(--color-secondary); - --color-sticky-code-background: var(--color-background-base); + --color-sticky-code-font: var(--color--secondary); + --color-sticky-code-background: var(--color--background); --color-sticky-background-1: var(--color-sticky-background); --color-sticky-border-1: var(--color-sticky-border); @@ -121,16 +121,16 @@ // AI Assistant --color-askAssistant-button-background-gradient: linear-gradient( - var(--color-background-xlight), - var(--color-background-xlight) + var(--color--background--light-3), + var(--color--background--light-3) ); --color-askAssistant-button-background-gradient-hover: linear-gradient( - var(--color-background-xlight), - var(--color-background-xlight) + var(--color--background--light-3), + var(--color--background--light-3) ); --color-askAssistant-button-background-gradient-active: linear-gradient( - var(--color-background-xlight), - var(--color-background-xlight) + var(--color--background--light-3), + var(--color--background--light-3) ); --color-assistant-highlight-1: #5b60e8; @@ -183,15 +183,15 @@ --color-valid-resolvable-background: var(--p--color--alt-a-100); --color-invalid-resolvable-foreground: var(--p--color--alt-c-480); --color-invalid-resolvable-background: var(--p--color--alt-c-030); - --color-pending-resolvable-foreground: var(--color-text-base); + --color-pending-resolvable-foreground: var(--color--text); --color-pending-resolvable-background: var(--p--color--gray-040); --color-expression-editor-background: var(--p--color--white); - --color-expression-editor-modal-background: var(--color-background-base); + --color-expression-editor-modal-background: var(--color--background); --color-expression-syntax-example: var(--p--color--gray-040); - --color-autocomplete-item-selected: var(--color-secondary); - --color-autocomplete-section-header-border: var(--color-foreground-light); - --color-infobox-background: var(--color-background-light-base); - --color-infobox-examples-border-color: var(--color-foreground-light); + --color-autocomplete-item-selected: var(--color--secondary); + --color-autocomplete-section-header-border: var(--color--foreground--tint-1); + --color-infobox-background: var(--color--background--light-1); + --color-infobox-examples-border-color: var(--color--foreground--tint-1); // Code --color-code-tags-string: #032f62; @@ -217,7 +217,7 @@ --color-json-brackets: var(--p--color--gray-670); --color-json-brackets-hover: var(--p--color--alt-e-430); --color-json-line: var(--p--color--gray-200); - --color-json-highlight: var(--color-background-base); + --color-json-highlight: var(--color--background); --color-code-background: var(--p--color--white); --color-code-background-readonly: var(--p--color--gray-040); --color-code-lineHighlight: var(--p--color--gray-320-a-010); @@ -241,14 +241,14 @@ --tag-border-color: var(--p--color--gray-070); --tag-border-hover-color: var(--p--color--gray-120); --tag-border-radius: var(--border-radius-base); - --tag-text-color: var(--color-text-base); + --tag-text-color: var(--color--text); --tag-font-size: var(--font-size-2xs); --tag-font-weight: var(--font-weight-regular); --tag-line-height: 0; // Variables - --color-variables-usage-font: var(--color-success); - --color-variables-usage-syntax-bg: var(--color-success-tint-2); + --color-variables-usage-font: var(--color--success); + --color-variables-usage-syntax-bg: var(--color--success--tint-4); // Button primary --color-button-primary-font: var(--p--color--white); @@ -289,14 +289,14 @@ // Button success, warning, danger --color-button-success-font: var(--p--color--white); --color-button-success-disabled-font: var(--p--color--white-a-075); - --color-button-warning-font: var(--color-text-xlight); + --color-button-warning-font: var(--color--text--tint-3); --color-button-warning-disabled-font: var(--p--color--white-a-075); - --color-button-danger-font: var(--color-text-xlight); - --color-button-danger-border: var(--color-danger); - --color-button-danger-focus-outline: var(--color-danger-tint-1); + --color-button-danger-font: var(--color--text--tint-3); + --color-button-danger-border: var(--color--danger); + --color-button-danger-focus-outline: var(--color--danger--tint-3); --color-button-danger-disabled-font: var(--p--color--white-a-075); - --color-button-danger-disabled-border: var(--color-danger-tint-1); - --color-button-danger-disabled-background: var(--color-danger-tint-1); + --color-button-danger-disabled-border: var(--color--danger--tint-3); + --color-button-danger-disabled-background: var(--color--danger--tint-3); // Text button --color-text-button-secondary-font: var(--p--color--gray-670); @@ -308,14 +308,14 @@ --color-button-node-creator-background: var(--p--color--white); // 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-table-row-highlight-background: var(--color-warning-tint-1); + --color-table-header-background: var(--color--background); + --color-table-row-background: var(--color--background--light-3); + --color-table-row-even-background: var(--color--background--light-2); + --color-table-row-hover-background: var(--color--primary--tint-3); + --color-table-row-highlight-background: var(--color--warning--tint-1); // Notification - --color-notification-background: var(--color-background-xlight); + --color-notification-background: var(--color--background--light-3); // Execution --execution-card-border-new: var(--p--color--gray-200); @@ -324,47 +324,47 @@ --execution-card-border-waiting: var(--p--color--secondary-170); --execution-card-border-running: var(--p--color--alt-b-180); --execution-card-border-unknown: var(--p--color--gray-120); - --execution-card-background: var(--color-foreground-xlight); - --execution-card-background-hover: var(--color-foreground-light); - --execution-card-text-waiting: var(--color-secondary); - --execution-selector-background: var(--color-background-dark); - --execution-selector-text: var(--color-text-xlight); - --execution-select-all-text: var(--color-danger); + --execution-card-background: var(--color--foreground--tint-2); + --execution-card-background-hover: var(--color--foreground--tint-1); + --execution-card-text-waiting: var(--color--secondary); + --execution-selector-background: var(--color--background--shade-2); + --execution-selector-text: var(--color--text--tint-3); + --execution-select-all-text: var(--color--danger); // NDV --color-run-data-background: var(--p--color--gray-070); --color-ndvv2-run-data-background: var(--p--color--gray-040); - --color-ndv-droppable-parameter: var(--color-secondary); + --color-ndv-droppable-parameter: var(--color--secondary); --color-ndv-droppable-parameter-background: var(--p--color--secondary-470-a-010); --color-ndv-droppable-parameter-active-background: var(--p--color--alt-a-600-a-015); --color-ndv-back-font: var(--p--color--white); // 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-notice-warning-border: var(--color--warning--tint-1); + --color-notice-warning-background: var(--color--warning--tint-2); + --color-notice-font: var(--color--text); // Callout - --color-callout-info-border: var(--color-foreground-base); - --color-callout-info-background: var(--color-foreground-xlight); - --color-callout-info-font: var(--color-text-base); - --color-callout-info-icon: var(--color-text-light); - --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-callout-info-border: var(--color--foreground); + --color-callout-info-background: var(--color--foreground--tint-2); + --color-callout-info-font: var(--color--text); + --color-callout-info-icon: var(--color--text--tint-1); + --color-callout-success-border: var(--color--success--tint-2); + --color-callout-success-background: var(--color--success--tint-4); + --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-3); + --color-callout-danger-background: var(--color--danger--tint-4); + --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-2); + --color-callout-secondary-font: var(--color--secondary); + --color-callout-secondary-icon: var(--color--secondary); // Dialogs and overlays --color-dialog-background: var(--p--color--white); @@ -373,14 +373,14 @@ --color-block-ui-overlay: var(--p--color--gray-820); // Avatar - --color-avatar-font: var(--color-text-xlight); + --color-avatar-font: var(--color--text--tint-3); // NPS Survey --color-nps-survey-background: var(--p--color--gray-740); --color-nps-survey-font: var(--p--color--white); // Action Dropdown - --color-action-dropdown-item-active-background: var(--color-background-base); + --color-action-dropdown-item-active-background: var(--color--background); // Switch (Activation, boolean) --color-switch-background: var(--p--color--gray-420); @@ -392,15 +392,15 @@ --color-feature-request-font: var(--p--color--white); // Input Triple - --color-background-input-triple: var(--color-background-light); + --color-background-input-triple: var(--color--background--light-2); // Node error - --color-node-error-output-text-color: var(--color-danger); + --color-node-error-output-text-color: var(--color--danger); // MFA Recovery codes - --color-mfa-recovery-code-background: var(--color-background-base); + --color-mfa-recovery-code-background: var(--color--background); --color-mfa-recovery-code-color: var(--p--color--gray-490); - --color-mfa-lose-access-text-color: var(--color-danger); + --color-mfa-lose-access-text-color: var(--color--danger); // Text highlight --color-text-highlight-background: var(--p--color--alt-d-230); @@ -421,7 +421,7 @@ var(--node-type-supplemental-label-color-s), var(--node-type-supplemental-label-color-l) ); - --node-type-supplemental-icon: var(--color-foreground-dark); + --node-type-supplemental-icon: var(--color--foreground--shade-1); --node-type-supplemental-color: hsl( var(--node-type-supplemental-color-h), var(--node-type-supplemental-color-s), @@ -432,7 +432,7 @@ var(--node-type-supplemental-color-s), var(--node-type-background-l) ); - --node-type-supplemental-connector-color: var(--color-foreground-dark); + --node-type-supplemental-connector-color: var(--color--foreground--shade-1); --node-type-ai_chain-color-h: var(--node-type-supplemental-color-h); --node-type-ai_chain-color-s: var(--node-type-supplemental-color-s); --node-type-ai_chain-color-l: var(--node-type-supplemental-color-l); @@ -597,9 +597,9 @@ --color-grey: var(--p--color--gray-200); --color-light-grey: var(--p--color--gray-120); --color-neutral: var(--p--color--gray-490); - --color-configurable-node-name: var(--color-text-dark); - --color-secondary-link: var(--color-secondary); - --color-secondary-link-hover: var(--color-secondary-shade-1); + --color-configurable-node-name: var(--color--text--shade-1); + --color-secondary-link: var(--color--secondary); + --color-secondary-link-hover: var(--color--secondary--shade-1); // Menu --color-menu-background: var(--p--color--white); @@ -649,12 +649,12 @@ --border-radius-large: 8px; --border-radius-base: 4px; --border-radius-small: 2px; - --border-color-base: var(--color-foreground-base); - --border-color-light: var(--color-foreground-light); + --border-color-base: var(--color--foreground); + --border-color-light: var(--color--foreground--tint-1); --border-style-base: solid; --border-width-base: 1px; - --border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); + --border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground); --font-size-4xs: 0.5rem; --font-size-3xs: 0.625rem; @@ -693,12 +693,12 @@ --spacing-5xl: 16rem; // Params - --color-icon-base: var(--color-text-light); + --color-icon-base: var(--color--text--tint-1); --color-icon-hover: var(--p--color--primary-320); /* Ag Grid */ --grid-row-selected-background: var(--p--color--secondary-070); - --grid-cell-editing-border: 2px solid var(--color-secondary); + --grid-cell-editing-border: 2px solid var(--color--secondary); } :root { diff --git a/packages/frontend/@n8n/design-system/src/css/checkbox.scss b/packages/frontend/@n8n/design-system/src/css/checkbox.scss index 3c1a1ddb4e2..7ab83a74720 100644 --- a/packages/frontend/@n8n/design-system/src/css/checkbox.scss +++ b/packages/frontend/@n8n/design-system/src/css/checkbox.scss @@ -22,7 +22,7 @@ height: var.$checkbox-bordered-height; &.is-checked { - border-color: var(--color-primary); + border-color: var(--color--primary); } &.is-disabled { @@ -274,7 +274,7 @@ ); &:hover { - color: var(--color-primary); + color: var(--color--primary); } & .el-icon { diff --git a/packages/frontend/@n8n/design-system/src/css/color-picker.scss b/packages/frontend/@n8n/design-system/src/css/color-picker.scss index 5c1264fc62e..fbe5aaa7e0a 100644 --- a/packages/frontend/@n8n/design-system/src/css/color-picker.scss +++ b/packages/frontend/@n8n/design-system/src/css/color-picker.scss @@ -26,7 +26,7 @@ } &.selected { - box-shadow: 0 0 3px 2px var(--color-primary); + box-shadow: 0 0 3px 2px var(--color--primary); } > div { diff --git a/packages/frontend/@n8n/design-system/src/css/common/var.scss b/packages/frontend/@n8n/design-system/src/css/common/var.scss index 2f550aa7251..1876358844e 100644 --- a/packages/frontend/@n8n/design-system/src/css/common/var.scss +++ b/packages/frontend/@n8n/design-system/src/css/common/var.scss @@ -18,47 +18,47 @@ $color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); /* Color -------------------------- */ -$color-white: var(--color-foreground-xlight); -$color-black: var(--color-foreground-dark); +$color-white: var(--color--foreground--tint-2); +$color-black: var(--color--foreground--shade-1); -$color-primary-light-1: var(--color-primary); -$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-light-1: var(--color--primary); +$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-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: var(--color--success); +$color-success-light: var(--color--success--tint-1); +$color-success-lighter: var(--color--success--tint-3); -$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: 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-danger-light-1: var(--color-danger); -$color-danger-light: var(--color-danger-tint-1); -$color-danger-lighter: var(--color-danger-tint-2); +$color-danger-light-1: var(--color--danger); +$color-danger-light: var(--color--danger--tint-3); +$color-danger-lighter: var(--color--danger--tint-4); $color-info-light-1: var(-color-info); $color-info-lighter: var(--color-info-tint-2); // Background /// color|1|Background Color|4 -$background-color-base: var(--color-background-base); +$background-color-base: var(--color--background); /* Link -------------------------- */ -$link-color: var(--color-primary); -$link-color-hover: var(--color-primary-shade-1); -$link-color-active: var(--color-primary-shade-1); +$link-color: var(--color--primary); +$link-color-hover: var(--color--primary--shade-1); +$link-color-active: var(--color--primary--shade-1); /* Border -------------------------- */ -$border-color-hover: var(--color-text-lighter); +$border-color-hover: var(--color--text--tint-2); /// borderRadius|1|Radius|0 $border-radius-circle: 100%; @@ -99,7 +99,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: var(--color-text-light); +$font-color-disabled-base: var(--color--text--tint-1); /* z-index -------------------------- */ @@ -109,13 +109,13 @@ $index-popper: 2000; /* Disable base -------------------------- */ -$disabled-fill-base: var(--disabled-fill, var(--color-background-light)); -$disabled-color-base: var(--disabled-color, var(--color-text-base)); +$disabled-fill-base: var(--disabled-fill, var(--color--background--light-2)); +$disabled-color-base: var(--disabled-color, var(--color--text)); $disabled-border-base: var(--disabled-border, var(--border-color-base)); /* Icon -------------------------- */ -$icon-color: var(--color-text-base); +$icon-color: var(--color--text); $icon-color-base: var(--color-info); /* Checkbox @@ -123,32 +123,32 @@ $icon-color-base: var(--color-info); /// fontSize||Font|1 $checkbox-font-size: 14px; /// color||Color|0 -$checkbox-font-color: var(--color-text-base); +$checkbox-font-color: var(--color--text); $checkbox-input-height: 14px; $checkbox-input-width: 14px; /// borderRadius||Border|2 $checkbox-border-radius: var(--border-radius-small); /// color||Color|0 -$checkbox-background-color: var(--color-background-xlight); +$checkbox-background-color: var(--color--background--light-3); $checkbox-input-border: var(--border-base); /// color||Color|0 $checkbox-disabled-border-color: var(--border-color-base); -$checkbox-disabled-input-fill: var(--color-background-base); -$checkbox-disabled-icon-color: var(--color-text-lighter); +$checkbox-disabled-input-fill: var(--color--background); +$checkbox-disabled-icon-color: var(--color--text--tint-2); $checkbox-disabled-checked-input-fill: var(--border-color-light); $checkbox-disabled-checked-input-border-color: var(--border-color-base); -$checkbox-disabled-checked-icon-color: var(--color-text-lighter); +$checkbox-disabled-checked-icon-color: var(--color--text--tint-2); /// color||Color|0 -$checkbox-checked-font-color: var(--color-primary); -$checkbox-checked-input-border-color: var(--color-primary); +$checkbox-checked-font-color: var(--color--primary); +$checkbox-checked-input-border-color: var(--color--primary); /// color||Color|0 -$checkbox-checked-background-color: var(--color-primary); +$checkbox-checked-background-color: var(--color--primary); $checkbox-checked-icon-color: $fill-base; -$checkbox-input-border-color-hover: var(--color-primary); +$checkbox-input-border-color-hover: var(--color--primary); /// height||Other|4 $checkbox-bordered-height: 40px; /// padding||Spacing|3 @@ -173,11 +173,11 @@ $checkbox-bordered-mini-input-width: 12px; $checkbox-bordered-mini-height: 28px; /// color||Color|0 -$checkbox-button-checked-background-color: var(--color-primary); +$checkbox-button-checked-background-color: var(--color--primary); /// color||Color|0 -$checkbox-button-checked-font-color: var(--color-text-xlight); +$checkbox-button-checked-font-color: var(--color--text--tint-3); /// color||Color|0 -$checkbox-button-checked-border-color: var(--color-primary); +$checkbox-button-checked-border-color: var(--color--primary); /* Radio -------------------------- */ @@ -186,18 +186,18 @@ $radio-font-size: $font-size-base; /// fontWeight||Font|1 $radio-font-weight: $font-weight-primary; /// color||Color|0 -$radio-font-color: var(--color-text-dark); +$radio-font-color: var(--color--text--shade-1); $radio-input-height: 14px; $radio-input-width: 14px; /// borderRadius||Border|2 $radio-input-border-radius: $border-radius-circle; /// color||Color|0 -$radio-input-background-color: var(--color-background-xlight); +$radio-input-background-color: var(--color--background--light-3); $radio-input-border: var(--border-base); /// color||Color|0 $radio-input-border-color: var(--border-color-base); /// color||Color|0 -$radio-icon-color: var(--color-text-xlight); +$radio-icon-color: var(--color--text--tint-3); $radio-disabled-input-border-color: $disabled-border-base; $radio-disabled-input-fill: $disabled-fill-base; @@ -205,18 +205,18 @@ $radio-disabled-icon-color: $disabled-fill-base; $radio-disabled-checked-input-border-color: $disabled-border-base; $radio-disabled-checked-input-fill: $disabled-fill-base; -$radio-disabled-checked-icon-color: var(--color-text-lighter); +$radio-disabled-checked-icon-color: var(--color--text--tint-2); /// color||Color|0 -$radio-checked-font-color: var(--color-primary); +$radio-checked-font-color: var(--color--primary); /// color||Color|0 -$radio-checked-input-border-color: var(--color-primary); +$radio-checked-input-border-color: var(--color--primary); /// color||Color|0 -$radio-checked-input-background-color: var(--color-background-xlight); +$radio-checked-input-background-color: var(--color--background--light-3); /// color||Color|0 -$radio-checked-icon-color: var(--color-primary); +$radio-checked-icon-color: var(--color--primary); -$radio-input-border-color-hover: var(--color-primary); +$radio-input-border-color-hover: var(--color--primary); $radio-bordered-height: 40px; $radio-bordered-padding: 12px 20px 0 10px; @@ -236,11 +236,11 @@ $radio-bordered-mini-height: 28px; /// fontSize||Font|1 $radio-button-font-size: $font-size-base; /// color||Color|0 -$radio-button-checked-background-color: var(--color-primary); +$radio-button-checked-background-color: var(--color--primary); /// color||Color|0 -$radio-button-checked-font-color: var(--color-background-xlight); +$radio-button-checked-font-color: var(--color--background--light-3); /// color||Color|0 -$radio-button-checked-border-color: var(--color-primary); +$radio-button-checked-border-color: var(--color--primary); $radio-button-disabled-checked-fill: var(--border-color-light); /* Select @@ -249,23 +249,23 @@ $select-border-color-hover: $border-color-hover; $select-disabled-border: $disabled-border-base; /// fontSize||Font|1 $select-font-size: $font-size-base; -$select-close-hover-color: var(--color-text-light); +$select-close-hover-color: var(--color--text--tint-1); -$select-input-color: var(--color-text-lighter); -$select-multiple-input-color: var(--color-text-base); +$select-input-color: var(--color--text--tint-2); +$select-multiple-input-color: var(--color--text); /// color||Color|0 -$select-input-focus-border-color: var(--color-secondary); +$select-input-focus-border-color: var(--color--secondary); /// fontSize||Font|1 $select-input-font-size: 14px; -$select-option-color: var(--color-text-dark); -$select-option-disabled-color: var(--color-text-lighter); -$select-option-disabled-background: var(--color-background-xlight); +$select-option-color: var(--color--text--shade-1); +$select-option-disabled-color: var(--color--text--tint-2); +$select-option-disabled-background: var(--color--background--light-3); /// height||Other|4 $select-option-height: 34px; $select-option-hover-background: $background-color-base; /// color||Color|0 -$select-option-selected-font-color: var(--color-primary); +$select-option-selected-font-color: var(--color--primary); $select-option-selected-hover: $background-color-base; $select-group-color: var(--color-info); @@ -274,7 +274,7 @@ $select-group-font-size: 12px; $select-dropdown-background: $color-white; $select-dropdown-shadow: $box-shadow-light; -$select-dropdown-empty-color: var(--color-text-light); +$select-dropdown-empty-color: var(--color--text--tint-1); /// height||Other|4 $select-dropdown-max-height: 274px; $select-dropdown-padding: 6px 0; @@ -308,7 +308,7 @@ $alert-icon-large-size: 28px; /* MessageBox -------------------------- */ /// color||Color|0 -$messagebox-title-color: var(--color-text-dark); +$messagebox-title-color: var(--color--text--shade-1); $msgbox-width: 420px; $msgbox-border-radius: 4px; /// fontSize||Font|1 @@ -316,40 +316,40 @@ $messagebox-font-size: $font-size-large; /// fontSize||Font|1 $messagebox-content-font-size: $font-size-base; /// color||Color|0 -$messagebox-content-color: var(--color-text-dark); +$messagebox-content-color: var(--color--text--shade-1); /// fontSize||Font|1 $messagebox-error-font-size: 12px; $msgbox-padding-primary: var(--spacing-s); /// color||Color|0 -$messagebox-success-color: var(--color-success); +$messagebox-success-color: var(--color--success); /// color||Color|0 $messagebox-info-color: var(--color-info); /// color||Color|0 -$messagebox-warning-color: var(--color-warning); +$messagebox-warning-color: var(--color--warning); /// color||Color|0 -$messagebox-danger-color: var(--color-danger); +$messagebox-danger-color: var(--color--danger); /* Message -------------------------- */ $message-shadow: $box-shadow-base; $message-min-width: 380px; -$message-background-color: var(--color-background-base); +$message-background-color: var(--color--background); $message-padding: 16px 16px 16px 20px; /// color||Color|0 -$message-close-icon-color: var(--color-text-lighter); +$message-close-icon-color: var(--color--text--tint-2); /// height||Other|4 $message-close-size: 16px; /// color||Color|0 -$message-close-hover-color: var(--color-text-light); +$message-close-hover-color: var(--color--text--tint-1); /// color||Color|0 -$message-success-font-color: var(--color-success); +$message-success-font-color: var(--color--success); /// color||Color|0 $message-info-font-color: var(--color-info); /// color||Color|0 -$message-warning-font-color: var(--color-warning); +$message-warning-font-color: var(--color--warning); /// color||Color|0 -$message-danger-font-color: var(--color-danger); +$message-danger-font-color: var(--color--danger); /* Notification -------------------------- */ @@ -367,30 +367,30 @@ $notification-group-margin-right: 8px; /// fontSize||Font|1 $notification-content-font-size: $font-size-base; /// color||Color|0 -$notification-content-color: var(--color-text-dark); +$notification-content-color: var(--color--text--shade-1); /// fontSize||Font|1 $notification-title-font-size: 16px; /// color||Color|0 -$notification-title-color: var(--color-text-dark); +$notification-title-color: var(--color--text--shade-1); /// color||Color|0 -$notification-close-color: var(--color-text-light); +$notification-close-color: var(--color--text--tint-1); /// color||Color|0 -$notification-close-hover-color: var(--color-text-dark); +$notification-close-hover-color: var(--color--text--shade-1); /// color||Color|0 -$notification-success-icon-color: var(--color-success); +$notification-success-icon-color: var(--color--success); /// color||Color|0 $notification-info-icon-color: var(--color-info); /// color||Color|0 -$notification-warning-icon-color: var(--color-warning); +$notification-warning-icon-color: var(--color--warning); /// color||Color|0 -$notification-danger-icon-color: var(--color-danger); +$notification-danger-icon-color: var(--color--danger); /* Input -------------------------- */ -$input-placeholder-color: var(--input-placeholder-color, var(--color-text-light)); -$input-focus-border: var(--input-focus-border-color, var(--color-secondary)); +$input-placeholder-color: var(--input-placeholder-color, var(--color--text--tint-1)); +$input-focus-border: var(--input-focus-border-color, var(--color--secondary)); $input-border-color: var(--input-border-color, var(--border-color-base)); $input-border-style: var(--input-border-style, var(--border-style-base)); $input-border-width: var(--input-border-width, var(--border-width-base)); @@ -406,7 +406,7 @@ $input-border-bottom-color: var( $input-font-size: var(--input-font-size, var(--font-size-s)); /// color||Color|0 -$input-font-color: var(--input-font-color, var(--color-text-dark)); +$input-font-color: var(--input-font-color, var(--color--text--shade-1)); /// height||Other|4 $input-width: 140px; /// height||Other|4 @@ -432,21 +432,21 @@ $input-border-bottom-right-radius: var( $input-border-radius: var(--input-border-radius, var(--border-radius-base)); $input-border-color-hover: $border-color-hover; /// color||Color|0 -$input-background-color: var(--input-background-color, var(--color-foreground-xlight)); +$input-background-color: var(--input-background-color, var(--color--foreground--tint-2)); $input-fill-disabled: $disabled-fill-base; $input-color-disabled: $font-color-disabled-base; /// color||Color|0 -$input-icon-color: var(--color-text-lighter); +$input-icon-color: var(--color--text--tint-2); /// color||Color|0 $input-hover-border: $border-color-hover; -$input-clear-color: var(--color-text-light); -$input-clear-hover-color: var(--color-text-base); +$input-clear-color: var(--color--text--tint-1); +$input-clear-hover-color: var(--color--text); $input-disabled-fill: $disabled-fill-base; $input-disabled-border: $disabled-border-base; $input-disabled-color: $disabled-color-base; -$input-disabled-placeholder-color: var(--color-text-lighter); +$input-disabled-placeholder-color: var(--color--text--tint-2); /// fontSize||Font|1 $input-medium-font-size: var(--input-font-size, 14px); @@ -465,18 +465,18 @@ $input-number-control-border-radius: 3px; /* Cascader -------------------------- */ /// color||Color|0 -$cascader-menu-font-color: var(--color-text-dark); +$cascader-menu-font-color: var(--color--text--shade-1); /// color||Color|0 -$cascader-menu-selected-font-color: var(--color-primary); +$cascader-menu-selected-font-color: var(--color--primary); $cascader-menu-fill: $fill-base; $cascader-menu-font-size: $font-size-base; $cascader-menu-radius: var(--border-radius-base); $cascader-menu-border: solid 1px var(--border-color-base); $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: var(--color-background-base); +$cascader-node-color-disabled: var(--color--text--tint-2); +$cascader-color-empty: var(--color--text--tint-2); +$cascader-tag-background: var(--color--background); /* Group -------------------------- */ @@ -490,15 +490,15 @@ $group-title-width: 66px; /* Tab -------------------------- */ $tab-font-size: $font-size-base; -$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); +$tab-border-line: 1px solid var(--color--foreground); +$tab-header-color-active: var(--color--text--tint-1); +$tab-header-color-hover: var(--color--text--shade-1); +$tab-header-color: var(--color--text--shade-1); $tab-header-fill-active: rgba($color-black, 0.06); $tab-header-fill-hover: rgba($color-black, 0.06); $tab-vertical-header-width: 90px; $tab-vertical-header-count-color: $color-white; -$tab-vertical-header-count-fill: var(--color-text-light); +$tab-vertical-header-count-fill: var(--color--text--tint-1); /* Button -------------------------- */ @@ -597,43 +597,43 @@ $button-loading-background-color: var( ); /// color||Color|0 -$button-default-font-color: var(--color-text-dark); // ! Actually used by checkbox +$button-default-font-color: var(--color--text--shade-1); // ! Actually used by checkbox /// color||Color|0 $button-default-background-color: $color-white; // ! Actually used by checkbox /// color||Color|0 // $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--shade-1)); /// color||Color|0 // $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)); /// color||Color|0 -$button-primary-border-color: $button-border-color; // var(--color-primary); +$button-primary-border-color: $button-border-color; // var(--color--primary); /// color||Color|0 $button-primary-font-color: $button-font-color; // $color-white; /// color||Color|0 -$button-primary-background-color: $button-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); +$button-success-border-color: var(--color--success); /// color||Color|0 $button-success-font-color: $color-white; /// color||Color|0 -$button-success-background-color: var(--color-success); +$button-success-background-color: var(--color--success); /// color||Color|0 -$button-warning-border-color: var(--color-warning); +$button-warning-border-color: var(--color--warning); /// color||Color|0 $button-warning-font-color: $color-white; /// color||Color|0 -$button-warning-background-color: var(--color-warning); +$button-warning-background-color: var(--color--warning); /// color||Color|0 -$button-danger-border-color: var(--color-danger); +$button-danger-border-color: var(--color--danger); /// color||Color|0 $button-danger-font-color: $color-white; /// color||Color|0 -$button-danger-background-color: var(--color-danger); +$button-danger-background-color: var(--color--danger); /// color||Color|0 $button-info-border-color: var(--color-info); /// color||Color|0 @@ -682,9 +682,9 @@ $dialog-close-top: var(--dialog-close-top, var(--spacing-l)); $table-border-color: var(--border-color-light); $table-border: 1px solid $table-border-color; /// color||Color|0 -$table-font-color: var(--color-text-dark); +$table-font-color: var(--color--text--shade-1); /// color||Color|0 -$table-header-font-color: var(--color-text-light); +$table-header-font-color: var(--color--text--tint-1); /// color||Color|0 $table-row-hover-background-color: var(--color-table-row-hover-background); $table-current-row-background-color: $color-primary-light-9; @@ -700,20 +700,20 @@ $pagination-font-size: var(--font-size-2xs); /// color||Color|0 $pagination-background-color: $color-white; /// color||Color|0 -$pagination-font-color: var(--color-text-dark); +$pagination-font-color: var(--color--text--shade-1); $pagination-border-radius: 3px; /// color||Color|0 -$pagination-button-color: var(--color-text-dark); +$pagination-button-color: var(--color--text--shade-1); /// height||Other|4 $pagination-button-width: 35.5px; /// height||Other|4 $pagination-button-height: 28px; /// color||Color|0 -$pagination-button-disabled-color: var(--color-text-lighter); +$pagination-button-disabled-color: var(--color--text--tint-2); /// color||Color|0 $pagination-button-disabled-background-color: $color-white; /// color||Color|0 -$pagination-hover-color: var(--color-primary); +$pagination-hover-color: var(--color--primary); /* Popup -------------------------- */ @@ -737,18 +737,18 @@ $popover-padding-large: 18px 20px; /// fontSize||Font|1 $popover-title-font-size: 16px; /// color||Color|0 -$popover-title-font-color: var(--color-text-dark); +$popover-title-font-color: var(--color--text--shade-1); /* Tooltip -------------------------- */ /// color|1|Color|0 -$tooltip-fill: var(--color-background-dark); +$tooltip-fill: var(--color--background--shade-2); /// color|1|Color|0 $tooltip-color: $color-white; /// fontSize||Font|1 $tooltip-font-size: 12px; /// color||Color|0 -$tooltip-border-color: var(--color-background-dark); +$tooltip-border-color: var(--color--background--shade-2); $tooltip-arrow-size: 6px; /// padding||Spacing|3 $tooltip-padding: 10px; @@ -758,13 +758,13 @@ $tooltip-padding: 10px; /// color||Color|0 $tag-info-color: var(--color-info); /// color||Color|0 -$tag-primary-color: var(--color-primary); +$tag-primary-color: var(--color--primary); /// color||Color|0 -$tag-success-color: var(--color-success); +$tag-success-color: var(--color--success); /// color||Color|0 -$tag-warning-color: var(--color-warning); +$tag-warning-color: var(--color--warning); /// color||Color|0 -$tag-danger-color: var(--color-danger); +$tag-danger-color: var(--color--danger); /// fontSize||Font|1 $tag-font-size: var(--font-size-xs); $tag-border-radius: 4px; @@ -775,20 +775,20 @@ $tag-padding: 16px; /// color||Color|0 $tree-node-hover-background-color: $background-color-base; /// color||Color|0 -$tree-font-color: var(--color-text-dark); +$tree-font-color: var(--color--text--shade-1); /// color||Color|0 -$tree-expand-icon-color: var(--color-text-lighter); +$tree-expand-icon-color: var(--color--text--tint-2); /* Dropdown -------------------------- */ $dropdown-menu-box-shadow: $box-shadow-light; $dropdown-menuItem-hover-fill: var(--color-action-dropdown-item-active-background); -$dropdown-menuItem-hover-color: var(--color-text-dark); +$dropdown-menuItem-hover-color: var(--color--text--shade-1); /* Badge -------------------------- */ /// color||Color|0 -$badge-background-color: var(--color-danger); +$badge-background-color: var(--color--danger); $badge-radius: 10px; /// fontSize||Font|1 $badge-font-size: 12px; @@ -808,17 +808,17 @@ $card-padding: 20px; /* Slider --------------------------*/ /// color||Color|0 -$slider-main-background-color: var(--color-primary); +$slider-main-background-color: var(--color--primary); /// color||Color|0 $slider-runway-background-color: var(--border-color-base); $slider-button-hover-color: function.saturation( - --color-primary-h, - --color-primary-s, - --color-primary-l, + --color--primary-h, + --color--primary-s, + --color--primary-l, 8% ); $slider-stop-background-color: $color-white; -$slider-disable-color: var(--color-text-lighter); +$slider-disable-color: var(--color--text--tint-2); $slider-margin: 16px 0; $slider-border-radius: 3px; /// height|1|Other|4 @@ -840,13 +840,13 @@ $steps-padding: 20px; $menu-item-font-size: $font-size-base; $menu-item-font-weight: var(--menu-item-font-weight, var(--font-weight-regular)); /// color||Color|0 -$menu-item-font-color: var(--menu-font-color, var(--color-text-dark)); -$menu-item-icon-font-color: var(--menu-item-font-color, var(--color-text-light)); +$menu-item-font-color: var(--menu-font-color, var(--color--text--shade-1)); +$menu-item-icon-font-color: var(--menu-item-font-color, var(--color--text--tint-1)); /// color||Color|0 -$menu-background-color: var(--menu-background-color, var(--color-background-xlight)); +$menu-background-color: var(--menu-background-color, var(--color--background--light-3)); $menu-item-hover-fill: var(--menu-item-hover-fill, transparent); -$menu-item-hover-font-color: var(--menu-item-hover-font-color, var(--color-text-dark)); -$menu-item-active-font-color: var(--menu-item-active-font-color, var(--color-primary)); +$menu-item-hover-font-color: var(--menu-item-hover-font-color, var(--color--text--shade-1)); +$menu-item-active-font-color: var(--menu-item-active-font-color, var(--color--primary)); $menu-item-active-font-weight: var(--font-weight-regular); $menu-item-active-background-color: var(--menu-item-active-background-color, transparent); $menu-item-border-radius: var(--menu-item-border-radius, 0); @@ -861,27 +861,27 @@ $rate-font-size: $font-size-base; $rate-icon-size: 18px; /// margin||Spacing|2 $rate-icon-margin: 6px; -$rate-icon-color: var(--color-text-lighter); +$rate-icon-color: var(--color--text--tint-2); /* DatePicker --------------------------*/ -$datepicker-font-color: var(--color-text-dark); +$datepicker-font-color: var(--color--text--shade-1); /// color|1|Color|0 -$datepicker-off-font-color: var(--color-text-lighter); +$datepicker-off-font-color: var(--color--text--tint-2); /// color||Color|0 -$datepicker-header-font-color: var(--color-text-dark); -$datepicker-icon-color: var(--color-text-dark); +$datepicker-header-font-color: var(--color--text--shade-1); +$datepicker-icon-color: var(--color--text--shade-1); $datepicker-border-color: $disabled-border-base; -$datepicker-inner-border-color: var(--color-foreground-base); +$datepicker-inner-border-color: var(--color--foreground); /// color||Color|0 $datepicker-inrange-background-color: var(--border-color-light); /// color||Color|0 $datepicker-inrange-hover-background-color: var(--border-color-light); /// color||Color|0 -$datepicker-active-color: var(--color-primary); +$datepicker-active-color: var(--color--primary); /// color||Color|0 -$datepicker-hover-font-color: var(--color-primary); -$datepicker-cell-hover-color: var(--color-foreground-xlight); +$datepicker-hover-font-color: var(--color--primary); +$datepicker-cell-hover-color: var(--color--foreground--tint-2); /* Loading --------------------------*/ @@ -892,8 +892,8 @@ $loading-fullscreen-spinner-size: 50px; /* Scrollbar --------------------------*/ -$scrollbar-background-color: var(--color-text-lighter); -$scrollbar-hover-background-color: var(--color-text-light); +$scrollbar-background-color: var(--color--text--tint-2); +$scrollbar-hover-background-color: var(--color--text--tint-1); /* Carousel --------------------------*/ @@ -919,7 +919,7 @@ $collapse-header-height: 48px; /// color||Color|0 $collapse-header-background-color: $color-white; /// color||Color|0 -$collapse-header-font-color: var(--color-text-dark); +$collapse-header-font-color: var(--color--text--shade-1); /// fontSize||Font|1 $collapse-header-font-size: 13px; /// color||Color|0 @@ -927,7 +927,7 @@ $collapse-content-background-color: $color-white; /// fontSize||Font|1 $collapse-content-font-size: 13px; /// color||Color|0 -$collapse-content-font-color: var(--color-text-dark); +$collapse-content-font-color: var(--color--text--shade-1); /* Transfer --------------------------*/ @@ -971,7 +971,7 @@ $timeline-node-color: var(--border-color-base); /// color||Color|0 $backtop-background-color: $color-white; /// color||Color|0 -$backtop-font-color: var(--color-primary); +$backtop-font-color: var(--color--primary); /// color||Color|0 $backtop-hover-background-color: var(--border-color-light); @@ -982,19 +982,19 @@ $link-font-size: $font-size-base; /// fontWeight||Font|1 $link-font-weight: $font-weight-primary; /// color||Color|0 -$link-default-font-color: var(--color-text-dark); +$link-default-font-color: var(--color--text--shade-1); /// color||Color|0 -$link-default-active-color: var(--color-primary); +$link-default-active-color: var(--color--primary); /// color||Color|0 -$link-disabled-font-color: var(--color-text-lighter); +$link-disabled-font-color: var(--color--text--tint-2); /// color||Color|0 -$link-primary-font-color: var(--color-primary); +$link-primary-font-color: var(--color--primary); /// color||Color|0 -$link-success-font-color: var(--color-success); +$link-success-font-color: var(--color--success); /// color||Color|0 -$link-warning-font-color: var(--color-warning); +$link-warning-font-color: var(--color--warning); /// color||Color|0 -$link-danger-font-color: var(--color-danger); +$link-danger-font-color: var(--color--danger); /// color||Color|0 $link-info-font-color: var(--color-info); /* Calendar @@ -1002,7 +1002,7 @@ $link-info-font-color: var(--color-info); /// border||Other|4 $calendar-border: $table-border; /// color||Other|4 -$calendar-selected-background-color: var(--color-background-base); +$calendar-selected-background-color: var(--color--background); $calendar-cell-width: 85px; /* Form @@ -1013,9 +1013,9 @@ $form-label-font-size: $font-size-base; /* Avatar --------------------------*/ /// color||Color|0 -$avatar-font-color: var(--color-text-xlight); +$avatar-font-color: var(--color--text--tint-3); /// color||Color|0 -$avatar-background-color: var(--color-foreground-dark); +$avatar-background-color: var(--color--foreground--shade-1); /// fontSize||Font Size|1 $avatar-text-font-size: 14px; /// fontSize||Font Size|1 diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker.scss b/packages/frontend/@n8n/design-system/src/css/date-picker.scss index 41b27860207..5b7d66c8ac3 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker.scss @@ -14,8 +14,8 @@ .el-picker-panel__footer { .el-picker-panel__link-btn { &:last-child { - background: var(--color-primary); - color: var(--color-foreground-xlight); + background: var(--color--primary); + color: var(--color--foreground--tint-2); } } } diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss index cbf154ab1ec..0132aa5f11d 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss @@ -64,7 +64,7 @@ line-height: 22px; text-align: center; cursor: pointer; - color: var(--color-text-dark); + color: var(--color--text--shade-1); &:hover { color: var.$datepicker-hover-font-color; diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/date-table.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/date-table.scss index dc6f3c9b9c2..362f514f005 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/date-table.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/date-table.scss @@ -67,7 +67,7 @@ &.today { position: relative; span { - color: var(--color-primary); + color: var(--color--primary); font-weight: var(--font-weight-bold); } &.start-date span, @@ -117,7 +117,7 @@ background-color: var.$background-color-base; opacity: 1; cursor: not-allowed; - color: var(--color-text-lighter); + color: var(--color--text--tint-2); } &.selected div { diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss index 9b607d6acde..4b3164d8a9f 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss @@ -17,7 +17,7 @@ } &.today { .cell { - color: var(--color-primary); + color: var(--color--primary); font-weight: var(--font-weight-bold); } &.start-date .cell, @@ -29,10 +29,10 @@ &.disabled .cell { background-color: var.$background-color-base; cursor: not-allowed; - color: var(--color-text-lighter); + color: var(--color--text--tint-2); &:hover { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); } } diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/picker-panel.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/picker-panel.scss index 6912eca8b16..c999f757c9e 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/picker-panel.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/picker-panel.scss @@ -3,7 +3,7 @@ @use '../mixins/button'; @include mixins.b(picker-panel) { - color: var(--color-text-dark); + color: var(--color--text--shade-1); border: 1px solid var.$datepicker-border-color; box-shadow: var.$box-shadow-light; background: var.$color-white; @@ -68,7 +68,7 @@ font-size: 12px; &[disabled] { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); cursor: not-allowed; } } diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/picker.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/picker.scss index 0aebf9f930c..9ef014c8768 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/picker.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/picker.scss @@ -47,7 +47,7 @@ .el-range__icon { font-size: 14px; margin-left: -5px; - color: var(--color-text-lighter); + color: var(--color--text--tint-2); float: left; line-height: 32px; } @@ -63,10 +63,10 @@ width: 39%; text-align: center; font-size: var.$font-size-base; - color: var(--color-text-dark); + color: var(--color--text--shade-1); &::placeholder { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); } } @@ -79,12 +79,12 @@ line-height: 32px; font-size: 14px; width: 5%; - color: var(--color-text-dark); + color: var(--color--text--shade-1); } .el-range__close-icon { font-size: 14px; - color: var(--color-text-lighter); + color: var(--color--text--tint-2); width: 25px; display: inline-block; float: right; @@ -104,10 +104,10 @@ } @include mixins.when(active) { - border-color: var(--color-primary); + border-color: var(--color--primary); &:hover { - border-color: var(--color-primary); + border-color: var(--color--primary); } } diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/time-picker.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/time-picker.scss index 937dce897b9..a1a9f794c6f 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/time-picker.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/time-picker.scss @@ -77,7 +77,7 @@ background-color: transparent; outline: none; font-size: 12px; - color: var(--color-text-dark); + color: var(--color--text--shade-1); &.confirm { font-weight: var(--font-weight-bold); diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/time-spinner.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/time-spinner.scss index e827caefed3..e966f21b228 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/time-spinner.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/time-spinner.scss @@ -37,7 +37,7 @@ @include mixins.e(arrow) { font-size: 12px; - color: var(--color-text-light); + color: var(--color--text--tint-1); position: absolute; left: 0; width: 100%; @@ -48,7 +48,7 @@ cursor: pointer; &:hover { - color: var(--color-primary); + color: var(--color--primary); } &.el-icon-arrow-up { @@ -90,7 +90,7 @@ height: 32px; line-height: 32px; font-size: 12px; - color: var(--color-text-dark); + color: var(--color--text--shade-1); &:hover:not(.disabled):not(.active) { background: var.$background-color-base; @@ -98,12 +98,12 @@ } &.active:not(.disabled) { - color: var(--color-text-dark); + color: var(--color--text--shade-1); font-weight: var(--font-weight-bold); } &.disabled { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); cursor: not-allowed; } } diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/year-table.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/year-table.scss index 60d4ded922d..2749d7a69f5 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/year-table.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/year-table.scss @@ -17,7 +17,7 @@ &.today { .cell { - color: var(--color-primary); + color: var(--color--primary); font-weight: var(--font-weight-bold); } } @@ -25,10 +25,10 @@ &.disabled .cell { background-color: var.$background-color-base; cursor: not-allowed; - color: var(--color-text-lighter); + color: var(--color--text--tint-2); &:hover { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); } } diff --git a/packages/frontend/@n8n/design-system/src/css/dialog.scss b/packages/frontend/@n8n/design-system/src/css/dialog.scss index 2ddb2bfcdeb..544888c1262 100644 --- a/packages/frontend/@n8n/design-system/src/css/dialog.scss +++ b/packages/frontend/@n8n/design-system/src/css/dialog.scss @@ -81,7 +81,7 @@ &:focus, &:hover { .el-dialog__close { - color: var(--color-primary); + color: var(--color--primary); } } } @@ -89,14 +89,14 @@ @include mixins.e(title) { line-height: var(--font-line-height-compact); font-size: var(--font-size-xl); - color: var(--color-text-dark); + color: var(--color--text--shade-1); font-weight: var(--font-weight-regular); } @include mixins.e(body) { padding: var.$dialog-padding-primary; padding-top: 0; - color: var(--color-text-base); + color: var(--color--text); } @include mixins.e(footer) { diff --git a/packages/frontend/@n8n/design-system/src/css/dropdown.scss b/packages/frontend/@n8n/design-system/src/css/dropdown.scss index e3ff966a4fc..85b19f949ee 100644 --- a/packages/frontend/@n8n/design-system/src/css/dropdown.scss +++ b/packages/frontend/@n8n/design-system/src/css/dropdown.scss @@ -6,7 +6,7 @@ @include mixins.b(dropdown) { position: relative; - color: var(--color-text-dark); + color: var(--color--text--shade-1); font-size: var.$font-size-base; display: inline-flex; line-height: 1; @@ -99,7 +99,7 @@ margin: 0; font-size: var.$font-size-base; font-weight: var(--font-weight-regular); - color: var(--color-text-base); + color: var(--color--text); cursor: pointer; outline: none; white-space: nowrap; @@ -130,7 +130,7 @@ @include mixins.when(disabled) { cursor: default; - color: var(--color-text-lighter); + color: var(--color--text--tint-2); pointer-events: none; } } diff --git a/packages/frontend/@n8n/design-system/src/css/input-number.scss b/packages/frontend/@n8n/design-system/src/css/input-number.scss index 032ee2607a8..b451abd65b7 100644 --- a/packages/frontend/@n8n/design-system/src/css/input-number.scss +++ b/packages/frontend/@n8n/design-system/src/css/input-number.scss @@ -32,7 +32,7 @@ } @include mixins.e((increase, decrease)) { - --disabled-color: var(--color-text-light); + --disabled-color: var(--color--text--tint-1); position: absolute; z-index: 1; top: 1px; @@ -43,12 +43,12 @@ width: var.$input-height; height: auto; background: var.$background-color-base; - color: var(--color-text-dark); + color: var(--color--text--shade-1); cursor: pointer; font-size: 13px; &:hover { - color: var(--color-primary); + color: var(--color--primary); &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) { border-color: var.$input-focus-border; diff --git a/packages/frontend/@n8n/design-system/src/css/input.scss b/packages/frontend/@n8n/design-system/src/css/input.scss index 3281b9f3f2e..9b7cc339680 100644 --- a/packages/frontend/@n8n/design-system/src/css/input.scss +++ b/packages/frontend/@n8n/design-system/src/css/input.scss @@ -66,11 +66,11 @@ @include mixins.when(exceed) { .el-textarea__inner { - border-color: var(--color-danger); + border-color: var(--color--danger); } .el-input__count { - color: var(--color-danger); + color: var(--color--danger); } } } @@ -148,7 +148,7 @@ right: var(--spacing-2xs); top: 0; text-align: center; - color: var(--color-text-light); + color: var(--color--text--tint-1); transition: all 0.3s; pointer-events: none; display: flex; @@ -217,12 +217,12 @@ @include mixins.when(exceed) { .el-input__inner { - border-color: var(--color-danger); + border-color: var(--color--danger); } .el-input__suffix { .el-input__count { - color: var(--color-danger); + color: var(--color--danger); } } } diff --git a/packages/frontend/@n8n/design-system/src/css/loading.scss b/packages/frontend/@n8n/design-system/src/css/loading.scss index 93fa9df373d..869a6921df3 100644 --- a/packages/frontend/@n8n/design-system/src/css/loading.scss +++ b/packages/frontend/@n8n/design-system/src/css/loading.scss @@ -49,7 +49,7 @@ align-items: center; .el-loading-text { - color: var(--color-primary); + color: var(--color--primary); margin: 3px 0; font-size: 14px; } @@ -66,12 +66,12 @@ stroke-dasharray: 90, 150; stroke-dashoffset: 0; stroke-width: 2; - stroke: var(--color-primary); + stroke: var(--color--primary); stroke-linecap: round; } i { - color: var(--color-primary); + color: var(--color--primary); } } diff --git a/packages/frontend/@n8n/design-system/src/css/menu.scss b/packages/frontend/@n8n/design-system/src/css/menu.scss index f98ffa356cd..a1e6be4b75f 100644 --- a/packages/frontend/@n8n/design-system/src/css/menu.scss +++ b/packages/frontend/@n8n/design-system/src/css/menu.scss @@ -62,7 +62,7 @@ line-height: 60px; margin: 0; border-bottom: 2px solid transparent; - color: var(--color-text-light); + color: var(--color--text--tint-1); a, a:hover { @@ -71,7 +71,7 @@ &:not(.is-disabled):hover, &:not(.is-disabled):focus { - background-color: var(--color-foreground-xlight); + background-color: var(--color--foreground--tint-2); } } & > .el-sub-menu { @@ -81,14 +81,14 @@ &:hover { outline: none; .el-sub-menu__title { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } } &.is-active { .el-sub-menu__title { - border-bottom: 2px solid var(--color-primary); - color: var(--color-text-dark); + border-bottom: 2px solid var(--color--primary); + color: var(--color--text--shade-1); } } @@ -96,10 +96,10 @@ height: 60px; line-height: 60px; border-bottom: 2px solid transparent; - color: var(--color-text-light); + color: var(--color--text--tint-1); &:hover { - background-color: var(--color-foreground-xlight); + background-color: var(--color--foreground--tint-2); } } & .el-sub-menu__icon-arrow { @@ -117,21 +117,21 @@ height: 36px; line-height: 36px; padding: 0 10px; - color: var(--color-text-light); + color: var(--color--text--tint-1); } & .el-menu-item.is-active, & .el-sub-menu.is-active > .el-sub-menu__title { - color: var(--color-text-dark); + color: var(--color--text--shade-1); } } & .el-menu-item:not(.is-disabled):hover, & .el-menu-item:not(.is-disabled):focus { outline: none; - color: var(--color-text-dark); + color: var(--color--text--shade-1); } & > .el-menu-item.is-active { - border-bottom: 2px solid var(--color-primary); - color: var(--color-text-dark); + border-bottom: 2px solid var(--color--primary); + color: var(--color--text--shade-1); } } @include mixins.m(collapse) { @@ -268,7 +268,7 @@ } @include mixins.when(active) { .el-sub-menu__title { - border-bottom-color: var(--color-primary); + border-bottom-color: var(--color--primary); } } @include mixins.when(opened) { @@ -301,7 +301,7 @@ padding: 7px 0 7px 20px; line-height: normal; font-size: 12px; - color: var(--color-text-light); + color: var(--color--text--tint-1); } } diff --git a/packages/frontend/@n8n/design-system/src/css/message-box.scss b/packages/frontend/@n8n/design-system/src/css/message-box.scss index f5e6d800561..204454d38e6 100644 --- a/packages/frontend/@n8n/design-system/src/css/message-box.scss +++ b/packages/frontend/@n8n/design-system/src/css/message-box.scss @@ -67,7 +67,7 @@ &:focus, &:hover { .el-message-box__close { - color: var(--color-primary); + color: var(--color--primary); } } } @@ -86,9 +86,9 @@ padding-top: 15px; & input.invalid { - border-color: var(--color-danger); + border-color: var(--color--danger); &:focus { - border-color: var(--color-danger); + border-color: var(--color--danger); } } } @@ -136,7 +136,7 @@ } @include mixins.e(errormsg) { - color: var(--color-danger); + color: var(--color--danger); font-size: var.$messagebox-error-font-size; min-height: 18px; margin-top: 2px; @@ -156,13 +156,13 @@ } // & .btn--cancel { - --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-primary-tint-3); - --button-hover-color: var(--color-primary); - --button-hover-border-color: var(--color-primary); - --button-focus-outline-color: var(--color-primary-tint-1); + --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--primary--tint-3); + --button-hover-color: var(--color--primary); + --button-hover-border-color: var(--color--primary); + --button-focus-outline-color: var(--color--primary--tint-1); @include button.button-small(); @include button.button-outline; diff --git a/packages/frontend/@n8n/design-system/src/css/mixins/_button.scss b/packages/frontend/@n8n/design-system/src/css/mixins/_button.scss index 1a675ecf8e7..4fc0ef32228 100644 --- a/packages/frontend/@n8n/design-system/src/css/mixins/_button.scss +++ b/packages/frontend/@n8n/design-system/src/css/mixins/_button.scss @@ -7,19 +7,19 @@ &:focus, &:hover { color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); - background-color: var(--color-foreground-xlight); + background-color: var(--color--foreground--tint-2); border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); } @include mixins.when(loading) { color: function.lightness($h, $s, $l, var.$button-hover-tint-percent); - background-color: var(--color-foreground-xlight); + background-color: var(--color--foreground--tint-2); border-color: function.lightness($h, $s, $l, var.$button-hover-tint-percent); } &:active { border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent)); - background-color: var(--color-foreground-xlight); + background-color: var(--color--foreground--tint-2); color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent)); outline: none; } @@ -29,9 +29,9 @@ &:hover, &:focus, &:active { - color: var(--color-text-light); - background-color: var(--color-foreground-xlight); - border-color: var(--color-foreground-base); + color: var(--color--text--tint-1); + background-color: var(--color--foreground--tint-2); + border-color: var(--color--foreground); } } } @@ -67,9 +67,9 @@ &:hover, &:focus, &:active { - color: var(--color-text-light); - background-color: var(--color-foreground-base); - border-color: var(--color-foreground-base); + color: var(--color--text--tint-1); + background-color: var(--color--foreground); + border-color: var(--color--foreground); } } @@ -103,10 +103,10 @@ var.$button-primary-font-color, var.$button-primary-background-color, var.$button-primary-border-color, - --color-primary-h, - --color-primary-s, - --color-primary-l, - --color-primary-tint-2-l, + --color--primary-h, + --color--primary-s, + --color--primary-l, + --color--primary--tint-2-l, $plain: false ); } @@ -114,9 +114,9 @@ @mixin button-outline() { @include button-plain( var.$button-primary-background-color, - --color-primary-h, - --color-primary-s, - --color-primary-l + --color--primary-h, + --color--primary-s, + --color--primary-l ); } diff --git a/packages/frontend/@n8n/design-system/src/css/mixins/mixins.scss b/packages/frontend/@n8n/design-system/src/css/mixins/mixins.scss index b032bfb70d6..d0ba3fdd7e8 100644 --- a/packages/frontend/@n8n/design-system/src/css/mixins/mixins.scss +++ b/packages/frontend/@n8n/design-system/src/css/mixins/mixins.scss @@ -25,7 +25,7 @@ $E: null; -------------------------- */ @mixin scroll-bar { $scrollbar-thumb-background: #b4bccc; - $scrollbar-track-background: var(--color-foreground-xlight); + $scrollbar-track-background: var(--color--foreground--tint-2); &::-webkit-scrollbar { z-index: 11; diff --git a/packages/frontend/@n8n/design-system/src/css/pagination.scss b/packages/frontend/@n8n/design-system/src/css/pagination.scss index b512ebaae12..ece1b5c3fc4 100644 --- a/packages/frontend/@n8n/design-system/src/css/pagination.scss +++ b/packages/frontend/@n8n/design-system/src/css/pagination.scss @@ -100,7 +100,7 @@ } .el-pager li.disabled { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); cursor: not-allowed; } @@ -144,7 +144,7 @@ @include mixins.e(sizes) { margin: 0 10px 0 0; font-weight: var(--font-weight-regular); - color: var(--color-text-dark); + color: var(--color--text--shade-1); .el-input .el-input__inner { font-size: var.$pagination-font-size; @@ -159,13 +159,13 @@ @include mixins.e(total) { margin-right: 10px; font-weight: var(--font-weight-regular); - color: var(--color-text-dark); + color: var(--color--text--shade-1); } @include mixins.e(jump) { margin-left: 24px; font-weight: var(--font-weight-regular); - color: var(--color-text-dark); + color: var(--color--text--shade-1); .el-input__inner { padding: 0 3px; @@ -206,13 +206,13 @@ .btn-next, .el-pager li { margin: 0 1px; - color: var(--color-text-base); + color: var(--color--text); min-width: 30px; border-radius: var(--border-radius-base); border: 1px solid transparent; &.disabled { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); } } @@ -221,20 +221,20 @@ padding: 0; &:disabled { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); } } .el-pager li:not(.disabled) { &:hover { - color: var(--color-primary); - background-color: var(--color-background-xlight); - border: 1px solid var(--color-foreground-base); + color: var(--color--primary); + background-color: var(--color--background--light-3); + border: 1px solid var(--color--foreground); } &.is-active { - border: 1px solid var(--color-primary); - color: var(--color-primary); + border: 1px solid var(--color--primary); + color: var(--color--primary); } } @@ -285,7 +285,7 @@ color: var.$pagination-button-color; &.disabled { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); } } diff --git a/packages/frontend/@n8n/design-system/src/css/popover.scss b/packages/frontend/@n8n/design-system/src/css/popover.scss index a5ee5c0b2d1..9353546df14 100644 --- a/packages/frontend/@n8n/design-system/src/css/popover.scss +++ b/packages/frontend/@n8n/design-system/src/css/popover.scss @@ -10,7 +10,7 @@ border: 1px solid var.$popover-border-color; padding: var.$popover-padding; z-index: var.$index-popper; - color: var(--color-text-dark); + color: var(--color--text--shade-1); line-height: 1.4; text-align: justify; font-size: var.$popover-font-size; diff --git a/packages/frontend/@n8n/design-system/src/css/radio.scss b/packages/frontend/@n8n/design-system/src/css/radio.scss index 8a524362f07..03413a37803 100644 --- a/packages/frontend/@n8n/design-system/src/css/radio.scss +++ b/packages/frontend/@n8n/design-system/src/css/radio.scss @@ -24,7 +24,7 @@ height: var.$radio-bordered-height; &.is-checked { - border-color: var(--color-primary); + border-color: var(--color--primary); } &.is-disabled { @@ -119,7 +119,7 @@ } } & + span.el-radio__label { - color: var(--color-text-lighter); + color: var(--color--text--tint-2); cursor: not-allowed; } } diff --git a/packages/frontend/@n8n/design-system/src/css/reset.scss b/packages/frontend/@n8n/design-system/src/css/reset.scss index 0b669c91101..d0802228f72 100644 --- a/packages/frontend/@n8n/design-system/src/css/reset.scss +++ b/packages/frontend/@n8n/design-system/src/css/reset.scss @@ -95,8 +95,8 @@ body { line-height: 1; font-size: var(--font-size-m); font-weight: var(--font-weight-regular); - color: var(--color-text-dark); - background-color: var(--color-background-light); + color: var(--color--text--shade-1); + background-color: var(--color--background--light-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -156,10 +156,10 @@ a { vertical-align: baseline; background: transparent; cursor: pointer; - color: var(--color-primary); + color: var(--color--primary); &:active { - color: function.saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(30%)); + color: function.saturation(--color--primary-h, --color--primary-s, --color--primary-l, -(30%)); } } @@ -169,7 +169,7 @@ h3, h4, h5, h6 { - color: var(--color-text-dark); + color: var(--color--text--shade-1); font-weight: inherit; &:first-child { @@ -201,14 +201,14 @@ p { } ins { - background-color: var(--color-success); - color: var(--color-text-dark); + background-color: var(--color--success); + color: var(--color--text--shade-1); text-decoration: none; } mark { background-color: var(--color-text-highlight-background); - color: var(--color-text-dark); + color: var(--color--text--shade-1); font-style: italic; font-weight: var(--font-weight-bold); } @@ -227,7 +227,7 @@ hr { display: block; height: 1px; border: 0; - border-top: 1px solid var(--color-foreground-light); + border-top: 1px solid var(--color--foreground--tint-1); margin: 0; padding: 0; } diff --git a/packages/frontend/@n8n/design-system/src/css/select.scss b/packages/frontend/@n8n/design-system/src/css/select.scss index 86458d35508..5810e7d7a3d 100644 --- a/packages/frontend/@n8n/design-system/src/css/select.scss +++ b/packages/frontend/@n8n/design-system/src/css/select.scss @@ -143,21 +143,21 @@ .el-tag { box-sizing: border-box; margin: 2px 0 2px 6px; - border-color: var(--color-foreground-base); - background-color: var(--color-foreground-base); - color: var(--color-text-dark); + border-color: var(--color--foreground); + background-color: var(--color--foreground); + color: var(--color--text--shade-1); border-radius: 20px; font-weight: var(--font-weight-regular); &__close.el-icon-close { - background-color: var(--color-text-light); + background-color: var(--color--text--tint-1); right: -7px; top: 0; color: var.$color-white; margin-right: 6px; &:hover { - background-color: var(--color-text-base); + background-color: var(--color--text); } &::before { diff --git a/packages/frontend/@n8n/design-system/src/css/skeleton.scss b/packages/frontend/@n8n/design-system/src/css/skeleton.scss index 3a0266e92c9..bfcbe25ac23 100644 --- a/packages/frontend/@n8n/design-system/src/css/skeleton.scss +++ b/packages/frontend/@n8n/design-system/src/css/skeleton.scss @@ -6,7 +6,7 @@ width: 100%; height: 16px; border-radius: var(--border-radius-large); - background: var(--color-background-base); + background: var(--color--background); display: inline-block; } @@ -40,7 +40,7 @@ -ms-flex-pack: center; justify-content: center; border-radius: 8px !important; - color: var(--color-foreground-dark); + color: var(--color--foreground--shade-1); } .el-skeleton__image svg { @@ -51,7 +51,7 @@ .el-skeleton__first-line, .el-skeleton__paragraph { - background: var(--color-background-base); + background: var(--color--background); } .el-skeleton.is-animated .el-skeleton__item { @@ -59,15 +59,15 @@ linear, left top, right top, - color-stop(25%, var(--color-background-base)), - color-stop(37%, var(--color-background-medium)), - color-stop(63%, var(--color-background-base)) + color-stop(25%, var(--color--background)), + color-stop(37%, var(--color--background--shade-1)), + color-stop(63%, var(--color--background)) ); background: linear-gradient( 90deg, - var(--color-background-base) 25%, - var(--color-background-medium) 37%, - var(--color-background-base) 63% + var(--color--background) 25%, + var(--color--background--shade-1) 37%, + var(--color--background) 63% ); background-size: 400% 100%; -webkit-animation: el-skeleton-loading 1.4s ease infinite; diff --git a/packages/frontend/@n8n/design-system/src/css/switch.scss b/packages/frontend/@n8n/design-system/src/css/switch.scss index c1681339ab5..274dd1173fe 100644 --- a/packages/frontend/@n8n/design-system/src/css/switch.scss +++ b/packages/frontend/@n8n/design-system/src/css/switch.scss @@ -27,10 +27,10 @@ font-weight: var(--font-weight-medium); cursor: pointer; vertical-align: middle; - color: var(--color-text-dark); + color: var(--color--text--shade-1); @include mixins.when(active) { - color: var(--color-primary); + color: var(--color--primary); } @include mixins.m(left) { diff --git a/packages/frontend/@n8n/design-system/src/css/table-column.scss b/packages/frontend/@n8n/design-system/src/css/table-column.scss index 69c041eea22..0e372db1a2a 100644 --- a/packages/frontend/@n8n/design-system/src/css/table-column.scss +++ b/packages/frontend/@n8n/design-system/src/css/table-column.scss @@ -40,7 +40,7 @@ } @include mixins.when(active) { - background-color: var(--color-primary); + background-color: var(--color--primary); color: var.$color-white; } } @@ -56,13 +56,13 @@ button { background: transparent; border: none; - color: var(--color-text-dark); + color: var(--color--text--shade-1); cursor: pointer; font-size: var.$font-size-small; padding: 0 3px; &:hover { - color: var(--color-primary); + color: var(--color--primary); } &:focus { diff --git a/packages/frontend/@n8n/design-system/src/css/table.scss b/packages/frontend/@n8n/design-system/src/css/table.scss index 5af0d0d216a..aa93c2a5b6a 100644 --- a/packages/frontend/@n8n/design-system/src/css/table.scss +++ b/packages/frontend/@n8n/design-system/src/css/table.scss @@ -30,7 +30,7 @@ // set empty text line height up to contrainer min-height as workaround. line-height: 60px; width: 50%; - color: var(--color-text-light); + color: var(--color--text--tint-1); } // 展开行 @@ -44,7 +44,7 @@ @include mixins.e(expand-icon) { position: relative; cursor: pointer; - color: var(--color-text-base); + color: var(--color--text); font-size: 12px; transition: transform 0.2s ease-in-out; height: 20px; @@ -205,7 +205,7 @@ width: 100%; &.highlight { - color: var(--color-primary); + color: var(--color--primary); } } @@ -461,22 +461,22 @@ left: 7px; &.ascending { - border-bottom-color: var(--color-text-light); + border-bottom-color: var(--color--text--tint-1); top: 5px; } &.descending { - border-top-color: var(--color-text-light); + border-top-color: var(--color--text--tint-1); bottom: 7px; } } .ascending .sort-caret.ascending { - border-bottom-color: var(--color-primary); + border-bottom-color: var(--color--primary); } .descending .sort-caret.descending { - border-top-color: var(--color-primary); + border-top-color: var(--color--primary); } .hidden-columns { diff --git a/packages/frontend/@n8n/design-system/src/css/tabs.scss b/packages/frontend/@n8n/design-system/src/css/tabs.scss index ec2a5aad0a3..d9ac3870c3d 100644 --- a/packages/frontend/@n8n/design-system/src/css/tabs.scss +++ b/packages/frontend/@n8n/design-system/src/css/tabs.scss @@ -12,7 +12,7 @@ bottom: 0; left: 0; height: 2px; - background-color: var(--color-primary); + background-color: var(--color--primary); z-index: 1; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); list-style: none; @@ -36,7 +36,7 @@ } &:hover { - color: var(--color-primary); + color: var(--color--primary); } } @include mixins.e(nav-wrap) { @@ -68,7 +68,7 @@ cursor: pointer; line-height: 44px; font-size: 12px; - color: var(--color-text-light); + color: var(--color--text--tint-1); } @include mixins.e(nav-next) { right: 0; @@ -101,7 +101,7 @@ list-style: none; font-size: 14px; font-weight: var(--font-weight-medium); - color: var(--color-text-dark); + color: var(--color--text--shade-1); position: relative; &:focus, @@ -110,7 +110,7 @@ } &:focus.is-active.is-focus:not(:active) { - box-shadow: 0 0 2px 2px var(--color-primary) inset; + box-shadow: 0 0 2px 2px var(--color--primary) inset; border-radius: 3px; } @@ -125,17 +125,17 @@ } &:hover { - background-color: var(--color-text-lighter); + background-color: var(--color--text--tint-2); color: var.$color-white; } } @include mixins.when(active) { - color: var(--color-primary); + color: var(--color--primary); } &:hover { - color: var(--color-primary); + color: var(--color--primary); cursor: pointer; } @@ -231,7 +231,7 @@ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); border: 1px solid transparent; margin-top: -1px; - color: var(--color-text-light); + color: var(--color--text--tint-1); &:first-child { margin-left: -1px; @@ -242,13 +242,13 @@ } &.is-active { - color: var(--color-primary); + color: var(--color--primary); background-color: var.$color-white; border-right-color: var(--border-color-base); border-left-color: var(--border-color-base); } &:not(.is-disabled):hover { - color: var(--color-primary); + color: var(--color--primary); } &.is-disabled { color: var.$disabled-color-base; @@ -408,7 +408,7 @@ } .el-tabs__item.is-left.is-active { border: 1px solid var(--border-color-base); - border-right-color: var(--color-foreground-xlight); + border-right-color: var(--color--foreground--tint-2); border-left: none; border-bottom: none; @@ -480,7 +480,7 @@ } .el-tabs__item.is-right.is-active { border: 1px solid var(--border-color-base); - border-left-color: var(--color-foreground-xlight); + border-left-color: var(--color--foreground--tint-2); border-right: none; border-bottom: none; diff --git a/packages/frontend/@n8n/design-system/src/css/tooltip.scss b/packages/frontend/@n8n/design-system/src/css/tooltip.scss index eef6d4d1712..638b6c69cb3 100644 --- a/packages/frontend/@n8n/design-system/src/css/tooltip.scss +++ b/packages/frontend/@n8n/design-system/src/css/tooltip.scss @@ -21,7 +21,7 @@ font-weight: var(--font-weight-regular); a { - color: var(--color-primary); + color: var(--color--primary); font-weight: var(--font-weight-bold); } diff --git a/packages/frontend/@n8n/design-system/src/css/tree.scss b/packages/frontend/@n8n/design-system/src/css/tree.scss index 24966bd1b38..9821dccb9e5 100644 --- a/packages/frontend/@n8n/design-system/src/css/tree.scss +++ b/packages/frontend/@n8n/design-system/src/css/tree.scss @@ -22,7 +22,7 @@ left: 50%; top: 50%; transform: translate(-50%, -50%); - color: var(--color-text-light); + color: var(--color--text--tint-1); font-size: var.$font-size-base; } @@ -31,7 +31,7 @@ left: 0; right: 0; height: 1px; - background-color: var(--color-primary); + background-color: var(--color--primary); } } @@ -47,8 +47,8 @@ @include mixins.when(drop-inner) { > .el-tree-node__content .el-tree-node__label { - background-color: var(--color-primary); - color: var(--color-foreground-xlight); + background-color: var(--color--primary); + color: var(--color--foreground--tint-2); } } diff --git a/packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.test.ts b/packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.test.ts index 3f82ff2a189..b4324457960 100644 --- a/packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.test.ts +++ b/packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.test.ts @@ -25,7 +25,7 @@ describe('ColorCircles', () => { const wrapper = render(ColorCircles, { props: { - colors: ['--color-primary-shade-1', '--color-primary'], + colors: ['--color--primary--shade-1', '--color--primary'], }, }); expect(wrapper.html()).toMatchSnapshot(); diff --git a/packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.vue b/packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.vue index 55f4c1f9bc7..52dfda1baf0 100644 --- a/packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.vue +++ b/packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.vue @@ -74,7 +74,7 @@ const getHSLValue = (color: string) => resolveHSLCalc(hsl.value[color]); text-align: center; align-self: flex-start; padding: 5px; - color: var(--color-text-dark); + color: var(--color--text--shade-1); } .circle { @@ -91,6 +91,6 @@ const getHSLValue = (color: string) => resolveHSLCalc(hsl.value[color]); .hsl { composes: color; - content: var(--color-primary); + content: var(--color--primary); } diff --git a/packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue b/packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue index 0567d62f122..6992eee8010 100644 --- a/packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue +++ b/packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue @@ -78,7 +78,7 @@ onUnmounted(() => { diff --git a/packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue b/packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue index 08ca7c64616..1a596fda83e 100644 --- a/packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue +++ b/packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue @@ -60,7 +60,7 @@ const onTypeChange = (type: string): void => { diff --git a/packages/frontend/editor-ui/src/components/CommunityPackageManageConfirmModal.vue b/packages/frontend/editor-ui/src/components/CommunityPackageManageConfirmModal.vue index 40b67005edb..fe95b4bb207 100644 --- a/packages/frontend/editor-ui/src/components/CommunityPackageManageConfirmModal.vue +++ b/packages/frontend/editor-ui/src/components/CommunityPackageManageConfirmModal.vue @@ -291,7 +291,7 @@ onMounted(async () => { .descriptionIcon { align-self: center; - color: var(--color-text-lighter); + color: var(--color--text--tint-2); } .descriptionText { diff --git a/packages/frontend/editor-ui/src/components/CopyInput.vue b/packages/frontend/editor-ui/src/components/CopyInput.vue index c63949046b8..6ea643b0e50 100644 --- a/packages/frontend/editor-ui/src/components/CopyInput.vue +++ b/packages/frontend/editor-ui/src/components/CopyInput.vue @@ -76,12 +76,12 @@ function copy() { .copyText { span { font-family: Monaco, Consolas; - color: var(--color-text-base); + color: var(--color--text); overflow-wrap: break-word; } padding: var(--spacing-xs); - background-color: var(--color-background-light); + background-color: var(--color--background--light-2); border: var(--border-base); border-radius: var(--border-radius-base); cursor: pointer; @@ -123,7 +123,7 @@ function copy() { top: 0; right: 0; padding: var(--spacing-xs); - background-color: var(--color-background-light); + background-color: var(--color--background--light-2); height: 100%; align-items: center; border-radius: var(--border-radius-base); diff --git a/packages/frontend/editor-ui/src/components/CredentialIcon.vue b/packages/frontend/editor-ui/src/components/CredentialIcon.vue index f22547ee7bd..49195c266d5 100644 --- a/packages/frontend/editor-ui/src/components/CredentialIcon.vue +++ b/packages/frontend/editor-ui/src/components/CredentialIcon.vue @@ -97,6 +97,6 @@ function getCredentialWithIcon(name: string | null): ICredentialType | null { diff --git a/packages/frontend/editor-ui/src/components/DropArea/DropArea.vue b/packages/frontend/editor-ui/src/components/DropArea/DropArea.vue index f9c5ff4e318..4ea1dacff5f 100644 --- a/packages/frontend/editor-ui/src/components/DropArea/DropArea.vue +++ b/packages/frontend/editor-ui/src/components/DropArea/DropArea.vue @@ -23,16 +23,16 @@ const onDrop = (value: string) => { diff --git a/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue b/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue index 36626d17c95..39933c38ca2 100644 --- a/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue +++ b/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue @@ -698,8 +698,8 @@ async function onAskAssistantClick() { &__header { margin: 0 auto var(--spacing-s) auto; padding-bottom: var(--spacing-3xs); - background-color: var(--color-background-xlight); - border: 1px solid var(--color-foreground-base); + background-color: var(--color--background--light-3); + border: 1px solid var(--color--foreground); border-radius: var(--border-radius-large); .node-error-view_compact & { @@ -710,12 +710,12 @@ async function onAskAssistantClick() { &__header-title { padding: var(--spacing-2xs) var(--spacing-s); - border-bottom: 1px solid var(--color-danger-tint-1); + border-bottom: 1px solid var(--color--danger--tint-3); font-size: var(--font-size-3xs); font-weight: var(--font-weight-medium); - background-color: var(--color-danger-tint-2); + background-color: var(--color--danger--tint-4); border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; - color: var(--color-danger); + color: var(--color--danger); .node-error-view_compact & { border-radius: var(--border-radius-base); @@ -728,7 +728,7 @@ async function onAskAssistantClick() { align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-s) var(--spacing-3xs) var(--spacing-s); - color: var(--color-danger); + color: var(--color--danger); font-weight: var(--font-weight-medium); font-size: var(--font-size-s); } @@ -745,8 +745,8 @@ async function onAskAssistantClick() { code { font-size: var(--font-size-xs); - color: var(--color-text-base); - background: var(--color-background-base); + color: var(--color--text); + background: var(--color--background); padding: var(--spacing-5xs); border-radius: var(--border-radius-base); } @@ -779,7 +779,7 @@ async function onAskAssistantClick() { padding: var(--spacing-s); width: 100%; overflow: auto; - background: var(--color-background-light); + background: var(--color--background--light-2); code { font-size: var(--font-size-s); } @@ -791,7 +791,7 @@ async function onAskAssistantClick() { align-items: center; margin-top: var(--spacing-s); padding-top: var(--spacing-3xs); - border-top: 1px solid var(--color-foreground-base); + border-top: 1px solid var(--color--foreground); } &__feedback-button { @@ -803,13 +803,13 @@ async function onAskAssistantClick() { cursor: pointer; &:hover { - color: var(--color-primary); + color: var(--color--primary); } } &__info { margin: 0 auto; - border: 1px solid var(--color-foreground-base); + border: 1px solid var(--color--foreground); border-radius: var(--border-radius-large); .node-error-view_compact & { @@ -822,13 +822,13 @@ async function onAskAssistantClick() { align-items: center; justify-content: space-between; padding: var(--spacing-3xs) var(--spacing-3xs) var(--spacing-3xs) var(--spacing-s); - border-bottom: 1px solid var(--color-foreground-base); + border-bottom: 1px solid var(--color--foreground); } &__info-title { font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); - color: var(--color-text-dark); + color: var(--color--text--shade-1); } &__info-content { @@ -851,7 +851,7 @@ async function onAskAssistantClick() { &__details-summary { padding: var(--spacing-5xs) 0; font-size: var(--font-size-2xs); - color: var(--color-text-dark); + color: var(--color--text--shade-1); cursor: pointer; list-style-type: none; outline: none; @@ -867,7 +867,7 @@ async function onAskAssistantClick() { } &__details-row:not(:first-child) { - border-top: 1px solid var(--color-foreground-base); + border-top: 1px solid var(--color--foreground); } &__details-icon { diff --git a/packages/frontend/editor-ui/src/components/ExpressionEditModal.vue b/packages/frontend/editor-ui/src/components/ExpressionEditModal.vue index 8fab31e4241..dcc6b34faa3 100644 --- a/packages/frontend/editor-ui/src/components/ExpressionEditModal.vue +++ b/packages/frontend/editor-ui/src/components/ExpressionEditModal.vue @@ -307,7 +307,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10); .output { [aria-readonly] { - background: var(--color-background-light); + background: var(--color--background--light-2); } } @@ -335,7 +335,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10); &:hover, &:active { - color: var(--color-primary); + color: var(--color--primary); } } diff --git a/packages/frontend/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/frontend/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue index 4f1550ea404..62929329889 100644 --- a/packages/frontend/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue +++ b/packages/frontend/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue @@ -98,9 +98,9 @@ defineExpose({ editor, focus }); :global(.cm-content) { border-radius: var(--border-radius-base); &[aria-readonly='true'] { - --disabled-fill: var(--color-background-base); - background-color: var(--disabled-fill, var(--color-background-light)); - color: var(--disabled-color, var(--color-text-base)); + --disabled-fill: var(--color--background); + background-color: var(--disabled-fill, var(--color--background--light-2)); + color: var(--disabled-color, var(--color--text)); cursor: not-allowed; } } diff --git a/packages/frontend/editor-ui/src/components/ExpressionEditorModal/theme.ts b/packages/frontend/editor-ui/src/components/ExpressionEditorModal/theme.ts index 3fa8ad73274..fea2f883d47 100644 --- a/packages/frontend/editor-ui/src/components/ExpressionEditorModal/theme.ts +++ b/packages/frontend/editor-ui/src/components/ExpressionEditorModal/theme.ts @@ -16,13 +16,13 @@ const commonThemeProps = (isReadOnly = false) => ({ overflow: 'hidden', }, '&.cm-focused': { - borderColor: 'var(--color-secondary)', + borderColor: 'var(--color--secondary)', outline: '0 !important', }, '.cm-content': { fontFamily: 'var(--font-family-monospace)', padding: 'var(--spacing-xs)', - color: 'var(--input-font-color, var(--color-text-dark))', + color: 'var(--input-font-color, var(--color--text--shade-1))', caretColor: isReadOnly ? 'transparent' : 'var(--color-code-caret)', }, '.cm-line': { diff --git a/packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue b/packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue index 8fd1892c247..a2ab894b8f0 100644 --- a/packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue +++ b/packages/frontend/editor-ui/src/components/ExpressionParameterInput.vue @@ -301,16 +301,16 @@ defineExpose({ focus, select }); } .focused > .prepend-section { - border-color: var(--color-secondary); + border-color: var(--color--secondary); border-bottom-left-radius: 0; } .focused :global(.cm-editor) { - border-color: var(--color-secondary); + border-color: var(--color--secondary); } .focused > .expression-editor-modal-opener { - border-color: var(--color-secondary); + border-color: var(--color--secondary); border-bottom-right-radius: 0; background-color: var(--color-code-background); } @@ -326,9 +326,9 @@ defineExpose({ focus, select }); } .activeDrop { - --input-border-color: var(--color-success); - --input-border-right-color: var(--color-success); - --input-background-color: var(--color-foreground-xlight); + --input-border-color: var(--color--success); + --input-border-right-color: var(--color--success); + --input-background-color: var(--color--foreground--tint-2); --input-border-style: solid; :global(.cm-editor) { diff --git a/packages/frontend/editor-ui/src/components/Feedback.vue b/packages/frontend/editor-ui/src/components/Feedback.vue index d0556696db3..4b72be8a65d 100644 --- a/packages/frontend/editor-ui/src/components/Feedback.vue +++ b/packages/frontend/editor-ui/src/components/Feedback.vue @@ -56,13 +56,13 @@ function onFeedback(feedback: 'positive' | 'negative') { cursor: pointer; width: var(--spacing-l); height: var(--spacing-l); - color: var(--color-text-light); + color: var(--color--text--tint-1); display: flex; justify-content: center; align-items: center; &:hover { - color: var(--color-primary); + color: var(--color--primary); } } } diff --git a/packages/frontend/editor-ui/src/components/FilterConditions/CombinatorSelect.vue b/packages/frontend/editor-ui/src/components/FilterConditions/CombinatorSelect.vue index b77ae1ab578..58fd32b62d6 100644 --- a/packages/frontend/editor-ui/src/components/FilterConditions/CombinatorSelect.vue +++ b/packages/frontend/editor-ui/src/components/FilterConditions/CombinatorSelect.vue @@ -44,6 +44,6 @@ const onCombinatorChange = (combinator: FilterTypeCombinator): void => { max-width: 80px; line-height: var(--font-line-height-xloose); font-size: var(--font-size-2xs); - color: var(--color-text-light); + color: var(--color--text--tint-1); } diff --git a/packages/frontend/editor-ui/src/components/FilterConditions/Condition.vue b/packages/frontend/editor-ui/src/components/FilterConditions/Condition.vue index f8e4e1b7217..b20d76a17a6 100644 --- a/packages/frontend/editor-ui/src/components/FilterConditions/Condition.vue +++ b/packages/frontend/editor-ui/src/components/FilterConditions/Condition.vue @@ -256,7 +256,7 @@ const onBlur = (): void => { gap: var(--spacing-4xs); &.hasIssues { - --input-border-color: var(--color-danger); + --input-border-color: var(--color--danger); } &:hover { diff --git a/packages/frontend/editor-ui/src/components/FilterConditions/FilterConditions.vue b/packages/frontend/editor-ui/src/components/FilterConditions/FilterConditions.vue index 7b3f4180c54..fed4190261e 100644 --- a/packages/frontend/editor-ui/src/components/FilterConditions/FilterConditions.vue +++ b/packages/frontend/editor-ui/src/components/FilterConditions/FilterConditions.vue @@ -276,21 +276,21 @@ function getIssues(index: number): string[] { .addCondition { // Styling to match collection button (should move to standard button in future) 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-font-color: var(--color--text--shade-1); + --button-border-color: var(--color--foreground); + --button-background-color: var(--color--background); - --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-hover-font-color: var(--color--text--shade-1); + --button-hover-border-color: var(--color--foreground); + --button-hover-background-color: var(--color--background); - --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-active-font-color: var(--color--text--shade-1); + --button-active-border-color: var(--color--foreground); + --button-active-background-color: var(--color--background); - --button-focus-font-color: var(--color-text-dark); - --button-focus-border-color: var(--color-foreground-base); - --button-focus-background-color: var(--color-background-base); + --button-focus-font-color: var(--color--text--shade-1); + --button-focus-border-color: var(--color--foreground); + --button-focus-background-color: var(--color--background); &:hover, &:focus, @@ -304,11 +304,11 @@ function getIssues(index: number): string[] { padding-right: var(--spacing-xs); } .ghost { - background-color: var(--color-background-base); + background-color: var(--color--background); opacity: 0.5; } .dragging { - background-color: var(--color-background-xlight); + background-color: var(--color--background--light-3); opacity: 0.7; } .dragging > .combinator { diff --git a/packages/frontend/editor-ui/src/components/FilterConditions/OperatorSelect.vue b/packages/frontend/editor-ui/src/components/FilterConditions/OperatorSelect.vue index b79c6c82a9a..7b8d68fe4fb 100644 --- a/packages/frontend/editor-ui/src/components/FilterConditions/OperatorSelect.vue +++ b/packages/frontend/editor-ui/src/components/FilterConditions/OperatorSelect.vue @@ -123,7 +123,7 @@ function onGroupSelect(group: string) { diff --git a/packages/frontend/editor-ui/src/components/ImportWorkflowUrlModal.vue b/packages/frontend/editor-ui/src/components/ImportWorkflowUrlModal.vue index 71cf7ffc143..4ed22f32a91 100644 --- a/packages/frontend/editor-ui/src/components/ImportWorkflowUrlModal.vue +++ b/packages/frontend/editor-ui/src/components/ImportWorkflowUrlModal.vue @@ -83,7 +83,7 @@ const focusInput = async () => { diff --git a/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue index ac37ef6e42a..044b2044818 100644 --- a/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue +++ b/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue @@ -304,10 +304,10 @@ function hideGithubButton() { .main-header { min-height: var(--navbar--height); - background-color: var(--color-background-xlight); + background-color: var(--color--background--light-3); width: 100%; box-sizing: border-box; - border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); + border-bottom: var(--border-width-base) var(--border-style-base) var(--color--foreground); } .top-menu { @@ -326,8 +326,8 @@ function hideGithubButton() { align-items: center; align-self: stretch; padding: var(--spacing-5xs) var(--spacing-m); - background-color: var(--color-background-xlight); - border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); + background-color: var(--color--background--light-3); + border-left: var(--border-width-base) var(--border-style-base) var(--color--foreground); } .close-github-button { @@ -336,8 +336,8 @@ function hideGithubButton() { right: 0; top: 0; transform: translate(50%, -46%); - color: var(--color-foreground-xdark); - background-color: var(--color-background-xlight); + color: var(--color--foreground--shade-2); + background-color: var(--color--background--light-3); border-radius: 100%; cursor: pointer; diff --git a/packages/frontend/editor-ui/src/components/MainHeader/TabBar.vue b/packages/frontend/editor-ui/src/components/MainHeader/TabBar.vue index e89dbe50d2f..ce85c4607b4 100644 --- a/packages/frontend/editor-ui/src/components/MainHeader/TabBar.vue +++ b/packages/frontend/editor-ui/src/components/MainHeader/TabBar.vue @@ -47,7 +47,7 @@ function onUpdateModelValue(tab: string, event: MouseEvent): void { min-height: 30px; display: flex; padding: var(--spacing-5xs); - background-color: var(--color-foreground-base); + background-color: var(--color--foreground); border-radius: var(--border-radius-base); transition: all 150ms ease-in-out; z-index: 1; diff --git a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue index 900f058e009..781efae3c4d 100644 --- a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue +++ b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue @@ -1008,7 +1008,7 @@ $--header-spacing: 20px; .path-separator { font-size: var(--font-size-xl); - color: var(--color-foreground-base); + color: var(--color--foreground); padding: var(--spacing-3xs) var(--spacing-4xs) var(--spacing-4xs); } @@ -1022,7 +1022,7 @@ $--header-spacing: 20px; } .deleteItem { - color: var(--color-danger); + color: var(--color--danger); } .disabledShareButton { diff --git a/packages/frontend/editor-ui/src/components/MainSidebar.vue b/packages/frontend/editor-ui/src/components/MainSidebar.vue index 8807de00bca..c79d46b02ee 100644 --- a/packages/frontend/editor-ui/src/components/MainSidebar.vue +++ b/packages/frontend/editor-ui/src/components/MainSidebar.vue @@ -688,9 +688,9 @@ onClickOutside(createBtn as Ref, () => { height: 100%; display: flex; flex-direction: column; - border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); + border-right: var(--border-width-base) var(--border-style-base) var(--color--foreground); width: $sidebar-expanded-width; - background-color: var(--menu-background, var(--color-background-xlight)); + background-color: var(--menu-background, var(--color--background--light-3)); .logo { display: flex; @@ -730,15 +730,15 @@ onClickOutside(createBtn as Ref, () => { display: flex; justify-content: center; align-items: center; - color: var(--color-text-base); - background-color: var(--color-foreground-xlight); + color: var(--color--text); + background-color: var(--color--foreground--tint-2); width: 20px; height: 20px; - border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); + border: var(--border-width-base) var(--border-style-base) var(--color--foreground); border-radius: 50%; &:hover { - color: var(--color-primary-shade-1); + color: var(--color--primary--shade-1); } } @@ -766,7 +766,7 @@ onClickOutside(createBtn as Ref, () => { display: flex; padding: var(--spacing-xs); align-items: center; - border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); + border-top: var(--border-width-base) var(--border-style-base) var(--color--foreground); .userName { display: none; @@ -809,7 +809,7 @@ onClickOutside(createBtn as Ref, () => { .readOnlyEnvironmentIcon { display: inline-block; color: white; - background-color: var(--color-warning); + background-color: var(--color--warning); align-self: center; padding: 2px; border-radius: var(--border-radius-small); diff --git a/packages/frontend/editor-ui/src/components/MainSidebarSourceControl.vue b/packages/frontend/editor-ui/src/components/MainSidebarSourceControl.vue index edc4df0a65f..8278a519d13 100644 --- a/packages/frontend/editor-ui/src/components/MainSidebarSourceControl.vue +++ b/packages/frontend/editor-ui/src/components/MainSidebarSourceControl.vue @@ -150,13 +150,13 @@ function pullWorkfolder() { diff --git a/packages/frontend/editor-ui/src/components/MfaSetupModal.vue b/packages/frontend/editor-ui/src/components/MfaSetupModal.vue index cdaa84ca51a..23874de7fbe 100644 --- a/packages/frontend/editor-ui/src/components/MfaSetupModal.vue +++ b/packages/frontend/editor-ui/src/components/MfaSetupModal.vue @@ -347,7 +347,7 @@ onMounted(async () => { } .form:first-child span { - color: var(--color-text-base); + color: var(--color--text); font-weight: var(--font-weight-regular); font-size: var(--font-size-s); } @@ -356,7 +356,7 @@ onMounted(async () => { height: 30px; } .secret { - color: var(--color-primary); + color: var(--color--primary); font-weight: var(--font-weight-bold); } @@ -365,11 +365,11 @@ onMounted(async () => { } .error input { - border-color: var(--color-danger); + border-color: var(--color--danger); } .error > div > span { - color: var(--color-danger); + color: var(--color--danger); font-size: var(--font-size-2xs); } diff --git a/packages/frontend/editor-ui/src/components/Modal.vue b/packages/frontend/editor-ui/src/components/Modal.vue index 7f1f334c25c..21212144cf2 100644 --- a/packages/frontend/editor-ui/src/components/Modal.vue +++ b/packages/frontend/editor-ui/src/components/Modal.vue @@ -230,7 +230,7 @@ function getCustomClass() { display: flex; align-items: center; justify-content: center; - color: var(--color-primary-tint-1); + color: var(--color--primary--tint-1); font-size: 30px; height: 80%; } diff --git a/packages/frontend/editor-ui/src/components/MultipleParameter.vue b/packages/frontend/editor-ui/src/components/MultipleParameter.vue index ec22283758d..c6c6faaf266 100644 --- a/packages/frontend/editor-ui/src/components/MultipleParameter.vue +++ b/packages/frontend/editor-ui/src/components/MultipleParameter.vue @@ -197,8 +197,8 @@ const valueChanged = (parameterData: IUpdateInformation) => { diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue index 8abc0ec3b8e..a14db269b20 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue @@ -25,7 +25,7 @@ defineProps(); font-size: 10px; line-height: 12px; text-transform: uppercase; - color: var(--color-text-base); + color: var(--color--text); cursor: default; } diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue index a8dcadfb318..aca72309466 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue @@ -32,7 +32,7 @@ defineProps(); diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInstallHint.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInstallHint.vue index 65e454922a2..e89f106a049 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInstallHint.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInstallHint.vue @@ -27,7 +27,7 @@ defineProps(); margin: var(--spacing-xs); margin-top: 0; padding: var(--spacing-xs); - border: var(--border-width-base) solid var(--color-foreground-base); + border: var(--border-width-base) solid var(--color--foreground); border-radius: 0.25em; pointer-events: none; cursor: default; diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue index 5d8e0eafd93..c1f4106a346 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue @@ -303,10 +303,10 @@ function onBackButton() { flex-shrink: 0; } .nodesListPanel { - background: var(--color-background-xlight); + background: var(--color--background--light-3); height: 100%; background-color: $node-creator-background-color; - --color-background-node-icon-badge: var(--color-background-xlight); + --color-background-node-icon-badge: var(--color--background--light-3); width: var(--node-creator-width); display: flex; flex-direction: column; @@ -322,11 +322,11 @@ function onBackButton() { } .footer { font-size: var(--font-size-2xs); - color: var(--color-text-base); + color: var(--color--text); margin: 0 var(--spacing-xs) 0; padding: var(--spacing-4xs) 0; line-height: var(--font-line-height-regular); - border-top: 1px solid var(--color-foreground-base); + border-top: 1px solid var(--color--foreground); z-index: 1; margin-top: -1px; } @@ -362,7 +362,7 @@ function onBackButton() { font-size: var(--font-size-s); line-height: 19px; - color: var(--color-text-base); + color: var(--color--text); font-weight: var(--font-weight-regular); } .offsetSubtitle { diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue index 962614098f9..2972b73c256 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue @@ -89,7 +89,7 @@ defineExpose({ border-radius: 4px; &:focus-within { - border-color: var(--color-secondary); + border-color: var(--color--secondary); } } @@ -112,8 +112,8 @@ defineExpose({ outline: none; font-size: var(--font-size-s); appearance: none; - background-color: var(--color-background-xlight); - color: var(--color-text-dark); + background-color: var(--color--background--light-3); + color: var(--color--text--shade-1); &::placeholder, &::-webkit-input-placeholder { diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue index 73a33abb8f6..c013914ff29 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue @@ -151,9 +151,9 @@ registerKeyHook(`CategoryLeft_${props.category}`, { .mouseOverTooltip { opacity: 0; margin-left: var(--spacing-3xs); - color: var(--color-foreground-xdark); + color: var(--color--foreground--shade-2); &:hover { - color: var(--color-primary); + color: var(--color--primary); } .categorizedItemsRenderer:hover & { diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue index 54c380438d7..7bb1d21909d 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue @@ -278,7 +278,7 @@ watch( top: 0; margin: auto; bottom: 0; - border-top: 1px solid var(--color-foreground-base); + border-top: 1px solid var(--color--foreground); } } } @@ -297,7 +297,7 @@ watch( top: 0; margin: auto; bottom: 0; - border-bottom: 1px solid var(--color-foreground-base); + border-bottom: 1px solid var(--color--foreground); } } } diff --git a/packages/frontend/editor-ui/src/components/NodeActionsList.vue b/packages/frontend/editor-ui/src/components/NodeActionsList.vue index 1c2059f7f18..98402bb21c8 100644 --- a/packages/frontend/editor-ui/src/components/NodeActionsList.vue +++ b/packages/frontend/editor-ui/src/components/NodeActionsList.vue @@ -133,7 +133,7 @@ watch( &.selected, &:hover { - background-color: var(--color-background-base); + background-color: var(--color--background); } } diff --git a/packages/frontend/editor-ui/src/components/NodeCredentials.vue b/packages/frontend/editor-ui/src/components/NodeCredentials.vue index c1fbe8b07a3..e1fb8105c40 100644 --- a/packages/frontend/editor-ui/src/components/NodeCredentials.vue +++ b/packages/frontend/editor-ui/src/components/NodeCredentials.vue @@ -557,7 +557,7 @@ async function onClickCreateCredential(type: ICredentialType | INodeCredentialDe .warning { margin-left: var(--spacing-4xs); - color: var(--color-danger-light); + color: var(--color--danger--tint-1); font-size: var(--font-size-s); } @@ -565,7 +565,7 @@ async function onClickCreateCredential(type: ICredentialType | INodeCredentialDe display: flex; justify-content: center; align-items: center; - color: var(--color-text-base); + color: var(--color--text); margin-left: var(--spacing-3xs); font-size: var(--font-size-s); } @@ -577,7 +577,7 @@ async function onClickCreateCredential(type: ICredentialType | INodeCredentialDe .hasIssues { composes: input; - --input-border-color: var(--color-danger); + --input-border-color: var(--color--danger); } .credentialOption { @@ -591,14 +591,14 @@ async function onClickCreateCredential(type: ICredentialType | INodeCredentialDe align-items: center; font-weight: var(--font-weight-bold); padding: var(--spacing-xs) var(--spacing-m); - background-color: var(--color-background-light); + background-color: var(--color--background--light-2); border-top: var(--border-base); box-shadow: var(--box-shadow-light); clip-path: inset(-12px 0 0 0); // Only show box shadow on top &:hover { - color: var(--color-primary); + color: var(--color--primary); } } diff --git a/packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue b/packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue index ec72ff0b9ae..800cc6b9919 100644 --- a/packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue +++ b/packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue @@ -883,7 +883,7 @@ onBeforeUnmount(() => { background: var(--border-color-base); border: var(--border-base); border-radius: var(--border-radius-large); - color: var(--color-text-base); + color: var(--color--text); min-width: 0; } diff --git a/packages/frontend/editor-ui/src/components/NodeList.vue b/packages/frontend/editor-ui/src/components/NodeList.vue index 8a34bb5b81d..3b808864f37 100644 --- a/packages/frontend/editor-ui/src/components/NodeList.vue +++ b/packages/frontend/editor-ui/src/components/NodeList.vue @@ -75,12 +75,12 @@ const countNodesToBeSliced = (nodes: ITemplatesNode[]): number => { display: flex; justify-content: center; align-items: center; - background: var(--color-background-light); - border: 1px var(--color-foreground-base) solid; + background: var(--color--background--light-2); + border: 1px var(--color--foreground) solid; border-radius: var(--border-radius-base); font-size: 10px; font-weight: var(--font-weight-bold); - color: var(--color-text-base); + color: var(--color--text); } .buttonSm { margin-left: var(--spacing-2xs); diff --git a/packages/frontend/editor-ui/src/components/NodeSettings.vue b/packages/frontend/editor-ui/src/components/NodeSettings.vue index 43eaf0840cc..d6e0396eb56 100644 --- a/packages/frontend/editor-ui/src/components/NodeSettings.vue +++ b/packages/frontend/editor-ui/src/components/NodeSettings.vue @@ -814,7 +814,7 @@ function handleSelectAction(params: INodeParameters) { @@ -839,7 +839,7 @@ function handleSelectAction(params: INodeParameters) { display: flex; flex-direction: column; overflow: hidden; - background-color: var(--color-background-xlight); + background-color: var(--color--background--light-3); height: 100%; width: 100%; @@ -895,14 +895,14 @@ function handleSelectAction(params: INodeParameters) { } &::-webkit-scrollbar-thumb { border-radius: var(--spacing-2xs); - background: var(--color-foreground-dark); - border: var(--spacing-5xs) solid var(--color-background-xlight); + background: var(--color--foreground--shade-1); + border: var(--spacing-5xs) solid var(--color--background--light-3); } } } &.dragging { - border-color: var(--color-primary); + border-color: var(--color--primary); box-shadow: 0 6px 16px rgba(255, 74, 51, 0.15); } } @@ -947,7 +947,7 @@ function handleSelectAction(params: INodeParameters) { font-size: var(--font-size-xs); font-size: var(--font-size-2xs); padding: var(--spacing-xs) 0 var(--spacing-2xs) 0; - color: var(--color-text-light); + color: var(--color--text--tint-1); } .parameter-value { diff --git a/packages/frontend/editor-ui/src/components/NodeSettingsHeader.vue b/packages/frontend/editor-ui/src/components/NodeSettingsHeader.vue index 29e2463fb80..716b6f5cbd7 100644 --- a/packages/frontend/editor-ui/src/components/NodeSettingsHeader.vue +++ b/packages/frontend/editor-ui/src/components/NodeSettingsHeader.vue @@ -57,7 +57,7 @@ const emit = defineEmits<{ diff --git a/packages/frontend/editor-ui/src/components/NodesInWorkflowTable.vue b/packages/frontend/editor-ui/src/components/NodesInWorkflowTable.vue index c6f63775a68..c4c4c74baa2 100644 --- a/packages/frontend/editor-ui/src/components/NodesInWorkflowTable.vue +++ b/packages/frontend/editor-ui/src/components/NodesInWorkflowTable.vue @@ -76,7 +76,7 @@ const getWorkflowLink = (workflowId: string): RouteLocationRaw => ({ >