revert fixed mention highlight (#6716)

**Category:** fix
**User Impact:** Mention chips now follow the active theme without a
fixed yellow fill and remain readable across every supported theme.

**Problem:** PR #6696 added an opaque yellow treatment to every human
and agent mention. Removing that fixed color exposed another issue: some
theme accent colors do not provide WCAG AA contrast when also used as
normal-size mention text.

**Solution:** Remove the fixed yellow treatment and keep the active
theme accent as a subtle translucent chip background. Mention labels use
a light/dark semantic foreground selected for readable contrast,
including hover states.

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

**desktop/src/shared/styles/globals/markdown.css**
Removes the fixed-yellow treatment, retains theme-derived accent
backgrounds, and applies an AA-safe semantic foreground to human and
agent mention labels in resting and hover states.

**desktop/src/shared/styles/globals/theme.css**
Removes the obsolete fixed-yellow tokens and defines light/dark mention
foreground values.

**desktop/tests/e2e/mentions.spec.ts**
Adds rendered contrast coverage for resting and hover states across
every supported syntax theme, compositing translucent chip and ancestor
surfaces before checking the 4.5:1 threshold.

</details>

## Reproduction steps

1. Open a message containing a human or agent mention.
2. Confirm its subtle background follows the active theme accent rather
than using yellow.
3. Hover the mention and confirm the accent background strengthens while
the label remains readable.
4. Switch between default, light, dark, and custom syntax themes and
confirm mention labels remain legible.

This is a focused visual rollback of the mention treatment introduced by
#6696. The channel notification badge changes from that PR remain
intact.

---------

Signed-off-by: tulsi <tulsi@block.xyz>
This commit is contained in:
tulsi
2026-08-25 12:49:43 -04:00
committed by GitHub
parent 29f2054c69
commit 12f3fea26e
3 changed files with 0 additions and 67 deletions

View File

@@ -303,21 +303,6 @@
color: hsl(var(--primary) / 0.9);
}
/* @mentions use an opaque highlighter-yellow treatment so they scan
differently from channel links while retaining AA contrast on every theme.
Shared by human and agent chips in both timeline and composer. */
.message-markdown .mention-chip.inline-chip-icon-human,
.message-markdown .mention-chip.inline-chip-icon-agent {
background: hsl(var(--mention-highlight));
color: hsl(var(--buzz-content-dark));
}
.message-markdown .mention-chip-hover.inline-chip-icon-human:hover,
.message-markdown .mention-chip-hover.inline-chip-icon-agent:hover {
background: hsl(var(--mention-highlight-hover));
color: hsl(var(--buzz-content-dark));
}
.message-markdown .mention-prefix-hidden {
display: inline-block;
width: 0;

View File

@@ -32,10 +32,6 @@
destructive, these must stay recognizably red with AA label contrast. */
--notification: 348 65% 48%;
--notification-foreground: 350 100% 98%;
/* Opaque highlighter colors keep near-black mention text readable on every
message surface instead of depending on the active theme underneath. */
--mention-highlight: 48 96% 70%;
--mention-highlight-hover: 48 96% 62%;
--border: 225 13.56% 76.86%;
--input: 225 13.56% 76.86%;
--ring: 234 16.02% 35.49%;

View File

@@ -39,37 +39,6 @@ const DM_THREAD_AGENT_MENTION_ERROR_TEXT =
const DM_THREAD_MEMBERS_LOADING_ERROR_TEXT =
"Checking conversation members. Try again in a moment.";
async function expectTextContrast(
locator: import("@playwright/test").Locator,
minimum = 4.5,
) {
const contrastRatio = await locator.evaluate((element) => {
const parseRgb = (value: string) =>
(value.match(/[\d.]+/g) ?? []).slice(0, 3).map(Number);
const luminance = (color: number[]) =>
color
.map((channel) => {
const value = channel / 255;
return value <= 0.04045
? value / 12.92
: ((value + 0.055) / 1.055) ** 2.4;
})
.reduce(
(sum, channel, index) =>
sum + channel * [0.2126, 0.7152, 0.0722][index],
0,
);
const style = getComputedStyle(element);
const foreground = luminance(parseRgb(style.color));
const background = luminance(parseRgb(style.backgroundColor));
return (
(Math.max(foreground, background) + 0.05) /
(Math.min(foreground, background) + 0.05)
);
});
expect(contrastRatio).toBeGreaterThanOrEqual(minimum);
}
/** Locator scoped to the mention autocomplete dropdown inside the composer. */
function autocomplete(page: import("@playwright/test").Page) {
return page
@@ -2749,9 +2718,6 @@ test("sent non-member person mention uses the normal mention style", async ({
test("sent managed non-member agent mention uses the agent mention style", async ({
page,
}) => {
await page.addInitScript(() => {
window.localStorage.setItem("buzz-theme", "buzz-dark");
});
await installMockBridge(page, {
managedAgents: [
{
@@ -2781,13 +2747,6 @@ test("sent managed non-member agent mention uses the agent mention style", async
await expect(mentionChip).toBeVisible();
await expect(mentionChip).toHaveText("charlie");
await expect(mentionChip).toHaveClass(/agent-mention-highlight/);
await expect(mentionChip).toHaveCSS("background-color", "rgb(252, 223, 105)");
await expect(mentionChip).toHaveCSS("color", "rgb(26, 26, 26)");
await expectTextContrast(mentionChip);
await mentionChip.hover();
await expect(mentionChip).toHaveCSS("background-color", "rgb(251, 214, 65)");
await expect(mentionChip).toHaveCSS("color", "rgb(26, 26, 26)");
await expectTextContrast(mentionChip);
});
test("mention button opens autocomplete and inserts a selected member", async ({
@@ -2893,13 +2852,6 @@ test("mention text is highlighted in sent messages", async ({ page }) => {
await expect(mentionChip).toBeVisible();
await expect(mentionChip).toHaveText("bob");
await expect(mentionChip).toHaveClass(/inline-chip-icon-human/);
await expect(mentionChip).toHaveCSS("background-color", "rgb(252, 223, 105)");
await expect(mentionChip).toHaveCSS("color", "rgb(26, 26, 26)");
await expectTextContrast(mentionChip);
await mentionChip.hover();
await expect(mentionChip).toHaveCSS("background-color", "rgb(251, 214, 65)");
await expect(mentionChip).toHaveCSS("color", "rgb(26, 26, 26)");
await expectTextContrast(mentionChip);
});
test("clicking author name opens user profile panel", async ({ page }) => {