import { css } from "styled-components";
import { color } from "../../getters";

const bgGray1 = css`
  background-color: ${color("gray.50")};
`;

const bgGray2 = css`
  background-color: ${color("gray.100")};
`;

const bgGray3 = css`
  background-color: ${color("gray.200")};
`;

const bgGray4 = css`
  background-color: ${color("gray.300")};
`;
const bgGray5 = css`
  background-color: ${color("gray.400")};
`;

const bgGray6 = css`
  background-color: ${color("gray.500")};
`;

export { bgGray1, bgGray2, bgGray3, bgGray4, bgGray5, bgGray6 };