Allow responsive font sizes in theme.

Without predefining a component which feeds an object of font sizes into the fontSize prop there doesn’t seem to be a way to quickly and consistently apply responsive font sizes.

It would be very handy to be able to do this:

//theme.js
const fontSizes = {
  ...
  ...
  ...
  ...
  "6xl": { base: "42px", md: "54px", lg: "64px" },
}

Or perhaps add a new theme object entirely

//theme.js
const fontSizes = {
  ...
  ...
  ...
  ...
  "6xl": "64px" ,
}

const fluidFontSizes = {
  ...
  ...
  ...
  ...
  "6xl": { base: "42px", md: "54px", lg: "64px" },
}

[agentlewis]

Oh thanks so much - thats exactly what I needed! inner-critic attack alleviated.

[TimKolberger]

See this codesandbox for reference: https://codesandbox.io/s/chakra-ui-responsive-heading-4bh4p?file=/src/App.tsx

<Heading size="xl" is not the same as <Heading fontSize="xl". The fontSize prop only applies the fontSize, the size prop applies the defined styles from the theme.