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

import { normalizeMessage, isOutOfOrder, isDuplicate, messageToState } from './message-processor';
import { createPubSub } from './pubnub-client';

import { EVENT_TRIGGERED, EVENT_TRIGGER_FAILED } from '../constants';

const styles = {
  info: css({
    color: tokens.colorTextLight,
    marginTop: tokens.spacingS,
    marginBottom: tokens.spacingM,
    fontSize: tokens.fontSizeS,
    fontWeight: tokens.fontWeightNormal
  }),
  header: css({
    display: 'flex',
    marginBottom: tokens.spacingS
  })
};

export default class NeflifySidebarBuildButton extends React.Component {
  static propTypes = {
    site: PropTypes.object.isRequired,
    users: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
    userId: PropTypes.string.isRequired
  };

  state = { history: [] };

  componentDidMount() {
    this.createPubSub();
  }

export const styles = {
  header: css({
    display: 'flex',
    justifyContent: 'space-between',
    padding: tokens.spacingL
  }),
  body: css({
    height: 'calc(100vh - 140px)',
    overflowY: 'auto',
    padding: `${tokens.spacingL} ${tokens.spacingL} 0 ${tokens.spacingL}`
  }),
  total: css({
    fontSize: tokens.fontSizeS,
    color: tokens.colorTextLight,
    display: 'block',
    marginTop: tokens.spacingS
  }),
  saveBtn: css({
    marginRight: tokens.spacingM
  }),
  paginator: css({
    margin: `${tokens.spacingM} auto ${tokens.spacingL} auto`,
    textAlign: 'center'
  }),
  leftsideControls: css({
    position: 'relative',
    zIndex: 0,
    svg: css({
      zIndex: 1,
      position: 'absolute',
      top: '10px',
      left: '10px'

TextLink,
  SelectField,
  Option,
  Modal,
  Typography,
  SectionHeading
} from '@contentful/forma-36-react-components';
import ReferenceField, { hasFieldLinkValidations } from './ReferenceField';
import RefToolTip from './RefToolTip';

const styles = {
  table: css({
    marginTop: tokens.spacingL
  }),
  link: css({
    marginRight: tokens.spacingS
  }),
  contentTypeRow: css({
    gridTemplateColumns: 'auto 6rem'
  }),
  refList: css({
    display: 'flex',
    flexDirection: 'row'
  }),
  sectionHeading: css({
    marginTop: tokens.spacingL,
    marginBottom: tokens.spacingM
  })
};

ContentTypes.propTypes = {
  addedContentTypes: PropTypes.array.isRequired,

import { css } from 'emotion';

import tokens from '@contentful/forma-36-tokens';
import { Select, Option, Button } from '@contentful/forma-36-react-components';

import NeflifySidebarBuildButton from './build-button';

import { parametersToConfig } from '../config';

const styles = {
  previewContent: css({
    display: 'flex',
    alignContent: 'center'
  }),
  separator: css({
    marginTop: tokens.spacingS
  })
};

export default class NetlifySidebar extends React.Component {
  static propTypes = {
    sdk: PropTypes.object.isRequired
  };

  constructor(props) {
    super(props);

    const { sites } = parametersToConfig(this.props.sdk.parameters.installation);

    this.state = {
      users: [],
      sites,

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

export default {
  info: css({
    color: tokens.colorTextLight,
    marginBottom: tokens.spacingM,
    fontSize: tokens.fontSizeS,
    fontWeight: tokens.fontWeightNormal
  }),
  button: css({
    marginBottom: tokens.spacingS
  }),
  previewButton: css({
    margin: `${tokens.spacingS} 0`,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }),
  previewContent: css({
    display: 'flex',
    alignContent: 'center'
  }),
  previewIcon: css({
    marginRight: tokens.spacing2Xs,
    marginTop: '1px'
  }),
  header: css({

margin: `${tokens.spacingS} 0`,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }),
  previewContent: css({
    display: 'flex',
    alignContent: 'center'
  }),
  previewIcon: css({
    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 { css } from 'emotion';
import tokens from '@contentful/forma-36-tokens';

export default {
  info: css({
    color: tokens.colorTextLight,
    marginBottom: tokens.spacingM,
    fontSize: tokens.fontSizeS,
    fontWeight: tokens.fontWeightNormal
  }),
  button: css({
    marginBottom: tokens.spacingS
  }),
  previewButton: css({
    margin: `${tokens.spacingS} 0`,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }),
  previewContent: css({
    display: 'flex',
    alignContent: 'center'
  }),
  previewIcon: css({
    marginRight: tokens.spacing2Xs,
    marginTop: '1px'
  }),
  header: css({
    display: 'flex',
    marginBottom: tokens.spacingS
  }),

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Button } from '@contentful/forma-36-react-components';
import tokens from '@contentful/forma-36-tokens';
import { css } from 'emotion';

const styles = {
  button: css({
    marginBottom: tokens.spacingS
  })
};

const getExperimentUrl = (projectId, experimentId) => {
  return `https://app.optimizely.com/v2/projects/${projectId}/experiments/${experimentId}/variations`;
};

const getAllExperimentsUrl = projectId => {
  return `https://app.optimizely.com/v2/projects/${projectId}/experiments`;
};

export default function Sidebar(props) {
  const [experimentId, setExperimentId] = useState(props.sdk.entry.fields.experimentId.getValue());
  const { parameters } = props.sdk;

  useEffect(() => {

import React from 'react';
import PropTypes from 'prop-types';
import { css } from 'emotion';

import tokens from '@contentful/forma-36-tokens';
import { Button, ValidationMessage } from '@contentful/forma-36-react-components';

import { normalizeMessage, isOutOfOrder, isDuplicate, messageToState } from './message-processor';
import { createPubSub } from './pubnub-client';

import { EVENT_TRIGGERED, EVENT_TRIGGER_FAILED } from '../constants';

const styles = {
  info: css({
    color: tokens.colorTextLight,
    marginTop: tokens.spacingS,
    marginBottom: tokens.spacingM,
    fontSize: tokens.fontSizeS,
    fontWeight: tokens.fontWeightNormal
  }),
  header: css({
    display: 'flex',
    marginBottom: tokens.spacingS
  })
};

export default class NeflifySidebarBuildButton extends React.Component {
  static propTypes = {
    site: PropTypes.object.isRequired,
    users: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
    userId: PropTypes.string.isRequired
  };