From f1e7ef01173ca43a185ee8aed0a47f7bc7030b83 Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Tue, 14 Nov 2023 17:13:30 +0100 Subject: [PATCH] fix(editor): Dark mode switch style fix and other tweaks (no-changelog) (#7599) Github issue / Community forum post (link here to close automatically): --- .../src/components/N8nBlockUi/BlockUi.vue | 2 +- .../src/components/N8nLink/Link.vue | 8 ++------ packages/design-system/src/css/_primitives.scss | 2 +- packages/design-system/src/css/_tokens.dark.scss | 15 +++++++++------ packages/design-system/src/css/_tokens.scss | 16 +++++++++++++--- packages/design-system/src/css/common/var.scss | 5 +++-- packages/design-system/src/css/switch.scss | 5 ++++- .../editor-ui/src/components/NodeDetailsView.vue | 2 +- packages/editor-ui/src/n8n-theme.scss | 1 - .../editor-ui/src/views/SettingsUsageAndPlan.vue | 2 +- 10 files changed, 35 insertions(+), 23 deletions(-) diff --git a/packages/design-system/src/components/N8nBlockUi/BlockUi.vue b/packages/design-system/src/components/N8nBlockUi/BlockUi.vue index cb117c51e7..a4213c9d7d 100644 --- a/packages/design-system/src/components/N8nBlockUi/BlockUi.vue +++ b/packages/design-system/src/components/N8nBlockUi/BlockUi.vue @@ -26,7 +26,7 @@ withDefaults(defineProps(), { 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); diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue index 472e7db77a..23639df8fd 100644 --- a/packages/design-system/src/components/N8nLink/Link.vue +++ b/packages/design-system/src/components/N8nLink/Link.vue @@ -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; diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss index 0ee7c9b378..f79713c76d 100644 --- a/packages/design-system/src/css/_primitives.scss +++ b/packages/design-system/src/css/_primitives.scss @@ -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); diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index d64a807afa..04cb478f93 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -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'] { diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index 4a7a6a2206..7bbdabda89 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -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 diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss index 6b81927a9d..f557d8fec4 100644 --- a/packages/design-system/src/css/common/var.scss +++ b/packages/design-system/src/css/common/var.scss @@ -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; diff --git a/packages/design-system/src/css/switch.scss b/packages/design-system/src/css/switch.scss index 23bb3ef6c4..c88660fa23 100644 --- a/packages/design-system/src/css/switch.scss +++ b/packages/design-system/src/css/switch.scss @@ -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; } } diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue index d3e4d118e4..9093c583c2 100644 --- a/packages/editor-ui/src/components/NodeDetailsView.vue +++ b/packages/editor-ui/src/components/NodeDetailsView.vue @@ -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; diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss index 49a5f9863d..f5154d0cb0 100644 --- a/packages/editor-ui/src/n8n-theme.scss +++ b/packages/editor-ui/src/n8n-theme.scss @@ -184,7 +184,6 @@ // Dialog .el-overlay { background-color: var(--color-dialog-overlay-background-dark); - backdrop-filter: blur(2px); } .el-dialog { diff --git a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue index 409cc362b3..276692e0f9 100644 --- a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue +++ b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue @@ -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 {