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

import { StyleSheet } from '@patternfly/react-styles';
import { global_spacer_md as spacerMd, global_FontSize_sm as fontSizeSm } from '@patternfly/react-tokens';

export default StyleSheet.create({
  title: {
    fontSize: fontSizeSm.var,
    padding: spacerMd.var,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  }
});

width: sidebarWidth.value
  },
  navigationContent: {
    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_md as spacerMd,
  global_BorderWidth_sm as borderWidth,
  global_BorderColor_dark as borderColor
} from '@patternfly/react-tokens';

export default StyleSheet.create({
  example: {
    padding: spacerMd.var,
    border: `${borderWidth.var} solid ${borderColor.var}`
  }
});

export default ({ location }) => {
  const allIcons = Object.entries(IconsModule)
    .filter(([name]) => name.endsWith('Icon'))
    .sort(([name1], [name2]) => name1.localeCompare(name2));

  const cellStyle = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: spacerMd.var
  };

  const labelStyle = {
    textAlign: 'center',
    fontSize: labelFontSize.var
  };

  const getLabel = label => {
    let res = '';
    label = label.replace(/[iI]con/g, '');
    for (let i = 0; i < label.length; i++) {
      if (label.charAt(i) === label.charAt(i).toUpperCase()) {
        res += ' ';
      }
      res += label.charAt(i);
    }

import { StyleSheet } from '@patternfly/react-styles';
import { global_spacer_md as spacerMd, global_FontSize_sm as fontSizeSm } from '@patternfly/react-tokens';

export default StyleSheet.create({
  title: {
    fontSize: fontSizeSm.var,
    padding: spacerMd.var
  }
});

};

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>

    {children}
  </div>
);

import React from 'react';
import Content from '../../components/content';
import { Title, Grid, GridItem } from '@patternfly/react-core';
import * as icons from '@patternfly/react-icons';
import { css, StyleSheet } from '@patternfly/react-styles';
import { global_spacer_md as spacerMd, global_FontSize_sm as labelFontSize } from '@patternfly/react-tokens';

const allIcons = Object.entries(icons).filter(([name]) => name.endsWith('Icon'));

const styles = StyleSheet.create({
  iconCell: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: spacerMd.var
  },
  label: {
    textAlign: 'center',
    fontSize: labelFontSize.var
  }
});

function Icons() {
  return (
    <content>
      <title size="3xl">Icons</title>
      
        {allIcons.map(([id, Icon]) =&gt; (
          
            
            <div>{id}</div></content>

export default StyleSheet.create({
  navigation: {
    width: sidebarWidth.value
  },
  navigationContent: {
    position: 'fixed',
    width: 'inherit',
    height: '100vh',
    overflowY: 'scroll',
    backgroundColor: navBackgroundColor.var
  },
  logo: {
    textAlign: 'center',
    margin: `${spacerMd.var} 0`,
    padding: `0 ${spacerMd.var}`
  },
  search: `
    &.pf-c-form {
      margin: ${spacerMd.var} 0;
      padding: 0 ${spacerMd.var};
    }
    .pf-c-form__label {
      --pf-c-form__label--FontSize: ${fontSizeLg.var};
    }
  `,
  collapseExpandButtons: `
    text-align: right;
  `,
  collapseExpandButton: `
    padding-right: 5px;
  `,

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