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

export default function UploadView(props) {
  const imageUrl = props.imageUrl || `${props.base64Prefix},${props.base64Data}`;
  const isSVG = imageUrl.endsWith('.svg') || imageUrl.includes('svg+xml');

  const progressViewStyles = {
    backgroundColor: tokens.colorElementLight
  };

  // Pass upload progress as CSS variable so we can adjust the size of progress components
  const uploadProgress = {
    '--uploadProgress': `${props.uploadProgress}%`
  };

  return (
    <div>
      <main style="{progressViewStyles}">
        {isSVG ? (
          
        ) : (
          <img alt="image being uploaded" src="{imageUrl}">
        )}
        <aside style="{uploadProgress}"></aside></main></div>

const styles = {
  productWrapper: css({
    display: 'flex',
    position: 'relative',
    overflow: 'hidden',
    ':not(:first-of-type)': css({
      marginLeft: tokens.spacingXs
    }),
    '&:last-child': css({
      marginRight: tokens.spacingXs
    })
  }),
  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

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

export const MAX_PREVIEW_WRAPPER_SIZE = 350;

export const styles = {
  modalContent: css({
    display: 'flex'
  }),
  previewWrapper: css({
    backgroundColor: tokens.colorElementLight,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    position: 'relative',
    width: `${MAX_PREVIEW_WRAPPER_SIZE}px`,
    height: `${MAX_PREVIEW_WRAPPER_SIZE}px`
  }),
  previewImg: css({
    '&, & > img': {
      cursor: 'crosshair',
      display: 'block',
      margin: '0 auto',
      maxWidth: '100%',
      maxHeight: '100%',
      outline: 0
    }