Files
mattermost/docs
Eva SarafianouandCursor f0de1f485b [Docs Revamp Feedback] Readability & accessibility fixes (#37665)
* Fix readability & accessibility issues from Docs Revamp feedback

Addresses the readability/accessibility batch collected 2026-07-22/23 in
the "Docs Revamp - Feedback" channel and Eric Sethna's first-pass review
doc:

- Dark-mode "note" callout text vs. background contrast (Michael
  Roberson; Eric Sethna's doc item 8) — pin explicit brand colors for
  dark-mode admonitions instead of Infima's generic secondary-alert
  pairing.
- Link color/body-text visual distinction, both themes (Vishal
  Choudhary, Marco Kundt; Eric Sethna's doc item 5) — new link colors
  that stay far apart in luminance from surrounding body text (not just
  from the page background), plus default (not hover-only) underlines.
- Body text should read darker, like the old docs site (Vishal
  Choudhary) — wire --ifm-font-color-base to --mm-text-primary instead
  of Infima's unbranded default.
- Main content panel doesn't visually "pop" against the side nav/TOC
  (Vishal Choudhary) — tint the sidebar/TOC panels with --mm-bg-subtle
  and leave the reading column on the page background.
- Dark-mode inline code contrast (Marco Kundt) — explicit text color via
  --mm-text-primary.
- Bold/color combo hard to read (Ben Cooke) — subtle letter-spacing on
  bold runs in prose.
- Heading/TOC category font not readable, vs. the readable "IME" example
  (Eric Sethna's doc item 1) — swap the 900-weight display face out of
  small multi-word TOC category labels for the base sans face at bold
  weight, matching the same fix already applied to navbar links.
- Inline code spans taking up excess vertical space (Eric Sethna's doc
  item 9) — pin line-height on inline `code` so it stops inheriting the
  1.65 paragraph line-height; multi-line fences are unaffected.
- Prose max-width too wide on large screens (Rohith Chandran) — cap
  top-level article prose at ~760px via a `.markdown > `-scoped rule that
  leaves the OpenAPI 2-column layout (nested deeper) untouched.

Full WCAG contrast math for every changed pair is in the PR description.

Note: this touches docs/site/src/css/custom.css and tokens.css, which a
parallel "remove yellow left border" workstream also touches (callout/
card border styles) — left border/accent-bar colors are deliberately
untouched here to minimize overlap, but a merge conflict is still likely.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Address review feedback on readability/a11y PR

- Extend dark-mode admonition background fix from "note" to all five
  alert types (info/success/warning/danger) — the "hard on the eyes"
  complaint (item 13) wasn't note-specific. Also pin the alert heading
  label and icon color explicitly, since Infima's inheritance made the
  "NOTE"-style label the most visibly low-contrast part of the callout.
- Drop the default underline on prose links; use medium weight (600) as
  the non-color WCAG 1.4.1 cue instead, keeping underline for hover/focus
  only.
- Stop forcing code blocks to our --mm-denim-800 background in dark mode.
  Docusaurus's dark Prism theme (dracula) has its own background/token
  contrast pairing; overriding just the background broke that pairing.
  Letting the theme's own background show through (already applied to
  the block's container via --prism-background-color) fixes contrast.
- Apply the same small/multi-word-heading fix already used for TOC
  category labels to table column headers, which have the identical
  problem (multi-word labels in the 900-weight display face). Left
  footer titles on the heading face since those are short single words,
  the case that face handles fine — documented why.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix dark-mode contrast for code blocks, inline code, and note callouts

Code block, callout, and inline-code backgrounds/borders all sat within
~1:1 contrast of the dark-mode page background (same navy hue family),
so they had no visible edge or fill distinct from the page. The
unscoped dark-mode `code` background rule also leaked into code
blocks' own `<code>` element (beating Infima's `pre code: transparent`
on specificity), masking most of the code block fill behind a
near-black overlay regardless of the fill color chosen.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix dark-mode contrast for blockquotes, inline code, and table stripes

Same root cause as the earlier code-block/callout fixes: --mm-denim-800
and --mm-denim-700 sit within ~1:1 contrast of the dark-mode page
background, so blockquotes, inline code chips, and even-row table
striping all had no visible fill against the page. Switched them to
--mm-bg-surface (+ denim-400 borders where a border exists) to match
the surface treatment already used elsewhere.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Tone down h1 title weight; revert prose max-width cap

- h1 page titles were still on the 900-weight Archivo Black poster
  face after h2-h4 got moved to a normal-weight sans face for the
  same "too heavy/shouty" reason. Bring h1 in line with the rest so
  every page title uses one consistent weight.
- Revert the 760px max-width cap on top-level markdown prose blocks
  (added for Rohith Chandran's wide-line-length feedback) — it also
  squeezed non-article layouts like the homepage's persona cards.
  Needs more thought before reapplying narrower/more targeted.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Trim verbose CSS comments introduced in this branch

Cut reviewer-name/item-number attributions and repeated exploratory
narrative down to the "why" a future reader actually needs, and fixed
a couple of comments left stale by later commits (e.g. h1 no longer
using the Archivo Black display face). Also dropped a redundant
background declaration in the dark-mode .callout override that just
re-set the same value the base rule's --mm-bg-surface already
resolves to per theme.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-27 09:58:43 +03:00
..