Conversation
) - Paint tonal elevation as background-color instead of backgroundImage, guarded to elevation > 0 so Alert's elevation={0} stays untouched - Update MuiAutocomplete's listbox background to match, via the shared surface.elevated() helper instead of duplicated token strings - Round elevation before clamping so a fractional value degrades to the nearest valid step instead of silently dropping the tint - Add regression tests for the override shape and for real rendered cascade order (Paper + sx, Alert, Autocomplete, Menu) - Add a Paper story for a custom background at elevation, and bump low-visibility elevation values in existing stories
zoharma
force-pushed
the
zma/elevation-review
branch
from
September 17, 2026 20:09
434b1fa to
89c2123
Compare
zoharma
marked this pull request as ready for review
September 17, 2026 20:15
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
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.
Summary
Fixes #318:
sxbackground colours onCard,Accordion, and other elevatedPapercomponents had no visible effect. DiamondDS paints elevation as an opaquebackground-image, which always paints abovebackground-color, so no consumer colour could show through.Fix
MuiPaper: paint tonal elevation asbackgroundColorinstead ofbackgroundImage, guarded toelevation > 0soAlert(elevation={0}) keeps its own backgroundMuiAutocomplete: same change, routed through the samesurface.elevated()helper asMuiPaperinstead of a duplicated token stringsurface.elevated()now rounds before clamping, so a fractional elevation degrades to the nearest valid step instead of silently dropping the tintMoving the tint to background-color gives exact, computable surface colours, similar to M3's elevation direction.
Examples
Before (#318 bug: background-image painted over the colour)

After (fix: background-color, consumer colour wins)

Following Material 3 style.
For comparison (translucent tint over the same colour)

Mirrors MUI / Material 2 dark-mode overlay direction, in light mode. Elevation keeps a visible effect even with a custom colour set, and provides a "dirty" colour.
Testing
sxbackground wins over the tint,Alertkeeps its own background atelevation={0},Autocomplete's listbox gets its own elevation tier overMuiPaper's default, and aslotProps.paper.sxbackground (NavMenu) still winssxbackground was invisible pre-fix, renders correctly post-fix in both light and darkStorybook
CustomBackgroundstory toPaper(elevation + a custom colour). No existing Paper/Card/Accordion story exercised thiselevation={1}/2where the tonal tint was too subtle to actually see