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

fix(editor): Dark mode switch style fix and other tweaks (no-changelog) (#7599)

Browse source 
Github issue / Community forum post (link here to close automatically):
This commit is contained in:
Giulio Andreini 2023-11-14 17:13:30 +01:00 committed by GitHub
parent a9c7188c4d
commit f1e7ef0117
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 35 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nBlockUi/BlockUi.vue
View file

@ -26,7 +26,7 @@ withDefaults(defineProps<BlockUiProps>(), {
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-background-dark);
background-color: var(--color-block-ui-overlay);
z-index: 10;
opacity: 0.6;
border-radius: var(--border-radius-large);

8
packages/design-system/src/components/N8nLink/Link.vue
View file

@ -81,17 +81,13 @@ export default defineComponent({
}
.secondary {
color: var(--color-secondary);
color: var(--color-secondary-link);
&:active {
color: var(--color-secondary-shade-1);
color: var(--color-secondary-link-hover);
}
}
.secondary {
color: var(--color-secondary);
}
.primary-underline {
composes: primary;
text-decoration: underline;

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

@ -6,7 +6,6 @@
@mixin primitives {
// Gray
--prim-gray-h: 220;
--prim-gray-s: 30%;
--prim-gray-820: hsl(var(--prim-gray-h), 1%, 18%);
--prim-gray-800: hsl(var(--prim-gray-h), 1%, 20%);
@ -20,6 +19,7 @@
--prim-gray-120: hsl(var(--prim-gray-h), 25%, 88%);
--prim-gray-70: hsl(var(--prim-gray-h), 32%, 93%);
--prim-gray-40: hsl(var(--prim-gray-h), 40%, 96%);
--prim-gray-30: hsl(var(--prim-gray-h), 40%, 97%);
--prim-gray-10: hsl(var(--prim-gray-h), 47%, 99%);
--prim-gray-0-alpha-075: hsla(var(--prim-gray-h), 50%, 100%, 0.75);
--prim-gray-0-alpha-025: hsla(var(--prim-gray-h), 50%, 100%, 0.25);

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

@ -126,7 +126,7 @@
--color-callout-secondary-background: var(--prim-color-secondary-alpha-025);
--color-callout-secondary-font: var(--prim-gray-0);
// Dialog
// Dialogs and overlays
--color-dialog-overlay-background: var(--prim-color-alt-j-alpha-075);
--color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075);
@ -137,17 +137,20 @@
--color-value-survey-background: var(--prim-gray-740);
--color-value-survey-font: var(--prim-gray-0);
--border-color-base: var(--color-foreground-base);
--border-color-light: var(--color-foreground-light);
--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
// Switch (Activation, boolean)
--color-switch-background: var(--prim-gray-820);
--color-switch-toggle: var(--prim-gray-40);
// Various
--color-info-tint-1: var(--prim-gray-420);
--color-info-tint-2: var(--prim-gray-740);
--border-color-base: var(--color-foreground-base);
--border-color-light: var(--color-foreground-light);
--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
--node-type-supplemental-label-color-l: 100%;
--color-configurable-node-name: var(--color-text-lighter);
--color-secondary-link: var(--prim-color-secondary-tint-200);
--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
}
body[data-theme='dark'] {

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

@ -67,7 +67,7 @@
// Canvas
--color-canvas-background: var(--prim-gray-10);
--color-canvas-dot: var(--prim-gray-120);
--color-canvas-read-only-line: var(--prim-gray-40);
--color-canvas-read-only-line: var(--prim-gray-30);
--color-canvas-node-background: var(--prim-gray-0);
--color-canvas-node-pinned-border: var(--color-secondary);
--color-canvas-selected: var(--prim-gray-70);
@ -216,9 +216,10 @@
--color-callout-secondary-font: var(--color-secondary);
--color-callout-secondary-icon: var(--color-secondary);
// Dialog
// Dialogs and overlays
--color-dialog-overlay-background: var(--prim-gray-0-alpha-075);
--color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075);
--color-block-ui-overlay: var(--prim-gray-820);
// Avatar
--color-avatar-font: var(--color-text-xlight);
@ -227,6 +228,14 @@
--color-value-survey-background: var(--prim-gray-740);
--color-value-survey-font: var(--prim-gray-0);
// Switch (Activation, boolean)
--color-switch-background: var(--prim-gray-420);
--color-switch-active-background: var(--prim-color-alt-i);
--color-switch-toggle: var(--prim-gray-0);
// Feature Request
--color-feature-request-font: var(--prim-gray-0);
// Various
--color-avatar-accent-1: var(--prim-gray-120);
--color-avatar-accent-2: var(--prim-color-alt-e-shade-100);
@ -236,8 +245,9 @@
--color-grey: var(--prim-gray-200);
--color-light-grey: var(--prim-gray-120);
--color-neutral: var(--prim-gray-490);
--color-switch: var(--prim-color-alt-i);
--color-configurable-node-name: var(--color-text-dark);
--color-secondary-link: var(--color-secondary);
--color-secondary-link-hover: var(--color-secondary-shade-1);
// Generated Color Shades from 50 to 950
// Not yet used in design system

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

@ -635,10 +635,11 @@ $cascader-height: 200px;
/* Switch
-------------------------- */
$switch-toggle-color: var(--color-switch-toggle);
/// color||Color|0
$switch-on-color: var(--color-switch);
$switch-on-color: var(--color-switch-active-background);
/// color||Color|0
$switch-off-color: var(--color-text-light);
$switch-off-color: var(--color-switch-background);
/// fontSize||Font|1
$switch-font-size: $font-size-base;
$switch-core-border-radius: 10px;

5
packages/design-system/src/css/switch.scss
View file

@ -9,6 +9,9 @@
line-height: var.$switch-height;
height: var.$switch-height;
vertical-align: middle;
& .el-loading-mask {
border-radius: 10px;
}
@include mixins.when(disabled) {
& .el-switch__core,
& .el-switch__label {
@ -77,7 +80,7 @@
transition: all 0.1s;
width: var.$switch-button-size;
height: var.$switch-button-size;
background-color: var.$color-white;
background-color: var.$switch-toggle-color;
}
}

2
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -795,7 +795,7 @@ $main-panel-width: 360px;
position: absolute;
bottom: var(--spacing-4xs);
left: calc(100% + var(--spacing-s));
color: var(--color-text-xlight);
color: var(--color-feature-request-font);
font-size: var(--font-size-2xs);
white-space: nowrap;

1
packages/editor-ui/src/n8n-theme.scss
View file

@ -184,7 +184,6 @@
// Dialog
.el-overlay {
background-color: var(--color-dialog-overlay-background-dark);
backdrop-filter: blur(2px);
}
.el-dialog {

2
packages/editor-ui/src/views/SettingsUsageAndPlan.vue
View file

@ -262,7 +262,7 @@ const openPricingPage = () => {
margin: 0 0 var(--spacing-xs);
background: var(--color-background-xlight);
border-radius: var(--border-radius-large);
border: 1px solid var(--color-light-grey);
border: 1px solid var(--color-foreground-base);
white-space: nowrap;
.count {