diff --git a/desktop/src/shared/styles/globals/markdown.css b/desktop/src/shared/styles/globals/markdown.css index 135c036e74c..251fdb525c2 100644 --- a/desktop/src/shared/styles/globals/markdown.css +++ b/desktop/src/shared/styles/globals/markdown.css @@ -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; diff --git a/desktop/src/shared/styles/globals/theme.css b/desktop/src/shared/styles/globals/theme.css index 875a17aedfc..9b55da2703f 100644 --- a/desktop/src/shared/styles/globals/theme.css +++ b/desktop/src/shared/styles/globals/theme.css @@ -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%; diff --git a/desktop/tests/e2e/mentions.spec.ts b/desktop/tests/e2e/mentions.spec.ts index e90281a52fa..6726a224024 100644 --- a/desktop/tests/e2e/mentions.spec.ts +++ b/desktop/tests/e2e/mentions.spec.ts @@ -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 }) => {