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

import PropTypes from 'prop-types';
import { Grid, GridItem } from '@patternfly/react-core';
import { StyleSheet, css } from '@patternfly/react-styles';
import {
  global_BorderColor as borderColor,
  global_BorderWidth_md as borderWidth,
  global_spacer_sm as padding
} from '@patternfly/react-tokens';
import Example from '../../components/example';
import GridPlayground from '../../components/gridPlayground';

const styles = StyleSheet.create({
  item: {
    minHeight: 75,
    padding: padding.var,
    border: `${borderWidth.var} dashed ${borderColor.var}`
  }
});

const StyledGridItem = props => ;

const propTypes = {
  data: PropTypes.any.isRequired
};

const GridDocs = ({ data }) => {
  const galleryItems = (
    
      span = 8
      
        span = 4, rowSpan = 2

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  demoLayout: {
    '& .pf-l-split > .pf-l-split__item': {
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const bullseyeClass = '.pf-l-bullseye';

const styles = StyleSheet.create({
  demoLayout: {
    [`& ${bullseyeClass}`]: {
      height: 250,
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    },
    [`& ${bullseyeClass} > div`]: {
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const gridClass = '.pf-l-grid';
const gridItemClass = '.pf-l-grid__item';

const styles = StyleSheet.create({
  demoLayout: {
    [`& ${gridClass} > ${gridItemClass}`]: {
      minHeight: 75,
      padding: '1rem',
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  demoLayout: {
    '& .pf-l-page > *': {
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    },
    '& .pf-l-page__header > *': {
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  demoLayout: {
    '& .pf-l-stack > .pf-l-stack__item': {
      minHeight: 35,
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    },
    '&': {
      height: 250
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  demoLayout: {
    '& .pf-l-gallery > div': {
      height: 100,
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  demoLayout: {
    '& .pf-l-level > div': {
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import {
  global_BorderColor as borderColor,
  global_BorderWidth_md as borderWidth,
  global_spacer_sm as padding
} from '@patternfly/react-tokens';
import { css, StyleSheet } from '@patternfly/react-styles';
import Example from '../../components/example';

const propTypes = {
  data: PropTypes.any.isRequired
};

const styles = StyleSheet.create({
  item: {
    padding: padding.var,
    border: `${borderWidth.var} dashed ${borderColor.var}`
  }
});

const StyledStackItem = props => ;

const StackDocs = ({ data }) => (
  
    
      
        Secondary content
        Main Content
        Secondary content

const LevelDocs = ({ data }) => {
  const levelStyle = {
    border: `${borderWidth.var} dashed ${borderColor.var}`
  };

  const levelItems = (
    
      Level Item
      Level Item
    
  );

  return (
    
      
        {levelItems}