Standardize variable namings

[janperse]

We have a few different naming styles in variables, so lets set a proper naming system.

I'm up for system like this, which is already done for some variables in #52

Basic component
${component-name}-{css-property-name}
$button-font-size: fontSize('epsilon')

With modifier
${component-name}-{modifier-class-name}-{css-property-name}
$button-large-font-size: $button-font-size

With modifier and child element
${component-name}-{modifier-class-name}-{child-element}-{css-property-name}
$button-large-label-font-size: $button-font-size

For hover, focus or active = action
${component-name}-action-{css-property-name}
or
${component-name}-{modifier-class-name}-action-{css-property-name}

Disabled
${component-name}-disabled-{css-property-name}
${component-name}-{modifier-class-name}-disabled-{css-property-name}

This way the base component classes are first, followed by action class or some similar attribute name, and ends up with css property name.

What do you guys think, @matevzgolavsek @loucyan

[matevzgolavsek]

@janperse yep, i agree with this type of style. Already applied to the newest variables.