[joy-ui] Change background color name scale

Open
#38,963 3 comments 1 reaction 1 assignee View on GitHub

Nobody has claimed this yet.

Assessment

This issue has not been assessed yet.

Description

design: joy on hold package: joy-ui scope: all components
Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Summary 💡

After a Discord discussion, I wondered if the background scale naming that we currently have on Joy UI is the best one.

Today, the scale works linearly from light to dark, when in dark mode, and from dark to light when in dark mode. We have 7 surface levels, where the body is the first level, and level3 being the last. Body, as the name says, is meant for the <body>, like the base background. In turn, the surface level is used by the components, like the first layer above the <body>, and level1 to 3 subsequently.

The biggest problem is that some names have a semantic approach (body, surface, tooltip, popup) and some have non-semantical names (level 1, level 2 and level 3). This ends up providing a bad DX since it's non-intuitive to know that this is meant to be a linear scale.

Examples 🌈

For instance, these are the scales we currently have for light background:

background: {
        body: getCssVarColor('palette-common-black'),
        surface: getCssVarColor('palette-neutral-900'),
        popup: getCssVarColor('palette-common-black'),
        level1: getCssVarColor('palette-neutral-800'),
        level2: getCssVarColor('palette-neutral-700'),
        level3: getCssVarColor('palette-neutral-600'),
        tooltip: getCssVarColor('palette-neutral-600'),
}
Proposal

As I see, a better experience for this would be:

background: {
        level-0: getCssVarColor('palette-common-black'), //to be used for body
        level-1: getCssVarColor('palette-neutral-900'), //to be used on components
        level-2: getCssVarColor('palette-neutral-800'),
        level-3: getCssVarColor('palette-neutral-700'),
        level-4: getCssVarColor('palette-neutral-600'),
}
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

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.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.