Theme: Use a perceptual five-step foreground scale - #82294
Draft
ciampo wants to merge 5 commits into
Draft
Conversation
github-actions
Bot
added
[Package] Base styles
🤖 PR meta 🤖🏷️ LabelsThis pull request needs exactly one label indicating its type, and has 0.
Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you. 📦 Bundle sizeSize Change: +2.54 kB (+0.03%) Total Size: 7.92 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
|
ciampo
force-pushed
the
codex/theme-anchored-foreground-scale
branch
from
September 1, 2026 17:59
799893a to
b03bf28
Compare
ciampo
force-pushed
the
codex/theme-anchored-foreground-scale
branch
from
September 1, 2026 20:50
b03bf28 to
d7ec500
Compare
ciampo
force-pushed
the
codex/theme-anchored-foreground-scale
branch
from
September 1, 2026 20:56
d7ec500 to
7d3423f
Compare
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
1 participant
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.
What?
Follow up to #82037. Alternative implementation to #81537.
Applies the pilot approach, Anchored state-skewed · relative chroma, to the production theme algorithm. It adds
fgSurface5, separates resting and active foreground states, and makes strong active fills consistently darker than their resting fills. One shared fill foreground now meets the WCAG floor on both states.It also adds a private Storybook pilot that compares the production candidate with an all-APCA scale and a role-specific hybrid across the same neutral, brand, and error ramps.
Why?
The four-step foreground scale did not leave a distinct state between resting text and the strong endpoint, especially in light themes. Strong active fills could also become lighter or darker depending on the seed, and some representative brand and error combinations produced active-state contrast warnings.
The pilot showed that an anchored, state-skewed scale creates a clearer state change without flattening vibrant accent seeds. The new comparison tests whether APCA or OKLab color difference should shape the rest of the ramp while WCAG remains the hard accessibility gate.
How?
fgSurface1andfgSurface2colors and the former strong endpoint.fgSurface3andfgSurface4at 40% and 60% of the visible contrast range. WCAG ratios remain hard constraints.bgFill2in the darker direction, then solvefgFillagainst bothbgFill1andbgFill2. The former pinned foreground lightness is released down to a serialization-safe 4.5:1 floor.Performance
A local comparison against current trunk on Node 20.20.2 produced these median times from 30 samples:
The separate experiment benchmark measured one neutral, brand, and error ramp at 5.831 ms for the anchored candidate, 9.888 ms for all-APCA, and 15.870 ms for the role-specific hybrid.
These are uncached local calculations and do not enforce a timing threshold.
ThemeProvidercaches ramps by seed and skips calculation when no custom colors are supplied.Testing Instructions
npm run storybook:dev.Testing Instructions for Keyboard
Use Tab to reach the Previous steps and Next steps buttons above each ramp table. Activate them with Enter or Space and confirm the table scrolls horizontally. In the Button story, use Tab to move through the examples and Space or Enter to press them. Confirm focus and the darker active state remain visible.
Screenshots or screencast
The Perceptual Ramp Pilot Storybook story is the visual comparison surface for this draft experiment.
Use of AI Tools
OpenAI Codex helped implement the algorithm, generate tests and artifacts, run verification, and draft this description. The author reviewed the resulting code and behavior.