fix(html): clarify foreground colors for generated links#19981

closed1
main
GitHub fork: fix/html-render-link-colors
opened14d agobyRrohan-patnaik
View on GitHubTwo-way sync enabledPR last imported 9d ago

Related to #17956.

The HTML-render guide groups --accent-foreground under “brand accent” without saying that it is text on the accent background. Generated reports can use it for page links instead. I reproduced the same rule in Ocean dark: link contrast is 1.07:1. It also fails in Grove, Ember and Iris dark, and all six built-in light themes.

Clarify the token pairing, give an underlined --foreground link example, and ask agents to preview both appearances. This is a small correction to the tool's existing instructions. It changes no palette or rendering behavior. Existing reports need their CSS corrected or regenerated; it does not guarantee future model compliance or automatically repair #17956.

Before / after following the corrected guidance (synthetic Ocean dark fixture, not an automatic migration):

Before: accent foreground on pageAfter: page foreground, underlined
BeforeAfter

Validation on Linux, Chromium 154, base 3ff452bd65adf758e68b886d1e3778ae1ec7d970:

  • Real browser rendering using the shared HTML bootstrap: all 12 built-in theme/appearance combinations exceed 4.5:1 with the recommended CSS; Ocean dark improves to 15.80:1. Accent-button colors stay unchanged. Reproduction and measured styles.
  • vp test run packages/shared/src/htmlRender.test.ts: 26 passed.
  • vp lint packages/shared/src/htmlRender.ts and vp fmt --check packages/shared/src/htmlRender.ts: passed.
  • tsc-rs --noEmit -p packages/shared/tsconfig.json: passed, with existing Effect suggestions in unrelated files.

No prose-matching test added. Custom themes and native mobile were not tested; the shared tool guidance applies to all clients. This does not change preview's default appearance.

Model: GPT-6 Astra. Harness: Codex in T3 Code.

Checks

8 successful · 5 skipped
All checks passed
a044ac2

Added 1 commit

  • fix(html): clarify foreground colors for generated linksa044ac2
Synced from GitHub

Approvability

Verdict: Approved at a044ac2

Macroscope's review found this PR approvable — This single-file change only refines the existing HTML-render tool guidance for theme-aware link colors and light/dark contrast checks. It does not change rendering code, theme defaults, schemas, or production infrastructure.

You can add or adjust custom eligibility rules. Learn more.

Synced from GitHub

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 068ff99f-59cc-4735-9bf2-9bbd8cca10e7
📥 Commits

Reviewing files that changed from the base of the PR and between 3ff452bd65adf758e68b886d1e3778ae1ec7d970 and a044ac2f9996a2875bf21b1a18c488800b308595.

📒 Files selected for processing: 1
  • packages/shared/src/htmlRender.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Walkthrough

The HTML theme guide now clarifies when to use --accent-foreground, specifies page link styling, and asks agents to preview both light and dark appearances.

Changes: HTML theme guide

Layer / File(s)Summary
Theme and link guidance
packages/shared/src/htmlRender.ts
The guide describes --accent-foreground as text on the brand accent background. It recommends underlined, foreground-colored page links and previews in both light and dark appearances.

Priority: ➖ Normal

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Other

Suggested reviewers: maria-rcks

Merge Risk: ⚪ Minimal · up to a044a

This change updates agent-facing HTML guidance without changing rendering behavior. No identified issue prevents merging.

Pre-merge checks: Passed 4
Check nameStatusExplanation
Title checkPassedThe title clearly and concisely describes the main change: clarifying foreground colors for generated links in HTML guidance.
Description checkPassedThe description explains the problem, proposed guidance change, scope, visual evidence, verification results, limitations, and agent attribution. It references issue #17956, but it does not show expli…
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

Note

Written by claude-opus-5-5 on behalf of Maria

Thanks for this. I'm closing it as part of PR triage. Right now we're only taking focused bug fixes from outside contributors (see Read this first), and this PR is not one.

From the review: This updates HTML generation guidance about --accent-foreground and link styling. Copy-only changes need maintainer agreement before implementation.

If you think this was a mistake, message me on Twitter at @maria_rcks and I'll take another look.