From 5dddc4f8bb0dfae351817207627a5f6a18f75c37 Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Fri, 20 Dec 2024 10:09:02 -0600 Subject: [PATCH] refactor: replace newspack-ui vars with `--wp` variants --- src/components/src/date-range-picker/style.scss | 6 +++--- src/components/src/newspack-icon/style.scss | 6 +++--- src/components/src/newspack-logo/style.scss | 2 +- src/components/src/notice/style.scss | 2 +- src/components/src/popover/style.scss | 10 +++++----- src/components/src/progress-bar/style.scss | 2 +- src/components/src/radio-control/style.scss | 8 ++++---- src/components/src/steps-list-item/style.scss | 2 +- src/components/src/style-card/style.scss | 8 ++++---- src/components/src/web-preview/style.scss | 4 ++-- src/components/src/with-wizard-screen/style.scss | 2 +- src/components/src/with-wizard/style.scss | 12 ++++++------ 12 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/components/src/date-range-picker/style.scss b/src/components/src/date-range-picker/style.scss index ab3239a8aa..ccb16a0238 100644 --- a/src/components/src/date-range-picker/style.scss +++ b/src/components/src/date-range-picker/style.scss @@ -100,7 +100,7 @@ &__CalendarSelection, &__CalendarHighlight { - border-color: var(--newspack-ui-color-primary); + border-color: var(--wp-admin-theme-color); bottom: 4px; top: 4px; @@ -129,11 +129,11 @@ } &__CalendarSelection { - background-color: var(--newspack-ui-color-primary); + background-color: var(--wp-admin-theme-color); } &__CalendarHighlight { - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); border: none; bottom: 0; top: 0; diff --git a/src/components/src/newspack-icon/style.scss b/src/components/src/newspack-icon/style.scss index 2b110bb2c2..14a9ca6c5c 100644 --- a/src/components/src/newspack-icon/style.scss +++ b/src/components/src/newspack-icon/style.scss @@ -5,18 +5,18 @@ @use "../../../shared/scss/colors"; .newspack-icon { - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); fill: white; padding: 12px; &--white { background: white; - fill: var(--newspack-ui-color-primary); + fill: var(--wp-admin-theme-color); } &--simple { background: none; - fill: var(--newspack-ui-color-primary); + fill: var(--wp-admin-theme-color); padding: 0; } diff --git a/src/components/src/newspack-logo/style.scss b/src/components/src/newspack-logo/style.scss index 3de2d2028b..1874d046dc 100644 --- a/src/components/src/newspack-logo/style.scss +++ b/src/components/src/newspack-logo/style.scss @@ -19,7 +19,7 @@ } &__wrapper { - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); color: white; position: relative; diff --git a/src/components/src/notice/style.scss b/src/components/src/notice/style.scss index 42a2a802f9..9ade4d2dda 100644 --- a/src/components/src/notice/style.scss +++ b/src/components/src/notice/style.scss @@ -64,7 +64,7 @@ background: colors.$primary-050; > svg { - fill: var(--newspack-ui-color-primary); + fill: var(--wp-admin-theme-color); } } diff --git a/src/components/src/popover/style.scss b/src/components/src/popover/style.scss index 47ac8fe6ff..678a0bf3bc 100644 --- a/src/components/src/popover/style.scss +++ b/src/components/src/popover/style.scss @@ -16,7 +16,7 @@ padding: 6px 8px; &:hover { - color: var(--newspack-ui-color-primary); + color: var(--wp-admin-theme-color); .components-menu-items__item-icon { fill: currentcolor; @@ -24,7 +24,7 @@ } &:focus:not(:disabled) { - box-shadow: inset 0 0 0 2px var(--newspack-ui-color-primary); + box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color); position: relative; z-index: 1; } @@ -42,7 +42,7 @@ &:focus, &:focus:enabled &:hover, &:not(:disabled, [aria-disabled="true"], .is-default):hover { - color: var(--newspack-ui-color-primary); + color: var(--wp-admin-theme-color); } } @@ -89,8 +89,8 @@ min-height: 36px; &:focus ~ div.components-input-control__backdrop { - border-color: var(--newspack-ui-color-primary); - box-shadow: inset 0 0 0 1px var(--newspack-ui-color-primary); + border-color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); } } diff --git a/src/components/src/progress-bar/style.scss b/src/components/src/progress-bar/style.scss index 380d9afeee..fb3cbb690b 100644 --- a/src/components/src/progress-bar/style.scss +++ b/src/components/src/progress-bar/style.scss @@ -35,7 +35,7 @@ } &__bar { - background-color: var(--newspack-ui-color-primary); + background-color: var(--wp-admin-theme-color); height: 8px; transition: width 125ms ease-in-out; } diff --git a/src/components/src/radio-control/style.scss b/src/components/src/radio-control/style.scss index 7729728ceb..245b0fe542 100644 --- a/src/components/src/radio-control/style.scss +++ b/src/components/src/radio-control/style.scss @@ -55,8 +55,8 @@ } &:checked { - background-color: var(--newspack-ui-color-primary); - border-color: var(--newspack-ui-color-primary); + background-color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); &::before { border: none; @@ -64,8 +64,8 @@ } &:focus { - border-color: var(--newspack-ui-color-primary); - box-shadow: 0 0 0 2px white, 0 0 0 3.5px var(--newspack-ui-color-primary); + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 2px white, 0 0 0 3.5px var(--wp-admin-theme-color); } } diff --git a/src/components/src/steps-list-item/style.scss b/src/components/src/steps-list-item/style.scss index 3781331241..cd4993fb54 100644 --- a/src/components/src/steps-list-item/style.scss +++ b/src/components/src/steps-list-item/style.scss @@ -35,7 +35,7 @@ background: #fff; border: 1px solid currentcolor; border-radius: 100%; - color: var(--newspack-ui-color-primary); + color: var(--wp-admin-theme-color); display: flex; height: 28px; justify-content: center; diff --git a/src/components/src/style-card/style.scss b/src/components/src/style-card/style.scss index ff693e88ce..6cb63bea85 100644 --- a/src/components/src/style-card/style.scss +++ b/src/components/src/style-card/style.scss @@ -15,7 +15,7 @@ text-align: center; .newspack-style-card__is-active & { - color: var(--newspack-ui-color-primary); + color: var(--wp-admin-theme-color); } } @@ -48,8 +48,8 @@ } .newspack-style-card__is-active & { - border-color: var(--newspack-ui-color-primary); - box-shadow: inset 0 0 0 1px var(--newspack-ui-color-primary); + border-color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); img { position: relative; @@ -88,7 +88,7 @@ } .newspack-style-card__is-active & { - box-shadow: inset 0 0 0 1px var(--newspack-ui-color-primary); + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); } } } diff --git a/src/components/src/web-preview/style.scss b/src/components/src/web-preview/style.scss index d5a374c2e1..de4c42f99b 100644 --- a/src/components/src/web-preview/style.scss +++ b/src/components/src/web-preview/style.scss @@ -102,7 +102,7 @@ padding: 0 !important; &.is-selected { - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); color: white; &:active, @@ -114,7 +114,7 @@ } &:focus { - box-shadow: inset 0 0 0 1px var(--newspack-ui-color-primary), inset 0 0 0 3px white !important; + box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color), inset 0 0 0 3px white !important; } } diff --git a/src/components/src/with-wizard-screen/style.scss b/src/components/src/with-wizard-screen/style.scss index 8778ba531a..e989580c10 100644 --- a/src/components/src/with-wizard-screen/style.scss +++ b/src/components/src/with-wizard-screen/style.scss @@ -83,7 +83,7 @@ } &:not(.newspack-icon) { - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); left: 50%; margin: -28px 0 0 -28px !important; opacity: 0; diff --git a/src/components/src/with-wizard/style.scss b/src/components/src/with-wizard/style.scss index fc655bb967..5071717bf9 100644 --- a/src/components/src/with-wizard/style.scss +++ b/src/components/src/with-wizard/style.scss @@ -68,12 +68,12 @@ svg { .newspack-wizard__blue { #wpwrap { - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); } .newspack-footer { - background: var(--newspack-ui-color-primary); - border-color: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); justify-content: center; &__logo { @@ -116,7 +116,7 @@ svg { } &::before { - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); box-shadow: 24px 0 0 white, 69px 0 0 -15px wp-colors.$gray-900, @@ -161,7 +161,7 @@ svg { // Blue Screen .newspack-wizard__blue & { - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); &::before { animation: loading-quiet 1.25s ease-in-out infinite; @@ -217,7 +217,7 @@ svg { &::before { animation: loading-quiet 1.25s ease-in-out infinite; - background: var(--newspack-ui-color-primary); + background: var(--wp-admin-theme-color); height: 8px; right: 100%; z-index: 9999;