Skip to content

Commit

Permalink
refactor: replace all primary color scss vars with css vars
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaredrethman
jaredrethman committed Dec 18, 2024
1 parent f6d3c7d commit c549ed4
Show file tree
Hide file tree
Showing 20 changed files with 65 additions and 61 deletions.
2 changes: 0 additions & 2 deletions src/admin/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@
*/
// Grays
--newspack-wizard-color-neutral-70: #757575;
// Primary
--newspack-wizard-color-primary: var(--newspack-ui-color-primary);

/**
* Dimensions
Expand Down
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: colors.$primary-600;
border-color: var(--newspack-ui-color-primary);
bottom: 4px;
top: 4px;

Expand Down Expand Up @@ -129,11 +129,11 @@
}

&__CalendarSelection {
background-color: colors.$primary-600;
background-color: var(--newspack-ui-color-primary);
}

&__CalendarHighlight {
background: colors.$primary-600;
background: var(--newspack-ui-color-primary);
border: none;
bottom: 0;
top: 0;
Expand Down
8 changes: 4 additions & 4 deletions src/components/src/modal/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@

.newspack-modal {
// Color
--wp-admin-theme-color: #{colors.$primary-600};
--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
--wp-admin-theme-color-darker-10: #{colors.$primary-600};
--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
--wp-admin-theme-color: var(--newspack-ui-color-primary);
--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
--wp-admin-theme-color-darker-10: var(--newspack-ui-color-primary);
--wp-admin-theme-color-darker-10--rgb: var(--newspack-ui-color-primary-rgb);
--wp-admin-theme-color-darker-20: #{colors.$primary-700};
--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};

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: colors.$primary-600;
background: var(--newspack-ui-color-primary);
fill: white;
padding: 12px;

&--white {
background: white;
fill: colors.$primary-600;
fill: var(--newspack-ui-color-primary);
}

&--simple {
background: none;
fill: colors.$primary-600;
fill: var(--newspack-ui-color-primary);
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: colors.$primary-600;
background: var(--newspack-ui-color-primary);
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: colors.$primary-600;
fill: var(--newspack-ui-color-primary);
}
}

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: colors.$primary-600;
color: var(--newspack-ui-color-primary);

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

&:focus:not(:disabled) {
box-shadow: inset 0 0 0 2px colors.$primary-600;
box-shadow: inset 0 0 0 2px var(--newspack-ui-color-primary);
position: relative;
z-index: 1;
}
Expand All @@ -42,7 +42,7 @@
&:focus,
&:focus:enabled &:hover,
&:not(:disabled, [aria-disabled="true"], .is-default):hover {
color: colors.$primary-600;
color: var(--newspack-ui-color-primary);
}
}

Expand Down Expand Up @@ -89,8 +89,8 @@
min-height: 36px;

&:focus ~ div.components-input-control__backdrop {
border-color: colors.$primary-600;
box-shadow: inset 0 0 0 1px colors.$primary-600;
border-color: var(--newspack-ui-color-primary);
box-shadow: inset 0 0 0 1px var(--newspack-ui-color-primary);
}
}

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: colors.$primary-600;
background-color: var(--newspack-ui-color-primary);
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: colors.$primary-600;
border-color: colors.$primary-600;
background-color: var(--newspack-ui-color-primary);
border-color: var(--newspack-ui-color-primary);

&::before {
border: none;
}
}

&:focus {
border-color: colors.$primary-600;
box-shadow: 0 0 0 2px white, 0 0 0 3.5px colors.$primary-600;
border-color: var(--newspack-ui-color-primary);
box-shadow: 0 0 0 2px white, 0 0 0 3.5px var(--newspack-ui-color-primary);
}
}

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: colors.$primary-600;
color: var(--newspack-ui-color-primary);
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: colors.$primary-600;
color: var(--newspack-ui-color-primary);
}
}

Expand Down Expand Up @@ -48,8 +48,8 @@
}

.newspack-style-card__is-active & {
border-color: colors.$primary-600;
box-shadow: inset 0 0 0 1px colors.$primary-600;
border-color: var(--newspack-ui-color-primary);
box-shadow: inset 0 0 0 1px var(--newspack-ui-color-primary);

img {
position: relative;
Expand Down Expand Up @@ -88,7 +88,7 @@
}

.newspack-style-card__is-active & {
box-shadow: inset 0 0 0 1px colors.$primary-600;
box-shadow: inset 0 0 0 1px var(--newspack-ui-color-primary);
}
}
}
6 changes: 6 additions & 0 deletions src/components/src/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
@use "~@wordpress/base-styles/colors" as wp-colors;

:root {
// Colors
--newspack-ui-color-primary: #2240d5;
--newspack-ui-color-primary-rgb: 34, 64, 213;

// WP Admin
--wp-admin-theme-color: var(--newspack-ui-color-primary);
--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
}

// Buttons Card
Expand Down
12 changes: 6 additions & 6 deletions src/components/src/web-preview/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@

.newspack-web-preview {
// Color
--wp-admin-theme-color: #{colors.$primary-600};
--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
--wp-admin-theme-color-darker-10: #{colors.$primary-600};
--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
--wp-admin-theme-color: var(--newspack-ui-color-primary);
--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
--wp-admin-theme-color-darker-10: var(--newspack-ui-color-primary);
--wp-admin-theme-color-darker-10--rgb: var(--newspack-ui-color-primary-rgb);
--wp-admin-theme-color-darker-20: #{colors.$primary-700};
--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};

Expand Down Expand Up @@ -102,7 +102,7 @@
padding: 0 !important;

&.is-selected {
background: colors.$primary-600;
background: var(--newspack-ui-color-primary);
color: white;

&:active,
Expand All @@ -114,7 +114,7 @@
}

&:focus {
box-shadow: inset 0 0 0 1px colors.$primary-600, inset 0 0 0 3px white !important;
box-shadow: inset 0 0 0 1px var(--newspack-ui-color-primary), inset 0 0 0 3px white !important;
}
}

Expand Down
10 changes: 5 additions & 5 deletions src/components/src/with-wizard-screen/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@

.newspack-wizard {
// Color
--wp-admin-theme-color: #{colors.$primary-600};
--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
--wp-admin-theme-color-darker-10: #{colors.$primary-600};
--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
--wp-admin-theme-color: var(--newspack-ui-color-primary);
--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
--wp-admin-theme-color-darker-10: var(--newspack-ui-color-primary);
--wp-admin-theme-color-darker-10--rgb: var(--newspack-ui-color-primary-rgb);
--wp-admin-theme-color-darker-20: #{colors.$primary-700};
--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};

Expand Down Expand Up @@ -83,7 +83,7 @@
}

&:not(.newspack-icon) {
background: colors.$primary-600;
background: var(--newspack-ui-color-primary);
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: colors.$primary-600;
background: var(--newspack-ui-color-primary);
}

.newspack-footer {
background: colors.$primary-600;
border-color: colors.$primary-600;
background: var(--newspack-ui-color-primary);
border-color: var(--newspack-ui-color-primary);
justify-content: center;

&__logo {
Expand Down Expand Up @@ -116,7 +116,7 @@ svg {
}

&::before {
background: colors.$primary-600;
background: var(--newspack-ui-color-primary);
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: colors.$primary-600;
background: var(--newspack-ui-color-primary);

&::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: colors.$primary-600;
background: var(--newspack-ui-color-primary);
height: 8px;
right: 100%;
z-index: 9999;
Expand Down
4 changes: 2 additions & 2 deletions src/wizards/audience/views/campaigns/analytics/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
color: wp-colors.$gray-900 !important;
}
&:focus {
border-color: colors.$primary-600 !important;
box-shadow: inset 0 0 0 2px colors.$primary-600 !important;
border-color: var(--newspack-ui-color-primary) !important;
box-shadow: inset 0 0 0 2px var(--newspack-ui-color-primary) !important;
}
svg {
order: 2;
Expand Down
10 changes: 5 additions & 5 deletions src/wizards/audience/views/campaigns/campaigns/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@
}

.newspack-button.is-link {
color: colors.$primary-600;
color: var(--newspack-ui-color-primary);
padding: 0;
text-decoration: underline;

&:hover {
color: colors.$primary-600;
color: var(--newspack-ui-color-primary);
}
}
}
Expand All @@ -78,19 +78,19 @@
&:active,
&:focus,
&:hover {
color: colors.$primary-600;
color: var(--newspack-ui-color-primary);

svg {
background: wp-colors.$gray-100;
border-color: colors.$primary-600;
border-color: var(--newspack-ui-color-primary);
}
}

svg {
border: 1px solid wp-colors.$gray-300;
border-radius: 2px;
display: block;
fill: colors.$primary-600;
fill: var(--newspack-ui-color-primary);
margin: 0 0 8px;
padding: 23px;
transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out;
Expand Down
2 changes: 1 addition & 1 deletion src/wizards/audience/views/campaigns/segments/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

&.is-drop-target::before,
&.drop-target-after::after {
background-color: colors.$primary-600;
background-color: var(--newspack-ui-color-primary);
content: "";
display: block;
height: 2px;
Expand Down
8 changes: 4 additions & 4 deletions src/wizards/handoff-banner/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@

#newspack-handoff-banner {
// Color
--wp-admin-theme-color: #{colors.$primary-600};
--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
--wp-admin-theme-color-darker-10: #{colors.$primary-600};
--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
--wp-admin-theme-color: var(--newspack-ui-color-primary);
--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
--wp-admin-theme-color-darker-10: var(--newspack-ui-color-primary);
--wp-admin-theme-color-darker-10--rgb: var(--newspack-ui-color-primary-rgb);
--wp-admin-theme-color-darker-20: #{colors.$primary-700};
--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};

Expand Down
Loading

0 comments on commit c549ed4

Please sign in to comment.