Avatar colours just disappeared

[Salamandar]

Steps to reproduce

Starting with today's update (1.11.41), avatar colours (for people not having an actual avatar) just disappeared.

All avatars are the usual letter on a gray background.

In the message list : (username is coloured)

In the rooms list : (username is base color)

Outcome

What did you expect?

The usual colours used for the avatar placeholder.

What happened instead?

Grey.

Operating system

Archlinux

Browser information

Firefox 115

URL for webapp

app.element.io

Application version

Version de Element : 1.11.41 Version de Olm : 3.2.14

Homeserver

matrix.org

Will you send logs?

No

[ManuelHu]

Just some investigation I just did (see #26042):
Toggling layout.css.has-selector.enabled in Firefox's about:config "fixes" the issue. Firefox is currently the only mainstream browser not supporting the CSS :has() selector.

And this selector is used to style the avatar in element 1.11.41.

This has been fixed in element-hq/compound-web@1361a4a, but apparently did not make it into the release :-/

On develop.element.io the fix is already available.

[CsatiZoltan]

@ManuelHu On develop.element.io, the colours have come back, but they are different.

[andybalaam]

Fixed in 1.11.42

[CsatiZoltan]

Indeed fixed. Just a question: why did you change the colours of the icons?

[andybalaam]

Indeed fixed. Just a question: why did you change the colours of the icons?

We're changing over lots of parts of the app to use the Compound design system. In this case, the change of colours is to make us consistent with the Element mobile apps.

[Salamandar]

Indeed fixed. Just a question: why did you change the colours of the icons?

We're changing over lots of parts of the app to use the Compound design system. In this case, the change of colours is to make us consistent with the Element mobile apps.

It is now less consistent today with Element Android : The letter is now coloured and the round is now darker than before. (tested on Firefox and Chrome)

TBH I would love to have the colours of the round and the letter swapped : the round of the "standard" colour (the same as the username), and the letter a bit darker, like Signal does.

[Salamandar]

Indeed fixed. Just a question: why did you change the colours of the icons?

We're changing over lots of parts of the app to use the Compound design system. In this case, the change of colours is to make us consistent with the Element mobile apps.

Then the current UI is not compliant with the Compound design system.
See : https://compound.element.io/?path=%2Fstory%2Fcompound-web_avatar--no-image-fallback

(And, funny enough, my suggestion of a darker letter on a lighter round background matches with the Compound design system :D )

[WolfspiritM]

Am I the only one who doesn't like the idea of the colors changing? My color is completely different now and in conversations I always think I've a new message. Especially confusing is that a friend has now a similar color I had before and I have now a color he had before.

Blue just became purple and purple became blue for example...

Couldn't you've just kept at least a similar color and just made it more faded?

I still hope that there will be a way to set a custom color someday...

( Talking about the text above the message and not the round circle )

[CsatiZoltan]

It became significantly less visible on dark theme. In my case, the former pink icon became this:

[andybalaam]

I'm going to ask one of the designers to look into this. Thanks for the feedback.

[andybalaam]

Response: we think the current behaviour does comply with the design system, and would welcome people logging a new issue if you find specific places where it doesn't. Thanks again!

[Salamandar]

Thanks @andybalaam .