Provide Theme UI-specific "Global" component for global styles

[benface]

Is your feature request related to a problem? Please describe. Theme UI's documentation suggests to "use the Emotion Global component to add global CSS with theme-based values". That's great, but every once in a while, I forget that the syntax for its styles prop is different than what the sx prop allows, leading to wasted time and frustration. Two examples:

1. You cannot use shorthand properties:

<Global
  styles={{
    'button': {
      p: 0, /* <-- should be `padding` */
    },
  }}
/>

2. You cannot use design tokens directly:

<Global
  styles={{
    'button': {
      backgroundColor: 'coolGreen', /* <-- should be `theme.colors.coolGreen` */
    },
  }}
/>

Describe the solution you'd like It would be really awesome if Theme UI provided its own Global component (probably in a separate package, e.g. @theme-ui/global), that made the above two examples work out of the box.

Describe alternatives you've considered None.

Additional context Thank you. 🙏

[hasparus]

Hey @benface 👋

It would definitely be a great addition. I usually advised people to add stuff to a global CSS file or use a reset, but there are some use cases that just ask for a component similar to Emotion's Global. The solution you've described looks great.

Thank you for the issue 🙏

[benface]

Thank you @hasparus!

I forgot to mention that I would expect the array syntax for responsive values to work as well (3rd example):

<Global
  styles={{
    'button': {
      padding: ['16px', '32px'], /* <-- should be `padding: '16px'` + `@media (min-width: ...) { padding: '32px' }` */
    },
  }}
/>