Support for Modular Scale Typography

[dvzrd]

I think it would be great to add support for modular scale typography. The current fontSize options are limited and it would take too long to create custom components using extendVariants to make the font sizes scale based on screen width.

I'm already overriding the default typography to make font sizes that scale up, here's an example:

p {
    @apply
      font-body
      font-normal
      text-base
      md:text-md
      xl:text-lg;
  }

This works for text but not with things like buttons or inputs which changes font sizes based on the size prop. So I have to extend the button and many other components to include scalable font sizes based on size, something like this:

export const MyButton = extendVariants(Button, {
  variants: {
    size: {
      xs: "px-unit-2 min-w-unit-12 h-unit-6 text-xs md:text-sm xl:text-base text gap-unit-1 rounded-small",
      md: "px-unit-4 min-w-unit-20 h-unit-10 text-sm md:text-base xl:text-lg gap-unit-2 rounded-small",
      xl: "px-unit-8 min-w-unit-28 h-unit-14 text-base md:text-lg xl:text-lg gap-unit-4 rounded-medium",
    },
  },
});

Not ideal because then I'm not using the theme's internal font size utils

Maybe there can be a moduleScaleText (or something like that) boolean that makes the font sizes scalable, would be better to have a config object that also has a ratio setting to change the amount the font size will grow based on the screen size and how often the text can scale (on every media query or just for md and xl).

This feature will make the font sizes large on bigger screens and would make the components more responsive. What do you think?

If you can give me a brief of where I can edit the plugin options for font sizes, I can do a spike on adding this feature when I have time.