/** @type {import('tailwindcss').Config} */
import plugin from 'tailwindcss/plugin';

import tailwindcss_themer from 'tailwindcss-themer';

module.exports = {
	content: [
		'./src/pages/**/*.tsx',
		'./src/components/**/*.tsx',
		'./src/layouts/**/*.tsx',
	],
	theme: {
		extend: {
			keyframes: {
				// 变大变小动画
				scale: {
					'0%, 100%': {
						transform: 'scale(0.9)',
					},
					'40%': {
						transform: 'scale(1.0)',
					},
					'70%': {
						transform: 'scale(0.9)',
					},
				},
				// 从上方掉下来，然后在反弹回来
				bounceIn: {
					'0%': {
						transform: 'translateY(-200px)',
					},
					'80%': {
						transform: 'translateY(100px)',
					},
					'100%': {
						transform: 'translateY(0)',
					},
				},
				// 购买记录动画
				record: {
					'0%': {
						transform: 'translate(0, 30px)',
					},
					'100%': {
						transform: 'translate(0, calc(30px - 100%))',
					},
				},
			},
			colors: {
				brand: {
					100: '#FEF7D8',
					200: '#FEECB2',
					300: '#FEDE8C',
					400: '#FED16F',
					500: '#FEBB40',
					600: '#DA972E',
					700: '#B67620',
					800: '#935814',
					900: '#79430C',
				},
			},
		},
	},
	plugins: [
		plugin(function ({ addComponents }) {
			const newUtilities = {
				'.safe-top': {
					paddingTop: 'constant(safe-area-inset-top)',
					// paddingTop: "env(safe-area-inset-top)",
				},
				'.safe-left': {
					paddingLeft: 'constant(safe-area-inset-left)',
					// paddingLeft: "env(safe-area-inset-left)",
				},
				'.safe-right': {
					paddingRight: 'constant(safe-area-inset-right)',
					// paddingRight: "env(safe-area-inset-right)",
				},
				'.safe-bottom': {
					paddingBottom: 'constant(safe-area-inset-bottom)',
					// paddingBottom: "env(safe-area-inset-bottom)",
				},
				'.disable-scrollbars': {
					scrollbarWidth: 'none',
					'-ms-overflow-style': 'none',
					'&::-webkit-scrollbar': {
						width: '0px',
						background: 'transparent',
						display: 'none',
					},
					'& *::-webkit-scrollbar': {
						width: '0px',
						background: 'transparent',
						display: 'none',
					},
					'& *': {
						scrollbarWidth: 'none',
						'-ms-overflow-style': 'none',
					},
				},
				'.no-tap-highlighting': {
					'webkit-tap-highlight-color': 'rgba(0,0,0,0)',
				},
				'.shadow-normal': {
					boxShadow: '0px 2px 8px 0px #0000001A',
				},
			};

			addComponents(newUtilities);
		}),
		tailwindcss_themer({
			defaultTheme: {
				extend: {
					colors: {
						// 主色 & 功能色
						primary: {
							50: '#f0f7ff',
							100: '#e0efff',
							200: '#c9e2ff',
							300: '#a6d0ff',
							400: '#7cb6ff',
							500: '#6CA0FF', // 您的主色
							600: '#3b7de6',
							700: '#2b63c2',
							800: '#1f4b9c',
							900: '#18387d',
							950: '#0f234a',
						},

						// 您自定义的中性色（如果不想用Tailwind默认的grayscale）
						neutral: {
							darkest: '#333333',
							darker: '#666666',
							dark: '#999999',
							base: '#DDDDDD',
							light: '#EEEEEE',
							lightest: '#F8F9FA',
						},
					},
				},
			},
			themes: [
				{
					name: 'partner',
					selectors: ['.partner-mode', '[data-theme="partner"]'],
					extend: {
						colors: {
							primary: {
								50: '#fff8eb',
								100: '#ffefd1',
								200: '#ffdca8',
								300: '#ffc374',
								400: '#ffa03c',
								500: '#FF8C00', // 您的主色
								600: '#f06d00',
								700: '#c65300',
								800: '#9d4108',
								900: '#7e370b',
								950: '#441b05',
							},

							// 您自定义的中性色（如果不想用Tailwind默认的grayscale）
							neutral: {
								darkest: '#333333',
								darker: '#666666',
								dark: '#999999',
								base: '#DDDDDD',
								light: '#EEEEEE',
								lightest: '#F8F9FA',
							},
						},
					},
				},
			],
		}),
	],
	corePlugins: {
		// preflight: false,
		divideStyle: true,
	},
};