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

To help you get started, we’ve selected a few @crave/farmblocks-theme examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github CraveFood / farmblocks / packages / more-info / src / styledComponents / StyledInfo.js View on Github external
import styled from "styled-components";
import { colors as colorConstants } from "@crave/farmblocks-theme";

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;
github CraveFood / farmblocks / packages / dropdown / src / styledComponents / DropdownItemWrapper.js View on Github external
const fontColor = props => {
  if (props.selected && !props.highlighted) {
    return colorConstants.INDIGO_MILK_CAP;
  }

  return colorConstants.OYSTER;
};
github CraveFood / farmblocks / packages / button / src / constants / colorTypes.js View on Github external
PRIMARY,
  NEUTRAL,
  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,
  },
github CraveFood / farmblocks / packages / tag / src / components / styledComponent / StyledTag.js View on Github external
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;
  `,
};

const StyledTag = styled.div`