/** @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: {
		  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")],
};