How to use the @contentful/forma-36-tokens.colorElementMid function in @contentful/forma-36-tokens

minHeight: '65vh',
    margin: '0 auto',
    marginTop: tokens.spacingXl,
    padding: `${tokens.spacingXl} ${tokens.spacing2Xl}`,
    maxWidth: tokens.contentWidthText,
    backgroundColor: tokens.colorWhite,
    zIndex: '2',
    boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
    borderRadius: '2px'
  }),
  splitter: css({
    marginTop: tokens.spacingL,
    marginBottom: tokens.spacingL,
    border: 0,
    height: '1px',
    backgroundColor: tokens.colorElementMid
  }),
  background: css({
    display: 'block',
    position: 'absolute',
    zIndex: '-1',
    top: '0',
    width: '100%',
    height: '300px',
    backgroundColor: '#452475',
    backgroundImage:
      'linear-gradient(45deg,#542c85 25%,transparent 25%,transparent 50%,#542c85 50%,#542c85 75%,transparent 75%,transparent)'
  }),
  input: css({
    marginTop: tokens.spacingM
  }),
  icon: css({

position: 'absolute',
      zIndex: -1,
      top: 0,
      width: '100%',
      height: '300px',
      backgroundColor: color
    }),
  section: css({
    margin: `${tokens.spacingXl} 0`
  }),
  splitter: css({
    marginTop: tokens.spacingL,
    marginBottom: tokens.spacingL,
    border: 0,
    height: '1px',
    backgroundColor: tokens.colorElementMid
  }),
  icon: css({
    display: 'flex',
    justifyContent: 'center',
    '> img': {
      display: 'block',
      width: '70px',
      margin: `${tokens.spacingXl} 0`
    }
  })
};

export default class AppConfig extends React.Component {
  state = {
    contentTypes: [] as ContentType[],
    compatibleFields: ({} as any) as CompatibleFields,

import { css } from 'emotion';
import tokens from '@contentful/forma-36-tokens';

export const styles = {
  splitter: css({
    marginTop: tokens.spacingL,
    marginBottom: tokens.spacingL,
    border: 0,
    height: '1px',
    backgroundColor: tokens.colorElementMid
  })
};

import { css } from 'emotion';
import tokens from '@contentful/forma-36-tokens';
import hexRgb from 'hex-rgb';

const { red, green, blue } = hexRgb(tokens.colorElementMid);

export const BORDER_SIZE = 2;

export const styles = {
  focalPoint: css({
    backgroundColor: `rgba(${red}, ${green}, ${blue}, 0.5)`,
    borderRadius: '50%',
    border: `${BORDER_SIZE}px solid ${tokens.colorElementDarkest}`,
    opacity: 1,
    transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingCubicBezier}`,
    position: 'absolute',
    pointerEvents: 'none'
  })
};

padding: '12px 80px',
    outline: 'none',
    borderRadius: '6px',
    border: '1px solid #e9ebeb',
    borderBottom: '1px solid #e1e2e4',
    boxShadow: '0 2px 4px 0 rgba(14,30,37,.12)',
    cursor: 'pointer',
    fontSize: '16px',
    boxSizing: 'border-box'
  }),
  splitter: css({
    marginTop: tokens.spacingL,
    marginBottom: tokens.spacingL,
    border: 0,
    height: '1px',
    backgroundColor: tokens.colorElementMid
  }),
  connectAgain: css({
    marginTop: tokens.spacingXs,
    textAlign: 'center',
    color: tokens.colorTextLight
  }),
  connectAgainIcon: css({
    fill: tokens.colorTextLight,
    marginRight: tokens.spacingXs,
    verticalAlign: 'middle'
  })
};

export default class NetlifyConnection extends React.Component {
  static propTypes = {
    connected: PropTypes.bool.isRequired,

row: css({
    display: 'flex',
    margin: `${tokens.spacingXl} 0`
  }),
  item: css({
    marginRight: tokens.spacingXl
  }),
  removeBtn: css({
    marginTop: tokens.spacingL
  }),
  splitter: css({
    marginTop: tokens.spacingL,
    marginBottom: tokens.spacingL,
    border: 0,
    height: '1px',
    backgroundColor: tokens.colorElementMid
  })
};

export default class NetlifyConfigEditor extends React.Component {
  static propTypes = {
    disabled: PropTypes.bool.isRequired,
    siteConfigs: PropTypes.array.isRequired,
    netlifySites: PropTypes.array.isRequired,
    onSiteConfigsChange: PropTypes.func.isRequired
  };

  onNetlifySiteChange = (configIndex, netlifySiteId) => {
    const { netlifySites, siteConfigs, onSiteConfigsChange } = this.props;
    const site = netlifySites.find(site => site.id === netlifySiteId) || {};

    const updated = siteConfigs.map((siteConfig, i) => {

height: '300px',
    backgroundColor: 'rgb(23,64,121)',
    background: 'linear-gradient(90deg, rgba(23,64,121,1) 0%, rgba(27,158,156,1) 100%)'
  }),
  section: css({
    margin: `${tokens.spacingXl} 0`
  }),
  input: css({
    marginTop: tokens.spacingM
  }),
  splitter: css({
    marginTop: tokens.spacingL,
    marginBottom: tokens.spacingL,
    border: 0,
    height: '1px',
    backgroundColor: tokens.colorElementMid
  }),
  icon: css({
    display: 'flex',
    justifyContent: 'center',
    marginTop: tokens.spacingXl,
    marginBottom: tokens.spacingXl
  }),
  checks: css({
    marginTop: tokens.spacingM,
    display: 'flex'
  }),
  pills: css({
    margin: `0 ${tokens.spacingXs}`
  }),
  relative: css({
    position: 'relative'