-
Notifications
You must be signed in to change notification settings - Fork 0
/
windi.config.ts
103 lines (98 loc) · 2.41 KB
/
windi.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 { defineConfig } from 'windicss/helpers'
import type { Plugin } from 'windicss/types/interfaces'
// colors
import colors from 'windicss/colors'
// themes
import defaultTheme from 'windicss/defaultTheme'
// plugins
import TypographyPlugin from 'windicss/plugin/typography'
import AspectRatioPlugin from 'windicss/plugin/aspect-ratio'
import FiltersPlugin from 'windicss/plugin/filters'
const MyTheme = {
colors: {
green: {
DEFAULT: '#3BA676',
'50': '#B4E4CF',
'100': '#A5DFC5',
'200': '#87D4B2',
'300': '#69CA9E',
'400': '#4BBF8B',
'500': '#3BA676',
'600': '#2C7D59',
'700': '#1E533B',
'800': '#0F2A1E',
'900': '#000000',
},
blue: {
DEFAULT: '#0096FF',
'50': '#B8E2FF',
'100': '#A3D9FF',
'200': '#7AC8FF',
'300': '#52B8FF',
'400': '#29A7FF',
'500': '#0096FF',
'600': '#0075C7',
'700': '#00548F',
'800': '#003357',
'900': '#00121F',
},
red: {
DEFAULT: '#FF6464',
'50': '#FFFFFF',
'100': '#FFFFFF',
'200': '#FFDEDE',
'300': '#FFB6B6',
'400': '#FF8D8D',
'500': '#FF6464',
'600': '#FF2C2C',
'700': '#F30000',
'800': '#BB0000',
'900': '#830000',
},
},
}
export default defineConfig({
darkMode: 'class',
attributify: false,
extract: {
include: [
'./components/**/*.{vue,js}',
'./composables/**/*.{js,ts}',
'./content/**/*.md',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./utils/**/*.{js,ts}',
'./app.vue',
],
},
theme: {
extend: {
maxWidth: {
'8xl': '90rem',
},
colors: {
primary: MyTheme.colors.green,
// if want to change primary color to blue
// primary: MyTheme.colors.blue,
green: MyTheme.colors.green,
blue: MyTheme.colors.blue,
red: MyTheme.colors.red,
slate: colors.slate,
},
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
shortcuts: {
'light-img': 'block dark:hidden',
'dark-img': 'hidden dark:block',
},
plugins: [
// filters plugin require for navbar blur
FiltersPlugin as Plugin,
TypographyPlugin as Plugin,
AspectRatioPlugin as Plugin,
] as Plugin[],
})