Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add style guide components #59

Open
jxnblk opened this issue Jun 7, 2019 · 6 comments

Comments

@jxnblk
Copy link
Member

commented Jun 7, 2019

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

This comment has been minimized.

Copy link

commented Jun 8, 2019

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

This comment has been minimized.

Copy link
Member Author

commented Jun 10, 2019

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

This comment has been minimized.

Copy link

commented Jun 10, 2019

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 comment has been minimized.

Copy link
Member Author

commented Jun 10, 2019

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

@jxnblk jxnblk referenced this issue Jun 17, 2019
0 of 8 tasks complete
@okonet

This comment has been minimized.

Copy link

commented Jun 18, 2019

@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

This comment has been minimized.

Copy link
Member Author

commented Jun 18, 2019

@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

@jxnblk jxnblk referenced this issue Jun 19, 2019
3 of 3 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.