diff --git a/packages/design-system/src/components/N8nButton/Button.scss b/packages/design-system/src/components/N8nButton/Button.scss index bdafef35d9ed9..af37c8b4fe563 100644 --- a/packages/design-system/src/components/N8nButton/Button.scss +++ b/packages/design-system/src/components/N8nButton/Button.scss @@ -196,7 +196,7 @@ @mixin n8n-button-danger { --button-font-color: var(--color-button-danger-font); - --button-border-color: var(--color-danger); + --button-border-color: var(--color-button-danger-border); --button-background-color: var(--color-danger); --button-hover-font-color: var(--color-button-danger-font); @@ -210,11 +210,11 @@ --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-outline-color: var(--color-danger-tint-1); + --button-focus-outline-color: var(--color-button-danger-focus-outline); --button-disabled-font-color: var(--color-button-danger-disabled-font); - --button-disabled-border-color: var(--color-danger-tint-1); - --button-disabled-background-color: var(--color-danger-tint-1); + --button-disabled-border-color: var(--color-button-danger-disabled-border); + --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); diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 4390bc1da81cb..4ea656667725b 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -188,6 +188,14 @@ --color-button-secondary-disabled-font: var(--prim-gray-0-alpha-030); --color-button-secondary-disabled-border: var(--prim-gray-0-alpha-030); + // Button success, warning, danger + --color-button-danger-font: var(--prim-gray-0); + --color-button-danger-border: transparent; + --color-button-danger-focus-outline: var(--prim-color-alt-c-tint-250); + --color-button-danger-disabled-font: var(--prim-gray-0-alpha-025); + --color-button-danger-disabled-border: transparent; + --color-button-danger-disabled-background: var(--prim-color-alt-c-alpha-02); + // Text button --color-text-button-secondary-font: var(--prim-gray-320); diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index 944652e43e3bc..e4faf088cf1b0 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -244,7 +244,11 @@ --color-button-warning-font: var(--color-text-xlight); --color-button-warning-disabled-font: var(--prim-gray-0-alpha-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-disabled-font: var(--prim-gray-0-alpha-075); + --color-button-danger-disabled-border: var(--color-danger-tint-1); + --color-button-danger-disabled-background: var(--color-danger-tint-1); // Text button --color-text-button-secondary-font: var(--prim-gray-670);