Add style guide components

[jxnblk]

Having a few built in style guide components to show demonstrate parts of the theme would be a great addition. For example:

• Type specimen component to show fonts
• Font-size/typographic scale visualization
• Color palette components with support for color modes

[okonet]

I started working on https://github.com/component-driven/react-design-tokens before this was released but today I ported to Theme UI and it was a great experience.

I'm not sure if having theme-ui as a hard dependency is good for me but my goal was to rely on the system-ui theme spec anyways so I think it's okay.

Would be interested in adopting those or merging the effort somehow?

Let me know what you think!

[jxnblk]

Would definitely be interested in collaborating on this! This looks very similar to what I was imagining, and I think it'd be great if the style guide components weren't tightly coupled with the core theme-ui package too, but it would have to follow the System UI Theme Spec.

One question would be: is it okay to depend on Emotion for the theme context, or would it be worth making these generic enough that they could work with any other CSS-in-JS library's context?

[okonet]

Would definitely be interested in collaborating on this!

Cool! What would be your proposition in how to do that? I could merge the project into Theme UI but I still have the concern with relying on it as a dependency.

but it would have to follow the System UI Theme Spec.

I think that would be the right constrain to have in it. Otherwise it will get out of control very soon :-)

is it okay to depend on Emotion for the theme context, or would it be worth making these generic enough that they could work with any other CSS-in-JS library's context

I'd love to be framework agnostic in this regard. At least I'd like to have support for both emotion and styled-component in the beginning. Thoughts?

[jxnblk]

This repo has a (very basic) monorepo setup started, so I think adding a new package that doesn't include theme-ui core as a hard dependency should work. If you're concerned with conceptually having them too closely tied together, let me know (but, really, I'd like Theme UI to be a general-purpose set of libraries for this sort of thing – might not appear that way yet).

WRT being framework agnostic, doing something like what Rebass does (where the imports from one library are swapped with another using Babel) should be an option, but I suspect there are a few other approaches as well and down to explore that

[okonet]

@jxnblk I'm going to take a look at this in a few weeks since I'm overloaded now with errands and other things :-( but would be lovely to have my things integrated here.

[jxnblk]

@okonet no worries! And that's totally understandable. I'd still love to combine efforts and think this is the type of feature we can slowly chip away at and iterate on.

As a heads up, I've started working on a package for some basic theme presets (#88), which would benefit from having some components like this for development and documentation.

I might try to leverage what you currently have in @component-driven/react-design-tokens, but if there's anything added in here before you have time to work on it, definitely consider it experimental and the type of thing that can be scrapped later