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

align-items: center;
    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};
        }
      `,
    ];

const Label = styled.label`
  position: relative;
  display: inline-block;
  cursor: ${props => (props.isDisabled ? 'not-allowed' : 'pointer')};

  ${sizeStyles}
`;

const Span = styled.span`
  /* this is the track */

  &::before {
    border-radius: 16px;
    box-shadow: ${vars.shadow9};
    background-color: ${vars.colorNeutral60};
    left: 0;
    top: 50%;
    transition: background 0.2s ease-in-out;
    content: '';
    position: absolute;
    transform: translateY(-50%);
    height: 100%;
    width: 100%;
  }

  /* this is the thumb */
  &::after {
    content: '';
    position: absolute;
    transform: translateY(-50%);
    top: 50%;

}
  }
  if (isActive) {
    const baseActiveStyles = [
      css`
        box-shadow: ${vars.shadow9};
        background-color: ${vars.colorSurface};
        &:hover {
          background-color: ${vars.colorNeutral95};
        }
      `,
      isDisabled &&
        css`
          box-shadow: 0 0 0 1px ${vars.colorNeutral} inset;
          background-color: ${vars.colorAccent98};
          color: ${vars.colorNeutral60};
        `,
    ];
    switch (theme) {
      case 'info':
        return [
          baseActiveStyles,
          css`
            color: ${vars.colorInfo};
          `,
        ];
      default:
        return baseActiveStyles;
    }
  }
  return css`
    &:hover {

case 'information': {
      return css`
        background-color: ${vars.colorInfo95};
        border: 1px solid ${vars.colorInfo};
      `;
    }
    case 'primary': {
      return css`
        background-color: ${vars.colorPrimary95};
        border: 1px solid ${vars.colorPrimary25};
      `;
    }
    case 'secondary': {
      return css`
        background-color: ${vars.colorNeutral90};
        border: 1px solid ${vars.colorNeutral60};
      `;
    }
    default:
      return css``;
  }
};

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 [
          disabledStyle,

const getHeaderContainerStyles = ({ isDisabled, isOpen, isSticky, theme }) => {
  const baseStyles = css`
    position: relative;
    cursor: pointer;
    border-top-left-radius: ${vars.borderRadius6};
    border-top-right-radius: ${vars.borderRadius6};
    background-color: ${theme === 'light'
      ? vars.colorSurface
      : vars.colorNeutral95};
  `;

  return [
    baseStyles,
    isOpen &&
      css`
        border-bottom: 1px ${vars.colorNeutral60} solid;
      `,
    isDisabled &&
      css`
        cursor: default;
      `,
    isSticky &&
      isOpen &&
      css`
        z-index: 1;
        position: sticky;
        top: 0;
        border-top-right-radius: ${vars.borderRadius6};
        border-top-left-radius: ${vars.borderRadius6};
      `,
    !isOpen &&
      css`

const ModalPageHeader = (props: Props) => (
  <div> * + * {
        margin-left: ${customProperties.spacingM};
      }
    `}
  &gt;
    
    {props.children}
  </div>
);
ModalPageHeader.displayName = 'ModalPageHeader';

}
    `,
  props.isReadOnly &&
    css`
      color: ${vars.colorNeutral60};

      * {
        fill: ${vars.colorNeutral60};
      }
    `,
  props.isDisabled &&
    css`
      color: ${vars.colorNeutral60};

      * {
        fill: ${vars.colorNeutral60};
      }
    `,
];

const Avatar = props => (
  <div>
    </div>

ref={this.searchInputRef}
              placeholder={this.props.intl.formatMessage(
                messages.inputPlacehoder
              )}
              type="text"
              css={css`
                width: 100%;
                border: 0;
                outline: 0;
                font-size: 22px;
                font-weight: 300;
                padding: ${customProperties.spacingM}
                  ${customProperties.spacingM} ${customProperties.spacingS}
                  ${customProperties.spacingS};
                &::placeholder {
                  color: ${customProperties.colorNeutral60};
                }
              `}
              value={this.state.searchText}
              onChange={this.handleChange}
              onKeyDown={this.handleKeyDown}
              onKeyUp={this.handleKeyUp}
              autoFocus={true}
              data-testid="quick-access-search-input"
            />
            {this.state.isLoading && (