1549195 - Rename CSS variables defined in webconsole.css to use a "console" prefix

Status: NEW

(DevTools :: Console, task, P3)

Description

[Florens Verschelde :fvsch]

Tried earlier in https://phabricator.services.mozilla.com/D16592
And mentioned as a need in https://phabricator.services.mozilla.com/D29040

webconsole.css defines 14 CSS variables, some starting with --console- and others not. Having some variables not prefixed with --console- makes it easy to use them in shared components used in Console (e.g. reps) without knowing we're depending on webconsole.css and those styles would break in other contexts.

Biggest culprits seem to be --error-color.

There's also --console-output-color which seems to be used in webconsole and in some shared components to mean "we want strongly contrasted text here", and could be replaced with the new --theme-text-color-strong.

Comment 1

[Florens Verschelde :fvsch]

Marking on depending on bug 1519904 because the new patch adds a bunch of --console variables and renames a few.

This means this bug could be restricted to:

1. Remove --console-output-color (replacing its usage with --theme-text-color-strong).
2. Investigate how --error-color can be removed in Reps and other places using it, or maybe replaced with a new theme variable if that makes sense?
3. If https://phabricator.services.mozilla.com/D29040 lands soon, check if we should follow up on creating a variable for the log point icon color. (See: https://phabricator.services.mozilla.com/D29040#inline-166529)