Twenty Twenty-One: Transparent png logo isn’t visible on focus

[bduclos]

When you set a transparent png as the logo, the logo isn’t visible when the logo link is focused because a background color (white or black) appears.

[poena]

Remove background color when the custom logo link is in focus.

[poena]

This patch removes custom-logo-link styles from sass/06-components/header.scss.
(This also makes sense because the logo is available both in the site header and site footer.)

It adds background:none to the custom-logo-link when it is focused, both in the default color scheme and in dark mode.

I am not happy with the duplication in assets\sass\style-dark-mode.scss
where the focus style is added both to regular links and .meta-nav, this could be improved.

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
	background: #000;
	color: #fff;
	text-decoration: none;

	&.custom-logo-link {
		&:focus {
			background: none;
		}
	}
}

[paaljoachim]

Testing with a local site using Twenty Twenty One.
Made a transparent logo.
Uploaded it to the customizer.
On frontend: went to another page clicked the logo and noticed a white bar similar to what is reported.

Testing patch:

npm run grunt patch:52257

​http://localhost:8889/

The patch works fine. I see no additional background white color show up.

[paaljoachim]

No extra background color after applying patch.

[hellofromTonya]

In talking with @poena, this patch is ready for commit for 5.7 Beta 1. The duplication points can be addressed during the beta cycle.

[antpb]

In 50154:

Twenty Twenty-One: Make transparent PNG logo visible on focus.

This ensures a transparent logo remains visible while focused.

Props bduclos, poena, paaljoachim, hellofromTonya.
Fixes #52257.

[SergeyBiryukov]

Reopening to address the duplication concern from comment:2.

[lukecarbis]

@poena Is this something that you're likely able to address in the next week before RC1 is scheduled for release?

[poena]

I'd need input from someone who is awesome at CSS :)

[sabernhardt]

simplifying .custom-logo-link styles

[sabernhardt]

setting only the text color for .meta-nav elements within links (plus the .custom-logo-link change)

[sabernhardt]

@poena Is one of these options like how you wanted to simplify the focus styles?

52257.1.diff​ removes the .meta-nav.custom-logo-link style and the second :focus pseudo-class on the logo link.

	.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link

52257.2.diff​ also sets the .meta-nav text color only, without the background and text-decoration styles given to the link elements. The white color needs to override the post navigation links' color var(--wp--style--color--link, var(--global--color-background)).

	.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
		color: #fff;
	}

[poena]

Bot updates work, I think 52257.2.diff is easier to read.

[ryelle]

I have another cleanup suggestion — 52257.diff​ moves the dark mode overrides out of style-dark-mode.scss and merges them with the dark mode styles in links.scss.

This removes the dark mode's .custom-logo-link override, because it's not necessary anymore - the dark mode focus style specificity is lower now, so it's not overriding the default background:none;.

I also replaced var(--global--color-background) with var(--global--color-white) in the dark mode meta-nav link styles, since this was just being overridden with white later.

[adamsilverstein]

In 50423:

Twenty Twenty-One: Improve transparent PNG logo visible on focus.

This ensures a transparent logo remains visible while focused. Also cleans up dark mode CSS, consolidating styles and removing overrides that are no longer needed.

Follow up to [50154].

Props poena, sabernhardt, ryelle.
Fixes #52257.