Consistency on component paddings and margins

[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?

[XhmikosR]

/CC @mdo

[mdo]

This feels like an unnecessary abstraction right now. The example here at least doesn't seem to buy us more, and adds one more layer to the input-button variables. Passing for now I think.