diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss index 57cc87f58..bf7d9728a 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 6ca311c0c..44ee54404 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 dadfe5104..0b2940f01 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 1ebfc1ebe..1383059f6 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); }