fix(desktop-tooltip): increase surface contrast (#6897)

**Category:** fix
**User Impact:** Tooltips now use a higher-contrast surface, making
their labels easier to read across desktop themes.

**Problem:** Tooltip surfaces could blend into hovered content, making
labels difficult to distinguish.

**Solution:** Use the existing popover surface and foreground tokens for
clearer visual separation and theme-aware contrast.

<details>
<summary>File changes</summary>

**desktop/src/shared/ui/tooltip.tsx**
Updates shared tooltip colors to use higher-contrast semantic surface
and foreground tokens.

</details>

## Reproduction steps

1. Run the desktop app and hover a control that displays a tooltip.
2. Compare the tooltip against the content beneath it in both light and
dark themes.
3. Confirm the tooltip surface remains clearly distinguishable and its
label is readable.

## Screenshots

| Before | After |
| --- | --- |
| ![Tooltip using the lower-contrast secondary
surface](https://d24qwcpro867f5.cloudfront.net/repos/buzz/prs/6897/tooltip-before.png)
| ![Tooltip using the higher-contrast popover
surface](https://d24qwcpro867f5.cloudfront.net/repos/buzz/prs/6897/tooltip-after.png)
|

## Validation

- `pnpm build:e2e`
- `pnpm exec playwright test tests/e2e/tooltip-semantics.spec.ts
--project=smoke` — 4 passed
- `pnpm exec biome check src/shared/ui/tooltip.tsx
tests/e2e/tooltip-semantics.spec.ts`
- Pre-push desktop checks, typecheck, and unit tests
- `git diff --check`
- Full smoke project attempted; 345 of 1,222 tests passed without
failure before the 10-minute local execution limit.

---------

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@buzz.block.builderlab.xyz>

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}

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 = {

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/);