Replacing global themed sass-vars to css-vars

[ixrock]

PR highlights:

• Having default css-variables in app from generated default dark theme lens-dark.json
• Better IDE/vscode css-variables support / auto-completion
• More consistent styles overall
• Possibility to get rid of sass in future at all (if postcss would be just enough)

Recommended vscode extension for css-variables auto-complete:
https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar

And add this to settings.json for auto-scanning css-variables in the project from all possible files:

    "cssvar.files": [
        "./src/renderer/**/*.css",
        "./src/renderer/**/*.scss",
    ],

[Nokel81]

I don't think this file should be committed, should it?

[ixrock]

Yes, it should. It's used in app as default values for themed variables + used by editor's css-vars auto-completion.

P.S. Most vscode plugins for autocompleting css-variables support only defining exact file to read for variables, so could be useful too.

[Nokel81]

Why only dark?

[ixrock]

Only? Because default could be just one as name says defaultBaseLensTheme (could be default white tought)

[Nokel81]

Ah so this is only for the auto-complete

[jim-docker]

There seem to be more colors in lens-light.json

[jim-docker]

I'm seeing this:

should be:

I thought it was a problem in master too because after testing your branch I pulled master and ran make dev and got the same (bad) result. But when I ran make clean && make dev on master it was good. This build target should be part of make dev? Oh, it's probably just the transition between this PR and master, once it's merged there won't be this build issue moving forward. nvm

[jim-docker]

There seem to be more colors in lens-light.json

[ixrock]

@lensapp/lens-maintainers ready for re-review / PTALA

Added 2 missing theme colours to lens-dark.json: --layoutTabsLineColor, --canvasBackground .

@jim-docker light theme seems to be fixed for now:

[jim-docker]

LGTM

[jim-docker]

Were lensBlue and lensMagenta defined somewhere?

[ixrock]

Nope, they where defined in linking sass-vars to css-vars in deleted theme-vars.scss, e.g.

$lensBlue: var(--blue);
// ... other themed vars