Skip to content

Components: Align RadioControl colors with UI Radio #83270

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 10 commits into from
Sep 30, 2026
Merged

Components: Align RadioControl colors with UI Radio #83270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
682ae71
Components: Align RadioControl colors with UI Radio
mirka Sep 21, 2026
6fe4781
Changelogs: Link RadioControl color alignment to the pull request.
mirka Sep 21, 2026
b1290c3
Base styles: Scope the radio disabled opacity comment to that declara…
mirka Sep 21, 2026
e0973cb
Changelogs: Shorten the RadioControl color alignment entries.
mirka Sep 21, 2026
f015ec2
Base styles: Name forms.css as the source of the radio disabled opacity.
mirka Sep 21, 2026
db73c8a
Components: Let the radio mixin own the selected fill.
mirka Sep 21, 2026
0ec3427
Base styles: Use design tokens for radio selected fill and focus.
mirka Sep 21, 2026
02feebf
DataViews: Keep the branded hover border on single-select filter radios.
mirka Sep 21, 2026
eba4b3b
Revert DataViews branded hover override for radio filter indicators.
mirka Sep 21, 2026
a51c75e
Merge origin/trunk into update/radio-mixin-ui-colors
mirka Sep 29, 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
4 changes: 4 additions & 0 deletions packages/base-styles/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Enhancements

- `radio-control`: Use the design system color tokens ([#83270](https://github.com/WordPress/gutenberg/pull/83270)).

## 13.2.0 (2026-09-23)

### Enhancements
Expand Down
32 changes: 26 additions & 6 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,8 @@
}

@mixin radio-control {

@mirka mirka Sep 21, 2026 •
edited
Loading

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.

There are currently two usages of this in the repo: One in RadioControl, and one in DataViews.

I eventually want to:

  1. Swap out the DataViews usage with the wp-ui Radio primitive.
  2. Move these mixin styles internal to RadioControl.
  3. Deprecate the mixin.

There's a subtle border hover color issue with the DataViews usage, but I'm leaving it for now.

@ciampo ciampo Sep 29, 2026

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.

Agreed on the plan on action, and agreed to treat this as a separate follow-up

border: variables.$border-width solid colors.$gray-900;
border: wpds.var("--wpds-border-width-xs") solid wpds.var("--wpds-color-stroke-interactive-neutral");
background: wpds.var("--wpds-color-background-interactive-neutral-weak");
margin-right: variables.$grid-unit-15;
transition: none;
border-radius: variables.$radius-round;
Expand All @@ -410,6 +411,10 @@
max-width: variables.$radio-input-size;
}

&:hover {
border-color: wpds.var("--wpds-color-stroke-interactive-neutral-active");
}

&:checked::before {
box-sizing: inherit;
width: math.div(variables.$radio-input-size-sm, 2);
Expand All @@ -419,10 +424,10 @@
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
background-color: colors.$white;
background-color: currentColor;

// This border serves as a background color in Windows High Contrast mode.
border: 4px solid colors.$white;
border: 4px solid currentColor;

@include break-small() {
width: math.div(variables.$radio-input-size, 2);
Expand All @@ -431,15 +436,30 @@
}

&:focus {
box-shadow: 0 0 0 (variables.$border-width * 2) colors.$white, 0 0 0 (variables.$border-width * 2 + variables.$border-width-focus-fallback) var(--wp-admin-theme-color);
box-shadow: 0 0 0 (variables.$border-width * 2) colors.$white, 0 0 0 (variables.$border-width * 2 + variables.$border-width-focus-fallback) wpds.var("--wpds-color-stroke-focus");

// Only visible in Windows High Contrast mode.
outline: 2px solid transparent;
}

&:checked {
background: var(--wp-admin-theme-color);
border: none;
background: wpds.var("--wpds-color-background-interactive-brand-strong");
border-color: transparent;
color: wpds.var("--wpds-color-foreground-interactive-brand-strong");
}

&[aria-disabled="true"],
&:disabled {
background: wpds.var("--wpds-color-background-interactive-neutral-weak-disabled");
border-color: wpds.var("--wpds-color-stroke-interactive-neutral-disabled");
color: wpds.var("--wpds-color-foreground-interactive-neutral-disabled");
cursor: default;
opacity: 1; // Override opacity inherited from wp-admin forms.css.

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

Expand Down
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

- `RadioControl`: Match the `@wordpress/ui` Radio colors ([#83270](https://github.com/WordPress/gutenberg/pull/83270)).
- `CheckboxControl`: Keep the default checkbox at 16px on narrow screens while retaining a 24px click target ([#83612](https://github.com/WordPress/gutenberg/pull/83612)).
- `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
7 changes: 0 additions & 7 deletions packages/components/src/radio-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "../utils/theme-variables" as *;

.components-radio-control {
border: 0;
Expand Down Expand Up @@ -44,22 +43,16 @@
}

&:checked {
background: $components-color-accent;
border-color: $components-color-accent;

&::before {
content: "";
border-radius: $radius-round;
}
}

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

&:checked::before {
border-color: $components-color-gray-400;
opacity: 1; // Override style from wp-admin forms.css.
}
}
Expand Down
Loading