forked from krokantpudding/gloomhaven-storyline
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtailwind.config.js
237 lines (236 loc) · 9.17 KB
/
tailwind.config.js
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
const plugin = require('tailwindcss/plugin');
const {colors} = require('tailwindcss/defaultTheme');
module.exports = {
purge: [
'./resources/**/*.html',
'./resources/**/*.vue',
'./resources/**/*.js',
'./resources/**/*.svg'
],
theme: {
extend: {
fontFamily: {
default: ['Nyala', 'sans-serif'],
title: ['Pirata One', 'Nyala', 'sans-serif'],
},
inset: {
'1/2': '50%',
'area-inset-top': 'env(safe-area-inset-top, 0)',
'area-inset-right': 'env(safe-area-inset-right, 0)',
'area-inset-bottom': 'env(safe-area-inset-bottom, 0)',
'area-inset-left': 'env(safe-area-inset-left, 0)'
},
spacing: {
'.5': '0.125rem',
11: '2.75rem',
14: '3.5rem',
28: '7rem',
30: '7.5rem',
32: '8rem',
36: '9rem',
'1/2': '50%',
'1/4': '25%',
'area-inset-top': 'env(safe-area-inset-top, 0)',
'area-inset-right': 'env(safe-area-inset-right, 0)',
'area-inset-bottom': 'env(safe-area-inset-bottom, 0)',
'area-inset-left': 'env(safe-area-inset-left, 0)'
},
height: {
'1/2': '50%',
'2px': '2px'
},
maxWidth: {
'party': '1041px'
},
screens: {
xs: '430px',
'sheet-break-lg': '872px',
lgh: {'raw': '(min-height: 600px)'}
},
zIndex: {
1: '1',
5: '5'
},
lineHeight: {
'12': '3rem',
},
fontSize: {
xxs: ['0.5rem', '0.75rem'],
},
colors: {
primary: '#3771E0',
'primary-dark': '#2356b7',
secondary: '#018786',
patreon: '#ff424d',
background: '#000',
surface: '#111',
'dark-background': '#1b1b1b',
complete: '#3B8585',
incomplete: '#A13C2F',
required: '#E9A678',
gold: '#E2A246',
'light-gray': '#E0E0E0',
black2: {
10: 'rgba(0, 0, 0, .10)',
25: 'rgba(0, 0, 0, .25)',
50: 'rgba(0, 0, 0, .50)',
75: 'rgba(0, 0, 0, .75)'
},
white2: {
25: 'rgba(255, 255, 255, .25)',
50: 'rgba(255, 255, 255, .50)',
60: 'rgba(255, 255, 255, .60)',
75: 'rgba(255, 255, 255, .75)',
87: 'rgba(255, 255, 255, .87)'
},
red: {
...colors.red,
50: 'rgba(255, 100, 100, .5)'
},
green: {
...colors.green,
50: 'rgba(100, 255, 100, .5)'
},
yellow: {
...colors.yellow,
50: 'rgba(236, 202, 75, .5)'
},
},
boxShadow: {
'slight-white': '0px 0px 20px 5px rgba(255,255,255,0.1)',
'white': '0px 0px 20px 5px rgba(255,255,255,0.2)'
},
margin: {
7: '1.75rem',
18: '4.5rem'
},
rotate: {
'270': '270deg',
}
},
order: {
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
15: '15',
16: '16',
17: '17',
18: '18',
19: '19',
20: '20'
}
},
variants: {
// accessibility: ['important', 'responsive', 'focus'],
// alignContent: ['important', 'responsive'],
// alignItems: ['important', 'responsive'],
// alignSelf: ['important', 'responsive'],
// appearance: ['important', 'responsive'],
// backgroundAttachment: ['important', 'responsive'],
backgroundColor: ['important', 'responsive', 'hover', 'focus'],
// backgroundPosition: ['important', 'responsive'],
// backgroundRepeat: ['important', 'responsive'],
// backgroundSize: ['important', 'responsive'],
// borderCollapse: ['important', 'responsive'],
// borderColor: ['important', 'responsive', 'hover', 'focus'],
// borderRadius: ['important', 'responsive'],
// borderStyle: ['important', 'responsive'],
// borderWidth: ['important', 'responsive'],
// boxShadow: ['important', 'responsive', 'hover', 'focus'],
// boxSizing: ['important', 'responsive'],
// cursor: ['important', 'responsive'],
display: ['important', 'responsive'],
// fill: ['important', 'responsive'],
// flex: ['important', 'responsive'],
// flexDirection: ['important', 'responsive'],
// flexGrow: ['important', 'responsive'],
// flexShrink: ['important', 'responsive'],
// flexWrap: ['important', 'responsive'],
// float: ['important', 'responsive'],
// clear: ['important', 'responsive'],
// fontFamily: ['important', 'responsive'],
fontSize: ['important', 'responsive'],
// fontSmoothing: ['important', 'responsive'],
// fontStyle: ['important', 'responsive'],
// fontWeight: ['important', 'responsive', 'hover', 'focus'],
// height: ['important', 'responsive'],
// inset: ['important', 'responsive'],
// justifyContent: ['important', 'responsive'],
// letterSpacing: ['important', 'responsive'],
// lineHeight: ['important', 'responsive'],
// listStylePosition: ['important', 'responsive'],
// listStyleType: ['important', 'responsive'],
margin: ['important', 'responsive'],
// maxHeight: ['important', 'responsive'],
// maxWidth: ['important', 'responsive'],
// minHeight: ['important', 'responsive'],
// minWidth: ['important', 'responsive'],
// objectFit: ['important', 'responsive'],
// objectPosition: ['important', 'responsive'],
// opacity: ['important', 'responsive', 'hover', 'focus'],
// order: ['important', 'responsive'],
// outline: ['important', 'responsive', 'focus'],
// overflow: ['important', 'responsive'],
padding: ['important', 'responsive'],
// placeholderColor: ['important', 'responsive', 'focus'],
// pointerEvents: ['important', 'responsive'],
// position: ['important', 'responsive'],
// resize: ['important', 'responsive'],
// stroke: ['important', 'responsive'],
// strokeWidth: ['important', 'responsive'],
// tableLayout: ['important', 'responsive'],
// textAlign: ['important', 'responsive'],
textColor: ['important', 'responsive', 'hover', 'focus'],
// textDecoration: ['important', 'responsive', 'hover', 'focus'],
// textTransform: ['important', 'responsive'],
// userSelect: ['important', 'responsive'],
// verticalAlign: ['important', 'responsive'],
// visibility: ['important', 'responsive'],
// whitespace: ['important', 'responsive'],
// width: ['important', 'responsive'],
// wordBreak: ['important', 'responsive'],
// zIndex: ['important', 'responsive'],
// gap: ['important', 'responsive'],
// gridAutoFlow: ['important', 'responsive'],
// gridTemplateColumns: ['important', 'responsive'],
// gridColumn: ['important', 'responsive'],
// gridColumnStart: ['important', 'responsive'],
// gridColumnEnd: ['important', 'responsive'],
// gridTemplateRows: ['important', 'responsive'],
// gridRow: ['important', 'responsive'],
// gridRowStart: ['important', 'responsive'],
// gridRowEnd: ['important', 'responsive'],
// transform: ['important', 'responsive'],
// transformOrigin: ['important', 'responsive'],
// scale: ['important', 'responsive', 'hover', 'focus'],
// rotate: ['important', 'responsive', 'hover', 'focus'],
// translate: ['important', 'responsive', 'hover', 'focus'],
// skew: ['important', 'responsive', 'hover', 'focus'],
// transitionProperty: ['important', 'responsive'],
// transitionTimingFunction: ['important', 'responsive'],
// transitionDuration: ['important', 'responsive'],
},
plugins: [
plugin(function ({addVariant}) {
addVariant('important', ({container}) => {
container.walkRules(rule => {
rule.selector = `.i-${rule.selector.slice(1)}`;
rule.walkDecls(decl => {
decl.important = true;
})
})
})
})
]
};