Add stylelint rule to prevent theme CSS vars outside of wp-components (…

…#59020)

* Add stylelint rule to prevent theme CSS vars outside of wp-components

* Fix violations

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: andrewhayward <andrewhayward@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

.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,

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;

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 {

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,

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;
 	}