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

import { colors } from "@crave/farmblocks-theme";
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;

export const Pre = styled.pre`
  display: inline-block;
  font-size: 1rem;
  background: aliceblue;
  color: darkslateblue;
  margin: 0;
  padding: 4px;
`;

const Grid = styled.div`
  display: grid;
  grid: auto-flow min-content / repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 8px;
  padding: 8px;
  background: ${colors.SUGAR};
`;
const GroupHeader = styled(Text)`
  grid-column-start: 1;
  grid-column-end: -1;
  align-self: end;
  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;

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

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

const FooterContainer = 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;

  .button-container {
    display: flex;

    align: flex-end;

    > * {
      margin-left: 16px;
    }

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

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

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;

  > * {

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

export const cardTypes = {
  FEATURED: "FEATURED",
  NEUTRAL: "NEUTRAL",
  DEFAULT: "DEFAULT",
};

export const cardTypeColors = {
  [cardTypes.FEATURED]: colors.INDIGO_MILK_CAP,
  [cardTypes.NEUTRAL]: colors.SUGAR,
  [cardTypes.DEFAULT]: "#ffffff",
};

export default {
  cardTypes,
  cardTypeColors,
};

)}
        {render({ highlightColor, variant })}
      
    
  );
};

SideNav.defaultProps = {
  backgroundColor: colors.SUGAR,
  highlightColor: colors.RED_ORANGE,
  zIndex: 100,
  offsetTop: "0",
  collapsedWidth: "56px",
  expandedWidth: "270px",
  variant: PUSH,
  expanded: true,
  position: "left",
};

SideNav.propTypes = {
  /**
    Render the sidebar content, passing as args the following props: highlightColor, variant.
 */
  render: PropTypes.func,
  /**

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

const StyledWrapper = styled.div`
  width: 400px;
`;

const image = "https://picsum.photos/100?image=0";
const items = [
  { value: "1", label: "Apple", image },
  { value: "2", label: "Banana", image },
  { value: "3", label: "Pear", image },
];

const StyledFooterWrapper = styled.div`
  display: flex;
  align-items: center;
  padding: 16px 8px;
  background: ${colors.SUGAR};
  .icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px;
    border: solid 1px ${colors.GREY_16};
    border-radius: 12px;
    font-size: 12px;
  }
  .link {
    display: block;
  }
`;