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

const hoverStyles = props => {
  /* eslint-disable consistent-return */

  if (props.disabled) {
    return;
  }

  if (props.switch) {
    if (props.checked) {
      return css`
        background: ${colors.AVOCADO};
        border-color: ${colors.GREY_16};
        .toggle {
          border-color: ${colors.LETTUCE};
          left: 22px;
        }
      `;
    }

    return css`
      background: ${colors.SUGAR};
      border-color: ${colors.INDIGO_MILK_CAP};
      .toggle {
        border-color: ${colors.INDIGO_MILK_CAP};
        left: 10px;
      }
    `;

color: colorConstants.TANGERINE,
    hoverColor: colorConstants.TANGERINE_2,
  },
  [NEUTRAL]: {
    textColor: colorConstants.OYSTER,
    iconColor: colorConstants.GREY_32,
    textHoverColor: colorConstants.INDIGO_MILK_CAP,
    color: "#FFFFFF",
  },
  [SECONDARY]: {
    color: colorConstants.INDIGO_MILK_CAP,
    hoverColor: colorConstants.BLUE_CORN,
  },
  [POSITIVE]: {
    color: colorConstants.LETTUCE,
    hoverColor: colorConstants.AVOCADO,
  },
  [NEGATIVE]: {
    color: colorConstants.STRAWBERRY,
    hoverColor: colorConstants.TOMATO,
  },
  [CLOSED]: {
    color: colorConstants.GRAPE,
    hoverColor: colorConstants.EGGPLANT,
  },
  [OFF_NEUTRAL]: {
    color: colorConstants.GREY_16,
    hoverColor: colorConstants.INDIGO_MILK_CAP,
  },
};

export const SideNavOverlayWithRouter = withRouter(({ location }) => {
  const [expanded, { toggle, collapse }] = useToggle(false);

  const highlightColor = colors.AVOCADO;
  const handleClick = expanded ? collapse : undefined;

  return (
    <>
       (
          <>