From b98814195ed617555a81b3c70156a756e77455b0 Mon Sep 17 00:00:00 2001 From: Alex Shvorak Date: Wed, 31 Jan 2024 13:25:15 +0100 Subject: [PATCH 1/2] fix(MultipleTooltip): changed tooltips and it's backdrop styles --- .../MultipleTooltip/MultipleTooltip.scss | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss b/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss index 3478ec9..13eefdf 100644 --- a/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss +++ b/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss @@ -2,26 +2,30 @@ $block: '.#{variables.$ns}multiple-tooltip'; -.g-root_theme_dark #{$block}, -.g-root_theme_dark-hc #{$block} { - --multiple-tooltip-item-bg-color: #424147; // TODO: color variable will appear in uikit 5 +.g-root_theme_dark, +.g-root_theme_dark-hc { + --multiple-tooltip-item-bg-color: var(--g-color-private-white-100-solid); --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy); --multiple-tooltip-backdrop-background: linear-gradient( 90deg, - #313036 0%, - rgba(49, 48, 54, 0.3) 100% + var(--g-color-base-background) 50%, + transparent ); --multiple-tooltip-backdrop-filter: blur(16px); } +.g-root_theme_dark-hc { + --multiple-tooltip-item-bg-color: var(--g-color-private-white-150-solid); +} + .g-root_theme_light #{$block}, .g-root_theme_light-hc #{$block} { - --multiple-tooltip-item-bg-color: #7a7a7a; // TODO: color variable will appear in uikit 5 + --multiple-tooltip-item-bg-color: var(--g-color-private-black-550-solid); --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy); --multiple-tooltip-backdrop-background: linear-gradient( 90deg, - #ffffff 0%, - rgba(255, 255, 255, 0.3) 100% + var(--g-color-base-background) 50%, + transparent ); --multiple-tooltip-backdrop-filter: blur(12px); } @@ -39,6 +43,7 @@ $block: '.#{variables.$ns}multiple-tooltip'; width: 100%; height: 100%; z-index: -1; + opacity: 0.7; background: var(--multiple-tooltip-backdrop-background); filter: var(--multiple-tooltip-backdrop-filter); } From edf9d7c3be691cd4a41ad8413eb120eaba80ef9e Mon Sep 17 00:00:00 2001 From: Alex Shvorak Date: Thu, 1 Feb 2024 13:09:37 +0100 Subject: [PATCH 2/2] fix(MultipleTooltip): add todo comment above private variable usages --- .../CompositeBar/MultipleTooltip/MultipleTooltip.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss b/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss index 13eefdf..f9c1ed9 100644 --- a/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss +++ b/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss @@ -2,8 +2,9 @@ $block: '.#{variables.$ns}multiple-tooltip'; -.g-root_theme_dark, -.g-root_theme_dark-hc { +.g-root_theme_dark #{$block}, +.g-root_theme_dark-hc #{$block} { + // TODO: Replace private color variable with special one which should appear in next uikit major version --multiple-tooltip-item-bg-color: var(--g-color-private-white-100-solid); --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy); --multiple-tooltip-backdrop-background: linear-gradient( @@ -14,12 +15,14 @@ $block: '.#{variables.$ns}multiple-tooltip'; --multiple-tooltip-backdrop-filter: blur(16px); } -.g-root_theme_dark-hc { +.g-root_theme_dark-hc #{$block} { + // TODO: Replace private color variable with special one which should appear in next uikit major version --multiple-tooltip-item-bg-color: var(--g-color-private-white-150-solid); } .g-root_theme_light #{$block}, .g-root_theme_light-hc #{$block} { + // TODO: Replace private color variable with special one which should appear in next uikit major version --multiple-tooltip-item-bg-color: var(--g-color-private-black-550-solid); --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy); --multiple-tooltip-backdrop-background: linear-gradient(