import { colors } from "./colors";
import borderWidths from "./borderWidths";

export const buttonColors = {
  primary: {
    color: colors.grey.pastel,
    backgroundColor: colors.blue.haptik,
  },
  secondary: {
    color: colors.blue.haptik,
    backgroundColor: colors.grey.pastel,
    borderWidth: borderWidths.xs,
    borderColor: colors.blue.haptik,
  },
  danger: {
    color: colors.red.deep,
    backgroundColor: colors.red.pastel,
    borderWidth: borderWidths.xs,
    borderColor: colors.red.deep,
  },
  warning: {
    color: colors.yellow.deep,
    backgroundColor: colors.yellow.pastel,
    borderWidth: borderWidths.xs,
    borderColor: colors.yellow.deep,
  },
  disabled: {
    color: colors.grey.dark,
    backgroundColor: colors.grey.haptik,
    borderWidth: borderWidths.xs,
    borderColor: colors.grey.haptik,
    "&:hover": {
      cursor: "not-allowed",
      boxShadow: "none",
    },
  },
  success: {
    color: colors.grey.pastel,
    backgroundColor: colors.green.haptik,
  },
};

export const buttonSizes = {
  small: {
    fontSize: "1",
  },
  medium: {
    fontSize: "2",
  },
  large: {
    fontSize: "3",
    padding: "12px 24px",
  },
};
