diff --git a/.stylelintrc.json b/.stylelintrc.json
index c7a2d1db18a46..7629410913402 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,6 +4,14 @@
 		"at-rule-empty-line-before": null,
 		"at-rule-no-unknown": null,
 		"comment-empty-line-before": null,
+		"declaration-property-value-disallowed-list": [
+			{
+				"/.*/": [ "/--wp-components-color-/" ]
+			},
+			{
+				"message": "--wp-components-color-* variables are not ready to be used outside of the components package."
+			}
+		],
 		"font-weight-notation": null,
 		"max-line-length": null,
 		"no-descending-specificity": null,
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index b988c0499f1fb..0333a8bb6adf9 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -64,7 +64,7 @@
  */
 
 @mixin block-toolbar-button-style__focus() {
-	box-shadow: inset 0 0 0 $border-width var(--wp-components-color-background, $white), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+	box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 7b143958e2c16..cd293b46d4a47 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -67,7 +67,7 @@
 	}
 	th {
 		text-align: left;
-		color: var(--wp-components-color-foreground, $gray-900);
+		color: $gray-900;
 		font-weight: normal;
 		font-size: $default-font-size;
 	}
@@ -527,7 +527,7 @@
 		&:hover,
 		&[data-active-item],
 		&:focus {
-			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+			background-color: var(--wp-admin-theme-color);
 			color: $white;
 
 			.dataviews-search-widget-filter-combobox-item-check {
@@ -587,7 +587,7 @@
 
 		&:focus {
 			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 
 		&::placeholder {
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
index 80a949e40980d..959d2a136aad7 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -49,7 +49,7 @@
 		outline: 3px solid transparent;
 		outline-offset: -2px;
 
-		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		color: var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
 		.edit-site-global-styles-screen-revisions__revision-button {
@@ -61,7 +61,7 @@
 		}
 
 		&::before {
-			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+			background: var(--wp-admin-theme-color);
 		}
 
 		.edit-site-global-styles-screen-revisions__changes,
diff --git a/packages/edit-site/src/components/sidebar-button/style.scss b/packages/edit-site/src/components/sidebar-button/style.scss
index 5135f97869bb8..6daa560a114ad 100644
--- a/packages/edit-site/src/components/sidebar-button/style.scss
+++ b/packages/edit-site/src/components/sidebar-button/style.scss
@@ -10,7 +10,7 @@
 	&:focus-visible:not(:disabled) {
 		box-shadow:
 			0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+			var(--wp-admin-theme-color);
 		outline: 3px solid transparent;
 	}