Create a better documentation of the colour used in the front end

[agarcia-caicedo]

What would you like to be added:

While the XD file exists, it would be more beneficial to keep a cheat sheet of the colours we have been using in the frontend, to facilitate the process for contributors who are not following the development of the frontend as closely.

The cheat sheet would have an updated list of colours, and a reference of where they have been used. Currently there is an outdated list in the frontend discussion

[raygervais]

My recommendation, utilize storybooks and unified components. They become a reusable godsend for unified front-end, and living documentation: https://storybook.js.org/

[humphd]

Storybook work could be useful post 1.0, but I wouldn't block on it in the weeks we have left this term.

[cindyledev]

Whoever wants to do this can also have a look at https://material-ui.com/customization/palette/
Maybe we can create a global palette in our tree as part of this issue or create another issue
Useful naming convention https://material-ui.com/system/palette/
More customization stuff
https://material-ui.com/customization/color/

Related to #77 Dark/Light mode

[cindyledev]

The theme.js file was added in #781 , we can definitely add to it