HelpSource: group CSS colors as variables

[elgiano]

Purpose and Motivation

I refactored HelpSource css files to have all color definitions as variables, at the top of both scdoc.css (for general ui colors) and editor.css (for code blocks).
This will make it easier for users to override schelp color schemes, for example to achieve dark mode.
Through the process I have removed two rarely used shades of grey, replacing them with others that were more used throughout the docs.
I have also removed two unused css definitions from scdoc.css.

With this PR it will be easier to define color schemes for scdoc, using the existing "frontend.css" mechanism: a user can create a file called "frontend.css" and put it in SCDoc.helpTargetDir. Now instead of having to override all sorts of color definitions, one needs only to override a fixed number of easy to find variable definitions.

I've added a note in the documentation, let me know if you happen to know a better place to document this feat.

Here is an example frontend.css, for dark mode:

:root {
--color-fg:  #EFEFEF ;
--color-fg-400:  #D0D0D0 ;
--color-fg-300:  #B2B1B1 ;
--color-fg-200:  #939292 ;
--color-fg-100:  #747373 ;
--color-fg-50:   #555454 ;
--color-bg:  #222020 ;
--color-bg-menu:  #222020 ;
--color-links:  #0986D3 ;
--color-undocumented:  #05436A ;
--color-extension-bg: #601c8b;
--color-extension-fg: white;
--color-extension-border: #39174F;
--color-warning-bg: #f7f7d7;
--color-warning-fg: black;
--color-error: red;

--color-cm-background:  #3D3D3D ;
--color-cm-border:  #0986D3 ;
--color-cm-selection:  #606476 ;
--color-cm-flash:  #636397 ;
--color-cm-flash-fg:  #636397 ;
--color-cm-keyword:  #ff76c7 ;
--color-cm-built-in:  #e2e37a ;
--color-cm-number:  #be90fc ;
--color-cm-symbol:  #45fc75 ;
--color-cm-class:  #65e5ff ;
--color-cm-primitive:  #aaff7f ;
--color-cm-char:  #ff55ff ;
--color-cm-env-var:  #ffb965 ;
--color-cm-comment:  #6071a6 ;
--color-cm-string:  #5df884 ;
--color-cm-text:  #f7fdff ;
}

Types of changes

• Documentation
• New feature

To-do list

• Updated documentation
• This PR is ready for review

[capital-G]

Hey! :)
Thanks for this contribution! Would you mind to check if this is not a duplicate of #6095? Maybe both efforts can be somehow combined.

[elgiano]

hi @capital-G
it's actually a duplicate of the first stage of your PR, sorry for not checking before!
Could it be beneficial to merge this step first, so that we have colors as CSS variables, and then think about how to change themes from the IDE/other frontends? This way your PR would become slimmer and perhaps easier to manage.

There are some differences in how we manage classes in these two PRs:

• naming: I think this PR has a slightly more consistent naming, as all variables start with --color (in case in the future we could have different variable "types").
• number: I've kept more shades of the foreground color, but also things like the color for undocumented methods. I wanted this PR to be the changing as little as possible, while enabling people to make their themes.
• place: your PR puts all variable in theme.css. I think you're right, it would also be better for multiple themes.

What do you think?

[elgiano]

I've reduced the color palette a tiny bit more and put all color var definitions in scdoc.css, which I think is a good place for the default theme. I'm going through #6095 and I'm willing to help

[scztt]

This is a very helpful change - I need to alter codemirror color schemes in the VSCode plugin for the help docs to be even remotely legible, and I think this gives me an easy way to do so.

[telephon]

looks good! Someone with css background should review it.

[elgiano]

Thanks everyone!
I'm pausing this PR until discussion in #6095 is resolved, and I'll probably close it in favor it when we are done