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

export interface Props {
  product: Product;
  selectProduct: (sku: string) => void;
}

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',

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,
    hasConfig: PropTypes.bool.isRequired,
    email: PropTypes.string,
    netlifyCounts: PropTypes.shape({

marginBottom: tokens.spacingXl,
    '& > img': css({
      width: '80px'
    })
  }),
  paragraph: css({
    marginTop: tokens.spacingM
  }),
  heading: css({
    marginBottom: tokens.spacingM
  }),
  input: css({
    marginTop: tokens.spacingM
  }),
  list: css({
    marginTop: tokens.spacingXs
  })
};

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

export const styles = {
  container: css({
    display: 'flex',
    alignItems: 'flex-start'
  }),
  input: css({
    maxWidth: '280px'
  }),
  button: css({
    marginLeft: tokens.spacingXs
  })
};

import { Tooltip, Icon } from '@contentful/forma-36-react-components';
import { css } from 'emotion';
import { Product } from '../../interfaces';

export interface Props {
  product: Product;
  selectProduct: (sku: string) => void;
}

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}`,

margin: '0 auto',
      maxWidth: '100%',
      maxHeight: '100%',
      outline: 0
    }
  }),
  focalPointDemo: css({
    display: 'flex',
    flexDirection: 'column',
    marginLeft: tokens.spacing2Xl
  }),
  displayFlex: css({
    display: 'flex'
  }),
  spacingLeftXs: css({
    marginLeft: tokens.spacingXs
  }),
  previewHeading: css({
    marginTop: tokens.spacingM
  }),
  subheading: css({
    marginBottom: tokens.spacingXs
  })
};

backgroundImage:
      'linear-gradient(45deg,#542c85 25%,transparent 25%,transparent 50%,#542c85 50%,#542c85 75%,transparent 75%,transparent)'
  }),
  input: css({
    marginTop: tokens.spacingM
  }),
  icon: css({
    display: 'flex',
    justifyContent: 'center',
    margin: `${tokens.spacingXl} 0`
  }),
  checks: css({
    marginTop: tokens.spacingM
  }),
  pills: css({
    margin: `0 ${tokens.spacingXs}`
  })
};

focalPointDemo: css({
    display: 'flex',
    flexDirection: 'column',
    marginLeft: tokens.spacing2Xl
  }),
  displayFlex: css({
    display: 'flex'
  }),
  spacingLeftXs: css({
    marginLeft: tokens.spacingXs
  }),
  previewHeading: css({
    marginTop: tokens.spacingM
  }),
  subheading: css({
    marginBottom: tokens.spacingXs
  })
};

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

export const styles = {
  device: css({
    marginTop: tokens.spacingXs
  })
};

marginTop: tokens.spacingXl
  }),
  variationTitle: css({
    small: {
      color: tokens.colorTextLight,
      fontWeight: tokens.fontWeightNormal,
      marginLeft: tokens.spacingXs,
      fontSize: tokens.fontSizeL
    }
  }),
  variationDescription: css({
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    color: tokens.colorTextLight,
    marginTop: tokens.spacingXs
  }),
  entryCard: css({
    marginTop: tokens.spacingM
  }),
  missingNote: css({
    marginTop: tokens.spacingM
  })
};

function getPercentOfTraffic(variation) {
  return Math.floor(variation.weight) / 100;
}

function useEntryCard(id) {
  const sdk = useContext(SDKContext);
  const [state, actions] = useContext(GlobalStateContext);