import type { Config } from "tailwindcss";

export default {
	prefix: "bn-",
	content: ["./src/**/*.{js,jsx,tx,tsx}"],
	corePlugins: {
		preflight: false,
	},
	theme: {
		extend: {
			textColor: {
				primary: "rgb(var(--bn-textPrimary) / <alpha-value>)",
				secondary: "rgb(var(--bn-textSecondary) / <alpha-value>)",
				theme: "rgb(var(--bn-themePrimary) / <alpha-value>)",
				accent: "rgb(var(--bn-accent) / <alpha-value>)",
				accent2: "rgb(var(--bn-accent2) / <alpha-value>)",
				button: "rgb(var(--bn-textButton) / <alpha-value>)",
				fail: "rgb(var(--bn-textFail) / <alpha-value>)",
				success: "rgb(var(--bn-textSuccess) / <alpha-value>)",
			},
			backgroundColor: {
				"layer-1": "rgb(var(--bn-bgLayer1) / <alpha-value>)",
				"layer-2": "rgb(var(--bn-bgLayer2) / <alpha-value>)",
				"layer-3": "rgb(var(--bn-bgLayer3) / <alpha-value>)",
				theme: "rgb(var(--bn-themePrimary) / <alpha-value>)",
				accent: "rgb(var(--bn-accentBg) / <alpha-value>)",
				accent2: "rgb(var(--bn-accentBg2) / <alpha-value>)",
				fail: "rgb(var(--bn-bgFail) / <alpha-value>)",
				success: "rgb(var(--bn-bgSuccess) / <alpha-value>)",
			},
			borderColor: {
				primary: "rgb(var(--bn-borderPrimary) / <alpha-value>)",
				accent: "rgb(var(--bn-accent) / <alpha-value>)",
				fail: "rgb(var(--bn-textFail) / <alpha-value>)",
			},
			animation: {
				"slide-in-out": "slide-in-out 3.5s linear infinite",
			},
			keyframes: {
				"slide-in-out": {
					"0%": { transform: "translateX(-100%)" },
					"50%": { transform: "translateX(0)" },
					"100%": { transform: "translateX(100%)" },
				},
			},
		},
	},
} satisfies Config;
