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

color: ${vars.colorSurface};
    transition: background-color ${vars.transitionLinear80Ms};
    font-size: ${vars.fontSizeDefault};
    ${getSizeStyles(size)}
  `;
  // "disabled" takes precendece over "active"
  if (isDisabled) {
    return [
      baseStyles,
      css`
        &,
        &:active,
        &:hover {
          background-color: ${vars.colorAccent98};
          color: ${vars.colorNeutral60};
          box-shadow: 0 0 0 1px ${vars.colorNeutral} inset;
        }
      `,
    ];
  }
  if (isActive) {
    const baseActiveStyles = [
      baseStyles,
      css`
        box-shadow: ${vars.shadow9};
        &:hover,
        &:focus {
          box-shadow: ${vars.shadow8};
        }
      `,
    ];
    switch (tone) {

const intl = useIntl();
  return (
    <div is="">
      </div>

{props.isDisabled && (
          <span>
            
          </span>
        )}
      
      <div>
        {props.data.key}
      </div>
      {props.data.suspension &amp;&amp; props.data.suspension.isActive &amp;&amp; (
        <div>
          
        </div>
      )}
      {props.data.expiry &amp;&amp; props.data.expiry.isActive &amp;&amp; (

title={props.title}
    isOpen={props.isOpen}
    zIndex={props.zIndex}
    onClose={props.onClose}
    baseZIndex={props.baseZIndex}
    topBarColor="neutral"
    currentPathLabel={props.topBarCurrentPathLabel || props.title}
    previousPathLabel={props.topBarPreviousPathLabel}
    getParentSelector={props.getParentSelector}
    shouldDelayOnClose={props.shouldDelayOnClose}
  >
    <div>
      
        {props.customTitleRow || (
          
        )}
        <div>
          </div></div>

};

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;

  &:hover {
    cursor: pointer;

    svg {
      transform: rotate(180deg);
    }

    * {
      fill: ${vars.colorNeutral};
    }
  }

  ${containerDynamicStyles}

  &:hover {
    ${Span} {
      visibility: visible;
    }
  }
`;

const SortableHeader = props => {
  const isActive = props.sortBy === props.columnKey;
  const isArrowDown = isActive && props.sortDirection === 'DESC';
  return (

${props =>
    props.hasDivider
      ? css`
          border-bottom: 1px solid ${customProperties.colorNeutral};
        `
      : ''};
`;

const getStateStyles = (isDisabled, isActive, theme) => {
  if (isDisabled) {
    const disabledStyle = css`
      background-color: ${vars.colorAccent98};
      border-color: ${vars.colorNeutral};
      color: ${vars.colorNeutral60};
      box-shadow: none;
    `;
    switch (theme) {
      case 'info':
        return [
          disabledStyle,
          css`
            &:hover {
              border-color: ${vars.colorInfo85};
              background-color: ${vars.colorInfo85};
            }
          `,
        ];
      case 'primary':
        return [

case 'l':
          return '12px';
        case 'xl':
          return '16px';
        default:
          return 'none';
      }
    case 'rect':
      return customProperties.borderRadius4;
    default:
      return 'none';
  }
};

const LoadingPlaceholder = styled.div`
  background-color: ${customProperties.colorNeutral};
  animation-name: ${animationPulse};
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;

  width: ${getWidthBySize};
  height: ${getHeightBySize};
  border-radius: ${getRadiusBySize};
`;
LoadingPlaceholder.displayName = 'LoadingPlaceholder';
LoadingPlaceholder.propTypes = {
  shape: PropTypes.oneOf(['dot', 'rect']).isRequired,
  size: PropTypes.oneOf(['s', 'm', 'l', 'xl']).isRequired,
};

<div>
    
    
  </div>
);
Avatar.displayName = 'Avatar';

height: ${props.size === 'small'
            ? sizeIconContainerSmall
            : sizeIconContainer};
          width: ${props.size === 'small'
            ? sizeIconContainerSmall
            : sizeIconContainer};
          border-radius: 50%;
          flex-shrink: 0;
          box-shadow: ${vars.shadow7};
          background-color: ${backgroundColor};
          border: 1px solid ${backgroundColor};
        `,
        props.isDisabled &&
          css`
            box-shadow: none;
            border: 1px solid ${vars.colorNeutral};
            background-color: ${vars.colorAccent98};
          `,
      ]}
    >
      {props.isClosed ? (
        
      ) : (