import { createTheme } from "@shopify/restyle";
import { buttonVariants } from "./variants/buttonVariants";
import { cardVariants } from "./variants/cardVariants";
import { textVariants } from "./variants/textVariants";

const palette = {
	purpleLight: "#8C6FF7",
	purplePrimary: "#5A31F4",
	purpleDark: "#3F22AB",

	greenLight: "#56DCBA",
	greenPrimary: "#0ECD9D",
	greenDark: "#0A906E",

	black: "#0B0B0B",
	white: "#FFFFFF",
	green: "#00875A",
	lightGray: "#F4F5F7",
	gray: "#747E98",
	yellow: "#F4C44A",
	softYellow: "#E4A951",
	red: "#FF0000",
	softRed: "#C51605",
};

const theme = createTheme({
	colors: {
		primary: palette.white,
		secondary: palette.green,
		tertiary: palette.yellow,
		black: palette.black,
		white: palette.white,
		lightGray: palette.lightGray,
		gray: palette.gray,
		yellow: palette.yellow,
		softYellow: palette.softYellow,

		red: palette.red,
		softRed: palette.softRed,
	},
	spacing: {
		xxs: 2,
		xs: 4,
		s: 8,
		m: 16,
		l: 24,
		xl: 40,
		x64: 64,
		x72: 72,
		x80: 80,
		x100: 100,
		x120: 120,
		x140: 140,
		x160: 160,
		x180: 180,
		x200: 200,
		x220: 220,
		x240: 240,
		// full: "100%",
	},
	breakpoints: {
		phone: 0,
		tablet: 768,
	},
	textVariants,
	cardVariants,
	buttonVariants,
});

export type Theme = typeof theme;
export default theme;