@Cyndymediawiksim, @Sgs - I can't remember, was there a technical reason why we aren't respecting image transparency, or is this a bug?

@JFernandez-WMF - FYI. Can you also review and consider adding a task for improving the UI / layout of this module? I notice that the main text isn't aligned with the title, which doesn't match designs. The gap in text between the title and the main text seems odd to me.

In T378770#10282953, @KStoller-WMF wrote:

@Cyndymediawiksim, @Sgs - I can't remember, was there a technical reason why we aren't respecting image transparency, or is this a bug?

I didn't work on the module itself, but I want to point out that this logo will be barely visible with a fully transparent background in dark-mode. Even the transparent file you linked is given a gray background in dark mode.

So, it would probably be good to have a design for how it should look like in dark-mode, just to be explicit about it.

Lastly, while we do have control over this component in practice and can change it ourselves, this is fundamentally a Codex component (CdxThumbnail) and its styles explicitly define the background to be fixed white. So I wonder if @Volker_E or @RHo have thoughts on this?

cc @DTorsani-WMF who is working on updates to colours and other visual styles in case he has thoughts and can work with @JFernandez-WMF along with advice on highlight colours and styling.

Unfortunately, since we are talking about an image and not an SVG or graphic that we have control over its color, we have to rely on the background of an image to be able to see the images foreground, especially in dark mode. Likely, images using a transparent background (i.e. PNG) are designed for a light/white background. Is it possible to add a background for the image using a transparent background only in dark mode? If so, we could use the token background-color-base-fixed. This wouldn't look ideal, especially for images where the foreground object touches the edges of the frame, but it will at least make it visible and works within the limitations we have.

In T378770#10287323, @Michael wrote:

I didn't work on the module itself, but I want to point out that this logo will be barely visible with a fully transparent background in dark-mode. Even the transparent file you linked is given a gray background in dark mode.

So, it would probably be good to have a design for how it should look like in dark-mode, just to be explicit about it.

Good point. In this specific case, there is a SVG/PNG appropriate for dark mode as well (https://commons.wikimedia.org/wiki/File:WMCZ_logo_CZ_white_horizontal_02.svg). Would it make sense to have a dark mode image specified as well (and introduce a background only if dark mode image isn't available)?

In T378770#10282953, @KStoller-WMF wrote:

@Cyndymediawiksim, @Sgs - I can't remember, was there a technical reason why we aren't respecting image transparency, or is this a bug?

@JFernandez-WMF - FYI. Can you also review and consider adding a task for improving the UI / layout of this module? I notice that the main text isn't aligned with the title, which doesn't match designs. The gap in text between the title and the main text seems odd to me.

@KStoller-WMF , Thank you for noting this :). As @Michael correctly pointed out, this is actually determined by Codex's CdxThumbnail which explicitly sets the background to white and this logo will be barely visible with a fully transparent background in dark-mode. I strongly agree with Michael and Urbanecm's recommendations to add support for dark/light mode image variants.

Now that the Community Updates module is released more widely, we might want to consider some further UI improvements for this module, including this task.

@Nemoralis Did you expect the Community Updates image to automatically adopt the background color if it's an SVG with a transparent background?
I assume we should likely follow the same pattern as the Central Notice banner, but I'm not actually certain what that is...
the Central Notice usage guide only states, 'We recommend that all banner designs ensure compatibility with dark mode.'"

In T378770#10551398, @KStoller-WMF wrote:

Now that the Community Updates module is released more widely, we might want to consider some further UI improvements for this module, including this task.

@Nemoralis Did you expect the Community Updates image to automatically adopt the background color if it's an SVG with a transparent background?
I assume we should likely follow the same pattern as the Central Notice banner, but I'm not actually certain what that is...
the Central Notice usage guide only states, 'We recommend that all banner designs ensure compatibility with dark mode.'"

Hi, yes.

In T378770#10289156, @DTorsani-WMF wrote:

Unfortunately, since we are talking about an image and not an SVG or graphic that we have control over its color, we have to rely on the background of an image to be able to see the images foreground, especially in dark mode. Likely, images using a transparent background (i.e. PNG) are designed for a light/white background. Is it possible to add a background for the image using a transparent background only in dark mode? If so, we could use the token background-color-base-fixed. This wouldn't look ideal, especially for images where the foreground object touches the edges of the frame, but it will at least make it visible and works within the limitations we have.

It seems the decision was made in T372433. It would be nice to have this option configurable, maybe as part of the Tumbnail data. It seems always adding a white background here is a problem and not a benefit. Does this sound fair @AnneT ?

@Sgs I agree; it seems like this should be configurable. We'll have to consider what the default should be—I think it should probably still be white, to ensure images are at least visible in dark mode (even if the white background doesn't look great)—and exactly how this should be made configurable in Codex.

I've opened T386745 to cover this. In the meantime, you should be able to use CSS to set background-color: transparent on .cdx-thumbnail__image.

Change #1122199 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] CommunityUpdates: make thumbnail image background transparent

https://gerrit.wikimedia.org/r/1122199

I've pushed a patch to make the background transparent to better match perceived expectations. However, that will make the cswiki WMF logo not look great in dark-mode. Once T386745 is resolved, we can make the image background color an extra setting in the community updates form options. Not as a color picker but rather as one or two checkboxes (unchecked by default):

• Add white background in light-mode
• Add white background in dark-mode

That way cswiki could get the same outcome by checking these two through the form. What do you think? @KStoller-WMF @Michael

I don't have any objections, however I see that T386745 is declined:

In T386745#10579851, @AnneT wrote:

We have decided not to support changing the thumbnail's background color via configuration at this time.

The background color can be changed by overriding the background-color style on .cdx-thumbnail__image, which should take a max of one additional CSS class in the selector. Since it's easy to override this with a low-specificity selector, we prefer not to add configuration for this to reduce noise in the component API and Thumbnail type.

If more cases come up where the background color needs to be configurable and using styles is not a reasonable solution, we will reconsider this decision.

Change #1122199 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] CommunityUpdates: make thumbnail image background transparent

https://gerrit.wikimedia.org/r/1122199

In T378770#10578466, @Sgs wrote:

I've pushed a patch to make the background transparent to better match perceived expectations. However, that will make the cswiki WMF logo not look great in dark-mode. Once T386745 is resolved, we can make the image background color an extra setting in the community updates form options. Not as a color picker but rather as one or two checkboxes (unchecked by default):

• Add white background in light-mode
• Add white background in dark-mode

That way cswiki could get the same outcome by checking these two through the form. What do you think? @KStoller-WMF @Michael

Mh, wouldn't the dark-mode checkbox be enough for cswiki? There should already be a bright background in light-mode.

In T378770#10581153, @KStoller-WMF wrote:

I don't have any objections, however I see that T386745 is declined:

That's not a problem, we can implement it on our side.

In T378770#10581765, @Michael wrote:

Mh, wouldn't the dark-mode checkbox be enough for cswiki?

After merging https://gerrit.wikimedia.org/r/1122199, keeping current status quo where the white background is applied would entail checking both. Whereas the logo looks good or not without the background in light-mode is a community decision as I understand it.

There should already be a bright background in light-mode.

Not sure I get this, the bright background is applied by Codex in both modes.

In T378770#10582538, @Sgs wrote:

In T378770#10581765, @Michael wrote:

There should already be a bright background in light-mode.

Not sure I get this, the bright background is applied by Codex in both modes.

No, I did not intend to refer to the white background applied by codex, but to the light-blue (#F1F4FD) background that is now effectively used in light-mode:

That is already bright (>96% HSL lightness), and so I'm undecided whether we actually need an option to replace that with a white one.

In T378770#10582668, @Michael wrote:

That is already bright (>96% HSL lightness), and so I'm undecided whether we actually need an option to replace that with a white one.

Gotcha, I agree with that. Per this task scope I think we're done. I'm just concerned about the cswiki current update having a contrast issue next week if we do nothing about it.

now	1.44.0-wmf.19

Thoughts? Should we add a configurable option that adds white background just for dark-mode? cc @KStoller-WMF

Should we add a configurable option that adds white background just for dark-mode?

That makes sense to me. Should I create a separate task for that?

I'm just concerned about the cswiki current update having a contrast issue next week if we do nothing about it.

Should I reach out to our Czech Wikimedia contact? I imagine they could temporarily add a logo without transparency if needed. Or we can just wait on rolling out this change until we have the checkbox for darkmode.

In T378770#10591630, @KStoller-WMF wrote:

Should we add a configurable option that adds white background just for dark-mode?

That makes sense to me. Should I create a separate task for that?

Filed T387737.

Should I reach out to our Czech Wikimedia contact? I imagine they could temporarily add a logo without transparency if needed. Or we can just wait on rolling out this change until we have the checkbox for darkmode.

Sadly the transparency change is already merged and rolling with the train but I believe the work for T387737 is small enough that could be done in the next week. We can also rollback the transparency change but I believe there are other wikis with the "opposite problem"?

Filed T387737.

Thanks! I've moved this to Up Next so we can consider it for next sprint.

Sadly the transparency change is already merged and rolling with the train but I believe the work for T387737 is small enough that could be done in the next week. We can also rollback the transparency change but I believe there are other wikis with the "opposite problem"?

That's fine. We don't need to rollback. I'll reach out to our WMCZ contact so they know about the temporary issue and have the option to update the logo if they think it's necessary.