-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuno.config.ts
180 lines (179 loc) · 6.4 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
import {
defineConfig,
presetAttributify,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives,
transformerVariantGroup,
} from "unocss";
export default defineConfig({
shortcuts: [
["scale", "hover:scale-110 hover:transition-all duration-200 ease-in-out"],
["cp", "cursor-pointer"],
["rf", "rounded-full"],
["col", "flex flex-col"],
["row", "flex flex-row"],
["center", "items-center justify-center"],
["start", "items-start justify-start"],
["end", "items-end justify-end"],
["tr", "top-0 right-0"],
["br", "bottom-0 right-0"],
["bl", "bottom-0 left-0"],
["tl", "top-0 left-0"],
["sh", "shadow-gray-500 shadow-md"],
["sh-sm", "shadow-sm"],
["sh-md", "shadow-md"],
["sh-lg", "shadow-lg"],
["sh-xl", "shadow-xl"],
["sh-2xl", "shadow-2xl"],
["scale", "hover:scale-110 hover:transition-all duration-200 ease-in-out"],
["grid2", "grid grid-cols-2"],
["grid3", "grid grid-cols-3"],
["grid4", "grid grid-cols-4"],
["grid5", "grid grid-cols-5"],
["grid6", "grid grid-cols-6"],
["slide-up", "animate-slide-in-up animate-duration-200"],
["slide-down", "animate-slide-in-down animate-duration-200"],
["slide-left", "animate-slide-in-left animate-duration-200"],
["slide-right", "animate-slide-in-right animate-duration-200"],
["fade-in", "animate-fade-in animate-duration-200"],
["fade-in-up", "animate-fade-in-up animate-duration-200"],
["fade-in-down", "animate-fade-in-down animate-duration-200"],
["fade-in-left", "animate-fade-in-left animate-duration-200"],
["fade-in-right", "animate-fade-in-right animate-duration-200"],
["spin-in-up", "animate-spin-in-up animate-duration-200"],
["spin-in-down", "animate-spin-in-down animate-duration-200"],
["spin-in-left", "animate-spin-in-left animate-duration-200"],
["spin-in-right", "animate-spin-in-right animate-duration-200"],
["no-outline", "outline-none focus:outline-none hover:outline-none"],
[
"btn-get",
"dark:invert m-2 bg-primary text-light rounded-lg shadow-success hover:bg-success hover:text-accent hover:shadow-primary shadow-md px-4 py-2 cp hover:scale-110 hover:transition-all duration-200 ease-in-out hover:cursor-pointer hover:font-extrabold hover:underline",
],
[
"btn-del",
"dark:invert m-2 bg-error text-light rounded-lg shadow-warning hover:bg-warning hover:text-error hover:shadow-error shadow-md px-4 py-2 cp hover:scale-110 hover:transition-all duration-200 ease-in-out hover:cursor-pointer hover:font-extrabold hover:underline",
],
[
"btn-post",
"dark:invert m-2 bg-success text-accent rounded-lg shadow-primary hover:bg-primary hover:text-light hover:shadow-success shadow-md px-4 py-2 cp hover:scale-110 hover:transition-all duration-200 ease-in-out hover:cursor-pointer hover:font-extrabold hover:underline",
],
[
"btn-put",
"dark:invert m-2 bg-warning text-light rounded-lg shadow-info hover:bg-info hover:text-light hover:shadow-warning shadow-md px-4 py-2 cp hover:scale-110 hover:transition-all duration-200 ease-in-out hover:cursor-pointer hover:font-extrabold hover:underline",
],
[
"text-caption",
"font-mono text-success dark:text-light text-sm text-center",
],
[
"text-title",
"font-script text-accent dark:text-secondary text-xl text-center",
],
["text-body", "font-serif text-black dark:text-light text-lg"],
[
"text-subtitle",
"font-sans text-primary dark:text-success text-lg text-center",
],
[
"input",
"my-2 p-1 rounded-lg shadow-primary sh-md border text-info dark:text-light border-primary dark:border-light dark:bg-dark dark:text-light outline-none",
],
["btn-icon", "p-1 scale cp x2 m-1 rounded-full"],
["over", "shadow-gray-500 shadow-lg"],
[
"container",
"text-center mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-16 xl:py-20 2xl:py-24",
],
[
"footer-link",
"text-4xl text-black opacity-100 transition-all duration-500 ease-in-out bg-transparent hover:scale-150 hover:mr-4 hover:text-white hover:opacity-100 hover:shadow-xl hover:bg-transparent hover:translate--y-4 hover:translate-x-4",
],
[
"footer-container",
"flex flex-row items-center justify-center bottom-0 right-0 left-0 fixed z-50 mx-auto h-16 gap-4 w-1/2 opacity-50 hover:opacity-100 transition-all duration-500 ease-in-out bg-gray-500 rounded-lg shadow-lg cursor-pointer hover:shadow-xl hover:bg-gray-600 hover:text-white hover:opacity-100 text-black text-3xl rounded-full",
],
[
"card-title",
"mb-3 text-2xl text-title text-black dark:text-white font-semibold",
],
],
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
warn: true,
}),
presetTypography(),
presetWebFonts({
fonts: {
sans: "Inter",
serif: "Alegreya",
mono: "DM Mono",
script: "Merienda",
},
}),
],
transformers: [transformerDirectives(), transformerVariantGroup()],
safelist: "prose prose-sm m-auto text-left".split(" "),
theme: {
colors: {
primary: "#cbe8f3",
secondary: "#7ac3e5",
accent: "#925dbd",
warning: "#c1d9ff",
error: "#3b64a2",
info: "#fddbe7",
success: "#5f8a87",
},
},
rules: [
[
/^x(\d+)$/,
([, d]) => ({
height: `${d}rem`,
width: `${d}rem`,
}),
],
[
/^[bg|border|color|fill|outline|shadow|text]-(.*)$/,
([, attr, color], { theme }) => {
if (color in theme.colors) {
switch (attr) {
case "bg":
return {
backgroundColor: theme.colors[color],
};
case "border":
return {
borderColor: theme.colors[color],
};
case "color":
return {
color: theme.colors[color],
};
case "fill":
return {
fill: theme.colors[color],
};
case "outline":
return {
outlineColor: theme.colors[color],
};
case "shadow":
return {
shadowColor: theme.colors[color],
};
case "text":
return {
color: theme.colors[color],
};
}
}
},
],
],
});