Repository navigation
Conversation
github-actions
Bot
added
[Package] Base styles
🤖 PR meta 🤖🎉 PropsIf 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. Updated as activity occurs, without notifying anyone named here. Add the 📦 Bundle sizeSize Change: +10.4 kB (+0.12%) Total Size: 8.53 MB 📦 View Changed
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information. should handle legacy widgets in
|
ciampo
force-pushed
the
codex/theme-anchored-foreground-scale
branch
4 times, most recently
from
September 2, 2026 23:36
07a2661 to
4bb53ec
Compare
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (3)
💤 Files with no reviewable changes (1)
Included review availability: Your plan provides up to 8 included reviews per hour; 4 remain after this review. 📝 WalkthroughWalkthroughTheme color-ramp generation now rebuilds surfaces, strokes, and foreground scales with perceptual and contrast constraints. Accent ramps support semantic purposes. ThemeProvider integration, generated token assets, fallbacks, documentation, examples, and regression tests were updated. ChangesColor ramp generation
Estimated code review effort: 5 (Critical) | ~90 minutes Sequence Diagram(s)sequenceDiagram
participant ThemeProvider
participant buildBgRamp
participant buildRamp
participant buildPerceptualSteps
participant buildForegroundScale
participant colorTokensCSS
ThemeProvider->>buildBgRamp: build background ramp
ThemeProvider->>buildRamp: build purpose-specific accent ramp
buildRamp->>buildPerceptualSteps: rebuild surfaces and strokes
buildPerceptualSteps->>buildForegroundScale: solve foreground scale
buildRamp-->>ThemeProvider: return typed ramp result
ThemeProvider->>colorTokensCSS: generate CSS tokens and fallbacks
Suggested reviewers: Merge Risk: ⚪ Minimal · up to Theme color scales now provide perceptually balanced text and interaction colors while retaining contrast constraints. No concrete merge-blocking behavior or production risk is identified in the supplied current-head evidence. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
ciampo
commented
Sep 3, 2026
ciampo
marked this pull request as ready for review
September 3, 2026 11:22
ciampo
changed the title
Member
|
One warning about the video in the PR description — the But regardless, I do definitely perceive the improvement here in the "perception parity" between light and dark scales 🎉 |
Contributor
|
This is a nice PR. It deserves more poring over than it might seem to need. For that reason, I wonder if it can wait until @jameskoster has a time to look? |
Contributor
Author
|
Sure, let's wait for @jameskoster . It will be a nice way for him to dive back into DS / theming Although I still reccomend y'all take this PR up for a spin and try out Storybook and Editor, to get a first intuiton of whether this overall feels good, and if there any obvious regressions. |
jsnajdr
reviewed
Sep 4, 2026
jsnajdr
reviewed
Sep 4, 2026
jsnajdr
reviewed
Sep 4, 2026
This was referenced Sep 5, 2026
ciampo
force-pushed
the
codex/theme-anchored-foreground-scale
branch
from
September 7, 2026 09:45
06682eb to
cbf1909
Compare
ciampo
changed the title
ciampo
force-pushed
the
codex/theme-anchored-foreground-scale
branch
from
October 12, 2026 15:10
3e55806 to
7af12f5
Compare
Contributor
Author
|
@jameskoster Those bugs should also be fixed:
While we continue to refine the approach, I'll start to extract non-theme package related changes to individual PRs. |
This was referenced Oct 12, 2026
This branch has not been deployed
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
5 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.
Fixes #77153.
Follow up to #82037. Alternative implementation to #81537.
Issue #81162 was fixed by the extracted active-fill work in #82542. The default-ramp build-order fix was extracted to #82525. The contrast cache from #82445 remains on trunk. The deterministic chroma-capacity cache from #82505 was later removed by #82591. This branch follows those trunk decisions.
What?
This PR makes generated color ramps look more evenly spaced across light and dark themes. It adds a stronger foreground step for interaction states, while normal content and resting controls use the preceding step.
Why?
Even numeric lightness steps can look uneven. Strong resting foregrounds also leave too little room for hover, focus, and pressed states to become visibly stronger.
How?
Surfaces use OKLr lightness, strokes use perceptual color differences, and foregrounds use APCA to distribute visible emphasis. WCAG ratios remain hard constraints and are checked again after sRGB serialization.
The solver omits globally unused internal ramp steps. Color spaces register only when needed. Public
ThemeProvidersettings and semantic token names remain unchanged.Testing Instructions
npm run storybook:dev. Open Design System → Theme → Theme Provider → Color Scales → Sample Combinations. Compare the surface progression, text-state differences, and warnings across the samples.#ffffff,#fefefe,#000000, and#010101. White should retain a darker neighboring surface. Black should retain a lighter one.Testing Instructions for Keyboard
In Button stories, use Tab to focus and Space or Enter to press. Check visible focus and interaction colors. Disabled examples should remain disabled.
Screenshots
Before vs After
"Tab 2" is "active", other tabs are resting
The main observable difference is weaker neutral resting text, which leaves room for stronger active text.
Kapture.2026-09-03.at.13.19.25.mp4
Performance
I remeasured the rebased branch against trunk
e6eee38bwith Node v24.20.0 on macOS arm64. The benchmark used six alternating isolated-process pairs. Each process ran 30 measured samples after 8 warmups. The table reports the median of the six process medians.The fixtures cover the default light theme, the default dark theme, and Ectoplasm. A complete theme builds one background ramp and six accent ramps. Background-ramp time is effectively unchanged. The extra foreground, surface, and stroke reconstruction adds about 14.8% to complete uncached theme generation.
ThemeProvider still memoizes ramp generation, and #82445's luminance cache remains on both sides. These measurements isolate first-time generation rather than repeated renders. The branch also follows trunk's #82545 search reuse and #82591 exact chroma calculation.
Follow-ups
bgFill1andbgFill2for interactive backgrounds.Profile the new foreground and perceptual reconstruction passes separately if the uncached cost needs more work. The earlier 38% Color.js prototype predates #82545 and #82591, so it is no longer a valid estimate.
Use of AI Tools
OpenAI Codex helped implement the algorithm, generate tests and artifacts, reconcile the branch with current trunk, run verification and performance benchmarks, and draft this description. The author reviewed the resulting code and behavior.