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

Subheading,
  EntryCard,
  DropdownList,
  DropdownListItem,
  Note,
  TextLink
} from '@contentful/forma-36-react-components';
import tokens from '@contentful/forma-36-tokens';
import { SDKContext, GlobalStateContext } from './all-context';
import VariationSelect from './variation-select';
import VariationStats from './variations-stats';
import { getAdditionalEntryInformation } from './utils';

const styles = {
  variationContainer: css({
    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
  }),

Heading,
  Paragraph,
  Button,
  SelectField,
  Option,
  TextField,
  TextLink
} from '@contentful/forma-36-react-components';

import { MAX_CONFIGS } from '../constants';

const PICK_OPTION_VALUE = '__pick__';

const styles = {
  container: css({
    margin: `${tokens.spacingXl} 0`
  }),
  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',

Option,
  TextField,
  TextLink
} from '@contentful/forma-36-react-components';

import { MAX_CONFIGS } from '../constants';

const PICK_OPTION_VALUE = '__pick__';

const styles = {
  container: css({
    margin: `${tokens.spacingXl} 0`
  }),
  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
  })
};

marginRight: tokens.spacing2Xs,
    marginTop: '1px'
  }),
  header: css({
    display: 'flex',
    marginBottom: tokens.spacingS
  }),
  section: css({
    marginBottom: tokens.spacingXl
  }),
  row: css({
    display: 'flex',
    margin: `${tokens.spacingXl} 0`
  }),
  item: css({
    marginRight: tokens.spacingXl
  }),
  removeBtn: css({
    marginTop: tokens.spacingL
  })
};

import useMethods from 'use-methods';
import tokens from '@contentful/forma-36-tokens';
import { Note, Paragraph, Modal } from '@contentful/forma-36-react-components';
import StatusBar from './subcomponents/status-bar';
import ReferencesSection from './subcomponents/references-section';
import ExperimentSection from './subcomponents/experiment-section';
import VariationsSection from './subcomponents/variations-section';
import SectionSplitter from './subcomponents/section-splitter';
import { SDKContext, GlobalStateContext } from './subcomponents/all-context';
import prepareReferenceInfo, { COMBINED_LINK_VALIDATION_CONFLICT } from './reference-info';
import useInterval from '@use-it/interval';
import ConnectButton from '../ConnectButton';

const styles = {
  root: css({
    margin: tokens.spacingXl
  }),
  paragraph: css({
    marginBottom: tokens.spacingM
  }),
  link: css({
    cursor: 'pointer',
    textDecoration: 'underline'
  })
};

const methods = state => {
  return {
    setInitialData({ experiments, contentTypes, referenceInfo }) {
      state.experiments = experiments;
      state.contentTypes = contentTypes;
      state.referenceInfo = referenceInfo;

height: '300px',
    backgroundColor: '#bcc3ca'
  }),
  featuresListItem: css({
    listStyleType: 'disc',
    marginLeft: tokens.spacingM
  }),
  light: css({
    color: tokens.colorTextLight,
    marginTop: tokens.spacingM
  }),
  logo: css({
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    marginTop: tokens.spacingXl,
    marginBottom: tokens.spacingXl
  })
};

export default class AppPage extends React.Component {
  static propTypes = {
    openAuth: PropTypes.func.isRequired,
    accessToken: PropTypes.string,
    client: PropTypes.object,
    sdk: PropTypes.object.isRequired
  };

  constructor(props) {
    super(props);

    this.state = {

description: string;
}

interface State {
  contentTypes: ContentType[];
  compatibleFields: CompatibleFields;
  selectedFields: SelectedFields;
  parameters: Hash;
}

const styles = {
  body: css({
    height: 'auto',
    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'
  }),
  background: (color: string) =>
    css({
      display: 'block',
      position: 'absolute',
      zIndex: -1,
      top: 0,
      width: '100%',
      height: '300px',
      backgroundColor: color

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

export default {
  body: css({
    height: 'auto',
    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',