Use css variables for editor markup

Given that all modern browsers (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Browser_compatibility) support CSS variables, the added value of using SCSS for them is limited.

I do not propose fully removing SCSS, what I do propose is the following:

1. Replace all uses of darken() and lighten() functions and replace them with SCSS variable in _gjs_variables.scss.
2. For all sass variables used in _gjs_variables.scss replace it with css variable:

// This
$primaryColor:      #444 !default;
// Becomes
:root {
    --gjs-primary-color: #444;
}
$primaryColor: var(--gjs-primary-color);

This is a simple change that should not result in a BC break. After doing this theming the editor will become even simpler since we can just specify the variables directly in CSS and we’re done; no recompilation needed.

[isarphilipp]

Hi @artf After a year, I wonder if your opinion on this matter changed? We’d love to use it and IE11 becomes less and less of a thing 😉 @SamMousa if you need help with the PR, we can contribute as well. Looking forward to hearing back from you! Philipp

[artf]

After a year, I wonder if your opinion on this matter changed?

Unfortunately, it doesn’t depend only on my decision, from what I know, they’re still a good percentage of users relying on IE11 compatibility. So, the only solution would be creating a good SCSS file import usage (avoid writing the same styles declaration twice) and generate a new CSS file with custom properties.

For now, I’ll close the issue as the traction for this is very low, but a PR would still be welcome