diff --git a/desktop/src/shared/ui/tooltip.tsx b/desktop/src/shared/ui/tooltip.tsx index 847772fd850..8d1eac05e59 100644 --- a/desktop/src/shared/ui/tooltip.tsx +++ b/desktop/src/shared/ui/tooltip.tsx @@ -42,7 +42,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "pointer-events-none z-50 overflow-hidden rounded-md bg-secondary px-3 py-1.5 text-xs text-secondary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)", + "pointer-events-none z-50 overflow-hidden rounded-md bg-popover px-3 py-1.5 text-xs text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)", className, )} {...props} diff --git a/desktop/tests/e2e/entity-link-recipient-cards.spec.ts b/desktop/tests/e2e/entity-link-recipient-cards.spec.ts index 6ca502c3462..e5feaaf067f 100644 --- a/desktop/tests/e2e/entity-link-recipient-cards.spec.ts +++ b/desktop/tests/e2e/entity-link-recipient-cards.spec.ts @@ -160,8 +160,8 @@ test("agent-style Buzz links stay chip-only with metadata tooltips", async ({ const tooltipSemanticColors = await prTooltip.evaluate((element) => { const styles = getComputedStyle(element); const probe = document.createElement("span"); - probe.style.backgroundColor = "hsl(var(--secondary))"; - probe.style.color = "hsl(var(--secondary-foreground))"; + probe.style.backgroundColor = "hsl(var(--popover))"; + probe.style.color = "hsl(var(--popover-foreground))"; document.body.append(probe); const semanticStyles = getComputedStyle(probe); const result = { diff --git a/desktop/tests/e2e/tooltip-semantics.spec.ts b/desktop/tests/e2e/tooltip-semantics.spec.ts index 90ccd061bfc..3acb4bb92bd 100644 --- a/desktop/tests/e2e/tooltip-semantics.spec.ts +++ b/desktop/tests/e2e/tooltip-semantics.spec.ts @@ -11,11 +11,11 @@ async function seedTheme(page: Page, theme: (typeof THEMES)[number]) { }, theme); } -async function expectSecondarySurface(tooltip: Locator) { +async function expectPopoverSurface(tooltip: Locator) { const colors = await tooltip.evaluate((element) => { const sample = document.createElement("div"); sample.style.cssText = - "position:fixed;visibility:hidden;background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))"; + "position:fixed;visibility:hidden;background:hsl(var(--popover));color:hsl(var(--popover-foreground))"; document.body.append(sample); const tooltipStyle = getComputedStyle(element); const sampleStyle = getComputedStyle(sample); @@ -48,7 +48,7 @@ async function expectMutedSupportingText( } for (const theme of THEMES) { - test(`simple and rich tooltips use the secondary surface — ${theme}`, async ({ + test(`simple and rich tooltips use the popover surface — ${theme}`, async ({ page, }) => { await seedTheme(page, theme); @@ -75,7 +75,7 @@ for (const theme of THEMES) { await page.getByTestId("channel-members-trigger").hover(); const simpleTooltip = page.getByRole("tooltip"); await expect(simpleTooltip).toHaveText("Channel members"); - await expectSecondarySurface(simpleTooltip); + await expectPopoverSurface(simpleTooltip); await page.mouse.move(0, 0); await page.getByTestId("channel-intro-action-create-agent").click(); @@ -86,7 +86,7 @@ for (const theme of THEMES) { const richTooltip = page.getByRole("tooltip"); await expect(richTooltip).toContainText("Checks semantic surface contrast"); await expect(richTooltip).toContainText("Tooltip Reviewer"); - await expectSecondarySurface(richTooltip); + await expectPopoverSurface(richTooltip); await expect( richTooltip.getByText("Checks semantic surface contrast"), ).toHaveClass(/text-secondary-foreground\/80/);