Create component shadow variables to keep consistency across components

Created by: andresgalante

We are defining different shadows in different components. There are about 25 shadow definitions on variables.

To keep consistency, I think we unify all of them in 4 shadow variables (sm, md, lg and inset) and then reuse them across components.

For example, instead of:

$popover-box-shadow:                  0 .3rem .6rem rgba($black,.2) 

We would have something like:

$component-box-shadow-md:                  0 .3rem .6rem rgba($black,.2) 
$popover-box-shadow:                  $component-box-shadow-md 

This follows the same idea as #23674 (closed)

Before I send a PR I'd like to know what do you guys think?