Implement `clamp()` function for font-sizes and line-heights

[TylerAPfledderer]

With the clamp() CSS function having majority browser support, it can be used to ease font transitions from large screens to small screens.

It can serve two purposes:

• Ease font sizes between screen sizes without the need to specify breakpoints
• Ease line-heights to match the font-sizes to keep consistent spacing for vertical rhythm.

Due some intended designs and potential quirky results, this can be considered as an optional addition, where a prop could enable the option.

If clamp is to not be used, than the sizing will be generated via the technique Chakra uses, with an array that denotes each type of breakpoint specified in the theme.

For example, with the Heading component's sizes object, either render

Heading: {
  sizes: {
    lg: {
      fontSize: ['1.25rem', null, '1.953rem'],
      lineHeight: ['1.5rem', null, '3rem']
    },
    // Other sizes...
  }
}

Or...

Heading: {
  sizes: {
    lg: {
      fontSize: `clamp(1.25rem, 0.25513742301654385rem + 4.24465644245864vw, 1.953rem)`,
      lineHeight: `clamp(1.5rem, -0.6rem + 9.06vw, 3rem)`
    },
    // Other sizes...
  }
}

And create configurations to allow for different minimum and maximum viewports to constrain the clamp to. (Really should say the same when using an array)

This is a selfish addition, but there are many articles that argue for fluid typography to allow better change in font-size but only considering the smallest and largest viewports instead of breakpoints. Whether or not it is effective depends on the design a developer works with. Ideally, if the designer used fluid type, then the developer should use it, and clamp() helps with that.

[TylerAPfledderer]

The PR closing this issue will only add the functionality to the Heading component's sizes object, and not the fontSizes object.

The latter may either be addressed at a later time with a new issue created, or suspended indefinitely. (Considering the former)