mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions 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);
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);

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-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),

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

@ -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);

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-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

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

@ -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,

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);
&: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);
}
}