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-text-primary) / <alpha-value>)",
				secondary: "rgb(var(--bn-text-secondary) / <alpha-value>)",
				button: "rgb(var(--bn-text-button) / <alpha-value>)",
				theme: "rgb(var(--bn-text-theme) / <alpha-value>)",
				"accent-1": "rgb(var(--bn-text-accent-1) / <alpha-value>)",
				"accent-2": "rgb(var(--bn-text-accent-2) / <alpha-value>)",
				"accent-3": "rgb(var(--bn-text-accent-3) / <alpha-value>)",
				"accent-4": "rgb(var(--bn-text-accent-4) / <alpha-value>)",
			},
			fill: {
				primary: "rgb(var(--bn-text-primary) / <alpha-value>)",
				secondary: "rgb(var(--bn-text-secondary) / <alpha-value>)",
				theme: "rgb(var(--bn-text-theme) / <alpha-value>)",
				accent: "rgb(var(--bn-text-accent-1) / <alpha-value>)",
				accent2: "rgb(var(--bn-text-accent-2) / <alpha-value>)",
				button: "rgb(var(--bn-text-button) / <alpha-value>)",
				fail: "rgb(var(--bn-text-accent-4) / <alpha-value>)",
				success: "rgb(var(--bn-text-accent-3) / <alpha-value>)",
			},
			backgroundColor: {
				main: "rgb(var(--bn-grey-800) / <alpha-value>)",
				"layer-1": "rgb(var(--bn-bg-layer-1) / <alpha-value>)",
				"layer-2": "rgb(var(--bn-bg-layer-2) / <alpha-value>)",
				"layer-3": "rgb(var(--bn-bg-layer-3) / <alpha-value>)",
				"accent-1": "rgb(var(--bn-bg-accent-1) / <alpha-value>)",
				"accent-3": "rgb(var(--bn-bg-accent-3) / <alpha-value>)",
				"accent-4": "rgb(var(--bn-bg-accent-4) / <alpha-value>)",
				theme: "rgb(var(--bn-text-theme) / <alpha-value>)",
				// background from text colors
				"accent-3-text": "rgb(var(--bn-text-accent-3) / <alpha-value>)",
				"accent-4-text": "rgb(var(--bn-text-accent-4) / <alpha-value>)",
				"text-secondary": "rgb(var(--bn-text-secondary) / <alpha-value>)",

				// need to work on this
				accentBg2: "rgb(var(--bn-violet-900) / <alpha-value>)",
			},
			borderColor: {
				strong: "rgb(var(--bn-border-strong) / <alpha-value>)",
				theme: "rgb(var(--bn-border-theme) / <alpha-value>)",
				subtle: "rgb(var(--bn-border-subtle) / <alpha-value>)",

				// need to work on this
				// error: "rgb(var(--bn-yellow-200) / <alpha-value>)",
				// warning: "rgb(var(--bn-orange-300) / <alpha-value>)",
			},
			icon: {
				primary: "rgb(var(--bn-grey-50) / <alpha-value>)",
				secondary: "rgb(var(--bn-grey-200) / <alpha-value>)",
				theme: "rgb(var(--bn-yellow-400) / <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;
