84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import type { Preset } from 'unocss';
|
|
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders';
|
|
import { presetUni } from '@uni-helper/unocss-preset-uni';
|
|
import { presetLegacyCompat } from '@unocss/preset-legacy-compat';
|
|
import { defineConfig, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
|
|
|
|
export default defineConfig({
|
|
presets: [
|
|
// https://uni-helper.js.org/unocss-preset-uni
|
|
presetUni({
|
|
attributify: {
|
|
prefixedOnly: true,
|
|
},
|
|
}),
|
|
// https://unocss.dev/presets/icons
|
|
presetIcons({
|
|
scale: 1.2,
|
|
warn: true,
|
|
extraProperties: {
|
|
'display': 'inline-block',
|
|
'vertical-align': 'middle',
|
|
},
|
|
// 自定义图标
|
|
collections: {
|
|
// 从本地文件系统加载 svg 图标
|
|
'my-icons': FileSystemIconLoader('./src/static/icons'),
|
|
// 从在线图标库加载图标
|
|
// 'my-online-icons': async (iconName) => {
|
|
// return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text());
|
|
// },
|
|
},
|
|
}),
|
|
/**
|
|
* 启用 legacy-compat 模式(处理低端安卓机的样式问题)
|
|
* @see https://unocss.dev/presets/legacy-compat
|
|
*/
|
|
presetLegacyCompat({
|
|
commaStyleColorFunction: true,
|
|
legacyColorSpace: true,
|
|
}) as Preset,
|
|
],
|
|
/**
|
|
* 自定义快捷语句
|
|
* @see https://github.com/unocss/unocss#shortcuts
|
|
*/
|
|
shortcuts: {
|
|
'border-base': 'border border-[var(--border-primary)]',
|
|
'center': 'flex justify-center items-center',
|
|
},
|
|
rules: [
|
|
['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
|
|
],
|
|
theme: {
|
|
colors: {
|
|
// 主题颜色
|
|
'primary': 'var(--brand-primary)',
|
|
'secondary': 'var(--brand-secondary)',
|
|
'tertiary': 'var(--brand-tertiary)',
|
|
'success': 'var(--color-success)',
|
|
'warning': 'var(--color-warning)',
|
|
'error': 'var(--color-error)',
|
|
// 文字颜色
|
|
'text-main': 'var(--text-primary)',
|
|
'text-content': 'var(--text-secondary)',
|
|
'text-tips': 'var(--text-tertiary)',
|
|
'text-light': 'var(--text-quaternary)',
|
|
'text-disabled': 'var(--text-quaternary)',
|
|
// 背景颜色
|
|
'bg-main': 'var(--bg-page)',
|
|
'bg-secondary': 'var(--bg-container)',
|
|
'bg-muted': 'var(--bg-muted)',
|
|
// 边框颜色
|
|
'border-main': 'var(--border-primary)',
|
|
'border-secondary': 'var(--border-secondary)',
|
|
},
|
|
},
|
|
transformers: [
|
|
// 启用指令功能：主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
|
|
transformerDirectives(),
|
|
// 启用 () 分组功能
|
|
transformerVariantGroup(),
|
|
],
|
|
});
|