mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Improve contrast for --color-danger in dark mode (no-changelog) (#9537)

Browse source 
Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™ 2024-05-29 19:09:38 +02:00 committed by GitHub
parent 63990f14e3
commit a126cedd32
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -454,6 +454,17 @@
var(--prim-color-alt-j-l),
0.75
);
// Color Alternate K - Used for errors in dark mode
--prim-color-alt-k-h: 355;
--prim-color-alt-k-s: 100%;
--prim-color-alt-k-l: 69%;
--prim-color-alt-k: hsl(
var(--prim-color-alt-k-h),
var(--prim-color-alt-k-s),
var(--prim-color-alt-k-l)
);
}
:root {

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

@ -2,6 +2,7 @@
@mixin theme {
// Primary tokens
--color-danger: var(--prim-color-alt-k);
// Text
--color-text-dark: var(--prim-gray-40);
@ -95,7 +96,7 @@
--color-code-tags-variable: var(--prim-color-primary-tint-100);
--color-code-tags-definition: var(--prim-color-alt-e);
--color-json-default: var(--prim-color-secondary-tint-200);
--color-json-null: var(--prim-color-alt-c-tint-150);
--color-json-null: var(--color-danger);
--color-json-boolean: var(--prim-color-alt-a);
--color-json-number: var(--prim-color-alt-a);
--color-json-string: var(--prim-color-secondary-tint-200);
@ -166,7 +167,6 @@
--color-ndv-droppable-parameter-background: var(--prim-color-primary-alpha-010);
--color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015);
--color-ndv-back-font: var(--prim-gray-0);
--color-ndv-output-error-message: var(--prim-color-alt-c-tint-150);
// Notice
--color-notice-warning-border: var(--prim-color-alt-b-tint-250);
@ -186,6 +186,7 @@
--color-callout-danger-border: var(--color-danger);
--color-callout-danger-background: var(--prim-color-alt-c-alpha-02);
--color-callout-danger-font: var(--prim-gray-0);
--color-callout-danger-icon: var(--color-danger);
--color-callout-secondary-border: var(--color-secondary);
--color-callout-secondary-background: var(--prim-color-secondary-alpha-025);
--color-callout-secondary-font: var(--prim-gray-0);
@ -214,12 +215,12 @@
--color-background-input-triple: var(--prim-gray-800);
// Node error
--color-node-error-output-text-color: var(--prim-color-alt-c-tint-150);
--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(--prim-color-alt-c-tint-150);
--color-mfa-lose-access-text-color: var(--color-danger);
// Various
--color-info-tint-1: var(--prim-gray-420);

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

@ -218,7 +218,6 @@
--color-ndv-droppable-parameter-background: var(--prim-color-secondary-alpha-010);
--color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015);
--color-ndv-back-font: var(--prim-gray-0);
--color-ndv-output-error-message: var(--prim-color-alt-c);
// Notice
--color-notice-warning-border: var(--color-warning-tint-1);

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

@ -607,7 +607,7 @@ function copySuccess() {
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-s) var(--spacing-3xs) var(--spacing-s);
color: var(--color-ndv-output-error-message);
color: var(--color-danger);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-s);
}