From cc332648bac7ce384ce3f41525adac93f73e0248 Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Tue, 14 May 2024 18:40:13 +0200 Subject: [PATCH 1/3] New secondary button tokens in progress, --- packages/design-system/src/css/_primitives.scss | 1 + packages/design-system/src/css/_tokens.dark.scss | 14 +++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss index fe02c267e3c2a..cd02207989166 100644 --- a/packages/design-system/src/css/_primitives.scss +++ b/packages/design-system/src/css/_primitives.scss @@ -25,6 +25,7 @@ --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-035: hsla(var(--prim-gray-h), 50%, 100%, 0.35); --prim-gray-0-alpha-025: hsla(var(--prim-gray-h), 50%, 100%, 0.25); --prim-gray-0: hsl(var(--prim-gray-h), 50%, 100%); diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 3380015000585..f58f86f0dfbfd 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); @@ -123,7 +124,18 @@ --color-button-primary-disabled-background: var(--prim-color-primary-shade-300); // Button secondary - --color-button-secondary-border: var(--prim-gray-420); + --color-button-secondary-font: var(--prim-gray-30); + --color-button-secondary-border: var(--prim-gray-30); + --color-button-secondary-background: transparent; + + --color-button-secondary-hover-background: transparent; + + --color-button-secondary-active-background: var(--prim-color-primary-alpha-010); + + --color-button-secondary-focus-outline: var(--prim-gray-0-alpha-025); + + --color-button-secondary-disabled-font: var(--prim-gray-0-alpha-035); + --color-button-secondary-disabled-border: var(--prim-gray-0-alpha-035); // Text button --color-text-button-secondary-font: var(--prim-gray-320); From f674a24af59de3ce87a9376d36f3092b266850dd Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Wed, 15 May 2024 11:52:20 +0200 Subject: [PATCH 2/3] Secondary button improvements for dark mode, and other few tweaks to other buttons. --- .../src/components/N8nButton/Button.scss | 12 +++++------ .../design-system/src/css/_primitives.scss | 20 ++++++++++++++++++- .../design-system/src/css/_tokens.dark.scss | 18 ++++++++--------- packages/design-system/src/css/_tokens.scss | 10 +++++----- .../design-system/src/css/common/var.scss | 8 ++++---- 5 files changed, 42 insertions(+), 26 deletions(-) diff --git a/packages/design-system/src/components/N8nButton/Button.scss b/packages/design-system/src/components/N8nButton/Button.scss index 7458dc6377e25..40ad0a7997989 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 cd02207989166..57cc87f580bce 100644 --- a/packages/design-system/src/css/_primitives.scss +++ b/packages/design-system/src/css/_primitives.scss @@ -25,8 +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-035: hsla(var(--prim-gray-h), 50%, 100%, 0.35); + --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 @@ -55,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), @@ -70,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 f58f86f0dfbfd..048074a80c66a 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -119,23 +119,21 @@ --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-font: var(--prim-gray-30); --color-button-secondary-border: var(--prim-gray-30); --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-background: var(--prim-color-primary-alpha-010); - - --color-button-secondary-focus-outline: var(--prim-gray-0-alpha-025); - - --color-button-secondary-disabled-font: var(--prim-gray-0-alpha-035); - --color-button-secondary-disabled-border: var(--prim-gray-0-alpha-035); + --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); diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index ab3797781d3c7..136bb5ebc7578 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); diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss index b138ec33b9e47..aa1fddd8424fd 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, From d4c6019de184abb3daa55b1796bb480dd720f228 Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Wed, 15 May 2024 16:55:22 +0200 Subject: [PATCH 3/3] Node creator node dark mode improvement. Secondary button in dark mode less flashy. --- packages/design-system/src/css/_tokens.dark.scss | 10 ++++++++-- packages/design-system/src/css/_tokens.scss | 3 ++- .../editor-ui/src/components/Node/NodeCreation.vue | 4 ++-- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 048074a80c66a..cce44df6c6679 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -125,8 +125,8 @@ --color-button-primary-disabled-background: var(--prim-color-primary-alpha-050); // Button secondary - --color-button-secondary-font: var(--prim-gray-30); - --color-button-secondary-border: var(--prim-gray-30); + --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; @@ -138,6 +138,12 @@ // 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 136bb5ebc7578..7278517474b16 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -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/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue index a30cd243de2f6..88038a18f7e07 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); } }