diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css
index aa6a8bc1414aa..3747613282be1 100644
--- a/src/wp-admin/css/admin-menu.css
+++ b/src/wp-admin/css/admin-menu.css
@@ -800,10 +800,12 @@ li#wp-admin-bar-menu-toggle {
 		display: block;
 		padding: 0;
 		overflow: hidden;
+		outline: none;
 		text-decoration: none;
+		border: 1px solid transparent;
 		background: none;
-		height: 46px;
-		box-sizing: border-box;
+		height: 44px;
+		margin-left: -1px;
 	}
 
 	.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
@@ -814,17 +816,22 @@ li#wp-admin-bar-menu-toggle {
 		display: block;
 	}
 
+	#wpadminbar #wp-admin-bar-menu-toggle a:hover {
+		border: 1px solid transparent;
+	}
+
 	#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
 		content: "\f228";
 		display: inline-block;
 		float: left;
-		font: normal 40px/46px dashicons;
+		font: normal 40px/45px dashicons;
 		vertical-align: middle;
+		outline: none;
 		margin: 0;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
-		height: 46px;
-		width: 52px;
+		height: 44px;
+		width: 50px;
 		padding: 0;
 		border: none;
 		text-align: center;
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 91d6a4b66bc8c..366f1b86b4f16 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -416,11 +416,9 @@ ul#adminmenu > li.current > a.current:after {
 	background: variables.$menu-submenu-background;
 }
 
-#wpadminbar > #wp-toolbar li:hover span.ab-label,
-#wpadminbar > #wp-toolbar li.hover span.ab-label,
-/* The adminbar menu may output either links or focusable div elements. */
-/* As such, we target the focus state without specifying the element type. */
-#wpadminbar > #wp-toolbar :focus span.ab-label {
+#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
+#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
+#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
 	color: variables.$menu-submenu-focus-text;
 }
 
@@ -451,9 +449,7 @@ ul#adminmenu > li.current > a.current:after {
 }
 
 #wpadminbar .quicklinks li .blavatar,
-#wpadminbar .menupop .menupop > .ab-item:before,
-#wpadminbar.mobile .quicklinks .ab-icon:before,
-#wpadminbar.mobile .quicklinks .ab-item:before {
+#wpadminbar .menupop .menupop > .ab-item:before {
 	color: variables.$menu-icon;
 }
 
@@ -478,17 +474,21 @@ ul#adminmenu > li.current > a.current:after {
 	color: variables.$menu-submenu-focus-text;
 }
 
-// Note that the icon of the site-name item is not wrapped within a span with class ab-icon like other items.
 #wpadminbar .quicklinks li a:hover .blavatar,
 #wpadminbar .quicklinks li a:focus .blavatar,
 #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
 #wpadminbar .menupop .menupop > .ab-item:hover:before,
 #wpadminbar.mobile .quicklinks .hover .ab-icon:before,
-#wpadminbar.mobile .quicklinks .hover .ab-item:before,
-#wpadminbar.mobile .quicklinks .ab-item:focus:before {
+#wpadminbar.mobile .quicklinks .hover .ab-item:before {
 	color: variables.$menu-submenu-focus-text;
 }
 
+#wpadminbar.mobile .quicklinks .ab-icon:before,
+#wpadminbar.mobile .quicklinks .ab-item:before {
+	color: variables.$menu-icon;
+}
+
+
 /* Admin Bar: search */
 
 #wpadminbar #adminbarsearch:before {
@@ -531,16 +531,14 @@ ul#adminmenu > li.current > a.current:after {
 	color: variables.$menu-text;
 }
 
+#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
+	color: variables.$menu-submenu-focus-text;
+}
+
 #wpadminbar #wp-admin-bar-user-info .username {
 	color: variables.$menu-submenu-text;
 }
 
-#wpadminbar #wp-admin-bar-user-info a:hover .display-name,
-#wpadminbar #wp-admin-bar-user-info a:focus .display-name,
-#wpadminbar #wp-admin-bar-user-info a:hover .username,
-#wpadminbar #wp-admin-bar-user-info a:focus .username {
-	color: variables.$menu-submenu-focus-text;
-}
 
 /* Pointers */
 
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index e0411701a28e8..77e196525657a 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -77,28 +77,12 @@ html:lang(he-il) .rtl #wpadminbar * {
 	box-shadow: none;
 }
 
-#wpadminbar a:focus,
-#wpadminbar .ab-item[tabindex="0"]:focus {
-	outline-offset: -2px;
+#wpadminbar a:focus {
+	outline-offset: -1px;
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }
 
-#wpadminbar a:hover,
-#wpadminbar a:focus,
-#wpadminbar .ab-item[tabindex="0"]:hover,
-#wpadminbar .ab-item[tabindex="0"]:focus {
-	box-shadow: inset 0 -4px 0 0 currentColor;
-	transition: box-shadow 0.1s linear;
-}
-
-#wpadminbar .ab-submenu a:hover,
-#wpadminbar .ab-submenu a:focus,
-#wpadminbar .ab-submenu .ab-item[tabindex="0"]:hover,
-#wpadminbar .ab-submenu .ab-item[tabindex="0"]:focus {
-	box-shadow: inset 4px 0 0 0 currentColor;
-}
-
 #wpadminbar {
 	direction: ltr;
 	color: #c3c4c7;
@@ -239,11 +223,9 @@ html:lang(he-il) .rtl #wpadminbar * {
 	color: #72aee6;
 }
 
-#wpadminbar > #wp-toolbar li:hover span.ab-label,
+#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
 #wpadminbar > #wp-toolbar li.hover span.ab-label,
-/* The adminbar menu may output either links or focusable div elements. */
-/* As such, we target the focus state without specifying the element type. */
-#wpadminbar > #wp-toolbar :focus span.ab-label {
+#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
 	color: #72aee6;
 }
 
@@ -312,8 +294,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wpadminbar li.hover .ab-icon:before,
 #wpadminbar li.hover .ab-item:before,
 #wpadminbar li:hover #adminbarsearch:before,
-#wpadminbar li #adminbarsearch.adminbar-focused:before,
-#wpadminbar.mobile .quicklinks .ab-item:focus:before {
+#wpadminbar li #adminbarsearch.adminbar-focused:before {
 	color: #72aee6;
 }
 
@@ -398,6 +379,11 @@ html:lang(he-il) .rtl #wpadminbar * {
 	float: right;
 }
 
+#wpadminbar ul li:last-child,
+#wpadminbar ul li:last-child .ab-item {
+	box-shadow: none;
+}
+
 /**
  * Recovery Mode
  */
@@ -466,7 +452,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wp-admin-bar-user-info .avatar {
 	position: absolute;
 	left: -72px;
-	top: 0;
+	top: 4px;
 	width: 64px;
 	height: 64px;
 	border-radius: 50%;
@@ -480,7 +466,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wpadminbar #wp-admin-bar-user-info span {
 	background: none;
 	padding: 0;
-	line-height: 1.38461538;
+	height: 18px;
 }
 
 #wpadminbar #wp-admin-bar-user-info .display-name,
@@ -489,6 +475,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 }
 
 #wpadminbar #wp-admin-bar-user-info .username {
+	color: #a7aaad;
 	font-size: 11px;
 }
 
@@ -924,6 +911,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 		overflow: hidden;
 		width: 52px;
 		padding: 0;
+		color: #a7aaad; /* @todo not needed? this text is hidden */
 		position: relative;
 	}
 
@@ -1043,6 +1031,16 @@ html:lang(he-il) .rtl #wpadminbar * {
 		height: auto;
 		font-size: 16px;
 		line-height: 1.5;
+		color: #f0f0f1;
+	}
+
+	#wpadminbar #wp-admin-bar-user-info a {
+		padding-top: 4px;
+	}
+
+	#wpadminbar #wp-admin-bar-user-info .username {
+		line-height: 0.8 !important;
+		margin-bottom: -2px;
 	}
 
 	/* Show only default top level items */