/
uno.config.ts
105 lines (103 loc) · 2.7 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
// uno.config.ts
import { defineConfig,
presetIcons,
presetUno,
transformerDirectives,
transformerVariantGroup,
presetAttributify,
presetTypography
} from 'unocss'
export default defineConfig({
// ...UnoCSS options
theme: {
colors: {
primary: {
'50': '#f2fbf8',
'100': '#d3f4ea',
'200': '#a6e9d6',
'300': '#82dbc5',
'400': '#44bda2',
'500': '#2ba189',
'600': '#20816f',
'700': '#1d685b',
'800': '#1c534b',
'900': '#1b463f',
'950': '#0a2925',
},
secondary: {
'50': '#fff8eb',
'100': '#feeac7',
'200': '#fdd48a',
'300': '#fbb03b',
'400': '#fa9e25',
'500': '#f47a0c',
'600': '#d85607',
'700': '#b3390a',
'800': '#922b0e',
'900': '#78250f',
'950': '#451003',
},
accent: '#00f',
},
},
presets: [
presetUno(),
presetIcons({
scale: 1.2,
warn: true,
extraProperties: {
display: 'inline-block',
'vertical-align': 'middle',
// ...
},
}),
presetTypography({
cssExtend: {
'hr': {
'height': '1px',
'border': 'none',
'background': 'linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0))',
},
':not(pre)>code': {
padding: '0.25rem 0.5rem !important',
'font-size': '0.865rem !important',
},
'code::after': {
content: 'none',
},
'code::before': {
content: 'none',
},
a: {
color: '#82DBC5',
'text-decoration': 'none',
transition: 'color 400ms ease-in-out',
},
'a:hover': {
color: '#82DBC5',
'text-decoration': 'underline',
transition: 'color 400ms ease-in-out',
},
}
}),
],
shortcuts: [
{
'btn': 'inline-block px-4 py-2 rounded-lg shadow bg-primary text-white',
'btn-primary': 'inline-flex items-center px-4 py-2 rounded-lg shadow bg-primary-300 text-white hover:bg-primary-400 hover:text-white transition-colors duration-300 ease-in-out important-decoration-none',
'btn-secondary': 'inline-flex items-center px-4 py-2 rounded-lg shadow bg-secondary-300 text-white hover:bg-secondary-400 hover:text-white transition-colors duration-300 ease-in-out important-decoration-none',
},
],
transformers: [
transformerDirectives(),
transformerVariantGroup()
],
rules: [
[ 'shadow-white-blur', {
'box-shadow': '0 4px 39px 74px rgba(255, 255, 255, 1)',
}],
[ 'shadow-dark-blur', {
'box-shadow': '0 4px 39px 74px rgba(34, 34, 34, 1)',
}],
],
})