How to use the @commercetools-frontend/ui-kit.customProperties.spacingL function in @commercetools-frontend/ui-kit

import React from 'react';
import PropTypes from 'prop-types';
import { MDXProvider } from '@mdx-js/react';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { customProperties } from '@commercetools-frontend/ui-kit';
import * as colors from '../colors';
import Layout from './layout';
import SEO from './seo';
import CodeBlock from './code-block';

const TypographyPage = styled.div`
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  padding: ${customProperties.spacingL};
  max-width: 740px;
`;
const headerStyles = () => css`
  line-height: 1.15;
  margin: 2.75rem 0 1rem;
`;

// Typography sizes have been calculated from https://type-scale.com
// Ref: https://medium.com/sketch-app-sources/exploring-responsive-type-scales-cf1da541be54
const Paragraph = styled.p`
  margin-bottom: 1.25em;
`;
const H1 = styled.h1`
  ${headerStyles};
  font-size: 4.209em;
  margin-top: 0;

{link.subgroup.map((subLink, subGroupIndex) => {
                        if (subLink.subgroup) {
                          return (
                            
                              <div>
                                
                                  {subLink.label}
                                
                              </div>
                              {subLink.subgroup.map(subSubLink =&gt; (
                                
                                  
                                    {subSubLink.label}

h1: '5rem',
    h2: '3.5rem',
    h3: '2.5rem',
    h4: '2rem',
    h5: '1.7rem',
    body: '1.4rem',
  },
};

const TypographyPage = styled.div`
  font-family: 'Barlow', sans-serif;
  font-size: ${typographyScale.normalized.body};
  font-weight: normal;
  line-height: 1.5;
  word-spacing: 3px;
  padding: ${customProperties.spacingL};
  max-width: 740px;
`;
const headerStyles = () => css`
  line-height: 1.15;
  margin: 2.75rem 0 1rem;
`;

const Paragraph = styled.p`
  margin-bottom: 1.25em;
`;
const H1 = styled.h1`
  ${headerStyles};
  font-size: ${typographyScale.normalized.h1};
  margin-top: 0;
`;
const H2 = styled.h2`

import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { useStaticQuery, graphql, Link } from 'gatsby';
import { Spacings, customProperties } from '@commercetools-frontend/ui-kit';
import ExternalLinkSvg from '../../images/external-link.svg';
import * as colors from '../../colors';

const FooterSectionTitle = styled.div`
  font-size: 1.6rem;
  color: ${colors.light.cards};
`;

const FooterSectionList = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0 0 0 ${customProperties.spacingL};

  li::before {
    content: '\\2022';
    color: ${colors.light.cards};
    font-weight: 600;
    display: inline-block;
    width: 1em;
    margin-left: -1px;
  }
`;

const linkStyles = css`
  text-decoration: none;
  font-size: 1.2rem;
  color: ${colors.light.cards};