From a126cedd32a0d5f9fe0055d83f734d2c9860e016 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?= =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?= =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?= Date: Wed, 29 May 2024 19:09:38 +0200 Subject: [PATCH] fix(editor): Improve contrast for `--color-danger` in dark mode (no-changelog) (#9537) Co-authored-by: Giulio Andreini --- packages/design-system/src/css/_primitives.scss | 11 +++++++++++ packages/design-system/src/css/_tokens.dark.scss | 9 +++++---- packages/design-system/src/css/_tokens.scss | 1 - .../editor-ui/src/components/Error/NodeErrorView.vue | 2 +- 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss index 57cc87f580..bf7d9728af 100644 --- a/packages/design-system/src/css/_primitives.scss +++ b/packages/design-system/src/css/_primitives.scss @@ -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 { diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 6ca311c0cc..44ee54404f 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -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); diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index dadfe51043..0b2940f015 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -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); diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue index 1ebfc1ebee..1383059f69 100644 --- a/packages/editor-ui/src/components/Error/NodeErrorView.vue +++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue @@ -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); }