diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue index 354bfbe6f2..2223ebd6cf 100644 --- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue +++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue @@ -118,13 +118,11 @@ const addTargetBlank = (html: string) => align-items: center; color: var(--color-text-light); padding-left: var(--spacing-4xs); - background-color: var(--color-background-xlight); z-index: 1; } .options { opacity: 0; - background-color: var(--color-background-xlight); transition: opacity 250ms cubic-bezier(0.98, -0.06, 0.49, -0.2); // transition on hover out > * { diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 750a5777aa..2ce9b7c98f 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -166,6 +166,7 @@ --color-callout-secondary-font: var(--prim-gray-0); // Dialogs and overlays + --color-dialog-background: var(--prim-gray-800); --color-dialog-overlay-background: var(--prim-color-alt-j-alpha-075); --color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075); @@ -178,6 +179,7 @@ // Switch (Activation, boolean) --color-switch-background: var(--prim-gray-820); + --color-switch-border-color: var(--prim-gray-670); --color-switch-toggle: var(--prim-gray-40); // Action Dropdown diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index b7c415190c..a54e4c329f 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -239,6 +239,7 @@ --color-callout-secondary-icon: var(--color-secondary); // Dialogs and overlays + --color-dialog-background: var(--prim-gray-0); --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); @@ -252,9 +253,11 @@ // Action Dropdown --color-action-dropdown-item-active-background: var(--color-background-base); + // Switch (Activation, boolean) --color-switch-background: var(--prim-gray-420); --color-switch-active-background: var(--prim-color-alt-i); + --color-switch-border-color: transparent; --color-switch-toggle: var(--prim-gray-0); // Feature Request diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss index cc0687266c..e2e6d4e46c 100644 --- a/packages/design-system/src/css/common/var.scss +++ b/packages/design-system/src/css/common/var.scss @@ -673,7 +673,7 @@ $switch-button-size: 16px; /* Dialog -------------------------- */ -$dialog-background-color: $color-white; +$dialog-background-color: var(--color-dialog-background); $dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /// fontSize||Font|1 $dialog-content-font-size: 14px; diff --git a/packages/design-system/src/css/reset.scss b/packages/design-system/src/css/reset.scss index 0a7323c8de..84efa3cfd1 100644 --- a/packages/design-system/src/css/reset.scss +++ b/packages/design-system/src/css/reset.scss @@ -96,7 +96,7 @@ body { font-size: var(--font-size-m); font-weight: var(--font-weight-regular); color: var(--color-text-dark); - background-color: var(--color-background-xlight); + background-color: var(--color-background-light); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/packages/design-system/src/css/switch.scss b/packages/design-system/src/css/switch.scss index c88660fa23..7c2a6adfb5 100644 --- a/packages/design-system/src/css/switch.scss +++ b/packages/design-system/src/css/switch.scss @@ -65,6 +65,7 @@ border-radius: var.$switch-core-border-radius; box-sizing: border-box; background: var.$switch-off-color; + border: 1px solid var(--color-switch-border-color); cursor: pointer; transition: border-color 0.1s,