Skip to content

Commit

Permalink
refactor: replace newspack-ui vars with --wp variants
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaredrethman
jaredrethman committed Dec 20, 2024
1 parent 2e1b044 commit 5dddc4f
Show file tree
Hide file tree
Showing 12 changed files with 32 additions and 32 deletions.
6 changes: 3 additions & 3 deletions src/components/src/date-range-picker/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@

&__CalendarSelection,
&__CalendarHighlight {
border-color: var(--newspack-ui-color-primary);
border-color: var(--wp-admin-theme-color);
bottom: 4px;
top: 4px;

Expand Down Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions src/components/src/newspack-icon/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/src/newspack-logo/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

&__wrapper {
background: var(--newspack-ui-color-primary);
background: var(--wp-admin-theme-color);
color: white;
position: relative;

Expand Down
2 changes: 1 addition & 1 deletion src/components/src/notice/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
background: colors.$primary-050;

> svg {
fill: var(--newspack-ui-color-primary);
fill: var(--wp-admin-theme-color);
}
}

Expand Down
10 changes: 5 additions & 5 deletions src/components/src/popover/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
padding: 6px 8px;

&:hover {
color: var(--newspack-ui-color-primary);
color: var(--wp-admin-theme-color);

.components-menu-items__item-icon {
fill: currentcolor;
}
}

&: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;
}
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/src/progress-bar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/src/radio-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,17 +55,17 @@
}

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

&: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);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/src/steps-list-item/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions src/components/src/style-card/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
text-align: center;

.newspack-style-card__is-active & {
color: var(--newspack-ui-color-primary);
color: var(--wp-admin-theme-color);
}
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
}
}
4 changes: 2 additions & 2 deletions src/components/src/web-preview/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
padding: 0 !important;

&.is-selected {
background: var(--newspack-ui-color-primary);
background: var(--wp-admin-theme-color);
color: white;

&:active,
Expand All @@ -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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/src/with-wizard-screen/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions src/components/src/with-wizard/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 5dddc4f

Please sign in to comment.