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

text-align: left;
        background: ${customProperties.colorSurface};
        border: 1px solid ${getColorByType(props.type)};
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: ${customProperties.borderRadius6};
        word-break: break-word;
        hyphens: auto; /* still not supported on Chrome */
      `;

      if (props.fixed) return sideStyles;
      return css`
        ${sideStyles};
        animation: ${showNotificationSideAnimation} 0.3s forwards;
        position: relative;
        z-index: 10000;
        margin-top: ${customProperties.spacingL} !important;
        right: ${customProperties.spacingXl};
        float: right;
        clear: both;
        max-width: 50%;
      `;
    }
    default:
      return css``;
  }
};

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 ApplicationLoader = props => (
  <div> * + * {
        margin: ${customProperties.spacingL} 0 0;
      }
    `}
  &gt;
    
    {props.showLogo &amp;&amp; <img src="{CTLogoSVG}" alt="commercetools logo">}
  </div>
);
ApplicationLoader.displayName = 'ApplicationLoader';

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;
  }
};

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

const Divider = styled.span`
  width: 1px;
  height: ${vars.spacingL};
  background: ${vars.colorNeutral};
  margin: 0 ${vars.spacingXs};
`;

export default Divider;

const getPadding = 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 getWidthBySize = props => {
  switch (props.shape) {
    case 'dot':
      switch (props.size) {
        case 's':
          return customProperties.spacingS;
        case 'm':
          return customProperties.spacingM;
        case 'l':
          return customProperties.spacingL;
        case 'xl':
          return customProperties.spacingXl;
        default:
          return 'auto';
      }
    case 'rect':
      switch (props.size) {
        case 's':
          return '150px';
        case 'm':
          return '300px';
        case 'l':
          return '450px';
        case 'xl':
          return '600px';
        default: