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 (
{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({
{label}
- {description}
+ {description}
);
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({