mui / mui/material-ui

Outlined variants of paper have wrong background-color in dark-mode when resting on an elevated paper

Open
#28,408 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: paper type: new feature
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:
image

How it should look like:
image

Possible ways of dealing with this issue

(First the more complicated, but more general solution.

  1. 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)

image

  1. The easy workaround:
    Respect the elevation prop for outlined variants 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.