Admin bar: align colors with Calypso's (#39314)

Automattic · Sep 13, 2024 · 57aef23 · 57aef23
1 parent 12cd610
commit 57aef23
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 40 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/admin-bar-colors b/projects/packages/jetpack-mu-wpcom/changelog/admin-bar-colors
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Admin bar: align colors with Calypso's
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php
@@ -12,7 +12,7 @@
 
 // The $icon-color variable for admin color schemes.
 // See: https://github.com/WordPress/wordpress-develop/blob/679cc0c4a261a77bd8fdb140cd9b0b2ff80ebf37/src/wp-admin/css/colors/_variables.scss#L9
-// Only the ones different from the "fresh" scheme are listed.
+// Only Core schemes are listed here. Calypso schemes all use #ffffff.
 const WPCOM_ADMIN_ICON_COLORS = array(
 	'blue'      => '#e5f8ff',
 	'coffee'    => '#f3f2f1',
@@ -82,7 +82,7 @@ function wpcom_enqueue_admin_bar_assets() {
 	}
 
 	$admin_color      = is_admin() ? get_user_option( 'admin_color' ) : 'fresh';
-	$admin_icon_color = WPCOM_ADMIN_ICON_COLORS[ $admin_color ] ?? WPCOM_ADMIN_ICON_COLORS['fresh'];
+	$admin_icon_color = WPCOM_ADMIN_ICON_COLORS[ $admin_color ] ?? '#ffffff';
 
 	// Force the icon colors to have desktop color even on mobile viewport.
 	wp_add_inline_style(

diff --git a/projects/packages/masterbar/changelog/admin-bar-colors b/projects/packages/masterbar/changelog/admin-bar-colors
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Admin bar: align colors with Calypso's
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss
@@ -393,14 +393,14 @@ ul#adminmenu > li.current > a.current:after {
 #wpadminbar a.ab-item,
 #wpadminbar > #wp-toolbar span.ab-label,
 #wpadminbar > #wp-toolbar span.noticon {
-	color: #f0f0f1;
+	color: #ffffff;
 }
 
 #wpadminbar .ab-icon,
 #wpadminbar .ab-icon:before,
 #wpadminbar .ab-item:before,
 #wpadminbar .ab-item:after {
-	color: #a7aaad;
+	color: #ffffff;
 }
 
 #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss
@@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop
 $menu-text: $studio-white; // Calypso --color-sidebar-text
 $menu-background: $studio-blue-60; // Calypso --color-sidebar-background
 $menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text
-$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-icon: $studio-yellow-20;
 $menu-highlight-background: $studio-blue-50; // Calypso --color-sidebar-menu-hover-background
 $menu-current-text: $studio-blue-90; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
 $menu-current-background: $studio-yellow-20; // Calypso --color-sidebar-menu-selected-background
-$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text
-$menu-submenu-background: $studio-blue-80; // Calypso --color-sidebar-submenu-background
+$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
+$menu-submenu-background: $studio-blue-90; // Calypso --color-sidebar-submenu-background
 $menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text
+$adminbar-avatar-frame: $studio-blue-80;
 
 // masterbar overrides
 $masterbar-background: $studio-blue-80; // Calypso --color-masterbar-background

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss
@@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop
 $menu-text: $studio-gray-80; // Calypso --color-sidebar-text
 $menu-background: $studio-gray-5; // Calypso --color-sidebar-background
 $menu-highlight-text: $studio-blue-50; // Calypso --color-sidebar-menu-hover-text
-$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-icon: $studio-orange-30;
 $menu-highlight-background: $studio-white; // Calypso --color-sidebar-menu-hover-background
 $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
 $menu-current-background: $studio-gray-60; // Calypso --color-sidebar-menu-selected-background
-$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text
-$menu-submenu-background: $studio-blue-60; // Calypso --color-sidebar-submenu-background
+$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
+$menu-submenu-background: $studio-blue-70; // Calypso --color-sidebar-submenu-background
 $menu-submenu-focus-text: $studio-orange-30; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text
+$adminbar-avatar-frame: $studio-blue-70;
 
 // masterbar overrides
 $masterbar-background: $studio-blue-60; // Calypso --color-masterbar-background

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss
@@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop
 $menu-text: $studio-gray-80; // Calypso --color-sidebar-text
 $menu-background: $studio-white; // Calypso --color-sidebar-background
 $menu-highlight-text: $studio-gray-90; // Calypso --color-sidebar-menu-hover-text
-$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-icon: $studio-pink-30;
 $menu-highlight-background: $studio-gray-5; // Calypso --color-sidebar-menu-hover-background
 $menu-current-text: $studio-blue-70; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
 $menu-current-background: $studio-blue-5; // Calypso --color-sidebar-menu-selected-background
-$menu-submenu-text: $studio-blue-70; // Calypso --color-sidebar-submenu-text
-$menu-submenu-background: $studio-blue-0; // Calypso --color-sidebar-submenu-background
-$menu-submenu-focus-text: $studio-pink-50; // Calypso --color-sidebar-submenu-hover-text
+$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
+$menu-submenu-background: $studio-blue-70; // Calypso --color-sidebar-submenu-background
+$menu-submenu-focus-text: $studio-pink-30; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-pink-50; // Calypso --color-sidebar-submenu-selected-text
+$adminbar-avatar-frame: $studio-blue-70;
 
 // masterbar overrides
 $masterbar-background: $studio-blue-60; // Calypso --color-masterbar-background

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss
@@ -21,9 +21,10 @@ $menu-current-text: #ffffff; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
 $menu-current-background: #0073aa; // Calypso --color-sidebar-menu-selected-background
 $menu-submenu-text: #b4b9be; // Calypso --color-sidebar-submenu-text
-$menu-submenu-background: #32373c; // Calypso --color-sidebar-submenu-background
+$menu-submenu-background: #333; // Calypso --color-sidebar-submenu-background
 $menu-submenu-focus-text: #00b9eb; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text
+$adminbar-avatar-frame: #333;
 
 // masterbar overrides
 $masterbar-background: $base-color; // Calypso --color-masterbar-background

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss
@@ -15,7 +15,7 @@ $body-background: $studio-white; // Calypso --color-surface-backdrop
 $menu-text: $studio-gray-90; // Calypso --color-sidebar-text
 $menu-background: $studio-white; // Calypso --color-sidebar-background
 $menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text
-$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-icon: $studio-yellow-20;
 $menu-highlight-background: $studio-gray-60; // Calypso --color-sidebar-menu-hover-background
 $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
@@ -24,10 +24,11 @@ $menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
 $menu-submenu-background: $studio-gray-90; // Calypso --color-sidebar-submenu-background
 $menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text
+$adminbar-avatar-frame: $studio-gray-90;
 
 // masterbar overrides
 $masterbar-background: $base-color; // Calypso --color-masterbar-background
-$masterbar-highlight-background: $studio-gray-80; // Calypso --color-masterbar-item-hover-background
+$masterbar-highlight-background: $studio-gray-90; // Calypso --color-masterbar-item-hover-background
 $masterbar-active-background: $studio-gray-60; // Calypso --color-masterbar-item-active-background
 
 // nav unification overrides

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss
@@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop
 $menu-text: $studio-blue-5; // Calypso --color-sidebar-text
 $menu-background: $studio-blue-80; // Calypso --color-sidebar-background
 $menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text
-$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-icon: $studio-blue-20;
 $menu-highlight-background: $studio-blue-70; // Calypso --color-sidebar-menu-hover-background
 $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
 $menu-current-background: $studio-blue-100; // Calypso --color-sidebar-menu-selected-background
-$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text
+$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
 $menu-submenu-background: $studio-blue-90; // Calypso --color-sidebar-submenu-background
 $menu-submenu-focus-text: $studio-blue-20; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text
+$adminbar-avatar-frame: $studio-blue-100;
 
 // masterbar overrides
 $masterbar-background: $studio-blue-100; // Calypso --color-masterbar-background

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss
@@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop
 $menu-text: $studio-gray-80; // Calypso --color-sidebar-text
 $menu-background: $studio-gray-5; // Calypso --color-sidebar-background
 $menu-highlight-text: $studio-blue-60; // Calypso --color-sidebar-menu-hover-text
-$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-icon: $studio-blue-30;
 $menu-highlight-background: $studio-white; // Calypso --color-sidebar-menu-hover-background
 $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
 $menu-current-background: $studio-gray-60; // Calypso --color-sidebar-menu-selected-background
-$menu-submenu-text: $studio-gray-80; // Calypso --color-sidebar-submenu-text
-$menu-submenu-background: $studio-gray-10; // Calypso --color-sidebar-submenu-background
-$menu-submenu-focus-text: $studio-blue-60; // Calypso --color-sidebar-submenu-hover-text
+$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
+$menu-submenu-background: $studio-gray-80; // Calypso --color-sidebar-submenu-background
+$menu-submenu-focus-text: $studio-blue-30; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-gray-80; // Calypso --color-sidebar-submenu-selected-text
+$adminbar-avatar-frame: $studio-gray-90;
 
 // masterbar overrides
 $masterbar-background: $studio-gray-100; // Calypso --color-masterbar-background

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss
@@ -15,16 +15,17 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop
 $menu-text: $studio-pink-80; // Calypso --color-sidebar-text
 $menu-background: $studio-pink-5; // Calypso --color-sidebar-background
 $menu-highlight-text: $studio-pink-90; // Calypso --color-sidebar-menu-hover-text
-$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-icon: $studio-blue-20;
 $menu-highlight-background: $studio-pink-10; // Calypso --color-sidebar-menu-hover-background
 $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text
-$menu-current-icon: $menu-current-text;
+$menu-current-icon: $studio-blue-20;
 $menu-current-background: $studio-blue-50; // Calypso --color-sidebar-menu-selected-background
-$menu-submenu-text: $studio-pink-0; // Calypso --color-sidebar-submenu-text
-$menu-submenu-background: $studio-pink-90; // Calypso --color-sidebar-submenu-background
+$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
+$menu-submenu-background: $studio-celadon-80; // Calypso --color-sidebar-submenu-background
 $menu-submenu-background-alt: $studio-pink-70; // Calypso --color-sidebar-submenu-background-alt
 $menu-submenu-focus-text: $studio-blue-20; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-pink-0; // Calypso --color-sidebar-submenu-selected-text
+$adminbar-avatar-frame: $studio-celadon-80;
 
 // masterbar overrides
 $masterbar-background: $studio-celadon-70; // Calypso --color-masterbar-background

diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/colors.scss
@@ -1,12 +1,3 @@
 @import "variables";
 @import "../admin";
 @import "sidebar-notice";
-
-#wpadminbar:not(.mobile) li:hover .ab-icon:before,
-#wpadminbar:not(.mobile) li:hover .ab-item:before {
-    color: $menu-submenu-current-text;
-}
-
-#wpadminbar #wp-admin-bar-user-info .display-name {
-	color: $menu-submenu-text;
-}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss
@@ -15,15 +15,16 @@ $body-background: $studio-gray-0; // Calypso --color-surface-backdrop
 $menu-text: $studio-white; // Calypso --color-sidebar-text
 $menu-background: $studio-red-70; // Calypso --color-sidebar-background
 $menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text
-$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-icon: $studio-yellow-20;
 $menu-highlight-background: $studio-red-80; // Calypso --color-sidebar-menu-hover-background
 $menu-current-text: $studio-yellow-80; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
 $menu-current-background: $studio-yellow-20; // Calypso --color-sidebar-menu-selected-background
-$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text
-$menu-submenu-background: $studio-red-60; // Calypso --color-sidebar-submenu-background
+$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
+$menu-submenu-background: $studio-red-90; // Calypso --color-sidebar-submenu-background
 $menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text
 $menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text
+$adminbar-avatar-frame: $studio-red-80;
 
 // masterbar overrides
 $masterbar-background: $studio-red-80; // Calypso --color-masterbar-background
@@ -47,4 +48,3 @@ $menu-nudge-text-color: $studio-black;
 $menu-nudge-cta-background: $highlight-color;
 $menu-nudge-cta-color: $studio-white;
 $menu-nudge-cta-background-hover: $studio-orange-60;
-