import { defineConfig, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss';

export default defineConfig({
	// include: ['/src/**.{vue,html,tsx,ts}'],
	// include: ['./index.html', './src/**/*.{vue,ts,tsx,md}'],
	exclude: ['node_modules', '.git', '.husky', '.vscode', 'dist', 'public', 'build', 'mock', './stats.html'],
	presets: [presetUno()],
	transformers: [
		transformerDirectives(),
		transformerVariantGroup(),
	],
	shortcuts: {
		// 外层盒子类型
		// box-row：横向布局
		// box-col：竖向布局

		// 直属内部元素类型
		// sider： 横向布局 是左右两侧   竖向布局是 上下两侧
		// content: 内容区 超出隐藏
		// body: 内容区 超出滚动 （ 不推荐使用这个类 建议使用 el-scrollbar 组件 搭配content ）
		
		'box-col': 'flex flex-col w-full h-full [&>.content]:h-full',
		'box-row': 'flex flex-row w-full [&>.sider]:h-full',
		'sider': 'flex-grow-0 flex-shrink-0 flex-basis-auto',
		'body': 'flex-grow-1 flex-shrink-1 flex-basis-100% overflow-auto', 
		'content': 'body overflow-hidden',

		'wh-full': 'w-full h-full',
		
		'flex-center': 'flex items-center justify-center',

		// 针对 spacing 配置 补充
		'p': 'px py',
		'm': 'mx my',
		
	},
	rules: [
		['bg', { 'background-color': 'var(--el-bg-color)'} ],
		['bg-page', { 'background-color': 'var(--el-bg-color-page)'} ],
		['bg-overlay', { 'background-color': 'var(--el-bg-color-overlay)' }],
		['bg-disabled', { 'background-color': 'var(--el-disabled-bg-color)' }],
		
		['text', { color: 'var(--el-text-color-primary)'} ],
		['text-regular', { color: 'var(--el-text-color-regular)'} ],
		['text-secondary', { color: 'var(--el-text-color-secondary)'} ],
		['text-placeholder', { color: 'var(--el-text-color-placeholder)'} ],
		['text-disabled', { color: 'var(--el-text-color-disabled)' }],
		
		['border-color', { 'border-color': 'var(--el-border-color)'} ],
		['border-color-light', { 'border-color': 'var(--el-border-color-light)'} ],
		['border-color-lighter', { 'border-color': 'var(--el-border-color-lighter)' }],
	],
	theme: {
		colors: {
			main: 'var(--el-color-primary)',
			/* 主题色 */
			'primary':{
				DEFAULT:'var(--el-color-primary)',
				2: 'var(--el-color-primary-dark-2)',
				3: 'var(--el-color-primary-light-3)',
				5: 'var(--el-color-primary-light-5)',
				7: 'var(--el-color-primary-light-7)',
				8: 'var(--el-color-primary-light-8)',
				9: 'var(--el-color-primary-light-9)',
			},

			/* 成功色 */
			'success':{
				DEFAULT:'var(--el-color-success)',
				2: 'var(--el-color-success-dark-2)',
				3: 'var(--el-color-success-light-3)',
				5: 'var(--el-color-success-light-5)',
				7: 'var(--el-color-success-light-7)',
				8: 'var(--el-color-success-light-8)',
				9: 'var(--el-color-success-light-9)',
			},

			/* 警告色 */
			'warning':{
				DEFAULT: 'var(--el-color-warning)',
				2: 'var(--el-color-warning-dark-2)',
				3: 'var(--el-color-warning-light-3)',
				5: 'var(--el-color-warning-light-5)',
				7: 'var(--el-color-warning-light-7)',
				8: 'var(--el-color-warning-light-8)',
				9: 'var(--el-color-warning-light-9)',
			},
			/* 错误色 */
			'error':{
				DEFAULT: 'var(--el-color-error)',
				2: 'var(--el-color-error-dark-2)',
				3: 'var(--el-color-error-light-3)',
				5: 'var(--el-color-error-light-5)',
				7: 'var(--el-color-error-light-7)',
				8: 'var(--el-color-error-light-8)',
				9: 'var(--el-color-error-light-9)',
			},

			/* 信息色 */
			'info':{
				DEFAULT: 'var(--el-color-info)',
				2: 'var(--el-color-info-dark-2)',
				3: 'var(--el-color-info-light-3)',
				5: 'var(--el-color-info-light-5)',
				7: 'var(--el-color-info-light-7)',
				8: 'var(--el-color-info-light-8)',
				9: 'var(--el-color-info-light-9)',
			}
		},
		spacing: {
			xl: '48px',
			lg: '24px',
			DEFAULT:'20px', // 基础尺寸 default 配置无效 
			md: '16px',  
			sm: '8px',
			xs: '4px',
		},
		fontSize: {
			xl: ['var(--el-font-size-extra-large)',''],
			lg: ['var(--el-font-size-large)',''],
			md: ['var(--el-font-size-medium)',''],
			DEFAULT: ['var(--el-font-size-base)',''],
			sm: ['var(--el-font-size-small)',''],
			xs: ['var(--el-font-size-extra-small)','']
		}
	}
});