Heading components (H1,H2,H3,H4,H5,H6) are not mapping as per documentation

Hi there,

In the documentation on the README.MD file we have the following section:

export default {
  colors: {
    text: '#000',
    background: '#fff',
    primary: 'tomato',
  },
  spacing: [10, 12, 14],
  fontSize: [16, 20, 24],
  text: {
    h1: {
      fontSize: 3, // this is 24px, taken from `fontSize` above
    },
    p: {
      fontSize: 1, // & this is 16px, taken from `fontSize` above
    },
  },
}

After testing this, I found that:

h1: {
      fontSize: 3, // this is 24px, taken from `fontSize` above
    },

For me, the 3 is used as the font size in pixel (3 pixels) and not mapping to the fontSize set (fontSize: [16, 20, 24],) above.

Is this expected? When I avoid putting the H fontSize styling into my theme, the defaults are working correctly when switching H1 to H2, to H3 and so on…

If this is expected, how would one map other text components if Heading (H) components are just defaulting.

[daxfrost]

I created a PR for fixing the documentation: https://github.com/nandorojo/dripsy/pull/38

[daxfrost]

I actually verified that it wasn’t outside the range before making this issue.

That said, I just changed fontSize: [16, 20, 24], to fontSizes: [16, 20, 24], and now it works… 🤔