From 979ecd8b575289be59d879225cb735565154ac84 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Tue, 18 Aug 2026 23:55:58 -0700
Subject: [PATCH] fix(desktop-tooltips): align remaining semantic tokens

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../channels/ui/AddChannelBotTeamsSection.tsx |  2 ++
 .../src/features/projects/ui/ProjectCards.tsx |  2 +-
 .../styles/globals/tooltipSemantics.test.mjs  | 27 +++++++++++++++++++
 .../src/shared/styles/globals/utilities.css   | 18 ++++++-------
 desktop/tests/e2e/tooltip-semantics.spec.ts   |  6 +++++
 5 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 desktop/src/shared/styles/globals/tooltipSemantics.test.mjs

diff --git a/desktop/src/features/channels/ui/AddChannelBotTeamsSection.tsx b/desktop/src/features/channels/ui/AddChannelBotTeamsSection.tsx
index a3bad85629..326866cf63 100644
--- a/desktop/src/features/channels/ui/AddChannelBotTeamsSection.tsx
+++ b/desktop/src/features/channels/ui/AddChannelBotTeamsSection.tsx
@@ -154,12 +154,14 @@ export function AddChannelBotTeamsSection({
                         return (
                           <div
                             className="flex items-center gap-1 rounded-full bg-secondary-foreground/10 px-1.5 py-0.5"
+                            data-testid="team-tooltip-persona-chip"
                             key={persona.id}
                           >
                             <ProfileAvatar
                               avatarUrl={persona.avatarUrl}
                               className="h-4 w-4 text-3xs bg-secondary-foreground/20 text-secondary-foreground"
                               label={persona.displayName}
+                              testId="team-tooltip-persona-avatar"
                             />
                             <span className="text-2xs text-secondary-foreground">
                               {persona.displayName}
diff --git a/desktop/src/features/projects/ui/ProjectCards.tsx b/desktop/src/features/projects/ui/ProjectCards.tsx
index 4c387b60c3..52aa66500a 100644
--- a/desktop/src/features/projects/ui/ProjectCards.tsx
+++ b/desktop/src/features/projects/ui/ProjectCards.tsx
@@ -330,7 +330,7 @@ function RepositoryUnavailableIndicator({
       </TooltipTrigger>
       <TooltipContent className="max-w-64">
         <p className="font-medium">{label}</p>
-        <p className="text-muted-foreground">{description}</p>
+        <p className="text-secondary-foreground">{description}</p>
       </TooltipContent>
     </Tooltip>
   );
diff --git a/desktop/src/shared/styles/globals/tooltipSemantics.test.mjs b/desktop/src/shared/styles/globals/tooltipSemantics.test.mjs
new file mode 100644
index 0000000000..7fdc1d6097
--- /dev/null
+++ b/desktop/src/shared/styles/globals/tooltipSemantics.test.mjs
@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+
+const utilitiesCss = readFileSync(
+  new URL("./utilities.css", import.meta.url),
+  "utf8",
+);
+const huddleTooltipRule = utilitiesCss.match(
+  /\.buzz-huddle-tooltip\s*\{([\s\S]*?)\n\s*\}/,
+)?.[1];
+
+test("huddle tooltips consume their dedicated semantic tokens", () => {
+  assert.ok(huddleTooltipRule, "missing .buzz-huddle-tooltip rule");
+  assert.match(
+    huddleTooltipRule,
+    /background:\s*hsl\(\s*var\(--huddle-tooltip-surface,/,
+  );
+  assert.match(
+    huddleTooltipRule,
+    /color:\s*hsl\(\s*var\(\s*--huddle-tooltip-foreground,/,
+  );
+  assert.doesNotMatch(
+    huddleTooltipRule,
+    /--(?:primary|secondary)(?:-foreground)?/,
+  );
+});
diff --git a/desktop/src/shared/styles/globals/utilities.css b/desktop/src/shared/styles/globals/utilities.css
index a9da737bce..0d5e0f453f 100644
--- a/desktop/src/shared/styles/globals/utilities.css
+++ b/desktop/src/shared/styles/globals/utilities.css
@@ -38,16 +38,9 @@
   }
 
   .buzz-huddle-tooltip {
-    --primary: var(
-      --huddle-tooltip-surface,
-      var(--huddle-control-surface, 0 0% 20%)
+    background: hsl(
+      var(--huddle-tooltip-surface, var(--huddle-control-surface, 0 0% 20%))
     );
-    --primary-foreground: var(
-      --huddle-tooltip-foreground,
-      var(--huddle-control-foreground, 0 0% 98%)
-    );
-
-    background: hsl(var(--primary));
     border: 1px solid
       hsl(
         var(
@@ -57,7 +50,12 @@
         0.72
       );
     box-shadow: 0 10px 22px rgb(0 0 0 / 35%);
-    color: hsl(var(--primary-foreground));
+    color: hsl(
+      var(
+        --huddle-tooltip-foreground,
+        var(--huddle-control-foreground, 0 0% 98%)
+      )
+    );
   }
 
   .buzz-huddle-drawer .buzz-huddle-control-button,
diff --git a/desktop/tests/e2e/tooltip-semantics.spec.ts b/desktop/tests/e2e/tooltip-semantics.spec.ts
index 2b6f68348e..41e5a63400 100644
--- a/desktop/tests/e2e/tooltip-semantics.spec.ts
+++ b/desktop/tests/e2e/tooltip-semantics.spec.ts
@@ -79,6 +79,12 @@ for (const theme of THEMES) {
     await expect(richTooltip.getByText("Tooltip Reviewer")).toHaveClass(
       /text-secondary-foreground/,
     );
+    await expect(
+      richTooltip.getByTestId("team-tooltip-persona-chip"),
+    ).toHaveClass(/bg-secondary-foreground\/10/);
+    await expect(
+      richTooltip.getByTestId("team-tooltip-persona-avatar"),
+    ).toHaveClass(/bg-secondary-foreground\/20.*text-secondary-foreground/);
 
     await waitForAnimations(page);
     await dialog.screenshot({