Pro tip Shades generator
The “light” and “dark” shades can be generated from the MUI color app
Text
text/ Sample Description
primary Reflects the text.primary variable from the theme object
secondary Reflects the text.secondary variable from the theme object
disabled Reflects the text.disabled variable from the theme object
Primary
primary/ Sample Description
main Reflects the primary.main variable from the theme object
dark Used for hover states. Reflects the primary.dark variable from the theme object
light Reflects the primary.light variable from the theme object
contrast Reflects the background.paper variable from the theme object
Used for hover states. The token represents the value of action.hoverOpacity (0.04 by default) of the main
hover
token.
Used for selected states. The token represents the value of action.selectedOpacity (0.08 by default) of the
selected
main token.
Used for focus states. The token represents the value of action.focusOpacity (0.12 by default) of the main
focus
token.
Used for focus visible states. The token represents the value of focusVisibleOpacity (0.3 by default) of the
focusVisible
main token.
Used for enabled states (e.g Button outlined variant). The token represents the value of
outlinedBorder
outlinedBorderOpacity (0.5 by default) of the main token.
Secondary
secondary/ Sample Description
main -
dark -
light -
contrast -
Error
error/ Sample Description
main -
dark -
light -
contrast -
Warning
warning/ Sample Description
main -
dark -
light -
contrast -
Info
info/ Sample Description
main -
dark -
light -
contrast -
Success
success/ Sample Description
main -
dark -
light -
contrast -
Background
background/ Sample Description
default Reflects the background.default variable from the theme object
paper-
Reflects the background.paper variable from the theme object
elevation-0
paper-
elevation-2
Generated token by adding a 0.7 semi-transparent gradient to the background.paper token
paper-
elevation-16
Generated token by adding a 0.15 semi-transparent gradient to the background.paper token
paper-
elevation-24
Generated token by adding a 0.16 semi-transparent gradient to the background.paper token
d k d ff d w
Elevations on ar have i erent sha es. Ho are these enerate ? g d
To change the shade in dark mode, a semi-transparent gradient is applied to the background.paper token. However, currently, it is not
possible to dynamically generate different elevation shades using a custom background.paper token. If you need to do so, here are the
values of the semi-transparent gradient that need to be applied over your new paper for each elevation:
action
action/ Sample Description
active Reflects the action.active variable from the theme object
hover Reflects the action.hover variable from the theme object
selected Reflects the action.selected variable from the theme object
disabledBack
Reflects the action.disabledBackground variable from the theme object
ground
focus Reflects the action.focus variable from the theme object
disabled Reflects the action.disabled variable from the theme object
k
To en Sample Description
divider Reflects the action.disabled variable from the theme object
Common
common/ Sample Description
white Used for inheriting a plain white color
black Used for inheriting a plain black color
