Admin UI: Update Page background color to surface-neutral#76869
Merged
Admin UI: Update Page background color to surface-neutral#76869
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
Member
|
So what I would expect:
|
|
Size Change: +55 B (0%) Total Size: 7.74 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in ad5c014. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24099607356
|
simison
reviewed
Mar 27, 2026
| // @TODO: Revisit page background color. Consider using | ||
| // --wpds-color-bg-surface-neutral once existing pages (e.g. Styles) | ||
| // are updated to handle the contrast change. | ||
| // @TODO: Revisit page background color across existing pages |
Member
There was a problem hiding this comment.
This should probably be GH issue rather than todo at component styles.
Contributor
Author
There was a problem hiding this comment.
Given the comment below, I can create an issue and include the link there.
simison
reviewed
Mar 27, 2026
| // are updated to handle the contrast change. | ||
| // @TODO: Revisit page background color across existing pages | ||
| // (e.g. Styles) to ensure proper contrast handling. | ||
| // See https://github.com/WordPress/gutenberg/pull/76548 |
Member
There was a problem hiding this comment.
Not sure this link is relevant here?
Contributor
Author
There was a problem hiding this comment.
With all the debate around this, I thought it'd be fine to have more context on the change and follow up. But it's removable.
Contributor
|
I hope you don't mind, I pushed a couple of small changes to get this PR closer to what I believe is a merge-able state (from a design POV, @simison's comments still need to be addressed). Most impactful; I adjusted the background seed color for the neutral color scale from The remaining question is what we want DataViews pages (Pages, Templates, Patterns, etc) to look like. Should the page content have a white background (as it does currently), or should it match the page header? cc @keoshi @poligilad-auto. |
Contributor
Author
@jameskoster I don't mind at all :) I do wonder now you've updated the header to also use 
|
Contributor
Author
|
@jameskoster I'm also noticing the fallback value to be #f8f8f8. While I'm not sure where that is coming from, I just wanted to point it out in case we need to update this on some other place. 
|
Member
Those are injected automatically from a custom PostCSS plugin and should respect the tokens source of truth (i.e. shouldn't need any other updates assuming that the tokens are correct). |
Contributor
Author
I'm no authority in design, but maybe that is too subtle? Just my opinion, on my screen it's barely noticeable, to the point I can't tell (FWIW, MacBook Pro screen). |
CGastrell
force-pushed
the
update/page-background-surface-neutral
branch
from
c60b23c to
d2af35b
Compare
Contributor
Thanks for the ping @jameskoster! It's been helpful for me to follow this logic so far:
So DataViews is not treated as an exception, but as part of the top layer. The nuance is that I have been thinking of the header as having a white background and not sharing the same value as the page background. Would still prefer that personally, but don't think it makes a huge difference: 
When DataViews shares background color with the page, it leads to other elements standing out in that top-most layer. I've seen it happening with checkboxes, which seems unintentional. 
|
Contributor
Author
For me that makes sense visually and conceptually if we consider the header to be one of the surfaces that "partially cover the page" as well. |
Contributor
I agree with that, but heard feedback elsewhere that the header background should be the same as the page 🙈 Perhaps we go ahead and make the page header background |
Contributor
|
Contributor
|
So to clarify we're saying:
|
Contributor
Author
Gotcha! Thanks! Should I include the change for the page header background at this PR as well? I don't mind, just trying to be careful of how many changes we pack, though all these seem related enough. |
Contributor
|
I think it's okay since these pieces are all closely connected like you say. It will be good to test everything together, and it's only a small change that's easy to iterate later if we need to. |
Contributor
Author
Sorry, I need to confirm: is the suggested background color for Header a typo?
If that's the case, that's already the way it is, hence one less TODO :) If this is suggesting a new design token to be created, then I'll have problems adding it since the commit checks verify this and reject changes that include non existing design tokens. |
Contributor
Author
|
@jameskoster care to confirm my previous comment? Just need to know if there's actually we still need to change or we're good as we are. |
Contributor
|
Apologies, just catching up after the long weekend. And yes, that was a typo. My memorisation of the token names needs some work 😅 |
Contributor
Are you sure? I'm seeing |
CGastrell
force-pushed
the
update/page-background-surface-neutral
branch
from
d2af35b to
3cb36a3
Compare
Contributor
Author
@jameskoster My bad, too many diffs opened at the same time. Updated with latest commit. |
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adjust sRGB components and hex values for surface and fgSurface ramps; sync color-ramps constants, default ramps, CSS, and JS fallbacks. Made-with: Cursor
Switch header from --wpds-color-bg-surface-neutral-strong to --wpds-color-bg-surface-neutral for a softer match to page chrome. Made-with: Cursor
CGastrell
force-pushed
the
update/page-background-surface-neutral
branch
from
3cb36a3 to
ad5c014
Compare
jameskoster
approved these changes
Apr 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Design spec #76709
What?
Update the Page component background color from
--wpds-color-bg-surface-neutral-strongto--wpds-color-bg-surface-neutral.Storybook:
Why?
This follows up on #76548, which originally attempted this change but was rolled back to avoid unintentional design side effects on existing pages (e.g. Styles). The TODO left in that PR is now being fulfilled.
The TODO comment is retained to flag the need for revisiting contrast handling across existing pages.
How?
background-colorin.admin-ui-pagefromvar(--wpds-color-bg-surface-neutral-strong)tovar(--wpds-color-bg-surface-neutral)Testing Instructions
npm run storybook:devUse of AI Tools
This PR was authored with assistance from Claude Code (Claude Opus). All changes were reviewed and approved by the contributor.