feat(styles): add support for wp admin color schemes

assets/admin.scss

@@ -1,8 +1,19 @@
 @import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
+@import "./styles/admin-color-scheme";
 @import "./styles/animations";
 
 .vrts-list-table-page {
 
+	.vrts-page-title-action {
+		color: #fff;
+		border-color: var(--vrts-admin-theme-color);
+
+		&:hover {
+			color: #fff;
+			border-color: var(--vrts-admin-theme-color);
+		}
+	}
+
 	tbody {
 		background-color: #f6f7f9;
 	}

assets/editor.scss

@@ -1,4 +1,5 @@
 @import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
+@import "./styles/admin-color-scheme";
 @import "./styles/animations";
 
 .vrts_post_options_metabox {

assets/styles/admin-color-scheme.scss

@@ -0,0 +1,39 @@
+:root {
+	--vrts-admin-theme-color: #2271b1;
+}
+
+.admin-color-fresh {
+	--vrts-admin-theme-color: #1e8cbe;
+}
+
+.admin-color-modern {
+	--vrts-admin-theme-color: #3858e9;
+}
+
+.admin-color-light {
+	--vrts-admin-theme-color: #04a4cc;
+}
+
+.admin-color-blue {
+	--vrts-admin-theme-color: #e1a948;
+}
+
+.admin-color-coffee {
+	--vrts-admin-theme-color: #c7a589;
+}
+
+.admin-color-ectoplasm {
+	--vrts-admin-theme-color: #a3b745;
+}
+
+.admin-color-midnight {
+	--vrts-admin-theme-color: #dd362d;
+}
+
+.admin-color-ocean {
+	--vrts-admin-theme-color: #9ebaa0;
+}
+
+.admin-color-sunrise {
+	--vrts-admin-theme-color: #dd823b;
+}

components/admin-header/_style.scss

@@ -97,13 +97,13 @@
 				left: 0;
 				width: 100%;
 				height: 3px;
-				background: var(--wp-admin-theme-color);
+				background: var(--vrts-admin-theme-color);
 				opacity: 0;
 				transition: opacity 0.2s;
 			}
 
 			[aria-current="true"] & {
-				border-bottom-color: var(--wp-admin-theme-color);
+				border-bottom-color: var(--vrts-admin-theme-color);
 				font-weight: 600;
 
 				&::after {
@@ -117,11 +117,11 @@
 
 			&:hover,
 			&:focus {
-				color: var(--wp-admin-theme-color);
+				color: var(--vrts-admin-theme-color);
 			}
 
 			&:focus {
-				box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+				box-shadow: inset 0 0 0 2px var(--vrts-admin-theme-color);
 			}
 
 			// required to match the color scheme
@@ -132,11 +132,11 @@
 
 		&-button {
 			align-self: center;
-			border: 1px solid var(--wp-admin-theme-color);
+			border: 1px solid var(--vrts-admin-theme-color);
 			border-radius: 50px;
 			padding: 8px 14px;
 			margin-left: 20px;
-			color: var(--wp-admin-theme-color);
+			color: var(--vrts-admin-theme-color);
 			text-decoration: none;
 
 			&::after {
@@ -151,8 +151,8 @@
 			}
 
 			[aria-current="true"] & {
-				border: 1px solid var(--wp-admin-theme-color);
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+				border: 1px solid var(--vrts-admin-theme-color);
+				background: rgba(var(--vrts-admin-theme-color--rgb), 0.1);
 				font-weight: initial;
 			}
 
@@ -161,7 +161,7 @@
 			}
 
 			&:focus {
-				box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+				box-shadow: 0 0 0 2px var(--vrts-admin-theme-color);
 			}
 		}
 	}

components/alert-actions/_style.scss

@@ -73,7 +73,7 @@
 
 		&:hover,
 		&:focus-visible {
-			color: var(--wp-admin-theme-color);
+			color: var(--vrts-admin-theme-color);
 		}
 
 		&:not(:last-child) {

components/comparisons/_style.scss

@@ -211,7 +211,7 @@
 		&:has(input:focus-visible) {
 
 			.vrts-comparisons__slider-handle svg {
-				outline: 2px solid var(--wp-admin-theme-color);
+				outline: 2px solid var(--vrts-admin-theme-color);
 				outline-offset: 2px;
 			}
 		}
@@ -254,8 +254,8 @@
 			height: var(--vrts-comparisons-handle-size);
 			border-radius: 50%;
 			background: #fff;
-			border: 1px solid var(--wp-admin-theme-color);
-			color: var(--wp-admin-theme-color);
+			border: 1px solid var(--vrts-admin-theme-color);
+			color: var(--vrts-admin-theme-color);
 			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 		}
 	}
@@ -266,7 +266,7 @@
 		left: calc(var(--vrts-comparisons-slider-position) - 0.5px);
 		width: 1px;
 		height: 100%;
-		background: var(--wp-admin-theme-color);
+		background: var(--vrts-admin-theme-color);
 		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 	}
 

components/modal/_style.scss

@@ -66,7 +66,7 @@
 		}
 
 		&:focus-visible {
-			outline: 2px solid var(--wp-admin-theme-color);
+			outline: 2px solid var(--vrts-admin-theme-color);
 		}
 	}
 

components/test-run-alerts/_style.scss

@@ -106,8 +106,8 @@
 
 		&:has(:hover),
 		&:has([data-vrts-current="true"]) {
-			border-color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+			border-color: var(--vrts-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--vrts-admin-theme-color);
 		}
 
 		&:has([data-vrts-current="false"]:focus-visible) {
@@ -180,7 +180,7 @@
 				content: "";
 				width: 8px;
 				height: 8px;
-				background: var(--wp-admin-theme-color);
+				background: var(--vrts-admin-theme-color);
 				border-radius: 50%;
 				flex: 0 0 auto;
 				margin-top: 1px;

components/test-runs-page/_style.scss

@@ -97,7 +97,7 @@
 				content: "";
 				width: 8px;
 				height: 8px;
-				background: var(--wp-admin-theme-color);
+				background: var(--vrts-admin-theme-color);
 				border-radius: 50%;
 				flex: 0 0 auto;
 			}

components/tests-page/views/tests-page-list.php

@@ -13,7 +13,7 @@
 
 	<menu class="page-title-actions">
 		<li>
-			<button type="button" class="page-title-action button-primary"
+			<button type="button" class="page-title-action vrts-page-title-action button-primary"
 				id="<?php echo ( ! $data['is_connected'] || intval( $data['remaining_tests'] ) === 0 ) ? 'modal-add-new-disabled' : 'show-modal-add-new'; ?>"
 				<?php echo ( ! $data['is_connected'] || intval( $data['remaining_tests'] ) === 0 ) ? ' disabled' : ''; ?>>
 				<?php esc_html_e( 'Add New', 'visual-regression-tests' ); ?>