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

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

rendered.getByTestId('quick-access-search-input')
    );

    const searchInput = rendered.getByTestId('quick-access-search-input');

    // create first history entry
    fireEvent.change(searchInput, { target: { value: 'party-parrot' } });
    await waitForElement(() =>
      rendered.getByText('Show Product "party-parrot"')
    );

    expect(
      rendered.queryByTestId(
        'quick-access-result(go/product-by-key/product(party-parrot-id))'
      )
    ).toHaveStyle(`color: ${customProperties.colorSurface};`);
  });

skipRemoteQuery: !props.environment.servedByProxy,
    options: {
      __DEV_CONFIG__: {
        menuLoader: props.DEV_ONLY__loadAppbarMenuConfig,
        menuKey: 'appBar',
      },
    },
  });

  const menuLinks = (applicationsMenu && applicationsMenu.appBar) || [];

  return (
    <div>
      <div>
        
          
            </div></div>

? `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};
        }
      }
    `,
  props.isReadOnly &&
    css`
      color: ${vars.colorNeutral60};

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

<span>
      {props.children}
    </span>
    <span>
      {props.localeCount}
    </span>
  
);

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

const getStylesForIcon = (props: StyleProps) => css`
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 100%;
  color: ${customProperties.colorSurface};
  border-radius: 3px 0 0 3px;
  background: ${getColorByType(props.type)};
`;

`
    );
  }
  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};
      `
    );
  }
  if (props.isRangeBetween) {
    styles.push(
      css`
        background-color: ${vars.colorNeutral90};
        color: ${vars.fontColorForInput};
      `
    );
  }
  if (
    !props.isSelected &&
    !props.isRangeStart &&
    !props.isRangeEnd &&
    props.isToday

export const SecondaryButton = props => {
  const isActive = props.isToggleButton && props.isToggled;
  const shouldUseLinkTag = !props.isDisabled && Boolean(props.linkTo);

  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 (

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