Transparent avatars have solid background in the timeline

[Johennes]

Starting with 1.11.42 transparent avatars stopped working. They do render like before in the top left and settings.

But in the timeline they have a grey background instead of transparency.

[Johennes]

Discussed with @nadonomy and @callumu this morning and the desired resolution is:

• Remove the grey background
• Add a grey300 border around all avatars as shown here

[nadonomy]

• Add a grey300 border around all avatars as shown here

One note on this - we're gonna quickly sense check the exact values early next week. The comp here is using alpha/300 and I'm not sure if it's desirably or undesirably feint. Also will check how to handle the coloured avatars.

[AdamRGrey]

why add the border? why not... nothing, like before, which was better?

[olmari]

This is someone elses Avatar, but this issue is also way more pronounced in Dark theme:

While opened up the actual image:

[nadonomy]

why add the border? why not... nothing, like before, which was better?

The timeline is more legible when there are clear content keylines for the eye to follow up and down, consistently. Transparent avatars, or avatars which perfectly match the background (e.g. white on white) break this alignment.

So, we'll add some feint visual structure in the form of a subtle stroke to help. This way transparent avatars can maintain their content, unlike the fills above.

[AdamRGrey]

so "we don't like how transparent avatars look, if you choose a transparent avatar we'll override you", gotcha

[janogarcia]

On the light gray background for transparent avatars. It's a bug in the component implementation. It seems it's currently inheriting the default user agent style for the button element background. Just for clarity, there was no design spec stating that transparent avatars should get a solid background.

On adding a translucent border for avatars (to prevent avatars from blending with the background and/or normalize their shape). This very same page (I mean, GitHub) is using a similar treatment for avatars. We don't strictly need it, but we'll do some explorations (and may discard it). That said, that should be a separate discussion from this issue as it's not specific to transparent avatars.

[janogarcia]

Resetting the button background to transparent would basically fix this issue.

[rda0]

Same problem in 1.11.43 on Desktop in Dark mode. All our bot avatars with transparent background now look really bad due to the light-grey background added:

[germain-gg]

I'm not sure adding a border really solves the issue here, as we have to consider what has been raised as part of #26163.

IMO we should set the avatar background to be --cpd-color-bg-canvas-default

@nadonomy / @janogarcia ?

[janogarcia]

@germain-gg It's already scheduled for discussion (tomorrow, if there are not last minute changes to the agenda) and documented in Figma.

[germain-gg]

After discussing this with Nad and Jano out of bands we are going to implement the suggestion of settings the canvas default color as this will have a broadest impact and ensure better visual consistency throughout the app.

[germain-gg]

Fixed as compound as been upgraded