const harmoniousType = new HarmoniousType({
  baseFontSize: 16,
  baseLineHeight: 1.3,
  headerLineHeight: 1.1,
  scaleRatio: 1.5,
  breakpoints: {
    600: {
      baseLineHeight: 1.6,
      headerLineHeight: 1.2,
      scaleRatio: 1.8,
    },
    1000: {
      baseFontSize: 18,
      scaleRatio: 2,
    },
    1600: {
      baseFontSize: 22,
    },
  },
});

[TODO: Link to docs]

[TODO: Include docs for latest release inline]

Hello! If you are reading this, and if you've perused through the code, you might notice that this looks somewhat similar to another popular library: Typography.js.

Typography is a great library. I've used it on various projects over the years and would use it again today. Though I had used tools and concepts in the past with Sass, digging into the source code for Typography is what exposed me to the beautiful math behind it all. I started this fork because I want to see those concepts expanded and learn more deeply about typographical rhythm through code. Additionally, there are some key things I'd like it to do a little differently in my experiment:

• Typography lacks support for reconfiguring important options at various breakpoints, making it difficult to staticly generate media queries. I would love to explore using CSS custom properties for rhythm units, but we will need to be able to produce static CSS while maintaining some of the trickier dynamic stuff.
• It feels too opinionated about things that aren't relevant to its core strength, which is establishing "vertical rhythm" between elements with a type-based grid. In most projects, colors, font families and font weights are likely alredy defined elsewhere, and I often find myself negating Typography's styles in these cases anyway. Perhaps these could be better considered as opt-in plugins instead?
• There are a variety of ways to add styles to a website these days. It'd be great to build an API that is more easily integrated with your project's existing style architecture.
• Development on Typography appears to have stalled as of late. Its core behavior is simple enough to re-create, so it seemed like a fun project to explore a new API and new possibilities.
• Could we componentize layout elements? I have some rough ideas here but am excited to explore.
• Would love to explore fluid typography as a simple opt-in feature.

This is very much in an exploratory phase and I will be updating the APIs and features rapidly for the next few weeks. If you ever had any cool ideas you wanted to see in Typography, feel free to open an issue here and let's explore together!

I will also be exploring other interesting projects that solve similar problems:

• Raster
• Simple Modular Scale
• Typetura

Current high-level status

I have replicated the core functionality I wanted from Typography and scaled back its ambitions:

• Removed style overrides, and any options not related to scaling
• Added a top-level option for breakpoints that will override any of the other top-level settings as the screen scales.
• Created plugins API that can allow users to override generated styles or core configuration options

Core todos:

• [x] ~~Add support for breakpoint calculations~~ [2020-05-17]
• [x] ~~Remove most styles unrelated to spacing/scaling~~ [2020-05-17]
• [x] ~~Test output as CSS-in-JS and CSS~~ [2020-05-17]
• [ ] Use in a project and identify shortcomings (started)

Homework:

• [ ] Explore rhythm units as design tokens
• [ ] Explore non-pixel breakpoints (these can be problematic but I want to make sure I've got a solid argument for the restriction)
• [ ] Explore fluid typography
• [ ] Explore component exports in harmonious-react
• [ ] Write some docs when ideas are more fleshed out
• [ ] Revisit ~~plugins and~~ themes

Project housekeeping:

• Use babel for tests
• Configure test build to allow testing either source files (for development) or bundles