Skip to content

Stylelint: no token fallback values (VideoPress, Search, Forms, Publicize, & Boost) #50527

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

Merged
simison merged 5 commits into from
Jul 16, 2026
Merged

Stylelint: no token fallback values (VideoPress, Search, Forms, Publicize, & Boost) #50527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f75acb
Stylelint: remove WPDS fallbacks in Publicize and Search
simison Jul 14, 2026
a93befb
Add VideoPress
simison Jul 14, 2026
e39ba41
Add Forms
simison Jul 14, 2026
7e1f9b3
Add Boost
simison Jul 14, 2026
8cbbea8
Remove manual WPDS token fallbacks from webpack bundles.
simison Jul 14, 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
2 changes: 1 addition & 1 deletion projects/packages/forms/changelog/update-stylelint-wp-build-no-token-fallback-values
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Significance: patch
Type: changed

Comment: Remove manual WPDS token fallbacks from wp-build route styles so build-time PostCSS injects canonical design-token fallbacks.
Comment: Remove manual WPDS token fallbacks from wp-build route and webpack dashboard styles so build-time PostCSS injects canonical design-token fallbacks.
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/input-range/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ div.jetpack-input-range {
vertical-align: baseline;

&.has-error {
outline-color: var(--wpds-color-foreground-content-error, #470000);
outline-color: var(--wpds-color-foreground-content-error);
box-shadow: none;
}

Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/dashboard/components/dataviews-header-row/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
// Jetpack Forms specific additions (match Inbox).
position: sticky;
left: 0;
background: var(--wpds-color-background-surface-neutral-strong, #fff);
background: var(--wpds-color-background-surface-neutral-strong);
justify-content: space-between;
gap: 8px;
flex-direction: column;
Expand Down
4 changes: 2 additions & 2 deletions projects/packages/forms/src/dashboard/components/feedback-comments/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

// Individual comment (item)
.jp-forms__feedback-comments-comment {
background-color: var(--jp-forms-white-off, var(--wpds-color-background-surface-neutral-weak, #e7e7e7));
background-color: var(--jp-forms-white-off, var(--wpds-color-background-surface-neutral-weak));
border-radius: var(--jp-forms-border-radius, 4px);
padding: 12px;

Expand All @@ -75,7 +75,7 @@
.jp-forms__feedback-comments-comment-author {
font-size: 14px;
font-weight: 600;
color: var(--jp-forms-color-darker-20, var(--wpds-color-foreground-content-neutral, #1e1e1e));
color: var(--jp-forms-color-darker-20, var(--wpds-color-foreground-content-neutral));
}

.jp-forms__feedback-comments-comment-date {
Expand Down
8 changes: 4 additions & 4 deletions ...ackages/forms/src/dashboard/components/inspector/response-fields/field-preview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
padding-top: 24px;
padding-bottom: 24px;
// Multiple variables as fallback until style tokens are fully available.
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, var(--jp-forms-border-color, #e0e0e0));
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
}

.jp-forms__field-preview-icon {
Expand All @@ -18,14 +18,14 @@
.jp-forms__field-preview-content {
min-width: 0; // Prevents flex item from overflowing
overflow-wrap: break-word;
line-height: var(--wpds-typography-line-height-sm, 20px);
line-height: var(--wpds-typography-line-height-sm);
}

// Value needed for positioning with the icon in case label is missing.
.jp-forms__field-preview-label,
.jp-forms__field-preview-value {
// Align first line centrally with the 24px icon.
margin-top: calc((24px - var(--wpds-typography-line-height-sm, 20px)) / 2);
margin-top: calc((24px - var(--wpds-typography-line-height-sm)) / 2);
}
}

Expand All @@ -40,7 +40,7 @@
}

.jp-forms__field-preview-label {
color: var(--wpds-color-foreground-content-neutral-weak, #707070);
color: var(--wpds-color-foreground-content-neutral-weak);
font-weight: 300;
}

Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/dashboard/components/inspector/response-meta/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
padding: variables.$grid-unit-30 variables.$grid-unit-20;

// Multiple variables as fallback until style tokens are available everywhere.
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, var(--jp-forms-border-color, #e0e0e0));
border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
}

.jp-forms__inbox-response-meta-from {
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/dashboard/inbox/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
background-color: var(--wpds-color-background-surface-neutral-strong);
}

/*
Expand Down
8 changes: 4 additions & 4 deletions projects/packages/publicize/_inc/components/connection-icon/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,17 @@

img,
.avatar {
background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
background-color: var(--wpds-color-background-surface-neutral-strong);
block-size: 24px;
border: 2px solid var(--wpds-color-background-surface-neutral-strong, #fff);
border: 2px solid var(--wpds-color-background-surface-neutral-strong);
border-radius: 50%;
inline-size: 24px;
}

.social-icon {
background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
background-color: var(--wpds-color-background-surface-neutral-strong);
block-size: 14px;
border-radius: var(--wpds-border-radius-sm, 2px);
border-radius: var(--wpds-border-radius-sm);
inline-size: 14px;
inset-block-end: 0;
inset-inline-end: 0;
Expand Down
38 changes: 19 additions & 19 deletions projects/packages/publicize/_inc/components/connection-management/style-modern.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
align-items: start;
display: flex;
flex-direction: column;
gap: var(--wpds-dimension-gap-xl, 24px);
padding-top: var(--wpds-dimension-padding-lg, 16px);
gap: var(--wpds-dimension-gap-xl);
padding-top: var(--wpds-dimension-padding-lg);
width: 100%;

> h3 {
Expand All @@ -12,7 +12,7 @@
}

.description {
color: var(--wpds-color-foreground-content-neutral-weak, #757575);
color: var(--wpds-color-foreground-content-neutral-weak);
}

.connection-list {
Expand All @@ -31,7 +31,7 @@
// divider line that separates it from the surrounding Card.Header
// (or whatever chrome wraps the list).
.connection-list-item {
border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
margin: 0;
}
}
Expand All @@ -42,8 +42,8 @@
.connection-row {
align-items: center;
display: flex;
gap: var(--wpds-dimension-gap-lg, 16px);
padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
gap: var(--wpds-dimension-gap-lg);
padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
width: 100%;
}

Expand All @@ -55,16 +55,16 @@
appearance: none;
background: none;
border: 0;
border-radius: var(--wpds-border-radius-sm, 2px);
border-radius: var(--wpds-border-radius-sm);
color: inherit;
cursor: var(--wpds-cursor-control, pointer);
cursor: var(--wpds-cursor-control);
display: inline-flex;
flex-shrink: 0;
margin: 0;
padding: var(--wpds-dimension-padding-xs, 4px);
padding: var(--wpds-dimension-padding-xs);

&:focus-visible {
outline: var(--wpds-border-width-focus, 2px) solid var(--wpds-color-stroke-focus, #3858e9);
outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
outline-offset: 0;
}
}
Expand All @@ -79,20 +79,20 @@
// Size comes from the `body-lg` Text variant; keep the neutral colour and the
// medium weight that the variant doesn't set.
.connection-item-name {
color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
font-weight: var(--wpds-typography-font-weight-medium, 499);
color: var(--wpds-color-foreground-content-neutral);
font-weight: var(--wpds-typography-font-weight-medium);
}

.connection-network {
color: var(--wpds-color-foreground-content-neutral-weak, #757575);
color: var(--wpds-color-foreground-content-neutral-weak);
}

.chevron {
color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
color: var(--wpds-color-foreground-content-neutral);
flex-shrink: 0;

@media not (prefers-reduced-motion) {
transition: rotate var(--wpds-motion-duration-md, 0.15s) var(--wpds-motion-easing-balanced, ease-out);
transition: rotate var(--wpds-motion-duration-md) var(--wpds-motion-easing-balanced);
}
}

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

@media not (prefers-reduced-motion) {
transition: all var(--wpds-motion-duration-md, 0.15s) var(--wpds-motion-easing-balanced, ease-out);
transition: all var(--wpds-motion-duration-md) var(--wpds-motion-easing-balanced);
}
}

Expand All @@ -129,17 +129,17 @@
// padding doubles as clearance for the focus ring of the first focusable
// child (e.g. the mark-as-shared info button) — without it the ring's top
// edge is clipped by the panel.
padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-xl, 20px);
padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-2xl) var(--wpds-dimension-padding-xl);
}

// Stack supplies the row layout (align + gap); only the trailing spacing
// below the toggle is left here.
.mark-shared-wrap {
padding-bottom: var(--wpds-dimension-padding-lg, 16px);
padding-bottom: var(--wpds-dimension-padding-lg);
}

.connection-template-wrap {
margin-bottom: var(--wpds-dimension-gap-xl, 24px);
margin-bottom: var(--wpds-dimension-gap-xl);

&:empty {
margin-bottom: 0;
Expand Down
6 changes: 3 additions & 3 deletions ...ects/packages/publicize/_inc/components/manage-connections-modal/style-modern.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
// causes.
// `translateX(-50%)` keeps the frame horizontally centered against `left: 50%`.
.services-list {
top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wpds-dimension-padding-2xl, 24px));
max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--wpds-dimension-padding-2xl, 24px));
top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wpds-dimension-padding-2xl));
max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--wpds-dimension-padding-2xl));
transform: translateX(-50%);
}

Expand Down Expand Up @@ -48,7 +48,7 @@
--jetpack-social-admin-menu-width: 160px;

left: calc(50% + var(--jetpack-social-admin-menu-width) / 2);
max-width: min(960px, calc(100dvw - var(--jetpack-social-admin-menu-width) - 2 * var(--wpds-dimension-padding-2xl, 24px)));
max-width: min(960px, calc(100dvw - var(--jetpack-social-admin-menu-width) - 2 * var(--wpds-dimension-padding-2xl)));
}

// The sidebar width varies by environment and menu state; mirror the chassis
Expand Down
6 changes: 3 additions & 3 deletions projects/packages/publicize/_inc/components/overview-tab/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
.jetpack-social-overview {
display: flex;
flex-direction: column;
gap: var(--wpds-dimension-gap-lg, 16px);
gap: var(--wpds-dimension-gap-lg);
margin-inline: auto;
max-inline-size: 720px;
inline-size: 100%;
Expand All @@ -22,7 +22,7 @@
align-items: center;
display: flex;
flex-direction: column;
padding-block: var(--wpds-dimension-padding-2xl, 24px);
padding-block: var(--wpds-dimension-padding-2xl);
text-align: center;
}

Expand All @@ -40,7 +40,7 @@
// The top padding stays at Card.Header's default 24px so the title still
// has comfortable headroom from the card edge.
.jetpack-social-overview__accounts-card-header {
padding-block-end: var(--wpds-dimension-padding-xl, 20px);
padding-block-end: var(--wpds-dimension-padding-xl);
}

// Strip the Card.Content padding when the body is the flat connections
Expand Down
8 changes: 4 additions & 4 deletions projects/packages/publicize/_inc/components/overview-tab/traffic-chart-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--wpds-dimension-gap-md, 12px);
gap: var(--wpds-dimension-gap-md);
justify-content: space-between;
}

Expand All @@ -29,7 +29,7 @@
}

.jetpack-social-overview__chart-content {
padding-block-start: var(--wpds-dimension-padding-md, 12px);
padding-block-start: var(--wpds-dimension-padding-md);
}

.jetpack-social-overview__chart-loading,
Expand All @@ -39,7 +39,7 @@
display: flex;
justify-content: center;
min-block-size: 240px;
padding-block: var(--wpds-dimension-padding-xl, 20px);
padding-block: var(--wpds-dimension-padding-xl);
text-align: center;
}

Expand Down Expand Up @@ -76,7 +76,7 @@
display: flex;
inset: 0;
justify-content: center;
padding: var(--wpds-dimension-padding-md, 12px);
padding: var(--wpds-dimension-padding-md);
pointer-events: none;
position: absolute;
}
Expand Down
Loading
Loading