Repository: Automattic/wp-calypso
Pull request #99580: Update Color Studio 4.1.0, alt PR
Author: login: jasmussen
Labels: name: Enhancement
description: Changes to an existing feature — removing, adding, or changing parts of it
name: Lego Maintenance
Created: 2025-02-11T09:37:31Z | Merged: 2025-03-12T06:21:45Z

Fixes https://github.com/Automattic/wp-calypso/issues/100415
Fixes https://github.com/Automattic/wp-calypso/issues/100432
Fixes https://github.com/Automattic/wp-calypso/issues/100428
Fixes https://github.com/Automattic/wp-calypso/issues/100421

Alternative to #99033


This is a rebased version with some additional changes.

## Proposed Changes

The proposed notes in https://github.com/Automattic/wp-calypso/pull/99033 are relevant here as well. However with the addition of an effort to address [this](https://github.com/Automattic/wp-calypso/pull/99033#issuecomment-2627519591), so it hardcodes classic (aka "fresh" or "default") color values for the WordPress old color scheme. This is so that the colors are actually accurate, once the wp.com default changes to Blueberry.

## Testing Instructions

We will need to extensively test all areas where $studio-blue variables are used in the UI to ensure this change doesn’t have unintended consequences for aesthetics or accessibility.

We should also check instances where $studio-woocommerce-purple is used as this palette also changed in a previous release that was not adopted in Calypso yet.

Checkout this branch.
Run yarn to install the update version of color-studio.
Run yarn start to start Calypso locally
Navigate to http://calypso.localhost:3000/
Check that assets compile correctly
Check instances where $studio-blue and $studio-woocommerce-purple variables are used to ensure proper contrast and aesthetics are maintained

## Pre-merge Checklist

<!--
Complete applicable items on this checklist **before** merging into trunk. Inapplicable items can be left unchecked.

Both the PR author and reviewer are responsible for ensuring the checklist is completed.
-->

- [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
- [ ] [Have you written new tests](https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md) for your changes?
- [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
- [ ] Have you checked for TypeScript, React or other console errors?
- [ ] Have you used memoizing on expensive computations? More info in [Memoizing with create-selector](https://github.com/Automattic/wp-calypso/blob/trunk/packages/state-utils/src/create-selector/README.md) and [Using memoizing selectors](https://react-redux.js.org/api/hooks#using-memoizing-selectors) and [Our Approach to Data](https://github.com/Automattic/wp-calypso/blob/trunk/docs/our-approach-to-data.md)
- [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    - [ ] For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages. 
- [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?



Diff:
diff --git a/apps/happy-blocks/package.json b/apps/happy-blocks/package.json
index 3a6b459dd545..b5f65f454c7b 100644
--- a/apps/happy-blocks/package.json
+++ b/apps/happy-blocks/package.json
@@ -28,7 +28,7 @@
 		"@automattic/calypso-build": "workspace:^",
 		"@automattic/calypso-config": "workspace:^",
 		"@automattic/calypso-products": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/components": "workspace:^",
 		"@automattic/typography": "workspace:^",
 		"@automattic/wp-babel-makepot": "workspace:^",
diff --git a/client/my-sites/sidebar/style.scss b/client/my-sites/sidebar/style.scss
index a4c7deca8b8e..d473bd0d388f 100644
--- a/client/my-sites/sidebar/style.scss
+++ b/client/my-sites/sidebar/style.scss
@@ -12,29 +12,6 @@ $brand-text: "SF Pro Text", $sans;
 	--sidebar-width-max: 272px;
 	--sidebar-width-min: 272px;
 
-	--color-sidebar-background: #23282d;
-	--color-sidebar-background-rgb: 35, 40, 45;
-	--color-sidebar-menu-hover-background: #1a1e23;
-	--color-sidebar-menu-hover-background-rgb: rgb(var(--color-sidebar-menu-hover-background));
-	--color-sidebar-menu-hover-text: #00b9eb;
-	--color-sidebar-menu-selected-background: #0073aa;
-	--color-sidebar-menu-selected-text: var(--color-text-inverted);
-	--color-sidebar-border: #333;
-	--color-sidebar-text: #eee;
-	--color-sidebar-text-rgb: 238, 238, 238;
-	--color-sidebar-text-alternative: #a2aab2;
-	--color-sidebar-gridicon-fill: #a2aab2;
-	--color-sidebar-gridicon-hover-fill: #00b9eb;
-	--color-sidebar-gridicon-selected-fill: #00b9eb;
-	--color-sidebar-notice-background: #3c434a;
-
-	--color-sidebar-submenu-background: #32373c;
-	--color-sidebar-submenu-text: #b4b9be;
-	--color-sidebar-submenu-hover-background: transparent;
-	--color-sidebar-submenu-hover-text: #00b9eb;
-	--color-sidebar-submenu-selected-background: transparent;
-	--color-sidebar-submenu-selected-text: var(--color-text-inverted);
-
 	.is-global-sidebar-visible {
 		--sidebar-width-max: 295px;
 		--sidebar-width-min: 295px;
@@ -949,7 +926,7 @@ $font-size: rem(14px);
 		.sidebar__menu .components-button.has-icon {
 			padding: 0 0 0 6px;
 		}
-		
+
 		.sidebar__menu .count {
 			background: transparent;
 			color: var(--color-sidebar-menu-text);
diff --git a/client/package.json b/client/package.json
index 1a83a78a300b..3282074d071b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -28,7 +28,7 @@
 		"@automattic/calypso-sentry": "workspace:^",
 		"@automattic/calypso-stripe": "workspace:^",
 		"@automattic/calypso-url": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/command-palette": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/composite-checkout": "workspace:^",
diff --git a/package.json b/package.json
index ac389f036c81..62852734dc58 100644
--- a/package.json
+++ b/package.json
@@ -150,7 +150,7 @@
 		"@automattic/calypso-razorpay": "workspace:^",
 		"@automattic/calypso-router": "workspace:^",
 		"@automattic/charts": "^0.9.0",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/command-palette": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/data-stores": "workspace:^",
diff --git a/packages/calypso-color-schemes/package.json b/packages/calypso-color-schemes/package.json
index 5fe37c306c1f..05f7132dd5e8 100644
--- a/packages/calypso-color-schemes/package.json
+++ b/packages/calypso-color-schemes/package.json
@@ -28,7 +28,7 @@
 	"devDependencies": {
 		"@automattic/calypso-eslint-overrides": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@types/node": "^22.10.10",
 		"postcss": "^8.5.1",
 		"postcss-custom-properties": "^11.0.0",
diff --git a/packages/calypso-color-schemes/src/shared/_colors.scss b/packages/calypso-color-schemes/src/shared/_colors.scss
index 8ac4d18ef6ff..ed0ad9669289 100644
--- a/packages/calypso-color-schemes/src/shared/_colors.scss
+++ b/packages/calypso-color-schemes/src/shared/_colors.scss
@@ -1,2 +1,33 @@
 @import "../__color-studio/color-properties";
 @import "../__color-studio/color-properties-rgb";
+
+// Legacy blue values were taken from https://github.com/Automattic/color-studio/pull/764/
+:root {
+	--color-deprecated-blue-0: #e9f0f5;
+	--color-deprecated-blue-5: #bbe0fa;
+	--color-deprecated-blue-10: #91caf2;
+	--color-deprecated-blue-20: #68b3e8;
+	--color-deprecated-blue-30: #399ce3;
+	--color-deprecated-blue-40: #1689db;
+	--color-deprecated-blue-50: #0675c4;
+	--color-deprecated-blue-60: #055d9c;
+	--color-deprecated-blue-70: #044b7a;
+	--color-deprecated-blue-80: #02395c;
+	--color-deprecated-blue-90: #01283d;
+	--color-deprecated-blue-100: #001621;
+	--color-deprecated-blue: #0675c4;
+
+	--color-deprecated-blue-0-rgb: 233, 240, 245;
+	--color-deprecated-blue-5-rgb: 187, 224, 250;
+	--color-deprecated-blue-10-rgb: 145, 202, 242;
+	--color-deprecated-blue-20-rgb: 104, 179, 232;
+	--color-deprecated-blue-30-rgb: 57, 156, 227;
+	--color-deprecated-blue-40-rgb: 22, 137, 219;
+	--color-deprecated-blue-50-rgb: 6, 117, 196;
+	--color-deprecated-blue-60-rgb: 5, 93, 156;
+	--color-deprecated-blue-70-rgb: 4, 75, 122;
+	--color-deprecated-blue-80-rgb: 2, 57, 92;
+	--color-deprecated-blue-90-rgb: 1, 40, 61;
+	--color-deprecated-blue-100-rgb: 0, 22, 33;
+	--color-deprecated-blue-rgb: 6, 117, 196;
+}
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss
index 2cfe8c6374ec..c71869842b93 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss
@@ -1,35 +1,35 @@
 .color-scheme.is-aquatic {
 	/* Theme Properties */
-	--color-primary: var(--studio-blue-50);
-	--color-primary-rgb: var(--studio-blue-50-rgb);
-	--color-primary-dark: var(--studio-blue-70);
-	--color-primary-dark-rgb: var(--studio-blue-70-rgb);
-	--color-primary-light: var(--studio-blue-30);
-	--color-primary-light-rgb: var(--studio-blue-30-rgb);
-	--color-primary-0: var(--studio-blue-0);
-	--color-primary-0-rgb: var(--studio-blue-0-rgb);
-	--color-primary-5: var(--studio-blue-5);
-	--color-primary-5-rgb: var(--studio-blue-5-rgb);
-	--color-primary-10: var(--studio-blue-10);
-	--color-primary-10-rgb: var(--studio-blue-10-rgb);
-	--color-primary-20: var(--studio-blue-20);
-	--color-primary-20-rgb: var(--studio-blue-20-rgb);
-	--color-primary-30: var(--studio-blue-30);
-	--color-primary-30-rgb: var(--studio-blue-30-rgb);
-	--color-primary-40: var(--studio-blue-40);
-	--color-primary-40-rgb: var(--studio-blue-40-rgb);
-	--color-primary-50: var(--studio-blue-50);
-	--color-primary-50-rgb: var(--studio-blue-50-rgb);
-	--color-primary-60: var(--studio-blue-60);
-	--color-primary-60-rgb: var(--studio-blue-60-rgb);
-	--color-primary-70: var(--studio-blue-70);
-	--color-primary-70-rgb: var(--studio-blue-70-rgb);
-	--color-primary-80: var(--studio-blue-80);
-	--color-primary-80-rgb: var(--studio-blue-80-rgb);
-	--color-primary-90: var(--studio-blue-90);
-	--color-primary-90-rgb: var(--studio-blue-90-rgb);
-	--color-primary-100: var(--studio-blue-100);
-	--color-primary-100-rgb: var(--studio-blue-100-rgb);
+	--color-primary: var(--color-deprecated-blue-50);
+	--color-primary-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-dark: var(--color-deprecated-blue-70);
+	--color-primary-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-light: var(--color-deprecated-blue-30);
+	--color-primary-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-0: var(--color-deprecated-blue-0);
+	--color-primary-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-primary-5: var(--color-deprecated-blue-5);
+	--color-primary-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-primary-10: var(--color-deprecated-blue-10);
+	--color-primary-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-primary-20: var(--color-deprecated-blue-20);
+	--color-primary-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-primary-30: var(--color-deprecated-blue-30);
+	--color-primary-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-40: var(--color-deprecated-blue-40);
+	--color-primary-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-primary-50: var(--color-deprecated-blue-50);
+	--color-primary-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-60: var(--color-deprecated-blue-60);
+	--color-primary-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-primary-70: var(--color-deprecated-blue-70);
+	--color-primary-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-80: var(--color-deprecated-blue-80);
+	--color-primary-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-primary-90: var(--color-deprecated-blue-90);
+	--color-primary-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-primary-100: var(--color-deprecated-blue-100);
+	--color-primary-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	--color-accent: var(--studio-celadon-50);
 	--color-accent-rgb: var(--studio-celadon-50-rgb);
@@ -94,13 +94,13 @@
 	--color-link-100-rgb: var(--studio-celadon-100-rgb);
 
 	/* Component Properties */
-	--color-masterbar-background: var(--studio-blue-80);
-	--color-masterbar-border: var(--studio-blue-80);
+	--color-masterbar-background: var(--color-deprecated-blue-80);
+	--color-masterbar-border: var(--color-deprecated-blue-80);
 	--color-masterbar-text: var(--studio-white);
 	--color-masterbar-icon: var(--studio-white);
 	--color-masterbar-highlight: var(--studio-yellow-20);
-	--color-masterbar-item-hover-background: var(--studio-blue-90);
-	--color-masterbar-item-active-background: var(--studio-blue-100);
+	--color-masterbar-item-hover-background: var(--color-deprecated-blue-90);
+	--color-masterbar-item-active-background: var(--color-deprecated-blue-100);
 	--color-masterbar-item-new-editor-background: var(--studio-gray-50);
 	--color-masterbar-item-new-editor-hover-background: var(--studio-gray-60);
 	--color-masterbar-unread-dot-background: var(--color-accent-30);
@@ -108,28 +108,28 @@
 	--color-masterbar-toggle-drafts-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-toggle-drafts-editor-border: var(--studio-gray-10);
 
-	--color-sidebar-background: var(--studio-blue-60);
-	--color-sidebar-background-rgb: var(--studio-blue-60-rgb);
-	--color-sidebar-border: var(--studio-blue-70);
+	--color-sidebar-background: var(--color-deprecated-blue-60);
+	--color-sidebar-background-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-sidebar-border: var(--color-deprecated-blue-70);
 	--color-sidebar-text: var(--studio-white);
 	--color-sidebar-text-rgb: var(--studio-white-rgb);
-	--color-sidebar-text-alternative: var(--studio-blue-5);
-	--color-sidebar-gridicon-fill: var(--studio-blue-5);
+	--color-sidebar-text-alternative: var(--color-deprecated-blue-5);
+	--color-sidebar-gridicon-fill: var(--color-deprecated-blue-5);
 	--color-sidebar-menu-selected-background: var(--studio-yellow-20);
 	--color-sidebar-menu-selected-background-rgb: var(--studio-yellow-20-rgb);
-	--color-sidebar-menu-selected-text: var(--studio-blue-90);
-	--color-sidebar-menu-selected-text-rgb: var(--studio-blue-90-rgb);
-	--color-sidebar-menu-hover-background: var(--studio-blue-50);
-	--color-sidebar-menu-hover-background-rgb: var(--studio-blue-50-rgb);
+	--color-sidebar-menu-selected-text: var(--color-deprecated-blue-90);
+	--color-sidebar-menu-selected-text-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-sidebar-menu-hover-background: var(--color-deprecated-blue-50);
+	--color-sidebar-menu-hover-background-rgb: var(--color-deprecated-blue-50-rgb);
 	--color-sidebar-menu-hover-text: var(--studio-white);
 
 	/* Sidebar Submenu - Nav Unification */
-	--color-sidebar-submenu-background: var(--studio-blue-80);
+	--color-sidebar-submenu-background: var(--color-deprecated-blue-80);
 	--color-sidebar-submenu-text: var(--studio-white);
 	--color-sidebar-submenu-hover-text: var(--studio-yellow-20);
 
 	/* Sidebar Menu - Nav Redesign */
-	--color-navredesign-sidebar-menu-selected-text: var(--studio-blue-90);
+	--color-navredesign-sidebar-menu-selected-text: var(--color-deprecated-blue-90);
 
 	/* Sidebar Submenu - Nav Redesign */
 	--color-navredesign-sidebar-submenu-text: var(--color-sidebar-submenu-text);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_blue.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_blue.scss
index 88b0f34b730a..143b82f2c638 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_blue.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_blue.scss
@@ -38,66 +38,98 @@ Used studio-blue for the primary+accent.
 	/* Primary */
 	--color-primary: var(--theme-highlight-color);
 	--color-primary-rgb: var(--theme-highlight-color-rgb);
-	--color-primary-dark: var(--studio-blue-70);
-	--color-primary-dark-rgb: var(--studio-blue-70-rgb);
-	--color-primary-light: var(--studio-blue-30);
-	--color-primary-light-rgb: var(--studio-blue-30-rgb);
-	--color-primary-0: var(--studio-blue-0);
-	--color-primary-0-rgb: var(--studio-blue-0-rgb);
-	--color-primary-5: var(--studio-blue-5);
-	--color-primary-5-rgb: var(--studio-blue-5-rgb);
-	--color-primary-10: var(--studio-blue-10);
-	--color-primary-10-rgb: var(--studio-blue-10-rgb);
-	--color-primary-20: var(--studio-blue-20);
-	--color-primary-20-rgb: var(--studio-blue-20-rgb);
-	--color-primary-30: var(--studio-blue-30);
-	--color-primary-30-rgb: var(--studio-blue-30-rgb);
-	--color-primary-40: var(--studio-blue-40);
-	--color-primary-40-rgb: var(--studio-blue-40-rgb);
-	--color-primary-50: var(--studio-blue-50);
-	--color-primary-50-rgb: var(--studio-blue-50-rgb);
-	--color-primary-60: var(--studio-blue-60);
-	--color-primary-60-rgb: var(--studio-blue-60-rgb);
-	--color-primary-70: var(--studio-blue-70);
-	--color-primary-70-rgb: var(--studio-blue-70-rgb);
-	--color-primary-80: var(--studio-blue-80);
-	--color-primary-80-rgb: var(--studio-blue-80-rgb);
-	--color-primary-90: var(--studio-blue-90);
-	--color-primary-90-rgb: var(--studio-blue-90-rgb);
-	--color-primary-100: var(--studio-blue-100);
-	--color-primary-100-rgb: var(--studio-blue-100-rgb);
+	--color-primary-dark: var(--color-deprecated-blue-70);
+	--color-primary-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-light: var(--color-deprecated-blue-30);
+	--color-primary-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-0: var(--color-deprecated-blue-0);
+	--color-primary-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-primary-5: var(--color-deprecated-blue-5);
+	--color-primary-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-primary-10: var(--color-deprecated-blue-10);
+	--color-primary-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-primary-20: var(--color-deprecated-blue-20);
+	--color-primary-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-primary-30: var(--color-deprecated-blue-30);
+	--color-primary-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-40: var(--color-deprecated-blue-40);
+	--color-primary-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-primary-50: var(--color-deprecated-blue-50);
+	--color-primary-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-60: var(--color-deprecated-blue-60);
+	--color-primary-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-primary-70: var(--color-deprecated-blue-70);
+	--color-primary-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-80: var(--color-deprecated-blue-80);
+	--color-primary-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-primary-90: var(--color-deprecated-blue-90);
+	--color-primary-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-primary-100: var(--color-deprecated-blue-100);
+	--color-primary-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Accent */
 	--color-accent: var(--theme-highlight-color);
 	--color-accent-rgb: var(--theme-highlight-color-rgb);
-	--color-accent-dark: var(--studio-blue-70);
-	--color-accent-dark-rgb: var(--studio-blue-70-rgb);
-	--color-accent-light: var(--studio-blue-30);
-	--color-accent-light-rgb: var(--studio-blue-30-rgb);
-	--color-accent-0: var(--studio-blue-0);
-	--color-accent-0-rgb: var(--studio-blue-0-rgb);
-	--color-accent-5: var(--studio-blue-5);
-	--color-accent-5-rgb: var(--studio-blue-5-rgb);
-	--color-accent-10: var(--studio-blue-10);
-	--color-accent-10-rgb: var(--studio-blue-10-rgb);
-	--color-accent-20: var(--studio-blue-20);
-	--color-accent-20-rgb: var(--studio-blue-20-rgb);
-	--color-accent-30: var(--studio-blue-30);
-	--color-accent-30-rgb: var(--studio-blue-30-rgb);
-	--color-accent-40: var(--studio-blue-40);
-	--color-accent-40-rgb: var(--studio-blue-40-rgb);
-	--color-accent-50: var(--studio-blue-50);
-	--color-accent-50-rgb: var(--studio-blue-50-rgb);
-	--color-accent-60: var(--studio-blue-60);
-	--color-accent-60-rgb: var(--studio-blue-60-rgb);
-	--color-accent-70: var(--studio-blue-70);
-	--color-accent-70-rgb: var(--studio-blue-70-rgb);
-	--color-accent-80: var(--studio-blue-80);
-	--color-accent-80-rgb: var(--studio-blue-80-rgb);
-	--color-accent-90: var(--studio-blue-90);
-	--color-accent-90-rgb: var(--studio-blue-90-rgb);
-	--color-accent-100: var(--studio-blue-100);
-	--color-accent-100-rgb: var(--studio-blue-100-rgb);
+	--color-accent-dark: var(--color-deprecated-blue-70);
+	--color-accent-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-light: var(--color-deprecated-blue-30);
+	--color-accent-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-0: var(--color-deprecated-blue-0);
+	--color-accent-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-accent-5: var(--color-deprecated-blue-5);
+	--color-accent-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-accent-10: var(--color-deprecated-blue-10);
+	--color-accent-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-accent-20: var(--color-deprecated-blue-20);
+	--color-accent-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-accent-30: var(--color-deprecated-blue-30);
+	--color-accent-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-40: var(--color-deprecated-blue-40);
+	--color-accent-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-accent-50: var(--color-deprecated-blue-50);
+	--color-accent-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-60: var(--color-deprecated-blue-60);
+	--color-accent-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-accent-70: var(--color-deprecated-blue-70);
+	--color-accent-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-80: var(--color-deprecated-blue-80);
+	--color-accent-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-accent-90: var(--color-deprecated-blue-90);
+	--color-accent-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-accent-100: var(--color-deprecated-blue-100);
+	--color-accent-100-rgb: var(--color-deprecated-blue-100-rgb);
+
+	/* Links */
+	--color-link: var(--theme-highlight-color);
+	--color-link-rgb: var(--theme-highlight-color-rgb);
+	--color-link-dark: var(--color-deprecated-blue-70);
+	--color-link-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-light: var(--color-deprecated-blue-30);
+	--color-link-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_classic-blue.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_classic-blue.scss
index 6f87e92ea830..c97741c13f9e 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_classic-blue.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_classic-blue.scss
@@ -1,35 +1,35 @@
 .color-scheme.is-classic-blue {
 	/* Theme Properties */
-	--color-primary: var(--studio-blue-50);
-	--color-primary-rgb: var(--studio-blue-50-rgb);
-	--color-primary-dark: var(--studio-blue-70);
-	--color-primary-dark-rgb: var(--studio-blue-70-rgb);
-	--color-primary-light: var(--studio-blue-30);
-	--color-primary-light-rgb: var(--studio-blue-30-rgb);
-	--color-primary-0: var(--studio-blue-0);
-	--color-primary-0-rgb: var(--studio-blue-0-rgb);
-	--color-primary-5: var(--studio-blue-5);
-	--color-primary-5-rgb: var(--studio-blue-5-rgb);
-	--color-primary-10: var(--studio-blue-10);
-	--color-primary-10-rgb: var(--studio-blue-10-rgb);
-	--color-primary-20: var(--studio-blue-20);
-	--color-primary-20-rgb: var(--studio-blue-20-rgb);
-	--color-primary-30: var(--studio-blue-30);
-	--color-primary-30-rgb: var(--studio-blue-30-rgb);
-	--color-primary-40: var(--studio-blue-40);
-	--color-primary-40-rgb: var(--studio-blue-40-rgb);
-	--color-primary-50: var(--studio-blue-50);
-	--color-primary-50-rgb: var(--studio-blue-50-rgb);
-	--color-primary-60: var(--studio-blue-60);
-	--color-primary-60-rgb: var(--studio-blue-60-rgb);
-	--color-primary-70: var(--studio-blue-70);
-	--color-primary-70-rgb: var(--studio-blue-70-rgb);
-	--color-primary-80: var(--studio-blue-80);
-	--color-primary-80-rgb: var(--studio-blue-80-rgb);
-	--color-primary-90: var(--studio-blue-90);
-	--color-primary-90-rgb: var(--studio-blue-90-rgb);
-	--color-primary-100: var(--studio-blue-100);
-	--color-primary-100-rgb: var(--studio-blue-100-rgb);
+	--color-primary: var(--color-deprecated-blue-50);
+	--color-primary-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-dark: var(--color-deprecated-blue-70);
+	--color-primary-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-light: var(--color-deprecated-blue-30);
+	--color-primary-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-0: var(--color-deprecated-blue-0);
+	--color-primary-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-primary-5: var(--color-deprecated-blue-5);
+	--color-primary-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-primary-10: var(--color-deprecated-blue-10);
+	--color-primary-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-primary-20: var(--color-deprecated-blue-20);
+	--color-primary-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-primary-30: var(--color-deprecated-blue-30);
+	--color-primary-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-40: var(--color-deprecated-blue-40);
+	--color-primary-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-primary-50: var(--color-deprecated-blue-50);
+	--color-primary-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-60: var(--color-deprecated-blue-60);
+	--color-primary-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-primary-70: var(--color-deprecated-blue-70);
+	--color-primary-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-80: var(--color-deprecated-blue-80);
+	--color-primary-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-primary-90: var(--color-deprecated-blue-90);
+	--color-primary-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-primary-100: var(--color-deprecated-blue-100);
+	--color-primary-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	--color-accent: var(--studio-orange-50);
 	--color-accent-rgb: var(--studio-orange-50-rgb);
@@ -62,14 +62,46 @@
 	--color-accent-100: var(--studio-orange-100);
 	--color-accent-100-rgb: var(--studio-orange-100-rgb);
 
+	/* Links */
+	--color-link: var(--color-deprecated-blue-50);
+	--color-link-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-dark: var(--color-deprecated-blue-70);
+	--color-link-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-light: var(--color-deprecated-blue-30);
+	--color-link-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
+
 	/* Component Properties */
-	--color-masterbar-background: var(--studio-blue-60);
-	--color-masterbar-border: var(--studio-blue-70);
+	--color-masterbar-background: var(--color-deprecated-blue-60);
+	--color-masterbar-border: var(--color-deprecated-blue-70);
 	--color-masterbar-text: var(--studio-white);
 	--color-masterbar-icon: var(--studio-white);
 	--color-masterbar-highlight: var(--color-accent-20);
-	--color-masterbar-item-hover-background: var(--studio-blue-70);
-	--color-masterbar-item-active-background: var(--studio-blue-90);
+	--color-masterbar-item-hover-background: var(--color-deprecated-blue-70);
+	--color-masterbar-item-active-background: var(--color-deprecated-blue-90);
 	--color-masterbar-item-new-editor-background: var(--studio-gray-50);
 	--color-masterbar-item-new-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-unread-dot-background: var(--color-accent-30);
@@ -89,10 +121,10 @@
 	--color-sidebar-menu-selected-text-rgb: var(--studio-white-rgb);
 	--color-sidebar-menu-hover-background: var(--color-surface);
 	--color-sidebar-menu-hover-background-rgb: var(--studio-white-rgb);
-	--color-sidebar-menu-hover-text: var(--studio-blue-50);
+	--color-sidebar-menu-hover-text: var(--color-deprecated-blue-50);
 
 	/* Sidebar Submenu - Nav Unification */
-	--color-sidebar-submenu-background: var(--studio-blue-60);
+	--color-sidebar-submenu-background: var(--color-deprecated-blue-60);
 	--color-sidebar-submenu-text: var(--studio-white);
 	--color-sidebar-submenu-hover-text: var(--studio-orange-30);
 	--color-sidebar-submenu-selected-hover-text: var(--color-sidebar-submenu-text);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_classic-bright.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_classic-bright.scss
index 0d9df632da3f..688fca168c8f 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_classic-bright.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_classic-bright.scss
@@ -1,36 +1,36 @@
 .color-scheme.is-classic-bright {
 	/* Theme Properties */
 	--theme-text-color: #044b7a; /* Direct from wp-admin */
-	--color-primary: var(--studio-blue-50);
-	--color-primary-rgb: var(--studio-blue-50-rgb);
-	--color-primary-dark: var(--studio-blue-70);
-	--color-primary-dark-rgb: var(--studio-blue-70-rgb);
-	--color-primary-light: var(--studio-blue-30);
-	--color-primary-light-rgb: var(--studio-blue-30-rgb);
-	--color-primary-0: var(--studio-blue-0);
-	--color-primary-0-rgb: var(--studio-blue-0-rgb);
-	--color-primary-5: var(--studio-blue-5);
-	--color-primary-5-rgb: var(--studio-blue-5-rgb);
-	--color-primary-10: var(--studio-blue-10);
-	--color-primary-10-rgb: var(--studio-blue-10-rgb);
-	--color-primary-20: var(--studio-blue-20);
-	--color-primary-20-rgb: var(--studio-blue-20-rgb);
-	--color-primary-30: var(--studio-blue-30);
-	--color-primary-30-rgb: var(--studio-blue-30-rgb);
-	--color-primary-40: var(--studio-blue-40);
-	--color-primary-40-rgb: var(--studio-blue-40-rgb);
-	--color-primary-50: var(--studio-blue-50);
-	--color-primary-50-rgb: var(--studio-blue-50-rgb);
-	--color-primary-60: var(--studio-blue-60);
-	--color-primary-60-rgb: var(--studio-blue-60-rgb);
-	--color-primary-70: var(--studio-blue-70);
-	--color-primary-70-rgb: var(--studio-blue-70-rgb);
-	--color-primary-80: var(--studio-blue-80);
-	--color-primary-80-rgb: var(--studio-blue-80-rgb);
-	--color-primary-90: var(--studio-blue-90);
-	--color-primary-90-rgb: var(--studio-blue-90-rgb);
-	--color-primary-100: var(--studio-blue-100);
-	--color-primary-100-rgb: var(--studio-blue-100-rgb);
+	--color-primary: var(--color-deprecated-blue-50);
+	--color-primary-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-dark: var(--color-deprecated-blue-70);
+	--color-primary-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-light: var(--color-deprecated-blue-30);
+	--color-primary-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-0: var(--color-deprecated-blue-0);
+	--color-primary-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-primary-5: var(--color-deprecated-blue-5);
+	--color-primary-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-primary-10: var(--color-deprecated-blue-10);
+	--color-primary-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-primary-20: var(--color-deprecated-blue-20);
+	--color-primary-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-primary-30: var(--color-deprecated-blue-30);
+	--color-primary-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-40: var(--color-deprecated-blue-40);
+	--color-primary-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-primary-50: var(--color-deprecated-blue-50);
+	--color-primary-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-60: var(--color-deprecated-blue-60);
+	--color-primary-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-primary-70: var(--color-deprecated-blue-70);
+	--color-primary-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-80: var(--color-deprecated-blue-80);
+	--color-primary-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-primary-90: var(--color-deprecated-blue-90);
+	--color-primary-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-primary-100: var(--color-deprecated-blue-100);
+	--color-primary-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	--color-accent: var(--studio-pink-50);
 	--color-accent-rgb: var(--studio-pink-50-rgb);
@@ -63,14 +63,46 @@
 	--color-accent-100: var(--studio-pink-100);
 	--color-accent-100-rgb: var(--studio-pink-100-rgb);
 
+	/* Links */
+	--color-link: var(--color-deprecated-blue-50);
+	--color-link-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-dark: var(--color-deprecated-blue-70);
+	--color-link-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-light: var(--color-deprecated-blue-30);
+	--color-link-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
+
 	/* Masterbar */
-	--color-masterbar-background: var(--studio-blue-60);
-	--color-masterbar-border: var(--studio-blue-70);
+	--color-masterbar-background: var(--color-deprecated-blue-60);
+	--color-masterbar-border: var(--color-deprecated-blue-70);
 	--color-masterbar-text: var(--studio-white);
 	--color-masterbar-icon: var(--studio-white);
 	--color-masterbar-highlight: var(--color-accent-30);
-	--color-masterbar-item-hover-background: var(--studio-blue-70);
-	--color-masterbar-item-active-background: var(--studio-blue-90);
+	--color-masterbar-item-hover-background: var(--color-deprecated-blue-70);
+	--color-masterbar-item-active-background: var(--color-deprecated-blue-90);
 	--color-masterbar-item-new-editor-background: var(--studio-gray-50);
 	--color-masterbar-item-new-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-unread-dot-background: var(--color-accent-20);
@@ -89,10 +121,10 @@
 	--color-sidebar-gridicon-fill: var(--studio-gray-50);
 
 	/* Sidebar Selected */
-	--color-sidebar-menu-selected-background: var(--studio-blue-5);
-	--color-sidebar-menu-selected-background-rgb: var(--studio-blue-5-rgb);
-	--color-sidebar-menu-selected-text: var(--studio-blue-70);
-	--color-sidebar-menu-selected-text-rgb: var(--studio-blue-70-rgb);
+	--color-sidebar-menu-selected-background: var(--color-deprecated-blue-5);
+	--color-sidebar-menu-selected-background-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-sidebar-menu-selected-text: var(--color-deprecated-blue-70);
+	--color-sidebar-menu-selected-text-rgb: var(--color-deprecated-blue-70-rgb);
 
 	/* Sidebar Hover */
 	--color-sidebar-menu-hover-background: var(--studio-gray-5);
@@ -100,8 +132,8 @@
 	--color-sidebar-menu-hover-text: var(--studio-gray-90);
 
 	/* Sidebar Submenu - Nav Unification */
-	--color-sidebar-submenu-background: var(--studio-blue-0);
-	--color-sidebar-submenu-text: var(--studio-blue-70);
+	--color-sidebar-submenu-background: var(--color-deprecated-blue-0);
+	--color-sidebar-submenu-text: var(--color-deprecated-blue-70);
 	--color-sidebar-submenu-hover-text: var(--color-accent);
 	--color-sidebar-submenu-selected-text: var(--color-accent);
 	--color-sidebar-submenu-selected-hover-text: var(--color-accent);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_classic-dark.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_classic-dark.scss
index ed0e91a3186d..edf7a3cf8eb2 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_classic-dark.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_classic-dark.scss
@@ -208,47 +208,47 @@
 	--color-border-inverted-rgb: var(--studio-white-rgb);
 	--color-border-secondary: #f1f1f1;
 
-	--color-link: var(--studio-blue-50);
-	--color-link-rgb: var(--studio-blue-50-rgb);
-	--color-link-dark: var(--studio-blue-70);
-	--color-link-dark-rgb: var(--studio-blue-70-rgb);
-	--color-link-light: var(--studio-blue-30);
-	--color-link-light-rgb: var(--studio-blue-30-rgb);
-	--color-link-0: var(--studio-blue-0);
-	--color-link-0-rgb: var(--studio-blue-0-rgb);
-	--color-link-5: var(--studio-blue-5);
-	--color-link-5-rgb: var(--studio-blue-5-rgb);
-	--color-link-10: var(--studio-blue-10);
-	--color-link-10-rgb: var(--studio-blue-10-rgb);
-	--color-link-20: var(--studio-blue-20);
-	--color-link-20-rgb: var(--studio-blue-20-rgb);
-	--color-link-30: var(--studio-blue-30);
-	--color-link-30-rgb: var(--studio-blue-30-rgb);
-	--color-link-40: var(--studio-blue-40);
-	--color-link-40-rgb: var(--studio-blue-40-rgb);
-	--color-link-50: var(--studio-blue-50);
-	--color-link-50-rgb: var(--studio-blue-50-rgb);
-	--color-link-60: var(--studio-blue-60);
-	--color-link-60-rgb: var(--studio-blue-60-rgb);
-	--color-link-70: var(--studio-blue-70);
-	--color-link-70-rgb: var(--studio-blue-70-rgb);
-	--color-link-80: var(--studio-blue-80);
-	--color-link-80-rgb: var(--studio-blue-80-rgb);
-	--color-link-90: var(--studio-blue-90);
-	--color-link-90-rgb: var(--studio-blue-90-rgb);
-	--color-link-100: var(--studio-blue-100);
-	--color-link-100-rgb: var(--studio-blue-100-rgb);
+	--color-link: var(--color-deprecated-blue-50);
+	--color-link-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-dark: var(--color-deprecated-blue-70);
+	--color-link-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-light: var(--color-deprecated-blue-30);
+	--color-link-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Component Properties */
 	--color-plan-free: var(--studio-gray-30);
 	--color-plan-blogger: var(--studio-celadon-30);
-	--color-plan-personal: var(--studio-blue-30);
+	--color-plan-personal: var(--color-deprecated-blue-30);
 	--color-plan-premium: var(--studio-yellow-30);
 	--color-plan-business: var(--studio-orange-30);
 	--color-plan-ecommerce: var(--studio-purple-30);
 	--color-premium-domain: var(--studio-wordpress-blue-60);
 
-	--color-jetpack-plan-free: var(--studio-blue-30);
+	--color-jetpack-plan-free: var(--color-deprecated-blue-30);
 	--color-jetpack-plan-personal: var(--studio-yellow-30);
 	--color-jetpack-plan-premium: var(--studio-jetpack-green-30);
 	--color-jetpack-plan-professional: var(--studio-purple-30);
@@ -289,11 +289,11 @@
 
 	--color-jetpack-onboarding-text: var(--studio-white);
 	--color-jetpack-onboarding-text-rgb: var(--studio-white-rgb);
-	--color-jetpack-onboarding-background: var(--studio-blue-100);
-	--color-jetpack-onboarding-background-rgb: var(--studio-blue-100-rgb);
+	--color-jetpack-onboarding-background: var(--color-deprecated-blue-100);
+	--color-jetpack-onboarding-background-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Brand Color Properties */
-	--color-automattic: var(--studio-blue-40);
+	--color-automattic: var(--color-deprecated-blue-40);
 	--color-jetpack: var(--studio-jetpack-green);
 	--color-simplenote: var(--studio-simplenote-blue);
 	--color-woocommerce: var(--studio-woocommerce-purple);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_contrast.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_contrast.scss
index 117a2ee89303..7e3c92a8ff81 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_contrast.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_contrast.scss
@@ -31,36 +31,36 @@
 	--color-primary-100: var(--studio-gray-100);
 	--color-primary-100-rgb: var(--studio-gray-100-rgb);
 
-	--color-accent: var(--studio-blue-70);
-	--color-accent-rgb: var(--studio-blue-70-rgb);
-	--color-accent-dark: var(--studio-blue-90);
-	--color-accent-dark-rgb: var(--studio-blue-90-rgb);
-	--color-accent-light: var(--studio-blue-50);
-	--color-accent-light-rgb: var(--studio-blue-50-rgb);
-	--color-accent-0: var(--studio-blue-0);
-	--color-accent-0-rgb: var(--studio-blue-0-rgb);
-	--color-accent-5: var(--studio-blue-5);
-	--color-accent-5-rgb: var(--studio-blue-5-rgb);
-	--color-accent-10: var(--studio-blue-10);
-	--color-accent-10-rgb: var(--studio-blue-10-rgb);
-	--color-accent-20: var(--studio-blue-20);
-	--color-accent-20-rgb: var(--studio-blue-20-rgb);
-	--color-accent-30: var(--studio-blue-30);
-	--color-accent-30-rgb: var(--studio-blue-30-rgb);
-	--color-accent-40: var(--studio-blue-40);
-	--color-accent-40-rgb: var(--studio-blue-40-rgb);
-	--color-accent-50: var(--studio-blue-50);
-	--color-accent-50-rgb: var(--studio-blue-50-rgb);
-	--color-accent-60: var(--studio-blue-60);
-	--color-accent-60-rgb: var(--studio-blue-60-rgb);
-	--color-accent-70: var(--studio-blue-70);
-	--color-accent-70-rgb: var(--studio-blue-70-rgb);
-	--color-accent-80: var(--studio-blue-80);
-	--color-accent-80-rgb: var(--studio-blue-80-rgb);
-	--color-accent-90: var(--studio-blue-90);
-	--color-accent-90-rgb: var(--studio-blue-90-rgb);
-	--color-accent-100: var(--studio-blue-100);
-	--color-accent-100-rgb: var(--studio-blue-100-rgb);
+	--color-accent: var(--color-deprecated-blue-70);
+	--color-accent-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-dark: var(--color-deprecated-blue-90);
+	--color-accent-dark-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-accent-light: var(--color-deprecated-blue-50);
+	--color-accent-light-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-0: var(--color-deprecated-blue-0);
+	--color-accent-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-accent-5: var(--color-deprecated-blue-5);
+	--color-accent-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-accent-10: var(--color-deprecated-blue-10);
+	--color-accent-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-accent-20: var(--color-deprecated-blue-20);
+	--color-accent-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-accent-30: var(--color-deprecated-blue-30);
+	--color-accent-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-40: var(--color-deprecated-blue-40);
+	--color-accent-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-accent-50: var(--color-deprecated-blue-50);
+	--color-accent-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-60: var(--color-deprecated-blue-60);
+	--color-accent-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-accent-70: var(--color-deprecated-blue-70);
+	--color-accent-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-80: var(--color-deprecated-blue-80);
+	--color-accent-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-accent-90: var(--color-deprecated-blue-90);
+	--color-accent-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-accent-100: var(--color-deprecated-blue-100);
+	--color-accent-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	--color-surface-backdrop: var(--studio-white);
 	--color-surface-backdrop-rgb: var(--studio-white-rgb);
@@ -70,36 +70,36 @@
 	--color-text-subtle: var(--studio-gray-70);
 	--color-text-subtle-rgb: var(--studio-gray-70-rgb);
 
-	--color-link: var(--studio-blue-70);
-	--color-link-rgb: var(--studio-blue-70-rgb);
-	--color-link-dark: var(--studio-blue-100);
-	--color-link-dark-rgb: var(--studio-blue-100-rgb);
-	--color-link-light: var(--studio-blue-50);
-	--color-link-light-rgb: var(--studio-blue-50-rgb);
-	--color-link-0: var(--studio-blue-0);
-	--color-link-0-rgb: var(--studio-blue-0-rgb);
-	--color-link-5: var(--studio-blue-5);
-	--color-link-5-rgb: var(--studio-blue-5-rgb);
-	--color-link-10: var(--studio-blue-10);
-	--color-link-10-rgb: var(--studio-blue-10-rgb);
-	--color-link-20: var(--studio-blue-20);
-	--color-link-20-rgb: var(--studio-blue-20-rgb);
-	--color-link-30: var(--studio-blue-30);
-	--color-link-30-rgb: var(--studio-blue-30-rgb);
-	--color-link-40: var(--studio-blue-40);
-	--color-link-40-rgb: var(--studio-blue-40-rgb);
-	--color-link-50: var(--studio-blue-50);
-	--color-link-50-rgb: var(--studio-blue-50-rgb);
-	--color-link-60: var(--studio-blue-60);
-	--color-link-60-rgb: var(--studio-blue-60-rgb);
-	--color-link-70: var(--studio-blue-70);
-	--color-link-70-rgb: var(--studio-blue-70-rgb);
-	--color-link-80: var(--studio-blue-80);
-	--color-link-80-rgb: var(--studio-blue-80-rgb);
-	--color-link-90: var(--studio-blue-90);
-	--color-link-90-rgb: var(--studio-blue-90-rgb);
-	--color-link-100: var(--studio-blue-100);
-	--color-link-100-rgb: var(--studio-blue-100-rgb);
+	--color-link: var(--color-deprecated-blue-70);
+	--color-link-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-dark: var(--color-deprecated-blue-100);
+	--color-link-dark-rgb: var(--color-deprecated-blue-100-rgb);
+	--color-link-light: var(--color-deprecated-blue-50);
+	--color-link-light-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Component Properties */
 	--color-premium-domain: var(--studio-gray-100);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss
index 7ffce400afef..3c24c2ed9d42 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss
@@ -267,20 +267,24 @@
 	--color-checkout-masterbar-item-hover-background: var(--studio-gray-5);
 	--color-checkout-masterbar-item-active-background: var(--studio-gray-20);
 
-	--color-sidebar-background: var(--color-surface);
-	--color-sidebar-background-rgb: var(--studio-white-rgb);
-	--color-sidebar-border: var(--studio-gray-5);
-	--color-sidebar-text: var(--studio-gray-80);
-	--color-sidebar-text-rgb: var(--studio-gray-80-rgb);
-	--color-sidebar-text-alternative: var(--studio-gray-50);
-	--color-sidebar-gridicon-fill: var(--studio-gray-50);
-	--color-sidebar-menu-selected-background: var(--studio-blue-5);
-	--color-sidebar-menu-selected-background-rgb: var(--studio-blue-5-rgb);
-	--color-sidebar-menu-selected-text: var(--studio-blue-70);
-	--color-sidebar-menu-selected-text-rgb: var(--studio-blue-70-rgb);
-	--color-sidebar-menu-hover-background: var(--studio-gray-5);
-	--color-sidebar-menu-hover-background-rgb: var(--studio-gray-5-rgb);
-	--color-sidebar-menu-hover-text: var(--studio-gray-90);
+	--color-sidebar-background: #23282d; /* theme-default */
+	--color-sidebar-background-rgb: 35, 40, 45; /* theme-default */
+	--color-sidebar-border: #333; /* theme-default */
+	--color-sidebar-text: #eee; /* theme-default */
+	--color-sidebar-text-rgb: 238, 238, 238; /* theme-default */
+	--color-sidebar-text-alternative: #a2aab2; /* theme-default */
+	--color-sidebar-gridicon-fill: #a2aab2; /* theme-default */
+	--color-sidebar-gridicon-hover-fill: #00b9eb; /* theme-default */
+	--color-sidebar-gridicon-selected-fill: #00b9eb; /* theme-default */
+	--color-sidebar-notice-background: #3c434a; /* theme-default */
+	--color-sidebar-menu-selected-background: #0073aa; /* theme-default */
+	--color-sidebar-menu-selected-background-rgb: 0, 115, 170; /* theme-default */
+	--color-sidebar-menu-selected-text: var(--color-text-inverted); /* theme-default */
+	--color-sidebar-menu-selected-text-rgb: var(--color-text-inverted-rgb);/* theme-default */
+	--color-sidebar-menu-hover-background: #1a1e23;/* theme-default */
+	--color-sidebar-menu-hover-background-rgb: 26, 30, 35; /* theme-default */
+	--color-sidebar-menu-hover-text: #00b9eb; /* theme-default */
+
 
 	--color-jetpack-onboarding-text: var(--studio-white);
 	--color-jetpack-onboarding-text-rgb: var(--studio-white-rgb);
@@ -351,10 +355,12 @@
 	--color-masterbar-highlight: var(--theme-highlight-color);
 
 	/* Sidebar Submenu - Nav Unification */
-	--color-sidebar-submenu-background: var(--studio-blue-0);
-	--color-sidebar-submenu-text: var(--studio-blue-70);
-	--color-sidebar-submenu-hover-text: var(--color-accent);
-	--color-sidebar-submenu-selected-text: var(--color-accent);
+	--color-sidebar-submenu-background: #32373c; /* theme-default */
+	--color-sidebar-submenu-text: #b4b9be;
+	--color-sidebar-submenu-hover-background: transparent; /* theme-default */
+	--color-sidebar-submenu-hover-text: #00b9eb; /* theme-default */
+	--color-sidebar-submenu-selected-background: transparent; /* theme-default */
+	--color-sidebar-submenu-selected-text: var(--color-text-inverted); /* theme-default */
 
 	/* Sidebar Submenu - Nav Redesign */
 	--color-navredesign-sidebar-submenu-text: rgba(240, 246, 252, 0.7); /* Direct from wp-admin */
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_fresh.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_fresh.scss
index 6f195ee7e0a9..51c64aec1a76 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_fresh.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_fresh.scss
@@ -1,7 +1,164 @@
 .color-scheme.is-fresh {
-	--color-primary: #2271b1;
-	--color-accent: var(--color-primary);
-	--color-accent-60: #135e96;
+	/* Theme Properties */
+	--color-primary: var(--color-deprecated-blue-50);
+	--color-primary-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-dark: var(--color-deprecated-blue-70);
+	--color-primary-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-light: var(--color-deprecated-blue-30);
+	--color-primary-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-0: var(--color-deprecated-blue-0);
+	--color-primary-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-primary-5: var(--color-deprecated-blue-5);
+	--color-primary-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-primary-10: var(--color-deprecated-blue-10);
+	--color-primary-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-primary-20: var(--color-deprecated-blue-20);
+	--color-primary-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-primary-30: var(--color-deprecated-blue-30);
+	--color-primary-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-40: var(--color-deprecated-blue-40);
+	--color-primary-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-primary-50: var(--color-deprecated-blue-50);
+	--color-primary-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-60: var(--color-deprecated-blue-60);
+	--color-primary-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-primary-70: var(--color-deprecated-blue-70);
+	--color-primary-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-80: var(--color-deprecated-blue-80);
+	--color-primary-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-primary-90: var(--color-deprecated-blue-90);
+	--color-primary-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-primary-100: var(--color-deprecated-blue-100);
+	--color-primary-100-rgb: var(--color-deprecated-blue-100-rgb);
+
+	--color-accent: var(--color-deprecated-blue-50);
+	--color-accent-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-dark: var(--color-deprecated-blue-70);
+	--color-accent-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-light: var(--color-deprecated-blue-30);
+	--color-accent-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-0: var(--color-deprecated-blue-0);
+	--color-accent-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-accent-5: var(--color-deprecated-blue-5);
+	--color-accent-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-accent-10: var(--color-deprecated-blue-10);
+	--color-accent-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-accent-20: var(--color-deprecated-blue-20);
+	--color-accent-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-accent-30: var(--color-deprecated-blue-30);
+	--color-accent-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-40: var(--color-deprecated-blue-40);
+	--color-accent-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-accent-50: var(--color-deprecated-blue-50);
+	--color-accent-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-60: var(--color-deprecated-blue-60);
+	--color-accent-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-accent-70: var(--color-deprecated-blue-70);
+	--color-accent-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-80: var(--color-deprecated-blue-80);
+	--color-accent-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-accent-90: var(--color-deprecated-blue-90);
+	--color-accent-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-accent-100: var(--color-deprecated-blue-100);
+	--color-accent-100-rgb: var(--color-deprecated-blue-100-rgb);
+
+	--color-link: var(--color-deprecated-blue-50);
+	--color-link-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-dark: var(--color-deprecated-blue-70);
+	--color-link-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-light: var(--color-deprecated-blue-30);
+	--color-link-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
+
+	/* WP Admin */
+	--color-wp-admin-button-background: #008ec2;
+	--color-wp-admin-button-border: #006799;
+
+	/* WP Admin Default Theme */
+	--theme-text-color: #f0f0f1; /* Direct from wp-admin */
+	--theme-text-color-rgb: 240, 240, 241;
+	--theme-base-color: #1d2327; /* Direct from wp-admin */
+	--theme-base-color-rgb: 29, 35, 39;
+	--theme-submenu-background-color: #131619; /* $menu-submenu-background */
+	--theme-submenu-text-color: #c3c4c7; /* $menu-submenu-text */
+	--theme-icon-color: rgba(240, 246, 252, 0.6); /* $icon-color */
+	--theme-highlight-color: #72aee6; /* $highlight-color */
+	--theme-highlight-color-rgb: 114, 174, 230;
+	--theme-notification-color: #d54e21; /* Direct from wp-admin */
+
+	/* Masterbar */
+	--color-masterbar-background: var(--theme-base-color);
+	--color-masterbar-border: #8c8f94; /* $adminbar-avatar-frame */
+	--color-masterbar-text: var(--theme-text-color);
+	--color-masterbar-submenu-text: var(--theme-submenu-text-color);
+	--color-masterbar-icon: var(--theme-icon-color);
+	--color-masterbar-highlight: var(--theme-highlight-color);
+	--color-masterbar-unread-dot-background: var(--color-accent-20);
+
+	--color-masterbar-item-hover-background: #2c3338; /* $menu-submenu-background: darken( $base-color, 7% ) */
+	--color-masterbar-item-active-background: #23282d;
+	--color-masterbar-item-new-editor-background: var(--studio-gray-50);
+	--color-masterbar-item-new-editor-hover-background: var(--studio-gray-40);
+
+	/* Sidebar */
+	--color-sidebar-background: #23282d; /* theme-default */
+	--color-sidebar-background-rgb: 35, 40, 45; /* theme-default */
+	--color-sidebar-border: #333; /* theme-default */
+	--color-sidebar-text: #eee; /* theme-default */
+	--color-sidebar-text-rgb: 238, 238, 238; /* theme-default */
+	--color-sidebar-text-alternative: #a2aab2; /* theme-default */
+	--color-sidebar-gridicon-fill: #a2aab2; /* theme-default */
+	--color-sidebar-gridicon-hover-fill: #00b9eb; /* theme-default */
+	--color-sidebar-gridicon-selected-fill: #00b9eb; /* theme-default */
+	--color-sidebar-notice-background: #3c434a; /* theme-default */
+
+	/* Sidebar Selected */
+	--color-sidebar-menu-selected-background: #0073aa; /* theme-default */
+	--color-sidebar-menu-selected-background-rgb: 0, 115, 170; /* theme-default */
+	--color-sidebar-menu-selected-text: var(--color-text-inverted); /* theme-default */
+	--color-sidebar-menu-selected-text-rgb: var(--color-text-inverted-rgb);/* theme-default */
+
+	/* Sidebar Hover */
+	--color-sidebar-menu-hover-background: #1a1e23;/* theme-default */
+	--color-sidebar-menu-hover-background-rgb: 26, 30, 35; /* theme-default */
+	--color-sidebar-menu-hover-text: #00b9eb; /* theme-default */
+
+	/* Sidebar Submenu - Nav Unification */
+	--color-sidebar-submenu-background: #32373c; /* theme-default */
+	--color-sidebar-submenu-text: #b4b9be;
+	--color-sidebar-submenu-hover-background: transparent; /* theme-default */
+	--color-sidebar-submenu-hover-text: #00b9eb; /* theme-default */
+	--color-sidebar-submenu-selected-background: transparent; /* theme-default */
+	--color-sidebar-submenu-selected-text: var(--color-text-inverted); /* theme-default */
+
+	/* Sidebar Submenu - Nav Redesign */
+	--color-navredesign-sidebar-submenu-text: rgba(240, 246, 252, 0.7); /* Direct from wp-admin */
+	--color-navredesign-sidebar-menu-selected-text: var(--theme-text-color);
+	--color-navredesign-sidebar-submenu-selected-text: var(--theme-text-color);
+	--color-navredesign-sidebar-submenu-hover-text: #72aee6; /* Direct from wp-admin */
 
 	/* Gutenberg components */
 	--wp-admin-theme-color: var(--color-accent);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_light.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_light.scss
index 8631dd22c35e..d69cb1b91418 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_light.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_light.scss
@@ -53,66 +53,98 @@ Primary+Accent is studio blue.
 	/* Primary */
 	--color-primary: var(--theme-highlight-color);
 	--color-primary-rgb: var(--theme-highlight-color-rgb);
-	--color-primary-dark: var(--studio-blue-70);
-	--color-primary-dark-rgb: var(--studio-blue-70-rgb);
-	--color-primary-light: var(--studio-blue-30);
-	--color-primary-light-rgb: var(--studio-blue-30-rgb);
-	--color-primary-0: var(--studio-blue-0);
-	--color-primary-0-rgb: var(--studio-blue-0-rgb);
-	--color-primary-5: var(--studio-blue-5);
-	--color-primary-5-rgb: var(--studio-blue-5-rgb);
-	--color-primary-10: var(--studio-blue-10);
-	--color-primary-10-rgb: var(--studio-blue-10-rgb);
-	--color-primary-20: var(--studio-blue-20);
-	--color-primary-20-rgb: var(--studio-blue-20-rgb);
-	--color-primary-30: var(--studio-blue-30);
-	--color-primary-30-rgb: var(--studio-blue-30-rgb);
-	--color-primary-40: var(--studio-blue-40);
-	--color-primary-40-rgb: var(--studio-blue-40-rgb);
-	--color-primary-50: var(--studio-blue-50);
-	--color-primary-50-rgb: var(--studio-blue-50-rgb);
-	--color-primary-60: var(--studio-blue-60);
-	--color-primary-60-rgb: var(--studio-blue-60-rgb);
-	--color-primary-70: var(--studio-blue-70);
-	--color-primary-70-rgb: var(--studio-blue-70-rgb);
-	--color-primary-80: var(--studio-blue-80);
-	--color-primary-80-rgb: var(--studio-blue-80-rgb);
-	--color-primary-90: var(--studio-blue-90);
-	--color-primary-90-rgb: var(--studio-blue-90-rgb);
-	--color-primary-100: var(--studio-blue-100);
-	--color-primary-100-rgb: var(--studio-blue-100-rgb);
+	--color-primary-dark: var(--color-deprecated-blue-70);
+	--color-primary-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-light: var(--color-deprecated-blue-30);
+	--color-primary-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-0: var(--color-deprecated-blue-0);
+	--color-primary-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-primary-5: var(--color-deprecated-blue-5);
+	--color-primary-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-primary-10: var(--color-deprecated-blue-10);
+	--color-primary-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-primary-20: var(--color-deprecated-blue-20);
+	--color-primary-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-primary-30: var(--color-deprecated-blue-30);
+	--color-primary-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-primary-40: var(--color-deprecated-blue-40);
+	--color-primary-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-primary-50: var(--color-deprecated-blue-50);
+	--color-primary-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-primary-60: var(--color-deprecated-blue-60);
+	--color-primary-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-primary-70: var(--color-deprecated-blue-70);
+	--color-primary-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-primary-80: var(--color-deprecated-blue-80);
+	--color-primary-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-primary-90: var(--color-deprecated-blue-90);
+	--color-primary-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-primary-100: var(--color-deprecated-blue-100);
+	--color-primary-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Accent */
 	--color-accent: var(--theme-highlight-color);
 	--color-accent-rgb: var(--theme-highlight-color-rgb);
-	--color-accent-dark: var(--studio-blue-70);
-	--color-accent-dark-rgb: var(--studio-blue-70-rgb);
-	--color-accent-light: var(--studio-blue-30);
-	--color-accent-light-rgb: var(--studio-blue-30-rgb);
-	--color-accent-0: var(--studio-blue-0);
-	--color-accent-0-rgb: var(--studio-blue-0-rgb);
-	--color-accent-5: var(--studio-blue-5);
-	--color-accent-5-rgb: var(--studio-blue-5-rgb);
-	--color-accent-10: var(--studio-blue-10);
-	--color-accent-10-rgb: var(--studio-blue-10-rgb);
-	--color-accent-20: var(--studio-blue-20);
-	--color-accent-20-rgb: var(--studio-blue-20-rgb);
-	--color-accent-30: var(--studio-blue-30);
-	--color-accent-30-rgb: var(--studio-blue-30-rgb);
-	--color-accent-40: var(--studio-blue-40);
-	--color-accent-40-rgb: var(--studio-blue-40-rgb);
-	--color-accent-50: var(--studio-blue-50);
-	--color-accent-50-rgb: var(--studio-blue-50-rgb);
-	--color-accent-60: var(--studio-blue-60);
-	--color-accent-60-rgb: var(--studio-blue-60-rgb);
-	--color-accent-70: var(--studio-blue-70);
-	--color-accent-70-rgb: var(--studio-blue-70-rgb);
-	--color-accent-80: var(--studio-blue-80);
-	--color-accent-80-rgb: var(--studio-blue-80-rgb);
-	--color-accent-90: var(--studio-blue-90);
-	--color-accent-90-rgb: var(--studio-blue-90-rgb);
-	--color-accent-100: var(--studio-blue-100);
-	--color-accent-100-rgb: var(--studio-blue-100-rgb);
+	--color-accent-dark: var(--color-deprecated-blue-70);
+	--color-accent-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-light: var(--color-deprecated-blue-30);
+	--color-accent-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-0: var(--color-deprecated-blue-0);
+	--color-accent-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-accent-5: var(--color-deprecated-blue-5);
+	--color-accent-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-accent-10: var(--color-deprecated-blue-10);
+	--color-accent-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-accent-20: var(--color-deprecated-blue-20);
+	--color-accent-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-accent-30: var(--color-deprecated-blue-30);
+	--color-accent-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-40: var(--color-deprecated-blue-40);
+	--color-accent-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-accent-50: var(--color-deprecated-blue-50);
+	--color-accent-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-60: var(--color-deprecated-blue-60);
+	--color-accent-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-accent-70: var(--color-deprecated-blue-70);
+	--color-accent-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-80: var(--color-deprecated-blue-80);
+	--color-accent-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-accent-90: var(--color-deprecated-blue-90);
+	--color-accent-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-accent-100: var(--color-deprecated-blue-100);
+	--color-accent-100-rgb: var(--color-deprecated-blue-100-rgb);
+
+	/* Links */
+	--color-link: var(--theme-highlight-color);
+	--color-link-rgb: var(--theme-highlight-color-rgb);
+	--color-link-dark: var(--color-deprecated-blue-70);
+	--color-link-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-light: var(--color-deprecated-blue-30);
+	--color-link-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Masterbar */
 	--color-masterbar-background: var(--theme-base-color);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_modern.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_modern.scss
index d445c057f48d..fc36d2d3eedb 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_modern.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_modern.scss
@@ -133,7 +133,7 @@ Uses custom theme highlight monochromatic palette for primary + accent
 	--color-masterbar-border: #303030; /* $adminbar-avatar-frame */
 	--color-masterbar-text: var(--theme-text-color);
 	--color-masterbar-icon: var(--theme-icon-color);
-	--color-masterbar-highlight: #33f078; /* $menu-submenu-focus-text */
+	--color-masterbar-highlight: #7b90ff; /* $menu-submenu-focus-text */
 	--color-masterbar-unread-dot-background: var(--theme-notification-color);
 
 	--color-masterbar-item-hover-background: var(--theme-submenu-background-color);
@@ -169,14 +169,14 @@ Uses custom theme highlight monochromatic palette for primary + accent
 	--color-sidebar-submenu-background: var(--theme-submenu-background-color);
 	--color-sidebar-submenu-text: var(--theme-submenu-text-color);
 	--color-sidebar-submenu-hover-background: transparent;
-	--color-sidebar-submenu-hover-text: #33f078; /* $menu-submenu-focus-text */
+	--color-sidebar-submenu-hover-text: #7b90ff; /* $menu-submenu-focus-text */
 	--color-sidebar-submenu-selected-hover-text: var(--color-sidebar-submenu-hover-text);
 
 	/* Sidebar Submenu - Nav Redesign */
 	--color-navredesign-sidebar-submenu-text: var(--color-sidebar-submenu-text);
 	--color-navredesign-sidebar-menu-selected-text: var(--theme-text-color);
 	--color-navredesign-sidebar-submenu-selected-text: var(--theme-text-color);
-	--color-navredesign-sidebar-submenu-hover-text: #33f078; /* $menu-submenu-focus-text */
+	--color-navredesign-sidebar-submenu-hover-text: #7b90ff; /* $menu-submenu-focus-text */
 	--color-navredesign-sidebar-submenu-selected-hover-text: var(--color-sidebar-submenu-hover-text);
 
 	/* Gutenberg components */
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_nightfall.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_nightfall.scss
index f53d75efb58b..fd782791d235 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_nightfall.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_nightfall.scss
@@ -31,76 +31,76 @@
 	--color-primary-100: var(--studio-gray-100);
 	--color-primary-100-rgb: var(--studio-gray-100-rgb);
 
-	--color-accent: var(--studio-blue-50);
-	--color-accent-rgb: var(--studio-blue-50-rgb);
-	--color-accent-dark: var(--studio-blue-70);
-	--color-accent-dark-rgb: var(--studio-blue-70-rgb);
-	--color-accent-light: var(--studio-blue-30);
-	--color-accent-light-rgb: var(--studio-blue-30-rgb);
-	--color-accent-0: var(--studio-blue-0);
-	--color-accent-0-rgb: var(--studio-blue-0-rgb);
-	--color-accent-5: var(--studio-blue-5);
-	--color-accent-5-rgb: var(--studio-blue-5-rgb);
-	--color-accent-10: var(--studio-blue-10);
-	--color-accent-10-rgb: var(--studio-blue-10-rgb);
-	--color-accent-20: var(--studio-blue-20);
-	--color-accent-20-rgb: var(--studio-blue-20-rgb);
-	--color-accent-30: var(--studio-blue-30);
-	--color-accent-30-rgb: var(--studio-blue-30-rgb);
-	--color-accent-40: var(--studio-blue-40);
-	--color-accent-40-rgb: var(--studio-blue-40-rgb);
-	--color-accent-50: var(--studio-blue-50);
-	--color-accent-50-rgb: var(--studio-blue-50-rgb);
-	--color-accent-60: var(--studio-blue-60);
-	--color-accent-60-rgb: var(--studio-blue-60-rgb);
-	--color-accent-70: var(--studio-blue-70);
-	--color-accent-70-rgb: var(--studio-blue-70-rgb);
-	--color-accent-80: var(--studio-blue-80);
-	--color-accent-80-rgb: var(--studio-blue-80-rgb);
-	--color-accent-90: var(--studio-blue-90);
-	--color-accent-90-rgb: var(--studio-blue-90-rgb);
-	--color-accent-100: var(--studio-blue-100);
-	--color-accent-100-rgb: var(--studio-blue-100-rgb);
+	--color-accent: var(--color-deprecated-blue-50);
+	--color-accent-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-dark: var(--color-deprecated-blue-70);
+	--color-accent-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-light: var(--color-deprecated-blue-30);
+	--color-accent-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-0: var(--color-deprecated-blue-0);
+	--color-accent-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-accent-5: var(--color-deprecated-blue-5);
+	--color-accent-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-accent-10: var(--color-deprecated-blue-10);
+	--color-accent-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-accent-20: var(--color-deprecated-blue-20);
+	--color-accent-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-accent-30: var(--color-deprecated-blue-30);
+	--color-accent-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-40: var(--color-deprecated-blue-40);
+	--color-accent-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-accent-50: var(--color-deprecated-blue-50);
+	--color-accent-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-60: var(--color-deprecated-blue-60);
+	--color-accent-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-accent-70: var(--color-deprecated-blue-70);
+	--color-accent-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-80: var(--color-deprecated-blue-80);
+	--color-accent-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-accent-90: var(--color-deprecated-blue-90);
+	--color-accent-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-accent-100: var(--color-deprecated-blue-100);
+	--color-accent-100-rgb: var(--color-deprecated-blue-100-rgb);
 
-	--color-link: var(--studio-blue-50);
-	--color-link-rgb: var(--studio-blue-50-rgb);
-	--color-link-dark: var(--studio-blue-70);
-	--color-link-dark-rgb: var(--studio-blue-70-rgb);
-	--color-link-light: var(--studio-blue-30);
-	--color-link-light-rgb: var(--studio-blue-30-rgb);
-	--color-link-0: var(--studio-blue-0);
-	--color-link-0-rgb: var(--studio-blue-0-rgb);
-	--color-link-5: var(--studio-blue-5);
-	--color-link-5-rgb: var(--studio-blue-5-rgb);
-	--color-link-10: var(--studio-blue-10);
-	--color-link-10-rgb: var(--studio-blue-10-rgb);
-	--color-link-20: var(--studio-blue-20);
-	--color-link-20-rgb: var(--studio-blue-20-rgb);
-	--color-link-30: var(--studio-blue-30);
-	--color-link-30-rgb: var(--studio-blue-30-rgb);
-	--color-link-40: var(--studio-blue-40);
-	--color-link-40-rgb: var(--studio-blue-40-rgb);
-	--color-link-50: var(--studio-blue-50);
-	--color-link-50-rgb: var(--studio-blue-50-rgb);
-	--color-link-60: var(--studio-blue-60);
-	--color-link-60-rgb: var(--studio-blue-60-rgb);
-	--color-link-70: var(--studio-blue-70);
-	--color-link-70-rgb: var(--studio-blue-70-rgb);
-	--color-link-80: var(--studio-blue-80);
-	--color-link-80-rgb: var(--studio-blue-80-rgb);
-	--color-link-90: var(--studio-blue-90);
-	--color-link-90-rgb: var(--studio-blue-90-rgb);
-	--color-link-100: var(--studio-blue-100);
-	--color-link-100-rgb: var(--studio-blue-100-rgb);
+	--color-link: var(--color-deprecated-blue-50);
+	--color-link-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-dark: var(--color-deprecated-blue-70);
+	--color-link-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-light: var(--color-deprecated-blue-30);
+	--color-link-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Component Properties */
-	--color-masterbar-background: var(--studio-blue-100);
-	--color-masterbar-border: var(--studio-blue-100);
+	--color-masterbar-background: var(--color-deprecated-blue-100);
+	--color-masterbar-border: var(--color-deprecated-blue-100);
 	--color-masterbar-text: var(--studio-white);
 	--color-masterbar-icon: var(--studio-white);
 	--color-masterbar-hightlight: var(--color-accent-30);
-	--color-masterbar-item-hover-background: var(--studio-blue-90);
-	--color-masterbar-item-active-background: var(--studio-blue-80);
+	--color-masterbar-item-hover-background: var(--color-deprecated-blue-90);
+	--color-masterbar-item-active-background: var(--color-deprecated-blue-80);
 	--color-masterbar-item-new-editor-background: var(--studio-gray-50);
 	--color-masterbar-item-new-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-unread-dot-background: var(--color-accent-30);
@@ -108,25 +108,25 @@
 	--color-masterbar-toggle-drafts-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-toggle-drafts-editor-border: var(--studio-gray-10);
 
-	--color-sidebar-background: var(--studio-blue-80);
-	--color-sidebar-background-rgb: var(--studio-blue-80-rgb);
-	--color-sidebar-border: var(--studio-blue-90);
-	--color-sidebar-text: var(--studio-blue-5);
-	--color-sidebar-text-rgb: var(--studio-blue-5-rgb);
-	--color-sidebar-text-alternative: var(--studio-blue-20);
-	--color-sidebar-gridicon-fill: var(--studio-blue-10);
-	--color-sidebar-menu-selected-background: var(--studio-blue-100);
-	--color-sidebar-menu-selected-background-rgb: var(--studio-blue-100-rgb);
+	--color-sidebar-background: var(--color-deprecated-blue-80);
+	--color-sidebar-background-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-sidebar-border: var(--color-deprecated-blue-90);
+	--color-sidebar-text: var(--color-deprecated-blue-5);
+	--color-sidebar-text-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-sidebar-text-alternative: var(--color-deprecated-blue-20);
+	--color-sidebar-gridicon-fill: var(--color-deprecated-blue-10);
+	--color-sidebar-menu-selected-background: var(--color-deprecated-blue-100);
+	--color-sidebar-menu-selected-background-rgb: var(--color-deprecated-blue-100-rgb);
 	--color-sidebar-menu-selected-text: var(--studio-white);
 	--color-sidebar-menu-selected-text-rgb: var(--studio-white-rgb);
-	--color-sidebar-menu-hover-background: var(--studio-blue-70);
-	--color-sidebar-menu-hover-background-rgb: var(--studio-blue-70-rgb);
+	--color-sidebar-menu-hover-background: var(--color-deprecated-blue-70);
+	--color-sidebar-menu-hover-background-rgb: var(--color-deprecated-blue-70-rgb);
 	--color-sidebar-menu-hover-text: var(--studio-white);
 
 	/* Sidebar Submenu - Nav Unification */
-	--color-sidebar-submenu-background: var(--studio-blue-90);
+	--color-sidebar-submenu-background: var(--color-deprecated-blue-90);
 	--color-sidebar-submenu-text: var(--studio-white);
-	--color-sidebar-submenu-hover-text: var(--studio-blue-20);
+	--color-sidebar-submenu-hover-text: var(--color-deprecated-blue-20);
 	--color-sidebar-submenu-selected-text: var(--studio-white);
 	--color-sidebar-submenu-selected-hover-text: var(--studio-white);
 
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_powder-snow.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_powder-snow.scss
index c44fff119cf9..5fbf43eb8b2b 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_powder-snow.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_powder-snow.scss
@@ -31,67 +31,67 @@
 	--color-primary-100: var(--studio-gray-100);
 	--color-primary-100-rgb: var(--studio-gray-100-rgb);
 
-	--color-accent: var(--studio-blue-50);
-	--color-accent-rgb: var(--studio-blue-50-rgb);
-	--color-accent-dark: var(--studio-blue-70);
-	--color-accent-dark-rgb: var(--studio-blue-70-rgb);
-	--color-accent-light: var(--studio-blue-30);
-	--color-accent-light-rgb: var(--studio-blue-30-rgb);
-	--color-accent-0: var(--studio-blue-0);
-	--color-accent-0-rgb: var(--studio-blue-0-rgb);
-	--color-accent-5: var(--studio-blue-5);
-	--color-accent-5-rgb: var(--studio-blue-5-rgb);
-	--color-accent-10: var(--studio-blue-10);
-	--color-accent-10-rgb: var(--studio-blue-10-rgb);
-	--color-accent-20: var(--studio-blue-20);
-	--color-accent-20-rgb: var(--studio-blue-20-rgb);
-	--color-accent-30: var(--studio-blue-30);
-	--color-accent-30-rgb: var(--studio-blue-30-rgb);
-	--color-accent-40: var(--studio-blue-40);
-	--color-accent-40-rgb: var(--studio-blue-40-rgb);
-	--color-accent-50: var(--studio-blue-50);
-	--color-accent-50-rgb: var(--studio-blue-50-rgb);
-	--color-accent-60: var(--studio-blue-60);
-	--color-accent-60-rgb: var(--studio-blue-60-rgb);
-	--color-accent-70: var(--studio-blue-70);
-	--color-accent-70-rgb: var(--studio-blue-70-rgb);
-	--color-accent-80: var(--studio-blue-80);
-	--color-accent-80-rgb: var(--studio-blue-80-rgb);
-	--color-accent-90: var(--studio-blue-90);
-	--color-accent-90-rgb: var(--studio-blue-90-rgb);
-	--color-accent-100: var(--studio-blue-100);
-	--color-accent-100-rgb: var(--studio-blue-100-rgb);
+	--color-accent: var(--color-deprecated-blue-50);
+	--color-accent-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-dark: var(--color-deprecated-blue-70);
+	--color-accent-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-light: var(--color-deprecated-blue-30);
+	--color-accent-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-0: var(--color-deprecated-blue-0);
+	--color-accent-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-accent-5: var(--color-deprecated-blue-5);
+	--color-accent-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-accent-10: var(--color-deprecated-blue-10);
+	--color-accent-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-accent-20: var(--color-deprecated-blue-20);
+	--color-accent-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-accent-30: var(--color-deprecated-blue-30);
+	--color-accent-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-40: var(--color-deprecated-blue-40);
+	--color-accent-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-accent-50: var(--color-deprecated-blue-50);
+	--color-accent-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-60: var(--color-deprecated-blue-60);
+	--color-accent-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-accent-70: var(--color-deprecated-blue-70);
+	--color-accent-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-80: var(--color-deprecated-blue-80);
+	--color-accent-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-accent-90: var(--color-deprecated-blue-90);
+	--color-accent-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-accent-100: var(--color-deprecated-blue-100);
+	--color-accent-100-rgb: var(--color-deprecated-blue-100-rgb);
 
-	--color-link: var(--studio-blue-50);
-	--color-link-rgb: var(--studio-blue-50-rgb);
-	--color-link-dark: var(--studio-blue-70);
-	--color-link-dark-rgb: var(--studio-blue-70-rgb);
-	--color-link-light: var(--studio-blue-30);
-	--color-link-light-rgb: var(--studio-blue-30-rgb);
-	--color-link-0: var(--studio-blue-0);
-	--color-link-0-rgb: var(--studio-blue-0-rgb);
-	--color-link-5: var(--studio-blue-5);
-	--color-link-5-rgb: var(--studio-blue-5-rgb);
-	--color-link-10: var(--studio-blue-10);
-	--color-link-10-rgb: var(--studio-blue-10-rgb);
-	--color-link-20: var(--studio-blue-20);
-	--color-link-20-rgb: var(--studio-blue-20-rgb);
-	--color-link-30: var(--studio-blue-30);
-	--color-link-30-rgb: var(--studio-blue-30-rgb);
-	--color-link-40: var(--studio-blue-40);
-	--color-link-40-rgb: var(--studio-blue-40-rgb);
-	--color-link-50: var(--studio-blue-50);
-	--color-link-50-rgb: var(--studio-blue-50-rgb);
-	--color-link-60: var(--studio-blue-60);
-	--color-link-60-rgb: var(--studio-blue-60-rgb);
-	--color-link-70: var(--studio-blue-70);
-	--color-link-70-rgb: var(--studio-blue-70-rgb);
-	--color-link-80: var(--studio-blue-80);
-	--color-link-80-rgb: var(--studio-blue-80-rgb);
-	--color-link-90: var(--studio-blue-90);
-	--color-link-90-rgb: var(--studio-blue-90-rgb);
-	--color-link-100: var(--studio-blue-100);
-	--color-link-100-rgb: var(--studio-blue-100-rgb);
+	--color-link: var(--color-deprecated-blue-50);
+	--color-link-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-dark: var(--color-deprecated-blue-70);
+	--color-link-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-light: var(--color-deprecated-blue-30);
+	--color-link-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-0: var(--color-deprecated-blue-0);
+	--color-link-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-link-5: var(--color-deprecated-blue-5);
+	--color-link-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-link-10: var(--color-deprecated-blue-10);
+	--color-link-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-link-20: var(--color-deprecated-blue-20);
+	--color-link-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-link-30: var(--color-deprecated-blue-30);
+	--color-link-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-link-40: var(--color-deprecated-blue-40);
+	--color-link-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-link-50: var(--color-deprecated-blue-50);
+	--color-link-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-link-60: var(--color-deprecated-blue-60);
+	--color-link-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-link-70: var(--color-deprecated-blue-70);
+	--color-link-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-link-80: var(--color-deprecated-blue-80);
+	--color-link-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-link-90: var(--color-deprecated-blue-90);
+	--color-link-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-link-100: var(--color-deprecated-blue-100);
+	--color-link-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	/* Component Properties */
 	--color-masterbar-background: var(--studio-gray-100);
@@ -121,18 +121,18 @@
 	--color-sidebar-menu-selected-text-rgb: var(--studio-white-rgb);
 	--color-sidebar-menu-hover-background: var(--color-surface);
 	--color-sidebar-menu-hover-background-rgb: var(--studio-white-rgb);
-	--color-sidebar-menu-hover-text: var(--studio-blue-60);
+	--color-sidebar-menu-hover-text: var(--color-deprecated-blue-60);
 
 	/* Sidebar Submenu - Nav Unification */
 	--color-sidebar-submenu-background: var(--studio-gray-10);
 	--color-sidebar-submenu-text: var(--studio-gray-80);
-	--color-sidebar-submenu-hover-text: var(--studio-blue-60);
+	--color-sidebar-submenu-hover-text: var(--color-deprecated-blue-60);
 	--color-sidebar-submenu-selected-text: var(--studio-gray-80);
 
 	/* Sidebar Submenu - Nav Redesign */
 	--color-navredesign-sidebar-submenu-text: var(--studio-gray-80);
 	--color-navredesign-sidebar-submenu-selected-text: var(--studio-gray-80);
-	--color-navredesign-sidebar-submenu-hover-text: var(--studio-blue-60);
+	--color-navredesign-sidebar-submenu-hover-text: var(--color-deprecated-blue-60);
 
 	/* Collapse Menu Button */
 	--color-collapse-menu-text: var(--color-sidebar-text-alternative);
diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss
index 81cf23f03f1d..3b850ab2c3c6 100644
--- a/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss
+++ b/packages/calypso-color-schemes/src/shared/color-schemes/_sakura.scss
@@ -31,36 +31,36 @@
 	--color-primary-100: var(--studio-celadon-100);
 	--color-primary-100-rgb: var(--studio-celadon-100-rgb);
 
-	--color-accent: var(--studio-blue-50);
-	--color-accent-rgb: var(--studio-blue-50-rgb);
-	--color-accent-dark: var(--studio-blue-70);
-	--color-accent-dark-rgb: var(--studio-blue-70-rgb);
-	--color-accent-light: var(--studio-blue-30);
-	--color-accent-light-rgb: var(--studio-blue-30-rgb);
-	--color-accent-0: var(--studio-blue-0);
-	--color-accent-0-rgb: var(--studio-blue-0-rgb);
-	--color-accent-5: var(--studio-blue-5);
-	--color-accent-5-rgb: var(--studio-blue-5-rgb);
-	--color-accent-10: var(--studio-blue-10);
-	--color-accent-10-rgb: var(--studio-blue-10-rgb);
-	--color-accent-20: var(--studio-blue-20);
-	--color-accent-20-rgb: var(--studio-blue-20-rgb);
-	--color-accent-30: var(--studio-blue-30);
-	--color-accent-30-rgb: var(--studio-blue-30-rgb);
-	--color-accent-40: var(--studio-blue-40);
-	--color-accent-40-rgb: var(--studio-blue-40-rgb);
-	--color-accent-50: var(--studio-blue-50);
-	--color-accent-50-rgb: var(--studio-blue-50-rgb);
-	--color-accent-60: var(--studio-blue-60);
-	--color-accent-60-rgb: var(--studio-blue-60-rgb);
-	--color-accent-70: var(--studio-blue-70);
-	--color-accent-70-rgb: var(--studio-blue-70-rgb);
-	--color-accent-80: var(--studio-blue-80);
-	--color-accent-80-rgb: var(--studio-blue-80-rgb);
-	--color-accent-90: var(--studio-blue-90);
-	--color-accent-90-rgb: var(--studio-blue-90-rgb);
-	--color-accent-100: var(--studio-blue-100);
-	--color-accent-100-rgb: var(--studio-blue-100-rgb);
+	--color-accent: var(--color-deprecated-blue-50);
+	--color-accent-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-dark: var(--color-deprecated-blue-70);
+	--color-accent-dark-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-light: var(--color-deprecated-blue-30);
+	--color-accent-light-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-0: var(--color-deprecated-blue-0);
+	--color-accent-0-rgb: var(--color-deprecated-blue-0-rgb);
+	--color-accent-5: var(--color-deprecated-blue-5);
+	--color-accent-5-rgb: var(--color-deprecated-blue-5-rgb);
+	--color-accent-10: var(--color-deprecated-blue-10);
+	--color-accent-10-rgb: var(--color-deprecated-blue-10-rgb);
+	--color-accent-20: var(--color-deprecated-blue-20);
+	--color-accent-20-rgb: var(--color-deprecated-blue-20-rgb);
+	--color-accent-30: var(--color-deprecated-blue-30);
+	--color-accent-30-rgb: var(--color-deprecated-blue-30-rgb);
+	--color-accent-40: var(--color-deprecated-blue-40);
+	--color-accent-40-rgb: var(--color-deprecated-blue-40-rgb);
+	--color-accent-50: var(--color-deprecated-blue-50);
+	--color-accent-50-rgb: var(--color-deprecated-blue-50-rgb);
+	--color-accent-60: var(--color-deprecated-blue-60);
+	--color-accent-60-rgb: var(--color-deprecated-blue-60-rgb);
+	--color-accent-70: var(--color-deprecated-blue-70);
+	--color-accent-70-rgb: var(--color-deprecated-blue-70-rgb);
+	--color-accent-80: var(--color-deprecated-blue-80);
+	--color-accent-80-rgb: var(--color-deprecated-blue-80-rgb);
+	--color-accent-90: var(--color-deprecated-blue-90);
+	--color-accent-90-rgb: var(--color-deprecated-blue-90-rgb);
+	--color-accent-100: var(--color-deprecated-blue-100);
+	--color-accent-100-rgb: var(--color-deprecated-blue-100-rgb);
 
 	--color-link: var(--studio-celadon-50);
 	--color-link-rgb: var(--studio-celadon-50-rgb);
@@ -98,7 +98,7 @@
 	--color-masterbar-border: var(--studio-celadon-80);
 	--color-masterbar-text: var(--studio-white);
 	--color-masterbar-icon: var(--studio-white);
-	--color-masterbar-highlight: var(--studio-blue-20);
+	--color-masterbar-highlight: var(--color-deprecated-blue-20);
 	--color-masterbar-item-hover-background: var(--studio-celadon-80);
 	--color-masterbar-item-active-background: var(--studio-celadon-90);
 	--color-masterbar-item-new-editor-background: var(--studio-gray-50);
@@ -114,8 +114,8 @@
 	--color-sidebar-text-rgb: var(--studio-pink-80-rgb);
 	--color-sidebar-text-alternative: var(--studio-pink-60);
 	--color-sidebar-gridicon-fill: var(--studio-pink-70);
-	--color-sidebar-menu-selected-background: var(--studio-blue-50);
-	--color-sidebar-menu-selected-background-rgb: var(--studio-blue-50-rgb);
+	--color-sidebar-menu-selected-background: var(--color-deprecated-blue-50);
+	--color-sidebar-menu-selected-background-rgb: var(--color-deprecated-blue-50-rgb);
 	--color-sidebar-menu-selected-text: var(--studio-white);
 	--color-sidebar-menu-selected-text-rgb: var(--studio-white-rgb);
 	--color-sidebar-menu-hover-background: var(--studio-pink-10);
@@ -125,7 +125,7 @@
 	/* Sidebar Submenu - Nav Unification */
 	--color-sidebar-submenu-background: var(--studio-pink-90);
 	--color-sidebar-submenu-text: #f5e9ed; /* Direct from wp-admin */
-	--color-sidebar-submenu-hover-text: var(--studio-blue-20);
+	--color-sidebar-submenu-hover-text: var(--color-deprecated-blue-20);
 	--color-sidebar-submenu-selected-text: var(--color-sidebar-submenu-text);
 	--color-sidebar-submenu-selected-hover-text: var(--color-sidebar-submenu-text);
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 42f6c32f1ced..cb4e293c66c1 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -29,7 +29,7 @@
 	"dependencies": {
 		"@automattic/calypso-color-schemes": "workspace:^",
 		"@automattic/calypso-url": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/i18n-utils": "workspace:^",
 		"@automattic/load-script": "workspace:^",
 		"@automattic/material-design-icons": "workspace:^",
diff --git a/packages/composite-checkout/package.json b/packages/composite-checkout/package.json
index d6adbc67c932..72cd8bdeb583 100644
--- a/packages/composite-checkout/package.json
+++ b/packages/composite-checkout/package.json
@@ -46,7 +46,7 @@
 	"devDependencies": {
 		"@automattic/calypso-storybook": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@storybook/cli": "^7.6.20",
 		"@storybook/react": "^7.6.20",
 		"@testing-library/dom": "^10.4.0",
diff --git a/packages/page-pattern-modal/package.json b/packages/page-pattern-modal/package.json
index ed95bba4a328..a8dc1534244f 100644
--- a/packages/page-pattern-modal/package.json
+++ b/packages/page-pattern-modal/package.json
@@ -27,7 +27,7 @@
 	],
 	"types": "dist/types",
 	"dependencies": {
-		"@automattic/color-studio": "^3.0.1",
+		"@automattic/color-studio": "^4.1.0",
 		"@automattic/typography": "1.0.0",
 		"@wordpress/base-styles": "5.19.0",
 		"@wordpress/block-editor": "^14.14.0",
diff --git a/yarn.lock b/yarn.lock
index dcbd05b6ea2f..2db9c95d8a91 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -323,7 +323,7 @@ __metadata:
   dependencies:
     "@automattic/calypso-eslint-overrides": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@types/node": "npm:^22.10.10"
     postcss: "npm:^8.5.1"
     postcss-custom-properties: "npm:^11.0.0"
@@ -593,10 +593,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@automattic/color-studio@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@automattic/color-studio@npm:3.0.1"
-  checksum: 1fed9e35e5a4cf283055d323661bf94f8836fbe762c3a1ff7c514407c9cffcae9b05791fb2d4904050c097e939b745c8f2bc13cc84c9963d35c9d1aa57f1fbd8
+"@automattic/color-studio@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@automattic/color-studio@npm:4.1.0"
+  checksum: 545a3c6cf2bc0897e0a5b5630a411db027220f821fc1eba3b50cd6d6cb71ea8c6d1469ef93eaa059855010aa64125f32dbf9b763bc83a8c7af410ee4b9b45f90
   languageName: node
   linkType: hard
 
@@ -673,7 +673,7 @@ __metadata:
     "@automattic/calypso-storybook": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
     "@automattic/calypso-url": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/i18n-utils": "workspace:^"
     "@automattic/load-script": "workspace:^"
     "@automattic/material-design-icons": "workspace:^"
@@ -731,7 +731,7 @@ __metadata:
   dependencies:
     "@automattic/calypso-storybook": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@emotion/react": "npm:^11.11.1"
     "@emotion/styled": "npm:^11.11.0"
     "@storybook/cli": "npm:^7.6.20"
@@ -1626,7 +1626,7 @@ __metadata:
   resolution: "@automattic/page-pattern-modal@workspace:packages/page-pattern-modal"
   dependencies:
     "@automattic/calypso-typescript-config": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/typography": "npm:1.0.0"
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/react": "npm:^16.2.0"
@@ -13688,7 +13688,7 @@ __metadata:
     "@automattic/calypso-sentry": "workspace:^"
     "@automattic/calypso-stripe": "workspace:^"
     "@automattic/calypso-url": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/command-palette": "workspace:^"
     "@automattic/components": "workspace:^"
     "@automattic/composite-checkout": "workspace:^"
@@ -20508,7 +20508,7 @@ __metadata:
     "@automattic/calypso-build": "workspace:^"
     "@automattic/calypso-config": "workspace:^"
     "@automattic/calypso-products": "workspace:^"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/components": "workspace:^"
     "@automattic/typography": "workspace:^"
     "@automattic/wp-babel-makepot": "workspace:^"
@@ -35873,7 +35873,7 @@ __metadata:
     "@automattic/calypso-router": "workspace:^"
     "@automattic/calypso-storybook": "workspace:^"
     "@automattic/charts": "npm:^0.9.0"
-    "@automattic/color-studio": "npm:^3.0.1"
+    "@automattic/color-studio": "npm:^4.1.0"
     "@automattic/command-palette": "workspace:^"
     "@automattic/components": "workspace:^"
     "@automattic/data-stores": "workspace:^"


Reviews:
user: login: jasmussen
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-02-19T12:29:56Z
user: login: adamwoodnz
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T20:59:58Z
user: login: adamwoodnz
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T21:15:45Z
user: login: adamwoodnz
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T21:36:30Z
user: login: adamwoodnz
body: Looking good! I haven't done any further testing, but I checked the color mappings and they look correct apart from a couple I commented on.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T21:40:07Z
user: login: jasmussen
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-06T07:56:58Z
user: login: ddc22
body: Since @Automattic/lego will be looking into more extensive testing I am approving this PR for now after some basic testing on a simple site.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T18:11:07Z
user: login: mirka
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-10T17:38:32Z
user: login: arthur791004
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T05:45:12Z

Review comments:
diff_hunk: @@ -108,7 +108,7 @@
 	--color-masterbar-toggle-drafts-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-toggle-drafts-editor-border: var(--studio-gray-10);
 
-	--color-sidebar-background: var(--studio-blue-60);
+	--color-sidebar-background: #055d9c;
 	--color-sidebar-background-rgb: var(--studio-blue-60-rgb);
path: packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss
user: login: jasmussen
body: For example, why do we have RGB values defined for each of the variables in this scheme file? They don't appear to be ever used.
created_at: 2025-02-19T12:29:56Z
author_association: MEMBER
diff_hunk: @@ -108,7 +108,7 @@
 	--color-masterbar-toggle-drafts-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-toggle-drafts-editor-border: var(--studio-gray-10);
 
-	--color-sidebar-background: var(--studio-blue-60);
+	--color-sidebar-background: #055d9c;
 	--color-sidebar-background-rgb: var(--studio-blue-60-rgb);
path: packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss
user: login: adamwoodnz
body: I've wondered this too, Cursor says:

RGB variables are useful for several reasons, even if they're not immediately visible in direct color assignments:

1. **Alpha Channel Manipulation**: The most common use case is for `rgba()` functions where you need to add transparency. Instead of hardcoding RGB values, you can use the RGB variables:
```scss
// Instead of
background-color: rgba(0, 115, 230, 0.5);

// You can use
background-color: rgba(var(--color-link-rgb), 0.5);
```

2. **Color Mixing**: Modern CSS color functions like `color-mix()` often work better with RGB values:
```scss
background-color: color-mix(in srgb, rgb(var(--color-link-rgb)) 50%, white);
```

3. **Dynamic Color Manipulation**: When using CSS custom properties for dynamic theming or color schemes, having RGB components available makes it easier to create variations:
```scss
.overlay {
  background-color: rgb(var(--color-link-rgb) / 0.8);
}
```

Let me search the codebase for actual usage examples:

Ran tool
Looking at the search results, the RGB variables are actively used throughout the codebase in several important ways:

1. **Transparency Effects**: Many components use rgba() for overlays, shadows, and backgrounds:
```scss
// Examples from the codebase:
background-color: rgba(var(--color-text-rgb), 0.1);  // Reader full post
background-color: rgba(var(--color-neutral-70-rgb), 0.5);  // Edit gravatar
box-shadow: 0 0 0 1px rgba(var(--color-neutral-10-rgb), 0.5);  // Taxonomy manager
```

2. **Elevation and Shadows**: The codebase uses RGB variables extensively for Material Design-like elevation effects:
```scss
// From _elevation.scss
box-shadow: 
  0 1px 1px 0 rgba(var(--color-neutral-100-rgb), 0.14),
  0 2px 1px -1px rgba(var(--color-neutral-100-rgb), 0.12),
  0 1px 3px 0 rgba(var(--color-neutral-100-rgb), 0.2);
```

3. **Gradients**: Used in gradient effects:
```scss
// From wp-login/style.scss
background: linear-gradient(to right, rgba(var(--color-surface-backdrop-rgb), 0), var(--color-surface-backdrop) 90%);
```

4. **Mobile Touch Highlights**: Used for touch feedback on mobile devices:
```scss
-webkit-tap-highlight-color: rgba(var(--color-surface-rgb), 0.4);
```

The RGB variables provide a consistent way to use colors with alpha transparency across the application, which is particularly important for:
- Overlays and modals
- Shadow effects
- Touch feedback
- Visual hierarchy through transparency
- Consistent color manipulation across different themes

So while they might not be directly used as plain RGB values, they're an essential part of the design system's color manipulation capabilities.

created_at: 2025-03-05T20:59:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -108,23 +108,23 @@
 	--color-masterbar-toggle-drafts-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-toggle-drafts-editor-border: var(--studio-gray-10);
 
-	--color-sidebar-background: var(--studio-blue-60);
+	--color-sidebar-background: #055d9c;
 	--color-sidebar-background-rgb: var(--studio-blue-60-rgb);
 	--color-sidebar-border: var(--studio-blue-70);
 	--color-sidebar-text: var(--studio-white);
 	--color-sidebar-text-rgb: var(--studio-white-rgb);
-	--color-sidebar-text-alternative: var(--studio-blue-5);
-	--color-sidebar-gridicon-fill: var(--studio-blue-5);
+	--color-sidebar-text-alternative: #bbe0fa;
+	--color-sidebar-gridicon-fill: #bbe0fa;
 	--color-sidebar-menu-selected-background: var(--studio-yellow-20);
 	--color-sidebar-menu-selected-background-rgb: var(--studio-yellow-20-rgb);
 	--color-sidebar-menu-selected-text: var(--studio-blue-90);
 	--color-sidebar-menu-selected-text-rgb: var(--studio-blue-90-rgb);
-	--color-sidebar-menu-hover-background: var(--studio-blue-50);
+	--color-sidebar-menu-hover-background: #0675c4;
 	--color-sidebar-menu-hover-background-rgb: var(--studio-blue-50-rgb);
 	--color-sidebar-menu-hover-text: var(--studio-white);
 
 	/* Sidebar Submenu - Nav Unification */
-	--color-sidebar-submenu-background: var(--studio-blue-80);
+	--color-sidebar-submenu-background: #02283d;
path: packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss
user: login: adamwoodnz
body: I think `var(--studio-blue-80)` was `#02395c`, see https://github.com/Automattic/color-studio/pull/764/files?diff=unified&w=1#diff-a454ab39981381c132ee553093d01f476558bad46da1444c70c65528e883750bL33
created_at: 2025-03-05T21:15:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -108,23 +108,23 @@
 	--color-masterbar-toggle-drafts-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-toggle-drafts-editor-border: var(--studio-gray-10);
 
-	--color-sidebar-background: var(--studio-blue-80);
+	--color-sidebar-background: #02395c;
 	--color-sidebar-background-rgb: var(--studio-blue-80-rgb);
 	--color-sidebar-border: var(--studio-blue-90);
-	--color-sidebar-text: var(--studio-blue-5);
+	--color-sidebar-text: #bbe0fa;
 	--color-sidebar-text-rgb: var(--studio-blue-5-rgb);
-	--color-sidebar-text-alternative: var(--studio-blue-20);
+	--color-sidebar-text-alternative: #68b3e8;
 	--color-sidebar-gridicon-fill: var(--studio-blue-10);
 	--color-sidebar-menu-selected-background: var(--studio-blue-100);
 	--color-sidebar-menu-selected-background-rgb: var(--studio-blue-100-rgb);
 	--color-sidebar-menu-selected-text: var(--studio-white);
 	--color-sidebar-menu-selected-text-rgb: var(--studio-white-rgb);
-	--color-sidebar-menu-hover-background: var(--studio-blue-70);
+	--color-sidebar-menu-hover-background: #064b7b;
path: packages/calypso-color-schemes/src/shared/color-schemes/_nightfall.scss
user: login: adamwoodnz
body: is this a fix? [`--studio-blue-70` was `#044b7a`](https://github.com/Automattic/color-studio/pull/764/files?diff=unified&w=1#diff-a454ab39981381c132ee553093d01f476558bad46da1444c70c65528e883750bL32)
created_at: 2025-03-05T21:36:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -108,23 +108,23 @@
 	--color-masterbar-toggle-drafts-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-toggle-drafts-editor-border: var(--studio-gray-10);
 
-	--color-sidebar-background: var(--studio-blue-60);
+	--color-sidebar-background: #055d9c;
 	--color-sidebar-background-rgb: var(--studio-blue-60-rgb);
 	--color-sidebar-border: var(--studio-blue-70);
 	--color-sidebar-text: var(--studio-white);
 	--color-sidebar-text-rgb: var(--studio-white-rgb);
-	--color-sidebar-text-alternative: var(--studio-blue-5);
-	--color-sidebar-gridicon-fill: var(--studio-blue-5);
+	--color-sidebar-text-alternative: #bbe0fa;
+	--color-sidebar-gridicon-fill: #bbe0fa;
 	--color-sidebar-menu-selected-background: var(--studio-yellow-20);
 	--color-sidebar-menu-selected-background-rgb: var(--studio-yellow-20-rgb);
 	--color-sidebar-menu-selected-text: var(--studio-blue-90);
 	--color-sidebar-menu-selected-text-rgb: var(--studio-blue-90-rgb);
-	--color-sidebar-menu-hover-background: var(--studio-blue-50);
+	--color-sidebar-menu-hover-background: #0675c4;
 	--color-sidebar-menu-hover-background-rgb: var(--studio-blue-50-rgb);
 	--color-sidebar-menu-hover-text: var(--studio-white);
 
 	/* Sidebar Submenu - Nav Unification */
-	--color-sidebar-submenu-background: var(--studio-blue-80);
+	--color-sidebar-submenu-background: #02283d;
path: packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss
user: login: jasmussen
body: Nice one, pushed a fix for this and your other bit.
created_at: 2025-03-06T07:56:58Z
author_association: MEMBER
diff_hunk: @@ -108,7 +108,7 @@
 	--color-masterbar-toggle-drafts-editor-hover-background: var(--studio-gray-40);
 	--color-masterbar-toggle-drafts-editor-border: var(--studio-gray-10);
 
-	--color-sidebar-background: var(--studio-blue-60);
+	--color-sidebar-background: #055d9c;
 	--color-sidebar-background-rgb: var(--studio-blue-60-rgb);
path: packages/calypso-color-schemes/src/shared/color-schemes/_aquatic.scss
user: login: mirka
body: We can now use [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) in the browser, which pretty much eliminates the need for keeping around a RGB version of a CSS color variable. Virtually all use cases I've encountered just need to manipulate the transparency or lightness, so `color-mix` is sufficient. We were increasing adoption of it [in Gutenberg](https://github.com/search?q=repo%3AWordPress%2Fgutenberg%20color-mix(&type=code)), and it's likely  possible to get rid of the RGB color variables once we move every use case to `color-mix`.

Not sure what "Modern CSS color functions like `color-mix()` often work better with RGB values" means — I haven't encountered an issue yet with hex color variables.
created_at: 2025-03-10T17:38:32Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-02-11T09:37:44Z
body: <details>
<summary>Calypso Live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-136343">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-136343%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-136343">https://calypso.live?image=registry.a8c.com/calypso/app:build-136343</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Jetpack Cloud live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-136343&env=jetpack">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-136343%26env%3Djetpack%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-136343&env=jetpack">https://calypso.live?image=registry.a8c.com/calypso/app:build-136343&env=jetpack</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Automattic for Agencies live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-136343&env=a8c-for-agencies">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-136343%26env%3Da8c-for-agencies%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-136343&env=a8c-for-agencies">https://calypso.live?image=registry.a8c.com/calypso/app:build-136343&env=a8c-for-agencies</a>
</td>
</tr>
</table>
</details>
<!--calypso-live-watermark:apr@v1-->
author_association: NONE
user: login: matticbot
created_at: 2025-02-11T09:42:51Z
body: **This PR modifies the release build for the following Calypso Apps:**

_For info about this notification, see here: PCYsg-OT6-p2_

* blaze-dashboard
* command-palette-wp-admin
* happy-blocks
* help-center
* notifications
* odyssey-stats
* whats-new
* wpcom-block-editor

To test WordPress.com changes, run `install-plugin.sh $pluginSlug update/color-studio-4.1.0-alt` on your sandbox.
<!--calypso-app-artifacts-watermark:apr@v1-->
author_association: CONTRIBUTOR
user: login: matticbot
created_at: 2025-02-11T09:44:56Z
body: <!-- icfy-watermark: c52822 -->
This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at [iscalypsofastyet.com](http://iscalypsofastyet.com).
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-02-11T09:46:56Z
body: Note, one thing to really test here is whether the color variables for the old default are truly reflective of that color scheme. The list of variables seems drastically reduced compared to other schemes. To recap and help testers:

* Blueberry is the default brandcolor for WP.com. Color: #3858e9
* The "Modern" color scheme (Users > Profile > Color Scheme) uses Blueberry.
* The "Modern" color scheme is default for new Simple sites.
* The WordPress core default color scheme is "Default", and its CSS classes in the HTML dom refer to it as `fresh`, `admin-color-fresh`, or variants thereof. Color: #2271b1
* Atomic sites still default to "Default" color scheme.

This PR removes the legacy blue (#2271b1). This shade should not be used for anything but users who explicitly choose the "Default" color scheme in their wp-admins. For everything else, the Blueberry blue (#3858e9) should be used. 

So the way to test this is: check out this PR, then change as many contexts as you can to the _classic/legacy/default/not-modern_ color scheme, and verify that you see the correct legacy colors, and not the blueberry colors.
author_association: MEMBER
user: login: tyxla
created_at: 2025-02-11T10:04:54Z
body: Perhaps @Automattic/lego could help since I they worked on moving color scheme management to wp-admin and have experience testing them?
author_association: MEMBER
user: login: adamwoodnz
created_at: 2025-02-12T02:31:24Z
body: I've managed to find Blueberry in some screens with my profile admin color scheme set to default:

![Screenshot 2025-02-12 at 3 15 53 PM](https://github.com/user-attachments/assets/ff047a9d-6c70-40ec-b308-60fed513a1b2)

On the [Jetpack activity view](http://calypso.localhost:3000/activity-log/pixelantics66.wpcomstaging.com) links are Blueberry

![Screenshot 2025-02-12 at 3 12 54 PM](https://github.com/user-attachments/assets/e978bcc8-2d0e-4014-a0ae-2e52539c7272)

![Screenshot 2025-02-12 at 3 13 15 PM](https://github.com/user-attachments/assets/7fd41de7-cd85-42c6-81ae-de0347ab381c)

This is due to the link color still being set to studio blue

<img src="https://github.com/user-attachments/assets/79d06ac9-0014-45fd-b043-02525ca17c80" width="300">
<img src="https://github.com/user-attachments/assets/336fc5f8-fcc4-4ea3-b664-c9f55d34630f" width="300">

I've found this having an effect in other places too, given what a low level style it is. Hardcoding this variable as well in `_fresh.scss` fixes it:
```
--color-link: #2271b1;
```
author_association: CONTRIBUTOR
user: login: lsl
created_at: 2025-02-12T05:23:52Z
body: Looks like the wpcom (non-core) color schemes have a few problems where they rely on that default blue being the old blue. Some of the changes look ok but others look quite broken. You'll probably need to go through each one and make a judgement call.

Blue scheme Staging:

https://github.com/user-attachments/assets/3821aea1-e00a-4e2c-a897-a0c25025712a 

Blue scheme calypso.live:

https://github.com/user-attachments/assets/aaf93204-f69c-4627-9575-da01c73d2e9a 

| Aquatic staging | Aqutic calypso.live | 
| --- | --- |
| ![Screenshot 2025-02-12 at 16-10-22 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/fc3e9e0a-b58a-4d3d-bed5-bcc36064db65) | ![Screenshot 2025-02-12 at 16-02-09 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/061dc187-7ed6-4e2c-8f99-9388b7b8dfcc) |

Classic blue:
![Screenshot 2025-02-12 at 16-11-12 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/71b4c3a4-6b1f-4d96-8797-2e89f33bb0d5)

Classic bright:
![Screenshot 2025-02-12 at 16-11-54 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/feb8e4b2-401c-4fad-b7ba-c9b115d17c52)

High contrast is seeing a change but probably fine to leave as is.

Ectoplasm: Just links as [mentioned above](https://github.com/Automattic/wp-calypso/pull/99580#issuecomment-2652507261)

Night fall:
![Screenshot 2025-02-12 at 16-15-24 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/fd0dbd61-54bb-4d75-b1c0-b5ea394c7baa)

Powder snow and Sakura are also seeing some issues.


author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-02-17T08:50:33Z
body: > I've found this having an effect in other places too, given what a low level style it is. Hardcoding this variable as well in _fresh.scss fixes it:

@adamwoodnz good catch. Feel free to push to the branch if that helps!
author_association: MEMBER
user: login: jasmussen
created_at: 2025-02-17T08:52:09Z
body: Thanks for testing, @lsl, appreciate that. I'll need to push some further changes to land this, which unfortunately will delay it as my days are full with some other things at least mon/tues. If any of you are in the code and see paths forward, feel free to push, otherwise I'll get back to it!
author_association: MEMBER
user: login: adamwoodnz
created_at: 2025-02-18T00:39:43Z
body: > @adamwoodnz good catch. Feel free to push to the branch if that helps!

I pushed the link color change [dd65a51](https://github.com/Automattic/wp-calypso/pull/99580/commits/dd65a51385e9d93e1479edc97b20c6d6b16efc2b)
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-02-19T11:44:05Z
body: I dove into this PR today with a desire to address all these issues, and ran into some technical questions testing these changes on wp.com, would appreciate any direction on how to best deploy Calypso patches to my sandbox in case you have any. 

Though as I dove into the codebase on the Calypso side of things, the more I realize how these color schemes are not in a great place. They are visually dated, and they rely on 651 CSS variables being loaded seemingly _everywhere_:

![Screenshot 2025-02-19 at 11 58 58](https://github.com/user-attachments/assets/9065ec61-92a7-4235-9784-59f95141491e)

This is not a fix for this particular PR; but I can't help but question: why do we have so many variables loaded for every singe pageload on the site? This can't be great for performance, even if cached, it's a lot of RAM overhead for no reason since 95% of the variables are never referenced depending on the particular color scheme in question. Instinct: instead of these color schemes referencing CSS variables, they should all be hardcoded. It's honestly a bit of a headache to figure out why some colors are defined, other colors reference a variable, and still others are variables referencing other variables. 

Be that as it may, and based purely on the visual screenshots shared (thank you @lsl), here's my suggested colors, all to be hardcoded for the individual pieces, in case any of you have bandwidth to help land this:

Blue:

* `--color-accent-60): #04526e;`

Aquatic:

* `--color-masterbar-background: #02395c;`
* `--color-sidebar-submenu-background: #02283d;`
* `--color-sidebar-background: #055d9c;`

Classic Blue:

* `--color-sidebar-submenu-background: #044b7a;`

Classic Bright:

* `--color-sidebar-submenu-background: #e9f0f6;`

Note even in the shipping software, this color scheme appears bugged. And it's really not great, most of these should be deprecated:
![Screenshot 2025-02-19 at 12 36 13](https://github.com/user-attachments/assets/3d17bca9-01e0-4b8a-b009-55b627959f5f)

Nightfall:

* `--color-masterbar-background: #001621;`
* `--color-sidebar-background: #02395c;`
* `--color-sidebar-text: #bbe0fa;`
* `--color-sidebar-submenu-background: #01283d;`

That should let us ideally land this PR.

Sakura and Powder Snow is reported. Powder snow appears separately broken, worth both fixing as a followup, and deprecating honestly:

![Screenshot 2025-02-19 at 12 42 38](https://github.com/user-attachments/assets/0b669688-51e1-47cb-90f8-7622a2e7dcd2)

Sakura, also worth retiring, will arguably look better with a fresher blue:
![Screenshot 2025-02-19 at 12 42 47](https://github.com/user-attachments/assets/67a7d2e7-d0b4-4240-9890-948d358c2447)


author_association: MEMBER
user: login: jasmussen
created_at: 2025-02-19T12:29:19Z
body: Okay I made some progress on this, though will still need to test in contexts beyond Calypso. The reported schemes should be okay now:

![Screenshot 2025-02-19 at 12 57 13](https://github.com/user-attachments/assets/bb681b1e-125f-4242-89d6-637195ef76e2)

![Screenshot 2025-02-19 at 13 17 48](https://github.com/user-attachments/assets/c8c6eab1-66f1-4c0e-b52d-c621993a0efc)

![Screenshot 2025-02-19 at 13 19 46](https://github.com/user-attachments/assets/fcc3f597-8679-4085-8bfc-43c45b7c7dd4)

![Screenshot 2025-02-19 at 13 21 00](https://github.com/user-attachments/assets/c518158c-c4f4-48e0-9565-079c363bf9d2)

![Screenshot 2025-02-19 at 13 26 57](https://github.com/user-attachments/assets/14944923-ac70-4e89-b1ab-09ef4ddc8d60)

I still find the extensive use of variables pretty overwhelming. Especially for these color schemes, it appears that 90% of the code in these scheme files is duplicative and redundant and never used, or even meant to be used. That makes it super tricky to update this, so would appreciate input.
author_association: MEMBER
user: login: jasmussen
created_at: 2025-02-24T12:33:53Z
body: @Automattic/team-calypso I'd appreciate help on how we can get this landed. I'll rebase now, and honestly feel tempted to see if we can land it as-is, but otherwise would appreciate if you could help test, or ping more broadly to get some eyes on this. Thank you!

author_association: MEMBER
user: login: tyxla
created_at: 2025-02-24T15:37:38Z
body: @jasmussen my understanding is this is mostly about testing - in wp-admin, with changes to some/all Calypso apps applied, and broadly in Calypso. 

Does it make sense to post a call for testing on the call for testing p2 - dtkmj-p2 ?

Otherwise, if we're more or less confident in the changes, we can move forward, ship early in the day, and do a bunch of testing after shipping + staying available to revert if something goes wrong.
author_association: MEMBER
user: login: lsl
created_at: 2025-02-25T00:24:53Z
body: Hey sorry for the slow response, testing this takes a rather large chunk of time.

Main issues seem to be blueberry leaking into color scheme link text and button accents. These are likely not set on the themes and leverage the default color scheme. I think these should probably just be hardcoded across all themes so we're not relying on default fallbacks.

I'm also seeing some bugs with icon color and mismatches between wp-admin and calypso, these aren't regressions so you don't need to try and fix them here but I think we might need to follow up on these if it's going to be a while before untangling removes the calypso based sidebar. cc @Copons 

Separately from icon colors, there are some other differences between wp-admin and calypso, these are the main concern unless there is going to be a similar update to the wp-admin side that reproduces the changes. ([wp-admin loads wpcom colors here](https://github.com/Automattic/jetpack/blob/trunk/projects/packages/jetpack-mu-wpcom/src/features/admin-color-schemes/admin-color-schemes.php#L15), [colors in subdir here](https://github.com/Automattic/jetpack/blob/trunk/projects/packages/masterbar/src/admin-color-schemes/class-admin-color-schemes.php#L15-L16)).

Let me know if you need clarification on the below, I'm aware my notes below are rather terse.

### Light theme
| Prod | Patch | WP Admin |
| --- | --- | --- |
| ![Screenshot_2025-02-25_09-41-28](https://github.com/user-attachments/assets/c42f1eb3-7469-4cf0-a60d-4a39dce0a05c) | ![Screenshot_2025-02-25_09-41-01](https://github.com/user-attachments/assets/bac3c3b5-c486-486f-a8a3-d6537bbeb239) | ![Screenshot_2025-02-25_09-42-55](https://github.com/user-attachments/assets/66ae7cd0-beff-496d-ad30-01d9ff233bbb) |

- [x] Hover background color blue being overridden

### Aquatic theme 

| Prod | Patch | WP Admin |
|---|---|---|
| ![Screenshot(97)](https://github.com/user-attachments/assets/835e520c-3239-4ef9-8e02-dd753c288e92) | ![Screenshot 2025-02-25 at 09-19-25 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/f78cdf1f-3429-4b1e-b803-8d3f07b92b1c) |  ![Screenshot 2025-02-25 at 09-19-35 Profile ‹ Site Title — WordPress](https://github.com/user-attachments/assets/b7e334f5-717d-4ca7-94a2-b3923b55caee) |

- [x] Site card domain text color
- [ ] Icon color mismatching

### Blue

| Prod | Patch | WP Aadmin |
| --- | --- | --- |
| ![Screenshot 2025-02-25 at 09-48-09 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/efb45534-3094-4b94-9573-af2d1bb772dd) | ![Screenshot 2025-02-25 at 09-48-15 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/ea7b4d75-4006-4ecc-946e-0cc4625ba64e) | ![Screenshot(103)](https://github.com/user-attachments/assets/5e8e8e89-8626-4fb3-95ae-1b8c2d603bd8) |
| ![Screenshot(104)](https://github.com/user-attachments/assets/6a837d1c-bcda-4bfd-9081-506e0eb3c266) | ![Screenshot 2025-02-25 at 09-50-19 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/dd283a57-e681-4310-8306-636d93dd6db9) | ![Screenshot 2025-02-25 at 09-53-46 Dashboard ‹ Site Title — WordPress](https://github.com/user-attachments/assets/5d82adba-f4d9-48c8-a3df-223e6682ed6b) |

- [x] The button hover background color has a new blue (doesn't match wp-admin)
- [ ] The accent color doesn't match core wp-admin buttons (note yellow save button)
- [x] The link text has changed, I kind of expect this (it matches the illustration color) but I don't think blueberry really works for this theme's link text

### Classic Blue

| Prod | Patch | WP Aadmin |
| --- | --- | --- |
| ![Screenshot(105)](https://github.com/user-attachments/assets/a8c65c4e-d810-4917-98b5-7d2a96f028bc) | ![Screenshot(107)](https://github.com/user-attachments/assets/2b37a97e-d686-4234-8f95-4f4872a84a8e) | ![Screenshot(106)](https://github.com/user-attachments/assets/c647afda-7c3c-41dd-bb3d-b9c5ab90b59b) |
| ![Screenshot_2025-02-25_10-01-48](https://github.com/user-attachments/assets/74a94c6a-f200-4c58-af84-2891381d2b48) | ![Screenshot_2025-02-25_10-02-04](https://github.com/user-attachments/assets/a7d52cbf-ed07-4c55-8228-b8e0c93ecf8b) | ![Screenshot_2025-02-25_10-03-52](https://github.com/user-attachments/assets/eadf6c3b-2630-493f-b9cd-bfcd5046434d) |
| ![Screenshot_2025-02-25_10-03-25](https://github.com/user-attachments/assets/459121ac-30cb-485f-8b3f-cdc1c1a3b81a) | ![Screenshot_2025-02-25_10-03-08](https://github.com/user-attachments/assets/15af000c-d389-4841-9675-08f28f854083) | ![Screenshot_2025-02-25_10-03-40](https://github.com/user-attachments/assets/ea4efc62-0ccd-4e44-bb43-2b5b8e92dff4) |

This icon mismatch also effects "Classic Blue" theme, but the issue is both in prod and in patch, this might require a bug fix in calypso, if it does I'd ship this and create a follow up issue in the one board for groundskeeping to take care of.

- [ ] Icon color mismatching (not a regression, but is a bug)
- [x] Link text is blueberry, mismatch vs wpadmin/prod
- [x] Dropdown menu is blueberry in patch, mismatch vs admin/prod
- [ ] ~Sidebar submenu no hover is correct in patch, broken in prod~ No fix needed
- [ ] ~Sidebar submenu hover is more correct in patch, wrong color in prod~ No fix needed

### Classic Bright

| Prod | Patch | WP Admin |
| --- | --- | --- |
| ![Screenshot(98)](https://github.com/user-attachments/assets/f05b9342-f814-4d25-b3ec-c7460c41d1a9) | ![Screenshot 2025-02-25 at 09-27-55 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/b9074350-0334-4f9d-ada4-f3541185b175) | ![Screenshot 2025-02-25 at 09-30-59 Profile ‹ Site Title — WordPress](https://github.com/user-attachments/assets/018287c8-40fb-497f-bc2a-748ad541a4ab) |
| ![Screenshot 2025-02-25 at 10-13-15 Subscribers ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/565d5dc2-4796-48ab-b339-6aad109f7bdb) | ![Screenshot(108)](https://github.com/user-attachments/assets/62f2f0d9-bca0-41b3-96a6-e850c93d5c55) |  ![Screenshot 2025-02-25 at 09-30-59 Profile ‹ Site Title — WordPress](https://github.com/user-attachments/assets/018287c8-40fb-497f-bc2a-748ad541a4ab) |


- [x] Top bar blueberry
- [ ] Missing background color on selected menu item
- [x] Link text is blueberry, mismatch vs wpadmin/prod
- [x] Sidebar selected color seems off
- [ ] Submenu background color both on hover and without is different for wp-admin/calypso (not regression, still bug)

### Classic Dark

- [x] Blueberry link text

### Contrast

| Prod | Patch | WP Admin |
| --- | --- | --- |
| ![Screenshot(101)](https://github.com/user-attachments/assets/9a799af3-0800-43b5-bb1d-90b10156de3f) | ![Screenshot 2025-02-25 at 09-37-58 My Home ‹ Site Title — WordPress com](https://github.com/user-attachments/assets/fcb26d64-9bf7-4695-affa-6bad3f49a41d) | ![Screenshot 2025-02-25 at 09-38-04 Profile ‹ Site Title — WordPress](https://github.com/user-attachments/assets/13a0c768-e67d-4bd3-a34a-79c4564364f8) |
| ![Screenshot_2025-02-25_10-23-19](https://github.com/user-attachments/assets/24d384a0-b191-4a58-af83-ce9472a556e3) | ![Screenshot_2025-02-25_10-23-06](https://github.com/user-attachments/assets/d643d1e9-d5cd-41f3-b685-e0734ffabe68) | ![Screenshot_2025-02-25_10-22-50](https://github.com/user-attachments/assets/35e27be8-b3d7-4b61-812d-f551efdf9a60) |

- [x] Button color a accent should match wp-admin/prod, currently blueberry in patch
- [ ] Icon colors on hover in sidebar (not regression, still bug, mismatch with wp-admin)

### Ectoplasm

- [x] Blueberry link text

### Midnight

- [x] Blueberry link text

### Nightfall

- [x] Blueberry link text
- [ ] Icon color mismatch - same bug as earlier?

### Ocean

- [x] Blueberry link text

### Powder snow

- [x] Blueberry link text
- [x] Button accent color is now blueberry (mismatch with wp-admin)

### Sakura
- [x] Button accent color is now blueberry (mismatch with wp-admin)

### Sunrise
- [x] Blueberry link text

### Sunset
- [ ] Menu icon color on hover different between wp-admin and calypso (not regression, but bug)



author_association: CONTRIBUTOR
user: login: lsl
created_at: 2025-02-25T01:14:01Z
body: > I still find the extensive use of variables pretty overwhelming. Especially for these color schemes, it appears that 90% of the code in these scheme files is duplicative and redundant and never used, or even meant to be used. That makes it super tricky to update this, so would appreciate input.

I agree, I see the main source of these issues being our non core color schemes but if you think it's more to do with the implementation choices please share that (or any other thoughts) here: pbxlJb-6Vm-p2 (proposal to sunset the non-core color schemes)
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-02-25T10:31:06Z
body: Excellent testing, thanks a bunch. I wrote a longish philosophical comment on the post you linked, thanks. I definitely think there are some color schemes we can sunset. But as also alluded to, I expect a lot of this code to eventually be deleted, retired, improved on the core side. so I'm keen to figure out how we can move this forward without breaking our necks on fixing minutia. If we do decide to fix the list you outlined, it's tremendously useful, an in fact anyone should feel free to push fixes to those. The main tricky bit is an example like this one:

![Screenshot 2025-02-25 at 11 26 24](https://github.com/user-attachments/assets/3e82ff4b-fe4e-4d52-ad6f-6c7534ee1865)

Text doesn't even meet contrast ratios in this example. I recognize this is inherited from core, but per the following question below, it does make me wonder the exact ratio of effort to result worth investing in this, and whether there's a different way to approach this.

But I'm still trying to understand the inner mechanics of color schemes as they exist on dotcom: why _do_ they exist? As a provocation, what if the dotcom schemes were entirely deleted, stopped existing, what would happen? If we are untangling towards mostly-pure WordPress core running for each admin, then theoretically this should be possible no?
author_association: MEMBER
user: login: ciampo
created_at: 2025-02-26T15:27:20Z
body: I don't have any context of calypso color schemes, but in general, it would be better to _delete_ code first and then _refactor_ what's left, as the refactor will be much simpler.
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-02-27T08:58:10Z
body: To be fair, though, this PR deletes an entire color from Color Studio. 
author_association: MEMBER
user: login: southp
created_at: 2025-02-27T10:22:49Z
body: I'm not an expert here. However, from the impressively comprehensive test done by @lsl above, my take is that it's likely not practical to expect one PR would contain all the fixes. However, the dilemma here is to decide on what are the visual inconsistencies we can accept to enable incremental delivery. If all the remaining issues are from calypso color schemes, there are two potential options on top of mind:

1. Deploy this PR and then fix each scheme case by case, like one PR per one scheme.
2. Revert the `color-studio` update of the `calypso-color-scheme` package and somehow make it isolated from the rest of the code base, e.g. when worked on [this PR](https://github.com/Automattic/wp-calypso/pull/100208/files), I noticed `plans-grid-next` indirectly depends on the `color-studio` version of `calypso-color-scheme`. That way we could "freeze" them while working on the general. If we eventually deprecate those color schemes, this would actually make a lot of sense.

I'm not sure if they'd work, but I'd like to share to see if we can agree on a balanced way to unblock this PR first.
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-02-27T11:06:26Z
body: Any preferences on the above approaches? FWIW since most of those existing color schemes are so poor, I'm okay with the present state. Though I can also continue on this track, and seek to address all the code changes outlined (though even then I suspect there will be some followup). I can also pair with a developer on any followups; in building this, it's been tricky to get all the different app contexts to compile and sync to the sandbox, that's been the bigger bottleneck than actually converting CSS variables to hex codes.
author_association: MEMBER
user: login: lsl
created_at: 2025-02-28T00:32:04Z
body: I'd rather we didn't knowingly ship regressions to users but I do see these as pretty low impact so maybe it's not that big of a deal?

Btw, it's a big list but they're mostly the same issue repeated. I think it's probably only like 3-4 distinct issues, a couple of background variables and some link text color? Personally I'd just fix them here and move on but if this PR is too big to do in one step you could fix the child color scheme assumptions first and then ship the package update standalone after.

The main issue seems to be that some color schemes have made the assumption that studio-blue wouldn't change or are implicitly relying that assumption through the dependency on it in the default theme.

To fix, you could make all those assumptions explicit, either by replacing studio-blue usage with the old value or overriding studio-blue itself.

That should fix most of the issues introduced by the package update. I wouldn't fix the preexisting bugs in this PR.
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-03-03T07:49:26Z
body: Super valid points. I'll do my best to address the remaining pieces, hopefully we can land this one. I may not get too much time for it today, but will definitely get to it, and of course, it's also open to code pushes.
author_association: MEMBER
user: login: ddc22
created_at: 2025-03-04T20:37:38Z
body: @jasmussen have some time on my hands happy to collaborate with you on this :)
I did some query analysis and seems like we have an order in which we can follow testing. The lion share of the testing needs to happen for the `fresh` theme. (This is from all accounts grouped by `admin_color`)

https://github.com/Automattic/martech/blob/master/docs/share-code/stats/admin-color-counts.MD
We can cover ~99.9% of cases if we test `fresh`, `modern`, `classic` themes thoroughly.

author_association: CONTRIBUTOR
user: login: tyxla
created_at: 2025-03-05T07:11:23Z
body: > @jasmussen have some time on my hands happy to collaborate with you on this :) I did some query analysis and seems like we have an order in which we can follow testing. The lion share of the testing needs to happen for the `fresh` theme. (This is from all accounts grouped by `admin_color`)
> 
> https://github.com/Automattic/martech/blob/master/docs/share-code/stats/admin-color-counts.MD We can cover ~99.9% of cases if we test `fresh`, `modern`, `classic` themes thoroughly.

Thanks for this @ddc22! The data represents another reason to consider removing a bunch of the color schemes.
author_association: MEMBER
user: login: jasmussen
created_at: 2025-03-05T09:42:55Z
body: Excellent stats, thanks all again for all the help. I just rebased, and I'm looking a bit at this today. 

~One thing, I can't reproduce the "Hover background color blue being overridden" for the _light theme_. Here's what I see with this patch on my local env:~

![Screenshot 2025-03-05 at 10 41 07](https://github.com/user-attachments/assets/60cac68f-a66e-4f0a-805d-a67bc9bff311)

So I've tentatively checked that box, but if I'm not testing right, let me know!

Edit: by the way check out those sidebar icon colors 🙈 — I'm not touching this for the moment since that appears to be trunk.

Edit 2: It wasn't fixed. I believe I've now fixed it, however.
author_association: MEMBER
user: login: jasmussen
created_at: 2025-03-05T09:54:06Z
body: Edited my previous comment, I had made an error, though I've pushed a fix now. 

As noted, though, I'm actually ignoring the icon color mismatches, because a lot of that is present in trunk. Here's aquatic trunk:

![Screenshot 2025-03-05 at 10 52 39](https://github.com/user-attachments/assets/134a665f-a014-4705-a031-358033aab6ad)

author_association: MEMBER
user: login: jasmussen
created_at: 2025-03-05T10:02:04Z
body: > The accent color doesn't match core wp-admin buttons (note yellow save button)

Pushing back on this, this appears an intentional design choice, given this is present in trunk. I'm not necessarily disagreeing with you that this inconsistency is poor, it definitely is, and it's further an argument for revisiting/retiring some color schemes. 

For this and other color issues that are already present in trunk, do you agree these are best to keep tracked (I've left the boxes unchecked), and follow up with separately if need be?
author_association: MEMBER
user: login: jasmussen
created_at: 2025-03-05T10:22:27Z
body: Took a different approach to the classic bright theme, and replaced every reference of "Studio Blue" in the theme file. It is a bit of an attempt to do less whack a mole, and separate concerns as far as what should go in this PR vs. followups.
author_association: MEMBER
user: login: jasmussen
created_at: 2025-03-05T10:39:53Z
body: Took the same approach with contrast as with some of the "classic bright" etc. There was a staggering amount of looping variable logic and duplication here, and it's curious to see how different each color scheme is. Some of them have vastly more code than others, yet for all of them we're talking maybe 5-10 colors in total.
author_association: MEMBER
user: login: jasmussen
created_at: 2025-03-05T10:55:46Z
body:  Powder snow should be good now too.
author_association: MEMBER
user: login: jasmussen
created_at: 2025-03-05T11:06:31Z
body: Okay, I'm done with [the list](https://github.com/Automattic/wp-calypso/pull/99580#issuecomment-2680019125), absent the items that remain an issue in trunk itself. I can follow up with those, but as noted above, I've intentionally not touched those:

* To keep an already big PR as small as possible.
* To separate concerns: those bugs were not issues with the color studio update.
* Given recent feedback, there are efforts to potentially sunset some of these, so it's hard to balance the investment of time in this. 

Thanks again for all the support. I would appreciate now a thorough review on this PR, hopefully a green check so we can land it. I feel like I've been in a cosmic battle with Entropy, and I'm not sure who won.
author_association: MEMBER
user: login: ddc22
created_at: 2025-03-05T21:14:23Z
body: I did some general testing with the top 3 most prevalent themes on simple site. Did not find any descrepancies with production for default, modern and classic. I have only tested with simple sites however. @lsl can you give me some tips on how to test on atomic sites (If that is something we aim to do here?). Or simple sites wp-admin for that matter 🤔.
author_association: CONTRIBUTOR
user: login: lsl
created_at: 2025-03-06T00:26:59Z
body: wp-admin color schemes are configured in Jetpack: 

https://github.com/Automattic/jetpack/blob/update/add-domain-button/projects/packages/jetpack-mu-wpcom/src/features/admin-color-schemes/admin-color-schemes.php#L15

I suspect these packages need updating and deploying around the same time the calypso changes are deployed:

https://github.com/Automattic/jetpack/blob/update/add-domain-button/projects/packages/masterbar/package.json#L27-L28

Is it possible to release a new version of the `@automattic/calypso-color-schemes` package without shipping it to users straight away?

Probably worth pre-testing these package updates as we have some kind of consistency handling and core overrides for these on the wp-admin side:

https://github.com/Automattic/jetpack/blob/update/add-domain-button/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.php#L16-L26

https://github.com/Automattic/jetpack/blob/update/add-domain-button/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss

cc @fushar in case you have anything to add on the above.

Testing mu plugin instructions are in the FG PCYsg-Osp-p2 feel free to jump into #team-lego if you get blocked!
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-03-06T08:02:07Z
body: @lsl Appreciate the testing. I'm reaching the boundaries of my current skill-level in the present codebase, as far as your questions around how to ship the color schemes package or deploy to Jetpack. Are these tasks something you or others can help with?

It's worth restating the potential value of this PR, which is that in one fell swoop it will address hundreds of little color-inconsistencies that are caused by the presence of "Studio Blue", the legacy color that has been deprecated for a while now: p9Jlb4-cQ0-p2. Everything from button colors in cookie notices, to edge-case legacy blue links in random places of the codebase. The perspective of landing this is also to prevent a future build-up of new entropy: since the color will no longer exist in the package, people unfamiliar with the brand guidelines won't be accidentally introducing new instances of legacy blue. 

I share this mostly as an appeal for support in landing this, and as a thank you for all of the same support so far.
author_association: MEMBER
user: login: lsl
created_at: 2025-03-06T08:45:59Z
body: Checked with the team, I think we can pick this up in the next few days.
author_association: CONTRIBUTOR
user: login: ddc22
created_at: 2025-03-06T18:04:58Z
body: @Automattic/martech-autobots I think Dom was in charge of the colour studio. Just pinging you regarding this change that we are replacing the above variables with concrete values instead of values from the colour studio.
author_association: CONTRIBUTOR
user: login: lsl
created_at: 2025-03-07T04:54:36Z
body: The rebase in https://github.com/Automattic/wp-calypso/pull/100974 built ok, maybe it'll work here too :pray: 
author_association: CONTRIBUTOR
user: login: oskosk
created_at: 2025-03-10T12:15:07Z
body: @lsl can you ship this ?
author_association: CONTRIBUTOR
user: login: ryelle
created_at: 2025-03-10T21:08:56Z
body: Just wanted to note that since this PR (actually, the day after [this review](https://github.com/Automattic/wp-calypso/pull/99580#issuecomment-2680019125)), I merged this Jetpack PR which updated the schemes in wp-admin: https://github.com/Automattic/jetpack/pull/40908

I'll give this a quick review now just to ensure the colors still match between calypso & wp-admin.
author_association: CONTRIBUTOR
user: login: ryelle
created_at: 2025-03-10T22:31:52Z
body: There are some differences that are generally pretty minor, so whether you want to consider them blockers or not is up to you. Only the last one (Contrast) is a regression. Most issues are differences between the wp-admin schemes in Jetpack (what you see if you go to a wp-admin page like `wp-admin/edit.php`) vs Calypso schemes, but some differences also exist in the "Classic" vs "Default" view of the calypso sidebar. In most cases, it's a matter of deciding which style to commit to, and I can make a PR to update the Jetpack schemes if we need.

**Aquatic: “Collapse menu” button**

- Matches wpcom production
- Calypso (default & classic): Yellow text with blue icon, yellow text and icon on hover
- Jetpack: Light blue text and icon, yellow text and icon on hover

<img width="319" alt="Screenshot 2025-03-10 at 6 23 11 PM" src="https://github.com/user-attachments/assets/7c803eb5-66b8-4acc-9edc-0bc7be1f1def" />
<img width="169" alt="Screenshot 2025-03-10 at 6 23 40 PM" src="https://github.com/user-attachments/assets/dd81f01e-7f6b-482e-8e74-ebfd214526fb" />

**Classic Blue: submenu text**

- Matches wpcom production
- Calypso default, Jetpack: Submenu text is white
- Calypso classic: Submenu text is light blue

<img width="286" alt="Screenshot 2025-03-10 at 6 27 17 PM" src="https://github.com/user-attachments/assets/1137e835-c5fe-4948-88b2-488c0d5da6d2" />
<img width="181" alt="Screenshot 2025-03-10 at 6 27 28 PM" src="https://github.com/user-attachments/assets/5ef222d8-a729-4791-91aa-ecac2415a476" />

**Classic Bright: submenu item hover color**

- Matches wpcom production
- Calypso (default & classic): Text and border are pink on hover
- Jetpack: Text and border are black on hover

<img width="362" alt="Screenshot 2025-03-10 at 5 53 51 PM" src="https://github.com/user-attachments/assets/1f1efac6-5108-4e09-acf1-a679ef21870b" />
<img width="390" alt="Screenshot 2025-03-10 at 5 53 56 PM" src="https://github.com/user-attachments/assets/410e3177-23a1-48a2-8829-93ceae69e71c" />

**Contrast: submenu item hover color**

- ⚠️  Regression from production
- Calypso default, Jetpack: Text and border are yellow on hover
- Calypso classic: Text and border are blue on hover

<img width="486" alt="Screenshot 2025-03-10 at 5 57 18 PM" src="https://github.com/user-attachments/assets/96aa82fd-e1c0-405a-9d11-0e09697612fb" />
<img width="359" alt="Screenshot 2025-03-10 at 5 57 11 PM" src="https://github.com/user-attachments/assets/ae7578e9-c140-4786-9891-c353674d6f0a" />

author_association: CONTRIBUTOR
user: login: lsl
created_at: 2025-03-11T06:24:56Z
body: > Just wanted to note that since this PR (actually, the day after https://github.com/Automattic/wp-calypso/pull/99580#issuecomment-2680019125), I merged this Jetpack PR which updated the schemes in wp-admin: https://github.com/Automattic/jetpack/pull/40908

Thank you I think this made my life easier!

We retested things today and didn't find any mismatches on the wp-admin side (other than ones already there).

Testing / discussion: p1741672107362889/1741653871.543209-slack-CRWCHQGUB

I've patched link text hover and admin bar dropdown backgrounds but I'm also finding others still expecting the old studio blue values.

Rather than hard coding more and more of these one off, I'm suggesting we take a new approach to get this over the line:

- Revert the hardcoded values introduced above (example: [f98535c](https://github.com/Automattic/wp-calypso/pull/99580/commits/f98535c634bf78296403efaa96b335f5c73333fe))
- Replace existing studio-blue usage in the color schemes with new `--color-deprecated-blue` values (see [b1964bb](https://github.com/Automattic/wp-calypso/pull/99580/commits/b1964bbed05bfd8cd7854fb824feb73e2f036740)).
- Update global + modern color schemes to use studio-blue and override everything set in default in these two schemes only.

@jasmussen could you let me know which themes you expect to be using the new studio blue instead of the old one?

I'm assuming Global + modern above but if we also want to update default we'll need to create a new root for the other color schemes to leverage.
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-03-11T09:52:54Z
body: Thanks for fighting this fight, @lsl, kudos and much appreciated.

> could you let me know which themes you expect to be using the new studio blue instead of the old one?

Just Modern, actually, this one:

![Screenshot 2025-03-11 at 10 48 41](https://github.com/user-attachments/assets/d1c944c2-14f9-48e0-8e39-1f4c4a8f504c)

But that's also the one that WP.com uses by default (see messy context in #98542), and the default set for new simple sites.

That means every other color scheme that references "Studio Blue", assumes it's the legacy blue. I _believe_ it's these schemes:

* "Default" (aka Fresh, and is actually only default on new Atomic sites)
* Light
* Aquatic
* Blue
* Classic Blue
* Classic Bright
* Classic Dark
* Nightfall
* Powder Snow
* Sakura

I _don't_ think, that any of the following schemes refer to studio blues:

* Coffee
* Contrast
* Ectoplasm
* Midnight
* Ocean
* Sunrise
* Sunset

... and if they do, it's ~most likely~ fine that those schemes embrace the new blue. 
author_association: MEMBER
user: login: arthur791004
created_at: 2025-03-11T11:41:01Z
body: @tyxla The cache issue in the Docker build appears to be recurring on this branch. If this branch builds successfully, other branches fail to build. Conversely, if this branch fails, other branches may build successfully. Do you have any idea? Thank you!

![image](https://github.com/user-attachments/assets/f083480e-6eb6-4e2b-a6be-4b4c080edce7)



author_association: CONTRIBUTOR
user: login: tyxla
created_at: 2025-03-11T12:00:35Z
body: > @tyxla The cache issue in the Docker build appears to be recurring on this branch. If this branch builds successfully, other branches fail to build. Conversely, if this branch fails, other branches may build successfully. Do you have any idea? Thank you!

This has happened before, but we haven't been able to pinpoint it. My assumption is that the cache is not correctly cleared in some edge cases when updating packages, but I haven't had a chance to find the root cause. I've spotted that usually after a few runs, cache will be rebuilt and docker build will pass. I see it passed now, as well.
author_association: MEMBER
user: login: ryelle
created_at: 2025-03-11T15:17:00Z
body: > - Revert the hardcoded values introduced above (example: [f98535c](https://github.com/Automattic/wp-calypso/pull/99580/commits/f98535c634bf78296403efaa96b335f5c73333fe))
> - Replace existing studio-blue usage in the color schemes with new --color-deprecated-blue values (see [b1964bb](https://github.com/Automattic/wp-calypso/pull/99580/commits/b1964bbed05bfd8cd7854fb824feb73e2f036740)).

This makes sense to me as an approach— it's strange to currently have some things hardcoded and some not, like in Aquatic, we remove one studio-blue-60 but leave the rgb version.

```diff
-      --color-sidebar-background: var(--studio-blue-60);
+	--color-sidebar-background: #055d9c;
	--color-sidebar-background-rgb: var(--studio-blue-60-rgb);
```

Maybe a followup about where those `-rgb` values are used would be good - a quick scan shows that the base color (`primary`, `neutral`, `accent` etc) rbg values are used, but maybe none of these custom values.

> - Update global + modern color schemes to use studio-blue and override everything set in default in these two schemes only.

I think only Modern (`_modern.scss`) would be updated, leave `_default.scss` as it is so it sets up the correct (legacy) blue for all the other schemes to inherit (the "Default" theme is actually `_fresh.scss`, while `_default.scss` just sets up custom properties for the other schemes to override). And then Modern would likely need a few more overrides to Blueberry-ify any of those default legacy blues.

author_association: CONTRIBUTOR
user: login: ryelle
created_at: 2025-03-11T16:59:13Z
body: Ah, I just read over the other issues about the old blue (#100428, #100421 etc), I misunderstood your "global" scheme comments. It's not that there is a "global" scheme for these places (like login, notifs, etc) but that there is _no_ scheme, so it just uses the default values. So the blues do need to be updated in the `_default.scss` `:root` ruleset, so that it's used in non-color-schemed locations and correctly exported to the js export for other modules (notifications).

So then a separate set of the `_default` rules would go in another file (`_legacy`?), maybe scoped to `.color-scheme:not(.is-modern)`? That's probably the easiest way to do this given the current setup.

Edit: Since originally commenting, I found the `_global.scss` file, but I don't think it applies the way it sounds like it should — it applies to `/sites/`, but not the login screens, and not to notifications on the frontend. I honestly wonder if it's necessary? If the `_defaults.scss` get updated to the "modern" colors, it could probably be removed.
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-03-12T07:45:50Z
body: Thank you all for the help. This is a big one, kudos for making it happen. Please assign me as reviewer on any subsequent followups.
author_association: MEMBER
user: login: lsl
created_at: 2025-03-12T08:19:41Z
body: Will do, we've got a bit of a list to work through over the next while, there's still a few hardcoded blues around that need swapping to the theme vars and unrelated to this PR things like the coming soon badge and launch site button need fixes. I'll make some issues in the morning if they don't exist already.
author_association: CONTRIBUTOR
user: login: jasmussen
created_at: 2025-03-12T09:30:40Z
body: I saw the cookie notice, yes. I'll help with that as well, i.e. #98732 has been waiting on this PR.
author_association: MEMBER
user: login: jasmussen
created_at: 2025-03-12T09:31:47Z
body: That is to say, feel free to ping me and/or `@Automattic/dotcom-design` on both issues and PRs.
author_association: MEMBER