mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 21:07:28 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Giulio Andreini 2025-01-03 12:32:00 +01:00 committed by GitHub
parent b78210c58a
commit 80ea38148a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/design-system/src/components/N8nButton/Button.scss
View file

@ -196,7 +196,7 @@
@mixin n8n-button-danger { @mixin n8n-button-danger {
--button-font-color: var(--color-button-danger-font); --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-background-color: var(--color-danger);
--button-hover-font-color: var(--color-button-danger-font); --button-hover-font-color: var(--color-button-danger-font);
@ -210,11 +210,11 @@
--button-focus-font-color: var(--color-button-danger-font); --button-focus-font-color: var(--color-button-danger-font);
--button-focus-border-color: var(--color-danger); --button-focus-border-color: var(--color-danger);
--button-focus-background-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-font-color: var(--color-button-danger-disabled-font);
--button-disabled-border-color: var(--color-danger-tint-1); --button-disabled-border-color: var(--color-button-danger-disabled-border);
--button-disabled-background-color: var(--color-danger-tint-1); --button-disabled-background-color: var(--color-button-danger-disabled-background);
--button-loading-font-color: var(--color-button-danger-font); --button-loading-font-color: var(--color-button-danger-font);
--button-loading-border-color: var(--color-danger); --button-loading-border-color: var(--color-danger);

8
packages/design-system/src/css/_tokens.dark.scss
View file

@ -188,6 +188,14 @@
--color-button-secondary-disabled-font: var(--prim-gray-0-alpha-030); --color-button-secondary-disabled-font: var(--prim-gray-0-alpha-030);
--color-button-secondary-disabled-border: 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 // Text button
--color-text-button-secondary-font: var(--prim-gray-320); --color-text-button-secondary-font: var(--prim-gray-320);

4
packages/design-system/src/css/_tokens.scss
View file

@ -244,7 +244,11 @@
--color-button-warning-font: var(--color-text-xlight); --color-button-warning-font: var(--color-text-xlight);
--color-button-warning-disabled-font: var(--prim-gray-0-alpha-075); --color-button-warning-disabled-font: var(--prim-gray-0-alpha-075);
--color-button-danger-font: var(--color-text-xlight); --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-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 // Text button
--color-text-button-secondary-font: var(--prim-gray-670); --color-text-button-secondary-font: var(--prim-gray-670);