How to use the bpk-tokens/tokens/base.common.colorGray700 function in bpk-tokens

import React, { PropTypes } from 'react';
import TOKENS from 'bpk-tokens/tokens/base.common';
import InlineLogo from 'bpk-svgs/dist/js/logos/inline';

const BpkInlineLogo = props => ;

BpkInlineLogo.propTypes = {
  fill: PropTypes.string,
  height: PropTypes.string,
};

BpkInlineLogo.defaultProps = {
  fill: TOKENS.colorGray700,
  height: TOKENS.spacingXxl,
};

export default BpkInlineLogo;

}

BpkLogo.propTypes = {
  logo: PropTypes.oneOf([
    'inline',
    'stacked',
    'cloud',
    'tianxun',
    'tianxun-stacked'
  ]).isRequired,
  color: PropTypes.string,
  height: PropTypes.string
}

BpkLogo.defaultProps = {
  color: TOKENS.colorGray700,
  height: null
}

export default BpkLogo

import React, { PropTypes } from 'react';
import TOKENS from 'bpk-tokens/tokens/base.common';
import StackedLogo from 'bpk-svgs/dist/js/logos/stacked';

const BpkStackedLogo = props => ;

BpkStackedLogo.propTypes = {
  fill: PropTypes.string,
  height: PropTypes.string,
};

BpkStackedLogo.defaultProps = {
  fill: TOKENS.colorGray700,
  height: TOKENS.spacingXxl,
};

export default BpkStackedLogo;

const classNames = [ props.large ? 'bpk-icon-lg' : 'bpk-icon-sm' ]

  props.alignToButton ? classNames.push(props.large ? 'bpk-icon-lg--align-to-button' : 'bpk-icon-sm--align-to-button') : null

  return <span>
}

BpkIcon.propTypes = {
  icon: PropTypes.string.isRequired,
  large: PropTypes.bool,
  color: PropTypes.string,
  alignToButton: PropTypes.bool
}

BpkIcon.defaultProps = {
  color: TOKENS.colorGray700,
  alignToButton: false
}

export default BpkIcon
</span>

import React, { PropTypes } from 'react';
import TOKENS from 'bpk-tokens/tokens/base.common';
import TianxunLogo from 'bpk-svgs/dist/js/logos/tianxun';

const BpkTianxunLogo = props => ;

BpkTianxunLogo.propTypes = {
  fill: PropTypes.string,
  height: PropTypes.string,
};

BpkTianxunLogo.defaultProps = {
  fill: TOKENS.colorGray700,
  height: TOKENS.spacingXxl,
};

export default BpkTianxunLogo;

import React, { PropTypes } from 'react';
import TOKENS from 'bpk-tokens/tokens/base.common';
import TianxunStackedLogo from 'bpk-svgs/dist/js/logos/tianxun-stacked';

const BpkTianxunStackedLogo = props => ;

BpkTianxunStackedLogo.propTypes = {
  fill: PropTypes.string,
  height: PropTypes.string,
};

BpkTianxunStackedLogo.defaultProps = {
  fill: TOKENS.colorGray700,
  height: '78',
};

export default BpkTianxunStackedLogo;