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

normal: global_FontWeight_normal && global_FontWeight_normal.var,
    semi_bold: global_FontWeight_semi_bold && global_FontWeight_semi_bold.var,
    bold: global_FontWeight_bold && global_FontWeight_bold.var,
    link: global_link_FontWeight && global_link_FontWeight.var
  },

  // Array or Object: Values for lineHeight prop
  lineHeights: {
    sm: global_LineHeight_sm && global_LineHeight_sm.var,
    md: global_LineHeight_md && global_LineHeight_md.var
  },

  // Array or Object: Values for border props
  borders: {
    sm: global_BorderWidth_sm && `${global_BorderWidth_sm.var} solid`,
    md: global_BorderWidth_md && `${global_BorderWidth_md.var} solid`,
    lg: global_BorderWidth_lg && `${global_BorderWidth_lg.var} solid`
  },

  // Array or Object: Values for boxShadow prop
  shadows: {
    sm: global_BoxShadow_sm && global_BoxShadow_sm.var,
    sm_left: global_BoxShadow_sm_left && global_BoxShadow_sm_left.var,
    sm_right: global_BoxShadow_sm_right && global_BoxShadow_sm_right.var,
    sm_bottom: global_BoxShadow_sm_bottom && global_BoxShadow_sm_bottom.var,
    sm_top: global_BoxShadow_sm_top && global_BoxShadow_sm_top.var,
    md: global_BoxShadow_md && global_BoxShadow_md.var,
    md_left: global_BoxShadow_md_left && global_BoxShadow_md_left.var,
    md_right: global_BoxShadow_md_right && global_BoxShadow_md_right.var,
    md_bottom: global_BoxShadow_md_bottom && global_BoxShadow_md_bottom.var,
    md_top: global_BoxShadow_md_top && global_BoxShadow_md_top.var,
    lg: global_BoxShadow_lg && global_BoxShadow_lg.var,

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 { 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 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 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 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-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 {
  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 StyledSplitItem = props => ;

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