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

const InnerSystemComponentBox = createSystemComponent(React, 'div', shadows);

const SystemComponentBox = styled(InnerSystemComponentBox)`
    ${shadows}
`;

const systemComponentBoxTest = () => (
    <div>
        
    </div>
);

// TH

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

export const Skeleton = ({
    className,
    children,
    textLength,
    loading = true,
    colorStart = th('skeleton.colorStart'),
    colorEnd = th('skeleton.colorEnd'),
    ...props
}: SkeletonProps): React.ReactElement | any => {
    if (!loading) {
        return typeof children === 'undefined' ? null : children;
    }

    // This is the conversion from block width to the average width of
    // a normal distribution of letters. We came up with it by eyeballing it
    // for the Avenir Next font. We should make it configurable via theme/prop
    // or make further calculations to improve it.
    const blockToAverageCharQuotient = 2.15;

    // This is the unicode block character that put together looks like one
    // long bar. There are shorter and taller characters that could be used
    // or a fatter or thinner bar. Therefore the bar thickness chould be made
    // a prop in the future, mapping to different block characters.

// VENDOR
import { createGlobalStyle } from '@xstyled/styled-components';
import { th } from '@xstyled/system';

export const GlobalCSS = createGlobalStyle`
  html,
  body {
    font-family: base;
    color: text.body;
    font-size: ${th('typography.fontSize')};
    letter-spacing: 0;
    line-height: 1.357142857rem;
  }
`;

export const Skeleton = ({
    className,
    children,
    textLength,
    loading = true,
    colorStart = th('skeleton.colorStart'),
    colorEnd = th('skeleton.colorEnd'),
    ...props
}: SkeletonProps): React.ReactElement | any => {
    if (!loading) {
        return typeof children === 'undefined' ? null : children;
    }

    // This is the conversion from block width to the average width of
    // a normal distribution of letters. We came up with it by eyeballing it
    // for the Avenir Next font. We should make it configurable via theme/prop
    // or make further calculations to improve it.
    const blockToAverageCharQuotient = 2.15;

    // This is the unicode block character that put together looks like one
    // long bar. There are shorter and taller characters that could be used
    // or a fatter or thinner bar. Therefore the bar thickness chould be made

${props =>
        css({
            fontFamily: 'base',
            fontSize: th('typography.fontSize'),
            lineHeight: th('typography.lineHeight'),
            fontWeight: th('typography.fontWeight'),
            textAlign: 'inherit',
            color: 'inherit',
            ...variant({
                key: 'typography.tag',
                default: 'none',
                prop: 'tag',
            })(props),
            ...variant({
                key: 'typography.scale',
                default: 'none',
                prop: 'scale',
            })(props),
        })}

${props =>
        css({
            fontFamily: 'base',
            fontSize: th('typography.fontSize'),
            lineHeight: th('typography.lineHeight'),
            fontWeight: th('typography.fontWeight'),
            textAlign: 'inherit',
            color: 'inherit',
            ...variant({
                key: 'typography.tag',
                default: 'none',
                prop: 'tag',
            })(props),
            ...variant({
                key: 'typography.scale',
                default: 'none',
                prop: 'scale',
            })(props),
        })}

Alert: p => {
          const baseColor =
            p.variant === null ? null : th.color(p.variant || 'primary')(p)
          const textColorLevel = th('colorLevels.Alert.color')(p)
          const backgroundColorLevel = th('colorLevels.Alert.backgroundColor')(
            p,
          )
          const borderColorLevel = th('colorLevels.Alert.borderColor')(p)
          const color = colorLevel(baseColor, textColorLevel)(p)
          const backgroundColor = colorLevel(baseColor, backgroundColorLevel)(p)
          const borderColor = colorLevel(baseColor, borderColorLevel)(p)
          const hrColor = darken(0.05, color)
          return css`
            font-family: ${th.font('base')(p)};
            position: relative;
            padding: 12rpx 20rpx;
            margin-bottom: 16rpx;
            border: 1rpx;
            border-color: transparent;
            border-radius: ${th.radius('base')(p)};

Alert: p => {
          const baseColor =
            p.variant === null ? null : th.color(p.variant || 'primary')(p)
          const textColorLevel = th('colorLevels.Alert.color')(p)
          const backgroundColorLevel = th('colorLevels.Alert.backgroundColor')(
            p,
          )
          const borderColorLevel = th('colorLevels.Alert.borderColor')(p)
          const color = colorLevel(baseColor, textColorLevel)(p)
          const backgroundColor = colorLevel(baseColor, backgroundColorLevel)(p)
          const borderColor = colorLevel(baseColor, borderColorLevel)(p)
          const hrColor = darken(0.05, color)
          return css`
            font-family: ${th.font('base')(p)};
            position: relative;
            padding: 12rpx 20rpx;
            margin-bottom: 16rpx;
            border: 1rpx;
            border-color: transparent;
            border-radius: ${th.radius('base')(p)};
            color: ${color};
            background-color: ${backgroundColor};
            border-color: ${borderColor};

Alert: p => {
          const baseColor =
            p.variant === null ? null : th.color(p.variant || 'primary')(p)
          const textColorLevel = th('colorLevels.Alert.color')(p)
          const backgroundColorLevel = th('colorLevels.Alert.backgroundColor')(
            p,
          )
          const borderColorLevel = th('colorLevels.Alert.borderColor')(p)
          const color = colorLevel(baseColor, textColorLevel)(p)
          const backgroundColor = colorLevel(baseColor, backgroundColorLevel)(p)
          const borderColor = colorLevel(baseColor, borderColorLevel)(p)
          const hrColor = darken(0.05, color)
          return css`
            font-family: ${th.font('base')(p)};
            position: relative;
            padding: 12rpx 20rpx;
            margin-bottom: 16rpx;
            border: 1rpx;
            border-color: transparent;
            border-radius: ${th.radius('base')(p)};
            color: ${color};

${props =>
        css({
            fontFamily: 'base',
            fontSize: th('typography.fontSize'),
            lineHeight: th('typography.lineHeight'),
            fontWeight: th('typography.fontWeight'),
            textAlign: 'inherit',
            color: 'inherit',
            ...variant({
                key: 'typography.tag',
                default: 'none',
                prop: 'tag',
            })(props),
            ...variant({
                key: 'typography.scale',
                default: 'none',
                prop: 'scale',
            })(props),
        })}