Remove sx props from Paragraph component

https://github.com/system-ui/theme-ui/blob/29b9b37f37b22924c5afe516972acc0c02266d71/packages/components/src/Paragraph.js#L14-L22

While I appreciate the intent, this makes it really tough to use Paragraph except for one very specific use case. It takes a specificity hack to defeat it using the theme:

export const theme = {
  text: {
    paragraph: {
      ':not(_)': {
        my: 3,
        maxWidth: 'unset'
      }
    }
  }
}

I think the margin reset probably belongs in a base theme, and the maxWidth is an interesting idea that could be mentioned in the documentation or included in a paragraph variant in one of the themes.

[hasparus]

@flo-sch No idea TBH, mate. I remember jxnblk’s comment he wanted to move towards sx everywhere, but I’m not sure if I can find it.

My opinion on this is:

• You want shorthand style props? Build your own components on top of Theme UI Components (which most likely is sth you’d do anyway when your UI gets complex). Or use Chakra for a ready-made set of UI primitives.
• Want a high-level layer on top of your className prop similar to style prop but allowing all legal CSS (Emotion) or even fancier shenanigans (That’s Theme UI).

[hasparus]

Hi @aaronadamsCA 👋 Thanks for the issue!

cc @lachlanjc @flo-sch