import styling from "@devcake/styling";

styling.setDefault("components.button", "flex justify-center py-2 px-4 rounded-md shadow-sm text-sm font-semibold cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2");
styling.setDefault("components.button.disabled", "pointer-events-none bg-gray-500");
styling.setDefault("components.button.primary", "text-white");
styling.setDefault("components.button.secondary", "");
styling.setDefault("components.button.tertiary", "text-gray-700 bg-white border");

const makeColor = (color) => ({
  primary: `bg-${color}-600 hover:bg-${color}-700 focus:ring-${color}-500`,
  secondary: `text-${color}-700 bg-${color}-100 hover:bg-${color}-200 focus:ring-${color}-500`,
  tertiary: `hover:bg-${color}-50 focus:ring-${color}-500 border-${color}-300`,
});

const colors = {
  amber: makeColor("amber"),
  blue: makeColor("blue"),
  cyan: makeColor("cyan"),
  emerald: makeColor("emerald"),
  fuchsia: makeColor("fuchsia"),
  gray: makeColor("gray"),
  green: makeColor("green"),
  indigo: makeColor("indigo"),
  lightBlue: makeColor("lightBlue"),
  lime: makeColor("lime"),
  orange: makeColor("orange"),
  pink: makeColor("pink"),
  purple: makeColor("purple"),
  red: makeColor("red"),
  rose: makeColor("rose"),
  teal: makeColor("teal"),
  violet: makeColor("violet"),
  yellow: makeColor("yellow"),
};

export default colors;
