Tests & new font color API

@BarryThePenguin did a fantastic job in #90 adding near 100% code coverage in one swoop. Thanks!

We also decided that the old body/header gray value & hue API was... confusing. That's not how most people think about the color of text. So now there's just bodyColor and headerColor. Also per @bvaughn suggestion in #92, headerColor defaults to 'inherit' so it's simpler to override header/body font colors together.

More API tightening

The helper function awkwardly known as adjustFontSizeToMS is now simply scale which nicely parallels the other commonly used Typography.js helper function rhythm.

scale is used to scale font sizes. When called it returns an object with calculated values for fontSize and lineHeight

e.g.

scale(1) // => { fontSize: '1.51572rem', lineHeight: '2.25rem' }

This makes it easy to adjust the size of elements when using inline styles or css-in-js.
E.g. <div style={{...scale(1)}}</div>

To calibrate your understanding of scale values. A scale value of 0 is the size of the body font. A value of 1 is the (default) size of h1s.

Simplify API

Two breaking changes in interest of simplifying the UI.

• baseLineHeight takes the css unitless number now instead of a px value. This is what most people use for line-height so made sense to make the switch. PX values still work so this isn't technically a breaking change but you're encouraged to switch things over.
• modularScales is now just scale. I decided to consolidate various responsive typography concerns into a coming breakpoints option. Instead of passing an array of options to modularScales do something like:

{
  scale: 2
}

New themes, theme cleanups, remove fontFace support

• Added two new themes. One based on the US Web Design Standards and the other on the popular CSS framework Bootstrap.

Breaking changes

• Removed fontface support as not core to goals of project + many other better solutions for this. ffab1e9
• Deprecated fontSizeToMS function and replaced it with adjustFontSizeToMSValue. a69a413
• Deprecated fontSizeToPx function. Use adjustFontSizeTo instead. a69a413

Bug fixes

• Remove whitespace added by ES2015 template literals (it preserves white-space at front of strings) 721bc0a
• Fixed subthemes. Can we give two cheers for adding tests? 39a0b80
• Make blockquote defaults more sensible 0f560cb

Fixed Typographical scale

So this is why they don't let amateurs create OSS projects ;-)

I've setup the typographical scale here wrong the whole time. This blog post was very helpful in setting me straight:
http://spencermortensen.com/articles/typographic-scale/

Basically what I've learned and corrected this project to use is that the h1 should be the baseFontSize multiplied by the modular scale. And that the classic "scale" is the Octave or 2. Whereas previously I'd just eyeballed the multipliers for the various headers, they're now in line with the theory in the above article. See this and this commits for the details.

How to update

If you just used the default modular scale, then there's little to do. I've updated the default modular scale now to octave which with the new code, results in similar typography to the previous diminished fourth.

If you did set your own modular scale(s), you'll need to try larger ones until you restore the previous behavior.

Also I changed the default font-family for headers (e9d0bb4). If you want to restore that font-family stack, add this to your config headerFontFamily: '"Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif'

Other notable changes.

• Converted coffeescript to babelscript 9dcf235
• Fixed bug with fontSizeToMS not using set scale. 3caf85b
• Update normalize.css to 4.1.1. b122fc9
• Removed most whitespace/new lines from outputted styles d3359c6

Speed up initialization of new Typography object

Basically defer all work until actually needed. Don't create the styles string or React.js components unless asked for.

• #22

New modularScales api + sub-theme support

New Modular Scale config api

Previously the modular-scales config api was... confusing. You could pass in either just the scale or if you wanted to create a responsive option, you passed in an array where the first item was the max-width for this scale and the second was the scale. E.g.

modularScales: [
  'diminished fourth',
  ['768px', 'minor third']
]

This wasn't particularly intuitive (I had to look it up everytime).

So I made the API more explicit. It now looks like

modularScales: [
  {
    scale: 'diminished fourth'
  },
  {
    maxWidth: '768px',
    scale: 'minor third'
  }
]

Sub-theme support

A common problem when creating a site is you'll want most of the site to have a similar look-and-feel but one or two sections to be different. With the new sub-theme support, it is now easy to do this with Typography.js.

For example, to add a "blog" subtheme you'd add onto your config:

{
  baseFontSize: '16px',
  baseLineHeight: 24px',
  // Remainder of global config
  subThemes: {
    blog: {
      baseFontSize: '18px',
      baseLineHeight: '27px',
      baseFontFamily: 'Open Sans'
    }
  }
}

Typography.js wraps all sub-theme css inside a .typography-theme-{sub-theme-name} class e.g. in this case, .typography-theme-blog. Add that class to your sub-theme and you're set!