Skip to content

Components: Complete WPDS token migration for remaining borders #79003

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
ciampo merged 7 commits into from
Jun 16, 2026
Merged

Components: Complete WPDS token migration for remaining borders #79003

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3eb5eba
Components: Migrate hardcoded gray borders to use WPDS stroke-surface…
himanshupathak95 Jun 8, 2026
db2d3a2
Add TODOs where fallback blocker
himanshupathak95 Jun 12, 2026
56e57e3
Components: Migrate hardcoded gray-300 tokens to WPDS alternatives
himanshupathak95 Jun 12, 2026
71e884c
Components: Remove duplicate TODO for WPDS color token in SpinnerTrac…
himanshupathak95 Jun 16, 2026
4352ce9
Add Changelog entry
himanshupathak95 Jun 16, 2026
bb11ece
Merge branch 'trunk' into upd/79001-components-wpds-border-colors
himanshupathak95 Jun 16, 2026
2acdf95
Apply suggestion from @ciampo
ciampo Jun 16, 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: 2 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

- `BaseControl`: Apply `text-wrap: pretty` to help text to avoid typographic widows ([#79112](https://github.com/WordPress/gutenberg/pull/79112)).

- `Button`, `DropdownMenu`, `FormToggle`, `Modal`, `Panel`, `RadioControl`, `Toolbar`, `ToolsPanel`: Migrate hardcoded `gray-300` border and stroke colors to WPDS `stroke-surface-neutral` and `stroke-interactive-neutral-disabled` tokens, so component borders adapt to the active admin color scheme ([#79003](https://github.com/WordPress/gutenberg/pull/79003)).

Comment thread
ciampo marked this conversation as resolved.
Resolved
### Bug Fixes

- `SandBox`: Fix the viewport-unit (`vh`, `vw`, etc.) stripping so user-supplied HTML using these units in `width`/`height` no longer triggers a runaway resize loop in the preview ([#78677](https://github.com/WordPress/gutenberg/pull/78677)).
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/border-control/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export const colorIndicatorBorder = ( border?: Border ) => {
const { color, style } = border || {};

const fallbackColor =
// TODO: should use the `--wpds-color-stroke-interactive-neutral` token when refactored to SCSS modules
!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;

return css`
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@
&:disabled:not(:focus),
&[aria-disabled="true"]:not(:focus),
&[aria-disabled="true"]:hover:not(:focus) {
box-shadow: inset 0 0 0 $border-width $gray-300;
box-shadow: inset 0 0 0 $border-width var(--wpds-color-stroke-interactive-neutral-disabled);
}

&:focus:not(:active) {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dropdown-menu/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
display: block;
content: "";
box-sizing: content-box;
background-color: $gray-300;
background-color: var(--wpds-color-stroke-surface-neutral);
position: absolute;
top: -3px;
left: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/form-toggle/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ $transition-duration: 0.2s;
.components-disabled & {
.components-form-toggle__track {
background-color: $components-color-gray-100;
border-color: $components-color-gray-300;
border-color: var(--wpds-color-stroke-interactive-neutral-disabled);

@media ( forced-colors: active ) {
border-color: GrayText;
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/menu/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ const ITEM_PADDING_INLINE = space( 3 );
// - border color and divider color are different from COLORS.theme variables
// - lighter text color is not defined in COLORS.theme, should it be?
// - lighter background color is not defined in COLORS.theme, should it be?
// TODO: should use the `--wpds-color-stroke-surface-neutral` token when refactored to SCSS modules
const DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];
// TODO: should use the `--wpds-color-stroke-surface-neutral-weak` token when refactored to SCSS modules
const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@
}

.components-modal__content.has-scrolled-content:not(.hide-header) & {
border-bottom-color: $gray-300;
border-bottom-color: var(--wpds-color-stroke-surface-neutral);
}

& + p {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
justify-content: space-between;
align-items: center;
padding: 0 $grid-unit-20;
border-bottom: $border-width solid $gray-300;
border-bottom: $border-width solid var(--wpds-color-stroke-surface-neutral);

// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
box-sizing: content-box;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/radio-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@

&:disabled {
background: $components-color-gray-100;
border: 1px solid $components-color-gray-300;
border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled);
opacity: 1; // Override style from wp-admin forms.css.

&:checked::before {
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/spinner/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const commonPathProps = css`
stroke-width: 1.5px;
`;

// TODO: should use the `--wpds-color-stroke-surface-neutral` token when refactored to SCSS modules
export const SpinnerTrack = styled.circle`
${ commonPathProps };
stroke: ${ COLORS.gray[ 300 ] };
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/toolbar/toolbar-group/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ div.components-toolbar {
display: inline-block;
content: "";
box-sizing: content-box;
background-color: $gray-300;
background-color: var(--wpds-color-stroke-surface-neutral);
position: absolute;
top: 8px;
left: -3px;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/tools-panel/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ const toolsPanelGrid = {
},
};

// TODO: should use the `--wpds-color-stroke-surface-neutral` token when refactored to SCSS modules
export const ToolsPanel = ( columns: number ) => css`
${ toolsPanelGrid.columns( columns ) }
${ toolsPanelGrid.spacing }

border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };
margin-top: -1px;
padding: ${ space( 4 ) };
Expand Down
Loading