How to use the @xstyled/system.th.fontSize 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 {
              opacity: 0.8;

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.border(2)({});
th.border('main')({});

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

th.borderStyle(2)({});
th.borderStyle('selected')({});

th.shadow(2)({});
th.shadow('xl')({});

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.border(2)({});
th.border('main')({});

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

th.borderStyle(2)({});
th.borderStyle('selected')({});

th.shadow(2)({});
th.shadow('xl')({});

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;
              width: 100%;
              cursor: inherit;
              height: 100%;
              margin: 0;
              opacity: 0;
              padding: 0;
              position: absolute;
              z-index: 1;
            }

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;
            }

            &::placeholder {

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)};
            }

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;
            }
          `
        },
      },