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.


git-svn-id: https://develop.svn.wordpress.org/trunk@50154 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

@@ -379,6 +379,10 @@ a:hover {
 	background-color: #f1f1f1;
 }
 
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+	background: none;
+}
+
 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
 	outline: 2px dotted #28303d;
 }

src/wp-content/themes/twentytwentyone/assets/css/ie.css

@@ -2218,6 +2218,10 @@ a:hover {
 	background-color: #f1f1f1;
 }
 
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+	background: none;
+}
+
 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
 	outline: 2px dotted #28303d;
 }
@@ -5402,15 +5406,6 @@ table.wp-calendar-table caption {
 	line-height: 1.4;
 }
 
-a.custom-logo-link {
-	text-decoration: none;
-}
-
-.has-background-white a.custom-logo-link:focus,
-.is-dark-theme a.custom-logo-link:focus {
-	background: none;
-}
-
 .site-title > a {
 	text-decoration-color: #39414d;
 }

src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css

@@ -24,6 +24,11 @@
 		text-decoration: none;
 	}
 
+	.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus,
+	.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav.custom-logo-link:focus {
+		background: none;
+	}
+
 	.is-dark-theme.is-dark-theme img {
 		filter: brightness(0.85) contrast(1.1);
 	}

src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css

@@ -24,6 +24,11 @@
 		text-decoration: none;
 	}
 
+	.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus,
+	.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav.custom-logo-link:focus {
+		background: none;
+	}
+
 	.is-dark-theme.is-dark-theme img {
 		filter: brightness(0.85) contrast(1.1);
 	}

src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

@@ -514,6 +514,10 @@ a:hover {
 	background-color: #f1f1f1;
 }
 
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+	background: none;
+}
+
 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
 	outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
 }

src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss

@@ -52,6 +52,13 @@ a:hover {
 		}
 	}
 
+	&.custom-logo-link {
+
+		&:focus {
+			background: none;
+		}
+	}
+
 	img {
 		outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
 	}

src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss

@@ -77,18 +77,6 @@
 	line-height: 1.4;
 }
 
-a.custom-logo-link {
-	text-decoration: none;
-
-	&:focus {
-		// Change colors when the body background is white.
-		.has-background-white &,
-		.is-dark-theme & {
-			background: none;
-		}
-	}
-}
-
 .site-title > a {
 	text-decoration-color: var(--global--color-secondary);
 }

src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

@@ -21,6 +21,13 @@
 			background: #000;
 			color: #fff;
 			text-decoration: none;
+
+			&.custom-logo-link {
+
+				&:focus {
+					background: none;
+				}
+			}
 		}
 
 		img {

src/wp-content/themes/twentytwentyone/style-rtl.css

@@ -1686,6 +1686,10 @@ a:hover {
 	background-color: #f1f1f1;
 }
 
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+	background: none;
+}
+
 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
 	outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
 }
@@ -3807,15 +3811,6 @@ table.wp-calendar-table caption {
 	line-height: 1.4;
 }
 
-a.custom-logo-link {
-	text-decoration: none;
-}
-
-.has-background-white a.custom-logo-link:focus,
-.is-dark-theme a.custom-logo-link:focus {
-	background: none;
-}
-
 .site-title > a {
 	text-decoration-color: var(--global--color-secondary);
 }

src/wp-content/themes/twentytwentyone/style.css

@@ -1696,6 +1696,10 @@ a:hover {
 	background-color: #f1f1f1;
 }
 
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+	background: none;
+}
+
 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
 	outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
 }
@@ -3827,15 +3831,6 @@ table.wp-calendar-table caption {
 	line-height: 1.4;
 }
 
-a.custom-logo-link {
-	text-decoration: none;
-}
-
-.has-background-white a.custom-logo-link:focus,
-.is-dark-theme a.custom-logo-link:focus {
-	background: none;
-}
-
 .site-title > a {
 	text-decoration-color: var(--global--color-secondary);
 }