From aad43d8cdcc9621fbd864fbe0235c9ff4ddbfe3e Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Wed, 15 May 2024 17:57:21 +0200 Subject: [PATCH] fix(editor): Secondary button in dark mode (#9401) --- .../src/components/N8nButton/Button.scss | 12 +++++----- .../design-system/src/css/_primitives.scss | 19 ++++++++++++++++ .../design-system/src/css/_tokens.dark.scss | 22 ++++++++++++++++--- packages/design-system/src/css/_tokens.scss | 13 ++++++----- .../design-system/src/css/common/var.scss | 8 +++---- .../src/components/Node/NodeCreation.vue | 4 ++-- 6 files changed, 57 insertions(+), 21 deletions(-) diff --git a/packages/design-system/src/components/N8nButton/Button.scss b/packages/design-system/src/components/N8nButton/Button.scss index 7458dc6377..40ad0a7997 100644 --- a/packages/design-system/src/components/N8nButton/Button.scss +++ b/packages/design-system/src/components/N8nButton/Button.scss @@ -53,7 +53,7 @@ } } - &:focus { + &:focus:not(:active, .active) { color: $button-focus-font-color unquote($important); border-color: $button-focus-border-color unquote($important); background-color: $button-focus-background-color unquote($important); @@ -119,16 +119,16 @@ --button-background-color: var(--color-button-secondary-background); --button-hover-font-color: var(--color-button-secondary-hover-active-focus-font); - --button-hover-border-color: var(--color-button-secondary-hover-active-border); + --button-hover-border-color: var(--color-button-secondary-hover-active-focus-border); --button-hover-background-color: var(--color-button-secondary-hover-background); --button-active-font-color: var(--color-button-secondary-hover-active-focus-font); - --button-active-border-color: var(--color-button-secondary-hover-active-border); - --button-active-background-color: var(--color-button-secondary-active-background); + --button-active-border-color: var(--color-button-secondary-hover-active-focus-border); + --button-active-background-color: var(--color-button-secondary-active-focus-background); --button-focus-font-color: var(--color-button-secondary-hover-active-focus-font); - --button-focus-border-color: var(--color-button-secondary-border); - --button-focus-background-color: var(--color-button-secondary-background); + --button-focus-border-color: var(--color-button-secondary-hover-active-focus-border); + --button-focus-background-color: var(--color-button-secondary-active-focus-background); --button-focus-outline-color: var(--color-button-secondary-focus-outline); --button-disabled-font-color: var(--color-button-secondary-disabled-font); diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss index fe02c267e3..57cc87f580 100644 --- a/packages/design-system/src/css/_primitives.scss +++ b/packages/design-system/src/css/_primitives.scss @@ -25,7 +25,9 @@ --prim-gray-25: hsl(var(--prim-gray-h), 50%, 97.5%); --prim-gray-10: hsl(var(--prim-gray-h), 50%, 99%); --prim-gray-0-alpha-075: hsla(var(--prim-gray-h), 50%, 100%, 0.75); + --prim-gray-0-alpha-030: hsla(var(--prim-gray-h), 50%, 100%, 0.3); --prim-gray-0-alpha-025: hsla(var(--prim-gray-h), 50%, 100%, 0.25); + --prim-gray-0-alpha-010: hsla(var(--prim-gray-h), 50%, 100%, 0.1); --prim-gray-0: hsl(var(--prim-gray-h), 50%, 100%); // Color Primary @@ -54,6 +56,18 @@ var(--prim-color-primary-l), 0.1 ); + --prim-color-primary-alpha-035: hsla( + var(--prim-color-primary-h), + var(--prim-color-primary-s), + var(--prim-color-primary-l), + 0.35 + ); + --prim-color-primary-alpha-050: hsla( + var(--prim-color-primary-h), + var(--prim-color-primary-s), + var(--prim-color-primary-l), + 0.5 + ); --prim-color-primary-tint-100: hsl( var(--prim-color-primary-h), var(--prim-color-primary-s), @@ -69,6 +83,11 @@ var(--prim-color-primary-s), calc(var(--prim-color-primary-l) + 25%) ); + --prim-color-primary-tint-270: hsl( + var(--prim-color-primary-h), + var(--prim-color-primary-s), + calc(var(--prim-color-primary-l) + 27%) + ); --prim-color-primary-tint-300: hsl( var(--prim-color-primary-h), var(--prim-color-primary-s), diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 3380015000..cce44df6c6 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -22,6 +22,7 @@ --color-background-dark: var(--prim-gray-70); --color-background-medium: var(--prim-gray-540); --color-background-base: var(--prim-gray-670); + --color-background-light-base: var(--prim-gray-780); --color-background-light: var(--prim-gray-820); --color-background-xlight: var(--prim-gray-740); @@ -118,16 +119,31 @@ --color-variables-usage-syntax-bg: var(--prim-color-alt-a-alpha-025); // Button primary - --color-button-primary-disabled-font: var(--prim-gray-0-alpha-025); + --color-button-primary-focus-outline: var(--prim-color-primary-alpha-035); + --color-button-primary-disabled-font: var(--prim-gray-0-alpha-030); --color-button-primary-disabled-border: transparent; - --color-button-primary-disabled-background: var(--prim-color-primary-shade-300); + --color-button-primary-disabled-background: var(--prim-color-primary-alpha-050); // Button secondary - --color-button-secondary-border: var(--prim-gray-420); + --color-button-secondary-font: var(--prim-gray-70); + --color-button-secondary-border: var(--prim-gray-70); + --color-button-secondary-background: transparent; + --color-button-secondary-hover-active-focus-font: var(--prim-color-primary-tint-100); + --color-button-secondary-hover-background: transparent; + --color-button-secondary-active-focus-background: var(--prim-color-primary-alpha-010); + --color-button-secondary-focus-outline: var(--prim-color-primary-alpha-035); + --color-button-secondary-disabled-font: var(--prim-gray-0-alpha-030); + --color-button-secondary-disabled-border: var(--prim-gray-0-alpha-030); // Text button --color-text-button-secondary-font: var(--prim-gray-320); + // Node Creator Button + --color-button-node-creator-border-font: var(--color-button-secondary-font); + --color-button-node-creator-hover-font: var(--color-button-secondary-hover-active-focus-font); + --color-button-node-creator-hover-border: var(--prim-color-primary); + --color-button-node-creator-background: var(--prim-color-primary-alpha-010); + // Table --color-table-header-background: var(--prim-gray-740); --color-table-row-background: var(--prim-gray-820); diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index ab3797781d..7278517474 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -156,8 +156,8 @@ --color-button-primary-border: var(--prim-color-primary); --color-button-primary-background: var(--prim-color-primary); --color-button-primary-hover-active-border: var(--prim-color-primary-shade-100); - --color-button-primary-hover-active-background: var(--prim-color-primary-shade-100); - --color-button-primary-focus-outline: var(--prim-color-primary-tint-200); + --color-button-primary-hover-active-focus-background: var(--prim-color-primary-shade-100); + --color-button-primary-focus-outline: var(--prim-color-primary-alpha-035); --color-button-primary-disabled-font: var(--prim-gray-0-alpha-075); --color-button-primary-disabled-border: var(--prim-color-primary-tint-200); --color-button-primary-disabled-background: var(--prim-color-primary-tint-200); @@ -166,10 +166,10 @@ --color-button-secondary-font: var(--prim-gray-670); --color-button-secondary-border: var(--prim-gray-320); --color-button-secondary-background: var(--prim-gray-0); - --color-button-secondary-hover-active-focus-font: var(--prim-color-primary); - --color-button-secondary-hover-active-border: var(--prim-color-primary); + --color-button-secondary-hover-active-focus-font: var(--prim-color-primary-shade-100); + --color-button-secondary-hover-active-focus-border: var(--prim-color-primary); --color-button-secondary-hover-background: var(--prim-color-primary-tint-300); - --color-button-secondary-active-background: var(--prim-color-primary-tint-250); + --color-button-secondary-active-focus-background: var(--prim-color-primary-tint-270); --color-button-secondary-focus-outline: var(--prim-gray-120); --color-button-secondary-disabled-font: var(--prim-gray-200); --color-button-secondary-disabled-border: var(--prim-gray-200); @@ -187,7 +187,8 @@ // Node Creator Button --color-button-node-creator-border-font: var(--prim-gray-540); - --color-button-node-creator-hover-border-font: var(--prim-color-primary); + --color-button-node-creator-hover-font: var(--prim-color-primary); + --color-button-node-creator-hover-border: var(--prim-color-primary); --color-button-node-creator-background: var(--prim-gray-0); // Table diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss index b138ec33b9..aa1fddd842 100644 --- a/packages/design-system/src/css/common/var.scss +++ b/packages/design-system/src/css/common/var.scss @@ -70,7 +70,7 @@ $border-radius-circle: 100%; /* Outline -------------------------- */ -$focus-outline-width: 2px; +$focus-outline-width: 3px; /* Box shadow -------------------------- */ @@ -551,7 +551,7 @@ $button-hover-border-color: var( ); $button-hover-background-color: var( --button-hover-background-color, - var(--color-button-primary-hover-active-background) + var(--color-button-primary-hover-active-focus-background) ); // Active @@ -562,7 +562,7 @@ $button-active-border-color: var( ); $button-active-background-color: var( --button-active-background-color, - var(--color-button-primary-hover-active-background) + var(--color-button-primary-hover-active-focus-background) ); // Focus @@ -570,7 +570,7 @@ $button-focus-font-color: var(--button-focus-font-color, var(--color-button-prim $button-focus-border-color: var(--button-focus-border-color, var(--color-button-primary-border)); $button-focus-background-color: var( --button-focus-background-color, - var(--color-button-primary-background) + var(--color-button-primary-hover-active-focus-background) ); $button-focus-outline-color: var( --button-focus-outline-color, diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue index a30cd243de..88038a18f7 100644 --- a/packages/editor-ui/src/components/Node/NodeCreation.vue +++ b/packages/editor-ui/src/components/Node/NodeCreation.vue @@ -182,8 +182,8 @@ function nodeTypeSelected(nodeTypes: string[]) { color: var(--color-button-node-creator-border-font); &:hover { - border-color: var(--color-button-node-creator-hover-border-font); - color: var(--color-button-node-creator-hover-border-font); + color: var(--color-button-node-creator-hover-font); + border-color: var(--color-button-node-creator-hover-border); background: var(--color-button-node-creator-background); } }