How to use the @xstyled/system.th.font function in @xstyled/system

Button: p => {
          const { outline } = p
          const scale = p.scale || 'base'
          const baseColor =
            p.variant === null ? null : th.color(p.variant || 'primary')(p)
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          return css`
            display: inline-block;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            padding: ${py} ${px};
            border-radius: ${th.radius(scale)(p)};
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            border-width: ${th.borderWidth(`button.${scale}`)(p)};
            cursor: ${p.disabled ? 'initial' : 'pointer'};
            ${safeTransition('base')(p)};

            /* When used as link */
            text-decoration: none;

            &[type='button'] {
              appearance: none;
            }

            &:disabled {

th.percent(0.3)({});
th.percent('20em')({});

th.radius(2)({});
th.radius('sm')({});

th.transition(2)({});
th.transition('fade')({});

th.space(2)({});
th.space('sm')({});

th.size(2)({});
th.size('sm')({});

th.font(2)({});
th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});

th.fontSize(2)({});
th.fontSize('sm')({});

th.zIndex(2)({});
th.zIndex('modal')({});

th.percent('20em')({});

th.radius(2)({});
th.radius('sm')({});

th.transition(2)({});
th.transition('fade')({});

th.space(2)({});
th.space('sm')({});

th.size(2)({});
th.size('sm')({});

th.font(2)({});
th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});

th.fontSize(2)({});
th.fontSize('sm')({});

th.zIndex(2)({});
th.zIndex('modal')({});

Text: p => {
          const variantConfig = p.variant ? p.theme.texts[p.variant] : null
          return css`
            font-family: ${th.font('base')(p)};
            ${ellipsis(p)}
            ${variantConfig ? variantConfig.style : null}

            && {
              ${system(p)}
            }
          `
        },
      },

Input: p => {
          const scale = p.scale || 'base'
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          const validColor = th.color('form.valid')(p)
          const invalidColor = th.color('form.invalid')(p)
          return css`
            display: block;
            appearance: none;
            width: 100%;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            border-width: ${th.borderWidth(`formControl.${scale}`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            color: ${th.color('formControl.text')(p)};
            background-color: ${th.color('formControl.background')(p)};
            padding: ${py} ${px};
            line-height: ${th.lineHeight(`button.${scale}`)(p)};
            border-radius: ${th.radius(scale)(p)};
            ${safeTransition('base')(p)};

            &[type='number'] {
              padding-right: 6rpx;
            }

FormCheckLabel: p => {
          const { scale = 'base' } = p
          const pl = th.space(`formCheckLabel.left.${scale}`)(p)
          return css`
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            padding-left: ${pl};

            [aria-disabled='true'] ~ & {
              opacity: 0.6;
            }
          `
        },
      },

Menu: p => {
          return css`
            border: 0.0625rem solid;
            border-color: ${th.color('highlightBorder')(p)};
            font-family: ${th.font('base')(p)};
            background-color: ${th.color('lighter')(p)};
            border-radius: ${th.radius('base')(p)};
            padding: 0.5rem 0.25rem;
            z-index: 999;

            &:focus {
              outline: none;
            }

            &[data-animated='true'] {
              transition: ${th.transition('base')(p)};
              transition-property: opacity;
              display: block !important;

              &[hidden][data-animating='false'] {
                display: none !important;

Select: p => {
          const scale = p.scale || 'base'
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          const validColor = th.color('form.valid')(p)
          const invalidColor = th.color('form.invalid')(p)
          return css`
            display: block;
            appearance: none;
            width: 100%;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            border-width: ${th.borderWidth(`formControl.${scale}`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            color: ${th.color('formControl.text')(p)};
            background-color: ${th.color('formControl.background')(p)};
            background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
              no-repeat right 0.75rem center/8px 10px;
            padding: ${py} ${px};
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            border-radius: ${th.radius(scale)(p)};
            ${safeTransition('base')(p)};

            &::placeholder {
              color: ${th.color('formControl.placeholder')(p)};

Switch: p => {
          const scale = p.scale || 'base'
          const width = th.size(`switch.container.width.${scale}`)(p)
          const height = th.size(`switch.container.height.${scale}`)(p)
          const ballSize = th.size(`switch.container.ball.${scale}`)(p)
          return css`
            display: inline-block;
            position: relative;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            border-radius: ${th.radius('34rpx')(p)};
            width: ${width};
            height: ${height};
            background-color: ${th.color('light300')(p)};
            overflow: hidden;
            cursor: pointer;
            border-width: ${th.borderWidth(`formControl.base`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;
            font-size: ${th.fontSize(`switch.${scale}`)(p)};
            font-weight: ${th.fontWeight('extraBold')(p)};
            ${safeTransition('base')(p)};

            input {
              top: 0;
              left: 0;

Card: p => {
          return css`
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: ${th.color('lighter')(p)};
            background-clip: border-box;
            border: 0.0625rem solid;
            border-color: ${th.color('highlightBorder')(p)};
            border-radius: ${th.radius('base')(p)};
            font-family: ${th.font('base')(p)};

            && {
              ${system(p)}
            }
          `
        },
      },