How to use the @crave/farmblocks-theme.colors.CARBON function in @crave/farmblocks-theme

title={props.formTitle}
          loading={props.formLoading}
        >
          {typeof props.formContent === "function"
            ? props.formContent(dismiss)
            : props.formContent}
        
      )}
    />
  );
};

FilterPopover.defaultProps = {
  formSaveLabel: "Filter",
  triggerFontSize: "14px",
  triggerTextColor: colors.CARBON,
  triggerFontWeight: "normal",
};

FilterPopover.propTypes = {
  triggerLabel: PropTypes.string.isRequired,
  triggerFontSize: PropTypes.string,
  triggerTextColor: PropTypes.string,
  triggerFontWeight: PropTypes.string,
  formTitle: PropTypes.string,
  formContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  formLoading: PropTypes.bool,
  formSaveLabel: PropTypes.string,
  formCancelLabel: PropTypes.string,
  onFormSaveClick: PropTypes.func,
  onFormCancelClick: PropTypes.func,
  // eslint-disable-next-line react/forbid-prop-types

import Button, { buttonTypes, buttonSizes } from "@crave/farmblocks-button";
import { formInputProps, styledInput } from "@crave/farmblocks-hoc-input";
import { SmEdit } from "@crave/farmblocks-icon";

// the cover of a protected field is a div (instead of an input) enhanced with formInput hoc and some extra style overridings
const Cover = styled(styledInput)`
  display: block;

  .input {
    position: absolute;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    bottom: 0;
    background: ${colors.SUGAR};
    color: ${colors.CARBON};
    box-shadow: none;
    cursor: auto;
  }
  .clear {
    position: absolute;
    right: 0px;
  }
`;
Cover.displayName = "InputCover";

const Container = styled.div`
  position: relative;
  display: ${props => props.isEditing && "flex"};
  align-items: flex-end;

  > :first-child {

}
  if (props.invalid) {
    return css`
      background-color: ${colors.STRAWBERRY};
      color: white;
    `;
  }
  if (props.disabled && !props.protected) {
    return css`
      background-color: ${colors.GREY_16};
      color: ${colors.GREY_32};
    `;
  }
  return css`
    background-color: ${colors.SUGAR};
    color: ${colors.CARBON};
  `;
};

}
    }
  `;
};

const StyledTooltip = styled.div`
  visibility: ${({ isVisible }) => (isVisible ? "visible" : "hidden")};

  position: absolute;
  padding: ${props => props.padding || "8px"};
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
  border: solid 1px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  white-space: pre;
  color: ${colors.CARBON};

  font-family: lato, sans-serif;

  ${({ triggerWidth }) =>
    positionXStyle(triggerWidth < 32 ? `${triggerWidth / 2 - 16}px` : 0)};

  .closeButton {
    display: none;
  }

  ${arrow};
  ${positionYStyle};

  overflow: ${props => props.overflow};

  @media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {

align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    margin-right: 8px;
    font-size: ${({ iconSize }) => iconSize};
    color: ${GREY_48};

    svg {
      display: block;
    }
  }

  &:hover,
  &.active {
    color: ${colors.CARBON};
    background-color: ${({ highlightColor }) =>
      transparentize(0.96, highlightColor)};
    .icon {
      color: ${({ highlightColor }) => highlightColor};
    }
  }

  &.active {
    padding-left: 4px;
    border-left: 4px solid ${({ highlightColor }) => highlightColor};
  }

  ${({ variant }) => isFullScreen(variant) && fullScreenStyle}
`;

export default NavItem;

);
};

const StyledTooltip = styled.div`
  visibility: ${props => (props.isVisible ? "visible" : "hidden")};

  position: absolute;
  z-index: ${props => props.zIndex};
  top: ${props => props.top};
  padding: ${props => props.padding || "8px"};
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
  border: solid 1px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  white-space: pre;
  color: ${colors.CARBON};

  font-family: lato, sans-serif;

  ${alignX(0)};

  ${arrow};

  overflow: ${props => props.overflow};
`;

export { Container, StyledTooltip };

background: white;

  padding: 8px 24px;
  min-height: 48px;

  .description {
    padding: 0 16px;
    flex-grow: 1;

    line-height: 1.33;
  }

  cursor: ${props => props.status === statusTypes.CURRENT && "pointer"};

  color: ${colorConstants.CARBON};

  ${colors};
`;

StepContainer.displayName = "StepContainer";

export default StepContainer;

const labelColor = props => {
  if (props.focused) {
    return colors.INDIGO_MILK_CAP;
  }
  if (props.invalid) {
    return colors.STRAWBERRY;
  }
  if (props.disabled && !props.protected) {
    return colors.GREY_32;
  }
  return colors.CARBON;
};

background: white;
  margin-top: 1em;
  padding: 8px;
  position: sticky;
  top: 0;
  border: solid ${colors.SUGAR};
  border-width: 8px 0;
`;
const Item = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: 8px;
  align-items: center;
  background: white;
  color: ${colors.CARBON};
`;
const IconWrapper = styled.div`
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const sizes = {
  Sm: 24,
  Md: 40,
  Lg: 100,
};

const grouped = Object.keys(icons).reduce((acc, iconName) => {
  const Icon = icons[iconName];