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

const ModalPageTopBar = (props: Props) => {
  const intl = useIntl();
  return (
    <div is="">
      </div>

}
          `,
        ];
      default:
        return disabledStyle;
    }
  }
  if (isActive) {
    const activeStyle = css`
      box-shadow: ${vars.shadow9};
      background-color: ${vars.colorSurface};
      border-color: ${vars.colorSurface};
      &:hover {
        box-shadow: ${vars.shadow9};
        background-color: ${vars.colorNeutral95};
        border-color: ${vars.colorNeutral95};
      }
    `;
    switch (theme) {
      case 'info':
        return [
          activeStyle,
          isDisabled &&
            // When the button is active and somehow is disabled it should have
            // a different color to indicate that it's active but can't receive any actions
            css`
              background-color: ${vars.colorInfo85};
              border-color: ${vars.colorInfo85};
              color: ${vars.colorSurface};
              box-shadow: ${vars.shadow9};
            `,
          css`

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;

css`
            color: ${vars.colorNeutral60};
          `,
          isActive && `color: ${vars.colorInfo};`,
        ];
      default:
        return baseDisabledStyles;
    }
  }
  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};
          `,

const Card = props => (
  <div>
    <div>
      {props.children}
    </div>
  </div>
);

import PropTypes from 'prop-types';
import { keyframes } from '@emotion/core';
import styled from '@emotion/styled';
import { customProperties } from '@commercetools-uikit/design-system';

const animationPulse = keyframes`
  0% {
    background-color: ${customProperties.colorNeutral};
  }
  100% {
    background-color: ${customProperties.colorNeutral95};
  }
`;

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:

box-shadow: none;
        background-color: ${vars.colorAccent98};
      `,
    ];
  }
  return [
    baseButtonStyles,
    css`
      background-color: ${vars.colorSurface};
      box-shadow: ${vars.shadow7};
      &:hover {
        box-shadow: ${vars.shadow8};
      }
      &:active {
        box-shadow: ${vars.shadow9};
        background-color: ${vars.colorNeutral95};
      }
    `,
  ];
};

<div>
      
        {props.customTitleRow || (
          
        )}
        <div>
          </div></div>

import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { AngleRightIcon, AngleDownIcon } from '@commercetools-uikit/icons';
import IconButton from '@commercetools-uikit/icon-button';
import Spacings from '@commercetools-uikit/spacings';
import Text from '@commercetools-uikit/text';
import { customProperties } from '@commercetools-uikit/design-system';
import IntlController from './intl-controller';
import KnobsController from './knobs-controller';

const PlaygroundContainer = styled.div`
  background-color: ${customProperties.colorNeutral95};
  border: 16px solid ${customProperties.colorNeutral95};
  border-radius: ${customProperties.borderRadius6};
`;
const PreviewContainer = styled.div`
  position: relative;
  width: 100%;
  overflow: hidden;
  height: ${props => props.height};
  background-color: ${customProperties.colorSurface};
  border-radius: ${customProperties.borderRadius4}
    ${customProperties.borderRadius4} 0 0;
  border-bottom: 1px solid ${customProperties.colorNeutral90};
`;

const PlaygroundController = props => {
  const [isPanelOpen, setIsPanelOpen] = React.useState(false);
  const togglePanel = () => {