mirror of
https://github.com/block/buzz.git
synced 2026-10-27 12:40:30 +00:00
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:
@@ -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;
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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 }) => {
|
||||
|
||||
Reference in New Issue
Block a user