Variable theme - enable the potential to use more css variables

[imaliouris]

Currently in the variable theme we can only configure colors as css variables and I was wondering if we could refactor some of the code in order to be able to set i.e. @select-multiple-item-height as a css variable.

In current implementation this can't happen because if we set

@select-multiple-item-height: ~"calc(@{input-height-base}-@{input-padding-vertical-base}*2)";

less compiler will throw an error because in select/style/multiple.less we have a calculation at line 78

line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2;

My proposal is to refactor every calculation in component styles to use css calc() instead of less calculations.
So in the previous example that would result to

line-height: ~"calc(@{select-multiple-item-height}-@{select-multiple-item-border-width}*2)";

[lppedd]

Adding myself to this request.

The variable theme has proven to be fantastic, but LESS functions need to be replaced with standard CSS functionalities, or dropped, as they can't be easily extended.

[lppedd]

@imaliouris better to move this to an issue btw.