Variables update

[lraycheva]

I have added prettier so that styles are formatted easily by running "npm run format:fix".

I have updated variables:

• convert hard-coded colors in style files to variables that are listed in _variables.

I am making this change to easily make theme styling based only on variables override.
Also I noticed that there is no standardized formatting so I installed prettier.

[josdejong]

Thanks Luchiya, that looks like a nice improvement with the new scss variables.

Currently there is a linter in place for JavaScript: standardjs. However this doesn't support SCSS. prettier and standardjs may bite each other, it maybe an idea to move to prettier for both JS and SCSS so we have a unified solution. What do you think?

[lraycheva]

It sounds reasonable.

[josdejong]

Ok cool. Do you know what would be needed still to replace standardjs with prettier? It looks like the new format:check checks both js and scss, so it's probably already working?

[josdejong]

Can you change the tabWidth to 2 spaces?

[josdejong]

Thanks for the update @lraycheva, I think we're close. I tried but the JS files aren't yet scanned, there is probably something that need to be changed in the file names glob ./{.,src/**}/*.{css,scss,js}. I tried by simply changing one line in one of the JS files such that it has wrong indentation - prettier should pick this up then. After that there's probably a bit if tuning in the configuration of prettier needed to match the current code style (or we can to decide to change the style, let's see).

Can you also change the indentation to 2 spaces please?

[josdejong]

ping @lraycheva

[josdejong]

Thanks for fixing the indentation @lraycheva. I see the JS files are still not scanned, did you already have a look into that?

[josdejong]

ok thanks for giving it a try. I will give it a try too as soon as I have some time ok? Let's keep this PR open until then, it's probably close to a fully working solution.