Add more documentation of each Components theme object

Subject

All Components

Description

Whenever you want to style a component, you most likely end up going to the View theme source button of each component. This often then leads you to the @chakra-ui/anatomy folder, to investigate all parts. The View theme source has been a welcome addition a while back, but I don’t think it’s the most user friendly, especially for new comers.

I am wondering if we could create a more user friendly documentation around the theme file.

Taking Input component as an example, we could add another section at the end of the documentation (https://chakra-ui.com/docs/form/input)

Theme

List of parts: field, addon <insert some graphic pointing out which part is which?>

I am not sure how far one has to go, but potentially more information about inheritance as well? E.g. textarea takes from input by default, or the relationship between button and Icon button.

Would love to gage the interest in this, and more than willing to take a crack at it.

[primos63]

Yes, the question on ‘how do I theme a component’ comes up often. It is being addressed by the team. In the meantime, I have a CodeSandbox of theming examples from questions I’ve answered. It also has a How-To for Theming. Feel free to have a look.

[nikolovlazar]

Getting solved by #1100