Nav-Unification: Ported wp-admin schemes issues on site selector badges

[mreishus]

• Choose a color scheme ported from Nav Unification, like "blue"
• Visit calypso with nav-unification flag turned on.
• Go to site selector and find a private site

Expected: Text to be readable

Reference Issues

• Main Issue Nav Unification - Main Issue #45435
  • Color Schemes Issue + Direction Nav Unification: Color Schemes #45675
    • Port over WP Admin color schemes as new options in Calypso /me section. Nav unification: Port over WP Admin color schemes as new options in Calypso /me section. #47036

[mreishus]

Doesn't happen with nav unification off. Caused by this rule:

wp-calypso/client/my-sites/sidebar-unified/style.scss

Lines 291 to 293 in 96c9a7b

	.site__badge {
	background: var( --color-sidebar-text );
	}

[mreishus]

Without Rule Added:

background: var(--color-sidebar-menu-hover-background);
color: var(--color-sidebar-menu-hover-text);    

With rule mentioned above:

background: var( --color-sidebar-text ); 
color: var(--color-sidebar-menu-hover-text);   

So it's only legible if the hover text is a different color than the sidebar text; I don't think that's a good way to go, since some themes only change the background on hover, not the text.

[mreishus]

On the default theme, I see this before and after adding the rule?

Before rule added

After rule added

I guess the intention was to change the BG to white? I'm not sure how to do that currently while maintaining theme compatibility. My current instinct is to remove the rule, the before pic looks fine to me. Any suggestions here?

[mreishus]

@cpapazoglou Any opinions or ideas?

[cpapazoglou]

It is actually a grey background to match the wp-admin
.
Since this element is new to wp-admin, let's do it the other way round. Remove the rule from calypso, and make sure we adjust wp-admin. Also, as it seems now, we need to consider the color-schemes for all new elements added to wp-admin 😧!
eg site-switcher, site card