How to use the @patternfly/react-tokens.global_breakpoint_md.value function in @patternfly/react-tokens

constructor(props) {
    super(props);
    // Set initial isNavOpen state based on window width
    const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
    this.state = {
      isDropdownOpen: false,
      isKebabDropdownOpen: false,
      activeItem: 0,
      isNavOpen
    };
  }

[BackgroundImageSrc.xs]: backgroundImageXs,
  [BackgroundImageSrc.xs2x]: backgroundImageXs2x,
  [BackgroundImageSrc.filter]: `${backgroundFilterImage}#image_overlay`,
};

type Props = RouteComponentProps;

interface State {
  isNavOpen: boolean;
}

class AppLayout extends Component {
  state = {
    // workaround issue: https://github.com/patternfly/patternfly-react/issues/913
    isNavOpen:
      typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10),
  };

  render() {
    const { history } = this.props;
    const { isNavOpen } = this.state;
    const header = (
      
        }
        logoProps={{
          href: '/',
          onClick: (e) => {
            history.push('/');

constructor(props) {
    super(props);

    // initialize with a closed navbar if window size is small
    const isNavOpen =
      typeof window !== 'undefined' &&
      window.innerWidth >= parseInt(global_breakpoint_md.value, 10);

    this.state = {
      ansible_version: null,
      custom_virtualenvs: null,
      me: null,
      version: null,
      isAboutModalOpen: false,
      isNavOpen,
      configError: null,
    };

    this.handleLogout = this.handleLogout.bind(this);
    this.handleAboutClose = this.handleAboutClose.bind(this);
    this.handleAboutOpen = this.handleAboutOpen.bind(this);
    this.handleNavToggle = this.handleNavToggle.bind(this);
    this.handleConfigErrorClose = this.handleConfigErrorClose.bind(this);

md_top: global_BoxShadow_md_top && global_BoxShadow_md_top.var,
    lg: global_BoxShadow_lg && global_BoxShadow_lg.var,
    lg_left: global_BoxShadow_lg_left && global_BoxShadow_lg_left.var,
    lg_right: global_BoxShadow_lg_right && global_BoxShadow_lg_right.var,
    lg_bottom: global_BoxShadow_lg_bottom && global_BoxShadow_lg_bottom.var,
    lg_top: global_BoxShadow_lg_top && global_BoxShadow_lg_top.var,
    inset: global_BoxShadow_inset && global_BoxShadow_inset.var
  }
};

export const StyledTheme = {
  // Array of viewport widths to use for min-width media queries
  // Need to use values here as it won't work otherwise. Can still be overridden by defining own theme with breakpoints.
  breakpoints: [
    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,

constructor(props) {
    super(props);
    // Set initial isNavOpen state based on window width
    const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
    this.state = {
      isDropdownOpen: false,
      isKebabDropdownOpen: false,
      isNavOpen,
      activeGroup: 'grp-1',
      activeItem: 'grp-1_itm-1'
    };
  }

handleResize = () => {
    const { onPageResize } = this.props;
    const windowSize = window.innerWidth;
    const mobileView = windowSize < Number.parseInt(globalBreakpointMd.value, 10);
    if (onPageResize) {
      onPageResize({ mobileView, windowSize });
    }
    this.setState(prevState => ({
      mobileView
    }));
  };

export const globalBreakpoints = (breakpoint: string) => {
  const breakpoints: { [key: string]: number } = {
    md: parseInt(globalBreakpointMd.value),
    lg: parseInt(globalBreakpointLg.value),
    xl: parseInt(globalBreakpointXl.value),
    '2xl': parseInt(globalBreakpoint2xl.value)
  };
  return breakpoints[breakpoint];
};