import { createTheme } from "@shopify/restyle";

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",
};

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,
	},
	spacing: {
		s: 8,
		m: 16,
		l: 24,
		xl: 40,
		// full: "100%",
	},
	breakpoints: {
		phone: 0,
		tablet: 768,
	},
	textVariants: {
		header: {
			fontWeight: "bold",
			fontSize: 34,
		},
		body: {
			fontSize: 16,
			lineHeight: 24,
		},
		defaults: {
			// We can define a default text variant here.
		},
		primary: {
			color: "primary",
		},
		secondary: {
			color: "secondary",
		},
	},
	cardVariants: {
		defaults: {
			// We can define defaults for the variant here.
			// This will be applied after the defaults passed to createVariant and before the variant defined below.
		},
		regular: {
			// We can refer to other values in the theme here, and use responsive props
			padding: {
				phone: "s",
				tablet: "m",
			},
		},
		elevated: {
			padding: {
				phone: "s",
				tablet: "m",
			},
			shadowColor: "black",
			shadowOpacity: 0.5,
			shadowOffset: { width: 10, height: 10 },
			shadowRadius: 10,
			elevation: 5,
		},
	},
	buttonVariants: {
		defaults: {
			// We can define defaults for the variant here.
		},
		full: {
			backgroundColor: "secondary",
			color: "white",
		},
		clean: {
			backgroundColor: "primary",
			color: "secondary",
		},
	},
});

export type Theme = typeof theme;
export default theme;