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

global_spacer_sm as spacerSm,
  global_spacer_md as spacerMd,
  global_BorderWidth_sm as borderWidth,
  global_BorderColor_light as borderColor
} from '@patternfly/react-tokens';

export default StyleSheet.create({
  table: {
    width: '100%',
    fontSize: fontSizeSm.var
  },
  row: {
    borderBottom: `${borderWidth.var} solid ${borderColor.var}`
  },
  cell: {
    padding: `${spacerSm.var} ${spacerMd.var}`
  },
  enumValues: {
    whiteSpace: 'pre'
  },
  leftAlign: {
    textAlign: 'left'
  },
  centerAlign: {
    textAlign: 'center'
  },
  rightAlign: {
    textAlign: 'right'
  }
});

':hover': {
      backgroundColor: bgColorHover2.var,
      textDecoration: 'none'
    },
    fontSize: fontSizeXs.var
  },
  active: {
    backgroundColor: bgColorHover.var
  },
  pkgLabel: `
    background-color: ${bgColorHover.var};
    float: right;
    margin-top: -25px;
    margin-right: 10px;
    font-size: ${fontSizeXs.var};
    padding: 0 ${spacerSm.var};
    border-radius: ${borderRadiusLg.var};
  `
});

import {
  global_spacer_lg as spacerLg,
  global_spacer_md as spacerMd,
  global_spacer_sm as spacerSm
} from '@patternfly/react-tokens';

export default StyleSheet.create({
  section: {
    marginBottom: spacerLg.var
  },
  header: {
    marginBottom: spacerMd.var
  },
  preface: {
    marginTop: spacerSm.var,
    marginBottom: spacerSm.var
  }
});

import { Stack, StackItem, StackItemVariant } from '@patternfly/react-core';
import {
  global_BorderColor as borderColor,
  global_BorderWidth_md as borderWidth,
  global_spacer_sm as padding
} from '@patternfly/react-tokens';
import { css, StyleSheet } from '@patternfly/react-styles';
import Example from '../../components/example';

const propTypes = {
  data: PropTypes.any.isRequired
};

const styles = StyleSheet.create({
  item: {
    padding: padding.var,
    border: `${borderWidth.var} dashed ${borderColor.var}`
  }
});

const StyledStackItem = props => ;

const StackDocs = ({ data }) => (
  
    
      
        Secondary content
        Main Content
        Secondary content

import ComponentDocs from '../../components/componentDocs';
import PropTypes from 'prop-types';
import { Grid, GridItem } from '@patternfly/react-core';
import { StyleSheet, css } from '@patternfly/react-styles';
import {
  global_BorderColor as borderColor,
  global_BorderWidth_md as borderWidth,
  global_spacer_sm as padding
} from '@patternfly/react-tokens';
import Example from '../../components/example';
import GridPlayground from '../../components/gridPlayground';

const styles = StyleSheet.create({
  item: {
    minHeight: 75,
    padding: padding.var,
    border: `${borderWidth.var} dashed ${borderColor.var}`
  }
});

const StyledGridItem = props => ;

const propTypes = {
  data: PropTypes.any.isRequired
};

const GridDocs = ({ data }) => {
  const galleryItems = (
    
      span = 8
      
        span = 4, rowSpan = 2

import { Split, SplitItem } from '@patternfly/react-core';
import {
  global_BorderColor as borderColor,
  global_BorderWidth_md as borderWidth,
  global_spacer_sm as padding
} from '@patternfly/react-tokens';
import { css, StyleSheet } from '@patternfly/react-styles';
import Example from '../../components/example';

const propTypes = {
  data: PropTypes.any.isRequired
};

const styles = StyleSheet.create({
  item: {
    padding: padding.var,
    border: `${borderWidth.var} dashed ${borderColor.var}`
  }
});

const StyledSplitItem = props => ;

const SplitDocs = ({ data }) => (
  
    
      
        Secondary content
        Main Content
        Secondary content

title: PropTypes.string,
  /** Subtitle that contains the Text, URL, and URL Text for the LoginBox Header */
  subtitle: PropTypes.node
};

const defaultProps = {
  children: null,
  className: '',
  dropdown: null,
  title: '',
  subtitle: ''
};

const tokenStyles = StyleSheet.create({
  title: {
    marginBottom: global_spacer_sm.var
  },
  text: {
    marginLeft: global_spacer_md.var
  }
});

const LoginBoxHeader = ({ children, className, dropdown, title, subtitle, ...props }) => (
  <div>
    <title size="3xl">
      {title}
    </title>
    <div>
      {dropdown}
      {subtitle &amp;&amp; <p>{subtitle}</p>}
    </div>
</div>

import { StyleSheet } from '@patternfly/react-styles';
import {
  global_spacer_lg as spacerLg,
  global_spacer_md as spacerMd,
  global_spacer_sm as spacerSm
} from '@patternfly/react-tokens';

export default StyleSheet.create({
  section: {
    marginBottom: spacerLg.var
  },
  header: {
    marginBottom: spacerMd.var
  },
  preface: {
    marginTop: spacerSm.var,
    marginBottom: spacerSm.var
  }
});