Skip to content

Components: Re-land WPDS border token migration with Emotion-safe comments #79244

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

Components: Re-land WPDS border token migration with Emotion-safe comments #79244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a96956e
Components: Re-land WPDS border token migration (#79003)
ciampo Jun 16, 2026
ec51e94
Components: Avoid full DS token property names in Emotion source comm…
ciampo Jun 16, 2026
88d1562
Components: Update CHANGELOG PR reference to the re-land PR
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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
### Enhancements

- `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`: Migrate hardcoded border and stroke colors to WPDS tokens ([#79244](https://github.com/WordPress/gutenberg/pull/79244)).

### Bug Fixes

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 `stroke-interactive-neutral` WPDS 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 `stroke-surface-neutral` WPDS token when refactored to SCSS modules
const DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];
// TODO: should use the `stroke-surface-neutral-weak` WPDS 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
4 changes: 2 additions & 2 deletions packages/components/src/modal/use-modal-exit-animation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import { CONFIG } from '../utils';
* Milliseconds used as a fallback when racing `animationend` against a timeout.
*
* Sourced from `CONFIG.transitionDuration`. This value is implicitly coupled to
* the modal frame’s CSS `animation-duration` in `style.scss`, which uses
* `var(--wpds-motion-duration-md)`. If either the token, the SCSS, or
* the modal frame’s CSS `animation-duration` in `style.scss`, which uses the
* WPDS `motion-duration-md` token. If either the token, the SCSS, or
* `CONFIG.transitionDuration` changes, keep them aligned so exit timing stays correct.
*/
const FRAME_ANIMATION_DURATION_MS = Number.parseInt(
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 `stroke-surface-neutral` WPDS 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 `stroke-surface-neutral` WPDS 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
4 changes: 2 additions & 2 deletions packages/components/src/utils/config-values.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@ export default Object.assign( {}, CONTROL_PROPS, {
surfaceBackgroundTertiaryColor: COLORS.white,
surfaceColor: COLORS.white,
// Modal exit animation: `use-modal-exit-animation` parses this for the
// `animationend` timeout race; keep the numeric duration equal to
// `--wpds-motion-duration-md` on `.components-modal__frame` in modal/style.scss.
// `animationend` timeout race; keep the numeric duration equal to the WPDS
// `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.
transitionDuration: '200ms',
transitionDurationFast: '160ms',
transitionDurationFaster: '120ms',
Expand Down
10 changes: 6 additions & 4 deletions packages/components/src/utils/dropdown-motion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Motion configuration for dropdown-like popovers.
// Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css
// Values should stay in sync with --wpds-motion-* design tokens.
// Values should stay in sync with the WPDS motion design tokens.

export const DROPDOWN_MOTION = Object.freeze( {
SLIDE_DISTANCE: 4,
Expand All @@ -25,9 +25,11 @@ const convertEasingToString = ( easing: {
return easing.function;
};

// Note: --wpds-* tokens can't be used here directly because the build-time
// fallback injection is not compatible with Emotion. This file is consumed
// by Menu's Emotion styles.
// Note: WPDS design tokens can't be referenced here directly. The build-time
// fallback injection is incompatible with Emotion, and even mentioning a token's
// full CSS custom property name in this file makes the esbuild fallback plugin
// claim it and break the Emotion transform. This file is consumed by Menu's
// Emotion styles.
Comment on lines +28 to +32

@aduth aduth Jun 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Maybe we should make it a point to mention in #79245 to remove or update these comments once the described behavior is corrected.

export const DROPDOWN_MOTION_CSS = Object.freeze( {
SLIDE_DISTANCE: `${ DROPDOWN_MOTION.SLIDE_DISTANCE }px`,
SLIDE_DURATION: `${ DROPDOWN_MOTION.SLIDE_DURATION }ms`,
Expand Down
Loading