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

// and triggers the modal to close, we need to turn off the pointer events.
  const baseStyles = css`
    display: grid;
    height: 100%;
    width: 100%;
    outline: none;
    pointer-events: none;
  `;
  switch (props.size) {
    case 'm':
      return [
        baseStyles,
        css`
          grid:
            [row1-start] 'top top top' minmax(
              ${customProperties.spacingXl},
              1fr
            )
            [row1-end]
            [row2-start] 'left main right' minmax(0, 100%) [row2-end]
            [row3-start] 'bottom bottom bottom' minmax(
              ${customProperties.spacingXl},
              1fr
            )
            [row3-end]
            / minmax(${customProperties.spacingXl}, 1fr)
            ${customProperties.constraintM} minmax(
              ${customProperties.spacingXl},
              1fr
            );
        `,
      ];

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

complete overhaul of this components' structure */
      margin: 0 0 0 ${vars.spacingM};
    }
  `;
  if (isDisabled) {
    return [
      baseStyles,
      css`
        cursor: default;
      `,
      !isCondensed &&
        css`
          /**
           We set a min-height of 32px to anticipate use-cases where SecondaryButton or PrimaryButton
           are rendered in the headerControl */
          min-height: ${vars.spacingXl};
        `,
    ];
  }
  return [
    baseStyles,
    !isCondensed &&
      css`
        /**
         We set a min-height of 32px to anticipate use-cases where SecondaryButton or PrimaryButton
         are rendered in the headerControl */
        min-height: ${vars.spacingXl};
      `,
  ];
};

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:
          return 'auto';
      }

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 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 getPadding = scale => {
  switch (scale) {
    case 's':
      return `${vars.spacingXs} ${vars.spacingS}`;
    case 'm':
      return `${vars.spacingS} ${vars.spacingM}`;
    case 'l':
      return `${vars.spacingM} ${vars.spacingXl}`;
    default:
      return 0;
  }
};