How to use bpk-tokens - 10 common examples

*/}
          {inView && (
            <img hidden="{loading}">
          )}
          {loading &amp;&amp; (
            
              <div>
                
              </div>
            
          )}
          {typeof window === 'undefined' &amp;&amp; (!inView || loading) &amp;&amp; (
            
          )}

import svg2react from './tasks/svg2react';
import svg2datauri, { sassMap, svg2sassvar } from './tasks/svg2datauri';
import getIconFontMetadataProvider from './tasks/getIconFontMetadataProvider';
import metadata from './tasks/metadata';

const remToPx = value => {
  let parsed = null;

  if (/rem$/.test(value)) {
    parsed = parseFloat(value.replace(/rem/, '')) * 16;
  }

  return parsed || null;
};

const smallIconSize = tokens.props.ICON_SIZE_SM.value;
const smallIconPxSize = remToPx(smallIconSize);
const largeIconSize = tokens.props.ICON_SIZE_LG.value;
const largeIconPxSize = remToPx(largeIconSize);

const colors = _(tokens.props)
  .filter({ category: 'colors', type: 'color' })
  .keyBy('name')
  .mapValues('value')
  .mapKeys((value, key) => _.kebabCase(key).replace('color-', ''))
  .mapValues(value => tinycolor(value).toHexString())
  .value();

const svgoCommonPlugins = [
  { removeTitle: true },
  { removeStyleElement: true },
  { removeEmptyContainers: true },

import getIconFontMetadataProvider from './tasks/getIconFontMetadataProvider';
import metadata from './tasks/metadata';

const remToPx = value => {
  let parsed = null;

  if (/rem$/.test(value)) {
    parsed = parseFloat(value.replace(/rem/, '')) * 16;
  }

  return parsed || null;
};

const smallIconSize = tokens.props.ICON_SIZE_SM.value;
const smallIconPxSize = remToPx(smallIconSize);
const largeIconSize = tokens.props.ICON_SIZE_LG.value;
const largeIconPxSize = remToPx(largeIconSize);

const colors = _(tokens.props)
  .filter({ category: 'colors', type: 'color' })
  .keyBy('name')
  .mapValues('value')
  .mapKeys((value, key) => _.kebabCase(key).replace('color-', ''))
  .mapValues(value => tinycolor(value).toHexString())
  .value();

const svgoCommonPlugins = [
  { removeTitle: true },
  { removeStyleElement: true },
  { removeEmptyContainers: true },
  { sortAttrs: true },
  { removeUselessDefs: true },

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;

: tintColor || colorWhite;
  const iconStyle = [styles.icon, { color: tintColorFinal }];
  const accessibilityTraits = ['button'];

  if (disabled) {
    accessibilityTraits.push('disabled');
  }

  return (
    
  );
};