diff --git a/assets/admin.scss b/assets/admin.scss index b63bd63..fc67ee3 100644 --- a/assets/admin.scss +++ b/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; } diff --git a/assets/editor.scss b/assets/editor.scss index 65cced1..7b81459 100644 --- a/assets/editor.scss +++ b/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 { diff --git a/assets/styles/admin-color-scheme.scss b/assets/styles/admin-color-scheme.scss new file mode 100644 index 0000000..f046bc0 --- /dev/null +++ b/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; +} diff --git a/components/admin-header/_style.scss b/components/admin-header/_style.scss index 6c0d012..6d4c8fa 100644 --- a/components/admin-header/_style.scss +++ b/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); } } } diff --git a/components/alert-actions/_style.scss b/components/alert-actions/_style.scss index 84abc90..da50ef9 100644 --- a/components/alert-actions/_style.scss +++ b/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) { diff --git a/components/comparisons/_style.scss b/components/comparisons/_style.scss index ccfe12d..67adc75 100644 --- a/components/comparisons/_style.scss +++ b/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); } diff --git a/components/modal/_style.scss b/components/modal/_style.scss index 3102a2c..4cec789 100644 --- a/components/modal/_style.scss +++ b/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); } } diff --git a/components/test-run-alerts/_style.scss b/components/test-run-alerts/_style.scss index 291a3da..72eaf45 100644 --- a/components/test-run-alerts/_style.scss +++ b/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; diff --git a/components/test-runs-page/_style.scss b/components/test-runs-page/_style.scss index 09c3392..0a92ed9 100644 --- a/components/test-runs-page/_style.scss +++ b/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; } diff --git a/components/tests-page/views/tests-page-list.php b/components/tests-page/views/tests-page-list.php index bee0d76..3993865 100644 --- a/components/tests-page/views/tests-page-list.php +++ b/components/tests-page/views/tests-page-list.php @@ -13,7 +13,7 @@