fix(FN-3847): restore pressed toggle contrast in dashboard views

- Switch pressed toggle foreground styling to use the --accent-text token
- Apply the contrast fix to AgentLogViewer and DocumentsView toggle styles
- Add regression coverage in AgentLogViewer tests for pressed-toggle contrast behavior
- Add a changeset for the @runfusion/fusion patch release

Fusion-Task-Id: FN-3847
This commit is contained in:
Fusion
2026-05-09 09:52:17 -07:00
committed by gsxdsm
parent 11061bbd84
commit 0a2f3d6024
4 changed files with 31 additions and 2 deletions

View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Fix low-contrast Markdown/Tools/fullscreen toggle buttons in the agent log header by replacing the undefined `--text-on-accent` CSS variable with the canonical `--accent-text` token. Also fixes the same typo in DocumentsView.

View File

@@ -265,7 +265,7 @@
.agent-log-mode-toggle[aria-pressed="true"] {
background: var(--accent);
color: var(--text-on-accent);
color: var(--accent-text);
border-color: var(--accent);
}

View File

@@ -555,7 +555,7 @@
.document-mode-toggle[aria-pressed="true"] {
background: var(--accent);
color: var(--text-on-accent);
color: var(--accent-text);
border-color: var(--accent);
}

View File

@@ -1386,6 +1386,30 @@ describe("AgentLogViewer", () => {
expect(toggle.getAttribute("aria-label")).toBe("Switch to plain text mode");
});
it("FN-3847: uses accent text color for pressed markdown/tools toggles", () => {
window.localStorage.setItem("fn-agent-log-markdown", "true");
window.localStorage.setItem("fn-agent-log-tool-output", "true");
const entries = [makeEntry({ text: "hello" })];
const { container } = render(<AgentLogViewer entries={entries} loading={false} />);
const markdownToggle = container.querySelector("[data-testid='agent-log-mode-toggle']") as HTMLButtonElement;
const toolsToggle = container.querySelector("[data-testid='agent-log-tool-output-toggle']") as HTMLButtonElement;
const fullscreenToggle = container.querySelector("[data-testid='agent-log-fullscreen-toggle']") as HTMLButtonElement;
expect(markdownToggle.getAttribute("aria-pressed")).toBe("true");
expect(toolsToggle.getAttribute("aria-pressed")).toBe("true");
const markdownColor = getComputedStyle(markdownToggle).color;
const toolsColor = getComputedStyle(toolsToggle).color;
const unpressedColor = getComputedStyle(fullscreenToggle).color;
// Contract: unpressed toggles keep the shared muted button color, pressed toggles switch to accent foreground.
expect(markdownColor.length).toBeGreaterThan(0);
expect(toolsColor.length).toBeGreaterThan(0);
expect(markdownColor).toBe(toolsColor);
expect(markdownColor).not.toBe(unpressedColor);
});
it("switches to plain text mode when clicked", () => {
const entries = [makeEntry({ text: "**bold** and *italic*" })];
const { container } = render(<AgentLogViewer entries={entries} loading={false} />);