diff --git a/packages/design-system/src/components/N8nButton/Button.scss b/packages/design-system/src/components/N8nButton/Button.scss index bdafef35d9..af37c8b4fe 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 4390bc1da8..4ea6566677 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 944652e43e..e4faf088cf 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);