Skip to content

Use Blue 11 links with Blue 3 hover and explicit contrast exceptions - #322

Merged
klopez4212 merged 5 commits into
mainfrom
kennylopez-link-color-options
Sep 28, 2026
Merged

klopez4212 merged 5 commits into
mainfrom
kennylopez-link-color-options

Conversation

@klopez4212

@klopez4212 klopez4212 commented Sep 27, 2026 •

Copy link
Copy Markdown
Contributor

Inline links and mentions currently use Blue 12, which appears too dark in light mode. Use the designer-selected Blue 11 text with Blue 3 hover in both themes; update the token registry and document the accepted contrast tradeoff.

Accepted contrast shortfalls

This deliberately departs from the WCAG AA goal on some light surfaces and the APCA Lc 60 body target on eight mode/surface pairs. It is not a full accessibility pass.

Mode / surface APCA Lc WCAG ratio
Light selected 58.831 3.889
Light neutral-4 row 50.774 3.409
Dark panel 59.953 8.279
Dark popover, subtle and selected (three pairs) 55.433 6.010
Dark neutral-4 row 58.707 7.476
Dark link hover 57.791 7.076

Light base/inset/subtle also remain below WCAG 4.5:1 at 4.374:1, while clearing APCA. The user explicitly approved these known tradeoffs after viewing the link-color comparison.

The guard accepts only the eight exact mode, text-role, surface-role, foreground-color and background-color combinations. It prints each exception with both measurements and reports unused exceptions. Changed colors and other roles/surfaces retain the normal checks; the global threshold and hooks are unchanged. Blue 3 hover is an accepted tradeoff: light clears APCA at Lc 64.614 but misses WCAG at 4.252:1; dark clears WCAG at 7.076:1 but misses APCA at Lc 57.791. Only that exact dark hover pair is additionally excepted. Existing focus appearance remains unchanged.

Validation

  • Independent agent follow-up review: 9/10, no blockers.
  • Real InlineLink rendered in Link Lab in both themes; verified Blue 11 text and Blue 3 hover tokens. Local comparison now shows Blue 3 as chosen.
  • 17 contrast regression tests passed, including rejection of Blue 4 hover and a mutated Blue 3 dark value. Before the exact exception, the real contrast guard failed on dark hover; it passes with the shortfall printed explicitly.
  • 104 design tests and both viewer builds passed; existing large-chunk warnings remain.
  • Normal pre-commit/pre-push hooks passed at 0a64681c: TypeScript, 25 related tests, design types and guards. All three commits have Signed-off-by trailers.
  • No browser journeys added or removed. Local comparison experiment remains uncommitted and was present during validation; it is excluded from this PR.
  • The designer reviewed the comparison, selected Blue 3 hover, and confirmed readiness for review after the revised preview was provided.
  • Hosted DCO passed at 0a64681c; CI is running. Deferred: native/live-conversation testing and full accessibility audit. No merge requested.

buzz-review-completed

Snapshots

Local Link Lab with the real inline-link component; these existing snapshots show unchanged Blue 11 resting text, not the revised hover or native-app proof.

Light mode

Dark mode

Signed-off-by: klopez4212 <klopez4212@gmail.com>
Signed-off-by: klopez4212 <klopez4212@gmail.com>
@klopez4212
klopez4212 requested review from a team, comp615 and wesbillman as code owners September 27, 2026 17:55
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Sep 27, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-09-28T16:11:05.312257Z 35a72af New commits
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@klopez4212
klopez4212 marked this pull request as draft September 27, 2026 18:01
Signed-off-by: klopez4212 <klopez4212@gmail.com>
@klopez4212 klopez4212 changed the title Use Blue 11 links with Blue 2 hover and explicit contrast exceptions Use Blue 11 links with Blue 3 hover and explicit contrast exceptions Sep 27, 2026
@klopez4212
klopez4212 marked this pull request as ready for review September 27, 2026 18:08

@wesbillman wesbillman left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Star Lord’s automated source review, published through Wes’s account (wesbillman).

Reviewed head: 0a64681c0fc65bf07d4c4a1cb1a1b47218601373
Pinned base: 3e0a4087b9c09df911f080a3c3a3534d5d7bffab
Diff merge base: f5c49be04b0f4cdabc926580caf73e6035ea39d8

One actionable P2 finding, attached inline: the retained browser journey still asserts the superseded link color. The smallest repair is to update that expectation without reverting the approved palette.

Scope: all seven changed files; shared link/mention CSS and the host link-renderer path; exact-pair contrast exceptions, guard control flow and regression cases; retained color assertions under src and tests. The explicitly approved contrast shortfalls and existing focus policy are preserved, not reopened as findings. No additional actionable findings in that scope.

Validation limits: source-only analysis of hash-verified files at the pinned head, with no dirty source inputs. I did not execute PR code, tests, builds or the app, and did not verify CI, native/live-conversation behavior or a full accessibility audit. The test mismatch is demonstrated by source, not an observed test-run failure; author-reported checks are not independently reproduced. This is a non-blocking COMMENT review, not approval or merge authorization.

--text-accent: var(--purple-12);
--text-link: var(--blue-12);
--affordance-link-hover: var(--blue-4);
--text-link: var(--blue-11);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] Update the retained Buzz-link browser color expectation

tests/browser/buzz-links.spec.mjs:48 still expects rgb(17, 50, 100) (Blue 12). That journey enables the Links renderer, whose className reaches the host anchor via MessageLink.tsx:134; InlineReference.module.css:2-9 then takes its color directly from --text-link. With this mapping, light-mode text instead resolves to #0d74ce / rgb(13, 116, 206). Once the existing journey reaches the assertion, it cannot pass and stops before the subsequent hover/preview/navigation checks, despite the intended rendering. Please update the retained expectation to the approved Blue 11 value and validate the journey in its existing Chromium and WebKit projects; the palette itself need not change. This is a source-demonstrated mismatch, not a locally reproduced failure.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤖 Fixed in eca8e74: the retained Buzz-link journey now expects the approved Blue 11 color, rgb(13, 116, 206). All eight cases in tests/browser/buzz-links.spec.mjs pass locally across Chromium and WebKit, including the hover, preview, and navigation checks after this assertion.

klopez4212 and others added 2 commits September 28, 2026 09:03
Signed-off-by: klopez4212 <klopez4212@gmail.com>
Signed-off-by: Codex <codex@openai.com>
@klopez4212
klopez4212 merged commit a88974f into main Sep 28, 2026
14 checks passed
@klopez4212
klopez4212 deleted the kennylopez-link-color-options branch September 28, 2026 16:35
johnmatthewtennant pushed a commit that referenced this pull request Sep 28, 2026
* origin/main: (45 commits)
  Use Blue 11 links with Blue 3 hover and explicit contrast exceptions (#322)
  perf(messages): index the emoji catalog for reaction lookups (#333)
  Polish search palette and add conversation search (#340)
  Use step-ten avatar colors with contrasting outlines (#320)
  Keep profile avatar cutouts transparent and align the header gutter (#319)
  Restore sidebar status icons beside names (#316)
  docs(mentions): specify portable mention rules (#343)
  fix(agents): wait for native host operations (#331)
  Simplify channel templates and report setup failures accurately (#318)
  feat(agents): Harnesses Goose install (slice 3/5) (#279)
  feat(agents): Harnesses status card in Settings (slice 2/5, stacked on #272) (#277)
  Fix timer operation ownership and stabilize timing regressions (#317)
  Restore cached workspace before relay startup (#311)
  test(browser): wait for the app's own quota cooldown before retrying (#284)
  docs: define Harnesses setup and global agent defaults (#272)
  Make mention choices consistent and stable (#258)
  Discover saved relay agents without changing the page (#224)
  feat: add persistent dev log levels and relay traffic summaries (#306)
  Polish inline message reactions and previews (#213)
  feat(identity): add native macOS import, creation and backup (#308)
  ...

Signed-off-by: Sol <49aa1f65411fd096d2e2ec144f1e7aa36fdc76d1b907cfdf7be000c66f9d3b8e@buzz.block.builderlab.xyz>

# Conflicts:
#	src/bundled/agents/AgentCard.tsx
#	src/bundled/agents/AgentsPage.tsx
johnmatthewtennant pushed a commit that referenced this pull request Sep 28, 2026
* origin/main: (36 commits)
  Delay message timestamp tooltips by 500 ms (#321)
  Use Blue 11 links with Blue 3 hover and explicit contrast exceptions (#322)
  perf(messages): index the emoji catalog for reaction lookups (#333)
  Polish search palette and add conversation search (#340)
  Use step-ten avatar colors with contrasting outlines (#320)
  Keep profile avatar cutouts transparent and align the header gutter (#319)
  Restore sidebar status icons beside names (#316)
  docs(mentions): specify portable mention rules (#343)
  fix(agents): wait for native host operations (#331)
  Simplify channel templates and report setup failures accurately (#318)
  feat(agents): Harnesses Goose install (slice 3/5) (#279)
  feat(agents): Harnesses status card in Settings (slice 2/5, stacked on #272) (#277)
  Fix timer operation ownership and stabilize timing regressions (#317)
  Restore cached workspace before relay startup (#311)
  test(browser): wait for the app's own quota cooldown before retrying (#284)
  docs: define Harnesses setup and global agent defaults (#272)
  Make mention choices consistent and stable (#258)
  Discover saved relay agents without changing the page (#224)
  feat: add persistent dev log levels and relay traffic summaries (#306)
  Polish inline message reactions and previews (#213)
  ...

Signed-off-by: Sol <49aa1f65411fd096d2e2ec144f1e7aa36fdc76d1b907cfdf7be000c66f9d3b8e@buzz.block.builderlab.xyz>

# Conflicts:
#	src/bundled/agents/AgentEditor.tsx
#	src/bundled/profiles/ProfileAgentIdentity.test.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants