refactor: add dynamic type sass functions

[liamdebeasi]

Issue number: N/A

---

What is the current behavior?

One of the concerns about our dynamic type implementation is that the resulting rem values seem arbitrary. While we currently know this is the result of dividing the px font value by 16, we may not remember this in a few months.

The team would like to evaluate ways to make the font sizes more obvious in terms of how the resulting values are derived.

What is the new behavior?

• Introduces sass functions that compute dynamic type values.
• The base font size is specified in pixels and scales can be optionally provided too using the correct function. These scales are written as decimals rather that explicit font values. The benefit of this is if the base font size changes, so do the resulting max/min values.

Open to naming ideas, though I opted to use min/max to describe the clamp operation you are trying to do. For example, dynamic-font-min means you are generating a dynamic font with a minimum font size. This is different than what CSS does where the max() function allows you to set a minimum font size. While this deviates from what CSS does, I think this is a bit easier to understand.

Does this introduce a breaking change?

• Yes
• No

Other information

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.