-
Notifications
You must be signed in to change notification settings - Fork 0
/
unocss.config.ts
90 lines (89 loc) · 2.74 KB
/
unocss.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
import {
defineConfig,
presetAttributify,
presetIcons,
presetUno,
presetWebFonts,
presetWind,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
export default defineConfig({
shortcuts: [
{
'hw-full': 'h-full w-full',
'hw-screen': 'h-screen w-screen',
'flex-center': 'flex justify-center items-center',
'flex-x-center': 'flex justify-center',
'flex-y-center': 'flex items-center',
'flex-col-center': 'flex-col flex-center',
'border-base': 'border-[var(--color-neutral-3)]',
'icon-btn': 'op30 hover:op100 hover:text-primary_hover',
'bg-body': 'bg-white dark:bg-hex-232324',
'bg-nav': 'bg-white dark:bg-hex-232324',
'bg-side': 'bg-white dark:bg-hex-232324',
},
[/^btn-(\w+)$/, ([_, color]) => `op90 px2.5 py1 transition-all duration-200 ease-out no-underline! cursor-pointer hover:(text-${color} bg-${color}/10) border border-base! rounded`],
[/^tag-(\w+)$/, ([_, color]) => `op90 px2.5 py1 transition-all duration-200 ease-out no-underline! cursor-pointer text-${color} bg-${color}/10 border border-base! rounded`],
],
rules: [
[/^slide-enter-(\d+)$/, ([_, n]) => ({
'--enter-stage': n,
})],
],
presets: [
presetAttributify(),
presetUno(),
presetIcons({
scale: 1.2,
}),
presetWind(),
presetWebFonts({
fonts: {
sans: 'Inter',
mono: 'DM Mono',
},
}),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
theme: {
breakpoints: {
xs: '320px',
sm: '640px',
md: '1024px',
lg: '1280px',
xl: '1536px',
xxl: '1920px',
},
colors: {
primary_1: 'rgba(var(--primary-1))',
primary_2: 'rgba(var(--primary-2))',
primary_3: 'rgba(var(--primary-3))',
primary_4: 'rgba(var(--primary-4))',
primary_5: 'rgba(var(--primary-5))',
primary_6: 'rgba(var(--primary-6))',
primary_7: 'rgba(var(--primary-7))',
primary_8: 'rgba(var(--primary-8))',
primary_9: 'rgba(var(--primary-9))',
primary_10: 'rgba(var(--primary-10))',
primary: 'rgba(var(--primary-6))',
primary_hover: 'rgba(var(--primary-5))',
primary_click: 'rgba(var(--primary-7))',
success: 'rgba(var(--success-6))',
success_hover: 'rgba(var(--success-5))',
success_click: 'rgba(var(--success-7))',
warning: 'rgba(var(--warning-6))',
warning_hover: 'rgba(var(--warning-5))',
warning_click: 'rgba(var(--warning-7))',
info: 'rgba(var(--info-6))',
info_hover: 'rgba(var(--info-5))',
info_click: 'rgba(var(--info-7))',
danger: 'rgba(var(--danger-6))',
danger_hover: 'rgba(var(--danger-5))',
danger_click: 'rgba(var(--danger-7))',
},
},
})