Admin: Use admin color scheme variable for bar, highlight, and contextual help styles.

This changeset ensures the styles for bar, highlight and contextual help always take into account the admin color scheme settings.

Reviewed by joedolson.
Props fabiankaegy, audrasjb, ozgursar, noruzzaman, shailu25, sandipsinh007, tusharaddweb, hbhalodia, amesplant, joedolson.
Fixes #64744.
See #64308.



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

Author: audrasjb

src/wp-admin/css/common.css

@@ -709,13 +709,13 @@ ul.striped > :nth-child(odd),
 
 .bar {
 	background-color: #f0f0f1;
-	border-right-color: #4f94d4;
+	border-right-color: var(--wp-admin-theme-color);
 }
 
 /* Helper classes for plugins to leverage the active WordPress color scheme */
 
 .highlight {
-	background-color: #f0f6fc;
+	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 	color: #3c434a;
 }
 
@@ -2029,7 +2029,7 @@ p.auto-update-status {
 	border: 1px solid #c3c4c7;
 	border-top: none;
 	border-bottom: none;
-	background: #f0f6fc;
+	background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
 
 #contextual-help-wrap.no-sidebar #contextual-help-back {
@@ -2073,11 +2073,22 @@ p.auto-update-status {
 .contextual-help-tabs .active {
 	padding: 0;
 	margin: 0 -1px 0 0;
-	border-left: 2px solid #72aee6;
-	background: #f0f6fc;
+	border-left: 2px solid var(--wp-admin-theme-color);
+	background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, white);
 	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02);
 }
 
+.contextual-help-tabs .active::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: -1px;
+	width: 2px;
+	height: 100%;
+	background: inherit;
+	z-index: 2;
+}
+
 .contextual-help-tabs .active a {
 	border-color: #c3c4c7;
 	color: #2c3338;