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

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 => (

render() {
    const { hasFooter, hasWarning, hasError, ...rest } = this.props;

    return (

render() {
    return (
      <div>
        
        </div>

const asProps = shouldUseLinkTag ? { as: Link } : { as: props.as };

  const buttonAttributes = {
    'data-track-component': 'SecondaryButton',
    ...filterInvalidAttributes(props),
    ...(shouldUseLinkTag ? { to: props.linkTo } : {}),
  };

  const containerStyles = [
    css`
      display: inline-flex;
      background-color: ${vars.colorSurface};
      border-radius: ${vars.borderRadius6};
      box-shadow: ${vars.shadow7};
      color: ${vars.colorSolid};
      font-size: ${vars.fontSizeDefault};
      transition: background-color ${vars.transitionLinear80Ms},
        box-shadow ${vars.transitionEaseinout150Ms};
    `,
    getStateStyles(props.isDisabled, isActive, props.theme),
    getThemeStyles(props.theme),
  ];

  return (

label={props.label}
      onClick={props.onClick}
      isToggleButton={props.isToggleButton}
      isToggled={props.isToggled}
      isDisabled={props.isDisabled}
      css={[
        css`
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid ${vars.colorSurface};
          background-color: ${vars.colorSurface};
          box-shadow: ${vars.shadow7};
          color: ${vars.colorSolid};
          transition: background-color ${vars.transitionLinear80Ms},
            box-shadow 150ms ease-in-out;
        `,
        getStateStyles(props.isDisabled, isActive, props.theme),
        getShapeStyles(props.shape, props.size),
        getSizeStyles(props.size),
        getThemeStyles(props.theme),
        getHoverStyles(props.isDisabled, props.theme),
      ]}
    >
      {props.icon &&
        React.cloneElement(props.icon, {
          size: props.size,
          color: getIconThemeColor(props),
        })}

featureToggle: PropTypes.string,
  children: PropTypes.element.isRequired,
};

const renderLabel = (menu, applicationLanguage) => {
  const localizedLabel = menu.labelAllLocales.find(loc =>
    applicationLanguage.startsWith(loc.locale)
  );
  if (localizedLabel) return localizedLabel.value;
  return NO_VALUE_FALLBACK;
};

const MenuItem = styled.div`
  width: 100%;
  cursor: pointer;
  color: ${customProperties.colorSolid};

  :hover {
    background-color: ${customProperties.colorNeutral90};
  }

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

const UserSettingsMenuBody = props => {
  const applicationsMenu = useApplicationsMenu({
    queryOptions: {

const getContainerStyles = ({ isCondensed, theme }) => {
  const baseStyles = css`
    font-family: inherit;
    box-shadow: ${vars.shadow1};
    color: ${vars.colorSolid};
    border-radius: ${vars.borderRadius6};
    position: relative;
    min-width: 550px;
    font-size: ${vars.fontSizeDefault};
    padding: 0;
    background-color: ${theme === 'light'
      ? vars.colorSurface
      : vars.colorNeutral95};
  `;

  if (isCondensed) {
    return [
      baseStyles,
      css`
        min-width: 0;
      `,

const getStylesForContent = (props: StyleProps) => {
  const fontColor =
    props.domain === NOTIFICATION_DOMAINS.SIDE
      ? customProperties.colorSolid
      : customProperties.colorSurface;
  return css`
    flex-basis: 100%;
    flex-grow: 1;
    padding: 0 ${customProperties.spacingS};
    margin: 0;
    font-size: ${props.domain === NOTIFICATION_DOMAINS.SIDE
      ? '0.929rem'
      : 'inherit'};

    color: ${fontColor};

    p,
    a {
      color: ${fontColor};
    }

import React from 'react';
import PropTypes from 'prop-types';
import { customProperties as vars } from '@commercetools-uikit/design-system';
import { ThemeProvider } from 'emotion-theming';

const darkTheme = {
  colorSolid: vars.colorSurface,
  colorSurface: vars.colorSolid,
};

const defaultTheme = vars;

const ThemeWrapper = props => (
  {props.children}
);

ThemeWrapper.propTypes = {
  theme: PropTypes.any,
};

const themeParams = [
  {
    name: 'Default Theme',
    props: { theme: defaultTheme },

);

            if (
              this.state.results.length === 0 &&
              this.state.searchText.trim().length > 0
            )
              return (
                <div>
                  
                </div>
              );

            return this.state.results.map((command, index) =&gt; (
               {