const namespace = 'wi-admin';

function genThemeColor(branchName) {
	return {
		'light-3': `var(--${namespace}-color-${branchName}-light-3)`,
		'light-5': `var(--${namespace}-color-${branchName}-light-5)`,
		'light-7': `var(--${namespace}-color-${branchName}-light-7)`,
		'light-8': `var(--${namespace}-color-${branchName}-light-8)`,
		'light-9': `var(--${namespace}-color-${branchName}-light-9)`,
		main: `var(--${namespace}-color-${branchName})`,
		'dark-2': `var(--${namespace}-color-${branchName}-dark-2)`,
	};
}

/** @type {import('tailwindcss').Config} */
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: {
		extend: {
			colors: {
				// 直接使用css变量
				primary: genThemeColor('primary'),
				success: genThemeColor('success'),
				warning: genThemeColor('warning'),
				danger: genThemeColor('danger'),
				info: genThemeColor('info'),
			},
			backgroundColor: {
				default: `var(--${namespace}-bg-color)`,
				page: `var(--${namespace}-bg-color-page)`,
				overlay: `var(--${namespace}-bg-color-overlay)`,
				disabled: `var(--${namespace}-disabled-bg-color)`,
			},
			textColor: {
				'color-default': `var(--${namespace}-text-color-primary)`,
				regular: `var(--${namespace}-text-color-regular)`,
				secondary: `var(--${namespace}-text-color-secondary)`,
				placeholder: `var(--${namespace}-text-color-placeholder)`,
				disabled: `var(--${namespace}-text-color-disabled)`,
			},
			borderRadius: {
				base: `var(--${namespace}-border-radius-base)`,
				small: `var(--${namespace}-border-radius-small)`,
				round: `var(--${namespace}-border-radius-round)`,
				circle: `var(--${namespace}-border-radius-circle)`,
			},
			borderColor: {
				'color-default': `var(--${namespace}-border-color)`,
				light: `var(--${namespace}-border-color-light)`,
				lighter: `var(--${namespace}-border-color-lighter)`,
				extraLight: `var(--${namespace}-border-color-extra-light)`,
				dark: `var(--${namespace}-border-color-dark)`,
				darker: `var(--${namespace}-border-color-darker)`,
				hover: `var(--${namespace}-border-color-hover)`,
				disabled: `var(--${namespace}-disabled-border-color)`,
			},
			borderWidth: {
				'w-default': `var(--${namespace}-border-width)`,
			},
			fontFamily: {
				'family-default': `var(--${namespace}-font-family)`,
			},
			fontWeight: {
				'weight-default': `var(--${namespace}-font-weight-primary)`,
			},

			fontSize: {
				'extra-small': `var(--${namespace}-font-size-extra-small)`,
				small: `var(--${namespace}-font-size-small)`,
				base: `var(--${namespace}-font-size-base)`,
				medium: `var(--${namespace}-font-size-medium)`,
				large: `var(--${namespace}-font-size-large)`,
				'extra-large': `var(--${namespace}-font-size-extra-large)`,
			},
			lineHeight: {
				default: `var(--${namespace}-font-line-height-primary)`,
			},
			transitionDuration: {
				default: `var(--${namespace}-transition-duration)`,
				fast: `var(--${namespace}-transition-duration-fast)`,
			},
		},
	},
	plugins: [],
};