Collab Sidebar: Swap near-identical pink for red in avatar palette#78299
Merged
Conversation
The avatar/note border palette contained two perceptually similar hues (#FF51A8 Pink at slot 1 and #FF35EE Magenta at slot 3) that made users 1 and 3 look like they shared a color in real editing sessions. Swap the slot 1 Pink for a distinct red (#D94145) so collaborators are visually distinguishable at a glance. Fixes #78255.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +2 B (0%) Total Size: 7.96 MB 📦 View Changed
ℹ️ View Unchanged
|
jasmussen
approved these changes
May 14, 2026
Contributor
jasmussen
left a comment
jasmussen
left a comment
There was a problem hiding this comment.
Approving assuming it can be tweaked again easily if we find a need to.
4 tasks
adamsilverstein
added
the
[Feature] Notes
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.
What
Replaces slot 1 of
AVATAR_BORDER_COLORSinpackages/editor/src/components/collab-sidebar/utils.js:#FF51A8(Pink)#D94145(Red)The other six hues are unchanged.
Why
The 7-color palette used to tint per-user avatar borders — and, after #78218, inline-note highlights — contained two perceptually near-identical hues:
#FF51A8(Pink) — user ids 1, 8, 15, …#FF35EE(Magenta) — user ids 3, 10, 17, …In real-world editing sessions with low single-digit user ids (the common case), two different users routinely looked like they shared a color. Issue #78255 has the full background, palette card, and reproduction steps.
This swap follows the design direction from @jasmussen in #78255 (comment): a slightly more vibrant red (
#D94145) than the original suggestion in the issue. Replacing slot 1 (Pink) rather than slot 3 (Magenta) keeps the remaining palette farthest from the new red.How to test
admin) and user id 3 (e.g.guest).#D94145)#FF35EE)Notes
Deliberately minimal — moving fast as suggested in the linked comment. The palette is not a public API and can be refined further in follow-ups. The broader test-coverage tasks listed in #78255 (unit tests for
getAvatarBorderColor/buildHighlightCssacross user ids 1–10, E2E sweep, Storybook swatch entry) are out of scope for this swap and can land separately.Fixes #78255.