Investigate use with `chakra-capsize`

[TylerAPfledderer]

Check impact this extension has in using Capsize and the chakra-capsize package.

• Does it negatively override styles created by Capsize?
• Can Capsize be used and styles generated within the extension (enabled by a prop)?
• Does interacting with the package reveal any other general changes to this extension?

Add comments below for record noting any results and additional feedback.

Use the Chakra-TypeScript CSB and add the @tylerapfledderer/chakra-ui-typescale and the @ceteio/chakra-capsize dependencies.

Should eventually add an app in the project to run local testing if there is any additions within the package.

[TylerAPfledderer]

The chakra-capsize package is currently not up-to-date, as the latest commits are about 9 months old and therefore does not support React 18.

~~Looking to fork this package and publish an updated version. This attempt will determine whether or not the integration can be done.

Alternatively, explore full integration by testing use with the original core package. ~~

Chakra-capsize is currently too large of an undertaking to fix. Discovered that the core functions in @capsizecss provide enough flexibility to be used inside the pack.

Consider this addition to be an opt-in, by not including it by default. Also, for now, consider that the user will enable it by using the prop name capsize which is provided an object that has the following possble props:

• fontName: if only one font is to be used throughout the project
• headingFont: metrics get generated for this font only to the Heading component
• bodyFont: meterics get generated for this font only to the body copy and Text component.

The font name of course has to be a valid name using camelCase to be dynamically imported through the @capsizecss/metrics package.

Example:

withTypeScale({
  scale: 1.25,
  lineHeight: 1.45,
  capsize: {
    bodyFont: "raleway",
    headingFont: "openSans"
  }
})

[TylerAPfledderer]

Closing as capsize logic requires a provided font size that is a pixel value, and can not be easily converted to calculate with a font size in rem.