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

product: css({
    border: '1px solid',
    borderColor: tokens.colorElementLight,
    borderRadius: '3px',
    display: 'flex',
    flexDirection: 'column',
    height: '40px',
    width: '40px',
    outline: 0,
    textAlign: 'center',
    transition: `all ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,
    position: 'relative',
    transform: 'translateZ(0)', // Force hardware acceleration for transitions
    willChange: 'box-shadow, border-color',
    '&:hover': {
      borderColor: tokens.colorElementDarkest,
      cursor: 'pointer',
      '> span > div': {
        opacity: 1
      }
    }
  }),
  previewImg: (imageHasLoaded: boolean) =>
    css({
      display: imageHasLoaded ? 'block' : 'none',
      margin: '0 auto',
      minWidth: 'auto',
      height: '40px'
    }),
  removeIcon: css({
    backgroundColor: 'rgba(0,0,0,.65)',
    borderRadius: '50%',

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'
  })
};