Redoc: [react-rewrite] Move all css constants to theme

[RomanHotsiy]

Two subtasks here:

• [x] - implement or find any ready-to-use implementation of advanced theme (see below)
• [ ] - move all constants to theme

Advanced theme

Currently, theme is pretty limiting, e.g. you can't reuse some values in other places. What I would like to have is something like bellow:

{
   colors: {
     main: '#2932b5',
     border: '#cccccc',
   }
   ...
   sideBar: {
     shadow: `1px 1px ${colors.border}`
     // or alternativelly
     shadow: `1px 1px ${theme => theme.colors.border}`
     ...
   }
}

So the idea is to be able to reuse some common colors but at the same time have precise control over each component.

[buchanae]

What's the benefit of encoding the theme in JS rather than CSS? I'm finding this difficult to work with, as it leads to cryptic, generated class names (.kgFZmy) which can't be edited in the Chrome devtools.

[gerbil]

+1 for buchanae
Right now it's very ugly class names there to work with.. we cant' simply override some css styles

[nickkraakman]

Ideally SCSS should be used. It is indeed very strange to have CSS in inside TS files. Using SCSS would make it a lot easier and less confusing to create themes for ReDoc.