Chakra Capsize

Overview

The content provides information on setting up and using the chakra-capsize theme for styling the body and heading fonts of a component. It discusses the requirements for setting up the theme, including the font metrics, text size theme keys, and options for configuring space between lines of text.

Features

• Defined Body & Heading Font: Specifies the body and heading fonts to be used in the theme.
• Font Metrics for Each Defined Font: Requires the corresponding font metrics to be available for calculating the correct trim values.
• Text Size Theme Keys: Allows defining the text size as either a font size value or a cap height value.
• Space Between Lines of Text: Provides options for configuring the gap between lines of text, including lineGap, leading, and lineHeight.

Summary

The chakra-capsize theme allows for easy customization of the body and heading fonts of a component by providing options for specifying fonts, font metrics, text size, and the gap between lines of text. This article provides a detailed guide on how to set up and use the theme, ensuring accurate trimming and precise control over the size and spacing of text elements.