Skip to content

Base Styles: Default the admin theme color to Blueberry #83749

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

Base Styles: Default the admin theme color to Blueberry #83749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
45f6277
Base Styles: Default the admin theme color to #3858e9
adamwoodnz Sep 29, 2026
dda8f99
Base Styles: Link the changelog entry to its PR
adamwoodnz Sep 29, 2026
47b8f22
Base Styles: Keep the Fresh admin scheme on #007cba
adamwoodnz Sep 29, 2026
d3e2b76
Use #3858e9 as the admin theme color fallback
adamwoodnz Sep 29, 2026
ed9b271
Base Styles: Ship the Fresh rule with the default properties
adamwoodnz Sep 29, 2026
dbdc09d
Merge trunk into update/base-styles-default-admin-color
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/base-styles/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Enhancements

- Default `--wp-admin-theme-color` to `#3858e9`, the WordPress 7.0 default admin color scheme, instead of the legacy `#007cba`. To keep the old color, include `admin-scheme(#007cba)` on `:root` in your own stylesheet. `wordpress-admin-schemes()` and the default custom properties now set `#007cba` for the Fresh scheme, which had used the `:root` default ([#83749](https://github.com/WordPress/gutenberg/pull/83749)).
- `radio-control`: Use the design system color tokens ([#83270](https://github.com/WordPress/gutenberg/pull/83270)).

## 13.2.0 (2026-09-23)
Expand Down
5 changes: 5 additions & 0 deletions packages/base-styles/_default-custom-properties.scss
View file
Open in desktop

@mirka mirka Sep 29, 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.

Can we also include the body.admin-color-fresh rule in this stylesheet (with a comment explaining why)?

The addition to wordpress-admin-schemes() preserves Fresh when both stylesheets update together, as they do when installing this Gutenberg PR. But plugins can compile default-custom-properties into their own CSS while relying on WordPress to supply the admin-scheme stylesheet. For example, EditorsKit imports these defaults in its Styles Manager styles, and WooCommerce imports them in its shared build styles.

If such a plugin rebuilds with the updated base-styles package, its CSS gets the Blueberry root default, but the installed WordPress version may still supply a scheme stylesheet without the new Fresh rule. Fresh previously inherited the old blue from :root, so it now inherits Blueberry instead. Plugins using only WordPress-provided styles would not have this mixed-version issue.

I reproduced that color change in an isolated browser check using the compiled defaults alongside WordPress 6.9 and 7.0's shipped CSS. Including body.admin-color-fresh { @include mixins.admin-scheme(#007cba); } here restored the original color.

Keeping the Fresh rule in both places would make the protection travel with independently bundled defaults, while standalone apps without the Fresh body class still get Blueberry.

I think this is necessary to keep this PR in "enhancement" territory and not a breaking change.

@adamwoodnz adamwoodnz Sep 29, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Good catch, thanks. Added in 4873971: body.admin-color-fresh { @include mixins.admin-scheme(#007cba); } now follows the :root block in _default-custom-properties.scss, with a comment on why. The rule stays in wordpress-admin-schemes() too, and the changelog entry covers both.

Verified in wp-env with the Fresh scheme on the Dashboard. I removed the Fresh rule from wp-base-styles in the page to simulate an older WordPress admin-schemes.css. The primary button stays rgb(0, 124, 186), because the rule now also ships in the commands, block-editor, patterns, and editor stylesheets. When I also removed those copies, it turned rgb(56, 88, 233). The editor with Fresh is also #007cba.

@adamwoodnz adamwoodnz Sep 30, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Also I'm unable to re-run the failing CI checks, which I believe are unrelated. Would you be able to do that for me please?

@mirka mirka Sep 30, 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.

Two separate CI issues were fixed on trunk, so I merged them in 👍

@adamwoodnz adamwoodnz Sep 30, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Thanks!

Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,10 @@
// but is maintained for backwards compatibility.
--wp-bound-block-color: var(--wp-block-synced-color);
--wp-editor-canvas-background: #{colors.$gray-300};
@include mixins.admin-scheme(#3858e9);
}

// Fresh has no rule in the admin-schemes.css shipped by older WordPress versions, so it would inherit the :root default above. Plugins bundle these defaults while WordPress supplies the scheme stylesheet, so the rule must travel with them.
body.admin-color-fresh {
@include mixins.admin-scheme(#007cba);
}
6 changes: 5 additions & 1 deletion packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -481,7 +481,7 @@
@mixin link-reset {
&:focus {
color: var(--wp-admin-theme-color--rgb);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
border-radius: variables.$radius-small;
}
}
Expand Down Expand Up @@ -572,6 +572,10 @@
}

@mixin wordpress-admin-schemes() {
body.admin-color-fresh {
@include admin-scheme(#007cba);
}

body.admin-color-light {
@include admin-scheme(#007cba);
}
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/global-styles/inheritance/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@

&:focus-visible {
// Inset focus ring so it doesn't push other text around.
outline: 1.5px solid var(--wp-admin-theme-color, #007cba);
outline: 1.5px solid var(--wp-admin-theme-color, #3858e9);
outline-offset: 1px;
}

Expand Down Expand Up @@ -168,7 +168,7 @@
display: block;
width: 8px;
height: 8px;
background-color: var(--wp-admin-theme-color, #007cba);
background-color: var(--wp-admin-theme-color, #3858e9);
border-radius: 50%;
}

Expand All @@ -180,5 +180,5 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--wp-admin-theme-color, #007cba);
color: var(--wp-admin-theme-color, #3858e9);
}
4 changes: 2 additions & 2 deletions packages/editor/src/components/style-book/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,15 +233,15 @@ export const STYLE_BOOK_IFRAME_STYLES = `
}

.editor-style-book__example.is-selected {
box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
}

.editor-style-book__example.is-disabled-example {
pointer-events: none;
}

.editor-style-book__example:focus:not(:disabled) {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
outline: 3px solid transparent;
}

Expand Down
10 changes: 5 additions & 5 deletions packages/media-editor/src/image-editor/react/components/cropper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,8 +149,8 @@ $handle-touch-target-size: 44px;
// on the canvas ensures the outline appears only when the canvas
// itself is focused, not when focus is on a child handle.
&__canvas--focus-visible:focus &__stencil-rect {
border-color: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
border-color: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #3858e9));
box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #3858e9));
}

&__handle {
Expand All @@ -169,7 +169,7 @@ $handle-touch-target-size: 44px;
// Solid white fill with an accent-blue border so the handles read
// clearly against the light grey wash.
background: $white;
border: 1px solid var(--wp-admin-theme-color, #007cba);
border: 1px solid var(--wp-admin-theme-color, #3858e9);
border-radius: 50%;
box-sizing: border-box;
pointer-events: auto;
Expand All @@ -185,9 +185,9 @@ $handle-touch-target-size: 44px;
// keyboard session — e.g., clicking a handle to start a drag —
// don't leave the active ring stuck on the handle.
.wp-media-editor-image-editor__canvas--focus-visible &:focus {
background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #3858e9));
border-color: transparent;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #3858e9));
}

// Extend touch target to the minimum accessible hit area.
Expand Down
Loading