Adding textStyles to the component theme

🚀 Feature request

Please describe your request in one or two sentences.

I want to be able to define a custom theme component and give it one of my textStyles.

🧱 Problem Statement / Justification

Please provide valid reason(s) why this should added to Chakra UI.

I think this is something that should be used because we want to have an easier typography.

If this feaure is related to a problem you’ve noticed. Mention it as well

✅ Proposed solution or API

Please provide code snippets, gists, or links to the ideal design or API

This is an example of setting up the theme for a Table component.

const textStyles = {
  body4: {
    fontSize: '1.4rem',
    fontWeight: 'bold'
    lineHeight: '1.4rem',
  },
}

const sizes = {
  sm: {
    th: {
      px: '8',
      py: '4',
      textStyle: 'body4',
    },
  }
}

or

const baseStyle = {
 th: {
  textStyle: 'body4',
 }
}

↩️ Alternatives

What alternative solutions have you considered before making this request?

📝 Additional Information

What resources (links, screenshots, etc.) do you have to assist this effort?

[yotam707]

Actually, it was solved by using the apply property but wanted a better API for this:

const baseStyle = {
  table: {
    tr: {
      borderBottom: '1px',
      borderColor: 'grey.500',
      th: {
        apply: 'textStyles.body4',
      },
    },
  },
}

And I think a better API for this would be:

const baseStyle = {
  table: {
    tr: {
      borderBottom: '1px',
      borderColor: 'grey.500',
      th: {
        textStyle: 'body4',
      },
    },
  },
}

[CloudLooks]

@TimKolberger Could you point me to apply in the documentation? This is very useful but I do not see it documented. Maybe it has been replaced?