Masterbar: The Help Center icon has a different background color than others

[taipeicoder]

Quick summary

The Help Center icon's background color isn't responsive to the site's color scheme. See for instance:

Sunset

Sakura

Light

Steps to reproduce

1. Head to /wp-admin/profile.php.
2. Update the color scheme to any.

What you expected to happen

The Help Center icon's background color should match the rest of the icons.

What actually happened

The Help Center icon's background color doesn't match the rest of the icons.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

No response

Logs or notes

No response

[fushar]

This inconsistent Help Center color is only happening on color scheme preview. If you actually hit Update, the color will be correct.

[fushar]

The icons need to be rendered as mask-image inside an .ab-icon::before (e.g. the wpcom logo icon) so that the correct color can be rendered correctly during preview and after update. The icon color is applied here.

However, our Help Center icon is rendered as an<svg>. The color is applied manually here via jetpack-mu-wpcom. The color unfortunately will be only applied during actual render, not preview.

I had attempted to fix this problem, by converting the SVG to mask:

• https://github.com/Automattic/wp-calypso/pull/93804
• https://github.com/Automattic/jetpack/pull/39011

However, it's tricky. The Help Center icon actually consists of two SVGs: with and without bell "dot":

https://github.com/Automattic/wp-calypso/blob/e8a07cb6c1165b5bba2053c04b0037697888ba9e/apps/help-center/help-icon.svg#L1-L8

I was not sure how to convert the above into a single mask. Particularly, I don't know how to encode the fill="var( --color-masterbar-unread-dot-background, #e26f56 )" part 😅 so I gave up the effort. See also possible related issue:

• https://github.com/Automattic/dotcom-forge/issues/8519

I hope this helps whoever wants to tackle this issue 💪

[arthur791004]

It seems the CSS priority issue 🤔

[arthur791004]

Proposing https://github.com/Automattic/jetpack/pull/39371 to fix it

[fushar]

Just saying that after:

• https://github.com/Automattic/jetpack/pull/39314,

the issue will only (I think) happen when you're on a Calypso scheme (e.g. Sunrise) and then preview Default. This is because we settled to use Calypso's #fff color on such schemes (see https://github.com/Automattic/dotcom-forge/issues/8470#issuecomment-2328932738)

[arthur791004]

Maybe https://github.com/Automattic/jetpack/pull/39314 can get rid of this manual color hack 🤔

[fushar]

Maybe https://github.com/Automattic/jetpack/pull/39314 can get rid of this manual color hack 🤔

I'm not sure how, because the Jetpack PR only modifies Calypso's color schemes (not Default which comes from Core).

The issue is that when previewing the Default color scheme, the existing colors CSS is removed from the DOM, so the Help Icon takes the following color:

https://github.com/WordPress/wordpress-develop/blob/47122105f20624e5a6b8ed151d732157f2f2605c/src/wp-includes/css/admin-bar.css#L39-L44 (not expected)

instead of:

https://github.com/WordPress/wordpress-develop/blob/47122105f20624e5a6b8ed151d732157f2f2605c/src/wp-includes/css/admin-bar.css#L242-L247 (expected)

, which targets .ab-icon:before and not just .ab-icon that the current Help Center icon has.