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

import React from 'react';
import Content from '../components/content';
import { Title } from '@patternfly/react-core';
import { StyleSheet, css } from '@patternfly/react-styles';
import packageJson from '../../../react-core/package.json';
import {
  global_Color_dark_100 as heroBackgrounColor,
  global_Color_light_100 as heroTextColor
} from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  hero: {
    height: '100vh',
    backgroundColor: heroBackgrounColor.var,
    display: 'flex',
    alignItems: 'center'
  },
  heroText: {
    color: heroTextColor.var
  }
});

const IndexPage = () => (
  <div>
    <div>
      <content>
        <title size="4xl">
          PatternFly React
        </title>
        <title size="md"></title></content></div></div>

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

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}`,
    display: 'block',
    color: itemColor.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,
    active_200: global_active_color_200 && global_active_color_200.var,
    active_300: global_active_color_300 && global_active_color_300.var,
    disabled_100: global_disabled_color_100 && global_disabled_color_100.var,
    disabled_200: global_disabled_color_200 && global_disabled_color_200.var,
    primary_100: global_primary_color_100 && global_primary_color_100.var,
    primary_200: global_primary_color_200 && global_primary_color_200.var,
    primary_light_100: global_primary_color_light_100 && global_primary_color_light_100.var,
    primary_dark_100: global_primary_color_dark_100 && global_primary_color_dark_100.var,
    secondary_100: global_secondary_color_100 && global_secondary_color_100.var,
    success_100: global_success_color_100 && global_success_color_100.var,
    success_200: global_success_color_200 && global_success_color_200.var,
    info_100: global_info_color_100 && global_info_color_100.var,
    info_200: global_info_color_200 && global_info_color_200.var,
    warning_100: global_warning_color_100 && global_warning_color_100.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;
    margin-right: 10px;
    font-size: ${fontSizeXs.var};