theme-ui
theme-ui copied to clipboard
Provide Theme UI-specific "Global" component for global styles
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:
- You cannot use shorthand properties:
<Global
styles={{
'button': {
p: 0, /* <-- should be `padding` */
},
}}
/>
- 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. 🙏
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 🙏
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' }` */
},
}}
/>