Bold renders the real element: the Bold color setting applies
The owner's repro: the appearance Bold color never applied anywhere. Root cause: streamdown's default `strong` component renders bold as <span class="font-semibold" data-streamdown="strong"> - NOT a <strong> element - while the app's ink plumbing (.lh-prose :where(strong, b) in globals.css, zero specificity by design) matches strong/b ELEMENTS. So bold text never took --lh-ink-strong: not the factory #c96b4a, not any settings boldColor (it rendered plain foreground at weight 600). Italic always worked because streamdown leaves `em` native - hence the asymmetry the owner noticed. Fix: a `strong` override in mdComponents (the stable module-level set, so Streamdown's memoized tree keeps identity) renders the semantic element: <strong data-streamdown="strong">. Screen readers announce emphasis again, the designed token rule applies unmodified, and the weight reads 700 (the .lh-prose rule) instead of the span's 600. Both Streamdown surfaces (MessageResponse, reasoning) pass mdComponents, so every markdown surface is covered. Verified live: bold in seedplan now renders #c96b4a at weight 700 in a real <strong>; after PUTting boldColor #7dd3fc the live strong flips to rgb(125,211,252) with no reload; italic unchanged (#6fa9d6 native em). Scratch record restored to unset.
This commit is contained in:
@@ -338,8 +338,26 @@ export function MathDisplay(props: ComponentProps<"span"> & ExtraProps) {
|
||||
|
||||
// ─── The stable override set (module identity: Streamdown is memoized) ────────
|
||||
|
||||
/** Bold as the REAL element (appearance fix, 2026-09-23): streamdown's
|
||||
* default `strong` renders `<span class="font-semibold" data-streamdown=
|
||||
* "strong">` — and `.lh-prose :where(strong, b)` matches strong/b
|
||||
* ELEMENTS, so neither the factory ink (#c96b4a) nor a settings
|
||||
* boldColor ever landed on bold text (italic worked: streamdown leaves
|
||||
* `em` native). Rendering the semantic element restores screen-reader
|
||||
* emphasis AND lets the designed token rule apply unmodified — color
|
||||
* --lh-ink-strong, weight 700 (beating the old 600 utility). */
|
||||
export function MarkdownStrong(props: ComponentProps<"strong"> & ExtraProps) {
|
||||
const { children, className, node, ...rest } = props;
|
||||
return (
|
||||
<strong data-streamdown="strong" className={className} {...rest}>
|
||||
{children}
|
||||
</strong>
|
||||
);
|
||||
}
|
||||
|
||||
export const mdComponents = {
|
||||
code: MarkdownCode,
|
||||
table: MarkdownTable,
|
||||
span: MathDisplay,
|
||||
strong: MarkdownStrong,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user