diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7fa0a15268415..de5373e764dc7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2197,7 +2197,63 @@ importers:
specifier: 4.9.1
version: 4.9.1(webpack@5.76.0)
- projects/packages/masterbar: {}
+ projects/packages/masterbar:
+ dependencies:
+ '@automattic/calypso-color-schemes':
+ specifier: 3.1.3
+ version: 3.1.3
+ '@automattic/color-studio':
+ specifier: 2.6.0
+ version: 2.6.0
+ postcss-custom-properties:
+ specifier: 12.1.7
+ version: 12.1.7(postcss@8.4.31)
+ devDependencies:
+ '@automattic/jetpack-webpack-config':
+ specifier: workspace:*
+ version: link:../../js-packages/webpack-config
+ '@automattic/remove-asset-webpack-plugin':
+ specifier: workspace:*
+ version: link:../../js-packages/remove-asset-webpack-plugin
+ '@babel/core':
+ specifier: 7.24.0
+ version: 7.24.0
+ '@csstools/postcss-global-data':
+ specifier: 2.1.1
+ version: 2.1.1(postcss@8.4.31)
+ '@wordpress/browserslist-config':
+ specifier: 5.39.0
+ version: 5.39.0
+ '@wordpress/dependency-extraction-webpack-plugin':
+ specifier: 5.7.0
+ version: 5.7.0(webpack@5.76.0)
+ autoprefixer:
+ specifier: 10.4.14
+ version: 10.4.14(postcss@8.4.31)
+ core-js:
+ specifier: 3.23.5
+ version: 3.23.5
+ glob:
+ specifier: 10.3.15
+ version: 10.3.15
+ postcss:
+ specifier: 8.4.31
+ version: 8.4.31
+ postcss-loader:
+ specifier: 6.2.0
+ version: 6.2.0(postcss@8.4.31)(webpack@5.76.0)
+ sass:
+ specifier: 1.64.1
+ version: 1.64.1
+ sass-loader:
+ specifier: 12.4.0
+ version: 12.4.0(sass@1.64.1)(webpack@5.76.0)
+ webpack:
+ specifier: 5.76.0
+ version: 5.76.0(webpack-cli@4.9.1)
+ webpack-cli:
+ specifier: 4.9.1
+ version: 4.9.1(webpack@5.76.0)
projects/packages/my-jetpack:
dependencies:
diff --git a/projects/packages/masterbar/.gitattributes b/projects/packages/masterbar/.gitattributes
index b0b228d4ad6ad..8d0f7898051a3 100644
--- a/projects/packages/masterbar/.gitattributes
+++ b/projects/packages/masterbar/.gitattributes
@@ -5,13 +5,17 @@ package.json export-ignore
# Files to include in the mirror repo, but excluded via gitignore
# Remember to end all directories with `/**` to properly tag every file.
-# /src/js/example.min.js production-include
+dist/** production-include
# Files to exclude from the mirror repo, but included in the monorepo.
# Remember to end all directories with `/**` to properly tag every file.
.gitignore production-exclude
+.phpcs.dir.xml production-exclude
+.phpcsignore production-exclude
changelog/** production-exclude
phpunit.xml.dist production-exclude
-.phpcs.dir.xml production-exclude
+src/**/*.css production-exclude
+src/**/*.js production-exclude
+src/**/*.scss production-exclude
tests/** production-exclude
-.phpcsignore production-exclude
+tools/** production-exclude
diff --git a/projects/packages/masterbar/.gitignore b/projects/packages/masterbar/.gitignore
index 688e2469bdf27..71e37fe99f319 100644
--- a/projects/packages/masterbar/.gitignore
+++ b/projects/packages/masterbar/.gitignore
@@ -1,3 +1,6 @@
vendor/
node_modules/
wordpress/
+
+dist/
+.cache/
diff --git a/projects/packages/masterbar/.phan/baseline.php b/projects/packages/masterbar/.phan/baseline.php
new file mode 100644
index 0000000000000..ff5a327951554
--- /dev/null
+++ b/projects/packages/masterbar/.phan/baseline.php
@@ -0,0 +1,28 @@
+ [
+ 'src/admin-menu/class-wpcom-admin-menu.php' => ['PhanTypeMismatchArgument'],
+ 'src/class-main.php' => ['PhanNoopNew'],
+ 'src/profile-edit/bootstrap.php' => ['PhanNoopNew'],
+ 'tests/php/test-class-admin-color-schemes.php' => ['PhanNoopNew'],
+ ],
+ // 'directory_suppressions' => ['src/directory_name' => ['PhanIssueName1', 'PhanIssueName2']] can be manually added if needed.
+ // (directory_suppressions will currently be ignored by subsequent calls to --save-baseline, but may be preserved in future Phan releases)
+];
diff --git a/projects/packages/masterbar/.phan/config.php b/projects/packages/masterbar/.phan/config.php
index 4a26d3fa39e9d..61c163439819f 100644
--- a/projects/packages/masterbar/.phan/config.php
+++ b/projects/packages/masterbar/.phan/config.php
@@ -10,4 +10,26 @@
// Require base config.
require __DIR__ . '/../../../../.phan/config.base.php';
-return make_phan_config( dirname( __DIR__ ) );
+// We need to load the wpcom and amp stubs too.
+return make_phan_config(
+ dirname( __DIR__ ),
+ array(
+ '+stubs' => array( 'wpcom', 'amp' ),
+ 'parse_file_list' => array(
+
+ /*
+ Reference files to handle code checking for stuff from Jetpack-the-plugin or other in-monorepo plugins.
+ * Wherever feasible we should really clean up this sort of thing instead of adding stuff here.
+ *
+ * DO NOT add references to files in other packages like this! Generally packages should be listed in composer.json 'require'.
+ * If there are truly optional dependencies or circular dependencies that can't be cleaned up, one package may list the
+ * other in 'require-dev' and `extra.dependencies.test-only' instead. See packages/config for an example.
+ */
+ __DIR__ . '/../../../plugins/jetpack/3rd-party/class.jetpack-amp-support.php',
+ __DIR__ . '/../../../plugins/jetpack/modules/custom-css/custom-css.php',
+ __DIR__ . '/../../../plugins/jetpack/modules/notes.php',
+ __DIR__ . '/../../../plugins/jetpack/modules/scan/class-admin-bar-notice.php',
+ __DIR__ . '/../../../plugins/jetpack/modules/stats.php',
+ ),
+ )
+);
diff --git a/projects/packages/masterbar/README.md b/projects/packages/masterbar/README.md
index 36d240713f69c..3272a019f2465 100644
--- a/projects/packages/masterbar/README.md
+++ b/projects/packages/masterbar/README.md
@@ -1,14 +1,17 @@
-# masterbar
+# Masterbar
The WordPress.com Toolbar feature replaces the default admin bar and offers quick links to the Reader, all your sites, your WordPress.com profile, and notifications.
-## How to install masterbar
+## Get Started
-### Installation From Git Repo
+Package is published in [Packagist](https://packagist.org/packages/automattic/jetpack-masterbar). We recommend using the latest version there, or you can also test with the latest development versions like below:
-## Contribute
-
-## Get Help
+```
+"require": {
+ "automattic/jetpack-autoloader": "dev-trunk",
+ "automattic/jetpack-masterbar": "dev-trunk"
+}
+```
## Using this package in your WordPress plugin
@@ -18,7 +21,19 @@ If you plan on using this package in your WordPress plugin, we would recommend t
Need to report a security vulnerability? Go to [https://automattic.com/security/](https://automattic.com/security/) or directly to our security bug bounty site [https://hackerone.com/automattic](https://hackerone.com/automattic).
+## Build System
+
+_Note: `cd` to `projects/packages/masterbar` before running these commands_
+
+- `npm run build`
+ Compiles the plugins for development - the files are not minified and we produce a source map.
+
+- `npm run build-production`
+ Compiles the plugins for production - we produce minified files without source maps.
+
+- `npm run clean`
+ Removes all build files.
+
## License
masterbar is licensed under [GNU General Public License v2 (or later)](./LICENSE.txt)
-
diff --git a/projects/packages/masterbar/changelog/update-copy-masterbar-code-to-pkg b/projects/packages/masterbar/changelog/update-copy-masterbar-code-to-pkg
new file mode 100644
index 0000000000000..424c0f36d5ff6
--- /dev/null
+++ b/projects/packages/masterbar/changelog/update-copy-masterbar-code-to-pkg
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Masterbar: Copy module code to package
diff --git a/projects/packages/masterbar/composer.json b/projects/packages/masterbar/composer.json
index 9ab20e336f972..15a62ca4cf259 100644
--- a/projects/packages/masterbar/composer.json
+++ b/projects/packages/masterbar/composer.json
@@ -4,11 +4,22 @@
"type": "jetpack-library",
"license": "GPL-2.0-or-later",
"require": {
- "php": ">=7.0"
+ "php": ">=7.0",
+ "automattic/jetpack-assets": "@dev",
+ "automattic/jetpack-blaze": "@dev",
+ "automattic/jetpack-compat": "@dev",
+ "automattic/jetpack-device-detection": "@dev",
+ "automattic/jetpack-connection": "@dev",
+ "automattic/jetpack-jitm": "@dev",
+ "automattic/jetpack-logo": "@dev",
+ "automattic/jetpack-plans": "@dev",
+ "automattic/jetpack-status": "@dev"
},
"require-dev": {
+ "brain/monkey": "2.6.1",
"yoast/phpunit-polyfills": "1.1.0",
"automattic/jetpack-changelogger": "@dev",
+ "automattic/patchwork-redefine-exit": "@dev",
"automattic/wordbless": "dev-master"
},
"autoload": {
@@ -17,14 +28,19 @@
]
},
"scripts": {
- "build-development": "echo 'Add your build step to composer.json, please!'",
- "build-production": "echo 'Add your build step to composer.json, please!'",
+ "build-production": [
+ "pnpm run build-production"
+ ],
+ "build-development": [
+ "pnpm run build"
+ ],
"phpunit": [
"./vendor/phpunit/phpunit/phpunit --colors=always"
],
"post-install-cmd": "WorDBless\\Composer\\InstallDropin::copy",
"post-update-cmd": "WorDBless\\Composer\\InstallDropin::copy",
"test-php": [
+ "pnpm run build-production",
"@composer phpunit"
]
},
@@ -55,7 +71,7 @@
"mirror-repo": "Automattic/jetpack-masterbar",
"textdomain": "jetpack-masterbar",
"version-constants": {
- "::PACKAGE_VERSION": "src/class-masterbar.php"
+ "::PACKAGE_VERSION": "src/class-main.php"
}
},
"suggest": {
diff --git a/projects/packages/masterbar/package.json b/projects/packages/masterbar/package.json
index e452010e35ccc..384dbc69f3d32 100644
--- a/projects/packages/masterbar/package.json
+++ b/projects/packages/masterbar/package.json
@@ -15,11 +15,34 @@
"license": "GPL-2.0-or-later",
"author": "Automattic",
"scripts": {
- "build": "echo 'Not implemented.'",
- "build-js": "echo 'Not implemented.'",
- "build-production": "echo 'Not implemented.'",
- "build-production-js": "echo 'Not implemented.'",
- "clean": "true"
+ "build": "pnpm run clean && pnpm run build-js",
+ "build-js": "webpack --config tools/webpack.config.js",
+ "build-production": "pnpm run clean && pnpm run build-production-js && pnpm run validate",
+ "build-production-js": "NODE_ENV=production BABEL_ENV=production pnpm run build-js",
+ "clean": "rm -rf dist/ .cache/",
+ "validate": "pnpm exec validate-es --no-error-on-unmatched-pattern dist/",
+ "watch": "pnpm run build && pnpm webpack watch"
},
- "devDependencies": {}
+ "dependencies": {
+ "@automattic/calypso-color-schemes": "3.1.3",
+ "@automattic/color-studio": "2.6.0",
+ "postcss-custom-properties": "12.1.7"
+ },
+ "devDependencies": {
+ "@automattic/jetpack-webpack-config": "workspace:*",
+ "@automattic/remove-asset-webpack-plugin": "workspace:*",
+ "autoprefixer": "10.4.14",
+ "@csstools/postcss-global-data": "2.1.1",
+ "@babel/core": "7.24.0",
+ "@wordpress/browserslist-config": "5.39.0",
+ "@wordpress/dependency-extraction-webpack-plugin": "5.7.0",
+ "core-js": "3.23.5",
+ "glob": "10.3.15",
+ "postcss": "8.4.31",
+ "postcss-loader": "6.2.0",
+ "sass": "1.64.1",
+ "sass-loader": "12.4.0",
+ "webpack": "5.76.0",
+ "webpack-cli": "4.9.1"
+ }
}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/class-admin-color-schemes.php b/projects/packages/masterbar/src/admin-color-schemes/class-admin-color-schemes.php
new file mode 100644
index 0000000000000..ab72282ca5b01
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/class-admin-color-schemes.php
@@ -0,0 +1,194 @@
+ array( $this, 'update_admin_color_permissions_check' ),
+ 'description' => __( 'Slug of the admin color scheme.', 'jetpack-masterbar' ),
+ 'single' => true,
+ 'show_in_rest' => array(
+ 'schema' => array( 'default' => 'fresh' ),
+ ),
+ 'type' => 'string',
+ )
+ );
+ }
+
+ /**
+ * Permission callback to edit the `admin_color` user meta.
+ *
+ * @param bool $allowed Whether the given user is allowed to edit this meta value.
+ * @param string $meta_key Meta key. In this case `admin_color`.
+ * @param int $object_id Queried user ID.
+ * @return bool
+ */
+ public function update_admin_color_permissions_check( $allowed, $meta_key, $object_id ) { // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter, VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+ return current_user_can( 'edit_user', $object_id );
+ }
+
+ /**
+ * Get the admin color scheme URL based on the environment
+ *
+ * @param string $color_scheme The color scheme to get the URL for.
+ * @return string
+ */
+ public function get_admin_color_scheme_url( $color_scheme ) {
+ return plugins_url( '../../dist/admin-color-schemes/colors/' . $color_scheme . '/colors.css', __FILE__ );
+ }
+
+ /**
+ * Registers new admin color schemes
+ */
+ public function register_admin_color_schemes() {
+
+ wp_admin_css_color(
+ 'aquatic',
+ __( 'Aquatic', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'aquatic' ),
+ array( '#135e96', '#007e65', '#043959', '#c5d9ed' ),
+ array(
+ 'base' => '#c5d9ed',
+ 'focus' => '#fff',
+ 'current' => '#01263a',
+ )
+ );
+
+ wp_admin_css_color(
+ 'classic-blue',
+ __( 'Classic Blue', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'classic-blue' ),
+ array( '#135e96', '#b26200', '#dcdcde', '#646970' ),
+ array(
+ 'base' => '#646970',
+ 'focus' => '#2271b1',
+ 'current' => '#fff',
+ )
+ );
+
+ wp_admin_css_color(
+ 'classic-bright',
+ __( 'Classic Bright', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'classic-bright' ),
+ array( '#135e96', '#c9256e', '#ffffff', '#e9eff5' ),
+ array(
+ 'base' => '#646970',
+ 'focus' => '#1d2327',
+ 'current' => '#0a4b78',
+ )
+ );
+
+ wp_admin_css_color(
+ 'classic-dark',
+ __( 'Classic Dark', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'classic-dark' ),
+ array( '#101517', '#c9356e', '#32373c', '#0073aa' ),
+ array(
+ 'base' => '#a2aab2',
+ 'focus' => '#00b9eb',
+ 'current' => '#fff',
+ )
+ );
+
+ wp_admin_css_color(
+ 'contrast',
+ __( 'Contrast', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'contrast' ),
+ array( '#101517', '#ffffff', '#32373c', '#b4b9be' ),
+ array(
+ 'base' => '#1d2327',
+ 'focus' => '#fff',
+ 'current' => '#fff',
+ )
+ );
+
+ wp_admin_css_color(
+ 'nightfall',
+ __( 'Nightfall', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'nightfall' ),
+ array( '#00131c', '#043959', '#2271b1', '#9ec2e6' ),
+ array(
+ 'base' => '#9ec2e6',
+ 'focus' => '#fff',
+ 'current' => '#fff',
+ )
+ );
+
+ wp_admin_css_color(
+ 'powder-snow',
+ __( 'Powder Snow', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'powder-snow' ),
+ array( '#101517', '#2271b1', '#dcdcde', '#646970' ),
+ array(
+ 'base' => '#646970',
+ 'focus' => '#135e96',
+ 'current' => '#fff',
+ )
+ );
+
+ wp_admin_css_color(
+ 'sakura',
+ __( 'Sakura', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'sakura' ),
+ array( '#005042', '#f2ceda', '#2271b1', '#8c1749' ),
+ array(
+ 'base' => '#8c1749',
+ 'focus' => '#4f092a',
+ 'current' => '#fff',
+ )
+ );
+
+ wp_admin_css_color(
+ 'sunset',
+ __( 'Sunset', 'jetpack-masterbar' ),
+ $this->get_admin_color_scheme_url( 'sunset' ),
+ array( '#691c1c', '#b26200', '#f0c930', '#facfd2' ),
+ array(
+ 'base' => '#facfd2',
+ 'focus' => '#fff',
+ 'current' => '#4f3500',
+ )
+ );
+ }
+
+ /**
+ * 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' );
+ 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 ),
+ array(),
+ Main::PACKAGE_VERSION
+ );
+ }
+ }
+}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss
new file mode 100644
index 0000000000000..4c28825f6b528
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss
@@ -0,0 +1,776 @@
+/*
+ * This file is the basis for generating all admin color scheme stylesheets.
+ * It consists of two parts:
+ * 1. All styles from core _admin.scss (keep in sync with changes in core!).
+ * 2. An import of the overrides necessary to match Calypso color schemes.
+ */
+
+@import 'variables';
+@import 'mixins';
+
+@function url-friendly-colour( $color ) {
+ @return '%23' + str-slice( '#{ $color }', 2, -1 );
+}
+
+body {
+ background: $body-background;
+}
+
+
+/* Links */
+
+a {
+ color: $link;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $link-focus;
+ }
+}
+
+#post-body .misc-pub-post-status:before,
+#post-body #visibility:before,
+.curtime #timestamp:before,
+#post-body .misc-pub-revisions:before,
+span.wp-media-buttons-icon:before {
+ color: currentColor;
+}
+
+.wp-core-ui .button-link {
+ color: $link;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $link-focus;
+ }
+}
+
+.media-modal .delete-attachment,
+.media-modal .trash-attachment,
+.media-modal .untrash-attachment,
+.wp-core-ui .button-link-delete {
+ color: #d63638;
+}
+
+.media-modal .delete-attachment:hover,
+.media-modal .trash-attachment:hover,
+.media-modal .untrash-attachment:hover,
+.media-modal .delete-attachment:focus,
+.media-modal .trash-attachment:focus,
+.media-modal .untrash-attachment:focus,
+.wp-core-ui .button-link-delete:hover,
+.wp-core-ui .button-link-delete:focus {
+ color: #d63638;
+}
+
+/* Forms */
+
+input[type=checkbox]:checked::before {
+ content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E");
+}
+
+input[type=radio]:checked::before {
+ background: $form-checked;
+}
+
+.wp-core-ui input[type="reset"]:hover,
+.wp-core-ui input[type="reset"]:active {
+ color: $link-focus;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="color"]:focus,
+input[type="date"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="email"]:focus,
+input[type="month"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="text"]:focus,
+input[type="time"]:focus,
+input[type="url"]:focus,
+input[type="week"]:focus,
+input[type="checkbox"]:focus,
+input[type="radio"]:focus,
+select:focus,
+textarea:focus {
+ border-color: $highlight-color;
+ box-shadow: 0 0 0 1px $highlight-color;
+}
+
+
+/* Core UI */
+
+.wp-core-ui {
+
+ .button {
+ border-color: #7e8993;
+ color: #32373c;
+ }
+
+ .button.hover,
+ .button:hover,
+ .button.focus,
+ .button:focus {
+ border-color: darken( #7e8993, 5% );
+ color: darken( #32373c, 5% );
+ }
+
+ .button.focus,
+ .button:focus {
+ border-color: #7e8993;
+ color: darken( #32373c, 5% );
+ box-shadow: 0 0 0 1px #32373c;
+ }
+
+ .button:active {
+ border-color: #7e8993;
+ color: darken( #32373c, 5% );
+ box-shadow: none;
+ }
+
+ .button.active,
+ .button.active:focus,
+ .button.active:hover {
+ border-color: $button-color;
+ color: darken( #32373c, 5% );
+ box-shadow: inset 0 2px 5px -3px $button-color;
+ }
+
+ .button.active:focus {
+ box-shadow: 0 0 0 1px #32373c;
+ }
+
+ @if ( $low-contrast-theme != "true" ) {
+ .button,
+ .button-secondary {
+ color: $highlight-color;
+ border-color: $highlight-color;
+ }
+
+ .button.hover,
+ .button:hover,
+ .button-secondary:hover{
+ border-color: darken($highlight-color, 10);
+ color: darken($highlight-color, 10);
+ }
+
+ .button.focus,
+ .button:focus,
+ .button-secondary:focus {
+ border-color: lighten($highlight-color, 10);
+ color: darken($highlight-color, 20);;
+ box-shadow: 0 0 0 1px lighten($highlight-color, 10);
+ }
+
+ .button-primary {
+ &:hover {
+ color: #fff;
+ }
+ }
+ }
+
+ .button-primary {
+ @include button( $button-color );
+ }
+
+ .button-group > .button.active {
+ border-color: $button-color;
+ }
+
+ .wp-ui-primary {
+ color: $text-color;
+ background-color: $base-color;
+ }
+ .wp-ui-text-primary {
+ color: $base-color;
+ }
+
+ .wp-ui-highlight {
+ color: $menu-highlight-text;
+ background-color: $menu-highlight-background;
+ }
+ .wp-ui-text-highlight {
+ color: $menu-highlight-background;
+ }
+
+ .wp-ui-notification {
+ color: $menu-bubble-text;
+ background-color: $menu-bubble-background;
+ }
+ .wp-ui-text-notification {
+ color: $menu-bubble-background;
+ }
+
+ .wp-ui-text-icon {
+ color: $menu-icon;
+ }
+}
+
+
+/* List tables */
+@if $low-contrast-theme == "true" {
+ .wrap .page-title-action:hover {
+ color: $menu-text;
+ background-color: $menu-background;
+ }
+} @else {
+ .wrap .page-title-action,
+ .wrap .page-title-action:active {
+ border: 1px solid $highlight-color;
+ color: $highlight-color;
+ }
+
+ .wrap .page-title-action:hover {
+ color: darken($highlight-color, 10);
+ border-color: darken($highlight-color, 10);
+ }
+
+ .wrap .page-title-action:focus {
+ border-color: lighten($highlight-color, 10);
+ color: darken($highlight-color, 20);;
+ box-shadow: 0 0 0 1px lighten($highlight-color, 10);
+ }
+}
+
+.view-switch a.current:before {
+ color: $menu-background;
+}
+
+.view-switch a:hover:before {
+ color: $menu-bubble-background;
+}
+
+
+/* Admin Menu */
+
+#adminmenuback,
+#adminmenuwrap,
+#adminmenu {
+ background: $menu-background;
+}
+
+#adminmenu a {
+ color: $menu-text;
+}
+
+#adminmenu div.wp-menu-image:before {
+ color: $menu-icon;
+}
+
+#adminmenu a:hover,
+#adminmenu li.menu-top:hover,
+#adminmenu li.opensub > a.menu-top,
+#adminmenu li > a.menu-top:focus {
+ color: $menu-highlight-text;
+ background-color: $menu-highlight-background;
+}
+
+#adminmenu li.menu-top:hover div.wp-menu-image:before,
+#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
+ color: $menu-highlight-icon;
+}
+
+
+/* Active tabs use a bottom border color that matches the page background color. */
+
+.about-wrap .nav-tab-active,
+.nav-tab-active,
+.nav-tab-active:hover {
+ background-color: $body-background;
+ border-bottom-color: $body-background;
+}
+
+
+/* Admin Menu: submenu */
+
+#adminmenu .wp-submenu,
+#adminmenu .wp-has-current-submenu .wp-submenu,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
+ background: $menu-submenu-background;
+}
+
+#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
+ border-right-color: $menu-submenu-background;
+}
+
+#adminmenu .wp-submenu .wp-submenu-head {
+ color: $menu-submenu-text;
+}
+
+#adminmenu .wp-submenu a,
+#adminmenu .wp-has-current-submenu .wp-submenu a,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
+ color: $menu-submenu-text;
+
+ &:focus, &:hover {
+ color: $menu-submenu-focus-text;
+ }
+}
+
+
+/* Admin Menu: current */
+
+#adminmenu .wp-submenu li.current a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
+ color: $menu-submenu-current-text;
+
+ &:hover, &:focus {
+ color: $menu-submenu-focus-text;
+ }
+}
+
+ul#adminmenu a.wp-has-current-submenu:after,
+ul#adminmenu > li.current > a.current:after {
+ border-inline-end-color: $body-background;
+}
+
+#adminmenu li.current a.menu-top,
+#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
+#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
+.folded #adminmenu li.current.menu-top {
+ color: $menu-current-text;
+ background: $menu-current-background;
+}
+
+#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
+#adminmenu a.current:hover div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
+#adminmenu li:hover div.wp-menu-image:before,
+#adminmenu li a:focus div.wp-menu-image:before,
+#adminmenu li.opensub div.wp-menu-image:before {
+ color: $menu-current-icon;
+}
+
+
+/* Admin Menu: bubble */
+
+#adminmenu .awaiting-mod,
+#adminmenu .update-plugins {
+ color: $menu-bubble-text;
+ background: $menu-bubble-background;
+}
+
+#adminmenu li.current a .awaiting-mod,
+#adminmenu li a.wp-has-current-submenu .update-plugins,
+#adminmenu li:hover a .awaiting-mod,
+#adminmenu li.menu-top:hover > a .update-plugins {
+ color: $menu-bubble-current-text;
+ background: $menu-bubble-current-background;
+}
+
+
+/* Admin Menu: collapse button */
+
+#collapse-button {
+ color: $menu-collapse-text;
+}
+
+#collapse-button:hover,
+#collapse-button:focus {
+ color: $menu-submenu-focus-text;
+}
+
+/* Admin Bar */
+
+#wpadminbar {
+ color: $menu-text;
+ background: $menu-background;
+}
+
+#wpadminbar .ab-item,
+#wpadminbar a.ab-item,
+#wpadminbar > #wp-toolbar span.ab-label,
+#wpadminbar > #wp-toolbar span.noticon {
+ color: #f0f0f1;
+}
+
+#wpadminbar .ab-icon,
+#wpadminbar .ab-icon:before,
+#wpadminbar .ab-item:before,
+#wpadminbar .ab-item:after {
+ color: #a7aaad;
+}
+
+#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: $menu-submenu-focus-text;
+ background: $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: $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: $menu-highlight-icon;
+}
+
+
+/* Admin Bar: submenu */
+
+#wpadminbar .menupop .ab-sub-wrapper {
+ background: $menu-submenu-background;
+}
+
+#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
+#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
+ background: $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: $menu-submenu-text;
+}
+
+#wpadminbar .quicklinks li .blavatar,
+#wpadminbar .menupop .menupop > .ab-item:before {
+ color: $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: $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 .ab-icon:before,
+#wpadminbar.mobile .quicklinks .ab-item:before {
+ color: $menu-submenu-focus-text;
+}
+
+#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
+#wpadminbar.mobile .quicklinks .hover .ab-item:before {
+ color: $menu-icon;
+}
+
+
+/* Admin Bar: search */
+
+#wpadminbar #adminbarsearch:before {
+ color: $menu-icon;
+}
+
+#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
+ color: $menu-text;
+ background: $adminbar-input-background;
+}
+
+/* Admin Bar: recovery mode */
+
+#wpadminbar #wp-admin-bar-recovery-mode {
+ color: $adminbar-recovery-exit-text;
+ background-color: $adminbar-recovery-exit-background;
+}
+
+#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
+#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
+ color: $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: $adminbar-recovery-exit-text;
+ background-color: $adminbar-recovery-exit-background-alt;
+}
+
+/* Admin Bar: my account */
+
+#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
+ border-color: $adminbar-avatar-frame;
+ background-color: $adminbar-avatar-frame;
+}
+
+#wpadminbar #wp-admin-bar-user-info .display-name {
+ color: $menu-text;
+}
+
+#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
+ color: $menu-submenu-focus-text;
+}
+
+#wpadminbar #wp-admin-bar-user-info .username {
+ color: $menu-submenu-text;
+}
+
+
+/* Pointers */
+
+.wp-pointer .wp-pointer-content h3 {
+ background-color: $highlight-color;
+ border-color: darken( $highlight-color, 5% );
+}
+
+.wp-pointer .wp-pointer-content h3:before {
+ color: $highlight-color;
+}
+
+.wp-pointer.wp-pointer-top .wp-pointer-arrow,
+.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
+.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
+.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
+ border-bottom-color: $highlight-color;
+}
+
+
+/* Media */
+
+.media-item .bar,
+.media-progress-bar div {
+ background-color: $highlight-color;
+}
+
+.details.attachment {
+ box-shadow:
+ inset 0 0 0 3px #fff,
+ inset 0 0 0 7px $highlight-color;
+}
+
+.attachment.details .check {
+ background-color: $highlight-color;
+ box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
+}
+
+.media-selection .attachment.selection.details .thumbnail {
+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color;
+}
+
+
+/* Themes */
+
+.theme-browser .theme.active .theme-name,
+.theme-browser .theme.add-new-theme a:hover:after,
+.theme-browser .theme.add-new-theme a:focus:after {
+ background: $highlight-color;
+}
+
+.theme-browser .theme.add-new-theme a:hover span:after,
+.theme-browser .theme.add-new-theme a:focus span:after {
+ color: $highlight-color;
+}
+
+.theme-section.current,
+.theme-filter.current {
+ border-bottom-color: $menu-background;
+}
+
+body.more-filters-opened .more-filters {
+ color: $menu-text;
+ background-color: $menu-background;
+}
+
+body.more-filters-opened .more-filters:before {
+ color: $menu-text;
+}
+
+body.more-filters-opened .more-filters:hover,
+body.more-filters-opened .more-filters:focus {
+ background-color: $menu-highlight-background;
+ color: $menu-highlight-text;
+}
+
+body.more-filters-opened .more-filters:hover:before,
+body.more-filters-opened .more-filters:focus:before {
+ color: $menu-highlight-text;
+}
+
+/* Widgets */
+
+.widgets-chooser li.widgets-chooser-selected {
+ background-color: $menu-highlight-background;
+ color: $menu-highlight-text;
+}
+
+.widgets-chooser li.widgets-chooser-selected:before,
+.widgets-chooser li.widgets-chooser-selected:focus:before {
+ color: $menu-highlight-text;
+}
+
+/* Responsive Component */
+
+div#wp-responsive-toggle a:before {
+ color: $menu-icon;
+}
+
+.wp-responsive-open div#wp-responsive-toggle a {
+ // ToDo: make inset border
+ border-color: transparent;
+ background: $menu-highlight-background;
+}
+
+.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
+ background: $menu-submenu-background;
+}
+
+.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
+ color: $menu-icon;
+}
+
+/* TinyMCE */
+
+.mce-container.mce-menu .mce-menu-item:hover,
+.mce-container.mce-menu .mce-menu-item.mce-selected,
+.mce-container.mce-menu .mce-menu-item:focus,
+.mce-container.mce-menu .mce-menu-item-normal.mce-active,
+.mce-container.mce-menu .mce-menu-item-preview.mce-active {
+ background: $highlight-color;
+}
+
+/* Customizer */
+#customize-controls .control-section:hover > .accordion-section-title,
+#customize-controls .control-section .accordion-section-title:hover,
+#customize-controls .control-section.open .accordion-section-title,
+#customize-controls .control-section .accordion-section-title:focus {
+ color: $highlight-color;
+ border-left-color: $highlight-color;
+}
+
+.customize-controls-close:focus,
+.customize-controls-close:hover,
+.customize-controls-preview-toggle:focus,
+.customize-controls-preview-toggle:hover {
+ color: $highlight-color;
+ border-top-color: $highlight-color;
+}
+
+.customize-panel-back:hover,
+.customize-panel-back:focus,
+.customize-section-back:hover,
+.customize-section-back:focus {
+ color: $highlight-color;
+ border-left-color: $highlight-color;
+}
+
+.customize-screen-options-toggle:hover,
+.customize-screen-options-toggle:active,
+.customize-screen-options-toggle:focus,
+.active-menu-screen-options .customize-screen-options-toggle,
+#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
+#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
+#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
+ color: $highlight-color;
+}
+
+.wp-customizer .menu-item .submitbox .submitdelete:focus,
+.customize-screen-options-toggle:focus:before,
+#customize-controls .customize-info .customize-help-toggle:focus:before,
+.wp-customizer button:focus .toggle-indicator:before,
+.menu-delete:focus,
+.menu-item-bar .item-delete:focus:before,
+#available-menu-items .item-add:focus:before {
+ box-shadow:
+ 0 0 0 1px lighten($highlight-color, 10),
+ 0 0 2px 1px $highlight-color;
+}
+
+#customize-controls .customize-info.open .customize-help-toggle,
+#customize-controls .customize-info .customize-help-toggle:focus,
+#customize-controls .customize-info .customize-help-toggle:hover {
+ color: $highlight-color;
+}
+
+.control-panel-themes .customize-themes-section-title:focus,
+.control-panel-themes .customize-themes-section-title:hover {
+ border-left-color: $highlight-color;
+ color: $highlight-color;
+}
+
+.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
+ background: $highlight-color;
+}
+
+.control-panel-themes .customize-themes-section-title.selected {
+ color: $highlight-color;
+}
+
+#customize-theme-controls .control-section:hover > .accordion-section-title:after,
+#customize-theme-controls .control-section .accordion-section-title:hover:after,
+#customize-theme-controls .control-section.open .accordion-section-title:after,
+#customize-theme-controls .control-section .accordion-section-title:focus:after,
+#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
+#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
+#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
+#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
+ color: $highlight-color;
+}
+
+.customize-control .attachment-media-view .button-add-media:focus {
+ background-color: #fbfbfc;
+ border-color: $highlight-color;
+ border-style: solid;
+ box-shadow: 0 0 0 1px $highlight-color;
+ outline: 2px solid transparent;
+}
+
+.wp-full-overlay-footer .devices button:focus,
+.wp-full-overlay-footer .devices button.active:hover {
+ border-bottom-color: $highlight-color;
+}
+
+.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
+.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
+ color: $highlight-color;
+}
+
+.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
+.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
+ box-shadow:
+ 0 0 0 1px lighten($highlight-color, 10),
+ 0 0 2px 1px $highlight-color;
+}
+
+.wp-full-overlay-footer .devices button:hover:before,
+.wp-full-overlay-footer .devices button:focus:before {
+ color: $highlight-color;
+}
+
+/* Overrides */
+@import 'overrides';
+
+/* Gutenberg Support */
+@import 'gutenberg';
+
+/* Inline Help Support */
+@import 'inline-help';
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_core-overrides.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_core-overrides.scss
new file mode 100644
index 0000000000000..94cdbdb7fb135
--- /dev/null
+++ b/projects/packages/masterbar/src/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;
+ }
+}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_gutenberg.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_gutenberg.scss
new file mode 100644
index 0000000000000..385cbbb7d3df8
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_gutenberg.scss
@@ -0,0 +1,14 @@
+/*
+ * This file ensures scheme colors propagating into the block editor. The editor expects colors
+ * as CSS variables. We generate them the same way it does for core color schemes.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/base-styles/_mixins.scss
+ */
+
+body {
+ --wp-admin-theme-color: #{$highlight-color};
+
+ // Darker shades.
+ --wp-admin-theme-color-darker-10: #{darken($highlight-color, 5%)};
+ --wp-admin-theme-color-darker-20: #{darken($highlight-color, 10%)};
+}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_inline-help.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_inline-help.scss
new file mode 100644
index 0000000000000..48a21f5c0f355
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_inline-help.scss
@@ -0,0 +1,8 @@
+// These vars are consumed within `modules/masterbar/inline-help/inline-help.css`
+.a8c-faux-inline-help {
+ --color-primary: #{$color-primary};
+ --color-primary-dark: #{$color-primary-dark};
+ --color-primary-light: #{$color-primary-light};
+ --color-surface: #{$color-surface};
+ --color-neutral-100-rgb: #{$color-neutral-100-rgb};
+}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_mixins.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_mixins.scss
new file mode 100644
index 0000000000000..1e9aee43f5e1f
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_mixins.scss
@@ -0,0 +1,37 @@
+/*
+ * Button mixin- creates a button effect with correct
+ * highlights/shadows, based on a base color.
+ */
+ @mixin button( $button-color, $button-text-color: #fff ) {
+ background: $button-color;
+ border-color: $button-color;
+ color: $button-text-color;
+
+ &:hover,
+ &:focus {
+ background: lighten( $button-color, 3% );
+ border-color: darken( $button-color, 3% );
+ color: $button-text-color;
+ }
+
+ &:focus {
+ box-shadow:
+ 0 0 0 1px #fff,
+ 0 0 0 3px $button-color;
+ }
+
+ &:active {
+ background: darken( $button-color, 5% );
+ border-color: darken( $button-color, 5% );
+ color: $button-text-color;
+ }
+
+ &.active,
+ &.active:focus,
+ &.active:hover {
+ background: $button-color;
+ color: $button-text-color;
+ border-color: darken( $button-color, 15% );
+ box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
+ }
+}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss
new file mode 100644
index 0000000000000..f9f2a8e858bc1
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss
@@ -0,0 +1,141 @@
+
+// This file cotains overrides to _admin.scss necessary to match Calypso color schemes
+
+// Make wpadminbar colors differ from submenu colors
+
+.admin-color-aquatic,
+.admin-color-classic-blue,
+.admin-color-classic-bright,
+.admin-color-classic-dark,
+.admin-color-contrast,
+.admin-color-nightfall,
+.admin-color-powder-snow,
+.admin-color-sakura,
+.admin-color-sunset {
+
+ #wpadminbar{
+ background: $masterbar-background !important;
+ }
+
+ #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 {
+ background: $masterbar-highlight-background;
+ }
+
+}
+
+// Make current submenu icon color stay the same on hover
+#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
+#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
+#adminmenu .current div.wp-menu-image:before,
+#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
+#adminmenu a.current:hover div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
+ color: $menu-current-text;
+}
+
+// Make current submenu item color stay the same on hover/focus
+#adminmenu .wp-submenu li.current a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
+
+ &:hover, &:focus {
+ color: $menu-submenu-current-text;
+ }
+}
+
+// Nav unification
+.admin-color-aquatic,
+.admin-color-classic-blue,
+.admin-color-classic-bright,
+.admin-color-classic-dark,
+.admin-color-contrast,
+.admin-color-nightfall,
+.admin-color-powder-snow,
+.admin-color-sakura,
+.admin-color-sunset {
+
+ // Masterbar - border below the Masterbar
+ #wpadminbar {
+ box-shadow: inset 0 -1px 0 $masterbar-background; // Calypso --color-masterbar-background
+ }
+
+ // Masterbar - My Sites active state
+ #wpadminbar .ab-top-menu > li.my-sites > .ab-item,
+ #wpadminbar .ab-top-menu > li.my-sites > .ab-item:hover {
+ background: $masterbar-active-background;
+ }
+
+ // Masterbar - Notification hover background
+ #wpadminbar #wp-admin-bar-notes.hover > .ab-item {
+ background: $masterbar-highlight-background;
+ }
+
+ // Masterbar - Notification active background
+ #wpadminbar .ab-top-menu > li.wpnt-show > .ab-item {
+ background: $masterbar-active-background !important; // important used in masterbar.css
+ }
+
+ // Site Card - Border around Site Card
+ #adminmenu li.toplevel_page_site-card {
+ 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
+ #adminmenu li.toplevel_page_site-card:hover,
+ #adminmenu li.toplevel_page_site-card a:hover {
+ background: $menu-background;
+ }
+
+ // Site Card - Site title
+ .site__info .site__title {
+ color: $menu-text;
+ }
+
+ // Site Card - Site domain
+ .site__info .site__domain {
+ color: $nav-unification-sidebar-text-alternative;
+ }
+
+ // Site Card - Site icon placeholder image background on hover/focus
+ #adminmenu .toplevel_page_site-card:hover div.wp-menu-image,
+ #adminmenu .toplevel_page_site-card a:focus div.wp-menu-image {
+ background-color: $menu-current-background;
+ }
+
+ // Site Card - Fade out for content overflowing the Site Card
+ .site__info .site__title::after,
+ .site__info .site__domain::after {
+ background: linear-gradient( 90deg, rgba( $color: $menu-background, $alpha: 0 ), rgba( $color: $menu-background, $alpha: 1 ) 90% );
+ }
+
+ // Site Card - 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;
+ }
+ }
+
+}
+
+// Ensure sidebar is visually separate from the content in the Contrast color scheme
+.admin-color-contrast #adminmenuback {
+ outline: 1px solid $nav-unification-sidebar-border;
+}
+
+.admin-color-contrast.folded #adminmenu .toplevel_page_site-notices .wp-menu-image,
+.admin-color-classic-bright.folded #adminmenu .toplevel_page_site-notices .wp-menu-image {
+ background-color: $studio-gray-80 !important;
+}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_upsell-banner.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_upsell-banner.scss
new file mode 100644
index 0000000000000..bf7862fd70401
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_upsell-banner.scss
@@ -0,0 +1,14 @@
+// Calypso Upsell Banner
+#adminmenu .toplevel_page_site-notices .upsell_banner {
+ background-color: $menu-nudge-background;
+ color: $menu-nudge-text-color;
+}
+
+#adminmenu .toplevel_page_site-notices .upsell_banner .button {
+ background-color: $menu-nudge-cta-background;
+ color: $menu-nudge-cta-color;
+}
+
+#adminmenu .toplevel_page_site-notices .upsell_banner .button:hover {
+ background-color: $menu-nudge-cta-background-hover
+}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_variables.scss
new file mode 100644
index 0000000000000..8287a2320282c
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_variables.scss
@@ -0,0 +1,65 @@
+// assign default value to all undefined variables
+
+
+// core variables
+
+$text-color: #fff !default;
+$base-color: #23282d !default;
+$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
+$highlight-color: #0073aa !default;
+$notification-color: #d54e21 !default;
+
+
+// global
+
+$body-background: #f1f1f1 !default;
+
+$link: #0073aa !default;
+$link-focus: lighten( $link, 10% ) !default;
+
+$button-color: $highlight-color !default;
+$button-text-color: $text-color !default;
+
+$form-checked: #7e8993 !default;
+
+// admin menu & admin-bar
+
+$menu-text: $text-color !default;
+$menu-icon: $icon-color !default;
+$menu-background: $base-color !default;
+
+$menu-highlight-text: $text-color !default;
+$menu-highlight-icon: $text-color !default;
+$menu-highlight-background: $highlight-color !default;
+
+$menu-current-text: $menu-highlight-text !default;
+$menu-current-icon: $menu-highlight-icon !default;
+$menu-current-background: $menu-highlight-background !default;
+
+$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
+$menu-submenu-background: darken( $base-color, 7% ) !default;
+$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
+
+$menu-submenu-focus-text: $highlight-color !default;
+$menu-submenu-current-text: $text-color !default;
+
+$menu-bubble-text: $text-color !default;
+$menu-bubble-background: $notification-color !default;
+$menu-bubble-current-text: $text-color !default;
+$menu-bubble-current-background: $menu-submenu-background !default;
+
+$menu-collapse-text: $menu-icon !default;
+$menu-collapse-icon: $menu-icon !default;
+$menu-collapse-focus-text: $text-color !default;
+$menu-collapse-focus-icon: $menu-highlight-icon !default;
+
+$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
+$adminbar-input-background: lighten( $menu-background, 7% ) !default;
+
+$adminbar-recovery-exit-text: $menu-bubble-text !default;
+$adminbar-recovery-exit-background: $menu-bubble-background !default;
+$adminbar-recovery-exit-background-alt: mix(black, $adminbar-recovery-exit-background, 10%) !default;
+
+$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
+
+$low-contrast-theme: "false" !default;
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
new file mode 100644
index 0000000000000..f528eb52248ca
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss
@@ -0,0 +1,49 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: $studio-blue-80; // Calypso --color-masterbar-background
+$icon-color: $studio-blue-5; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-celadon-50; // Calypso --color-accent
+$notification-color: $studio-celadon-30; // Calypso --color-masterbar-unread-dot-background
+
+// global (core _variables.scss)
+$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$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-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-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text
+$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text
+
+// masterbar overrides
+$masterbar-background: $studio-blue-80; // Calypso --color-masterbar-background
+$masterbar-highlight-background: $studio-blue-90; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: $studio-blue-100; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: $studio-blue-70; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: $studio-blue-5; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-blue-50; // Calypso --color-primary
+$color-primary-dark: $studio-blue-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-blue-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Calypso Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-celadon-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/colors.scss
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/blue/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/blue/_variables.scss
new file mode 100644
index 0000000000000..a35d489fae115
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/blue/_variables.scss
@@ -0,0 +1,26 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// Core overrides
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: #096484; // Calypso --color-primary
+$color-primary-dark: $studio-blue-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-blue-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-blue-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/blue/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/blue/colors.scss
new file mode 100644
index 0000000000000..5090216474c9a
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/blue/colors.scss
@@ -0,0 +1,5 @@
+@import "variables";
+@import "../_core-overrides";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/blue/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/blue/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/blue/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
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
new file mode 100644
index 0000000000000..7d9a7a55b8926
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss
@@ -0,0 +1,49 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: $studio-blue-60; // Calypso --color-masterbar-background
+$icon-color: $studio-gray-50; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-orange-50; // Calypso --color-accent
+$notification-color: $studio-orange-30; // Calypso --color-masterbar-unread-dot-background
+
+// global (core _variables.scss)
+$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$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-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-focus-text: $studio-orange-30; // Calypso --color-sidebar-submenu-hover-text
+$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text
+
+// masterbar overrides
+$masterbar-background: $studio-blue-60; // Calypso --color-masterbar-background
+$masterbar-highlight-background: $studio-blue-70; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: $studio-blue-90; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: $studio-gray-10; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: $studio-gray-50; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-blue-50; // Calypso --color-primary
+$color-primary-dark: $studio-blue-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-blue-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$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;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/colors.scss
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
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
new file mode 100644
index 0000000000000..62f993e070734
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss
@@ -0,0 +1,49 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: $studio-blue-60; // Calypso --color-masterbar-background
+$icon-color: $studio-gray-50; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-pink-50; // Calypso --color-accent
+$notification-color: $studio-pink-20; // Calypso --color-masterbar-unread-dot-background
+
+// global (core _variables.scss)
+$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$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-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-current-text: $studio-pink-50; // Calypso --color-sidebar-submenu-selected-text
+
+// masterbar overrides
+$masterbar-background: $studio-blue-60; // Calypso --color-masterbar-background
+$masterbar-highlight-background: $studio-blue-70; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: $studio-blue-90; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: $studio-gray-5; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: $studio-gray-50; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-blue-50; // Calypso --color-primary
+$color-primary-dark: $studio-blue-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-blue-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-gray-80;
+$menu-nudge-text-color: $studio-white;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-pink-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/colors.scss
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
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
new file mode 100644
index 0000000000000..e63ca79f99393
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss
@@ -0,0 +1,49 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: #101517; // Calypso --color-masterbar-background
+$icon-color: #a2aab2; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-pink-50;// Calypso --color-accent
+$notification-color: $highlight-color;
+
+// global (core _variables.scss)
+$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$menu-text: #eeeeee; // Calypso --color-sidebar-text
+$menu-background: #23282d; // Calypso --color-sidebar-background
+$menu-highlight-text: #00b9eb; // Calypso --color-sidebar-menu-hover-text
+$menu-highlight-icon: $menu-highlight-text;
+$menu-highlight-background: #1a1e23; // Calypso --color-sidebar-menu-hover-background
+$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-focus-text: #00b9eb; // Calypso --color-sidebar-submenu-hover-text
+$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text
+
+// masterbar overrides
+$masterbar-background: $base-color; // Calypso --color-masterbar-background
+$masterbar-highlight-background: #333; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: #23282d; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: #333333; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: #a2aab2; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-gray-90; // Calypso --color-primary
+$color-primary-dark: $studio-gray-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-gray-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-pink-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/colors.scss
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/_variables.scss
new file mode 100644
index 0000000000000..46c2c50e74e76
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/_variables.scss
@@ -0,0 +1,25 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: #c7a589; // Calypso --color-primary
+$color-primary-dark: $studio-orange-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-orange-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$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;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/colors.scss
new file mode 100644
index 0000000000000..5090216474c9a
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/colors.scss
@@ -0,0 +1,5 @@
+@import "variables";
+@import "../_core-overrides";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
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
new file mode 100644
index 0000000000000..c132a3c394cae
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss
@@ -0,0 +1,49 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: $studio-gray-100; // Calypso --color-masterbar-background
+$icon-color: $studio-gray-90; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-blue-70;// Calypso --color-accent
+$notification-color: $studio-yellow-20; // Calypso --color-masterbar-unread-dot-background
+
+// global (core _variables.scss)
+$body-background: $studio-white; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$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-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;
+$menu-current-background: $studio-gray-100; // Calypso --color-sidebar-menu-selected-background
+$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
+
+// masterbar overrides
+$masterbar-background: $base-color; // Calypso --color-masterbar-background
+$masterbar-highlight-background: $studio-gray-80; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: $studio-gray-60; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: $studio-gray-5; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: $studio-gray-90; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-gray-80; // Calypso --color-primary
+$color-primary-dark: $studio-gray-100; // Calypso --color-primary-dark
+$color-primary-light: $studio-gray-60; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-gray-80;
+$menu-nudge-text-color: $studio-white;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-blue-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/colors.scss
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/_variables.scss
new file mode 100644
index 0000000000000..48013c2306103
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/_variables.scss
@@ -0,0 +1,25 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: #a3b745; // Calypso --color-primary
+$color-primary-dark: #536700; // Calypso --color-primary-dark
+$color-primary-light: #b5de00; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: rgb(100, 125, 0);
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/colors.scss
new file mode 100644
index 0000000000000..5090216474c9a
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/colors.scss
@@ -0,0 +1,5 @@
+@import "variables";
+@import "../_core-overrides";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/_variables.scss
new file mode 100644
index 0000000000000..404bfefec8502
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/_variables.scss
@@ -0,0 +1,25 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-gray-90; // Calypso --color-primary
+$color-primary-dark: $studio-gray-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-gray-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: #2271b1;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: #135e96;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/colors.scss
new file mode 100644
index 0000000000000..ba9b84d3d952d
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/colors.scss
@@ -0,0 +1,15 @@
+@import "variables";
+@import "../_core-overrides";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
+
+// 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;
+}
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/light/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/light/_variables.scss
new file mode 100644
index 0000000000000..09fcaeebba2d8
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/light/_variables.scss
@@ -0,0 +1,25 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: #04a4cc; // Calypso --color-primary
+$color-primary-dark: $studio-blue-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-blue-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $color-primary;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-blue-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/light/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/light/colors.scss
new file mode 100644
index 0000000000000..5601a14f1e855
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/light/colors.scss
@@ -0,0 +1,13 @@
+@import "variables";
+
+// 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";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/light/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/light/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/light/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/_variables.scss
new file mode 100644
index 0000000000000..63aecdea5d4d1
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/_variables.scss
@@ -0,0 +1,25 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: #e14d43; // Calypso --color-primary
+$color-primary-dark: $studio-red-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-red-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: #00417d;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/colors.scss
new file mode 100644
index 0000000000000..5090216474c9a
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/colors.scss
@@ -0,0 +1,5 @@
+@import "variables";
+@import "../_core-overrides";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/modern/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/modern/_variables.scss
new file mode 100644
index 0000000000000..b385c1ad7d4e5
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/modern/_variables.scss
@@ -0,0 +1,25 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: #3858e9; // Calypso --color-primary
+$color-primary-dark: $studio-blue-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-blue-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: #2145e6;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/modern/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/modern/colors.scss
new file mode 100644
index 0000000000000..5090216474c9a
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/modern/colors.scss
@@ -0,0 +1,5 @@
+@import "variables";
+@import "../_core-overrides";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/modern/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/modern/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/modern/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
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
new file mode 100644
index 0000000000000..b29e6c4085420
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss
@@ -0,0 +1,49 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: $studio-blue-100; // Calypso --color-masterbar-background
+$icon-color: $studio-blue-10; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-blue-50;// Calypso --color-accent
+$notification-color: $studio-blue-30; // Calypso --color-masterbar-unread-dot-background
+
+// global (core _variables.scss)
+$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$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-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-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
+
+// masterbar overrides
+$masterbar-background: $studio-blue-100; // Calypso --color-masterbar-background
+$masterbar-highlight-background: $studio-blue-90; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: $studio-blue-80; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: $studio-blue-90; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: $studio-blue-20; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-gray-90; // Calypso --color-primary
+$color-primary-dark: $studio-gray-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-gray-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-blue-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/colors.scss
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/_variables.scss
new file mode 100644
index 0000000000000..29ccb39585f46
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/_variables.scss
@@ -0,0 +1,25 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: #9ebaa0; // Calypso --color-primary
+$color-primary-dark: $studio-celadon-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-celadon-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-celadon-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/colors.scss
new file mode 100644
index 0000000000000..5090216474c9a
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/colors.scss
@@ -0,0 +1,5 @@
+@import "variables";
+@import "../_core-overrides";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
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
new file mode 100644
index 0000000000000..1de98e7b49932
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss
@@ -0,0 +1,49 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: $studio-gray-100; // Calypso --color-masterbar-background
+$icon-color: $studio-gray-50; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-blue-50; // Calypso --color-accent
+$notification-color: $studio-blue-30; // Calypso --color-masterbar-unread-dot-background
+
+// global (core _variables.scss)
+$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$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-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-current-text: $studio-gray-80; // Calypso --color-sidebar-submenu-selected-text
+
+// masterbar overrides
+$masterbar-background: $studio-gray-100; // Calypso --color-masterbar-background
+$masterbar-highlight-background: $studio-gray-80; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: $studio-gray-70; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: $studio-gray-10; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: $studio-gray-60; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-gray-90; // Calypso --color-primary
+$color-primary-dark: $studio-gray-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-gray-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-blue-60;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/colors.scss
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
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
new file mode 100644
index 0000000000000..803e34d036368
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss
@@ -0,0 +1,49 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: $studio-celadon-70; // Calypso --color-masterbar-background
+$icon-color: $studio-pink-70; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-blue-50; // Calypso --color-accent
+$notification-color: $studio-pink-20; // Calypso Classic Bright (!) --color-masterbar-unread-dot-background
+
+// global (core _variables.scss)
+$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$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-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-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-focus-text: $studio-blue-20; // Calypso --color-sidebar-submenu-hover-text
+$menu-submenu-current-text: $studio-pink-0; // Calypso --color-sidebar-submenu-selected-text
+
+// masterbar overrides
+$masterbar-background: $studio-celadon-70; // Calypso --color-masterbar-background
+$masterbar-highlight-background: $studio-celadon-80; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: $studio-celadon-90; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: $studio-pink-10; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: $studio-pink-60; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-celadon-50; // Calypso --color-primary
+$color-primary-dark: $studio-celadon-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-celadon-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$menu-nudge-text-color: $studio-black;
+$menu-nudge-cta-background: $highlight-color;
+$menu-nudge-cta-color: $studio-white;
+$menu-nudge-cta-background-hover: $studio-blue-60;
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
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/_variables.scss
new file mode 100644
index 0000000000000..113980af0ef49
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/_variables.scss
@@ -0,0 +1,25 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+$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;
+
+// Calypso color variables used in e.g. inline help
+$color-primary: #dd823b; // Calypso --color-primary
+$color-primary-dark: $studio-orange-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-orange-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$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;
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/colors.scss
new file mode 100644
index 0000000000000..5090216474c9a
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/colors.scss
@@ -0,0 +1,5 @@
+@import "variables";
+@import "../_core-overrides";
+@import "../_gutenberg";
+@import "../_inline-help";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
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
new file mode 100644
index 0000000000000..03f7b325cfde6
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss
@@ -0,0 +1,50 @@
+// make use of color studio variables for consistency across products
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@automattic/color-studio/dist/color-variables-rgb.scss';
+
+// core variables (core _variables.scss)
+$base-color: $studio-red-80; // Calypso --color-masterbar-background
+$icon-color: $studio-red-5; // Calypso --color-sidebar-gridicon-fill
+$highlight-color: $studio-orange-50; // Calypso --color-accent
+$notification-color: $studio-pink-20; // Calypso Classic Bright (!) --color-masterbar-unread-dot-background
+
+// global (core _variables.scss)
+$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
+
+// admin menu & admin-bar (core _variables.scss)
+$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-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-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text
+$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text
+
+// masterbar overrides
+$masterbar-background: $studio-red-80; // Calypso --color-masterbar-background
+$masterbar-highlight-background: $studio-red-90; // Calypso --color-masterbar-item-hover-background
+$masterbar-active-background: $studio-red-100; // Calypso --color-masterbar-item-active-background
+
+// nav unification overrides
+$nav-unification-sidebar-border: $studio-red-80; // Calypso --color-sidebar-border
+$nav-unification-sidebar-text-alternative: $studio-red-10; // Calypso --color-sidebar-text-alternative
+
+// Calypso color variables used in e.g. inline help
+$color-primary: $studio-red-50; // Calypso --color-primary
+$color-primary-dark: $studio-red-70; // Calypso --color-primary-dark
+$color-primary-light: $studio-red-30; // Calypso --color-primary-light
+$color-surface: $studio-white; // Calypso --color-surface
+$color-neutral-100-rgb: $studio-gray-100-rgb; // Calypso --color-neutral-100-rgb
+
+// Sidebar Nudges
+$menu-nudge-background: $studio-white;
+$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;
+
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/colors.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/colors.scss
new file mode 100644
index 0000000000000..07136f2553c45
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/colors.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "../admin";
+@import "sidebar-notice";
diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/sidebar-notice.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/sidebar-notice.scss
new file mode 100644
index 0000000000000..3e1b6380cd81e
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/sidebar-notice.scss
@@ -0,0 +1,5 @@
+/*
+ * Styles for sidebar notices are maintained in a separate file for each color scheme so we can load them independently when needed.
+*/
+@import "variables";
+@import "../upsell-banner";
diff --git a/projects/packages/masterbar/src/admin-menu/admin-menu-nav-unification.css b/projects/packages/masterbar/src/admin-menu/admin-menu-nav-unification.css
new file mode 100644
index 0000000000000..e78b3f1867407
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-menu/admin-menu-nav-unification.css
@@ -0,0 +1,75 @@
+/*
+ * Styles for the nav-unification prototype (see pbAPfg-O2)
+ * TODO: depending on project outcome move or delete styles
+ */
+#wpadminbar #wp-admin-bar-notes #wpnt-notes-unread-count.wpn-unread {
+ top: 50%;
+ left: 50%;
+ transform: translate( -10px, -13px );
+
+}
+
+#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar {
+ transform: translateX( 1px );
+}
+
+#wpadminbar #wp-admin-bar-notes.active .noticon-bell:before {
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cmVjdCB4PSIwIiBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48Zz48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNi4xNCAxNC45N2wyLjgyOCAyLjgyN2MtLjM2Mi4zNjItLjg2Mi41ODYtMS40MTQuNTg2LTEuMTA1IDAtMi0uODk1LTItMiAwLS41NTIuMjI0LTEuMDUyLjU4Ni0xLjQxNHptOC44NjcgNS4zMjRMMTQuMyAyMSAzIDkuN2wuNzA2LS43MDcgMS4xMDIuMTU3Yy43NTQuMTA4IDEuNjktLjEyMiAyLjA3Ny0uNTFsMy44ODUtMy44ODRjMi4zNC0yLjM0IDYuMTM1LTIuMzQgOC40NzUgMHMyLjM0IDYuMTM1IDAgOC40NzVsLTMuODg1IDMuODg2Yy0uMzg4LjM4OC0uNjE4IDEuMzIzLS41MSAyLjA3N2wuMTU3IDEuMXoiLz48L2c+PC9zdmc+") !important;
+}
+
+#wpadminbar > #wp-toolbar .wpnt-show span.noticon,
+#wpadminbar #wp-admin-bar-notes.wpnt-show .noticon {
+ color: #ffffff;
+}
+
+#wpadminbar .quicklinks ul#wp-admin-bar-root-default {
+ padding-left: 0 !important;
+}
+
+#wpadminbar #wp-admin-bar-menu-toggle {
+ display: none;
+}
+
+@media screen and (max-width: 782px) {
+ #wpadminbar #wp-toolbar > ul > li {
+ display: block;
+ }
+
+ #wpadminbar .ab-top-menu > li > .ab-item {
+ box-sizing: border-box;
+ line-height: 32px;
+ }
+
+ #wpadminbar #wp-admin-bar-ab-new-post > .ab-item {
+ box-sizing: inherit !important;
+ }
+
+ #wpadminbar #wp-admin-bar-my-account > .ab-item {
+ padding: 7px 15px;
+ width: auto;
+ }
+
+ #wpadminbar #wp-toolbar.quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
+ display: block;
+ right: auto;
+ left: auto;
+ position: static;
+ margin-top: 3px;
+ top: 13px;
+ }
+
+ /* Hide debug bar. */
+ #wpadminbar #wp-toolbar.quicklinks li#wp-admin-bar-debug-bar {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ #wpadminbar #wp-toolbar.quicklinks li#wp-admin-bar-my-account.with-avatar > a {
+ width: auto;
+ }
+
+ #wpadminbar #wp-toolbar.quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
+ margin-top: 12px;
+ }
+}
diff --git a/projects/packages/masterbar/src/admin-menu/admin-menu-nav-unification.js b/projects/packages/masterbar/src/admin-menu/admin-menu-nav-unification.js
new file mode 100644
index 0000000000000..bd18380307412
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-menu/admin-menu-nav-unification.js
@@ -0,0 +1 @@
+import './admin-menu-nav-unification.css';
diff --git a/projects/packages/masterbar/src/admin-menu/admin-menu.css b/projects/packages/masterbar/src/admin-menu/admin-menu.css
new file mode 100644
index 0000000000000..14e4f9467c5e0
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-menu/admin-menu.css
@@ -0,0 +1,513 @@
+#adminmenu {
+ margin: 0;
+}
+
+/**
+ * Menu width
+ */
+#wpcontent,
+#wpfooter {
+ margin-left: 272px;
+}
+
+#adminmenuback,
+#adminmenuwrap,
+#adminmenu,
+#adminmenu .wp-submenu {
+ width: 272px;
+}
+
+#adminmenu .wp-submenu {
+ left: 272px;
+}
+
+#adminmenu .wp-not-current-submenu .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+ min-width: 272px;
+}
+
+/**
+ * Fixes Gutenberg in not fullscreen mode.
+ */
+ @media (min-width: 783px) {
+ .interface-interface-skeleton,
+ .edit-post-layout .components-editor-notices__snackbar {
+ left: 272px;
+ }
+}
+
+@media (min-width: 961px) {
+ body:not(.folded).auto-fold .interface-interface-skeleton,
+ .auto-fold .edit-post-layout .components-editor-notices__snackbar,
+ .components-snackbar-list.edit-widgets-notices__snackbar,
+ .jp-dialogue-modern-full__container {
+ left: 272px;
+ }
+
+ .global-notices {
+ max-width: calc( 100% - 48px - 272px );
+ }
+}
+
+/**
+ * Jetpack logo
+ */
+#adminmenu [class*="activity-log"] .wp-menu-image img {
+ padding-top: 7px;
+}
+
+/**
+ * Site Card
+ */
+#adminmenu .toplevel_page_site-card .wp-menu-name {
+ margin-left: 40px; /* icon width (32) + padding (8). */
+ padding: 0;
+}
+
+#adminmenu li.toplevel_page_site-card a {
+ padding: 10px 0 10px 8px;
+}
+
+/**
+ * Site Notices
+ */
+#adminmenu a.toplevel_page_site-notices:hover,
+#adminmenu a.toplevel_page_site-notices:focus,
+#adminmenu li.toplevel_page_site-notices:hover,
+#adminmenu li.toplevel_page_site-notices:focus {
+ background-color: inherit !important;
+ color: inherit !important;
+}
+
+#adminmenu li.toplevel_page_site-notices .wp-menu-image {
+ display: none;
+}
+
+#adminmenu .toplevel_page_site-notices .wp-menu-image {
+ border-radius: 2px;
+ background-color: #fff;
+}
+
+#adminmenu .toplevel_page_site-notices .wp-menu-image:before {
+ content: '\f534';
+ font-family: 'dashicons';
+ font-size: 20px;
+ line-height: 20px;
+ background-color: #a7aaad;
+ color: white;
+ border-radius: 50%;
+ margin: 5px;
+ padding: 0;
+}
+
+#adminmenu .toplevel_page_site-notices:hover .wp-menu-image:before {
+ color: #fff;
+}
+
+#adminmenu .toplevel_page_site-notices .upsell_banner {
+ display: flex;
+ flex-grow: 1;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ width: 100%;
+ padding: 7px 12px;
+ left: -28px;
+ border-radius: 2px;
+ font-size: 12px;
+ line-height: 1.4;
+ hyphens: none;
+}
+
+#adminmenu .toplevel_page_site-notices .upsell_banner .banner__info {
+ margin-right: 12px;
+}
+
+#adminmenu .toplevel_page_site-notices .upsell_banner .button {
+ font-size: 12px;
+ line-height: 12px;
+ padding: 0 7px;
+ border: 0;
+ min-height: 26px;
+}
+
+#adminmenu .toplevel_page_site-notices .upsell_banner svg.dismissible-card__close-icon {
+ height: 24px;
+ width: 24px;
+ margin-left: 10px;
+}
+
+@media screen and (min-width: 782px) {
+ .folded #adminmenu .toplevel_page_site-notices .wp-menu-image {
+ display: block;
+ width: 30px;
+ }
+
+ .folded #adminmenu .toplevel_page_site-notices {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+@media screen and (min-width: 782px) and (max-width: 960px){
+ .auto-fold #adminmenu .toplevel_page_site-notices .wp-menu-image {
+ display: block;
+ width: 30px;
+ }
+
+ .auto-fold #adminmenu .toplevel_page_site-notices {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+/* Prevent box-shadow at the top of the sidebar */
+#adminmenu .site-switcher:hover,
+#adminmenu .toplevel_page_site-card:hover,
+#adminmenu .toplevel_page_site-notices:hover {
+ box-shadow: none;
+}
+
+/**
+ * Site icon inline-styles for height and width are defined in set_site_icon_inline_styles
+ */
+#adminmenu .toplevel_page_site-card .wp-menu-image {
+ background-image: none;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 18px 18px;
+ transform: translateZ(0);
+ transition-property: background-image,background-color;
+ transition-duration: .2s;
+}
+
+#adminmenu a.toplevel_page_site-card:hover,
+#adminmenu li.toplevel_page_site-card:hover {
+ background-color: inherit;
+}
+
+#adminmenu .toplevel_page_site-card img {
+ opacity: initial;
+}
+
+#adminmenu .toplevel_page_site-card.has-site-icon img {
+ padding: 0;
+}
+
+#adminmenu .toplevel_page_site-card:hover div.wp-menu-image,
+#adminmenu .toplevel_page_site-card a:focus div.wp-menu-image {
+ background-image: url("data:image/svg+xml,%3Csvg class='gridicon gridicons-house' height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath fill='%23fff' d='M22 9L12 1 2 9v2h2v10h5v-4c0-1.657 1.343-3 3-3s3 1.343 3 3v4h5V11h2V9z'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+#adminmenu .toplevel_page_site-card:not(.has-site-icon) .wp-menu-image {
+ background-color: #c3c4c7;
+ height: 32px;
+ width: 32px;
+}
+
+#adminmenu .toplevel_page_site-card:not(.has-site-icon) .wp-menu-image img {
+ width: 18px;
+ height: 18px;
+ padding: 7px;
+}
+
+#adminmenu .toplevel_page_site-card:hover div.wp-menu-image img,
+#adminmenu .toplevel_page_site-card a:focus div.wp-menu-image img {
+ display: none;
+}
+
+.site__info .site__title {
+ display: block;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.3;
+}
+
+.site__info .site__domain {
+ display: block;
+ max-width: 95%;
+ font-size: 12px;
+ line-height: 1.4;
+ margin-top: 2px;
+}
+
+.site__info .site__title,
+.site__info .site__domain {
+ overflow: hidden;
+ white-space: nowrap;
+}
+.site__info .site__title::after,
+.site__info .site__domain::after {
+ content: "";
+ display: block;
+ position: absolute;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ user-select: none;
+ pointer-events: none;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: auto;
+ width: 20%;
+ height: auto;
+}
+
+.site__info > .site__badge {
+ font-size: 12px;
+ border-radius: 12px;
+ clear: both;
+ display: inline-block;
+ margin-top: 6px;
+ margin-right: 3px;
+ padding: 1px 10px;
+}
+
+.site__info > .site__badge.site__badge-staging {
+ background-color: #f0c930;
+ color: #4f3500;
+}
+
+/**
+ * Inline text in a menu title
+ */
+.inline-text {
+ display: block !important;
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY( -50% );
+ opacity: 0.8;
+}
+
+/**
+ * Stats
+ */
+[class*="toplevel_page_https://wordpress.com/stats/day"] .sidebar-unified__sparkline {
+ float: right;
+ margin-right: 8px;
+}
+
+/**
+ * Folded State
+ */
+.folded #adminmenu a.menu-top {
+ height: 31px;
+}
+
+.folded #adminmenu li.toplevel_page_site-card a {
+ padding-left: 0;
+}
+
+/* Auto-folding of the admin menu */
+@media only screen and (max-width: 960px) {
+ #adminmenu,
+ #adminmenuwrap,
+ #adminmenuback {
+ width: 272px;
+ }
+
+ .auto-fold #adminmenu a[class*="toplevel_page_http"].wp-first-item {
+ height: auto;
+ }
+
+ .wp-responsive-open #adminmenu a.menu-top {
+ height: auto;
+ }
+
+ .auto-fold #adminmenu div.wp-menu-image {
+ width: 36px;
+ }
+}
+
+@media screen and (min-width: 782px) and (max-width: 960px) {
+ .auto-fold #adminmenu a.menu-top {
+ height: 34px;
+ }
+
+ .auto-fold #adminmenu li.toplevel_page_site-card a {
+ height: 36px;
+ padding-left: 1px;
+ }
+}
+
+@media screen and (max-width: 782px) {
+ #adminmenu li.menu-top .wp-submenu>li>a,
+ .auto-fold #adminmenu li.menu-top .wp-submenu>li>a {
+ padding-left: 42px;
+ }
+
+ .wp-responsive-open #wpbody {
+ right: inherit;
+ }
+
+ .wp-responsive-open #wpcontent {
+ margin-left: 272px;
+ }
+
+ .auto-fold #adminmenu, .auto-fold #adminmenuback, .auto-fold #adminmenuwrap {
+ width: 272px;
+ }
+
+ .auto-fold #adminmenu a.site-switcher,
+ #adminmenu a.site-switcher {
+ font-size: 14px;
+ }
+}
+
+@media only screen and (max-width: 660px) {
+ #adminmenuback,
+ #adminmenuwrap,
+ #adminmenu,
+ #adminmenu .wp-submenu,
+ .auto-fold #adminmenu,
+ .auto-fold #adminmenuback,
+ .auto-fold #adminmenuwrap {
+ width: 100%;
+ z-index: 171;
+ }
+
+ .wp-responsive-open #wpcontent {
+ margin-left: 0;
+ }
+
+ ul#adminmenu a.wp-has-current-submenu:after,
+ ul#adminmenu>li.current>a.current:after,
+ ul#adminmenu li:hover a.wp-has-current-submenu:after,
+ .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
+ display: none;
+ }
+
+ .auto-fold #adminmenu li.toplevel_page_site-card a {
+ padding: 18px 0 18px 12px;
+ }
+}
+
+/* Dashboard Switcher */
+#view-link-wrap {
+ float: left;
+ margin: 0 0 0 6px;
+}
+
+.screen-options-tab__wrapper {
+ position:relative
+}
+
+.screen-options-tab__dropdown {
+ background-color: #fff;
+ border: 1px solid var(--color-neutral-5);
+ border-radius: 4px;
+ box-shadow: 0 4px 10px #0000001a;
+ padding: 3px;
+ position: absolute;
+ right: 20px;
+ top: 37px;
+ width:215px;
+ z-index: 9999;
+}
+
+@media screen and (max-width: 782px) {
+ .screen-options-tab__dropdown {
+ right: 10px;
+ top: 47px;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .screen-options-tab__dropdown {
+ top: 93px;
+ }
+}
+
+.screen-switcher:not(:hover) .screen-switcher__button:nth-child(2) > strong {
+ color:var(--wp-admin-theme-color)
+}
+
+.screen-switcher__button, a.screen-switcher__button {
+ background: transparent;
+ border: 1px solid #0000;
+ border-radius: 4px;
+ color: var(--color-text);
+ cursor: pointer;
+ display: inline-block;
+ font-size: .75rem;
+ line-height: normal;
+ text-decoration: none;
+ padding: 8px;
+ text-align:left
+}
+
+.screen-switcher__button:nth-child(2), a.screen-switcher__button:nth-child(2) {
+ border-color: var(--wp-admin-theme-color);
+ margin-bottom:4px
+}
+
+.screen-switcher__button:last-child, a.screen-switcher__button:last-child {
+ margin-bottom:0
+}
+
+.screen-switcher__button strong, a.screen-switcher__button strong {
+ display: block;
+ font-size: 13px;
+ margin-bottom:4px
+}
+
+.screen-switcher__button:focus > strong, .screen-switcher__button:hover > strong, a.screen-switcher__button:focus > strong, a.screen-switcher__button:hover > strong {
+ color:var(--wp-admin-theme-color)
+}
+
+/** Add new site button **/
+#adminmenu {
+ display: flex;
+ flex-direction: column;
+}
+#adminmenu .menu-top[class*="/start?ref=calypso-sidebar"] {
+ order: 99999;
+}
+
+body:not(.folded) #adminmenu .menu-top[class*="/start?ref=calypso-sidebar"] {
+ padding: 8px;
+ width: auto;
+}
+
+body:not(.folded) #adminmenu .menu-top[class*="/start?ref=calypso-sidebar"] a {
+ background: transparent;
+ border-color: var(--transparent-button-text-color, currentcolor);
+ display: flex;
+ justify-content: center;
+ margin-top: auto;
+ background: transparent;
+ border-style: solid;
+ border-width: 1px;
+ cursor: pointer;
+ margin: 0;
+ outline: 0;
+ overflow: hidden;
+ text-align: center;
+ text-overflow: ellipsis;
+ text-decoration: none;
+ vertical-align: top;
+ box-sizing: border-box;
+ font-size: 14px;
+ line-height: 22px;
+ border-radius: 2px;
+ padding: 8px 14px;
+ appearance: none;
+}
+
+body:not(.folded) #adminmenu .menu-top[class*="/start?ref=calypso-sidebar"] a:hover {
+ box-shadow: none;
+}
+
+body:not(.folded) #adminmenu .menu-top[class*="/start?ref=calypso-sidebar"] a .wp-menu-name {
+ padding: 0;
+}
+
+body:not(.folded) #adminmenu .menu-top[class*="/start?ref=calypso-sidebar"] a .wp-menu-image {
+ display: none;
+}
diff --git a/projects/packages/masterbar/src/admin-menu/admin-menu.js b/projects/packages/masterbar/src/admin-menu/admin-menu.js
new file mode 100644
index 0000000000000..013aa2a3c1b37
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-menu/admin-menu.js
@@ -0,0 +1,216 @@
+/* eslint-disable jsdoc/require-description,jsdoc/require-param-description,jsdoc/require-param-type,jsdoc/require-returns */
+/* global ajaxurl, jetpackAdminMenu */
+import './admin-menu.css';
+
+( function ( $ ) {
+ /**
+ *
+ */
+ function init() {
+ const adminbar = document.querySelector( '#wpadminbar' );
+ const wpwrap = document.querySelector( '#wpwrap' );
+ const adminMenu = document.querySelector( '#adminmenu' );
+ const dismissClass = 'dismissible-card__close-icon';
+
+ if ( ! adminbar ) {
+ return;
+ }
+
+ /**
+ *
+ * @param value
+ */
+ function setAriaExpanded( value ) {
+ const anchors = adminbar.querySelectorAll( '#wp-admin-bar-blog a' );
+ for ( let i = 0; i < anchors.length; i++ ) {
+ anchors[ i ].setAttribute( 'aria-expanded', value );
+ }
+ }
+
+ setFocusOnActiveMenuItem();
+ setAriaExpanded( 'false' );
+
+ const adminbarBlog = adminbar.querySelector( '#wp-admin-bar-blog.my-sites > a' );
+
+ // Toggle sidebar when toggle is clicked.
+ if ( adminbarBlog && ! document.body.classList.contains( 'wpcom-admin-interface' ) ) {
+ // We need to remove an event listener and attribute from the my sites button to prevent default behavior of the wp-responsive-overlay.
+ $( '#wp-admin-bar-blog.my-sites > a' ).off( 'click.wp-responsive' );
+ adminbarBlog.removeAttribute( 'aria-haspopup' );
+ // Toggle the sidebar when the 'My Sites' button is clicked in a mobile view.
+ adminbarBlog.addEventListener( 'click', toggleSidebar );
+ // Detect a click outside the sidebar and close it if its open.
+ document.addEventListener( 'click', closeSidebarWhenClickedOutside );
+ }
+
+ /**
+ *
+ * @param event
+ */
+ function closeSidebarWhenClickedOutside( event ) {
+ const isClickOnToggle = !! event.target.closest( '#wp-admin-bar-blog > a' );
+ const isClickInsideMenu = document.getElementById( 'adminmenu' ).contains( event.target );
+ const sidebarIsOpen = wpwrap.classList.contains( 'wp-responsive-open' );
+ const shouldCloseSidebar = sidebarIsOpen && ! isClickOnToggle && ! isClickInsideMenu;
+ if ( shouldCloseSidebar ) {
+ toggleSidebar( event );
+ }
+ }
+
+ /**
+ *
+ * @param event
+ */
+ function toggleSidebar( event ) {
+ // Prevent the menu toggle from being triggered when the screen is not in mobile view.
+ // This allows the toggle to function as a link to the site's dashboard the same way it works in Calypso.
+ if ( $( window ).width() > 782 ) {
+ event.stopImmediatePropagation(); // Prevent propagation to conflicting event handlers.
+ return true;
+ }
+
+ event.preventDefault();
+
+ // Remove event handlers from the original toggle as its hidden and conflicts with the new toggle.
+ $( '#wp-admin-bar-menu-toggle' ).off( 'click.wp-responsive' );
+
+ // Close any open toolbar submenus.
+ const hovers = adminbar.querySelectorAll( '.hover' );
+
+ const hoverLength = hovers.length;
+ for ( let i = 0; i < hoverLength; i++ ) {
+ hovers[ i ].classList.remove( 'hover' );
+ }
+ wpwrap.classList.toggle( 'wp-responsive-open' );
+ if ( wpwrap.classList.contains( 'wp-responsive-open' ) ) {
+ setAriaExpanded( 'true' );
+ const first = document.querySelector( '#adminmenu a' );
+ if ( first ) {
+ first.focus();
+ }
+ } else {
+ setAriaExpanded( 'false' );
+ }
+ }
+
+ if ( adminMenu ) {
+ const collapseButton = adminMenu.querySelector( '#collapse-button' );
+ // Nav-Unification feature:
+ // Saves the sidebar state in server when "Collapse menu" is clicked.
+ // This is needed so that we update WPCOM for this preference in real-time.
+ if ( collapseButton ) {
+ collapseButton.addEventListener( 'click', function ( event ) {
+ // Let's the core event listener be triggered first.
+ setTimeout( function () {
+ saveSidebarIsExpanded( event.target.parentNode.getAttribute( 'aria-expanded' ) );
+ }, 50 );
+ } );
+ }
+
+ adminMenu.addEventListener( 'click', function ( event ) {
+ if (
+ event.target.classList.contains( dismissClass ) ||
+ event.target.closest( '.' + dismissClass )
+ ) {
+ event.preventDefault();
+
+ const siteNotice = document.getElementById( 'toplevel_page_site-notices' );
+ if ( siteNotice ) {
+ siteNotice.style.display = 'none';
+ }
+
+ const jitmDismissButton = event.target;
+
+ makeAjaxRequest(
+ 'POST',
+ ajaxurl,
+ 'application/x-www-form-urlencoded; charset=UTF-8',
+ 'id=' +
+ encodeURIComponent( jitmDismissButton.dataset.feature_id ) +
+ '&feature_class=' +
+ encodeURIComponent( jitmDismissButton.dataset.feature_class ) +
+ '&action=jitm_dismiss' +
+ '&_ajax_nonce=' +
+ jetpackAdminMenu.jitmDismissNonce
+ );
+ }
+ } );
+
+ makeAjaxRequest(
+ 'GET',
+ ajaxurl + '?action=upsell_nudge_jitm&_ajax_nonce=' + jetpackAdminMenu.upsellNudgeJitm,
+ undefined,
+ null,
+ function ( xhr ) {
+ try {
+ if ( xhr.readyState === XMLHttpRequest.DONE ) {
+ if ( xhr.status === 200 && xhr.responseText ) {
+ adminMenu
+ .querySelector( '#toplevel_page_site_card' )
+ .insertAdjacentHTML( 'afterend', xhr.responseText );
+ }
+ }
+ } catch ( error ) {
+ // On failure, we just won't display an upsell nudge
+ }
+ }
+ );
+ }
+ }
+
+ /**
+ *
+ * @param method
+ * @param url
+ * @param contentType
+ * @param body
+ * @param callback
+ */
+ function makeAjaxRequest( method, url, contentType, body = null, callback = null ) {
+ const xhr = new XMLHttpRequest();
+ xhr.open( method, url, true );
+ xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
+ if ( contentType ) {
+ xhr.setRequestHeader( 'Content-Type', contentType );
+ }
+ xhr.withCredentials = true;
+ if ( callback ) {
+ xhr.onreadystatechange = function () {
+ callback( xhr );
+ };
+ }
+ xhr.send( body );
+ }
+
+ /**
+ *
+ * @param expanded
+ */
+ function saveSidebarIsExpanded( expanded ) {
+ makeAjaxRequest(
+ 'POST',
+ ajaxurl,
+ 'application/x-www-form-urlencoded; charset=UTF-8',
+ 'action=sidebar_state&expanded=' + expanded
+ );
+ }
+
+ /**
+ *
+ */
+ function setFocusOnActiveMenuItem() {
+ const currentMenuItem = document.querySelector( '.wp-submenu .current > a' );
+
+ if ( ! currentMenuItem ) {
+ return;
+ }
+
+ currentMenuItem.focus( { preventScroll: true } );
+ }
+
+ if ( document.readyState === 'loading' ) {
+ document.addEventListener( 'DOMContentLoaded', init );
+ } else {
+ init();
+ }
+} )( jQuery );
diff --git a/projects/packages/masterbar/src/admin-menu/class-admin-menu.php b/projects/packages/masterbar/src/admin-menu/class-admin-menu.php
new file mode 100644
index 0000000000000..c72faf0436ec6
--- /dev/null
+++ b/projects/packages/masterbar/src/admin-menu/class-admin-menu.php
@@ -0,0 +1,527 @@
+add_stats_menu();
+ $this->add_upgrades_menu();
+ $this->add_posts_menu();
+ $this->add_media_menu();
+ $this->add_page_menu();
+ $this->add_testimonials_menu();
+ $this->add_portfolio_menu();
+ $this->add_comments_menu();
+ $this->add_appearance_menu();
+ $this->add_plugins_menu();
+ $this->add_users_menu();
+ $this->add_tools_menu();
+ $this->add_options_menu();
+ $this->add_jetpack_menu();
+
+ // Remove Links Manager menu since its usage is discouraged. https://github.com/Automattic/wp-calypso/issues/51188.
+ // @see https://core.trac.wordpress.org/ticket/21307#comment:73.
+ if ( $this->should_disable_links_manager() ) {
+ remove_menu_page( 'link-manager.php' );
+ }
+
+ ksort( $GLOBALS['menu'] );
+ }
+
+ /**
+ * Get the preferred view for the given screen.
+ *
+ * @param string $screen Screen identifier.
+ * @param bool $fallback_global_preference (Optional) Whether the global preference for all screens should be used
+ * as fallback if there is no specific preference for the given screen.
+ * Default: true.
+ * @return string
+ */
+ public function get_preferred_view( $screen, $fallback_global_preference = true ) {
+ $force_default_view = in_array( $screen, array( 'users.php', 'options-general.php' ), true );
+ $use_wp_admin = $this->use_wp_admin_interface();
+
+ // When no preferred view has been set for "Users > All Users" or "Settings > General", keep the previous
+ // behavior that forced the default view regardless of the global preference.
+ // This behavior is overriden by the wpcom_admin_interface option when it is set to wp-admin.
+ if ( ! $use_wp_admin && $fallback_global_preference && $force_default_view ) {
+ $preferred_view = parent::get_preferred_view( $screen, false );
+ if ( self::UNKNOWN_VIEW === $preferred_view ) {
+ return self::DEFAULT_VIEW;
+ }
+ return $preferred_view;
+ }
+
+ return parent::get_preferred_view( $screen, $fallback_global_preference );
+ }
+
+ /**
+ * Check if Links Manager is being used.
+ */
+ public function should_disable_links_manager() {
+ // The max ID number of the auto-generated links.
+ // See /wp-content/mu-plugins/wpcom-wp-install-defaults.php in WP.com.
+ $max_default_id = 10;
+
+ // We are only checking the latest entry link_id so are limiting the query to 1.
+ $link_manager_links = get_bookmarks(
+ array(
+ 'orderby' => 'link_id',
+ 'order' => 'DESC',
+ 'limit' => 1,
+ 'hide_invisible' => 0,
+ )
+ );
+
+ // Ordered links by ID descending, check if the first ID is more than $max_default_id.
+ if ( is_countable( $link_manager_links ) && count( $link_manager_links ) > 0 && $link_manager_links[0]->link_id > $max_default_id ) {
+ return false;
+ }
+
+ return true;
+ }
+
+ /**
+ * Adds My Home menu.
+ */
+ public function add_my_home_menu() {
+
+ if ( self::DEFAULT_VIEW !== $this->get_preferred_view( 'index.php' ) ) {
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_menu_page( __( 'My Home', 'jetpack-masterbar' ), __( 'My Home', 'jetpack-masterbar' ), 'read', 'https://wordpress.com/home/' . $this->domain, null, 'dashicons-admin-home', 1.5 );
+ return;
+ }
+
+ $this->update_menu( 'index.php', 'https://wordpress.com/home/' . $this->domain, __( 'My Home', 'jetpack-masterbar' ), 'read', 'dashicons-admin-home' );
+ }
+
+ /**
+ * Adds My Mailboxes menu.
+ */
+ public function add_my_mailboxes_menu() {
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_menu_page( __( 'My Mailboxes', 'jetpack-masterbar' ), __( 'My Mailboxes', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/mailboxes/' . $this->domain, null, 'dashicons-email', 4.64424 );
+ }
+
+ /**
+ * Adds Stats menu.
+ */
+ public function add_stats_menu() {
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_menu_page( __( 'Stats', 'jetpack-masterbar' ), __( 'Stats', 'jetpack-masterbar' ), 'view_stats', 'https://wordpress.com/stats/day/' . $this->domain, null, 'dashicons-chart-bar', 3 );
+ }
+
+ /**
+ * Adds Upgrades menu.
+ *
+ * @param string $plan The current WPCOM plan of the blog.
+ */
+ public function add_upgrades_menu( $plan = null ) {
+ global $menu;
+
+ $menu_exists = false;
+ foreach ( $menu as $item ) {
+ if ( 'paid-upgrades.php' === $item[2] ) {
+ $menu_exists = true;
+ break;
+ }
+ }
+
+ if ( ! $menu_exists ) {
+ if ( $plan ) {
+ // Add display:none as a default for cases when CSS is not loaded.
+ $site_upgrades = '%1$s ';
+ $site_upgrades = sprintf(
+ $site_upgrades,
+ __( 'Upgrades', 'jetpack-masterbar' ),
+ // phpcs:ignore WordPress.WP.I18n.NonSingularStringLiteralText
+ __( $plan, 'jetpack-masterbar' )
+ );
+ } else {
+ $site_upgrades = __( 'Upgrades', 'jetpack-masterbar' );
+ }
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_menu_page( __( 'Upgrades', 'jetpack-masterbar' ), $site_upgrades, 'manage_options', 'paid-upgrades.php', null, 'dashicons-cart', 4 );
+ }
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'paid-upgrades.php', __( 'Plans', 'jetpack-masterbar' ), __( 'Plans', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/plans/' . $this->domain, null, 1 );
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'paid-upgrades.php', __( 'Purchases', 'jetpack-masterbar' ), __( 'Purchases', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/purchases/subscriptions/' . $this->domain, null, 2 );
+
+ if ( ! $menu_exists ) {
+ // Remove the submenu auto-created by Core.
+ $this->hide_submenu_page( 'paid-upgrades.php', 'paid-upgrades.php' );
+ }
+ }
+
+ /**
+ * Adds Posts menu.
+ */
+ public function add_posts_menu() {
+ $submenus_to_update = array();
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'edit.php' ) ) {
+ $submenus_to_update['edit.php'] = 'https://wordpress.com/posts/' . $this->domain;
+ $submenus_to_update['post-new.php'] = 'https://wordpress.com/post/' . $this->domain;
+ $this->update_submenus( 'edit.php', $submenus_to_update );
+ }
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'edit-tags.php?taxonomy=category' ) ) {
+ $this->update_submenus( 'edit.php', array( 'edit-tags.php?taxonomy=category' => 'https://wordpress.com/settings/taxonomies/category/' . $this->domain ) );
+ }
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'edit-tags.php?taxonomy=post_tag' ) ) {
+ $this->update_submenus( 'edit.php', array( 'edit-tags.php?taxonomy=post_tag' => 'https://wordpress.com/settings/taxonomies/post_tag/' . $this->domain ) );
+ }
+ }
+
+ /**
+ * Adds Media menu.
+ */
+ public function add_media_menu() {
+ if ( self::CLASSIC_VIEW === $this->get_preferred_view( 'upload.php' ) ) {
+ return;
+ }
+
+ $this->hide_submenu_page( 'upload.php', 'media-new.php' );
+
+ $this->update_menu( 'upload.php', 'https://wordpress.com/media/' . $this->domain );
+ }
+
+ /**
+ * Adds Page menu.
+ */
+ public function add_page_menu() {
+ if ( self::CLASSIC_VIEW === $this->get_preferred_view( 'edit.php?post_type=page' ) ) {
+ return;
+ }
+
+ $submenus_to_update = array(
+ 'edit.php?post_type=page' => 'https://wordpress.com/pages/' . $this->domain,
+ 'post-new.php?post_type=page' => 'https://wordpress.com/page/' . $this->domain,
+ );
+ $this->update_submenus( 'edit.php?post_type=page', $submenus_to_update );
+ }
+
+ /**
+ * Adds Testimonials menu.
+ */
+ public function add_testimonials_menu() {
+ $this->add_custom_post_type_menu( 'jetpack-testimonial' );
+ }
+
+ /**
+ * Adds Portfolio menu.
+ */
+ public function add_portfolio_menu() {
+ $this->add_custom_post_type_menu( 'jetpack-portfolio' );
+ }
+
+ /**
+ * Adds a custom post type menu.
+ *
+ * @param string $post_type Custom post type.
+ */
+ public function add_custom_post_type_menu( $post_type ) {
+ if ( self::CLASSIC_VIEW === $this->get_preferred_view( 'edit.php?post_type=' . $post_type ) ) {
+ return;
+ }
+
+ $submenus_to_update = array(
+ 'edit.php?post_type=' . $post_type => 'https://wordpress.com/types/' . $post_type . '/' . $this->domain,
+ 'post-new.php?post_type=' . $post_type => 'https://wordpress.com/edit/' . $post_type . '/' . $this->domain,
+ );
+ $this->update_submenus( 'edit.php?post_type=' . $post_type, $submenus_to_update );
+ }
+
+ /**
+ * Adds Comments menu.
+ */
+ public function add_comments_menu() {
+ if ( self::CLASSIC_VIEW === $this->get_preferred_view( 'edit-comments.php' ) ) {
+ return;
+ }
+
+ $this->update_menu( 'edit-comments.php', 'https://wordpress.com/comments/all/' . $this->domain );
+ }
+
+ /**
+ * Adds Appearance menu.
+ *
+ * @return string The Customizer URL.
+ */
+ public function add_appearance_menu() {
+ $request_uri = isset( $_SERVER['REQUEST_URI'] ) ? esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ) : '';
+ $default_customize_slug = add_query_arg( 'return', rawurlencode( remove_query_arg( wp_removable_query_args(), $request_uri ) ), 'customize.php' );
+ $default_customize_header_slug_1 = add_query_arg( array( 'autofocus' => array( 'control' => 'header_image' ) ), $default_customize_slug );
+ // TODO: Remove WPCom_Theme_Customizer::modify_header_menu_links() and WPcom_Custom_Header::modify_admin_menu_links().
+ $default_customize_header_slug_2 = admin_url( 'themes.php?page=custom-header' );
+ $default_customize_background_slug_1 = add_query_arg( array( 'autofocus' => array( 'control' => 'background_image' ) ), $default_customize_slug );
+ // TODO: Remove Colors_Manager::modify_header_menu_links() and Colors_Manager_Common::modify_header_menu_links().
+ $default_customize_background_slug_2 = add_query_arg( array( 'autofocus' => array( 'section' => 'colors_manager_tool' ) ), admin_url( 'customize.php' ) );
+
+ if ( $this->is_api_request ) {
+ // In case this is an api request we will have to add the 'return' querystring via JS.
+ $customize_url = 'customize.php';
+ } else {
+ $customize_url = $default_customize_slug;
+ }
+
+ $submenus_to_update = array(
+ $default_customize_slug => $customize_url,
+ $default_customize_header_slug_1 => add_query_arg( array( 'autofocus' => array( 'control' => 'header_image' ) ), $customize_url ),
+ $default_customize_header_slug_2 => add_query_arg( array( 'autofocus' => array( 'control' => 'header_image' ) ), $customize_url ),
+ $default_customize_background_slug_1 => add_query_arg( array( 'autofocus' => array( 'section' => 'colors_manager_tool' ) ), $customize_url ),
+ $default_customize_background_slug_2 => add_query_arg( array( 'autofocus' => array( 'section' => 'colors_manager_tool' ) ), $customize_url ),
+ );
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'themes.php' ) ) {
+ $submenus_to_update['themes.php'] = 'https://wordpress.com/themes/' . $this->domain;
+ }
+
+ $this->update_submenus( 'themes.php', $submenus_to_update );
+
+ $this->hide_submenu_page( 'themes.php', 'custom-header' );
+ $this->hide_submenu_page( 'themes.php', 'custom-background' );
+
+ return $customize_url;
+ }
+
+ /**
+ * Adds Plugins menu.
+ */
+ public function add_plugins_menu() {
+ if ( self::CLASSIC_VIEW === $this->get_preferred_view( 'plugins.php' ) ) {
+ return;
+ }
+ $this->hide_submenu_page( 'plugins.php', 'plugin-install.php' );
+ $this->hide_submenu_page( 'plugins.php', 'plugin-editor.php' );
+
+ $this->update_menu( 'plugins.php', 'https://wordpress.com/plugins/' . $this->domain );
+ }
+
+ /**
+ * Adds Users menu.
+ */
+ public function add_users_menu() {
+ $submenus_to_update = array(
+ 'profile.php' => 'https://wordpress.com/me',
+ );
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'users.php' ) ) {
+ $submenus_to_update['users.php'] = 'https://wordpress.com/people/team/' . $this->domain;
+ $submenus_to_update['user-new.php'] = 'https://wordpress.com/people/new/' . $this->domain;
+ }
+
+ $slug = current_user_can( 'list_users' ) ? 'users.php' : 'profile.php';
+ $this->update_submenus( $slug, $submenus_to_update );
+ add_submenu_page( $slug, esc_attr__( 'Account Settings', 'jetpack-masterbar' ), __( 'Account Settings', 'jetpack-masterbar' ), 'read', 'https://wordpress.com/me/account' );
+ }
+
+ /**
+ * Adds Tools menu.
+ */
+ public function add_tools_menu() {
+ $submenus_to_update = array();
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'import.php' ) ) {
+ $submenus_to_update['import.php'] = 'https://wordpress.com/import/' . $this->domain;
+ }
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'export.php' ) ) {
+ $submenus_to_update['export.php'] = 'https://wordpress.com/export/' . $this->domain;
+ }
+ $this->update_submenus( 'tools.php', $submenus_to_update );
+
+ $this->hide_submenu_page( 'tools.php', 'tools.php' );
+ $this->hide_submenu_page( 'tools.php', 'delete-blog' );
+
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'tools.php', esc_attr__( 'Marketing', 'jetpack-masterbar' ), __( 'Marketing', 'jetpack-masterbar' ), 'publish_posts', 'https://wordpress.com/marketing/tools/' . $this->domain, null, 0 );
+ if ( ! $this->use_wp_admin_interface() ) {
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'tools.php', esc_attr__( 'Monetize', 'jetpack-masterbar' ), __( 'Monetize', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/earn/' . $this->domain, null, 1 );
+ }
+ }
+
+ /**
+ * Adds Settings menu.
+ */
+ public function add_options_menu() {
+ $submenus_to_update = array();
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'options-general.php' ) ) {
+ $this->hide_submenu_page( 'options-general.php', 'sharing' );
+ }
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'options-general.php' ) ) {
+ $submenus_to_update['options-general.php'] = 'https://wordpress.com/settings/general/' . $this->domain;
+ }
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'options-writing.php' ) ) {
+ $submenus_to_update['options-writing.php'] = 'https://wordpress.com/settings/writing/' . $this->domain;
+ }
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'options-reading.php' )
+ ) {
+ $submenus_to_update['options-reading.php'] = 'https://wordpress.com/settings/reading/' . $this->domain;
+ }
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'options-discussion.php' ) ) {
+ $submenus_to_update['options-discussion.php'] = 'https://wordpress.com/settings/discussion/' . $this->domain;
+ }
+
+ $this->update_submenus( 'options-general.php', $submenus_to_update );
+
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'options-general.php', esc_attr__( 'Newsletter', 'jetpack-masterbar' ), __( 'Newsletter', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/settings/newsletter/' . $this->domain, null, 7 );
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'options-general.php', esc_attr__( 'Podcasting', 'jetpack-masterbar' ), __( 'Podcasting', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/settings/podcasting/' . $this->domain, null, 8 );
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'options-general.php', esc_attr__( 'Performance', 'jetpack-masterbar' ), __( 'Performance', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/settings/performance/' . $this->domain, null, 9 );
+ }
+
+ /**
+ * Create Jetpack menu.
+ *
+ * @param int $position Menu position.
+ * @param bool $separator Whether to add a separator before the menu.
+ */
+ public function create_jetpack_menu( $position = 50, $separator = true ) {
+ if ( $separator ) {
+ $this->add_admin_menu_separator( $position, 'manage_options' );
+ ++$position;
+ }
+
+ $icon = ( new Logo() )->get_base64_logo();
+ $is_menu_updated = $this->update_menu( 'jetpack', null, null, null, $icon, $position );
+ if ( ! $is_menu_updated ) {
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_menu_page( esc_attr__( 'Jetpack', 'jetpack-masterbar' ), __( 'Jetpack', 'jetpack-masterbar' ), 'manage_options', 'jetpack', null, $icon, $position );
+ }
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'jetpack', esc_attr__( 'Activity Log', 'jetpack-masterbar' ), __( 'Activity Log', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/activity-log/' . $this->domain, null, 2 );
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_submenu_page( 'jetpack', esc_attr__( 'Backup', 'jetpack-masterbar' ), __( 'Backup', 'jetpack-masterbar' ), 'manage_options', 'https://wordpress.com/backup/' . $this->domain, null, 3 );
+
+ if ( self::DEFAULT_VIEW === $this->get_preferred_view( 'jetpack' ) ) {
+ $this->hide_submenu_page( 'jetpack', 'jetpack#/settings' );
+ $this->hide_submenu_page( 'jetpack', 'stats' );
+ $this->hide_submenu_page( 'jetpack', esc_url( Redirect::get_url( 'calypso-backups' ) ) );
+ $this->hide_submenu_page( 'jetpack', esc_url( Redirect::get_url( 'calypso-scanner' ) ) );
+ }
+
+ if ( ! $is_menu_updated ) {
+ // Remove the submenu auto-created by Core just to be sure that there no issues on non-admin roles.
+ remove_submenu_page( 'jetpack', 'jetpack' );
+ }
+ }
+
+ /**
+ * Adds Jetpack menu.
+ */
+ public function add_jetpack_menu() {
+ $this->create_jetpack_menu();
+ }
+
+ /**
+ * Add the calypso /woocommerce-installation/ menu item.
+ *
+ * @param array $current_plan The site's plan if they have one. This is passed from WPcom_Admin_Menu to prevent
+ * redundant database queries.
+ */
+ public function add_woocommerce_installation_menu( $current_plan = null ) {
+ /**
+ * Whether to show the WordPress.com WooCommerce Installation menu.
+ *
+ * @use add_filter( 'jetpack_show_wpcom_woocommerce_installation_menu', '__return_true' );
+ * @module masterbar
+ * @since jetpack-10.3.0
+ * @param bool $jetpack_show_wpcom_woocommerce_installation_menu Load the WordPress.com WooCommerce Installation menu item. Default to false.
+ * @param array $current_plan Data about the current site's plan.
+ */
+ if ( apply_filters( 'jetpack_show_wpcom_woocommerce_installation_menu', false, $current_plan ) ) {
+ $this->add_admin_menu_separator( 54, 'activate_plugins' );
+
+ $icon_url = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGZpbGw9IiNhMmFhYjIiIGQ9Ik02MTIuMTkyIDQyNi4zMzZjMC02Ljg5Ni0zLjEzNi01MS42LTI4LTUxLjYtMzcuMzYgMC00Ni43MDQgNzIuMjU2LTQ2LjcwNCA4Mi42MjQgMCAzLjQwOCAzLjE1MiA1OC40OTYgMjguMDMyIDU4LjQ5NiAzNC4xOTItLjAzMiA0Ni42NzItNzIuMjg4IDQ2LjY3Mi04OS41MnptMjAyLjE5MiAwYzAtNi44OTYtMy4xNTItNTEuNi0yOC4wMzItNTEuNi0zNy4yOCAwLTQ2LjYwOCA3Mi4yNTYtNDYuNjA4IDgyLjYyNCAwIDMuNDA4IDMuMDcyIDU4LjQ5NiAyNy45NTIgNTguNDk2IDM0LjE5Mi0uMDMyIDQ2LjY4OC03Mi4yODggNDYuNjg4LTg5LjUyek0xNDEuMjk2Ljc2OGMtNjguMjI0IDAtMTIzLjUwNCA1NS40ODgtMTIzLjUwNCAxMjMuOTJ2NjUwLjcyYzAgNjguNDMyIDU1LjI5NiAxMjMuOTIgMTIzLjUwNCAxMjMuOTJoMzM5LjgwOGwxMjMuNTA0IDEyMy45MzZWODk5LjMyOGgyNzguMDQ4YzY4LjIyNCAwIDEyMy41Mi01NS40NzIgMTIzLjUyLTEyMy45MnYtNjUwLjcyYzAtNjguNDMyLTU1LjI5Ni0xMjMuOTItMTIzLjUyLTEyMy45MmgtNzQxLjM2em01MjYuODY0IDQyMi4xNmMwIDU1LjA4OC0zMS4wODggMTU0Ljg4LTEwMi42NCAxNTQuODgtNi4yMDggMC0xOC40OTYtMy42MTYtMjUuNDI0LTYuMDE2LTMyLjUxMi0xMS4xNjgtNTAuMTkyLTQ5LjY5Ni01Mi4zNTItNjYuMjU2IDAgMC0zLjA3Mi0xNy43OTItMy4wNzItNDAuNzUyIDAtMjIuOTkyIDMuMDcyLTQ1LjMyOCAzLjA3Mi00NS4zMjggMTUuNTUyLTc1LjcyOCA0My41NTItMTA2LjczNiA5Ni40NDgtMTA2LjczNiA1OS4wNzItLjAzMiA4My45NjggNTguNTI4IDgzLjk2OCAxMTAuMjA4ek00ODYuNDk2IDMwMi40YzAgMy4zOTItNDMuNTUyIDE0MS4xNjgtNDMuNTUyIDIxMy40MjR2NzUuNzEyYy0yLjU5MiAxMi4wOC00LjE2IDI0LjE0NC0yMS44MjQgMjQuMTQ0LTQ2LjYwOCAwLTg4Ljg4LTE1MS40NzItOTIuMDE2LTE2MS44NC02LjIwOCA2Ljg5Ni02Mi4yNCAxNjEuODQtOTYuNDQ4IDE2MS44NC0yNC44NjQgMC00My41NTItMTEzLjY0OC00Ni42MDgtMTIzLjkzNkMxNzYuNzA0IDQzNi42NzIgMTYwIDMzNC4yMjQgMTYwIDMyNy4zMjhjMC0yMC42NzIgMS4xNTItMzguNzM2IDI2LjA0OC0zOC43MzYgNi4yMDggMCAyMS42IDYuMDY0IDIzLjcxMiAxNy4xNjggMTEuNjQ4IDYyLjAzMiAxNi42ODggMTIwLjUxMiAyOS4xNjggMTg1Ljk2OCAxLjg1NiAyLjkyOCAxLjUwNCA3LjAwOCA0LjU2IDEwLjQzMiAzLjE1Mi0xMC4yODggNjYuOTI4LTE2OC43ODQgOTQuOTYtMTY4Ljc4NCAyMi41NDQgMCAzMC40IDQ0LjU5MiAzMy41MzYgNjEuODI0IDYuMjA4IDIwLjY1NiAxMy4wODggNTUuMjE2IDIyLjQxNiA4Mi43NTIgMC0xMy43NzYgMTIuNDgtMjAzLjEyIDY1LjM5Mi0yMDMuMTIgMTguNTkyLjAzMiAyNi43MDQgNi45MjggMjYuNzA0IDI3LjU2OHpNODcwLjMyIDQyMi45MjhjMCA1NS4wODgtMzEuMDg4IDE1NC44OC0xMDIuNjQgMTU0Ljg4LTYuMTkyIDAtMTguNDQ4LTMuNjE2LTI1LjQyNC02LjAxNi0zMi40MzItMTEuMTY4LTUwLjE3Ni00OS42OTYtNTIuMjg4LTY2LjI1NiAwIDAtMy44ODgtMTcuOTItMy44ODgtNDAuODk2czMuODg4LTQ1LjE4NCAzLjg4OC00NS4xODRjMTUuNTUyLTc1LjcyOCA0My40ODgtMTA2LjczNiA5Ni4zODQtMTA2LjczNiA1OS4xMDQtLjAzMiA4My45NjggNTguNTI4IDgzLjk2OCAxMTAuMjA4eiIvPjwvc3ZnPg==';
+ $menu_url = 'https://wordpress.com/woocommerce-installation/' . $this->domain;
+
+ // Only show the menu if the user has the capability to activate_plugins.
+ // @phan-suppress-next-line PhanTypeMismatchArgumentProbablyReal -- Core should ideally document null for no-callback arg. TODO add link with Trac issue.
+ add_menu_page( esc_attr__( 'WooCommerce', 'jetpack-masterbar' ), esc_attr__( 'WooCommerce', 'jetpack-masterbar' ), 'activate_plugins', $menu_url, null, $icon_url, 55 );
+ }
+ }
+
+ /**
+ * AJAX handler for retrieving the upsell nudge.
+ */
+ public function wp_ajax_upsell_nudge_jitm() {
+ check_ajax_referer( 'upsell_nudge_jitm' );
+
+ $nudge = $this->get_upsell_nudge();
+ if ( ! $nudge ) {
+ wp_die();
+ }
+
+ $link = $nudge['link'];
+ if ( str_starts_with( $link, '/' ) ) {
+ $link = 'https://wordpress.com' . $link;
+ }
+ ?>
+