Theme UI

[taggartbg]

• Add Theme-UI
• Create a variant system using core API

ISSUES

• Theme-ui currently does not support multiple variants, I'm doing it manually, but kind of like it
  • Reference: Creating Multiple Variants system-ui/theme-ui#403
• Variants do not seem to be respected on the default components like they should, this may be related to the next issue. Since I am manually pulling them onto the component, I can manually support as many as I'd like.
• Storybook and Theme-UI use different versions of emotion, beyond the package resolution issue (solved) this seems to cause a couple issues:
  • The Canvas page doesn't work (but, honestly, for our use case the Docs page is better, so I made that the default page)
  • Rendered elements have 2 component names, not that much of an issue, but odd (one has the base styles, one has the override styles)
    • Reference: theme-ui creates 2 class names in storybook when using sx prop system-ui/theme-ui#1530
  • This may cause other issues, but for now I don't see any
    • Custom theme not propagated within Storybook.js mui/material-ui#24282

While there are definitely issues here, I seem to have found a pretty good balance between solving them and working around them.

[hammeiam]

Take a look at chakra for some API inspiration https://chakra-ui.com/docs/theming/component-style#styling-single-part-components (scroll down a little for the button implementation)