How to use the @commercetools-uikit/design-system.customProperties.spacingS function in @commercetools-uikit/design-system

const getContentWrapperStyles = (props, theme) => {
  const overwrittenVars = {
    ...vars,
    ...theme,
  };

  return css`
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    border-radius: ${overwrittenVars[designTokens.borderRadiusForTag]};
    padding: 5px ${vars.spacingS};
    white-space: normal;
    text-align: left;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    border-style: solid;
    border-width: 1px;
    border-color: ${props.type === 'warning'
      ? overwrittenVars[designTokens.borderColorForTagWarning]
      : overwrittenVars[designTokens.borderColorForTag]};

    /* fixing things for IE11 ... */
    width: 100%;

    small {
      color: ${getTextDetailColor(props.isDisabled, theme)};

case 'm':
      return vars.constraintM;
    case 'l':
      return vars.constraintL;
    case 'xl':
      return vars.constraintXl;
    case 'scale':
    default:
      return vars.constraintScale;
  }
};

export const Body = styled.div`
  font-family: inherit;
  border-radius: ${vars.borderRadius6};
  padding: ${vars.spacingXs} ${vars.spacingS};
  border: 'none';
  box-shadow: ${vars.shadow15};
  font-size: 0.857rem;
  opacity: 0.95;
  color: ${vars.colorSurface};
  background-color: ${vars.colorAccent};
`;
// here we use object styles so we can spread these
// with the styles we get from react-popper :D
// eslint-disable-next-line import/prefer-default-export
export const getBodyStyles = ({ constraint, placement, customStyles }) => ({
  fontFamily: 'inherit',
  margin: `${getOffsetMargin({ placement })} !important`,
  maxWidth: getMaxWidth({ constraint }),
  // so hovering over the tooltip when the tooltip overlaps the component
  pointerEvents: 'none',

import styled from '@emotion/styled';
import { customProperties } from '@commercetools-uikit/design-system';

// The overflow should be "auto", to make the container scrollable
const DialogContent = styled.div`
  border-top: 1px solid ${customProperties.colorNeutral};
  padding: ${customProperties.spacingM} 0 ${customProperties.spacingS};
  flex: 1;
  overflow: auto;
`;

export default DialogContent;

const ModalPageTopBar = (props: Props) => {
  const intl = useIntl();
  return (

const getInputStyles = () => css`
  width: 100%;
  text-align: center;
  border: 0;
  border-top: 1px solid ${vars.colorNeutral90};
  padding: 10px 0;
  outline: 0;
  font-size: ${vars.fontSizeDefault};
  margin-top: ${vars.spacingS};
  color: ${vars.colorSolid};

  :disabled {
    /* Fixes background color in Firefox */
    background-color: ${vars.colorSurface};
  }
`;
const DateCalendarTimeInput = props => (

white-space: nowrap;
    flex: 0;
    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
    line-height: calc(${vars.sizeHeightInput} - 2 * ${vars.borderRadius1});
    background-color: ${overwrittenVars[
      designTokens.backgroundColorForInputWhenDisabled
    ]};
    border-top-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border: 1px ${overwrittenVars[designTokens.borderColorForInputWhenDisabled]}
      solid;
    padding: 0 ${vars.spacingS};
    transition: border-color ${vars.transitionStandard},
      background-color ${vars.transitionStandard},
      color ${vars.transitionStandard};
    border-right: 0;
    box-shadow: none;
    appearance: none;
  `;
};

const getMargin = scale => {
  switch (scale) {
    case 'xs':
      return vars.spacingXs;
    case 's':
      return vars.spacingS;
    case 'm':
      return vars.spacingM;
    case 'l':
      return vars.spacingL;
    case 'xl':
      return vars.spacingXl;
    default:
      return 0;
  }
};

const getSizeStyles = size => {
  switch (size) {
    case 'small':
      return css`
        border-radius: ${vars.borderRadius4};
        padding: 0 ${vars.spacingS} 0 ${vars.spacingS};
        height: ${vars.smallButtonHeight};
      `;

    case 'big':
      return css`
        padding: 0 ${vars.spacingM} 0 ${vars.spacingM};
        height: ${vars.bigButtonHeight};
        border-radius: ${vars.borderRadius6};
      `;

    default:
      return css``;
  }
};

align-items: flex-start;

  > * {
    margin-left: 1px;
  }
`;

export const ToolbarRightControls = styled.div``;

export const Toolbar = styled.div`
  display: flex;
  flex-wrap: wrap;
  font-family: ${vars.fontFamilyDefault};
  border-radius: ${vars.borderRadiusForInput};
  border-bottom: 0;
  padding: ${vars.spacingXs} calc(${vars.spacingS} - 1px);
  padding-left: calc(${vars.spacingXs} - 1px);
  align-items: flex-start;
  align-content: stretch;

  position: relative;

  &::after {
    position: absolute;
    content: '';
    width: calc(100% - ${vars.spacingS});
    height: 1px;
    background: ${vars.colorNeutral};
    left: 50%;
    transform: translateX(-50%);
    bottom: -1px;
  }