Repository navigation
fix(messages): swap bubble fills for reactions you've made, drop the ring - #2949
Conversation
Your reactions keep their accent tint but lose the 1px ring, matching how Slack marks them. Forced-colors mode keeps a Highlight ring, since it replaces the tint. Co-authored-by: mbot <3754f8729004d95654c46dbab3129e4ab9ef05cc2534e2a3fbfc155983bd637b@buzz.block.builderlab.xyz>
Codex Review Summary: ✅ CompletedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
kalvinnchau
left a comment
There was a problem hiding this comment.
🤖 LGTM. Ring and its tokens removed cleanly; no remaining references to border-reaction-self* or --reaction-self-border at head. Forced-colors keeps a Highlight ring since the tint is dropped there.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 41089b70a9
ℹ️ 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".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| /* A reaction you made: an accent tint. */ | ||
| --affordance-reaction-self: var(--accent-3); | ||
| --affordance-reaction-self-own: var(--affordance-reaction-self); |
There was a problem hiding this comment.
With the Mono accent in light mode, this role resolves to #f3f3f3 while a received message bubble is #f3f3f4; after the outline is removed in Messages.module.css, clicking a reaction therefore makes its capsule virtually disappear instead of leaving a visible indication that it is yours. Use a stronger Mono selected fill or retain another persistent marker for this palette so selection remains apparent after the pointer leaves.
AGENTS.md reference: src/shared/design-system/AGENTS.md:L29-L34
Useful? React with 👍 / 👎.
A reaction you made on someone else's message, or on the panel, takes your own bubble's fill and ink. Inside your own bubble it takes the received bubble's fill and ink instead, so it no longer sits as a faint highlight on a highlight. New text-reaction-self / -own roles pair the ink with each fill. Co-authored-by: mbot <3754f8729004d95654c46dbab3129e4ab9ef05cc2534e2a3fbfc155983bd637b@buzz.block.builderlab.xyz>
|
🤖 Design review · Intent: make reactions you've added easy to recognize without an outline. Must-fix — Chillin’ still loses the selected state. This is the contrast issue already identified in the screenshot discussion. Light Mono selects Smallest fix: strengthen the two selected-reaction fills and keep their ink paired; replace the removed ring checks with selected-fill contrast checks across palettes, themes and both bubble types. Evidence: selected fills, ring removal. The design guide’s Contrast section requires 3:1 for state boundaries; Maintaining the design system requires selection to remain clear after the pointer leaves. Checked the diff, surrounding reaction code and posted light/dark Citrus grids. Not exercised: live app, keyboard, forced colors, narrow/enlarged layouts, grouped counts, emoji-only/table messages, agent activity or other browser engines. Mono evidence is token analysis; no tests run. |
At Chillin' your own bubble is only a faint tint, so a reaction you made on someone else's message barely stood out from the ones around it, most of all in dark mode. It now takes the solid accent-9 with the accent ink, as at Buzzin'. Inside your own bubble it takes the panel white, or neutral-7 in dark mode, instead of the received bubble's gray. Co-authored-by: mbot <3754f8729004d95654c46dbab3129e4ab9ef05cc2534e2a3fbfc155983bd637b@buzz.block.builderlab.xyz>
Co-authored-by: Eva <011987e296fd5006292d2f930b574be47c7801048d1983c46c425d3c95f0cffd@buzz.block.builderlab.xyz> * origin/main: Build sidebar headings as one fluid design-system row (#2686) fix(messages): swap bubble fills for reactions you've made, drop the ring (#2949) fix(messages): align line-start mention capsules with each other (#2899) fix(relay): probe the live socket on wake, focus and network (#2958) fix(messages): size thread avatars like the timeline's (#2890) build(desktop): share the bundled buzz CLI build across worktrees (#2894) fix(messages): render review comment mentions as chips and open at the reader's place (#2965) feat(agents): read owner messages and canvases over MCP (#2881) Signed-off-by: Tyler Longwell <tlongwell@squareup.com>
Follow-up to #2709, per design review feedback. Reactions you've made drop the 1px ring, and their fill swaps between the two bubble colors so they never sit as a highlight on a highlight.
surface-message-own/text-message-own).surface-message/text-standard).text-reaction-self/text-reaction-self-ownroles pair the count's ink with each fill.affordance-reaction-self/-ownnow point at the bubble fills, and the Buzzin' strong-overlay override is gone.border-reaction-self/border-reaction-self-owntokens, their utilities, registry entries and contrast checks.Highlightring, since it replaces the fills and the ring is then the only visual mark.Checks:
pnpm design:check(contrast pairs updated),pnpm design:test,MessageReactions.test.tsx, biome. Screenshots taken in Chromium fromtests/fixtures/emoji.html?reactions&wrap(with a local, uncommitted tweak that makes the message someone else's), light/dark × Chillin'/Buzzin'.