mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-26 13:14:07 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(editor): Secondary button in dark mode (#9401)

Browse source
This commit is contained in:
Giulio Andreini 2024-05-15 17:57:21 +02:00 committed by GitHub
parent 14fe9f268f
commit aad43d8cdc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 57 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -53,7 +53,7 @@
} }
} }
&:focus { &:focus:not(:active, .active) {
color: $button-focus-font-color unquote($important); color: $button-focus-font-color unquote($important);
border-color: $button-focus-border-color unquote($important); border-color: $button-focus-border-color unquote($important);
background-color: $button-focus-background-color unquote($important); background-color: $button-focus-background-color unquote($important);
@ -119,16 +119,16 @@
--button-background-color: var(--color-button-secondary-background); --button-background-color: var(--color-button-secondary-background);
--button-hover-font-color: var(--color-button-secondary-hover-active-focus-font); --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-hover-background-color: var(--color-button-secondary-hover-background);
--button-active-font-color: var(--color-button-secondary-hover-active-focus-font); --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-border-color: var(--color-button-secondary-hover-active-focus-border);
--button-active-background-color: var(--color-button-secondary-active-background); --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-font-color: var(--color-button-secondary-hover-active-focus-font);
--button-focus-border-color: var(--color-button-secondary-border); --button-focus-border-color: var(--color-button-secondary-hover-active-focus-border);
--button-focus-background-color: var(--color-button-secondary-background); --button-focus-background-color: var(--color-button-secondary-active-focus-background);
--button-focus-outline-color: var(--color-button-secondary-focus-outline); --button-focus-outline-color: var(--color-button-secondary-focus-outline);
--button-disabled-font-color: var(--color-button-secondary-disabled-font); --button-disabled-font-color: var(--color-button-secondary-disabled-font);

19
packages/design-system/src/css/_primitives.scss
View file

@ -25,7 +25,9 @@
--prim-gray-25: hsl(var(--prim-gray-h), 50%, 97.5%); --prim-gray-25: hsl(var(--prim-gray-h), 50%, 97.5%);
--prim-gray-10: hsl(var(--prim-gray-h), 50%, 99%); --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-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-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%); --prim-gray-0: hsl(var(--prim-gray-h), 50%, 100%);
// Color Primary // Color Primary
@ -54,6 +56,18 @@
var(--prim-color-primary-l), var(--prim-color-primary-l),
0.1 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( --prim-color-primary-tint-100: hsl(
var(--prim-color-primary-h), var(--prim-color-primary-h),
var(--prim-color-primary-s), var(--prim-color-primary-s),
@ -69,6 +83,11 @@
var(--prim-color-primary-s), var(--prim-color-primary-s),
calc(var(--prim-color-primary-l) + 25%) 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( --prim-color-primary-tint-300: hsl(
var(--prim-color-primary-h), var(--prim-color-primary-h),
var(--prim-color-primary-s), var(--prim-color-primary-s),

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

@ -22,6 +22,7 @@
--color-background-dark: var(--prim-gray-70); --color-background-dark: var(--prim-gray-70);
--color-background-medium: var(--prim-gray-540); --color-background-medium: var(--prim-gray-540);
--color-background-base: var(--prim-gray-670); --color-background-base: var(--prim-gray-670);
--color-background-light-base: var(--prim-gray-780);
--color-background-light: var(--prim-gray-820); --color-background-light: var(--prim-gray-820);
--color-background-xlight: var(--prim-gray-740); --color-background-xlight: var(--prim-gray-740);
@ -118,16 +119,31 @@
--color-variables-usage-syntax-bg: var(--prim-color-alt-a-alpha-025); --color-variables-usage-syntax-bg: var(--prim-color-alt-a-alpha-025);
// Button primary // 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-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 // 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 // Text button
--color-text-button-secondary-font: var(--prim-gray-320); --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 // Table
--color-table-header-background: var(--prim-gray-740); --color-table-header-background: var(--prim-gray-740);
--color-table-row-background: var(--prim-gray-820); --color-table-row-background: var(--prim-gray-820);

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

@ -156,8 +156,8 @@
--color-button-primary-border: var(--prim-color-primary); --color-button-primary-border: var(--prim-color-primary);
--color-button-primary-background: 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-border: var(--prim-color-primary-shade-100);
--color-button-primary-hover-active-background: var(--prim-color-primary-shade-100); --color-button-primary-hover-active-focus-background: var(--prim-color-primary-shade-100);
--color-button-primary-focus-outline: var(--prim-color-primary-tint-200); --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-font: var(--prim-gray-0-alpha-075);
--color-button-primary-disabled-border: var(--prim-color-primary-tint-200); --color-button-primary-disabled-border: var(--prim-color-primary-tint-200);
--color-button-primary-disabled-background: 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-font: var(--prim-gray-670);
--color-button-secondary-border: var(--prim-gray-320); --color-button-secondary-border: var(--prim-gray-320);
--color-button-secondary-background: var(--prim-gray-0); --color-button-secondary-background: var(--prim-gray-0);
--color-button-secondary-hover-active-focus-font: var(--prim-color-primary); --color-button-secondary-hover-active-focus-font: var(--prim-color-primary-shade-100);
--color-button-secondary-hover-active-border: var(--prim-color-primary); --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-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-focus-outline: var(--prim-gray-120);
--color-button-secondary-disabled-font: var(--prim-gray-200); --color-button-secondary-disabled-font: var(--prim-gray-200);
--color-button-secondary-disabled-border: var(--prim-gray-200); --color-button-secondary-disabled-border: var(--prim-gray-200);
@ -187,7 +187,8 @@
// Node Creator Button // Node Creator Button
--color-button-node-creator-border-font: var(--prim-gray-540); --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); --color-button-node-creator-background: var(--prim-gray-0);
// Table // Table

8
packages/design-system/src/css/common/var.scss
View file

@ -70,7 +70,7 @@ $border-radius-circle: 100%;
/* Outline /* Outline
-------------------------- */ -------------------------- */
$focus-outline-width: 2px; $focus-outline-width: 3px;
/* Box shadow /* Box shadow
-------------------------- */ -------------------------- */
@ -551,7 +551,7 @@ $button-hover-border-color: var(
); );
$button-hover-background-color: var( $button-hover-background-color: var(
--button-hover-background-color, --button-hover-background-color,
var(--color-button-primary-hover-active-background) var(--color-button-primary-hover-active-focus-background)
); );
// Active // Active
@ -562,7 +562,7 @@ $button-active-border-color: var(
); );
$button-active-background-color: var( $button-active-background-color: var(
--button-active-background-color, --button-active-background-color,
var(--color-button-primary-hover-active-background) var(--color-button-primary-hover-active-focus-background)
); );
// Focus // 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-border-color: var(--button-focus-border-color, var(--color-button-primary-border));
$button-focus-background-color: var( $button-focus-background-color: var(
--button-focus-background-color, --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: var(
--button-focus-outline-color, --button-focus-outline-color,

4
packages/editor-ui/src/components/Node/NodeCreation.vue
View file

@ -182,8 +182,8 @@ function nodeTypeSelected(nodeTypes: string[]) {
color: var(--color-button-node-creator-border-font); color: var(--color-button-node-creator-border-font);
&:hover { &:hover {
border-color: var(--color-button-node-creator-hover-border-font); color: var(--color-button-node-creator-hover-font);
color: var(--color-button-node-creator-hover-border-font); border-color: var(--color-button-node-creator-hover-border);
background: var(--color-button-node-creator-background); background: var(--color-button-node-creator-background);
} }
} }