From 32ea9228630083041e86afcfb16c6db447b7ef21 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 25 Oct 2022 12:22:02 -0400
Subject: [PATCH 01/35] update emotion color value variables

---
 packages/components/src/utils/colors-values.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index f3cf21ccb54969..d3b1cde380f386 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -31,8 +31,9 @@ const ALERT = {
 
 // Matches @wordpress/base-styles
 const ADMIN = {
-	theme: 'var( --wp-admin-theme-color, #007cba)',
-	themeDark10: 'var( --wp-admin-theme-color-darker-10, #006ba1)',
+	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
+	themeDark10:
+		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
 };
 
 const UI = {

From bd8d7769c6ed9c6af87d2fac2f1a1cad31504afb Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 25 Oct 2022 16:49:40 -0400
Subject: [PATCH 02/35] update AnglePickerControl component color variables

---
 packages/components/src/angle-picker-control/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index 151ad0edeab020..200f7d9ec993a1 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -19,6 +19,9 @@ import { Root } from './styles/angle-picker-control-styles';
 import { space } from '../ui/utils/space';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
+import { COLORS } from '../utils/colors-values';
+
+const accentColor = COLORS.ui.theme;
 
 export default function AnglePickerControl( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
@@ -70,7 +73,7 @@ export default function AnglePickerControl( {
 							marginBottom={ 0 }
 							marginRight={ space( 3 ) }
 							style={ {
-								color: 'var( --wp-admin-theme-color )',
+								color: accentColor,
 							} }
 						>
 							°

From 19a4342fe0023641876036bf176772b104eef884 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 06:01:40 -0400
Subject: [PATCH 03/35] simplify AnglePickerControl color declaration

---
 packages/components/src/angle-picker-control/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index 200f7d9ec993a1..858b7914db11e2 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -21,8 +21,6 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { COLORS } from '../utils/colors-values';
 
-const accentColor = COLORS.ui.theme;
-
 export default function AnglePickerControl( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
@@ -73,7 +71,7 @@ export default function AnglePickerControl( {
 							marginBottom={ 0 }
 							marginRight={ space( 3 ) }
 							style={ {
-								color: accentColor,
+								color: COLORS.ui.theme,
 							} }
 						>
 							°

From 3ca9aacf4ca5d4d1702063b1598563fe12fb5182 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 06:03:20 -0400
Subject: [PATCH 04/35] update Autocomplete color variable

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

diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss
index 4b8434caacf45a..4d04b3b8b52cf2 100644
--- a/packages/components/src/autocomplete/style.scss
+++ b/packages/components/src/autocomplete/style.scss
@@ -11,6 +11,6 @@
 	width: 100%;
 
 	&.is-selected {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 }

From 2b4b9d36cf7e411e49f4b9dfc5fb9910c7aa435e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 06:29:00 -0400
Subject: [PATCH 05/35] update BaseField snapshot color variable

---
 .../src/base-field/test/__snapshots__/index.js.snap           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/base-field/test/__snapshots__/index.js.snap b/packages/components/src/base-field/test/__snapshots__/index.js.snap
index f35321afdb0555..273234b79c1f9a 100644
--- a/packages/components/src/base-field/test/__snapshots__/index.js.snap
+++ b/packages/components/src/base-field/test/__snapshots__/index.js.snap
@@ -127,8 +127,8 @@ exports[`base field should render correctly 1`] = `
 
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
-  border-color: var( --wp-admin-theme-color, #007cba);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 <div

From d4738d92b19725e0f73d020d1f2f3d1fcfa57586 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 07:39:37 -0400
Subject: [PATCH 06/35] update CheckboxControl color variables

---
 packages/components/src/checkbox-control/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index a9fac4381fb63e..e983ae80ad891f 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -27,7 +27,7 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	@include reduce-motion("transition");
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) $components-color-accent;
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -35,8 +35,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 
 	&:checked,
 	&:indeterminate {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
+		background: $components-color-accent;
+		border-color: $components-color-accent;
 
 		// Hide default checkbox styles in IE.
 		&::-ms-check {

From 6c927e00f2955f4ccbbc24aa9fea795f73148dd0 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 07:42:25 -0400
Subject: [PATCH 07/35] add explicit border color to CheckboxControl input when
 focused

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

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index e983ae80ad891f..f8f8735b768468 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -28,6 +28,7 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 
 	&:focus {
 		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) $components-color-accent;
+		border-color: $components-color-accent;
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;

From 6ab0cd979a922335dbd0fd167661406617334f9c Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 08:10:06 -0400
Subject: [PATCH 08/35] update ColorPalette color variable

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

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 5f09fcca34edc1..82f1858d64d3c4 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -25,7 +25,7 @@
 	outline: 1px solid transparent;
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}

From f60dd7be788a13a1196f539a9d0e6ff0eb4f521c Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 08:49:18 -0400
Subject: [PATCH 09/35] update DropZone color variable

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

diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
index c49232b0f3f6cf..fe23616dc4ad34 100644
--- a/packages/components/src/drop-zone/style.scss
+++ b/packages/components/src/drop-zone/style.scss
@@ -24,7 +24,7 @@
 	height: 100%;
 	width: 100%;
 	display: flex;
-	background-color: var(--wp-admin-theme-color);
+	background-color: $components-color-accent;
 	align-items: center;
 	justify-content: center;
 	z-index: z-index(".components-drop-zone__content");

From ce2d6b60a2b97af2806b5d707c547651f2eb1a1c Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 08:53:42 -0400
Subject: [PATCH 10/35] update FormToggle color variable

---
 packages/components/src/form-toggle/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index 5e24548d80dd1c..b91fc18dd3a6b5 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -38,13 +38,13 @@ $toggle-border-width: 1px;
 
 	// Checked state.
 	&.is-checked .components-form-toggle__track {
-		background-color: var(--wp-admin-theme-color);
-		border: $toggle-border-width solid var(--wp-admin-theme-color);
+		background-color: $components-color-accent;
+		border: $toggle-border-width solid $components-color-accent;
 		border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
-		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $components-color-accent;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

From 014fc5d71a1695fbb86052bc9507992fcf2f2db7 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 09:26:26 -0400
Subject: [PATCH 11/35] update FormTokenfield color variables

---
 packages/components/src/form-token-field/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index b56cc1c3620221..a4d5320296bc8f 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -88,7 +88,7 @@
 
 		.components-form-token-field__token-text {
 			background: transparent;
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 
 		.components-form-token-field__remove-token {
@@ -183,7 +183,7 @@
 	cursor: pointer;
 
 	&.is-selected {
-		background: var(--wp-admin-theme-color);
+		background: $components-color-accent;
 		color: $white;
 	}
 }

From 4ca7afb7894e6f5e7b997920c91dfc8bc75491c4 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 10:12:42 -0400
Subject: [PATCH 12/35] update navigate-regions color variables

---
 .../components/src/higher-order/navigate-regions/style.scss   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index b34a4ef70fa986..739cb1a9b6175c 100644
--- a/packages/components/src/higher-order/navigate-regions/style.scss
+++ b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -14,7 +14,7 @@
 		right: 0;
 		pointer-events: none;
 		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 4px $components-color-accent;
 	}
 
 	@supports ( outline-offset: 1px ) {
@@ -24,7 +24,7 @@
 
 		&:focus {
 			outline-style: solid;
-			outline-color: var(--wp-admin-theme-color);
+			outline-color: $components-color-accent;
 			outline-width: 4px;
 			outline-offset: -4px;
 		}

From 0be1ffb510dc27bce6ccc65e63a3466dc299918f Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 13:20:33 -0400
Subject: [PATCH 13/35] update CheckboxControl's overrides for
 @wordpress/base-styles mixins

---
 packages/components/src/checkbox-control/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index f8f8735b768468..d6b9e8245fa2b9 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -35,7 +35,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	}
 
 	&:checked,
-	&:indeterminate {
+	&:indeterminate,
+	&[aria-checked="mixed"] {
 		background: $components-color-accent;
 		border-color: $components-color-accent;
 

From 324fd169d1304c57bd713413920938fc6ee1f281 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 14:26:51 -0400
Subject: [PATCH 14/35] update FormTokenField's overrides for
 @wordpress/base-styles mixins

---
 packages/components/src/form-token-field/style.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index a4d5320296bc8f..019a63698baf40 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -12,6 +12,13 @@
 
 	&.is-active {
 		@include input-style__focus();
+		border-color: $components-color-accent;
+		box-shadow: 0 0 0 ($border-width-focus - $border-width) $components-color-accent;
+	}
+
+	&:focus {
+		border-color: $components-color-accent;
+		box-shadow: 0 0 0 ($border-width-focus - $border-width) $components-color-accent;
 	}
 
 	// Token input

From c9183b0b7cc9be9f615474a22f7d582a29c2f009 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 15:29:35 -0400
Subject: [PATCH 15/35] update MenuItem color variable

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

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index d0d11643d7c96e..43cad98f6391c5 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -45,7 +45,7 @@
 		// Override the button component's tertiary background and color.
 		&.is-tertiary {
 			background: none;
-			color: var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
 			opacity: 0.3;
 		}
 	}

From 3b9fc6d11e4e253e3120a95d3dd3a953fbc92c13 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 15:43:38 -0400
Subject: [PATCH 16/35] update Notice color variable

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

diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
index a4b4838a99cc80..23378cefe1ec63 100644
--- a/packages/components/src/notice/style.scss
+++ b/packages/components/src/notice/style.scss
@@ -3,7 +3,7 @@
 	font-family: $default-font;
 	font-size: $default-font-size;
 	background-color: $white;
-	border-left: 4px solid var(--wp-admin-theme-color);
+	border-left: 4px solid $components-color-accent;
 	margin: 5px 15px 2px;
 	padding: 8px 12px;
 	align-items: center;

From 63ce620624917d39a9cd996d0133be6851f837f0 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:27:18 -0400
Subject: [PATCH 17/35] update Panel color variable

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

diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index 500e5e6fd1a798..b26f134e72350b 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -91,7 +91,7 @@
 	height: auto;
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		border-radius: 0;
 	}
 

From 487d7ecc925272f16710e346dad9661b394f48c1 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:39:35 -0400
Subject: [PATCH 18/35] update RangeControl color variables

---
 .../src/range-control/styles/range-control-styles.ts          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index b0d8810a8f3c31..a351a7db26bdd4 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -174,7 +174,7 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 				background-color: ${ COLORS.gray[ 400 ] };
 		  `
 		: css`
-				background-color: var( --wp-admin-theme-color );
+				background-color: ${ COLORS.ui.theme };
 		  `;
 
 export const ThumbWrapper = styled.span`
@@ -205,7 +205,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 				&::before {
 					content: ' ';
 					position: absolute;
-					background-color: var( --wp-admin-theme-color );
+					background-color: ${ COLORS.ui.theme };
 					opacity: 0.4;
 					border-radius: 50%;
 					height: ${ thumbSize + 8 }px;

From c8b8872f49c85814eab386d87048a09515ce7600 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:43:50 -0400
Subject: [PATCH 19/35] update ResizableBox color variables

---
 packages/components/src/resizable-box/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index feca32387d2e49..6badc505b799a6 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -35,7 +35,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	// Only visible in Windows High Contrast mode.
 	outline: 2px solid transparent;
 }
@@ -47,7 +47,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	content: "";
 	width: 3px;
 	height: 3px;
-	background: var(--wp-admin-theme-color);
+	background: $components-color-accent;
 	cursor: inherit;
 	position: absolute;
 	top: calc(50% - 1px);

From 8cc271538c6c22a255eb65e58adb72288f3c55fe Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:47:45 -0400
Subject: [PATCH 20/35] update SearchControl color variable

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

diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss
index 36a51316401cb9..ddd9d0e5b06e3b 100644
--- a/packages/components/src/search-control/style.scss
+++ b/packages/components/src/search-control/style.scss
@@ -18,7 +18,7 @@
 
 		&:focus {
 			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		}
 
 		&::placeholder {

From f66c05fd4b811c80b3da620dc498f5ea304bc4dd Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:49:24 -0400
Subject: [PATCH 21/35] update SearchControl's override for 
 @wordpress/base-styles mixins

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

diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss
index ddd9d0e5b06e3b..db1711cabfbc96 100644
--- a/packages/components/src/search-control/style.scss
+++ b/packages/components/src/search-control/style.scss
@@ -19,6 +19,7 @@
 		&:focus {
 			background: $white;
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+			border-color: $components-color-accent;
 		}
 
 		&::placeholder {

From 891fc6fe9a6db8196f97edd75531ce5340b66b16 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:56:15 -0400
Subject: [PATCH 22/35] update SnackBar color variable

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

diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 74d786133f11a4..0e54d3b432b939 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -22,7 +22,7 @@
 	&:focus {
 		box-shadow:
 			0 0 0 1px $white,
-			0 0 0 3px var(--wp-admin-theme-color);
+			0 0 0 3px $components-color-accent;
 	}
 
 	&.components-snackbar-explicit-dismiss {
@@ -64,7 +64,7 @@
 		}
 
 		&:hover {
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 	}
 }

From 98f1898f4971e70e98079ee5ad3aecf0fa43e00e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:59:59 -0400
Subject: [PATCH 23/35] update Spinner color variable

---
 packages/components/src/spinner/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/spinner/styles.ts b/packages/components/src/spinner/styles.ts
index 2f1101e1254c88..7a5a2205c97dd9 100644
--- a/packages/components/src/spinner/styles.ts
+++ b/packages/components/src/spinner/styles.ts
@@ -24,7 +24,7 @@ export const StyledSpinner = styled.svg`
 	display: inline-block;
 	margin: 5px 11px 0;
 	position: relative;
-	color: var( --wp-admin-theme-color );
+	color: ${ COLORS.ui.theme };
 	overflow: visible;
 `;
 

From 1bd21f4228501afbc01d0aeaab1e68682f4eb44e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 27 Oct 2022 08:00:14 -0400
Subject: [PATCH 24/35] update TabPanel color variables

---
 packages/components/src/tab-panel/style.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index 74e3aa2a48379a..6a796b93015771 100644
--- a/packages/components/src/tab-panel/style.scss
+++ b/packages/components/src/tab-panel/style.scss
@@ -33,13 +33,12 @@
 	}
 
 	&:focus:not(:disabled) {
-		box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
-
 	&.is-active {
 		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 $components-color-accent;
 		position: relative;
 
 		// This border appears in Windows High Contrast mode instead of the box-shadow.
@@ -55,10 +54,10 @@
 	}
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, inset 0 -#{$border-width-tab * 2} 0 0 $components-color-accent;
 	}
 }

From f0c9bfb6e1eb00937e4a0344b4acf2aceaec394c Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 27 Oct 2022 08:06:14 -0400
Subject: [PATCH 25/35] update ToggleGroupControl snapshot color variables

---
 .../test/__snapshots__/index.tsx.snap                     | 8 ++++----
 1 file changed, 4 insertions(+), 4 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 7cf90f8ff5144d..661f3cc01e9155 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
@@ -66,8 +66,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  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));
   outline: none;
   z-index: 1;
 }
@@ -402,8 +402,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  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));
   outline: none;
   z-index: 1;
 }

From a03c416536c92c241e33888143f1e86d9426d57b Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 27 Oct 2022 08:23:09 -0400
Subject: [PATCH 26/35] update ToolsPanel color variable

---
 packages/components/src/tools-panel/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index f76bf47ec18c5b..3f1b4839a3126a 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -148,7 +148,7 @@ export const DropdownMenu = css`
 `;
 
 export const ResetLabel = styled.span`
-	color: var( --wp-admin-theme-color-darker-10 );
+	color: ${ COLORS.ui.borderFocus };
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1.4;

From 920fc07a87f46a56d30f53c07758f9f4f215e0ea Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 27 Oct 2022 08:40:28 -0400
Subject: [PATCH 27/35] update utils/input color variables (used for
 TextAreaControl)

---
 packages/components/src/utils/input/base.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js
index 2b4657d47e3b5d..2c5010fc92737c 100644
--- a/packages/components/src/utils/input/base.js
+++ b/packages/components/src/utils/input/base.js
@@ -19,10 +19,10 @@ export const inputStyleNeutral = css`
 `;
 
 export const inputStyleFocus = css`
-	border-color: var( --wp-admin-theme-color );
+	border-color: ${ COLORS.ui.theme };
 	box-shadow: 0 0 0
 		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		var( --wp-admin-theme-color );
+		${ COLORS.ui.theme };
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;

From 95a90a0829df3758ce713047dd65667c47589f78 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 27 Oct 2022 12:48:22 -0400
Subject: [PATCH 28/35] Add override for block mover handle focused state

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

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 29b8d4aa2cba92..ff73cabcc2fae2 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -324,6 +324,11 @@
 	.components-visually-hidden {
 		height: auto;
 	}
+
+	// Override for theming on the block mover handle. `.block-editor-block-mover__drag-handle` was needed for specificity to override declaration order.
+	.components-accessible-toolbar &.block-editor-block-mover__drag-handle:focus::before {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, inset 0 0 0 4px $white;
+	}
 }
 
 @keyframes components-button__busy-animation {

From 06ac815578e68a38c0ed994ebe6b61a69c17540d Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 27 Oct 2022 12:53:18 -0400
Subject: [PATCH 29/35] 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 e5290611a93e2c..c6204577199e33 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -54,6 +54,10 @@
 -   `Autocomplete`: use Popover's new `placement` prop instead of legacy `position` prop ([#44396](https://github.com/WordPress/gutenberg/pull/44396/)).
 -   `FontSizePicker`: Add more comprehensive tests ([#45298](https://github.com/WordPress/gutenberg/pull/45298)).
 
+### Experimental
+-   Theming: updated Components package to utilize the new `accent` prop of the experimental `Theme` component.
+
+
 ## 21.3.0 (2022-10-19)
 
 ### Bug Fix

From b46a409384552b3b89f36b943294d376a7b759f6 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 27 Oct 2022 13:00:16 -0400
Subject: [PATCH 30/35] update `Notice` Readme

---
 packages/components/src/notice/README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md
index 30134b3a19a019..5cda6d71266c84 100644
--- a/packages/components/src/notice/README.md
+++ b/packages/components/src/notice/README.md
@@ -34,7 +34,8 @@ Notices display at the top of the screen, below any toolbars anchored to the top
 Notices are color-coded to indicate the type of message being communicated:
 
 -   **Default** notices have **no background**.
--   **Informational** notices are **blue.**
+-   **Informational** notices are **blue** by default.
+    - If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
 -   **Success** notices are **green.**
 -   **Warning** notices are **yellow\*\***.\*\*
 -   **Error** notices are **red.**

From afbde744289d5729eb32b4f80fc4903c65e76bab Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 1 Nov 2022 10:10:36 -0400
Subject: [PATCH 31/35] update preferences modal unit test snapshot

---
 .../preferences-modal/test/__snapshots__/index.js.snap      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 148e2e074feb0c..25b7358a4f1ab5 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
@@ -580,13 +580,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13:hover {
-  color: var( --wp-admin-theme-color, #007cba);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .emotion-13:focus {
   background-color: transparent;
-  color: var( --wp-admin-theme-color, #007cba);
-  border-color: var( --wp-admin-theme-color, #007cba);
+  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));
   outline: 3px solid transparent;
 }
 

From ed277e0f6bed75beab027cabb8f55871295f026c Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 1 Nov 2022 14:16:38 -0400
Subject: [PATCH 32/35] update post-publish-panel unit test snapshot

---
 .../post-publish-panel/test/__snapshots__/index.js.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 bb24f4559f470b..a134344f11d7b1 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
@@ -609,7 +609,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-admin-theme-color );
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))
   overflow: visible;
 }
 

From 7b5a3228e7ffc3232e18fa6d695d2491bfe4c7e6 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 1 Nov 2022 14:54:17 -0400
Subject: [PATCH 33/35] add missing semicolon

---
 .../post-publish-panel/test/__snapshots__/index.js.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 a134344f11d7b1..ad470740c9eff2 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
@@ -609,7 +609,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, #007cba));
   overflow: visible;
 }
 

From 78fe86706460b5dc7f5c9580739ea80df27001b3 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 3 Nov 2022 08:04:06 -0400
Subject: [PATCH 34/35] Revert all @base-styles overrides to be addressed
 separately

---
 packages/components/src/button/style.scss           | 5 -----
 packages/components/src/checkbox-control/style.scss | 4 +---
 packages/components/src/form-token-field/style.scss | 7 -------
 packages/components/src/search-control/style.scss   | 1 -
 4 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index ff73cabcc2fae2..29b8d4aa2cba92 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -324,11 +324,6 @@
 	.components-visually-hidden {
 		height: auto;
 	}
-
-	// Override for theming on the block mover handle. `.block-editor-block-mover__drag-handle` was needed for specificity to override declaration order.
-	.components-accessible-toolbar &.block-editor-block-mover__drag-handle:focus::before {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, inset 0 0 0 4px $white;
-	}
 }
 
 @keyframes components-button__busy-animation {
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index d6b9e8245fa2b9..e983ae80ad891f 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -28,15 +28,13 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 
 	&:focus {
 		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) $components-color-accent;
-		border-color: $components-color-accent;
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
 	}
 
 	&:checked,
-	&:indeterminate,
-	&[aria-checked="mixed"] {
+	&:indeterminate {
 		background: $components-color-accent;
 		border-color: $components-color-accent;
 
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index 019a63698baf40..a4d5320296bc8f 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -12,13 +12,6 @@
 
 	&.is-active {
 		@include input-style__focus();
-		border-color: $components-color-accent;
-		box-shadow: 0 0 0 ($border-width-focus - $border-width) $components-color-accent;
-	}
-
-	&:focus {
-		border-color: $components-color-accent;
-		box-shadow: 0 0 0 ($border-width-focus - $border-width) $components-color-accent;
 	}
 
 	// Token input
diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss
index db1711cabfbc96..ddd9d0e5b06e3b 100644
--- a/packages/components/src/search-control/style.scss
+++ b/packages/components/src/search-control/style.scss
@@ -19,7 +19,6 @@
 		&:focus {
 			background: $white;
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
-			border-color: $components-color-accent;
 		}
 
 		&::placeholder {

From a4151e427e635a189ef115e7b2a2dc46035a5f5c Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 3 Nov 2022 08:53:50 -0400
Subject: [PATCH 35/35] expose COLORS.ui.themeDark10 for uses where it makes
 more sense semantically

---
 packages/components/src/tools-panel/styles.ts  | 2 +-
 packages/components/src/utils/colors-values.js | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 3f1b4839a3126a..85ad1cb278d9b0 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -148,7 +148,7 @@ export const DropdownMenu = css`
 `;
 
 export const ResetLabel = styled.span`
-	color: ${ COLORS.ui.borderFocus };
+	color: ${ COLORS.ui.themeDark10 };
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1.4;
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index d3b1cde380f386..0055168a003fb1 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -38,6 +38,7 @@ const ADMIN = {
 
 const UI = {
 	theme: ADMIN.theme,
+	themeDark10: ADMIN.themeDark10,
 	background: white,
 	backgroundDisabled: GRAY[ 100 ],
 	border: GRAY[ 700 ],