Define all colors as variables in CSS

[Stephanie Leary]

In order to support dark mode or other color scheme user preferences (bug 1740529), we need to move all our CSS color, background-color, border-color, outline-color, text-decoration-color, box-shadow, and text-shadow definitions to CSS variables.

In the Angular staff client, you can see examples of this at the top of the main styles.css file, where we have redefined several Bootstrap color keywords in a :root style declaration.

[Steven Mayo (stmayo)]

I have some progress on this! I've gotten what should be all of the Angular colors changed. (Thanks Stephanie for the starting point and naming schemes to copy!)
That's closer to being fully done than it sounds, since the AngularJS css is almost an identical copy sometimes, and the OPAC css had some work done at some point putting all the colors into one file already.

The variables are in two groups in styles.css: first a set of numbered definitions, grouped by hue. (e.g. 'eg-blue-5')
These variables are not used anywhere except by the second group, which is a set of semantic definitions in alphabetical order, named for where the color is used. (e.g. 'nav-dropdown-bg') These variables are what the css styles are actually set to. With this, changing a color scheme should be as simple as redefining the semantic variables with a different variable from our palette.

Branch here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/sleary/lp2023449-color-variables-main.