Skip to content

FormToggle: Match Switch colors across states #83773

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
mirka merged 9 commits into from
Sep 30, 2026
+33 −41
Merged

FormToggle: Match Switch colors across states #83773

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b560094
FormToggle: Match Switch border styles
mirka Sep 29, 2026
56851bf
FormToggle: Link changelog entry to PR
mirka Sep 29, 2026
bc86254
FormToggle: Keep existing Storybook stories
mirka Sep 29, 2026
8127825
FormToggle: Match Switch checked colors
mirka Sep 29, 2026
d6b81c6
FormToggle: Match Switch neutral colors
mirka Sep 29, 2026
d64e05e
FormToggle: Use focus stroke token directly
mirka Sep 29, 2026
d92664c
FormToggle: Remove redundant forced-colors fill
mirka Sep 30, 2026
e14cfa5
Merge remote-tracking branch 'origin/trunk' into HEAD
mirka Sep 30, 2026
1b4344c
Merge remote-tracking branch 'origin/trunk' into HEAD
mirka Sep 30, 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 @@ -11,6 +11,7 @@

### Enhancements

- `FormToggle`: Match the `@wordpress/ui` `Switch` track, thumb, and border colors across unchecked, checked, hover, and disabled states ([#83773](https://github.com/WordPress/gutenberg/pull/83773)).
- `InputControl`, `SelectControl`, `CustomSelectControl`: Darken the field border on hover to the active stroke color used by `@wordpress/ui`. Disabled and borderless fields keep their resting border ([#83306](https://github.com/WordPress/gutenberg/pull/83306)).
- `TextControl`: Use the `@wordpress/ui` disabled text, placeholder, and border colors, and keep the field background instead of the gray disabled fill from wp-admin ([#83307](https://github.com/WordPress/gutenberg/pull/83307)).

Expand Down
53 changes: 38 additions & 15 deletions packages/components/src/form-toggle/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
@use "sass:math";
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "../utils/theme-variables" as *;

$toggle-width: $grid-unit-40;
$toggle-height: $grid-unit-20;
Expand All @@ -24,8 +22,8 @@ $transition-duration: 0.2s;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
background-color: $white;
border: $toggle-border-width solid $gray-600;
background-color: var(--wpds-color-background-interactive-neutral-weak);
border: $toggle-border-width solid var(--wpds-color-stroke-interactive-neutral);
width: $toggle-width;
height: $toggle-height;
border-radius: math.div($toggle-height, 2);
Expand Down Expand Up @@ -71,17 +69,33 @@ $transition-duration: 0.2s;
$transition-duration background-color ease-out;
}

background-color: $gray-900;
background-color: var(--wpds-color-foreground-interactive-neutral);
box-shadow: $elevation-x-small;

// Transparent border acts as a fill in Windows High Contrast Mode.
border: math.div($toggle-thumb-size, 2) solid transparent;

@media ( forced-colors: active ) {
background-color: ButtonText;
}
}

&:not(.is-checked, .is-disabled):hover .components-form-toggle__track {
border-color: var(--wpds-color-stroke-interactive-neutral-active);
}

// Checked state.
&.is-checked .components-form-toggle__track {
background-color: $components-color-accent;
border-color: $components-color-accent;
background-color: var(--wpds-color-background-interactive-brand-strong);
border-color: transparent;

@media ( forced-colors: active ) {
background-color: Highlight;

&::after {
border-top-color: Highlight;
}
}

@ciampo ciampo Sep 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Could we remove the old ::after fill now that the checked track has a Highlight background? It currently causes browsers to paint that semi-transparent highlight color twice. It should also hel the checked fill to look like the ui Switch component

@mirka mirka Sep 30, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Confirmed, removed in d92664c.


// Windows High Contrast Mode
&::after {
Expand All @@ -90,22 +104,26 @@ $transition-duration: 0.2s;
}

.components-form-toggle__input:focus + .components-form-toggle__track {
@include button-style-outset__focus($components-color-accent);
@include button-style-outset__focus(var(--wpds-color-stroke-focus));
}

&.is-checked {
.components-form-toggle__thumb {
background-color: $white;
background-color: var(--wpds-color-foreground-interactive-brand-strong);
border-width: 0; // Zero out the border color to make the thumb invisible in Windows High Contrast Mode.
transform: translateX($toggle-width - ($toggle-border-width * 4) - ($toggle-height - ($toggle-border-width * 4)));

@media ( forced-colors: active ) {
background-color: HighlightText;
}
}
}

// Disabled state:
&.is-disabled,
[inert] & {
.components-form-toggle__track {
background-color: $components-color-gray-100;
background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
border-color: var(--wpds-color-stroke-interactive-neutral-disabled);

@media ( forced-colors: active ) {
Expand All @@ -114,20 +132,21 @@ $transition-duration: 0.2s;
}

.components-form-toggle__thumb {
background-color: $components-color-gray-400;
background-color: var(--wpds-color-foreground-interactive-neutral-disabled);
box-shadow: none;

@media ( forced-colors: active ) {
background-color: GrayText;
border-color: GrayText;
}
}

&.is-checked .components-form-toggle__track {
background-color: $components-color-gray-400;
border-color: $components-color-gray-400;
background-color: var(--wpds-color-background-interactive-brand-strong-disabled);
border-color: transparent;

@media ( forced-colors: active ) {
border-color: GrayText;
background-color: GrayText;

&::after {
border-top-color: GrayText;
Expand All @@ -136,7 +155,11 @@ $transition-duration: 0.2s;
}

&.is-checked .components-form-toggle__thumb {
background-color: $white;
background-color: var(--wpds-color-foreground-interactive-brand-strong-disabled);

@media ( forced-colors: active ) {
background-color: Canvas;
}
}
}
}
Expand Down
Loading