From 3eb5ebaae39a0b4060e0f3007abd73ecb9a0f4cb Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Mon, 8 Jun 2026 11:20:34 +0530 Subject: [PATCH 1/6] Components: Migrate hardcoded gray borders to use WPDS stroke-surface-neutral token --- packages/components/src/button/style.scss | 2 +- packages/components/src/form-toggle/style.scss | 2 +- packages/components/src/modal/style.scss | 2 +- packages/components/src/panel/style.scss | 2 +- packages/components/src/radio-control/style.scss | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 37ab30119552e0..195e49e212aaf4 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -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-surface-neutral); } &:focus:not(:active) { diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index 48a50e5c0dafc6..97a90b0c8f84f8 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -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-surface-neutral); @media ( forced-colors: active ) { border-color: GrayText; diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 52fd11f0e3e563..d9c2e9edf29d6f 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -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 { diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index 1cba950547e6f5..57b5a75e06c8c4 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -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; diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss index c0a7fef8804dec..86274f7fbf5801 100644 --- a/packages/components/src/radio-control/style.scss +++ b/packages/components/src/radio-control/style.scss @@ -56,7 +56,7 @@ &:disabled { background: $components-color-gray-100; - border: 1px solid $components-color-gray-300; + border: 1px solid var(--wpds-color-stroke-surface-neutral); opacity: 1; // Override style from wp-admin forms.css. &:checked::before { From db2d3a248284d5b13c3fa70ee82b5d46161d7f8e Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Fri, 12 Jun 2026 12:18:02 +0530 Subject: [PATCH 2/6] Add TODOs where fallback blocker --- packages/components/src/border-control/styles.ts | 1 + packages/components/src/menu/styles.ts | 2 ++ packages/components/src/spinner/styles.ts | 1 + packages/components/src/tools-panel/styles.ts | 1 + 4 files changed, 5 insertions(+) diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index 0109c0598e85b5..774934649af2fa 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -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` diff --git a/packages/components/src/menu/styles.ts b/packages/components/src/menu/styles.ts index c98d0343e96618..b3f534e8ba3571 100644 --- a/packages/components/src/menu/styles.ts +++ b/packages/components/src/menu/styles.ts @@ -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 ]; diff --git a/packages/components/src/spinner/styles.ts b/packages/components/src/spinner/styles.ts index e51fd29470541c..1730fb041ec236 100644 --- a/packages/components/src/spinner/styles.ts +++ b/packages/components/src/spinner/styles.ts @@ -37,6 +37,7 @@ const commonPathProps = css` export const SpinnerTrack = styled.circle` ${ commonPathProps }; + /* TODO: should use the wpds-color-stroke-surface-neutral token when refactored to SCSS modules */ stroke: ${ COLORS.gray[ 300 ] }; `; diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 46b2763ccea878..2c02da0871049d 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -34,6 +34,7 @@ export const ToolsPanel = ( columns: number ) => css` ${ toolsPanelGrid.columns( columns ) } ${ toolsPanelGrid.spacing } + /* TODO: should use the wpds-color-stroke-surface-neutral token when refactored to SCSS modules */ border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] }; margin-top: -1px; padding: ${ space( 4 ) }; From 56e57e3763a4c1460d493ab4180506020b0cfcbc Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Fri, 12 Jun 2026 12:18:42 +0530 Subject: [PATCH 3/6] Components: Migrate hardcoded gray-300 tokens to WPDS alternatives --- packages/components/src/button/style.scss | 2 +- packages/components/src/dropdown-menu/style.scss | 2 +- packages/components/src/form-toggle/style.scss | 2 +- packages/components/src/radio-control/style.scss | 2 +- packages/components/src/toolbar/toolbar-group/style.scss | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 195e49e212aaf4..b93b3689442124 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -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 var(--wpds-color-stroke-surface-neutral); + box-shadow: inset 0 0 0 $border-width var(--wpds-color-stroke-interactive-neutral-disabled); } &:focus:not(:active) { diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index ca50da9da947fe..9450f9830c540c 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -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; diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index 97a90b0c8f84f8..2ef2bd31fe226d 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -106,7 +106,7 @@ $transition-duration: 0.2s; .components-disabled & { .components-form-toggle__track { background-color: $components-color-gray-100; - border-color: var(--wpds-color-stroke-surface-neutral); + border-color: var(--wpds-color-stroke-interactive-neutral-disabled); @media ( forced-colors: active ) { border-color: GrayText; diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss index 86274f7fbf5801..c7cdfaf3f436d1 100644 --- a/packages/components/src/radio-control/style.scss +++ b/packages/components/src/radio-control/style.scss @@ -56,7 +56,7 @@ &:disabled { background: $components-color-gray-100; - border: 1px solid var(--wpds-color-stroke-surface-neutral); + border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled); opacity: 1; // Override style from wp-admin forms.css. &:checked::before { diff --git a/packages/components/src/toolbar/toolbar-group/style.scss b/packages/components/src/toolbar/toolbar-group/style.scss index 1a1862747a9549..ef32998abdaf15 100644 --- a/packages/components/src/toolbar/toolbar-group/style.scss +++ b/packages/components/src/toolbar/toolbar-group/style.scss @@ -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; From 71e884c4c073074b910722cf83552e6a80d0004b Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Tue, 16 Jun 2026 13:15:37 +0530 Subject: [PATCH 4/6] Components: Remove duplicate TODO for WPDS color token in SpinnerTrack and ToolsPanel styles --- packages/components/src/spinner/styles.ts | 2 +- packages/components/src/tools-panel/styles.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/spinner/styles.ts b/packages/components/src/spinner/styles.ts index 1730fb041ec236..5219c1bc1dac8c 100644 --- a/packages/components/src/spinner/styles.ts +++ b/packages/components/src/spinner/styles.ts @@ -35,9 +35,9 @@ 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 }; - /* TODO: should use the wpds-color-stroke-surface-neutral token when refactored to SCSS modules */ stroke: ${ COLORS.gray[ 300 ] }; `; diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 2c02da0871049d..db1713d7e94316 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -30,11 +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 } - - /* TODO: should use the wpds-color-stroke-surface-neutral token when refactored to SCSS modules */ border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] }; margin-top: -1px; padding: ${ space( 4 ) }; From 4352ce9a7291af10d0f43bce22648a50059c8179 Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Tue, 16 Jun 2026 13:15:58 +0530 Subject: [PATCH 5/6] Add Changelog entry --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f99fd10a1737c9..4e929807642e6a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- `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)). + ### 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)). From 2acdf9555d0ae5d406cd564394be6726b98599a7 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 16 Jun 2026 11:59:50 +0200 Subject: [PATCH 6/6] Apply suggestion from @ciampo --- packages/components/CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0884e23082934f..d2ffa69aba48be 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,8 +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`, `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)). +- `Button`, `DropdownMenu`, `FormToggle`, `Modal`, `Panel`, `RadioControl`, `Toolbar`: Migrate hardcoded border and stroke colors to WPDS tokens ([#79003](https://github.com/WordPress/gutenberg/pull/79003)). ### Bug Fixes