github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-27 14:57:21 +02:00
Code Issues Actions 52 Packages Projects Releases Wiki Activity Graph

chore: Update main color scss variables (#20594)

Browse Source
This commit is contained in:
Mutasem Aldmour 2025-10-09 15:19:17 +02:00 committed by GitHub
parent ab0f5a61ae
commit 4faf3f3e04
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
377 changed files with 1916 additions and 1919 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/frontend/@n8n/chat/README.md
View File

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

2
packages/frontend/@n8n/chat/src/components/Chat.vue
View File

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

2
packages/frontend/@n8n/chat/src/components/Input.vue
View File

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

2
packages/frontend/@n8n/chat/src/components/MessagesList.vue
View File

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

2
packages/frontend/@n8n/chat/src/components/PoweredBy.vue
View File

@ -10,7 +10,7 @@
text-align: center;
a {
color: var(--chat--color-primary);
color: var(--chat--color--primary);
text-decoration: none;
}
}

28
packages/frontend/@n8n/chat/src/css/_tokens.scss
View File

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

18
packages/frontend/@n8n/design-system/.storybook/preview.ts
View File

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

2
packages/frontend/@n8n/design-system/src/components/AskAssistantButton/AskAssistantButton.vue
View File

@ -54,7 +54,7 @@ function onMouseLeave() {
<style lang="scss" module>
.button {
border: var(--border-base);
background: var(--color-foreground-xlight);
background: var(--color--foreground--tint-2);
border-radius: var(--border-radius-base);
display: flex;
align-items: center;

18
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
View File

@ -377,7 +377,7 @@ function getMessageColor(message: ChatUI.AssistantMessage): string | undefined {
if (message.type === 'text' && message.role === 'assistant') {
const isTaskAbortedMessage = message.content === t('aiAssistant.builder.streamAbortedMessage');
if (isTaskAbortedMessage) {
return 'var(--color-text-base)';
return 'var(--color--text)';
}
}
return undefined;
@ -571,13 +571,13 @@ defineExpose({
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
background-color: var(--color-background-light);
background-color: var(--color--background--light-2);
}
.header {
height: 65px; // same as header height in editor
padding: 0 var(--spacing-l);
background-color: var(--color-background-xlight);
background-color: var(--color--background--light-3);
border: var(--border-base);
border-top: 0;
display: flex;
@ -593,13 +593,13 @@ defineExpose({
}
.betaTag {
color: var(--color-text-base);
color: var(--color--text);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
}
.body {
background-color: var(--color-background-light);
background-color: var(--color--background--light-2);
border: var(--border-base);
border-top: 0;
border-bottom: 0;
@ -669,14 +669,14 @@ defineExpose({
}
.greeting {
color: var(--color-text-dark);
color: var(--color--text--shade-1);
font-size: var(--font-size-m);
margin-bottom: var(--spacing-s);
}
.info {
font-size: var(--font-size-s);
color: var(--color-text-base);
color: var(--color--text);
button {
display: inline-flex;
@ -697,7 +697,7 @@ defineExpose({
.quickRepliesTitle {
font-size: var(--font-size-3xs);
color: var(--color-text-base);
color: var(--color--text);
}
.inputWrapper {
@ -716,7 +716,7 @@ defineExpose({
left: 0;
right: var(--spacing-xs);
height: var(--spacing-m);
background: linear-gradient(to bottom, transparent 0%, var(--color-background-light) 100%);
background: linear-gradient(to bottom, transparent 0%, var(--color--background--light-2) 100%);
pointer-events: none;
z-index: 1;
}

2
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/BlockMessage.vue
View File

@ -48,7 +48,7 @@ const { renderMarkdown } = useMarkdown();
<style lang="scss" module>
.block {
font-size: var(--font-size-2xs);
background-color: var(--color-foreground-xlight);
background-color: var(--color--foreground--tint-2);
border: var(--border-base);
border-radius: var(--border-radius-base);
word-break: break-word;

8
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ErrorMessage.vue
View File

@ -45,18 +45,18 @@ const { t } = useI18n();
align-items: center;
gap: var(--spacing-2xs);
padding: var(--spacing-2xs) var(--spacing-xs);
border: 1px solid var(--color-foreground-base);
border: 1px solid var(--color--foreground);
border-radius: var(--border-radius-base);
background-color: var(--color-background-xlight);
background-color: var(--color--background--light-3);
}
.errorIcon {
margin-right: var(--spacing-5xs);
color: var(--color-danger);
color: var(--color--danger);
}
.errorText {
color: var(--color-danger);
color: var(--color--danger);
font-weight: var(--font-weight-regular);
line-height: var(--font-line-height-tight);
word-break: break-word;

2
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/EventMessage.vue
View File

@ -58,7 +58,7 @@ const eventMessages: Record<EventName, { part1: string; part2: string }> = {
margin-top: var(--spacing-l);
padding-top: var(--spacing-3xs);
border-top: var(--border-base);
color: var(--color-text-base);
color: var(--color--text);
> button,
> span {

8
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/MessageRating.vue
View File

@ -179,7 +179,7 @@ function onCancelFeedback() {
}
.success {
color: var(--color-text-base);
color: var(--color--text);
font-size: var(--font-size-2xs);
margin: 0;
}
@ -193,9 +193,9 @@ function onCancelFeedback() {
}
.ratingButton {
--button-hover-background-color: var(--color-foreground-light);
--button-hover-font-color: var(--color-text-base);
--button-font-color: var(--color-text-base);
--button-hover-background-color: var(--color--foreground--tint-1);
--button-hover-font-color: var(--color--text);
--button-font-color: var(--color--text);
}
.feedbackContainer {

2
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue
View File

@ -101,7 +101,7 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
.codeSnippet {
position: relative;
border: var(--border-base);
background-color: var(--color-foreground-xlight);
background-color: var(--color--foreground--tint-2);
border-radius: var(--border-radius-base);
font-family: var(--font-family-monospace);
font-size: var(--font-size-3xs);

10
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ToolMessage.vue
View File

@ -120,11 +120,11 @@ const statusColor = computed(() => {
}
&.status-completed {
color: var(--color-success);
color: var(--color--success);
}
&.status-error {
color: var(--color-text-danger);
color: var(--color--text--danger);
}
}
@ -136,15 +136,15 @@ const statusColor = computed(() => {
.sectionTitle {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xs);
color: var(--color-text-dark);
color: var(--color--text--shade-1);
margin-bottom: var(--spacing-3xs);
}
.errorContent {
color: var(--color-danger);
color: var(--color--danger);
font-size: var(--font-size-2xs);
padding: var(--spacing-xs);
background-color: var(--color-danger-tint-2);
background-color: var(--color--danger--tint-4);
border-radius: var(--border-radius-base);
}
</style>

2
packages/frontend/@n8n/design-system/src/components/AskAssistantIcon/AssistantIcon.vue
View File

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

4
packages/frontend/@n8n/design-system/src/components/BetaTag/BetaTag.vue
View File

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

2
packages/frontend/@n8n/design-system/src/components/BlinkingCursor/BlinkingCursor.vue
View File

@ -19,7 +19,7 @@
background-color: transparent;
}
50% {
background-color: var(--color-foreground-xdark);
background-color: var(--color--foreground--shade-2);
}
}
</style>

16
packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
View File

@ -144,7 +144,7 @@ const diffs = computed(() => {
<style lang="scss" module>
.container {
border: var(--border-base);
background-color: var(--color-foreground-xlight);
background-color: var(--color--foreground--tint-2);
border-radius: var(--border-radius-base);
}
@ -171,7 +171,7 @@ const diffs = computed(() => {
border-top: var(--border-base);
border-bottom: var(--border-base);
max-height: 218px; // 12 lines
background-color: var(--color-background-base);
background-color: var(--color--background);
font-family: var(--font-family-monospace);
}
@ -194,17 +194,17 @@ const diffs = computed(() => {
}
.add {
color: var(--color-success);
background-color: var(--color-success-tint-2);
color: var(--color--success);
background-color: var(--color--success--tint-4);
}
.del {
color: var(--color-danger);
background-color: var(--color-danger-tint-2);
color: var(--color--danger);
background-color: var(--color--danger--tint-4);
}
.normal {
background-color: var(--color-foreground-xlight);
background-color: var(--color--foreground--tint-2);
}
.actions {
@ -218,7 +218,7 @@ const diffs = computed(() => {
}
.infoText {
color: var(--color-text-light);
color: var(--color--text--tint-1);
font-size: var(--font-size-xs);
margin-left: var(--spacing-4xs);
}

4
packages/frontend/@n8n/design-system/src/components/InlineAskAssistantButton/InlineAskAssistantButton.vue
View File

@ -107,8 +107,8 @@ const onClick = () => {
.asked {
cursor: not-allowed;
background: var(--color-foreground-base);
color: var(--color-text-light);
background: var(--color--foreground);
color: var(--color--text--tint-1);
}
.icon {

2
packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.stories.ts
View File

@ -15,7 +15,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

4
packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue
View File

@ -74,7 +74,7 @@ withDefaults(defineProps<ActionBoxProps>(), {
<style lang="scss" module>
.container {
border: 2px dashed var(--color-foreground-base);
border: 2px dashed var(--color--foreground);
border-radius: var(--border-radius-large);
display: flex;
flex-direction: column;
@ -100,7 +100,7 @@ withDefaults(defineProps<ActionBoxProps>(), {
}
.description {
color: var(--color-text-base);
color: var(--color--text);
margin-bottom: var(--spacing-xl);
text-align: center;
}

2
packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
View File

@ -185,7 +185,7 @@ defineExpose({ open, close });
.activator {
&:hover {
background-color: var(--color-background-base);
background-color: var(--color--background);
}
}

2
packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
View File

@ -17,7 +17,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

10
packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue
View File

@ -144,20 +144,20 @@ defineExpose({
align-items: center;
&:hover {
color: var(--color-primary);
color: var(--color--primary);
cursor: pointer;
}
&:focus {
color: var(--color-primary);
color: var(--color--primary);
}
}
.dark {
color: var(--color-text-dark);
color: var(--color--text--shade-1);
&:focus {
background-color: var(--color-background-xlight);
background-color: var(--color--background--light-3);
}
}
@ -166,7 +166,7 @@ defineExpose({
}
li:hover .iconContainer svg {
color: var(--color-primary-tint-1);
color: var(--color--primary--tint-1);
}
.loading-dropdown {

30
packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.vue
View File

@ -95,15 +95,15 @@ const alertBoxClassNames = computed(() => {
&.success {
&.light {
color: var(--color-success);
color: var(--color--success);
&.background {
background-color: var.$color-success-lighter;
border-color: var(--color-success);
border-color: var(--color--success);
}
.el-alert__description {
color: var(--color-success);
color: var(--color--success);
}
}
@ -111,11 +111,11 @@ const alertBoxClassNames = computed(() => {
color: var.$color-white;
&:not(.background) {
color: var(--color-success);
color: var(--color--success);
}
&.background {
background-color: var(--color-success);
background-color: var(--color--success);
border-color: var.$color-white;
}
}
@ -151,15 +151,15 @@ const alertBoxClassNames = computed(() => {
&.warning {
&.light {
color: var(--color-warning);
color: var(--color--warning);
&.background {
background-color: var.$alert-warning-color;
border-color: var(--color-warning);
border-color: var(--color--warning);
}
.el-alert__description {
color: var(--color-warning);
color: var(--color--warning);
}
}
@ -167,11 +167,11 @@ const alertBoxClassNames = computed(() => {
color: var.$color-white;
&:not(.background) {
color: var(--color-warning);
color: var(--color--warning);
}
&.background {
background-color: var(--color-warning);
background-color: var(--color--warning);
border-color: var.$color-white;
}
}
@ -179,15 +179,15 @@ const alertBoxClassNames = computed(() => {
&.error {
&.light {
color: var(--color-danger);
color: var(--color--danger);
&.background {
background-color: var.$alert-danger-color;
border-color: var(--color-danger);
border-color: var(--color--danger);
}
.el-alert__description {
color: var(--color-danger);
color: var(--color--danger);
}
}
@ -195,11 +195,11 @@ const alertBoxClassNames = computed(() => {
color: var.$color-white;
&:not(.background) {
color: var(--color-danger);
color: var(--color--danger);
}
&.background {
background-color: var(--color-danger);
background-color: var(--color--danger);
border-color: var.$color-white;
}
}

8
packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.vue
View File

@ -17,11 +17,11 @@ const props = withDefaults(defineProps<AvatarProps>(), {
lastName: '',
size: 'medium',
colors: () => [
'--color-primary',
'--color-secondary',
'--color--primary',
'--color--secondary',
'--color-avatar-accent-1',
'--color-avatar-accent-2',
'--color-primary-tint-1',
'--color--primary--tint-1',
],
});
@ -73,7 +73,7 @@ const getSize = (size: string): number => sizes[size];
.empty {
display: block;
border-radius: 50%;
background-color: var(--color-foreground-dark);
background-color: var(--color--foreground--shade-1);
opacity: 0.3;
}

30
packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.vue
View File

@ -42,52 +42,52 @@ withDefaults(defineProps<BadgeProps>(), {
.default {
composes: badge;
border-radius: var(--border-radius-base);
color: var(--color-text-light);
border-color: var(--color-text-light);
color: var(--color--text--tint-1);
border-color: var(--color--text--tint-1);
}
.success {
composes: badge;
border-radius: var(--border-radius-base);
color: var(--color-success);
border-color: var(--color-success);
color: var(--color--success);
border-color: var(--color--success);
}
.warning {
composes: badge;
border-radius: var(--border-radius-base);
color: var(--color-warning);
border-color: var(--color-warning);
color: var(--color--warning);
border-color: var(--color--warning);
}
.danger {
composes: badge;
border-radius: var(--border-radius-base);
color: var(--color-danger);
border-color: var(--color-danger);
color: var(--color--danger);
border-color: var(--color--danger);
}
.primary {
composes: badge;
padding: var(--spacing-5xs) var(--spacing-3xs);
border-radius: var(--border-radius-xlarge);
color: var(--color-foreground-xlight);
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color--foreground--tint-2);
background-color: var(--color--primary);
border-color: var(--color--primary);
}
.secondary {
composes: badge;
border-radius: var(--border-radius-xlarge);
color: var(--color-secondary);
background-color: var(--color-secondary-tint-1);
color: var(--color--secondary);
background-color: var(--color--secondary--tint-1);
}
.tertiary {
composes: badge;
border-radius: var(--border-radius-base);
color: var(--color-text-light);
border-color: var(--color-text-light);
color: var(--color--text--tint-1);
border-color: var(--color--text--tint-1);
padding: 1px var(--spacing-5xs);
}
</style>

36
packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue
View File

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

70
packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss
View File

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

88
packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
View File

@ -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 {

6
packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue
View File

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

10
packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts
View File

@ -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: `
<div>
<p style="margin-bottom: 20px; color: var(--color-text-base);">
Press <kbd style="background: var(--color-background-base); padding: 2px 6px; border-radius: 3px;">⌘ + K</kbd>
or <kbd style="background: var(--color-background-base); padding: 2px 6px; border-radius: 3px;">Ctrl + K</kbd>
<p style="margin-bottom: 20px; color: var(--color--text);">
Press <kbd style="background: var(--color--background); padding: 2px 6px; border-radius: 3px;">⌘ + K</kbd>
or <kbd style="background: var(--color--background); padding: 2px 6px; border-radius: 3px;">Ctrl + K</kbd>
to open the command bar. Use arrow keys to navigate and Enter to select.
</p>
<n8n-command-bar
@ -198,7 +198,7 @@ export const SectionGrouping: StoryFn = () => ({
}),
template: `
<div>
<p style="margin-bottom: 20px; color: var(--color-text-base);">
<p style="margin-bottom: 20px; color: var(--color--text);">
This example shows how items are grouped by sections:
<br/>• <strong>Recent items</strong> (no section) appear first
<br/>• Then items are grouped by <strong>Actions</strong>, <strong>Navigation</strong>, <strong>Tools</strong>, and <strong>Settings</strong> sections

10
packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue
View File

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

10
packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBarItem.vue
View File

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

26
packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue
View File

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

12
packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.vue
View File

@ -32,7 +32,7 @@ withDefaults(defineProps<ExternalLinkProps>(), {
<style lang="scss" module>
.link {
color: var(--color-text-base);
color: var(--color--text);
text-decoration: none;
display: inline-flex;
align-items: center;
@ -45,20 +45,20 @@ withDefaults(defineProps<ExternalLinkProps>(), {
font-weight: var(--font-weight-regular);
svg {
color: var(--color-text-light);
color: var(--color--text--tint-1);
}
&:hover {
color: var(--color-primary);
background: var(--color-foreground-light);
color: var(--color--primary);
background: var(--color--foreground--tint-1);
svg {
color: var(--color-primary);
color: var(--color--primary);
}
}
&:active {
color: var(--color-primary-shade-1);
color: var(--color--primary--shade-1);
}
}
</style>

2
packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts
View File

@ -8,7 +8,7 @@ export default {
component: N8nFormBox,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

2
packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.vue
View File

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

6
packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.vue
View File

@ -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 {

2
packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
View File

@ -8,7 +8,7 @@ export default {
component: N8nFormInputs,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

12
packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.vue
View File

@ -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 {

2
packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts
View File

@ -19,7 +19,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

10
packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
View File

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

2
packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts
View File

@ -8,7 +8,7 @@ export default {
component: N8nInfoAccordion,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

2
packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
View File

@ -89,7 +89,7 @@ const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick',
<style lang="scss" module>
.container {
background-color: var(--color-background-base);
background-color: var(--color--background);
}
.header {

6
packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue
View File

@ -144,7 +144,7 @@ defineExpose({ forceFocus, forceCancel });
width: calc(100% + var(--spacing-xs));
height: calc(100% + var(--spacing-2xs));
border-radius: var(--border-radius-base);
background-color: var(--color-foreground-xlight);
background-color: var(--color--foreground--tint-2);
opacity: 0;
z-index: 0;
transition: all 0.1s ease-in-out;
@ -153,7 +153,7 @@ defineExpose({ forceFocus, forceCancel });
&[data-focused],
&:hover {
&::after {
border: 1px solid var(--color-foreground-base);
border: 1px solid var(--color--foreground);
opacity: 1;
}
}
@ -161,7 +161,7 @@ defineExpose({ forceFocus, forceCancel });
&[data-focused] {
cursor: text;
&::after {
border: 1px solid var(--color-secondary);
border: 1px solid var(--color--secondary);
}
}
}

2
packages/frontend/@n8n/design-system/src/components/N8nInput/Input.stories.ts
View File

@ -26,7 +26,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

2
packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
View File

@ -8,7 +8,7 @@ export default {
component: N8nInputLabel,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

10
packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue
View File

@ -136,7 +136,7 @@ const addTargetBlank = (html: string) =>
opacity: 1;
&:hover {
color: var(--color-text-base);
color: var(--color--text);
}
}
}
@ -191,7 +191,7 @@ const addTargetBlank = (html: string) =>
.infoIcon {
display: flex;
align-items: center;
color: var(--color-text-light);
color: var(--color--text--tint-1);
margin-left: var(--spacing-4xs);
z-index: 1;
}
@ -224,7 +224,7 @@ const addTargetBlank = (html: string) =>
background: linear-gradient(
270deg,
var(--color-foreground-xlight) 72.19%,
var(--color--foreground--tint-2) 72.19%,
rgba(255, 255, 255, 0) 107.45%
);
}
@ -272,9 +272,9 @@ const addTargetBlank = (html: string) =>
}
code {
color: var(--color-text-dark);
color: var(--color--text--shade-1);
font-size: var(--font-size-3xs);
background: var(--color-background-medium);
background: var(--color--background--shade-1);
padding: var(--spacing-5xs);
border-radius: var(--border-radius-base);
}

2
packages/frontend/@n8n/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
View File

@ -45,7 +45,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

6
packages/frontend/@n8n/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue
View File

@ -48,12 +48,12 @@ const keys = computed(() => {
height: 18px;
min-width: 18px;
padding: 0 var(--spacing-4xs);
border: solid 1px var(--color-foreground-base);
background: var(--color-background-base);
border: solid 1px var(--color--foreground);
background: var(--color--background);
}
.key {
color: var(--color-text-base);
color: var(--color--text);
font-size: var(--font-size-3xs);
}
</style>

6
packages/frontend/@n8n/design-system/src/components/N8nLink/Link.vue
View File

@ -50,7 +50,7 @@ withDefaults(defineProps<LinkProps>(), {
}
.text {
color: var(--color-text-base);
color: var(--color--text);
&:hover {
color: var.$link-color;
@ -62,10 +62,10 @@ withDefaults(defineProps<LinkProps>(), {
}
.danger {
color: var(--color-danger);
color: var(--color--danger);
&:active {
color: var(--color-danger-shade-1);
color: var(--color--danger--shade-1);
}
}

2
packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.vue
View File

@ -72,7 +72,7 @@ onMounted(() => {
.logoText {
margin-left: var(--spacing-5xs);
path {
fill: var(--color-text-dark);
fill: var(--color--text--shade-1);
}
}

14
packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.vue
View File

@ -246,7 +246,7 @@ const onCheckboxChange = (index: number) => {
<style lang="scss" module>
.markdown {
color: var(--color-text-base);
color: var(--color--text);
* {
font-size: var(--font-size-m);
@ -283,19 +283,19 @@ const onCheckboxChange = (index: number) => {
}
pre > code {
background-color: var(--color-background-base);
color: var(--color-text-dark);
background-color: var(--color--background);
color: var(--color--text--shade-1);
}
li > code,
p > code {
padding: 0 var(--spacing-4xs);
color: var(--color-text-dark);
background-color: var(--color-background-base);
color: var(--color--text--shade-1);
background-color: var(--color--background);
}
.label {
color: var(--color-text-base);
color: var(--color--text);
}
img {
@ -311,7 +311,7 @@ const onCheckboxChange = (index: number) => {
}
input[type='checkbox'] {
accent-color: var(--color-primary);
accent-color: var(--color--primary);
}
input[type='checkbox'] + label {

18
packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.vue
View File

@ -100,7 +100,7 @@ const iconColor = computed(() => {
.router-link-active,
.active {
background-color: var(--color-foreground-base);
background-color: var(--color--foreground);
}
.menuItem {
@ -110,7 +110,7 @@ const iconColor = computed(() => {
padding: var(--spacing-3xs);
gap: var(--spacing-3xs);
cursor: pointer;
color: var(--color-text-base);
color: var(--color--text);
border-radius: var(--spacing-4xs);
cursor: pointer;
min-width: 0;
@ -118,17 +118,17 @@ const iconColor = computed(() => {
position: relative;
&:hover .menuItemIcon {
color: var(--color-text-dark);
color: var(--color--text--shade-1);
}
}
.menuItem:hover {
background-color: var(--color-foreground-base);
color: var(--color-text-dark);
background-color: var(--color--foreground);
color: var(--color--text--shade-1);
}
.menuItem:focus-visible {
outline: 1px solid var(--color-secondary);
outline: 1px solid var(--color--secondary);
outline-offset: -1px;
}
@ -142,7 +142,7 @@ const iconColor = computed(() => {
}
.menuItemText * {
color: var(--color-text-base);
color: var(--color--text);
}
.menuItemIcon {
@ -158,7 +158,7 @@ const iconColor = computed(() => {
right: calc(var(--spacing-5xs) * -1);
width: var(--spacing-4xs);
height: var(--spacing-4xs);
background-color: var(--color-danger);
background-color: var(--color--danger);
border-radius: 50%;
}
}
@ -170,7 +170,7 @@ const iconColor = computed(() => {
.menuItem.active {
.menuItemIcon {
color: var(--color-foreground-xdark);
color: var(--color--foreground--shade-2);
}
}
</style>

8
packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
View File

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

14
packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue
View File

@ -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);
}
</style>
<style lang="scss" scoped>
.el-tooltip svg {
color: var(--color-foreground-xdark);
color: var(--color--foreground--shade-2);
}
</style>

2
packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue
View File

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

8
packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.vue
View File

@ -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 {

2
packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts
View File

@ -32,7 +32,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

2
packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.stories.ts
View File

@ -89,7 +89,7 @@ const ScrollableTemplate: StoryFn = (args) => ({
<div style="display: flex; flex-direction: column; gap: 8px;">
<h3 style="margin: 0 0 12px 0; font-size: 14px; font-weight: 600;">Menu Items</h3>
<div v-for="i in 20" :key="i"
style="padding: 8px 12px; background: var(--color-background-base); border-radius: 4px; cursor: pointer; min-height: 40px; display: flex; align-items: center;"
style="padding: 8px 12px; background: var(--color--background); border-radius: 4px; cursor: pointer; min-height: 40px; display: flex; align-items: center;"
@click="close"
>
Menu Item {{ i }}: Some description text that explains what this item does

2
packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.vue
View File

@ -111,7 +111,7 @@ function handleOpenAutoFocus(e: Event) {
<style lang="scss" module>
.popoverContent {
border-radius: var(--border-radius-base);
background-color: var(--color-foreground-xlight);
background-color: var(--color--foreground--tint-2);
border: var(--border-base);
box-shadow:
rgba(0, 0, 0, 0.1) 0 10px 15px -3px,

10
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts
View File

@ -34,7 +34,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};
@ -346,12 +346,12 @@ const CreditsInteractiveTemplate: StoryFn = (args) => ({
},
template: `
<div style="max-width: 600px; margin: 20px;">
<div style="margin-bottom: 20px; padding: 20px; background: var(--color-background-base); border-radius: var(--border-radius-base);">
<h3 style="color: var(--color-text-dark); margin-bottom: 10px;">Credits Tracking Demo</h3>
<p style="color: var(--color-text-base); margin-bottom: 10px;">
<div style="margin-bottom: 20px; padding: 20px; background: var(--color--background); border-radius: var(--border-radius-base);">
<h3 style="color: var(--color--text--shade-1); margin-bottom: 10px;">Credits Tracking Demo</h3>
<p style="color: var(--color--text); margin-bottom: 10px;">
Each message consumes 1 credit. Credits renew at the beginning of next month.
</p>
<p style="color: var(--color-text-light); font-size: var(--font-size-s);">
<p style="color: var(--color--text--tint-1); font-size: var(--font-size-s);">
Credits remaining: {{ creditsRemaining }} / {{ creditsQuota }}
</p>
</div>

28
packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.vue
View File

@ -404,8 +404,8 @@ defineExpose({
<style lang="scss" module>
.wrapper {
background: var(--color-background-light);
border: 1px solid var(--color-foreground-base);
background: var(--color--background--light-2);
border: 1px solid var(--color--foreground);
border-radius: var(--border-radius-large);
}
@ -413,7 +413,7 @@ defineExpose({
position: relative;
display: flex;
flex-direction: column;
background: var(--color-background-xlight);
background: var(--color--background--light-3);
border: none;
border-bottom: 1px transparent solid;
border-radius: var(--border-radius-large);
@ -429,7 +429,7 @@ defineExpose({
}
&.focused {
box-shadow: 0 0 0 1px var(--color-secondary);
box-shadow: 0 0 0 1px var(--color--secondary);
border-bottom: 1px transparent solid;
}
@ -438,12 +438,12 @@ defineExpose({
}
&.disabled {
background-color: var(--color-background-base);
background-color: var(--color--background);
cursor: not-allowed;
textarea {
cursor: not-allowed;
color: var(--color-text-light);
color: var(--color--text--tint-1);
}
}
}
@ -469,7 +469,7 @@ defineExpose({
font-family: var(--font-family), sans-serif;
font-size: var(--font-size-2xs);
line-height: 24px;
color: var(--color-text-dark);
color: var(--color--text--shade-1);
padding: 0 var(--spacing-2xs);
height: 24px;
overflow: hidden;
@ -477,7 +477,7 @@ defineExpose({
display: block;
&::placeholder {
color: var(--color-text-light);
color: var(--color--text--tint-1);
}
}
@ -502,7 +502,7 @@ defineExpose({
font-family: var(--font-family), sans-serif;
font-size: var(--font-size-2xs);
line-height: 18px;
color: var(--color-text-dark);
color: var(--color--text--shade-1);
padding: var(--spacing-3xs);
margin-bottom: 0;
box-sizing: border-box;
@ -510,7 +510,7 @@ defineExpose({
overflow-y: hidden;
&::placeholder {
color: var(--color-text-light);
color: var(--color--text--tint-1);
}
}
@ -536,7 +536,7 @@ defineExpose({
display: flex;
align-items: center;
gap: var(--spacing-3xs);
color: var(--color-text-base);
color: var(--color--text);
font-size: var(--font-size-2xs);
b {
@ -554,17 +554,17 @@ defineExpose({
}
.noCredits {
color: var(--color-danger);
color: var(--color--danger);
}
// Common styles
.characterCount {
font-size: var(--font-size-3xs);
color: var(--color-text-light);
color: var(--color--text--tint-1);
padding: 0 var(--spacing-3xs);
.overLimit {
color: var(--color-danger);
color: var(--color--danger);
font-weight: var(--font-weight-bold);
}
}

10
packages/frontend/@n8n/design-system/src/components/N8nPromptInputSuggestions/N8nPromptInputSuggestions.vue
View File

@ -90,17 +90,17 @@ function onSuggestionClick(suggestion: WorkflowSuggestion) {
gap: var(--spacing-2xs);
border-radius: 56px;
border: var(--border-base);
background: var(--color-background-xlight);
background: var(--color--background--light-3);
cursor: pointer;
transition: all 0.2s ease;
font-size: var(--font-size-2xs);
color: var(--color-text-dark);
color: var(--color--text--shade-1);
font-weight: var(--font-weight-regular);
&:hover:not(:disabled) {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-background-xlight);
color: var(--color--primary);
border-color: var(--color--primary);
background: var(--color--background--light-3);
}
&:disabled {

2
packages/frontend/@n8n/design-system/src/components/N8nPulse/Pulse.stories.ts
View File

@ -7,7 +7,7 @@ export default {
component: N8nPulse,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

12
packages/frontend/@n8n/design-system/src/components/N8nPulse/Pulse.vue
View File

@ -14,16 +14,16 @@ defineOptions({ name: 'N8nPulse' });
<style lang="scss" module>
$--light-pulse-color: hsla(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-l),
var(--color--primary-h),
var(--color--primary-s),
var(--color--primary-l),
0.4
);
$--dark-pulse-color: hsla(
var(--color-primary-h),
var(--color-primary-s),
var(--color-primary-l),
var(--color--primary-h),
var(--color--primary-s),
var(--color--primary-l),
0
);

8
packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButton.vue
View File

@ -55,7 +55,7 @@ defineSlots<{ default?: {} }>();
.hoverable:hover {
.button:not(.active) {
color: var(--color-primary);
color: var(--color--primary);
}
}
@ -71,7 +71,7 @@ defineSlots<{ default?: {} }>();
align-items: center;
border-radius: var(--border-radius-base);
font-weight: var(--font-weight-medium);
color: var(--color-text-base);
color: var(--color--text);
transition: background-color 0.2s ease;
cursor: pointer;
user-select: none;
@ -121,7 +121,7 @@ defineSlots<{ default?: {} }>();
}
.active {
background-color: var(--color-foreground-xlight);
color: var(--color-text-dark);
background-color: var(--color--foreground--tint-2);
color: var(--color--text--shade-1);
}
</style>

2
packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
View File

@ -13,7 +13,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-xlight' },
backgrounds: { default: '--color--background--light-3' },
},
};

2
packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.vue
View File

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

8
packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts
View File

@ -40,7 +40,7 @@ const Template: StoryFn = (args) => ({
N8nScrollArea,
},
template: `
<div style="width: 300px; height: 200px; border: 1px solid var(--color-foreground-base); border-radius: 4px;">
<div style="width: 300px; height: 200px; border: 1px solid var(--color--foreground); border-radius: 4px;">
<N8nScrollArea v-bind="args">
<div style="padding: 16px;">
<h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Scrollable Content</h3>
@ -98,7 +98,7 @@ const HorizontalScrollTemplate: StoryFn = (args) => ({
N8nScrollArea,
},
template: `
<div style="width: 300px; height: 100px; border: 1px solid var(--color-foreground-base); border-radius: 4px;">
<div style="width: 300px; height: 100px; border: 1px solid var(--color--foreground); border-radius: 4px;">
<N8nScrollArea v-bind="args">
<div style="padding: 16px; white-space: nowrap; width: 600px;">
<span style="font-weight: 600;">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: `
<div style="width: 260px; padding: 16px; background-color: var(--color-foreground-xlight); border: var(--border-base); border-radius: var(--border-radius-base); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;">
<div style="width: 260px; padding: 16px; background-color: var(--color--foreground--tint-2); border: var(--border-base); border-radius: var(--border-radius-base); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;">
<N8nScrollArea v-bind="args">
<div style="display: flex; flex-direction: column; gap: 12px;">
<h3 style="margin: 0; font-size: 14px; font-weight: 600;">Long Menu Items</h3>
<div v-for="i in 15" :key="i" style="padding: 8px 12px; background: var(--color-background-base); border-radius: 4px; cursor: pointer;">
<div v-for="i in 15" :key="i" style="padding: 8px 12px; background: var(--color--background); border-radius: 4px; cursor: pointer;">
Menu item {{ i }}: Some descriptive text that might be quite long
</div>
</div>

16
packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.vue
View File

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

2
packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts
View File

@ -37,7 +37,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

4
packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue
View File

@ -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;
}
</style>

2
packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts
View File

@ -7,7 +7,7 @@ export default {
component: N8nSelectableList,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

2
packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.vue
View File

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

44
packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts
View File

@ -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 = () => ({
<div style="display: flex; flex-direction: column; gap: 20px;">
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button size="mini" @send="onSend" />
<span style="color: var(--color-text-base)">Mini</span>
<span style="color: var(--color--text)">Mini</span>
</div>
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button size="small" @send="onSend" />
<span style="color: var(--color-text-base)">Small</span>
<span style="color: var(--color--text)">Small</span>
</div>
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button size="medium" @send="onSend" />
<span style="color: var(--color-text-base)">Medium</span>
<span style="color: var(--color--text)">Medium</span>
</div>
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button size="large" @send="onSend" />
<span style="color: var(--color-text-base)">Large</span>
<span style="color: var(--color--text)">Large</span>
</div>
</div>
`,
@ -126,7 +126,7 @@ const InteractiveTemplate: StoryFn = () => ({
template: `
<div style="display: flex; flex-direction: column; gap: 30px;">
<div>
<h3 style="margin-bottom: 15px; color: var(--color-text-dark);">Interactive Demo</h3>
<h3 style="margin-bottom: 15px; color: var(--color--text--shade-1);">Interactive Demo</h3>
<div style="display: flex; align-items: center; gap: 20px;">
<n8n-send-stop-button
:streaming="streaming"
@ -135,22 +135,22 @@ const InteractiveTemplate: StoryFn = () => ({
@send="handleSend"
@stop="handleStop"
/>
<span style="color: var(--color-text-base)">
<span style="color: var(--color--text)">
{{ streaming ? 'Click to stop' : 'Click to send' }}
</span>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 10px;">
<label style="color: var(--color-text-base);">
<label style="color: var(--color--text);">
<input type="checkbox" v-model="streaming" />
Streaming ({{ streaming ? 'ON' : 'OFF' }})
</label>
<label style="color: var(--color-text-base);">
<label style="color: var(--color--text);">
<input type="checkbox" v-model="disabled" />
Disabled ({{ disabled ? 'ON' : 'OFF' }})
</label>
<label style="color: var(--color-text-base);">
<label style="color: var(--color--text);">
Size:
<select v-model="size" style="margin-left: 10px;">
<option value="mini">Mini</option>
@ -161,8 +161,8 @@ const InteractiveTemplate: StoryFn = () => ({
</label>
</div>
<div style="padding: 10px; background: var(--color-background-xlight); border-radius: 4px;">
<p style="color: var(--color-text-base); margin: 0;">Last action: {{ lastAction }}</p>
<div style="padding: 10px; background: var(--color--background--light-3); border-radius: 4px;">
<p style="color: var(--color--text); margin: 0;">Last action: {{ lastAction }}</p>
</div>
</div>
`,
@ -202,21 +202,21 @@ const StatesTemplate: StoryFn = () => ({
<div style="display: grid; grid-template-columns: repeat(2, 200px); gap: 20px;">
<div style="text-align: center;">
<n8n-send-stop-button :streaming="false" :disabled="false" />
<p style="color: var(--color-text-base); margin-top: 10px;">Send (Enabled)</p>
<p style="color: var(--color--text); margin-top: 10px;">Send (Enabled)</p>
</div>
<div style="text-align: center;">
<n8n-send-stop-button :streaming="false" :disabled="true" />
<p style="color: var(--color-text-base); margin-top: 10px;">Send (Disabled)</p>
<p style="color: var(--color--text); margin-top: 10px;">Send (Disabled)</p>
</div>
<div style="text-align: center;">
<n8n-send-stop-button :streaming="true" :disabled="false" />
<p style="color: var(--color-text-base); margin-top: 10px;">Stop (Streaming)</p>
<p style="color: var(--color--text); margin-top: 10px;">Stop (Streaming)</p>
</div>
<div style="text-align: center;">
<div style="background: var(--color-background-dark); padding: 20px; border-radius: 4px;">
<div style="background: var(--color--background--shade-2); padding: 20px; border-radius: 4px;">
<n8n-send-stop-button :streaming="false" :disabled="false" />
</div>
<p style="color: var(--color-text-base); margin-top: 10px;">On Dark Background</p>
<p style="color: var(--color--text); margin-top: 10px;">On Dark Background</p>
</div>
</div>
`,
@ -230,14 +230,14 @@ const UsageExampleTemplate: StoryFn = () => ({
},
template: `
<div style="width: 400px;">
<h3 style="margin-bottom: 15px; color: var(--color-text-dark);">Chat Input Example</h3>
<h3 style="margin-bottom: 15px; color: var(--color--text--shade-1);">Chat Input Example</h3>
<div style="
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: var(--color-background-xlight);
border: 1px solid var(--color-foreground-base);
background: var(--color--background--light-3);
border: 1px solid var(--color--foreground);
border-radius: var(--border-radius-large);
">
<input
@ -262,8 +262,8 @@ const UsageExampleTemplate: StoryFn = () => ({
@stop="handleStop"
/>
</div>
<div v-if="response" style="margin-top: 15px; padding: 10px; background: var(--color-background-light); border-radius: 4px;">
<p style="color: var(--color-text-base); margin: 0;">{{ response }}</p>
<div v-if="response" style="margin-top: 15px; padding: 10px; background: var(--color--background--light-2); border-radius: 4px;">
<p style="color: var(--color--text); margin: 0;">{{ response }}</p>
</div>
</div>
`,

4
packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue
View File

@ -41,10 +41,10 @@ withDefaults(defineProps<SpinnerProps>(), {
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;

8
packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.vue
View File

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

2
packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts
View File

@ -9,7 +9,7 @@ export default {
component: N8nTabs,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-xlight' },
backgrounds: { default: '--color--background--light-3' },
},
};

22
packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
View File

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

22
packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue
View File

@ -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 {

2
packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts
View File

@ -32,7 +32,7 @@ export default {
},
},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

2
packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
View File

@ -6,7 +6,7 @@ export default {
title: 'Modules/UserInfo',
component: N8nUserInfo,
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

2
packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.vue
View File

@ -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 {

2
packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
View File

@ -8,7 +8,7 @@ export default {
component: N8nUserSelect,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

8
packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue
View File

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

2
packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts
View File

@ -10,7 +10,7 @@ export default {
component: N8nUsersList,
argTypes: {},
parameters: {
backgrounds: { default: '--color-background-light' },
backgrounds: { default: '--color--background--light-2' },
},
};

16
packages/frontend/@n8n/design-system/src/components/TableBase/TableBase.vue
View File

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

8
packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue
View File

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

100
packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss
View File

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

256
packages/frontend/@n8n/design-system/src/css/_tokens.scss
View File

@ -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 {

4
packages/frontend/@n8n/design-system/src/css/checkbox.scss
View File

@ -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 {

2
packages/frontend/@n8n/design-system/src/css/color-picker.scss
View File

@ -26,7 +26,7 @@
}
&.selected {
box-shadow: 0 0 3px 2px var(--color-primary);
box-shadow: 0 0 3px 2px var(--color--primary);
}
> div {

318
packages/frontend/@n8n/design-system/src/css/common/var.scss
View File

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

4
packages/frontend/@n8n/design-system/src/css/date-picker.scss
View File

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

2
packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss
View File

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

4
packages/frontend/@n8n/design-system/src/css/date-picker/date-table.scss
View File

@ -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 {

6
packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss
View File

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

Some files were not shown because too many files have changed in this diff Show More