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.

Installation

To set up the chakra-capsize theme, follow these steps:

1. Define the body and heading fonts for the theme using the chakra’s fonts themekey or by setting the fontFamily directly on components.Text / components.Heading.
2. Ensure that the font metrics for each defined font are available by importing them and passing them to the fontMetrics option.
3. Configure the text size theme keys by defining the text size as either a fontSize value or a capHeight value, using the capHeights key in the Chakra theme.
4. Optionally, configure the space between lines of text by setting the lineGap, leading, or lineHeight values in the theme.

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.