Bootstrap: Add utility variants in the Utiliity API

[webpixels]

@mdo, it would be very helpful to have the possibility to choose whether we need variants for different utility classes inside the API. For example, we could add a transform or shadow property on hover, focus, and so on.

$utilities: (
   "opacity": (
      property: shadow,
      responsive: true,
      **variants: hover, focus**
      values: $shadow-values
   )
);

I think this is one feature that would make this cool API almost complete.

[ydmitry]

There is a PR to do this https://github.com/twbs/bootstrap/pull/31643 , but I would prefer a different syntax than in that PR

E.g.
variants: hover, focus
or
variant: hover

Instead of
hover: true

[mdo]

Compared to variants, I think calling them something closer to what they are would be better. psuedo-classes might be too verbose and technical though, so maybe states? We use variants sometimes to describe the color schemes we provide on certain components.

[ydmitry]

Yes, states is better

[webpixels]

I believe states is exactly what we need. Is there a chance to have it in alpha-3?

[mdo]

Added in Beta 1!