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

`;
    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`
            background-color: ${vars.colorInfo};
            border-color: ${vars.colorInfo};
            color: ${vars.colorSurface};
            &:hover {
              background-color: ${vars.colorInfo85};
              border-color: ${vars.colorInfo85};
            }
          `,
        ];
      case 'primary':
        return [
          activeStyle,
          // 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
          isDisabled &&
            css`
              background-color: ${vars.colorPrimary85};

const getThemeStyles = theme => {
  if (!theme) return css``;

  if (theme === 'default') return css``;

  switch (theme) {
    case 'info':
      return css`
        &:hover {
          color: ${vars.colorInfo};

          * {
            fill: ${vars.colorInfo};
          }
        }
      `;
    default: {
      invariant(
        false,
        `ui-kit/SecondaryButton: the specified theme '${theme}' is not supported.`
      );
      return css`
        &:hover {
          box-shadow: ${vars.shadow8};
        }
        &:active {

{({ css: makeClassName }) => {
            this.columns = baseColumns({
              onCheckboxClick: this.onCheckboxClick,
              checkboxClassName: makeClassName({
                backgroundColor: '#f2f2f2',
                borderLeft: `2px solid ${vars.colorInfo}`,
                ':hover': {
                  backgroundColor: '#e0e0e0',
                  cursor: 'pointer',
                },
              }),
            });
            return (
              
                  this.renderItem({
                    rowIndex,
                    columnIndex,
                    showTooltip: this.props.showTooltip,
                    tooltipText: this.props.tooltipText,<table></table>

if (props.isRangeBetween) {
    styles.push(
      css`
        background-color: ${vars.colorNeutral90};
        color: ${vars.fontColorForInput};
      `
    );
  }
  if (
    !props.isSelected &&
    !props.isRangeStart &&
    !props.isRangeEnd &&
    props.isToday
  ) {
    styles.push(css`
      color: ${vars.colorInfo};
      font-weight: bold;
    `);
  }

  if (props.disabled) {
    styles.push(css`
      color: ${vars.fontColorForInputWhenDisabled};
      cursor: not-allowed;
    `);
  }

  return styles;
};

case 'warning': {
      return css`
        background-color: ${vars.colorWarning95};
        border: 1px solid ${vars.colorWarning};
      `;
    }
    case 'positive': {
      return css`
        background-color: ${vars.colorPrimary85};
        border: 1px solid ${vars.colorPrimary40};
      `;
    }
    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 getColorByType = (value: TAppNotificationKind) => {
  switch (value) {
    case NOTIFICATION_KINDS_SIDE.success:
      return customProperties.colorPrimary;
    case NOTIFICATION_KINDS_SIDE.info:
      return customProperties.colorInfo;
    case NOTIFICATION_KINDS_SIDE.error:
      return customProperties.colorError;
    case NOTIFICATION_KINDS_SIDE.warning:
      return customProperties.colorWarning;
    default:
      return 'transparent';
  }
};

const getContentBorderColor = props => {
  switch (props.type) {
    case 'error':
      return vars.colorError;
    case 'info':
      return vars.colorInfo;
    case 'warning':
      return vars.colorWarning;
    case 'success':
      return vars.colorPrimary;
    default:
      return '';
  }
};