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

// In this case it's not necessary to check if the `projectKey` param
                    // is included in the list of projects. In such case
                    // the dropdown will still be rendered but no project will be selected.
                    // This is fine becase the user has still the possibility to "switch"
                    // to a project.
                    projectKey={props.projectKeyFromUrl || previousProjectKey}
                  />
                );
              if (!props.user.defaultProjectKey) return '';

              return ;
            })()}
          
          <div>
          {props.user ? (
            
          ) : (</div>

// https://codepen.io/mudassir0909/pen/eIHqB

  // we prevent all our defined onClicks inside of the CalendarHeader
  // from blurring our input.
  const onMouseDown = React.useCallback(event => {
    event.preventDefault();
  }, []);
  return (
    <div>
      
        
          }
          /&gt;
        
        </div>

const getInputStyles = () => css`
  width: 100%;
  text-align: center;
  border: 0;
  border-top: 1px solid ${vars.colorNeutral90};
  padding: 10px 0;
  outline: 0;
  font-size: ${vars.fontSizeDefault};
  margin-top: ${vars.spacingS};
  color: ${vars.colorSolid};

  :disabled {
    /* Fixes background color in Firefox */
    background-color: ${vars.colorSurface};
  }
`;
const DateCalendarTimeInput = props => (

<div style="{{">
              </div>

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

css`
    border: 0;
    font-family: ${vars.fontFamilyDefault};
    border-radius: ${vars.borderRadius4};
    cursor: pointer;
    font-size: ${vars.fontSizeForInput};
    color: ${vars.colorSolid};
    display: flex;
    justify-content: center;
    align-items: center;
    padding: ${props.isStyleButton
      ? `calc(${vars.spacingXs} - 1px) ${vars.spacingS}`
      : vars.spacingXs};

    &:hover {
      background-color: ${vars.colorNeutral90};
    }
  `,
  props.isIndeterminate &&
    css`
      background-color: ${vars.colorAccent95};
    `,
  props.isOpen &&
    css`
      &:not(:hover) {
        background-color: ${vars.colorAccent30};
        color: ${vars.colorSurface};

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

const getCellStyles = props => css`
  display: flex;
  align-items: center;

  border-right: 1px solid ${vars.colorNeutral90};
  border-bottom: 1px solid ${vars.colorNeutral90};

  padding: ${props.isCondensed ? '2px 4px' : '8px 16px'};
`;

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 = () => {
    setIsPanelOpen(!isPanelOpen);
  };
  React.useLayoutEffect(() => {
    window.dispatchEvent(new Event('resize'));
  }, [isPanelOpen]);
  return (
    
      {intlProps => (
        
          {({ form, values }) => (

import styled from '@emotion/styled';
import { customProperties as vars } from '@commercetools-uikit/design-system';

const Cell = styled.div`
  display: flex;
  align-items: center;
  height: 100%;
  white-space: pre;
  border-bottom: 1px solid ${vars.colorNeutral90};
  border-right: 1px solid ${vars.colorNeutral90};

  & > * {
    flex: 1 0 100%;
    min-width: 0;
  }
`;

export default Cell;

cursor: default;
      border-radius: ${vars.borderRadius4};
    `);
  }
  if (['heading', 'spacing'].includes(props.type)) {
    styles.push(css`
      text-align: center;
      padding: ${vars.spacingS} 0;
      cursor: default;
      color: ${vars.colorNeutral60};
    `);
  }
  if (props.isHighlighted) {
    styles.push(
      css`
        background-color: ${vars.colorNeutral90};
      `
    );
  }
  if (props.isSelected) {
    styles.push(
      css`
        background-color: ${vars.colorPrimary};
        color: ${vars.colorSurface};
      `
    );
  }
  if (props.isRangeStart || props.isRangeEnd) {
    styles.push(
      css`
        background-color: ${vars.colorPrimary40};
        color: ${vars.colorSurface};