fix(editor): Fix color scheme of danger disabled button (no-changelog) (

#12426)
n8n-io · Jan 3, 2025 · 80ea381 · 80ea381
1 parent b78210c
commit 80ea381
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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);