Skip to content

Componentry: remove Jetpack color overrides on core components #47317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
simison wants to merge 2 commits into
base: trunk
Choose a base branch
from
+32 −119
Open

Componentry: remove Jetpack color overrides on core components #47317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1cbeb6b
Componentry: remove Jetpack color overrides on core components
simison Feb 25, 2026
d6b9934
Add changelog entries.
Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/js-packages/base-styles/changelog/pr-47317
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove unused `--jp-highlight` CSS variable.
2 changes: 0 additions & 2 deletions projects/js-packages/base-styles/root-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,4 @@
--jp-button-radius: 4px;

--jp-gap: 16px;

--jp-highlight: #3858e9;
}
4 changes: 4 additions & 0 deletions projects/js-packages/components/changelog/pr-47317
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Button, ToggleControl: Remove Jetpack color overrides on core WordPress components.
7 changes: 0 additions & 7 deletions projects/js-packages/components/components/button/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
.button {
--wp-admin-theme-color: var(--jp-black);
--wp-admin-theme-color-darker-10: var(--jp-black-80);
--wp-admin-theme-color-darker-20: var(--jp-black-80);
// 1.51px to avoid subpixel rendering issues on Firefox/Linux
--wp-admin-border-width-focus: 1.51px;

border-radius: var(--jp-border-radius);
justify-content: center;
font-weight: 600;

Expand Down
1 change: 0 additions & 1 deletion projects/js-packages/components/components/toggle-control/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
:global {

.components-form-toggle {
--wp-admin-theme-color: var(--jp-green-40);
height: calc(var(--base-width) * 3);


Expand Down
3 changes: 0 additions & 3 deletions projects/packages/my-jetpack/_inc/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@
}

#my-jetpack-container {
--wp-admin-theme-color: var(--jp-black);
--wp-admin-theme-color-darker-10: var(--jp-black-80);
--wp-admin-theme-color-darker-20: var(--jp-black-80);
height: 100%;

.jp-dashboard-footer__jetpack-symbol {
Expand Down
4 changes: 4 additions & 0 deletions projects/packages/my-jetpack/changelog/pr-47317
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove Jetpack color overrides on core WordPress components.
4 changes: 0 additions & 4 deletions ...kages/publicize/_inc/components/admin-page/toggles/social-notes-toggle/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,6 @@

.components-base-control {

&__field {
--wp-admin-theme-color: var(--jp-green-40);
}

label.components-input-control__label {
text-transform: none;
font-weight: inherit;
Expand Down
1 change: 0 additions & 1 deletion projects/packages/publicize/_inc/components/admin-page/toggles/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@
:global {

.components-base-control__field {
--wp-admin-theme-color: var(--jp-green-40);
margin-bottom: 0;

.components-form-toggle {
Expand Down
4 changes: 4 additions & 0 deletions projects/packages/publicize/changelog/pr-47317
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove Jetpack color overrides on core toggle components.
4 changes: 4 additions & 0 deletions projects/packages/search/changelog/pr-47317
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove custom toggle color overrides to use native WordPress admin theme colors.
53 changes: 0 additions & 53 deletions projects/packages/search/src/dashboard/components/module-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@ $color-button-background: variables.$black;
$color-button-text: variables.$white;
$color-button-background-disabled: #dcdcde;
$color-button-text-disabled: #a7aaad;
$toggle-dot-radius: 0.9375em;
$toggle-dot-padding: 0.1875em;
$toggle-height: 1.5em;
$toggle-width: 3em;

.jp-form-search-settings-group {
width: 100%;
Expand All @@ -19,10 +15,6 @@ $toggle-width: 3em;
padding-top: 4em;
}

.form-toggle__label {
margin: 0;
}

&.jp-form-search-settings-group--disabled {

&::after {
Expand Down Expand Up @@ -114,51 +106,6 @@ p.jp-form-search-settings-group__toggle-explanation {
}
}

.form-toggle.is-search-admin.is-compact {

+ .form-toggle__switch {
border-radius: calc(#{$toggle-height}/ 2);
width: $toggle-width;
height: $toggle-height;

&::before,
&::after {
width: $toggle-dot-radius;
height: $toggle-dot-radius;
background-color: variables.$black;
}
background: variables.$white;
border: 2px solid variables.$black;

&:focus {
box-shadow: 0 0 0 2px variables.$blue-medium;
}
}

&:checked {

+ .form-toggle__switch {
background: variables.$color-plan;
border-color: variables.$color-plan;

&::after {
left: $toggle-height;
background-color: variables.$white;
}
}
}

&.is-toggling + .form-toggle__switch::before,
&.is-toggling + .form-toggle__switch::after {
left: $toggle-height;
}

&.is-toggling:checked + .form-toggle__switch::before,
&.is-toggling:checked + .form-toggle__switch::after {
left: 0;
}
}

.jp-search-dashboard-cut {
position: relative;
display: block;
Expand Down
4 changes: 4 additions & 0 deletions projects/packages/videopress/changelog/pr-47317
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Video Thumbnail: Remove Jetpack color override on loading spinner.
3 changes: 0 additions & 3 deletions projects/packages/videopress/src/client/admin/components/video-thumbnail/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,6 @@
}

.custom-thumbnail {
// Change spinner color
--wp-admin-theme-color: var(--jp-green-50);

display: flex;
justify-content: center;
align-items: center;
Expand Down
16 changes: 0 additions & 16 deletions projects/plugins/boost/app/assets/src/css/admin-banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,7 @@
}

&__cta-button {
background: #000;
border: 1px solid #000;
border-radius: 4px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 0.875rem;
Expand All @@ -97,18 +93,6 @@
text-overflow: ellipsis;
transition: all 0.15s ease-in-out;
vertical-align: top;

&:hover {
color: #fff;
background-color: variables.$gray_80;
}

&:focus {
color: #fff;
box-shadow: none;
outline: solid 1px variables.$primary-black;
outline-offset: 1px;
}
}

.notice-dismiss {
Expand Down
24 changes: 0 additions & 24 deletions projects/plugins/boost/app/assets/src/css/main/wp-admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@ p {
}
// Override WordPress component styles
.jb-dashboard {
Copy link

Copilot AI Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The custom override for --wp-admin-theme-link-color has been removed, but this variable is still referenced on lines 36 and 40 of this file. Since the custom override was #{variables.$gray_90}, removing it means these elements will now use WordPress core's default link color instead of the previous gray color. This could result in a visual change. If this is intentional, the references should ideally be updated to either use the core variable directly or be removed if the default behavior is desired.

Copilot uses AI. Check for mistakes.
Copy link
Member Author

@simison simison Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They might still be needed, but needs a closer look:

jetpack/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss

Lines 40 to 46 in 83e5487

a {
color: var(--wp-admin-theme-link-color);
}
.components-button.is-link:not(:disabled) {
color: var(--wp-admin-theme-link-color);
}

These also are related and need a closer look to see what they actually affect:

jetpack/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss

Lines 96 to 105 in 83e5487

// Override WP styles for panel header.
.components-panel__body-title .components-button:hover:not(:disabled,[aria-disabled="true"]),
.components-panel__body-title .components-button[aria-expanded="true"] {
color: inherit;
}
.components-panel__body-toggle.components-button:focus {
border-radius: inherit;
box-shadow: none;
}

--wp-admin-theme-color: #{variables.$jetpack_green_50};
--wp-admin-theme-link-color: #{variables.$gray_90};
--wp-admin-theme-color-darker-10: #{variables.$jetpack_green_60};
--wp-admin-theme-color-darker-20: #{variables.$jetpack_green_70};

--font-headline-medium: 48px;
--font-title-medium: 24px;
--font-body-small: 14px;
Expand Down Expand Up @@ -74,25 +69,6 @@ p {
font-size: 24px;
}

button.secondary,
a.button-secondary {
color: variables.$primary-black;
background: none;
border: 1px solid variables.$primary-black;
padding: 8px 24px;
border-radius: 3px;
font-weight: 600;
cursor: pointer;
font-size: 16px;
line-height: 24px;
Comment on lines -79 to -87
Copy link
Member Author

@simison simison Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some non-color changes here so need to double check where it was applied in Boost and check properly.


&:hover {
background: variables.$gray_0;
border-color: variables.$primary-black;
color: variables.$primary-black;
}
}

// Override WP styles for panel header.
.components-panel__body-title .components-button:hover:not(:disabled,[aria-disabled="true"]),
.components-panel__body-title .components-button[aria-expanded="true"] {
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/boost/changelog/pr-47317
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove Jetpack color overrides on core components, allowing them to use native WordPress admin theme colors.
4 changes: 4 additions & 0 deletions projects/plugins/protect/changelog/pr-47317
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove Jetpack color overrides on core WordPress components.
5 changes: 0 additions & 5 deletions projects/plugins/protect/src/js/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@
}

#jetpack-protect-root {
--wp-admin-theme-color: var(--jp-black);
--wp-admin-theme-color-darker-10: var(--jp-black-80);
--wp-admin-theme-color-darker-20: var(--jp-black-80);
// 1.51px to avoid subpixel rendering issues on Firefox/Linux
--wp-admin-border-width-focus: 1.51px;
--actions-size: 28px;
}
}
Loading