FIX Restore chat bubble contrast in light mode#1708
Merged
romanlutz merged 1 commit intoMay 13, 2026
Conversation
The chat bubble styles silently lost the user-bubble background override:
both user and assistant bubbles ended up rendering with the same
colorNeutralBackground3 (rgb(245,245,245)), confirmed via
getComputedStyle on a live page. In light mode this also collapsed
the visual distinction between the assistant bubble and the surrounding
chat area, both of which sit at near-white luminance.
Two contributing causes:
1. The bubble className was built by string concatenation:
`${styles.messageContent} ${isUser ? styles.userMessageContent : ''}`
With Griffel's atomic CSS, conflicting properties on two sibling
classes are not deduped — the user-bubble override could not win.
Switched both bubble class assignments to mergeClasses, which is
the documented way to compose Griffel rule sets safely.
2. The assistant bubble used colorNeutralBackground3, which sits ~5/255
luminance below colorNeutralBackground2 (the chat area). Below the
3:1 WCAG threshold for non-text UI components. Switched the
assistant bubble to colorNeutralBackground1 + a colorNeutralStroke2
border so it pops against the chat area in both themes.
For the user bubble, switched to colorBrandBackground2 (the lighter
brand tint, same token used by activeRow in TargetTable) instead of
the deep colorBrandBackground. The bubble's footer text uses
colorNeutralForeground3 which is unreadable on a deep brand
background; the lighter tint preserves contrast for both the
message body and the dim timestamp/role labels without needing
per-element color overrides.
Tests:
- Added a regression test asserting the user and assistant bubble
containers receive distinct className strings, and that the user
bubble carries at least one style hook the assistant bubble doesn't.
This guards against future re-introduction of the string-concat bug
or accidental removal of the userMessageContent override.
- Existing 44 MessageList tests continue to pass; lint and type-check
are clean.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
romanlutz
force-pushed
the
fix/gui-light-mode-bubble-contrast
branch
from
acc1748 to
2f4849c
Compare
jsong468
approved these changes
May 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes finding documented in
PyRIT-gui-findings/findings/usability-light-mode-contrast/.Summary
Chat bubbles silently lost the user-bubble background override. Confirmed via
getComputedStyleon a live page: both user and assistant bubbles rendered with the samecolorNeutralBackground3(rgb(245, 245, 245)). In light mode this also collapsed the visual distinction between the assistant bubble and the surrounding chat area, both of which sit at near-white luminance.Two contributing causes:
mergeClasseswas missing. The bubbleclassNamewas built by string concatenation:`${styles.messageContent} ${isUser ? styles.userMessageContent : ''}`With Griffel's atomic CSS, conflicting properties on two sibling classes are not deduped — the user override could not win. Switched both bubble class assignments to
mergeClasses, the documented way to compose Griffel rule sets.Assistant bubble background too close to the chat area. The assistant bubble used
colorNeutralBackground3, which sits ~5/255 luminance belowcolorNeutralBackground2(the chat area). Below the 3:1 WCAG threshold for non-text UI components. Switched tocolorNeutralBackground1+ acolorNeutralStroke2border so it pops against the chat area in both themes. The user bubble keepscolorBrandBackground(now actually applied) plus a matching brand-stroke border for symmetry.Tests
classNamestrings, and that the user bubble carries at least one style hook the assistant bubble doesn't. This guards against future re-introduction of the string-concat bug or accidental removal of theuserMessageContentoverride.Verification
Reproduced on the fix branch by setting an active target, sending a prompt, and toggling light/dark mode. User bubble renders solidly in brand-blue with white text; assistant bubble renders cleanly with a subtle border, clearly distinct from the chat-area background in both themes.
Screenshots
before - light
after - light
after - dark
