fix(tooltip, popover): shadow for dark theme (#DS-4541)

packages/components-dev/popover/module.ts

@@ -22,6 +22,7 @@ import { KbqRadioModule } from '@koobiq/components/radio';
 import { KbqSelectModule } from '@koobiq/components/select';
 import { KbqSplitterModule } from '@koobiq/components/splitter';
 import { PopoverExamplesModule } from 'packages/docs-examples/components/popover';
+import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
     selector: 'dev-examples',
@@ -57,7 +58,8 @@ export class DevDocsExamples {}
         KbqRadioModule,
         KbqLinkModule,
         DevDocsExamples,
-        NgClass
+        NgClass,
+        DevThemeToggle
     ],
     templateUrl: './template.html',
     styleUrls: ['./styles.scss'],

packages/components-dev/popover/template.html

@@ -1,3 +1,5 @@
+<dev-theme-toggle />
+
 <ng-template #customContent>
     @switch (popoverActiveStage) {
         @case (1) {

packages/components-dev/tooltip/module.ts

@@ -12,6 +12,7 @@ import { KbqInputModule } from '@koobiq/components/input';
 import { KbqSelectModule } from '@koobiq/components/select';
 import { KbqToggleModule } from '@koobiq/components/toggle';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
+import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
     selector: 'dev-app',
@@ -28,7 +29,8 @@ import { KbqToolTipModule } from '@koobiq/components/tooltip';
         KbqSelectModule,
         KbqIconModule,
         KbqToggleModule,
-        NgClass
+        NgClass,
+        DevThemeToggle
     ],
     templateUrl: './template.html',
     styleUrls: ['./styles.scss'],

packages/components-dev/tooltip/template.html

@@ -1,3 +1,5 @@
+<dev-theme-toggle />
+
 <ng-template #tooltipContent let-ctx>
     <div>{{ ctx.content }}</div>
 </ng-template>

packages/components/popover/_popover-theme.scss

@@ -2,7 +2,7 @@
 
 @mixin kbq-popover-theme() {
     .kbq-popover {
-        box-shadow: var(--kbq-popover-borderless-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
 
         &.kbq-popover_arrowless {
             box-shadow: var(--kbq-popover-container-shadow);
@@ -14,7 +14,7 @@
     }
 
     .kbq-popover__arrow {
-        box-shadow: var(--kbq-popover-borderless-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
         background: var(--kbq-popover-container-background);
     }
 

packages/components/popover/e2e.playwright-spec.ts

@@ -10,7 +10,7 @@ test.describe('KbqPopoverModule', () => {
             await page.goto('/E2ePopoverStates');
             const locator = getComponent(page);
 
-            await expect(getScreenshotTarget(locator)).toHaveScreenshot();
+            await expect(getScreenshotTarget(locator)).toHaveScreenshot({ threshold: 0.05 });
         });
 
         test('popover (dark theme)', async ({ page }) => {
@@ -19,7 +19,7 @@ test.describe('KbqPopoverModule', () => {
 
             const locator = getComponent(page);
 
-            await expect(getScreenshotTarget(locator)).toHaveScreenshot();
+            await expect(getScreenshotTarget(locator)).toHaveScreenshot({ threshold: 0.05 });
         });
     });
 });

packages/components/tooltip/_tooltip-theme.scss

@@ -9,7 +9,6 @@
 
     & .kbq-tooltip__arrow {
         background-color: var(--kbq-tooltip-#{$style-name}-background);
-        box-shadow: var(--kbq-tooltip-borderless-shadow);
     }
 
     &.kbq-tooltip_arrowless {
@@ -18,11 +17,6 @@
 }
 
 @mixin kbq-tooltip-theme() {
-    .kbq-tooltip,
-    .kbq-tooltip__arrow {
-        box-shadow: var(--kbq-tooltip-borderless-shadow);
-    }
-
     .kbq-tooltip.kbq-theme {
         @include kbq-tooltip-color(theme-fade-off);
     }
@@ -33,6 +27,11 @@
 
     .kbq-tooltip.kbq-contrast-fade {
         @include kbq-tooltip-color(contrast-fade-on);
+
+        &.kbq-tooltip,
+        & .kbq-tooltip__arrow {
+            box-shadow: var(--kbq-shadow-popup);
+        }
     }
 
     .kbq-tooltip.kbq-warning {

packages/components/tooltip/e2e.playwright-spec.ts

@@ -10,7 +10,7 @@ test.describe('KbqTooltipModule', () => {
             await page.goto('/E2eTooltipStates');
             const locator = getComponent(page);
 
-            await expect(getScreenshotTarget(locator)).toHaveScreenshot();
+            await expect(getScreenshotTarget(locator)).toHaveScreenshot({ threshold: 0.05 });
         });
 
         test('tooltip (dark theme)', async ({ page }) => {
@@ -19,7 +19,7 @@ test.describe('KbqTooltipModule', () => {
 
             const locator = getComponent(page);
 
-            await expect(getScreenshotTarget(locator)).toHaveScreenshot();
+            await expect(getScreenshotTarget(locator)).toHaveScreenshot({ threshold: 0.05 });
         });
     });
 });