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

);

// story helper components

const TopNav = styled.div`
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 8px;
  height: 56px;
  box-shadow: 0px 1px 1px 0px ${colors.GREY_32};
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: white;
  z-index: ${({ isPush }) => (!isPush ? 90 : 101)};
`;

const NavHeader = styled.div`
  display: flex;
  align-items: center;
  padding: 8px;
  min-height: 56px;
  box-sizing: border-box;
  overflow-x: hidden;
`;

const switchBackground = props => {
  if (props.disabled) {
    return colors.GREY_32;
  }
  if (props.checked) {
    return colors.LETTUCE;
  }
  return colors.SUGAR;
};

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

import tagTypes from "../../constants/tagTypes";

const rightPadding = props => (props.removable ? "1px" : "8px");

const typeStyles = {
  [tagTypes.SECONDARY]: css`
    background-color: ${colorConstants.INDIGO_MILK_CAP};
    color: white;

    &: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};
    }
  `,

[FULLSCREEN]: fullScreenStyle,
  [OVERLAY]: overlayStyle,
  [PUSH]: pushStyle,
};

export const SideBar = styled.nav`
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  ${({ position }) => position}: 0;
  top: ${({ offsetTop }) => offsetTop};
  overflow-x: hidden;
  transition: width 0.25s, padding-right 0.25s, padding-left 0.25s;
  transition-timing-function: ease-in-out;
  background: ${({ backgroundColor }) => backgroundColor};
  box-shadow: 0px 2px 2px 0px ${colors.GREY_32};
  z-index: ${({ zIndex }) => zIndex};

  ${({ variant }) => variantsStyle[variant] || ""};
`;

SideBar.propTypes = {
  backgroundColor: PropTypes.string.isRequired,
  collapsedWidth: PropTypes.string.isRequired,
  expandedWidth: PropTypes.string.isRequired,
  variant: PropTypes.oneOf([PUSH, FULLSCREEN, OVERLAY]).isRequired,
  render: PropTypes.func,
  offsetTop: PropTypes.string,
  expanded: PropTypes.bool,
  highlightColor: PropTypes.string,
  zIndex: PropTypes.number,
  position: PropTypes.oneOf(["right", "left"]),

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

left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  ${space}
  ${flexbox}
`;

export const Overlay = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: ${colors.GREY_32};
`;

export const CardWrapper = styled(animated.div)`
  max-width: 100%;
  max-height: 100%;
`;

export const ConstrainedCard = styled(Card)`
  max-height: 100%;
  max-width: 100%;
  min-width: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: none;
  overflow: hidden;

${props => -(props.activeItem * stepDistance(props))}px
    );
    transition: transform ${props => props.itemConfig.transitionTime}s;
    will-change: transform;

    li {
      margin: ${props => props.itemConfig.margin}px;
      min-width: ${props => props.itemConfig.width}px;
      width: ${props => props.itemConfig.width}px;
      height: ${props => props.itemConfig.height}px;

      transition: all ${props => props.itemConfig.transitionTime}s;
      will-change: transform;

      .image {
        box-shadow: 0 4px 40px 0 ${colors.GREY_32};
      }

      &.active {
        transform: scale(${scale});
        transform-origin: bottom;
        margin: 0 ${activeItemMargin}px;
      }
    }
  }
`;

export default Container;

      color: ${props => (props.disabled ? colors.GREY_32 : colors.CARBON)};
      background: none;

import styled, { css } from "styled-components";
import { colors } from "@crave/farmblocks-theme";
import { TOP, CENTER } from "./constants/positions";

const Container = styled.div`
  position: relative;
  z-index: ${props => props.zIndex};

  @media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: ${colors.GREY_32};
    position: fixed;
  }
`;

const centerAlignment = css`
  left: 50%;
  transform: translateX(-50%);
`;

const positionXStyle = coordinate => ({ positionX }) => {
  if (positionX === CENTER) {
    return centerAlignment;
  }

  return css`
    ${positionX}: ${coordinate};

&.fade-enter-done {
    transform: scale(1);
    opacity: 1;
  }
`;

const interactiveStyle = css`
  cursor: pointer;

  bottom: ${props => props.pinSize / 2 + 8}px;

  color: ${colors.GREY_16};

  &:active {
    transform: translateY(2px);
    color: ${colors.GREY_32};
  }
`;
const Balloon = styled(Card).attrs({ overflow: "hidden", p: 0 })`
  ${props => props.animated && animation};
  position: absolute;
  bottom: ${props => props.pinSize + 8}px;

  ${props => alignStyles[props.align]};

  height: ${props => props.balloonSize}px;
  width: ${props => props.balloonSize}px;
  padding: 0;
  border-radius: ${props => props.borderRadius};
  border: none;
  box-shadow: 0 2px 16px 0 ${colors.GREY_16};