Twenty Twenty Two theme and Mini Cart Block: the number of items is not visible when the Mini Cart is added on the header on the front page

[gigitux]

Describe the bug

On the Twenty Twenty Two template, the number of items is not visible when the Mini Cart block is added on the header on the front page. This is caused by the white background of the bubble.

To reproduce

Steps to reproduce the behavior:

1. Install and active Twenty Twenty Two theme.
2. Open the FSE editor and add the Mini Cart block in the header area.
3. Check that the 0 number is not visible due to the white background of the bubble.

Expected behavior

The counter should be always visible.

Screenshots

[dinhtungdu]

This issue was raised here and here.

This is also the reason why for the quantity badge, initially, we use black text and border on a white background by default, and only change the text and border color to user setting when the background is set.

I guess this is time to re-consider using a different cart icon to remove the need for the background of the quantity badge.

The problem with Twenty Twenty-Two (and maybe other themes) is: it's not really a dark theme, only the Page (Large Header) template has the dark header, the other pages use the normal "light" header. So the Mini Cart must not only work with the dark or light theme but also work well with both dark and light themes at the same time.

Using this type of icon, we can also remove the background setting.