Outlined variants of paper have wrong background-color in dark-mode when resting on an elevated paper
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
tl;dr
I propose to respect the elevation prop for outlined variants of paper with regard to the background color. (Paper becoming lighter with elevation)
An outlined paper sitting on top of an elevated paper should have a relative elevation of 0.
In the current implementation, the elevation of outlined paper is absolute.
In light mode, this is fine, since the background color doesn't change.
In dark mode, paper(/material) gets lighter the higher it is.
But since an outlined paper is always at elevation 0, the background color won't get lighter.
This leads to outlined variants "punching a hole" into the paper it is resting on:

How it should look like:

Possible ways of dealing with this issue
(First the more complicated, but more general solution.
- Properly stacking of paper.
Keep track of the current absolute elevation of a sheet of paper based on the elevation the paper is sitting on, and setting the background color based on that.
I don't know how best to accomplish this. Ideas on how to do this:- Nested CSS
- Keeping an elevation context
- Using a transparent background.
This would solve the problem of non-outlined paper on paper, which is currently wrong as well.
(However, for non-outlined paper, this is less of a problem, as you can manually set the elevation prop to fix this issue)

- The easy workaround:
Respect theelevationprop foroutlinedvariants with regard to the background color.
(This does not have to be a dark mode exclusive solution.)
Related:
https://github.com/mui-org/material-ui/pull/21748 https://github.com/mui-org/material-ui/issues/18309
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the Paper component and its elevation and outlined-variant styling. Reproduce the nested outlined-paper case in dark mode, then verify that the outlined paper's background reflects its relative elevation without regressing light mode or other Paper variants.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100