-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathuno.config.ts
103 lines (102 loc) · 2.41 KB
/
uno.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import {
defineConfig,
presetUno,
presetAttributify,
presetIcons,
transformerDirectives,
transformerVariantGroup
} from 'unocss'
export default defineConfig({
// 添加 windicss 预设、属性化模式
presets: [
presetUno(),
presetAttributify(),
presetIcons({
warn: true,
collections: {
app: FileSystemIconLoader('./src/assets/icons')
}
})
],
// 提供指令功能
transformers: [transformerDirectives(), transformerVariantGroup()],
theme: {
colors: {
root_light: '#f5f6fa', // 最底层背景
root_dark: '#272727',
page_light: '#ffffff', // 基础布局背景
page_dark: '#18181B',
primary: 'var(--el-color-primary)',
main: 'var(--el-text-color-primary)',
regular: 'var(--el-text-color-regular)',
secondary: 'var(--el-text-color-secondary)',
placeholder: 'var(--el-text-color-placeholder)',
light: 'var(--el-color-info-light-9)',
light_hover: 'var(--el-color-info-light-8)'
},
height: {
header: '64px',
footer: '50px',
tab: 'var(--tab-view-height)',
content: 'var(--content-base-height)'
},
minHeight: {
content: 'var(--content-base-height)'
}
},
shortcuts: [
{
'bg-root': 'bg-root_light dark:bg-root_dark'
},
{
'bg-page': 'bg-page_light dark:bg-page_dark'
},
{
'transition-base': 'transition-all duration-150 ease-in-out'
},
{
'page-base': 'min-h-content overflow-x-hidden box-border'
},
{
'page-card': 'page-base bg-page rounded px-6 py-5'
},
{
'page-pure': 'page-base bg-page rounded h-content'
},
{
'flex-center': 'flex items-center justify-center'
}
],
// 自定义规则
rules: [
[
'text-brand-gradient',
{
'color': 'transparent',
'background-image': 'linear-gradient(to right, #00ff8f, #00a1ff)',
'background-clip': 'text'
}
],
[
'bg-gradient-light',
{
'background-image':
'linear-gradient( 135deg, #ABDCFF30 20%, #0396FF20 100%)'
}
],
[
'bg-gradient-dark',
{
'background-image':
'linear-gradient( 135deg, #2A5470 20%, #4C4177 100%)'
}
],
[
'shadow-card-dark',
{
'box-shadow': '0 0 12px 0 rgb(0 0 0 / 9%)'
}
]
]
})