fix(desktop-tooltips): align remaining semantic tokens

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>

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}

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

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)?/,
+  );
+});

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,

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