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

export const PopoverWrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 340px;
  min-width: 280px;
  @media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
    min-height: calc(100vh - 32px);
  }
`;

export const CountryListWrapper = styled.ul`
  padding: 0;
  margin: 0;
  border-top: solid 1px ${colors.GREY_16};
  flex: 1;
  width: 100%;
`;

export const NationalNumberInput = styled(TextInput)`
  .input {
    overflow: unset;
    @media only screen and (max-width: ${props =>
        props.tooltipProps?.fullScreenBreakpoint ||
        props.fullScreenBreakpoint}) {
      input {
        /* This prevents iOS from zooming in the input on focus */
        font-size: 16px;
      }
    }
  }

const checkboxColors = props => {
  if (props.disabled) {
    return css`
      color: ${colors.GREY_16};
      background-color: ${colors.GREY_16};
      border-color: ${colors.GREY_16};
    `;
  }
  return css`
    color: ${props.checked ? "#FFFFFF" : colors.INDIGO_MILK_CAP};
    background-color: ${props.checked ? colors.INDIGO_MILK_CAP : "#FFFFFF"};
    border-color: ${props.checked ? colors.INDIGO_MILK_CAP : colors.GREY_16};
  `;
};

&:hover {
      border-color: ${colorConstants.GREY_32};
      background-color: ${colorConstants.BLUE_CORN};
    }

    &:hover .close-icon,
    &:focus .close-icon {
      color: white;
    }
  `,
  [tagTypes.NEUTRAL]: css`
    background-color: ${colorConstants.SUGAR};
    color: ${colorConstants.OYSTER};

    &:hover {
      background-color: ${colorConstants.GREY_16};
    }
  `,
};

const disabledStyles = {
  [tagTypes.SECONDARY]: css`
    background-color: ${colorConstants.GREY_32};
    pointer-events: none;
    padding: 6px 14px 8px 15px;
  `,
};

const StyledTag = styled.div`
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;

return props.floating
    ? `0 4px 4px 0 ${colors.GREY_16}`
    : `0 1px 1px 0 ${colors.GREY_16}`;
};

const backgroundColor = props => {
  return Object.keys(cardTypeColors).includes(props.type)
    ? cardTypeColors[props.type]
    : cardTypeColors[cardTypes.DEFAULT];
};

const Card = styled.div`
  background-color: ${backgroundColor};
  box-shadow: ${boxShadow};
  border: solid 1px ${colors.GREY_16};
  width: ${props => props.width};
  box-sizing: border-box;
  border-radius: 4px;
  overflow: ${props => props.overflow};
  ${space}
`;

export default Card;

const PageWrapper = styled.div`
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  ${({ offsetTop }) => offsetTop && `padding-top: ${offsetTop};`};
  ${({ variant }) => variantsStyle[variant] || ""};
`;

export const Overlay = styled.div`
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: ${colors.GREY_16};
`;

export default PageWrapper;

import styled from "styled-components";

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

const DropdownMenuWrapper = styled.div`
  margin-top: 16px;
  min-width: 100%;
  width: ${props => props.width};
  whitespace: no-wrap;
  max-height: ${props => props.maxHeight};
  overflow-y: auto;
  scroll-behavior: smooth;

  border: solid 1px ${colorConstants.GREY_16};
  border-radius: 4px;
  box-shadow: 0 4px 4px 0 ${colorConstants.GREY_16};

  background: white;

  position: absolute;
  right: ${props => props.align === "right" && 0};

  z-index: ${props => props.zIndex};

  > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
`;

customTitle={() => (
          <div style="{{">
            
          </div>
        )}
        text={() =&gt; <div>}</div>

const stickyHeaderCss = ({ stickyHeader, stickyHeaderTopOffset }) =>
  stickyHeader &&
  css`
    caption > span > div {
      z-index: 3;
      border-top: solid 1px ${colors.GREY_16};
    }
    thead .cell {
      position: sticky;
      top: ${stickyHeaderTopOffset}px;
      z-index: 2;
      border-bottom: solid 1px ${colors.GREY_16};
    }
    .tooltip {
      z-index: 120;
    }
    .body:first-of-type .cell {
      border-top: none;
    }
  `;

${({ children, header }) =>
    children &&
    `border-${header ? "bottom" : "top"}: solid 1px ${colors.GREY_16}`};

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { colors as colorConstants } from "@crave/farmblocks-theme";

import HelperContent from "./HelperContent";

const Container = styled.div`
  font-family: Lato, sans-serif;

  background-color: ${colorConstants.SUGAR};

  border-top: solid 1px ${colorConstants.GREY_16};

  padding: 16px 24px;

  display: flex;
  justify-content: space-between;
`;
Container.displayName = "FooterContainer";

const ActionsContainer = styled.div`
  display: flex;
  align-items: center;
  align: flex-end;

  > * {
    margin-left: 16px;
  }