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

global_breakpoint_sm && global_breakpoint_sm.value, // min-width 576px
    global_breakpoint_md && global_breakpoint_md.value, // min-width 768px
    global_breakpoint_lg && global_breakpoint_lg.value, // min-width 992px
    global_breakpoint_xl && global_breakpoint_xl.value // min-width 1200px
  ],

  // Array or Object: Values for borderRadius props
  radii: {
    sm: global_BorderRadius_sm && global_BorderRadius_sm.var,
    lg: global_BorderRadius_lg && global_BorderRadius_lg.var
  },

  // 	Array of numbers to use as a typographic scale
  fontSizes: [
    global_FontSize_xs && global_FontSize_xs.var,
    global_FontSize_sm && global_FontSize_sm.var,
    global_FontSize_md && global_FontSize_md.var,
    global_FontSize_lg && global_FontSize_lg.var,
    global_FontSize_xl && global_FontSize_xl.var,
    global_FontSize_2xl && global_FontSize_2xl.var,
    global_FontSize_3xl && global_FontSize_3xl.var,
    global_FontSize_4xl && global_FontSize_4xl.var
  ],

  // Array of numbers for use as margin and pixel values
  // TODO: See if we can use .var instead of .value
  space: [
    global_spacer_xs && global_spacer_xs.value,
    global_spacer_sm && global_spacer_sm.value,
    global_spacer_md && global_spacer_md.value,
    global_spacer_lg && global_spacer_lg.value,
    global_spacer_xl && global_spacer_xl.value,

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

import { StyleSheet } from '@patternfly/react-styles';
import {
  global_FontSize_sm as fontSizeSm,
  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'
  },

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>

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

import { css, StyleSheet } from '@patternfly/react-styles';
import { global_spacer_md as spacerMd, global_FontSize_sm as labelFontSize } from '@patternfly/react-tokens';
import DocsLayout from '../../components/layouts';

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="4xl">Icons</title>
        
          {allIcons.map(([id, Icon]) =&gt; (
            
              
              <div>{id}</div>
            
          ))}
        </content>

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

    return res;
  };

  return (