fix: sx variant responsive

[atanasster]

issue: #1030

when a variant was used as an sx prop, its values were merged after applying responsive mods. This PR moves the variant props merging before applying responsive.

The original issue: https://codesandbox.io/s/nameless-sun-hspem-hspem?file=/src/App.js
After the fix (slightly modified): https://theme-ui-responsive-variants.netlify.app

I have seen some other similar issues related to responsive if you guys can check if they are being addressed with the PR @lachlanjc @hasparus

[lachlanjc]

Amazing! Does this fix #720 as well?

[atanasster]

@lachlanjc -- I am not sure. This fixes when the variant is part of the sx prop

<Box sx={{ variant:'xx', p:[1, 5] }} /> - this is affected (fixed)

<Box variant="xx" sx={{ p:[1, 5] }} /> - this is NOT affected (istm that it was working fine before)

[lachlanjc]

Got it. Do we close #1027 with this?