How to use the @patternfly/react-tokens.global_spacer_xs.var function in @patternfly/react-tokens

position: 'fixed',
    width: 'inherit',
    height: '100vh',
    overflowY: 'auto',
    backgroundColor: navBackgroundColor.var
  },
  logo: {
    textAlign: 'center',
    margin: `${spacerMd.var} 0`,
    padding: `0 ${spacerMd.var}`
  },
  search: {
    margin: spacerMd.var
  },
  input: {
    padding: `${spacerSm.var} ${spacerXs.var}`,
    width: '100%',
    border: 'none',
    fontSize: fontSizeXs.var
  }
});

import { StyleSheet } from '@patternfly/react-styles';
import {
  global_spacer_sm as spacerSm,
  global_spacer_xs as spacerXs,
  global_spacer_xl as spacerXl,
  global_Color_dark_100 as itemColor,
  global_BackgroundColor_300 as bgColorHover
} from '@patternfly/react-tokens';

export default StyleSheet.create({
  navigationItem: {
    padding: `${spacerSm.var} ${spacerXs.var} ${spacerSm.var} ${spacerXl.var}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover,:focus': {
      backgroundColor: bgColorHover.var,
      textDecoration: 'none'
    }
  },
  active: {
    backgroundColor: bgColorHover.var
  }
});

display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover,:focus': {
      backgroundColor: bgColorHover.var,
      textDecoration: 'none'
    }
  },
  collapsedNavItem: {
    padding: `${spacerXs.var} 0`
  },
  secondaryList: {
    paddingBottom: spacerXs.var
  },
  navigationItemSecondary: {
    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacer3Xl.var}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover': {
      backgroundColor: bgColorHover2.var,
      textDecoration: 'none'
    },
    fontSize: fontSizeXs.var
  },
  active: {
    backgroundColor: bgColorHover.var
  },
  pkgLabel: `
    background-color: ${bgColorHover.var};
    float: right;
    margin-top: -25px;

export default StyleSheet.create({
  navigationItem: {
    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacerXl.var}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover,:focus': {
      backgroundColor: bgColorHover.var,
      textDecoration: 'none'
    }
  },
  collapsedNavItem: {
    padding: `${spacerXs.var} 0`
  },
  secondaryList: {
    paddingBottom: spacerXs.var
  },
  navigationItemSecondary: {
    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacer3Xl.var}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover': {
      backgroundColor: bgColorHover2.var,
      textDecoration: 'none'
    },
    fontSize: fontSizeXs.var
  },
  active: {
    backgroundColor: bgColorHover.var
  },
  pkgLabel: `

global_BorderRadius_lg as borderRadiusLg
} from '@patternfly/react-tokens';

export default StyleSheet.create({
  navigationItem: {
    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacerXl.var}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover,:focus': {
      backgroundColor: bgColorHover.var,
      textDecoration: 'none'
    }
  },
  collapsedNavItem: {
    padding: `${spacerXs.var} 0`
  },
  secondaryList: {
    paddingBottom: spacerXs.var
  },
  navigationItemSecondary: {
    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacer3Xl.var}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover': {
      backgroundColor: bgColorHover2.var,
      textDecoration: 'none'
    },
    fontSize: fontSizeXs.var
  },
  active: {

import { StyleSheet } from '@patternfly/react-styles';
import {
  global_spacer_xs as spacerXs,
  global_spacer_sm as spacerSm,
  global_spacer_xl as spacerXl,
  global_spacer_3xl as spacer3Xl,
  global_Color_dark_100 as itemColor,
  global_BackgroundColor_300 as bgColorHover,
  global_BackgroundColor_200 as bgColorHover2,
  global_FontSize_xs as fontSizeXs,
  global_BorderRadius_lg as borderRadiusLg
} from '@patternfly/react-tokens';

export default StyleSheet.create({
  navigationItem: {
    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacerXl.var}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover,:focus': {
      backgroundColor: bgColorHover.var,
      textDecoration: 'none'
    }
  },
  collapsedNavItem: {
    padding: `${spacerXs.var} 0`
  },
  secondaryList: {
    paddingBottom: spacerXs.var
  },
  navigationItemSecondary: {
    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacer3Xl.var}`,