Adds core style overrides & bumps jetpack version (#18150)

* [not verified] Adds core style overrides & bumps jetpack version

* [not verified] Adds notification icon hover state

* [not verified] Adds notification icon hover state, fix build

* [not verified] Cache Buster

* [not verified] Adds notes and rtl dependencies

* [not verified] Adds active state

* [not verified] Removes whitespace

* [not verified] Adds important as last resort

* [not verified] Fixes site switcher colors

* [not verified] Fixes site card borders

* [not verified] Fixes site card borders color

* [not verified] Fixes notes icon on light

* [not verified] Fixes Write on hover

* [not verified] Increases specificity

* Adds masterbar color

* Fixes tests

* Properly fixes test

Co-authored-by: cpap <papazoglou.charalampos@gmail.com>

jetpack.php

@@ -16,7 +16,7 @@
 
 define( 'JETPACK__MINIMUM_WP_VERSION', '5.5' );
 define( 'JETPACK__MINIMUM_PHP_VERSION', '5.6' );
-define( 'JETPACK__VERSION', '9.3-alpha' );
+define( 'JETPACK__VERSION', '9.3-alpha-20201221' );
 
 /**
  * Constant used to fetch the connection owner token

modules/masterbar/admin-color-schemes/class-admin-color-schemes.php

@@ -18,6 +18,7 @@ class Admin_Color_Schemes {
 	public function __construct() {
 		add_action( 'admin_init', array( $this, 'register_admin_color_schemes' ) );
 		add_action( 'rest_api_init', array( $this, 'register_admin_color_meta' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_core_color_schemes_overrides' ) );
 	}
 
 	/**
@@ -179,4 +180,27 @@ public function register_admin_color_schemes() {
 		);
 
 	}
+
+	/**
+	 * Enqueues current color-scheme overrides for core color schemes
+	 */
+	public function enqueue_core_color_schemes_overrides() {
+		$core_color_schemes = array( 'blue', 'coffee', 'ectoplasm', 'fresh', 'light', 'midnight', 'modern', 'ocean', 'sunrise' );
+		$color_scheme       = get_user_option( 'admin_color' );
+		$dependencies       = array();
+		$rtl                = is_rtl() ? '-rtl' : '';
+		if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
+			$dependencies = array( 'wpcom-admin-bar', 'wpcom-masterbar-css', 'notes-admin-bar-rest' . $rtl );
+		} else {
+			$dependencies = array( 'a8c-wpcom-masterbar' . $rtl, 'a8c-wpcom-masterbar-overrides' . $rtl );
+		}
+		if ( in_array( $color_scheme, $core_color_schemes, true ) ) {
+			wp_enqueue_style(
+				'jetpack-core-color-schemes-overrides',
+				$this->get_admin_color_scheme_url( $color_scheme ),
+				$dependencies,
+				JETPACK__VERSION
+			);
+		}
+	}
 }

modules/masterbar/admin-color-schemes/colors/_core-overrides.scss

@@ -0,0 +1,79 @@
+.admin-color-blue,
+.admin-color-coffee,
+.admin-color-ectoplasm,
+.admin-color-fresh,
+.admin-color-light,
+.admin-color-midnight,
+.admin-color-modern,
+.admin-color-ocean,
+.admin-color-sunrise {
+	/* Masterbar */
+	#wpadminbar {
+		background: $masterbar-background;
+		-webkit-box-shadow: inset 0 -1px 0 $menu-submenu-background;
+		-moz-box-shadow: inset 0 -1px 0 $menu-submenu-background;
+		box-shadow: inset 0 -1px 0 $menu-submenu-background;
+	}
+
+	#wpadminbar .ab-top-menu > #wp-admin-bar-blog > .ab-item {
+		background: $menu-submenu-background;
+		color: $text-color !important;
+	}
+
+	#wpadminbar .ab-top-menu > #wp-admin-bar-newdash > .ab-item {
+		color: $text-color !important;
+	}
+
+	#wpadminbar:not(.mobile) .ab-top-menu > li:not(#wp-admin-bar-ab-new-post):hover > .ab-item,
+	#wpadminbar #wp-admin-bar-notes.hover > .ab-item,
+	#wpadminbar #wp-admin-bar-notes.wpnt-show > .ab-item {
+		background: $menu-submenu-background !important;
+	}
+
+	/**
+	 * Site Switcher - Browse Sites button text & arrow
+	 */
+	#adminmenuwrap > #adminmenu .site-switcher {
+		color: $nav-unification-sidebar-text-alternative;
+
+		div.wp-menu-image:before {
+			color: $nav-unification-sidebar-text-alternative;
+		}
+
+		&:hover,
+		&:hover div.wp-menu-image:before {
+			color: $menu-highlight-text;
+		}
+	}
+
+	/**
+	 * Site Card
+	 */
+	#adminmenu li.toplevel_page_site-card {
+		border-bottom: 1px solid $menu-submenu-background;
+		border-top: 1px solid $menu-submenu-background;
+	}
+
+	#adminmenu .toplevel_page_site-card:hover div.wp-menu-image,
+	#adminmenu .toplevel_page_site-card a:focus div.wp-menu-image {
+		background-color: $highlight-color;
+	}
+
+	.site__info .site__title {
+		color: $text-color;
+	}
+
+	.site__info .site__domain {
+		color: $nav-unification-sidebar-text-alternative;
+	}
+
+	.site__info .site__title::after,
+	.site__info .site__domain::after {
+		background: linear-gradient(90deg,rgba( $base-color-rgb, 0 ),rgba( $base-color-rgb, 1 ) 90%);
+	}
+
+	.site__info > .site__badge {
+		background: $highlight-color;
+		color: $text-color;
+	}
+}

modules/masterbar/admin-color-schemes/colors/_overrides.scss

@@ -82,7 +82,8 @@
 
 	// Site Card - Border around Site Card
 	#adminmenu li.toplevel_page_site-card {
-		border-color: $nav-unification-sidebar-border;
+		border-bottom: 1px solid $nav-unification-sidebar-border;
+		border-top: 1px solid $nav-unification-sidebar-border;
 	}
 
 	// Site Card - Keep background the same color on hover
@@ -114,14 +115,14 @@
 	}
 
 	// Site Card - Browse Sites button text & arrow
-	#adminmenuwrap > #adminmenu > .wp-first-item.menu-top-first > .wp-first-item.menu-top-first {
+	#adminmenuwrap > #adminmenu .site-switcher {
 		color: $nav-unification-sidebar-text-alternative;
 
 		div.wp-menu-image:before {
 			color: $nav-unification-sidebar-text-alternative;
 		}
 
-		&:hover, 
+		&:hover,
 		&:hover div.wp-menu-image:before {
 			color: $menu-highlight-text;
 		}

modules/masterbar/admin-color-schemes/colors/blue/colors.scss

@@ -0,0 +1,9 @@
+$masterbar-background: #52accc;
+$menu-submenu-background: #4796b3;
+$text-color: #fff;
+$highlight-color: #096484;
+$base-color-rgb: rgb(82, 172, 204);
+$nav-unification-sidebar-text-alternative: #e2ecf1;
+$menu-highlight-text: #fff;
+
+@import "../_core-overrides";

modules/masterbar/admin-color-schemes/colors/coffee/colors.scss

@@ -0,0 +1,9 @@
+$masterbar-background: #59524c;
+$menu-submenu-background: #46403c;
+$text-color: #fff;
+$highlight-color: #c7a589;
+$base-color-rgb: rgb(89, 82, 76);
+$nav-unification-sidebar-text-alternative: #f6f7f7;
+$menu-highlight-text: #fff;
+
+@import "../_core-overrides";

modules/masterbar/admin-color-schemes/colors/ectoplasm/colors.scss

@@ -0,0 +1,9 @@
+$masterbar-background: #523f6d;
+$menu-submenu-background: #413256;
+$text-color: #fff;
+$highlight-color: #a3b745;
+$base-color-rgb: rgb(82, 63, 109);
+$nav-unification-sidebar-text-alternative: #ffffff;
+$menu-highlight-text: #fff;
+
+@import "../_core-overrides";

modules/masterbar/admin-color-schemes/colors/fresh/colors.scss

@@ -0,0 +1,19 @@
+$masterbar-background: #101517;
+$menu-submenu-background: #333333;
+$text-color: #fff;
+$highlight-color: #006fad;
+$base-color-rgb: rgb(35,40,45);
+$nav-unification-sidebar-text-alternative: #a2aab2;
+$menu-highlight-text: #00b9eb;
+
+@import "../_core-overrides";
+
+// Fresh theme specifics
+#wpadminbar .ab-top-menu > #wp-admin-bar-blog.my-sites > .ab-item {
+	background: #23282d;
+}
+
+.site__info > .site__badge {
+	background: #dcdcde;
+	color: #1d2327;
+}

modules/masterbar/admin-color-schemes/colors/light/colors.scss

@@ -0,0 +1,16 @@
+$masterbar-background: #e5e5e5;
+$menu-submenu-background: #fff;
+$text-color: #333;
+$highlight-color: #888;
+$base-color-rgb: rgb(229, 229, 229);
+$nav-unification-sidebar-text-alternative: #1d2327;
+$menu-highlight-text: #fff;
+
+// Light theme specifics
+#wpadminbar #wp-admin-bar-blog > a.ab-item:before,
+#wpadminbar #wp-admin-bar-newdash > a.ab-item:before,
+#wpadminbar #wp-admin-bar-notes .noticon-bell:before {
+	filter: brightness(0.1);
+}
+
+@import "../_core-overrides";

modules/masterbar/admin-color-schemes/colors/midnight/colors.scss

@@ -0,0 +1,9 @@
+$masterbar-background: #363b3f;
+$menu-submenu-background: #26292c;
+$text-color: #fff;
+$highlight-color: #e14d43;
+$base-color-rgb: rgb(54, 59, 63);
+$nav-unification-sidebar-text-alternative: #fff;
+$menu-highlight-text: #fff;
+
+@import "../_core-overrides";

modules/masterbar/admin-color-schemes/colors/modern/colors.scss

@@ -0,0 +1,9 @@
+$masterbar-background: #1e1e1e;
+$menu-submenu-background: #0c0c0c;
+$text-color: #fff;
+$highlight-color: #3858e9;
+$base-color-rgb: rgb(30, 30, 30);
+$nav-unification-sidebar-text-alternative: #c3c4c7;
+$menu-highlight-text: #fff;
+
+@import "../_core-overrides";

modules/masterbar/admin-color-schemes/colors/ocean/colors.scss

@@ -0,0 +1,9 @@
+$masterbar-background: #738e96;
+$menu-submenu-background: #627c83;
+$text-color: #fff;
+$highlight-color: #9ebaa0;
+$base-color-rgb: rgb(115, 142, 150);
+$nav-unification-sidebar-text-alternative: #fff;
+$menu-highlight-text: #fff;
+
+@import "../_core-overrides";

modules/masterbar/admin-color-schemes/colors/sunrise/colors.scss

@@ -0,0 +1,9 @@
+$masterbar-background: #cf4944;
+$menu-submenu-background: #be3631;
+$text-color: #fff;
+$highlight-color: #dd823b;
+$base-color-rgb: rgb(207, 73, 68);
+$nav-unification-sidebar-text-alternative: #f6f7f7;
+$menu-highlight-text: #fff;
+
+@import "../_core-overrides";