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

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

  if (!props.checked) {
    return css`
      border-color: ${colors.INDIGO_MILK_CAP};
    `;
  }

  return css`
    color: ${colors.INDIGO_MILK_CAP};
    background-color: #ffffff;
    border-color: ${colors.INDIGO_MILK_CAP};
  `;

  /* eslint-enable consistent-return */
};

import styled, { css } from "styled-components";
import { transparentize } from "polished";
import { colors } from "@crave/farmblocks-theme";

const hoverBgColor = transparentize(0.94, colors.INDIGO_MILK_CAP);
const hoverChildBgColor = transparentize(0.9, colors.BLUE_CORN);

// Equivalent to GREY_16 over white
// Semi-transparent borders don't work well with colSpan
const borderColor = "#d3dadc";

const border = `1px solid ${borderColor}`;
const borderTop = props =>
  props.selectionHeaderVisible &&
  css`
    border-top: none;
  `;

const stickyHeaderCss = ({ stickyHeader, stickyHeaderTopOffset }) =>
  stickyHeader &&
  css`

padding-right: 16px;
    }

    &.corner-icon {
      position: relative;
      padding-left: 40px;
    }

    /* corner icon for grouped rows */
    &.corner-icon:before {
      content: "";
      float: left;
      box-sizing: border-box;
      width: 8px;
      height: 8px;
      border-left: 2px solid ${colors.INDIGO_MILK_CAP};
      border-bottom: 2px solid ${colors.INDIGO_MILK_CAP};
      position: absolute;
      top: calc(50% - 3px);
      left: 16px;
    }

    & .checkbox {
      height: 16px;

      label {
        /*  Increase the hit area of the checkbox
            This is important for tables with onRowClick */
        padding: 8px;
        margin: -8px;
      }
    }

OFF_NEUTRAL,
} from "./buttonTypes";

export default {
  [PRIMARY]: {
    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,

import { colors as colorConstants } from "@crave/farmblocks-theme";

import linkTypes from "./linkTypes";

export default {
  [linkTypes.FEATURED]: colorConstants.BLUE_CORN,
  [linkTypes.NEUTRAL]: colorConstants.INDIGO_MILK_CAP,
  [linkTypes.NORMAL]: colorConstants.BLUE_CORN,
  [linkTypes.WHITE]: colorConstants.WHITE_56,
};

SECONDARY,
  POSITIVE,
  NEGATIVE,
  CLOSED,
  OFF_NEUTRAL,
} from "./buttonTypes";

export default {
  [PRIMARY]: {
    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,

import { colors as colorConstants } from "@crave/farmblocks-theme";

import AlertTypes from "./alertTypes";

export default {
  [AlertTypes.NEWS]: colorConstants.INDIGO_MILK_CAP,
  [AlertTypes.POSITIVE]: colorConstants.LETTUCE,
  [AlertTypes.NEGATIVE]: colorConstants.STRAWBERRY,
  [AlertTypes.ATTENTION]: colorConstants.CORN,
};

const StyledInfo = styled.div`
	display: flex;
	align-items: baseline;

	.icon {
		display: inline-block;
		margin: 0 4px;
		cursor: pointer;
		color: ${colorConstants.OYSTER};
		.farmblocks-icon {
			font-size: 1.2em;
		}
	}

	.icon:hover, .hovered {
		color: ${colorConstants.INDIGO_MILK_CAP};
	}

}`;

export default StyledInfo;

const enabledStyles = props =>
  (props.disabled &&
    css`
      .visibleInput {
        color: ${colors.GREY_16};
        background: currentColor;
      }
    `) ||
  css`
    cursor: pointer;
    &:hover .visibleInput,
    & .hiddenInput:focus + .visibleInput {
      color: ${colors.INDIGO_MILK_CAP};
      border-width: 2px;
    }
  `;

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;
};