From 835a15d687577f429550ef5b6451de1d5a8100c8 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 29 Apr 2023 01:37:03 +0900
Subject: [PATCH 01/14] Components: Update default accent color

---
 packages/components/src/theme/color-algorithms.ts      | 2 +-
 packages/components/src/theme/stories/index.tsx        | 2 +-
 packages/components/src/theme/test/color-algorithms.ts | 2 +-
 packages/components/src/utils/colors-values.js         | 4 ++--
 packages/components/src/utils/theme-variables.scss     | 8 ++++----
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/theme/color-algorithms.ts b/packages/components/src/theme/color-algorithms.ts
index c260b4ac5704d5..b2f69e1db21284 100644
--- a/packages/components/src/theme/color-algorithms.ts
+++ b/packages/components/src/theme/color-algorithms.ts
@@ -48,7 +48,7 @@ export function checkContrasts(
 	outputs: ThemeOutputValues[ 'colors' ]
 ) {
 	const background = inputs.background || COLORS.white;
-	const accent = inputs.accent || '#007cba';
+	const accent = inputs.accent || '#3858e9';
 	const foreground = outputs.foreground || COLORS.gray[ 900 ];
 	const gray = outputs.gray || COLORS.gray;
 
diff --git a/packages/components/src/theme/stories/index.tsx b/packages/components/src/theme/stories/index.tsx
index 923b4fff4cdacd..c9a3f495e48350 100644
--- a/packages/components/src/theme/stories/index.tsx
+++ b/packages/components/src/theme/stories/index.tsx
@@ -103,7 +103,7 @@ export const ColorScheme: ComponentStory< typeof Theme > = ( {
 	);
 };
 ColorScheme.args = {
-	accent: '#007cba',
+	accent: '#3858e9',
 	background: '#fff',
 };
 ColorScheme.argTypes = {
diff --git a/packages/components/src/theme/test/color-algorithms.ts b/packages/components/src/theme/test/color-algorithms.ts
index f901c8ad83a87b..655d9e01baa07f 100644
--- a/packages/components/src/theme/test/color-algorithms.ts
+++ b/packages/components/src/theme/test/color-algorithms.ts
@@ -55,7 +55,7 @@ describe( 'Theme color algorithms', () => {
 
 			generateThemeVariables( { background: '#eee' } );
 			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color ("#eee") does not have sufficient contrast against the accent color ("#007cba").'
+				'wp.components.Theme: The background color ("#eee") does not have sufficient contrast against the accent color ("#3858e9").'
 			);
 		} );
 
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 06dc62b881c652..ee7f1b5d58e54d 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -31,9 +31,9 @@ const ALERT = {
 
 // Matches @wordpress/base-styles
 const ADMIN = {
-	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
+	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
 	themeDark10:
-		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
+		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',
 };
 
 const UI = {
diff --git a/packages/components/src/utils/theme-variables.scss b/packages/components/src/utils/theme-variables.scss
index 0b664b8cd72e31..14e44f3ddc7d2f 100644
--- a/packages/components/src/utils/theme-variables.scss
+++ b/packages/components/src/utils/theme-variables.scss
@@ -2,10 +2,10 @@
 //
 // If the `--wp-components-color-accent` variable is not defined, fallback to
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
-// defined, fallback to the default theme color (WP blue).
-$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+// defined, fallback to the default theme color (WP blueberry).
+$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 
 // Used when placing text on the accent color.
 $components-color-accent-inverted: var(--wp-components-color-accent-inverted, $white);

From 3f3e24fbc9b06e9b4c8b7d669c7ef50da6eb0f1e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 29 Apr 2023 01:37:48 +0900
Subject: [PATCH 02/14] Update Storybook theme settings

---
 storybook/decorators/with-theme.js | 4 ++--
 storybook/preview.js               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/storybook/decorators/with-theme.js b/storybook/decorators/with-theme.js
index 9f11dc63dbaed9..083d929a5865a4 100644
--- a/storybook/decorators/with-theme.js
+++ b/storybook/decorators/with-theme.js
@@ -19,8 +19,8 @@ const themes = {
 		accent: '#3858e9',
 		background: '#f0f0f0',
 	},
-	modern: {
-		accent: '#3858e9',
+	classic: {
+		accent: '#007cba',
 	},
 };
 
diff --git a/storybook/preview.js b/storybook/preview.js
index 9b4e1e334b7394..f644b0539c8784 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -31,7 +31,7 @@ export const globalTypes = {
 				{ value: 'default', title: 'Default' },
 				{ value: 'darkBg', title: 'Dark (background)' },
 				{ value: 'lightGrayBg', title: 'Light gray (background)' },
-				{ value: 'modern', title: 'Modern (accent)' },
+				{ value: 'classic', title: 'Classic (accent)' },
 			],
 		},
 	},

From acebc97aae7ade678a0f9bbf3c997402bd2d6bb5 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 29 Apr 2023 01:44:05 +0900
Subject: [PATCH 03/14] Don't load base-styles in Storybook

---
 storybook/preview.js |  1 -
 storybook/style.scss | 11 -----------
 2 files changed, 12 deletions(-)
 delete mode 100644 storybook/style.scss

diff --git a/storybook/preview.js b/storybook/preview.js
index f644b0539c8784..ff73a95fa41313 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -6,7 +6,6 @@ import { WithMarginChecker } from './decorators/with-margin-checker';
 import { WithMaxWidthWrapper } from './decorators/with-max-width-wrapper';
 import { WithRTL } from './decorators/with-rtl';
 import { WithTheme } from './decorators/with-theme';
-import './style.scss';
 
 export const globalTypes = {
 	direction: {
diff --git a/storybook/style.scss b/storybook/style.scss
deleted file mode 100644
index 172fc48710b801..00000000000000
--- a/storybook/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use "sass:math";
-
-// Loading @wordpress/base-styles as they have mixins and other dependencies
-// used within @wordpress/*/src/*.scss
-@import "~@wordpress/base-styles/animations";
-@import "~@wordpress/base-styles/breakpoints";
-@import "~@wordpress/base-styles/colors";
-@import "~@wordpress/base-styles/mixins";
-@import "~@wordpress/base-styles/default-custom-properties";
-@import "~@wordpress/base-styles/variables";
-@import "~@wordpress/base-styles/z-index";

From a601a3af0b56f74105e881b6bdd39a9dd99806ad Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 29 Apr 2023 01:56:30 +0900
Subject: [PATCH 04/14] Include modern admin-scheme for components

---
 bin/packages/build-worker.js       | 6 +++++-
 packages/components/src/style.scss | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
index e82091ff843749..668a404e57c9b4 100644
--- a/bin/packages/build-worker.js
+++ b/bin/packages/build-worker.js
@@ -105,7 +105,11 @@ async function buildCSS( file ) {
 	]
 		// Editor styles should be excluded from the default CSS vars output.
 		.concat(
-			file.includes( 'common.scss' ) || ! file.includes( 'block-library' )
+			file.includes( 'common.scss' ) ||
+				! (
+					file.includes( 'block-library' ) ||
+					file.includes( 'components' )
+				)
 				? [ 'default-custom-properties' ]
 				: []
 		)
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 1c19336552aba4..2a58a113f6738c 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -1,3 +1,9 @@
+// Include modern WP admin color scheme variables.
+// TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
+:root {
+	@include admin-scheme(#3858e9);
+}
+
 // Variables
 @import "./utils/theme-variables.scss";
 

From 96f8924ae07a599ec6921a553d446ccfb759a51a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 29 Apr 2023 01:56:59 +0900
Subject: [PATCH 05/14] Button: Add theming TODO comments in stylesheet

---
 packages/components/src/button/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index e114756f9614f1..9daabb1955e236 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -163,10 +163,12 @@
 		padding: $grid-unit-15 * 0.5; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
 
 		&:hover:not(:disabled) {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		}
 
 		&:active:not(:disabled) {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 

From 33c33a5a9350ba4ec9d470038a77ef24c7a78e08 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 1 May 2023 22:55:53 +0900
Subject: [PATCH 06/14] Tweak comment

---
 packages/components/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 2a58a113f6738c..02dce83f66dcc6 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -1,4 +1,4 @@
-// Include modern WP admin color scheme variables.
+// Include the default WP Components color variables.
 // TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
 :root {
 	@include admin-scheme(#3858e9);

From a8582f8b286dc08214733ae54362bb9215a21fa5 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 1 May 2023 23:00:39 +0900
Subject: [PATCH 07/14] Remove admin-scheme color vars in wp-components

---
 packages/components/src/style.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 02dce83f66dcc6..1c19336552aba4 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -1,9 +1,3 @@
-// Include the default WP Components color variables.
-// TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
-:root {
-	@include admin-scheme(#3858e9);
-}
-
 // Variables
 @import "./utils/theme-variables.scss";
 

From b7e975bb1504c38ae9e5f9efa146e8ba5ca1d8f4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 1 May 2023 23:02:53 +0900
Subject: [PATCH 08/14] Update comment

---
 bin/packages/build-worker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
index 668a404e57c9b4..3f1512ef0feb78 100644
--- a/bin/packages/build-worker.js
+++ b/bin/packages/build-worker.js
@@ -103,7 +103,7 @@ async function buildCSS( file ) {
 		'animations',
 		'z-index',
 	]
-		// Editor styles should be excluded from the default CSS vars output.
+		// Editor and component styles should be excluded from the default CSS vars output.
 		.concat(
 			file.includes( 'common.scss' ) ||
 				! (

From 09354d8fe84f45bc8d7797fafc7305e97fc2b47c Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 2 May 2023 04:57:29 +0900
Subject: [PATCH 09/14] Fix unit test

---
 packages/components/src/theme/test/color-algorithms.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/theme/test/color-algorithms.ts b/packages/components/src/theme/test/color-algorithms.ts
index 655d9e01baa07f..ff04c0b9511bf2 100644
--- a/packages/components/src/theme/test/color-algorithms.ts
+++ b/packages/components/src/theme/test/color-algorithms.ts
@@ -53,9 +53,9 @@ describe( 'Theme color algorithms', () => {
 				'wp.components.Theme: The background color ("#000") does not have sufficient contrast against the accent color ("#111").'
 			);
 
-			generateThemeVariables( { background: '#eee' } );
+			generateThemeVariables( { background: '#1a1a1a' } );
 			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color ("#eee") does not have sufficient contrast against the accent color ("#3858e9").'
+				'wp.components.Theme: The background color ("#1a1a1a") does not have sufficient contrast against the accent color ("#3858e9").'
 			);
 		} );
 

From cc107d5bc5148a87c758533bcbb5db86b5389bff Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 2 May 2023 05:02:34 +0900
Subject: [PATCH 10/14] Update snapshots

---
 .../test/__snapshots__/index.tsx.snap                     | 8 ++++----
 .../preferences-modal/test/__snapshots__/index.js.snap    | 6 +++---
 .../post-publish-panel/test/__snapshots__/index.js.snap   | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index be5b20d593954c..d9f173a571e48a 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -65,8 +65,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: none;
   z-index: 1;
 }
@@ -400,8 +400,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: none;
   z-index: 1;
 }
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
index c666ab81e0724f..2d43aa7922f361 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -608,13 +608,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13:hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
 .emotion-13:focus {
   background-color: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 3px solid transparent;
 }
 
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 50bd6c2bd9bd87..c5aad5aa3be9b9 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -593,7 +593,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   display: inline-block;
   margin: 5px 11px 0;
   position: relative;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   overflow: visible;
   opacity: 1;
   background-color: transparent;

From 084c789690a0bb8614574e33b1551c68b5af0b83 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 2 May 2023 21:03:49 +0900
Subject: [PATCH 11/14] Revert "Remove admin-scheme color vars in
 wp-components"

This reverts commit a8582f8b286dc08214733ae54362bb9215a21fa5.
---
 packages/components/src/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 1c19336552aba4..02dce83f66dcc6 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -1,3 +1,9 @@
+// Include the default WP Components color variables.
+// TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
+:root {
+	@include admin-scheme(#3858e9);
+}
+
 // Variables
 @import "./utils/theme-variables.scss";
 

From 4f12c0d0f61e97bb361170cee9bea216f2d23624 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 2 May 2023 21:17:10 +0900
Subject: [PATCH 12/14] Update changelog

---
 packages/components/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 8c509dfc63e862..834977141a9523 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Change the default color scheme to be based on the new WP Blueberry color ([#50193](https://github.com/WordPress/gutenberg/pull/50193)).
+
 ### Internal
 
 -   `NavigableContainer`: Convert to TypeScript ([#49377](https://github.com/WordPress/gutenberg/pull/49377)).

From 99ef87a78edcb0e020af600f7eda49a9b1f27880 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 2 May 2023 21:41:13 +0900
Subject: [PATCH 13/14] Add back compat note to changelog

---
 packages/components/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 834977141a9523..c840c4fefaf346 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Enhancements
 
--   Change the default color scheme to be based on the new WP Blueberry color ([#50193](https://github.com/WordPress/gutenberg/pull/50193)).
+-   Change the default color scheme to use the new WP Blueberry color. See PR description for instructions on how to restore the previous color scheme when using in a non-WordPress context ([#50193](https://github.com/WordPress/gutenberg/pull/50193)).
 
 ### Internal
 

From 3a57e2b004e51a780265d6a3f455d928ecbe7516 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 5 May 2023 18:17:53 +0900
Subject: [PATCH 14/14] Update code comment

---
 packages/components/src/utils/colors-values.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index ee7f1b5d58e54d..556455b09ce336 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -29,7 +29,7 @@ const ALERT = {
 	green: '#4ab866',
 };
 
-// Matches @wordpress/base-styles
+// Matches the Modern admin scheme in @wordpress/base-styles
 const ADMIN = {
 	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
 	themeDark10: