Admin bar: align colors with Calypso's

Automattic · Sep 11, 2024 · 5ea43b9 · 5ea43b9
1 parent 94a3510
commit 5ea43b9
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 25 deletions.
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
@@ -20,10 +20,11 @@ $menu-highlight-background: $studio-white; // Calypso --color-sidebar-menu-hover
 $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
@@ -20,11 +20,12 @@ $menu-highlight-background: $studio-pink-10; // Calypso --color-sidebar-menu-hov
 $menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text
 $menu-current-icon: $menu-current-text;
 $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/sunset/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss
@@ -20,10 +20,11 @@ $menu-highlight-background: $studio-red-80; // Calypso --color-sidebar-menu-hove
 $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;
-