element-web icon indicating copy to clipboard operation
element-web copied to clipboard

Compound color refinements

Open robintown opened this issue 1 year ago • 3 comments

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
- [ ] Message bubble background colors https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [ ] Pill background colors https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [ ] Message sent icon color https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [ ] Jump to bottom / jump to unread button colors https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [ ] Composer placeholder text color https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [x] Menus - their background color, icon colors, and border https://github.com/matrix-org/matrix-react-sdk/pull/12247
- [x] Quick settings (multiple changes) https://github.com/matrix-org/matrix-react-sdk/pull/12247
- [ ] Colors of icons on rooms in the room list https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [ ] Notification badge colors https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [ ] Room sublist text colors https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [ ] Backdrop panel colors
- [ ] Thread icon highlight color
- [x] Primary buttons should use primary colors rather than accent colors https://github.com/matrix-org/matrix-react-sdk/pull/12241
- [ ] Verification shield colors https://github.com/matrix-org/matrix-react-sdk/pull/12255
- [ ] Message highlight background colors (?)
- [x] Editing stroke color https://github.com/matrix-org/matrix-react-sdk/pull/12241
- [ ] Date separators https://github.com/matrix-org/matrix-react-sdk/pull/12255

robintown avatar Feb 09 '24 03:02 robintown

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.

kongo09 avatar Feb 16 '24 13:02 kongo09

Interesting, that discussion would primarily bring https://github.com/matrix-org/matrix-react-sdk/pull/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?

robintown avatar Feb 16 '24 14:02 robintown

I think this requires guidance and alignment with @nadonomy

kongo09 avatar Feb 16 '24 14:02 kongo09