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

// 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,
    global_spacer_2xl && global_spacer_2xl.value,
    global_spacer_3xl && global_spacer_3xl.value
  ],

  // Color names that can be used in color, bg, and borderColor props
  colors: {
    bg_100: global_BackgroundColor_100 && global_BackgroundColor_100.var,
    bg_200: global_BackgroundColor_200 && global_BackgroundColor_200.var,
    bg_300: global_BackgroundColor_300 && global_BackgroundColor_300.var,
    bg_light_100: global_BackgroundColor_light_100 && global_BackgroundColor_light_100.var,
    bg_light_200: global_BackgroundColor_light_200 && global_BackgroundColor_light_200.var,
    bg_light_300: global_BackgroundColor_light_300 && global_BackgroundColor_light_300.var,
    bg_dark_100: global_BackgroundColor_dark_100 && global_BackgroundColor_dark_100.var,
    bg_dark_200: global_BackgroundColor_dark_200 && global_BackgroundColor_dark_200.var,
    bg_dark_transparent_100:
      global_BackgroundColor_dark_transparent_100 && global_BackgroundColor_dark_transparent_100.var,
    bg_dark_transparent_200:
      global_BackgroundColor_dark_transparent_200 && global_BackgroundColor_dark_transparent_200.var,
    color_100: global_Color_100 && global_Color_100.var,
    color_200: global_Color_200 && global_Color_200.var,
    light_100: global_Color_light_100 && global_Color_light_100.var,
    light_200: global_Color_light_200 && global_Color_light_200.var,
    dark_100: global_Color_dark_100 && global_Color_dark_100.var,
    dark_200: global_Color_dark_200 && global_Color_dark_200.var,
    active_100: global_active_color_100 && global_active_color_100.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;
    margin-right: 10px;
    font-size: ${fontSizeXs.var};
    padding: 0 ${spacerSm.var};
    border-radius: ${borderRadiusLg.var};
  `
});

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;
    margin-right: 10px;
    font-size: ${fontSizeXs.var};
    padding: 0 ${spacerSm.var};
    border-radius: ${borderRadiusLg.var};
  `
});

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}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover': {
      backgroundColor: bgColorHover2.var,

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

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