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

// function genSimilarColorsName(brandName) {
// 	return {
// 	  lighter: `var(--${brandName}-lighter-color)`,
// 	  light: `var(--${brandName}-light-color)`,
// 	  DEFAULT: `var(--${brandName}-color)`,
// 	  deep: `var(--${brandName}-deep-color)`,
// 	  deeper: `var(--${brandName}-deeper-color)`
// 	};
//   }
function withOpacityValue(variable) {
	// 返回一个函数，透明度为可选参数，这样在 HTML 元素中使用颜色基础类时，既可以采用 text-blue-500 方式，也支持 text-blue-500/20 快捷同时设置透明度的形式
	return ({ opacityValue }) => {
		if (opacityValue === undefined) {
			return `rgb(var(${variable}))`;
		}
		return `rgba(var(${variable}), ${opacityValue})`;
	};
}

export default {
	content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
	corePlugins: {
		// preflight 会修改元素的默认样式
		// NOTE: 已知的改为 true 的问题：1）html2canvas 生成的图片因为 image display 改变导致文字整体偏下；
		// 2）i 标签 display 修改，导致布局错误；3）border 颜色默认值不是黑色
		preflight: false,
	},
	// theme: {
	// 	// ...
	// 	// 修改Tailwind主题色配置，使用我们设计的这一套颜色
	// 	colors: {
	// 	  white: '#fff',
	// 	  black: '#191919',
	// 	  transparent: 'transparent',
	// 	  // 直接使用css变量
	// 	  primary: genSimilarColorsName('primary'),
	// 	  info: genSimilarColorsName('info'),
	// 	  success: genSimilarColorsName('success'),
	// 	  warning: genSimilarColorsName('warning'),
	// 	  danger: genSimilarColorsName('danger')
	// 	}
	//   },
	theme: {
		extend: {
			colors: {
				primary: {
					DEFAULT: '#1989fa',
					light: '#40a9ff',
					dark: '#096dd9',
				},
				info: {
					DEFAULT: '#909399',
					light: '#a6a9ad',
					dark: '#82848a',
				},
				success: {
					DEFAULT: '#67c23a',
					light: '#85ce61',
					dark: '#529b2e',
				},
				warning: {
					DEFAULT: '#e6a23c',
					light: '#ebb563',
					dark: '#b88230',
				},
				danger: {
					DEFAULT: '#f56c6c',
					light: '#f78989',
					dark: '#c45656',
				},
			},
			backgroundColor: {
				// 此处用来定义主题的背景色基础样式
				skin: {
					bg: withOpacityValue('--color-bg-base'),
					bgExr: withOpacityValue('--color-bg-base-exr'),
					bgSide: withOpacityValue('--color-bg-side'),
					bgBorder: withOpacityValue('--color-bg-border'),
					fo: withOpacityValue('--color-text-font'),
					card: withOpacityValue('--color-bg-card'),
					btn: withOpacityValue('--color-bg-btn'),
					avatar: withOpacityValue('--color-bg-avatar'),
					'btn-hover': withOpacityValue('--color-bg-btn-hover'),
				},
			},
			textColor: {
				// 文本的基础样式
				primary: 'var(--color-text-base)',
				'btn-base': 'var(--color-btn-base)',
			},
		},
	},
	plugins: [require('@tailwindcss/typography')],
};