Simplify CSS variable naming / structure

[12rambau]

In a recent PR (#540 (comment)) @choldgraf suggested that the number of custom variable should be reduced:

One thing I'm feeling as I just went through the codebase (and echoing @pradyunsg's thoughts): we have way too many custom-defined color variables. In a subsequent PR, I think we should just define a handful of colors (e.g. "base", "primary", "secondary", etc, and just re-use those throughout)

would you thing it would make sense to go back to what material design is suggesting ?

Note: to maintain a correct dark theme some specific variables will still be needed (on_background, on_surface, shadow) in addition to the classic one (primary, secondary etc)

[choldgraf]

I don't have strong opinions about CSS variables in general, but that partly leads to my stronger opinion:

I think that we should adopt the minimal number of CSS variables possible, and make them follow some pre-existing standard (I think the material theme approach sounds reasonable). Otherwise I worry that it will grow in complexity and be hard to maintain.

[choldgraf]

@12rambau a million thanks for your help on this