Compound color refinements

[robintown]

Element Web is using colors from Compound, but since these were originally applied on a best-effort basis, we're finding that their usage does not always match their intended semantics. This is particularly relevant for users of custom themes, who may see unexpected results where we've applied the wrong semantic color tokens. Additionally, as we continue to integrate more Compound components into Element Web, we could stand to improve Element Web's visual coherency by updating the colors of some existing components.

@gaelledel and I have paired to review Element Web's color usage, and we discovered a number of things that we'd like to revise (Figma). As with the original color pass, these are to be incremental improvements, as we can't realistically check every variation of every component.

Tasks

Preview Give feedback

1. Message bubble background colors Refine the colors of some more components matrix-org/matrix-react-sdk#12343
2. Pill background colors Refine the colors of some more components matrix-org/matrix-react-sdk#12343
3. Message sent icon color Refine the colors of some more components matrix-org/matrix-react-sdk#12343
4. Jump to bottom / jump to unread button colors Refine the colors of some more components matrix-org/matrix-react-sdk#12343
5. Composer placeholder text color Refine the colors of some more components matrix-org/matrix-react-sdk#12343
6. Menus - their background color, icon colors, and border Refine styles of menus, toasts, popovers, and modals matrix-org/matrix-react-sdk#12332
7. Quick settings (multiple changes) Refine styles of menus, toasts, popovers, and modals matrix-org/matrix-react-sdk#12332
8. Colors of icons on rooms in the room list Refine the colors of some more components matrix-org/matrix-react-sdk#12343
9. Notification badge colors Refine the colors of some more components matrix-org/matrix-react-sdk#12343
10. Room sublist text colors Refine the colors of some more components matrix-org/matrix-react-sdk#12343
11. Primary buttons should use primary colors rather than accent colors Refine styles of controls to match Compound matrix-org/matrix-react-sdk#12299
12. Form controls should use the new accent background tokens Refine styles of controls to match Compound matrix-org/matrix-react-sdk#12299
13. Verification shield colors Refine the colors of some more components matrix-org/matrix-react-sdk#12343
14. Editing stroke color Refine styles of controls to match Compound matrix-org/matrix-react-sdk#12299
15. Date separators Refine the colors of some more components matrix-org/matrix-react-sdk#12343

[kongo09]

As I'm in discussion with Nad about https://github.com/element-hq/element-internal/issues/536 I'd like to make sure that we're not creating / implementing facts before there is a clear direction.

[robintown]

Interesting, that discussion would primarily bring matrix-org/matrix-react-sdk#12241 in question, which changes our green actions to be black and white. Do we need to revert that change? The retainer work package linked to this issue would then likely become blocked on https://github.com/element-hq/element-internal/issues/536, for the record.

@gaelledel Do you have thoughts on how we should proceed?

[kongo09]

I think this requires guidance and alignment with @nadonomy