Admin bar: apply the color scheme in the frontend

Gruntfile.js

@@ -198,7 +198,8 @@ module.exports = function(grunt) {
 				cwd: WORKING_DIR,
 				dest: WORKING_DIR,
 				src: [
-					'wp-admin/css/colors/*/colors.css'
+					'wp-admin/css/colors/*/colors.css',
+					'wp-admin/css/colors/*/admin-bar.css'
 				]
 			}
 		},
@@ -828,7 +829,10 @@ module.exports = function(grunt) {
 				cwd: SOURCE_DIR,
 				dest: WORKING_DIR,
 				ext: '.css',
-				src: ['wp-admin/css/colors/*/colors.scss'],
+				src: [
+					'wp-admin/css/colors/*/colors.scss',
+					'wp-admin/css/colors/*/admin-bar.scss'
+				],
 				options: {
 					implementation: sass
 				}

src/wp-admin/css/colors/_admin-bar.scss

@@ -0,0 +1,158 @@
+@use "variables";
+
+// Admin bar color scheme styles.
+//
+// Included in each color scheme's colors.css for the admin, and compiled
+// separately into each color scheme's admin-bar.css for the front end.
+@mixin styles() {
+	/* Admin Bar */
+
+	#wpadminbar {
+		color: variables.$menu-text;
+		background: variables.$menu-background;
+	}
+
+	#wpadminbar .ab-item,
+	#wpadminbar a.ab-item,
+	#wpadminbar > #wp-toolbar span.ab-label,
+	#wpadminbar > #wp-toolbar span.noticon {
+		color: variables.$menu-text;
+	}
+
+	#wpadminbar .ab-icon,
+	#wpadminbar .ab-icon::before,
+	#wpadminbar .ab-item::before,
+	#wpadminbar .ab-item::after {
+		color: variables.$menu-icon;
+	}
+
+	#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
+	#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
+	#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
+	#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
+	#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
+		color: variables.$menu-submenu-focus-text;
+		background: variables.$menu-submenu-background;
+	}
+
+	#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;
+	}
+
+	#wpadminbar:not(.mobile) li:hover .ab-icon::before,
+	#wpadminbar:not(.mobile) li:hover .ab-item::before,
+	#wpadminbar:not(.mobile) li:hover .ab-item::after,
+	#wpadminbar:not(.mobile) li:hover #adminbarsearch::before {
+		color: variables.$menu-submenu-focus-text;
+	}
+
+	/* Admin Bar: submenu */
+
+	#wpadminbar .menupop .ab-sub-wrapper {
+		background: variables.$menu-submenu-background;
+	}
+
+	#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
+	#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
+		background: variables.$menu-submenu-background-alt;
+	}
+
+	#wpadminbar .ab-submenu .ab-item,
+	#wpadminbar .quicklinks .menupop ul li a,
+	#wpadminbar .quicklinks .menupop.hover ul li a,
+	#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
+		color: variables.$menu-submenu-text;
+	}
+
+	#wpadminbar .quicklinks li .blavatar,
+	#wpadminbar .menupop .menupop > .ab-item::before {
+		color: variables.$menu-icon;
+	}
+
+	#wpadminbar .quicklinks .menupop ul li a:hover,
+	#wpadminbar .quicklinks .menupop ul li a:focus,
+	#wpadminbar .quicklinks .menupop ul li a:hover strong,
+	#wpadminbar .quicklinks .menupop ul li a:focus strong,
+	#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
+	#wpadminbar .quicklinks .menupop.hover ul li a:hover,
+	#wpadminbar .quicklinks .menupop.hover ul li a:focus,
+	#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
+	#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
+	#wpadminbar li:hover .ab-icon::before,
+	#wpadminbar li:hover .ab-item::before,
+	#wpadminbar li a:focus .ab-icon::before,
+	#wpadminbar li .ab-item:focus::before,
+	#wpadminbar li .ab-item:focus .ab-icon::before,
+	#wpadminbar li.hover .ab-icon::before,
+	#wpadminbar li.hover .ab-item::before,
+	#wpadminbar li:hover #adminbarsearch::before,
+	#wpadminbar li #adminbarsearch.adminbar-focused::before {
+		color: variables.$menu-submenu-focus-text;
+	}
+
+	#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 {
+		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 {
+		color: variables.$menu-icon;
+	}
+
+	#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
+		color: variables.$menu-text;
+		background: variables.$adminbar-input-background;
+	}
+
+	/* Admin Bar: recovery mode */
+
+	#wpadminbar #wp-admin-bar-recovery-mode {
+		color: variables.$adminbar-recovery-exit-text;
+		background-color: variables.$adminbar-recovery-exit-background;
+	}
+
+	#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
+	#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
+		color: variables.$adminbar-recovery-exit-text;
+	}
+
+	#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item,
+	#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
+	#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
+	#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
+		color: variables.$adminbar-recovery-exit-text;
+		background-color: variables.$adminbar-recovery-exit-background-alt;
+	}
+
+	/* Admin Bar: my account */
+
+	#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
+		border-color: variables.$adminbar-avatar-frame;
+		background-color: variables.$adminbar-avatar-frame;
+	}
+
+	#wpadminbar #wp-admin-bar-user-info .display-name {
+		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;
+	}
+}

src/wp-admin/css/colors/_admin.scss

@@ -4,6 +4,7 @@
 @use "variables";
 @use "mixins";
 @use "tokens";
+@use "admin-bar";
 
 /**
  * This function name uses British English to maintain backward compatibility, as developers
@@ -382,156 +383,7 @@ ul#adminmenu > li.current > a.current::after {
 	background: variables.$menu-highlight-background;
 }
 
-/* Admin Bar */
-
-#wpadminbar {
-	color: variables.$menu-text;
-	background: variables.$menu-background;
-}
-
-#wpadminbar .ab-item,
-#wpadminbar a.ab-item,
-#wpadminbar > #wp-toolbar span.ab-label,
-#wpadminbar > #wp-toolbar span.noticon {
-	color: variables.$menu-text;
-}
-
-#wpadminbar .ab-icon,
-#wpadminbar .ab-icon::before,
-#wpadminbar .ab-item::before,
-#wpadminbar .ab-item::after {
-	color: variables.$menu-icon;
-}
-
-#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
-#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
-#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
-#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
-#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
-	color: variables.$menu-submenu-focus-text;
-	background: variables.$menu-submenu-background;
-}
-
-#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;
-}
-
-#wpadminbar:not(.mobile) li:hover .ab-icon::before,
-#wpadminbar:not(.mobile) li:hover .ab-item::before,
-#wpadminbar:not(.mobile) li:hover .ab-item::after,
-#wpadminbar:not(.mobile) li:hover #adminbarsearch::before {
-	color: variables.$menu-submenu-focus-text;
-}
-
-/* Admin Bar: submenu */
-
-#wpadminbar .menupop .ab-sub-wrapper {
-	background: variables.$menu-submenu-background;
-}
-
-#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
-#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
-	background: variables.$menu-submenu-background-alt;
-}
-
-#wpadminbar .ab-submenu .ab-item,
-#wpadminbar .quicklinks .menupop ul li a,
-#wpadminbar .quicklinks .menupop.hover ul li a,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
-	color: variables.$menu-submenu-text;
-}
-
-#wpadminbar .quicklinks li .blavatar,
-#wpadminbar .menupop .menupop > .ab-item::before {
-	color: variables.$menu-icon;
-}
-
-#wpadminbar .quicklinks .menupop ul li a:hover,
-#wpadminbar .quicklinks .menupop ul li a:focus,
-#wpadminbar .quicklinks .menupop ul li a:hover strong,
-#wpadminbar .quicklinks .menupop ul li a:focus strong,
-#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
-#wpadminbar .quicklinks .menupop.hover ul li a:hover,
-#wpadminbar .quicklinks .menupop.hover ul li a:focus,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
-#wpadminbar li:hover .ab-icon::before,
-#wpadminbar li:hover .ab-item::before,
-#wpadminbar li a:focus .ab-icon::before,
-#wpadminbar li .ab-item:focus::before,
-#wpadminbar li .ab-item:focus .ab-icon::before,
-#wpadminbar li.hover .ab-icon::before,
-#wpadminbar li.hover .ab-item::before,
-#wpadminbar li:hover #adminbarsearch::before,
-#wpadminbar li #adminbarsearch.adminbar-focused::before {
-	color: variables.$menu-submenu-focus-text;
-}
-
-#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 {
-	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 {
-	color: variables.$menu-icon;
-}
-
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
-	color: variables.$menu-text;
-	background: variables.$adminbar-input-background;
-}
-
-/* Admin Bar: recovery mode */
-
-#wpadminbar #wp-admin-bar-recovery-mode {
-	color: variables.$adminbar-recovery-exit-text;
-	background-color: variables.$adminbar-recovery-exit-background;
-}
-
-#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
-#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
-	color: variables.$adminbar-recovery-exit-text;
-}
-
-#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item,
-#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
-#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
-#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
-	color: variables.$adminbar-recovery-exit-text;
-	background-color: variables.$adminbar-recovery-exit-background-alt;
-}
-
-/* Admin Bar: my account */
-
-#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
-	border-color: variables.$adminbar-avatar-frame;
-	background-color: variables.$adminbar-avatar-frame;
-}
-
-#wpadminbar #wp-admin-bar-user-info .display-name {
-	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;
-}
+@include admin-bar.styles();
 
 /* Pointers */
 

src/wp-admin/css/colors/blue/_scheme.scss

@@ -0,0 +1,16 @@
+$highlight-color: #437aa8;
+
+@forward "../variables" with (
+	$scheme-name: "blue",
+	$base-color: #245278,
+	$icon-color: #e5f8ff,
+	$highlight-color: $highlight-color,
+	$notification-color: #e1a948,
+	$menu-highlight-text: #fff,
+	$menu-highlight-icon: #fff,
+	$menu-bubble-text: #1e1e1e,
+	$menu-submenu-text: #e2ecf1,
+	$menu-submenu-focus-text: #fff,
+
+	$dashboard-icon-background: $highlight-color
+);

src/wp-admin/css/colors/blue/admin-bar.scss

@@ -0,0 +1,4 @@
+@use "scheme";
+@use "../admin-bar";
+
+@include admin-bar.styles();

src/wp-admin/css/colors/blue/colors.scss

@@ -1,16 +1,2 @@
-$highlight-color: #437aa8;
-
-@use "../_admin.scss" with (
-	$scheme-name: "blue",
-	$base-color: #245278,
-	$icon-color: #e5f8ff,
-	$highlight-color: $highlight-color,
-	$notification-color: #e1a948,
-	$menu-highlight-text: #fff,
-	$menu-highlight-icon: #fff,
-	$menu-bubble-text: #1e1e1e,
-	$menu-submenu-text: #e2ecf1,
-	$menu-submenu-focus-text: #fff,
-
-	$dashboard-icon-background: $highlight-color
-);
+@use "scheme";
+@use "../admin";