Add full style guide typography support

[theianjones]

When we use these in egghead-proper, sometimes we need the text to be dark. We can't use the Paragraph tag in the <Header/> component because the text defaults to white.

Allowing custom styles to be passed in and applied could fix this. We could just start with the app colors (I think this would cover most cases for text color)

One example is the header component:

[trevordmiller]

"When we use these in egghead-proper, sometimes we need the text to be dark. We can't use the Paragraph tag in the

component because the text defaults to white."

Neither Header or Paragraph dictates color; you can cascade color with tachyons with wrapper elements like this:

<div className='base'>
  <Heading>{user.name}</Heading>
</div>
<div className='dark-gray'>
  <Paragraph>{user.email}</Paragraph>
</div>

Make sense? If you are experiencing color overrides, check your developer tools for react-rails specific color overriding by global element / class etc.

But yes, we could also add the functionality to pass color as a prop. I'd like to see what variations of text formatting are needed (by purpose) from @vojtaholik first though.

Also, I wouldn't recommend putting a paragraph inside a header - for semantic and styling cascading reasons; instead, for example in the picture ^ you could stack instead:

<ProfilePreview>
  <div className='base'>
    <Heading>{user.name}</Heading>
  </div>
  <div className='dark-gray'>
    <Paragraph>{user.email}</Paragraph>
  </div>
  <Button>
    View Profile
  </Button>
  <SignOut />
</ProfilePreview>

Make sense?

I'm going to update this issue's title to be "Add full style guide typography support" for us to continue to discuss what else is needed for <Heading> and <Paragraph> to accommodate the style guide + use cases across egghead projects.

[theianjones]

Thanks for that comment! That makes a lot more sense. The Paragraph component has a lot more flexibility when used this way :)