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

MenuItem: p => {
          return css`
            appearance: none;
            background-color: transparent;
            padding: 8rpx;
            border: 0;
            border-radius: ${th.radius('base')(p)};
            color: ${th.color('light700')(p)};
            font-size: 14rpx;
            display: block;
            width: 100%;
            text-align: left;
            transition: ${th.transition('base')(p)};
            transition-property: background-color;
            cursor: pointer;
            /* For links */
            text-decoration: none;

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

            &:focus,
            &:hover {
              outline: none;
              background-color: ${th.color('highlightBackground')(p)};
            }

            &[disabled],

th('colors.primary900')({});

th.color(2)({});
th.color('primary')({});

th.px(2)({});
th.px('2rpx')({});

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('colors.primary900')({});

th.color(2)({});
th.color('primary')({});

th.px(2)({});
th.px('2rpx')({});

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')({});