Masterbar: align colors with wp-admin's

Automattic · Sep 11, 2024 · 8fc9baf · 8fc9baf
1 parent 95218cd
commit 8fc9baf
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 72 deletions.
diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
@@ -26,7 +26,6 @@ body.is-mobile-app-view {
 // The WordPress.com Masterbar
 .masterbar {
 	background: var(--color-masterbar-background);
-	border-bottom: 1px solid var(--color-masterbar-border);
 	color: var(--color-masterbar-text);
 	font-size: $masterbar-font-size;
 	display: flex;
@@ -1039,6 +1038,7 @@ body.is-mobile-app-view {
 		gap: 12px;
 
 		.masterbar__item-howdy-account-gravatar {
+			border: none;
 			flex-basis: auto;
 			max-width: 50%;
 		}

diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_blue.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_blue.scss
@@ -24,14 +24,14 @@ Used studio-blue for the primary+accent.
 
 .color-scheme.is-blue {
 	/* Variables used in Calypso blue */
-	--theme-text-color: #fff; /* Direct from wp-admin */
+	--theme-text-color: #fff; /* $text-color */
 	--theme-text-color-rgb: 255, 255, 255; /* Manual conversion */
-	--theme-base-color: #52accc; /* Direct from wp-admin */
+	--theme-base-color: #52accc; /* $base-color */
 	--theme-base-color-rgb: 82, 172, 204; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
-	--theme-submenu-text-color: #cbe6f0; /* mix( $base-color, $text-color, 30% ) */
+	--theme-submenu-text-color: #e2ecf1; /* $menu-submenu-text */
 	--theme-submenu-background-color: #4796b3; /* From wp-admin*/
-	--theme-icon-color: #e5f8ff; /* Direct from wp-admin */
-	--theme-highlight-color: #096484; /* Direct from wp-admin */
+	--theme-icon-color: #e5f8ff; /* $icon-color */
+	--theme-highlight-color: #096484; /* $highlight-color */
 	--theme-highlight-color-rgb: 9, 100, 132; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
 	--theme-notification-color: #e1a948; /* Direct from wp-admin */
 
@@ -101,8 +101,9 @@ Used studio-blue for the primary+accent.
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
-	--color-masterbar-border: var(--theme-submenu-background-color);
+	--color-masterbar-border: #6eb9d4; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
 	--color-masterbar-highlight: var(--theme-text-color);
 	--color-masterbar-unread-dot-background: var(--theme-notification-color);

diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_coffee.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_coffee.scss
@@ -22,14 +22,14 @@ The wp-admin highlight color hue is 27, while studio-orange ranges from 25 to 35
 
 .color-scheme.is-coffee {
 	/* Variables used in Calypso Coffee */
-	--theme-text-color: #fff; /* Direct from wp-admin */
+	--theme-text-color: #fff; /* $text-color */
 	--theme-text-color-rgb: 255, 255, 255; /* Manual conversion */
-	--theme-base-color: #59524c; /* Direct from wp-admin */
+	--theme-base-color: #59524c; /* $base-color */
 	--theme-base-color-rgb: 89, 82, 76; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
-	--theme-submenu-text-color: #cdcbc9; /* mix( $base-color, $text-color, 30% ) */
-	--theme-submenu-background-color: #46403c; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */
-	--theme-icon-color: #ece6f6; /* Direct from wp-admin */
-	--theme-highlight-color: #c7a589; /* Direct from wp-admin */
+	--theme-submenu-text-color: #cdcbc9; /* $menu-submenu-text */
+	--theme-submenu-background-color: #46403c; /* $menu-submenu-background */
+	--theme-icon-color: #ece6f6; /* $icon-color */
+	--theme-highlight-color: #c7a589; /* $highlight-color */
 	--theme-highlight-color-rgb: 199, 165, 137; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
 	--theme-notification-color: #9ea476; /* Direct from wp-admin */
 
@@ -99,8 +99,9 @@ The wp-admin highlight color hue is 27, while studio-orange ranges from 25 to 35
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
-	--color-masterbar-border: var(--theme-submenu-background-color);
+	--color-masterbar-border: #6c645c; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
 	--color-masterbar-highlight: var(--theme-highlight-color);
 	--color-masterbar-unread-dot-background: var(--theme-notification-color);

diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss
@@ -253,12 +253,7 @@
 	--color-jetpack-plan-premium: var(--studio-jetpack-green-30);
 	--color-jetpack-plan-professional: var(--studio-purple-30);
 
-	--color-masterbar-background: #101517;
-	--color-masterbar-border: #333;
-	--color-masterbar-text: #f0f0f1; /* Direct from wp-admin */
-	--color-masterbar-icon: rgba(240, 246, 252, 0.6); /* Direct from wp-admin */
-	--color-masterbar-highlight: #72aee6; /* Direct from wp-admin */
-	--color-masterbar-item-hover-background: #333;
+	--color-masterbar-item-hover-background: #2c3338; /* $menu-submenu-background: darken( $base-color, 7% ) */
 	--color-masterbar-item-active-background: #23282d;
 	--color-masterbar-item-new-editor-background: var(--studio-gray-50);
 	--color-masterbar-item-new-editor-hover-background: var(--studio-gray-40);
@@ -335,16 +330,25 @@
 	--color-wp-admin-button-border: #006799;
 
 	/* WP Admin Default Theme */
-	--theme-text-color: #fff; /* Direct from wp-admin */
-	--theme-text-color-rgb: 255, 255, 255;
-	--theme-base-color: #23282d; /* Direct from wp-admin */
-	--theme-base-color-rgb: 35, 40, 45;
-	--theme-submenu-background-color: #131619; /* darken( $base-color, 7% ) */
-	--theme-icon-color: #e1eaf2; /* hsl( hue( $base-color ), 7%, 95% )*/
-	--theme-highlight-color: #0073aa; /* Direct from wp-admin */
-	--theme-highlight-color-rgb: 0, 115, 170;
+	--theme-text-color: #f0f0f1; /* Direct from wp-admin */
+	--theme-text-color-rgb: 240, 240, 241;
+	--theme-base-color: #1d2327; /* Direct from wp-admin */
+	--theme-base-color-rgb: 29, 35, 39;
+	--theme-submenu-background-color: #131619; /* $menu-submenu-background */
+	--theme-submenu-text-color: #c3c4c7; /* $menu-submenu-text */
+	--theme-icon-color: rgba(240, 246, 252, 0.6); /* $icon-color */
+	--theme-highlight-color: #72aee6; /* $highlight-color */
+	--theme-highlight-color-rgb: 114, 174, 230;
 	--theme-notification-color: #d54e21; /* Direct from wp-admin */
 
+	/* Masterbar */
+	--color-masterbar-background: var(--theme-base-color);
+	--color-masterbar-border: #8c8f94; /* $adminbar-avatar-frame */
+	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
+	--color-masterbar-icon: var(--theme-icon-color);
+	--color-masterbar-highlight: var(--theme-highlight-color);
+
 	/* Sidebar Submenu - Nav Unification */
 	--color-sidebar-submenu-background: var(--studio-blue-0);
 	--color-sidebar-submenu-text: var(--studio-blue-70);

diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss
@@ -34,14 +34,14 @@ Created this definition in color-studio to generate 0-100 shades:
 
 .color-scheme.is-ectoplasm {
 	/* Variables used in Calypso Ectoplasm */
-	--theme-text-color: #fff; /* Direct from wp-admin */
+	--theme-text-color: #fff; /* $text-color */
 	--theme-text-color-rgb: 255, 255, 255; /* Manual conversion */
-	--theme-base-color: #523f6d; /* Direct from wp-admin */
+	--theme-base-color: #523f6d; /* $base-color */
 	--theme-base-color-rgb: 82, 63, 109; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
-	--theme-submenu-text-color: #cbc5d3; /* mix( $base-color, $text-color, 30% ) */
-	--theme-submenu-background-color: #413256; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */
-	--theme-icon-color: #ece6f6; /* Direct from wp-admin */
-	--theme-highlight-color: #a3b745; /* Direct from wp-admin */
+	--theme-submenu-text-color: #cbc5d3; /* $menu-submenu-text */
+	--theme-submenu-background-color: #413256; /* $menu-submenu-background */
+	--theme-icon-color: #ece6f6; /* $icon-color */
+	--theme-highlight-color: #a3b745; /* $highlight-color */
 	--theme-highlight-color-rgb: 163, 183, 69; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
 	--theme-notification-color: #d46f15; /* Direct from wp-admin */
 
@@ -138,8 +138,9 @@ Created this definition in color-studio to generate 0-100 shades:
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
-	--color-masterbar-border: var(--theme-submenu-background-color);
+	--color-masterbar-border: #634c84; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
 	--color-masterbar-highlight: var(--theme-highlight-color);
 	--color-masterbar-unread-dot-background: var(--theme-notification-color);

diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_light.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_light.scss
@@ -39,14 +39,14 @@ Primary+Accent is studio blue.
 
 .color-scheme.is-light {
 	/* Variables used in Calypso Light */
-	--theme-text-color: #333; /* Direct from wp-admin */
+	--theme-text-color: #333; /* $text-color */
 	--theme-text-color-rgb: 51, 51, 51; /* Manual conversion */
-	--theme-base-color: #e5e5e5; /* Direct from wp-admin */
+	--theme-base-color: #e5e5e5; /* $base-color */
 	--theme-base-color-rgb: 229, 229, 229; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
-	--theme-submenu-text-color: #686868; /* mix( $base-color, $text-color, 30% ) */
-	--theme-submenu-background-color: #fff; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */
-	--theme-icon-color: #999; /* Direct from wp-admin */
-	--theme-highlight-color: #04a4cc; /* Direct from wp-admin */
+	--theme-submenu-text-color: #686868; /* $menu-submenu-text */
+	--theme-submenu-background-color: #fff; /* $menu-submenu-background */
+	--theme-icon-color: #999; /* $icon-color */
+	--theme-highlight-color: #04a4cc; /* $highlight-color */
 	--theme-highlight-color-rgb: 4, 164, 204; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
 	--theme-notification-color: #d64e07; /* Direct from wp-admin */
 
@@ -116,8 +116,9 @@ Primary+Accent is studio blue.
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
-	--color-masterbar-border: var(--theme-submenu-background-color);
+	--color-masterbar-border: #f7f7f7; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
 	--color-masterbar-highlight: var(--theme-highlight-color);
 	--color-masterbar-unread-dot-background: var(--theme-notification-color);
@@ -181,4 +182,3 @@ Primary+Accent is studio blue.
 	/* Command Palette Items */
 	--wp-admin-theme-color: var(--theme-highlight-color);
 }
-
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_midnight.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_midnight.scss
@@ -15,14 +15,14 @@ $notification-color: #69a8bb;
 
 .color-scheme.is-midnight {
 	/* Variables used in Calypso Midnight */
-	--theme-text-color: #fff; /* Direct from wp-admin */
+	--theme-text-color: #fff; /* $text-color */
 	--theme-text-color-rgb: 255, 255, 255; /* Manual conversion */
-	--theme-base-color: #363b3f; /* Direct from wp-admin */
+	--theme-base-color: #363b3f; /* $base-color */
 	--theme-base-color-rgb: 54, 59, 63; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
-	--theme-submenu-text-color: #c3c4c5; /* mix( $base-color, $text-color, 30% ) */
-	--theme-submenu-background-color: #26292c; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */
-	--theme-icon-color: #ece6f6; /* Direct from wp-admin */
-	--theme-highlight-color: #e14d43; /* Direct from wp-admin */
+	--theme-submenu-text-color: #c3c4c5; /* $menu-submenu-text */
+	--theme-submenu-background-color: #26292c; /* $menu-submenu-background */
+	--theme-icon-color: #ece6f6; /* $icon-color */
+	--theme-highlight-color: #e14d43; /* highlight-color */
 	--theme-highlight-color-rgb: 225, 77, 67; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
 	--theme-notification-color: #69a8bb; /* Direct from wp-admin */
 
@@ -92,8 +92,9 @@ $notification-color: #69a8bb;
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
-	--color-masterbar-border: var(--theme-submenu-background-color);
+	--color-masterbar-border: #464d52; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
 	--color-masterbar-highlight: var(--theme-highlight-color);
 	--color-masterbar-unread-dot-background: var(--theme-notification-color);

diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_modern.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_modern.scss
@@ -22,14 +22,14 @@ Uses custom theme highlight monochromatic palette for primary + accent
 
 .color-scheme.is-modern {
 	/* Variables used in Calypso Modern */
-	--theme-text-color: #fff; /* Direct from wp-admin */
+	--theme-text-color: #fff; /* $text-color */
 	--theme-text-color-rgb: 255, 255, 255; /* Manual conversion */
-	--theme-base-color: #1e1e1e; /* Direct from wp-admin */
+	--theme-base-color: #1e1e1e; /* $base-color */
 	--theme-base-color-rgb: 30, 30, 30; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
-	--theme-submenu-text-color: #bcbcbc; /* mix( $base-color, $text-color, 30% ) */
-	--theme-submenu-background-color: #0c0c0c; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */
-	--theme-icon-color: #ece6f6; /* Direct from wp-admin */
-	--theme-highlight-color: #3858e9; /* Direct from wp-admin */
+	--theme-submenu-text-color: #bcbcbc; /* $menu-submenu-text */
+	--theme-submenu-background-color: #0c0c0c; /* $menu-submenu-background */
+	--theme-icon-color: #f3f1f1; /* $icon-color */
+	--theme-highlight-color: #3858e9; /* $highlight-color */
 	--theme-highlight-color-rgb: 56, 88, 233; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
 	--theme-notification-color: #3858e9; /* Direct from wp-admin */
 
@@ -130,7 +130,7 @@ Uses custom theme highlight monochromatic palette for primary + accent
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
-	--color-masterbar-border: var(--theme-submenu-background-color);
+	--color-masterbar-border: #303030; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
 	--color-masterbar-highlight: #33f078; /* $menu-submenu-focus-text */

diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ocean.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ocean.scss
@@ -27,14 +27,14 @@ opinion.  Celadon seems to match the ocean colors better.
 
 .color-scheme.is-ocean {
 	/* Variables used in Calypso Ectoplasm */
-	--theme-text-color: #fff; /* Direct from wp-admin */
+	--theme-text-color: #fff; /* $text-color */
 	--theme-text-color-rgb: 255, 255, 255; /* Manual conversion */
-	--theme-base-color: #738e96; /* Direct from wp-admin */
+	--theme-base-color: #738e96; /* $base-color */
 	--theme-base-color-rgb: 115, 142, 150; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
-	--theme-submenu-text-color: #d5dde0; /* mix( $base-color, $text-color, 30% ) */
-	--theme-submenu-background-color: #627c83; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */
-	--theme-icon-color: #f2fcff; /* Direct from wp-admin */
-	--theme-highlight-color: #9ebaa0; /* Direct from wp-admin */
+	--theme-submenu-text-color: #d5dde0; /* $menu-submenu-text */
+	--theme-submenu-background-color: #627c83; /* $menu-submenu-background */
+	--theme-icon-color: #f2fcff; /* $icon-color */
+	--theme-highlight-color: #9ebaa0; /* $highlight-color */
 	--theme-highlight-color-rgb: 158, 186, 160; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
 	--theme-notification-color: #aa9d88; /* Direct from wp-admin */
 
@@ -104,8 +104,9 @@ opinion.  Celadon seems to match the ocean colors better.
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
-	--color-masterbar-border: var(--theme-submenu-background-color);
+	--color-masterbar-border: #879ea5; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
 	--color-masterbar-highlight: var(--theme-highlight-color);
 	--color-masterbar-unread-dot-background: var(--theme-notification-color);

diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_sunrise.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_sunrise.scss
@@ -25,15 +25,15 @@ Well use studio-orange for both the primary and accent colors
 
 .color-scheme.is-sunrise {
 	/* Variables used in Calypso Sunrise */
-	--theme-text-color: #fff; /* Direct from wp-admin */
+	--theme-text-color: #fff; /* $text-color: */
 	--theme-text-color-rgb: 255, 255, 255; /* Manual conversion */
-	--theme-base-color: #cf4944; /* Direct from wp-admin */
+	--theme-base-color: #cf4944; /* $base-color */
 	--theme-base-color-rgb: 207, 73, 68; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
-	--theme-submenu-text-color: #f1c8c7; /* mix( $base-color, $text-color, 30% ) */
-	--theme-submenu-background-color: #be3631; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */
+	--theme-submenu-text-color: #f1c8c7; /* $menu-submenu-text */
+	--theme-submenu-background-color: #be3631; /* $menu-submenu-background */
 	--theme-submenu-hover-text-color: #f7e3d3; /* Direct from wp-admin */
-	--theme-icon-color: #f3f1f1; /* Direct from wp-admin */
-	--theme-highlight-color: #dd823b; /* Direct from wp-admin */
+	--theme-icon-color: #f3f1f1; /* $icon-color */
+	--theme-highlight-color: #dd823b; /* $highlight-color */
 	--theme-highlight-color-rgb: 221, 130, 59; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */
 	--theme-notification-color: #ccaf0b; /* Direct from wp-admin */
 
@@ -103,8 +103,9 @@ Well use studio-orange for both the primary and accent colors
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
-	--color-masterbar-border: var(--theme-submenu-background-color);
+	--color-masterbar-border: #d66560; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
 	--color-masterbar-highlight: var(--theme-submenu-hover-text-color);
 	--color-masterbar-unread-dot-background: var(--theme-notification-color);
@@ -159,4 +160,3 @@ Well use studio-orange for both the primary and accent colors
 	/* Command Palette Items */
 	--wp-admin-theme-color: var(--theme-highlight-color);
 }
-