Consistency on component paddings and margins

Created by: andresgalante

On _varibles.scss there are several definitions of margins and paddings, and although the numbers are consistant, it is really hard to change one and keep consistency across all components.

I want to suggest that we introduce a set of component spacer variables with different sizes that will rule all components paddings and margins. That way by changing the variables in one place we'd have full control of all components and keep them consistant.

For example we have now:

$input-btn-padding-y:       .5rem !default;
$pagination-padding-y:      .5rem !default;

And I want to change it to:

$component-spacer-xs:   .5rem !default;

$input-btn-padding-y:    $component-spacer-xs !default;
$pagination-padding-y:   $component-spacer-xs !default;

We can even use the same $spacer mapping to generate them so utility classes follow the same meassurements we use on components.

You can read more about it here: https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

This is a large change that requieres a lot of testing, if you guys are ok with it, I can send a PR to see how it looks,

What do you think?