Jesse_Chen
c2d705ef6e
The palette is restated for dark rather than inverted: elevation reads through lightness on dark and through darkness on light, so the floor is the darkest surface here and the second-lightest there. The clay hue is kept and lifted, because #85432f is 2.1:1 on a dark ground. All 37 themeable tokens are covered, in an OS-preference block and a data-theme block that a contract test keeps identical, and ink, action, danger, success and warning are asserted at 4.5:1 against the dark canvas. Four raw colors that would have stayed light-theme values are tokenised (the avatar hairline, the sheen sweep, a one-off shadow, a literal warning hex). The QR keeps literal white in both themes, since scanners need light modules to be light, and print keeps white paper. The four root boundary pages cannot read a token, so they restate the handful they need in both themes. forbidden.tsx also stops painting a bespoke near-black page in four colours that appear nowhere in the palette, which broke the rule that dark ink is never a page-scale surface. Also fixes what the audit found in DESIGN.md itself: two ink values that had drifted from the code, a motion tier documented at 360ms that was never implemented, a breakpoint section claiming three tiers where the stylesheet has eleven, an undocumented report-paper palette, and an admin section describing a bespoke panel that antd + Refine replaced. Five zero-reference admin rules go with it. The sidebar gets the accent, opaque drawer, heading rank and empty-state guidance settled earlier, and fenced code blocks finally get a container. BUG-439. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0155nFCgCHtoA7jhSDGmZmMu
46 lines
2.4 KiB
TypeScript
46 lines
2.4 KiB
TypeScript
import assert from "node:assert/strict";
|
|
import { readFileSync } from "node:fs";
|
|
import test from "node:test";
|
|
|
|
import { cssDeclarations } from "./css-contract-test-support.ts";
|
|
|
|
const globalStyles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
|
|
const markdownView = readFileSync(new URL("../src/components/chat-markdown-view.tsx", import.meta.url), "utf8");
|
|
const codeBlock = readFileSync(new URL("../src/components/markdown-code-block.tsx", import.meta.url), "utf8");
|
|
|
|
test("a fenced code block scrolls inside itself instead of spilling out of the message", () => {
|
|
// There was no rule for fenced blocks at all. A bare <pre> keeps
|
|
// `white-space: pre` with no overflow, so one long line pushed past the
|
|
// message column; the fix has to keep both properties together.
|
|
const body = cssDeclarations(".markdown-code pre > code", globalStyles);
|
|
assert.match(body, /overflow-x:\s*auto/);
|
|
assert.match(body, /white-space:\s*pre\b/);
|
|
assert.match(cssDeclarations(".markdown-code", globalStyles), /overflow:\s*hidden/);
|
|
});
|
|
|
|
test("the block resets the inline-code chip styling", () => {
|
|
// `.message-markdown code` paints a small chip for inline code. Inside a
|
|
// fence that chip has to go, or every block gets a nested background.
|
|
assert.match(cssDeclarations(".markdown-code pre > code", globalStyles), /background:\s*none/);
|
|
assert.match(cssDeclarations(".markdown-code pre", globalStyles), /background:\s*none/);
|
|
});
|
|
|
|
test("react-markdown routes fences through the block, not a bare pre", () => {
|
|
assert.match(markdownView, /pre: \(\{ children \}\) => <MarkdownCodeBlock>/);
|
|
});
|
|
|
|
test("the copy control is labelled and the language is announced as text", () => {
|
|
assert.match(codeBlock, /aria-label=\{copied \? "已复制代码" : "复制代码"\}/);
|
|
assert.match(codeBlock, /language \|\| "代码"/);
|
|
// The copy target is the raw fence source, not rendered markup.
|
|
assert.match(codeBlock, /navigator\.clipboard\.writeText\(source\)/);
|
|
// A rejected clipboard permission must not flip the button to "copied".
|
|
assert.match(codeBlock, /catch \{\s*return;\s*\}/);
|
|
});
|
|
|
|
test("the copy timer is cleared when the block unmounts", () => {
|
|
// Streaming replaces these blocks constantly; a dangling timer would set
|
|
// state on an unmounted node.
|
|
assert.match(codeBlock, /useEffect\(\(\) => \(\) => \{[\s\S]*clearTimeout\(resetTimer\.current\)/);
|
|
});
|