-
Notifications
You must be signed in to change notification settings - Fork 2
/
utilities.js
383 lines (356 loc) · 12.1 KB
/
utilities.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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
import { StyleSheet, Dimensions } from 'react-native';
const styles = StyleSheet.create({
bgTransparent: { backgroundColor: 'transparent' },
bgBlack: { backgroundColor: '#000' },
bgDarkest: { backgroundColor: '#3d4852' },
bgDarker: { backgroundColor: '#606f7b' },
bgDark: { backgroundColor: '#8795a1' },
bgGray: { backgroundColor: '#b8c2cc' },
bgLight: { backgroundColor: '#dae1e7' },
bgLighter: { backgroundColor: '#f1f5f8' },
bgLightest: { backgroundColor: '#f8fafc' },
bgWhite: { backgroundColor: '#fff' },
border0: { borderWidth: 0 },
border1_2: { borderWidth: 0.5 },
border1: { borderWidth: 1 },
border2: { borderWidth: 2 },
border4: { borderWidth: 4 },
border8: { borderWidth: 8 },
borderT1_2: { borderTopWidth: 0.5 },
borderR1_2: { borderRightWidth: 0.5 },
borderB1_2: { borderBottomWidth: 0.5 },
borderL1_2: { borderLeftWidth: 0.5 },
borderT: { borderTopWidth: 1 },
borderR: { borderRightWidth: 1 },
borderB: { borderBottomWidth: 1 },
borderL: { borderLeftWidth: 1 },
borderT2: { borderTopWidth: 2 },
borderR2: { borderRightWidth: 2 },
borderB2: { borderBottomWidth: 2 },
borderL2: { borderLeftWidth: 2 },
borderTransparent: { borderColor: 'transparent' },
borderBlack: { borderColor: '#000' },
borderDarkest: { borderColor: '#3d4852' },
borderDarker: { borderColor: '#606f7b' },
borderDark: { borderColor: '#8795a1' },
borderGray: { borderColor: '#b8c2cc' },
borderLight: { borderColor: '#dae1e7' },
borderLighter: { borderColor: '#f1f5f8' },
borderLightest: { borderColor: '#f8fafc' },
borderWhite: { borderColor: '#fff' },
borderSolid: { borderStyle: 'solid' },
borderDashed: { borderStyle: 'dashed' },
borderDotted: { borderStyle: 'dotted' },
radius0: { borderRadius: 0 },
radius1: { borderRadius: 1 },
radius2: { borderRadius: 2 },
radius4: { borderRadius: 4 },
radius6: { borderRadius: 6 },
radius8: { borderRadius: 8 },
radius999: { borderRadius: 999 },
hidden: { display: 'none' },
flex: { display: 'flex' },
row: { flexDirection: 'row' },
rowReverse: { flexDirection: 'row-reverse' },
col: { flexDirection: 'column' },
colReverse: { flexDirection: 'column-reverse' },
wrap: { flexWrap: 'wrap' },
noWrap: { flexWrap: 'nowrap' },
itemsStart: { alignItems: 'flex-start' },
itemsEnd: { alignItems: 'flex-end' },
itemsCenter: { alignItems: 'center' },
itemsBaseline: { alignItems: 'baseline' },
itemsStretch: { alignItems: 'stretch' },
selfAuto: { alignSelf: 'auto' },
selfStart: { alignSelf: 'flex-start' },
selfEnd: { alignSelf: 'flex-end' },
selfCenter: { alignSelf: 'center' },
selfStretch: { alignSelf: 'stretch' },
justifyStart: { justifyContent: 'flex-start' },
justifyEnd: { justifyContent: 'flex-end' },
justifyCenter: { justifyContent: 'center' },
justifyBetween: { justifyContent: 'space-between' },
justifyAround: { justifyContent: 'space-around' },
contentCenter: { alignContent: 'center' },
contentStart: { alignContent: 'flex-start' },
contentEnd: { alignContent: 'flex-end' },
contentBetween: { alignContent: 'space-between' },
contentAround: { alignContent: 'space-around' },
flex1: { flex: 1 },
flex2: { flex: 2 },
flex3: { flex: 3 },
flex4: { flex: 4 },
flex5: { flex: 5 },
flex6: { flex: 6 },
w1: { width: 1 },
w4: { width: 4 },
w8: { width: 8 },
w12: { width: 12 },
w16: { width: 16 },
w24: { width: 24 },
w32: { width: 32 },
w40: { width: 40 },
w48: { width: 48 },
w60: { width: 60 },
w64: { width: 64 },
w96: { width: 96 },
w128: { width: 128 },
w180: { width: 180 },
w192: { width: 192 },
w256: { width: 256 },
w512: { width: 512 },
w1_2: { width: '50%' },
w1_3: { width: '33.33333%' },
w2_3: { width: '66.66667%' },
w1_4: { width: '25%' },
w3_4: { width: '75%' },
w1_5: { width: '20%' },
w2_5: { width: '40%' },
w3_5: { width: '60%' },
w4_5: { width: '80%' },
wFull: { width: '100%' },
wScreen: { width: Dimensions.get('window').width },
h1: { height: 1 },
h4: { height: 4 },
h8: { height: 8 },
h12: { height: 12 },
h16: { height: 16 },
h24: { height: 24 },
h32: { height: 32 },
h40: { height: 40 },
h48: { height: 48 },
h60: { height: 60 },
h64: { height: 64 },
h96: { height: 96 },
h128: { height: 128 },
h180: { height: 180 },
h192: { height: 192 },
h256: { height: 256 },
h512: { height: 512 },
h1_2: { height: '50%' },
h1_3: { height: '33.33333%' },
h2_3: { height: '66.66667%' },
h1_4: { height: '25%' },
h3_4: { height: '75%' },
h1_5: { height: '20%' },
h2_5: { height: '40%' },
h3_5: { height: '60%' },
h4_5: { height: '80%' },
hFull: { height: '100%' },
hScreen: { height: Dimensions.get('window').height },
maxHeightFull: { maxHeight: '100%' },
maxWidthFull: { maxWidth: '100%' },
minHeight0: { minHeight: 0 },
minHeightFull: { minHeight: '100%' },
minWidth0: { minWidth: 0 },
minWidthFull: { minWidth: '100%' },
opacity0: { opacity: 0 },
opacity25: { opacity: 0.25 },
opacity50: { opacity: 0.5 },
opacity75: { opacity: 0.75 },
opacity100: { opacity: 1 },
absolute: { position: 'absolute' },
relative: { position: 'relative' },
overflowHidden: { overflow: 'hidden' },
pin: { top: 0, right: 0, bottom: 0, left: 0 },
top0: { top: 0 },
right0: { right: 0 },
bottom0: { bottom: 0 },
left0: { left: 0 },
zIndex10: { zIndex: 10 },
zIndex20: { zIndex: 20 },
zIndex30: { zIndex: 30 },
textLeft: { textAlign: 'left' },
textCenter: { textAlign: 'center' },
textRight: { textAlign: 'right' },
textJustify: { textAlign: 'justify' },
colorTransparent: { color: 'transparent' },
colorBlack: { color: '#22292f' },
colorDarkest: { color: '#3d4852' },
colorDarker: { color: '#606f7b' },
colorDark: { color: '#8795a1' },
colorGray: { color: '#b8c2cc' },
colorLight: { color: '#dae1e7' },
colorLighter: { color: '#f1f5f8' },
colorLightest: { color: '#f8fafc' },
colorWhite: { color: '#fff' },
font12: { fontSize: 12 },
font14: { fontSize: 14 },
font16: { fontSize: 16 },
font18: { fontSize: 18 },
font20: { fontSize: 20 },
font24: { fontSize: 24 },
font30: { fontSize: 30 },
font36: { fontSize: 36 },
font48: { fontSize: 48 },
lineHeight14: { lineHeight: 14 },
lineHeight18: { lineHeight: 18 },
lineHeight20: { lineHeight: 20 },
lineHeight22: { lineHeight: 22 },
lineHeight24: { lineHeight: 24 },
lineHeight32: { lineHeight: 32 },
font100: { fontWeight: '100' },
font200: { fontWeight: '200' },
font300: { fontWeight: '300' },
font400: { fontWeight: '400' },
font500: { fontWeight: '500' },
font600: { fontWeight: '600' },
font700: { fontWeight: '700' },
font800: { fontWeight: '800' },
italic: { fontStyle: 'italic' },
trackingTight: { letterSpacing: -0.8 },
trackingNormal: { letterSpacing: 0 },
trackingWide: { letterSpacing: 0.8 },
uppercase: { textTransform: 'uppercase' },
lowercase: { textTransform: 'lowercase' },
capitalize: { textTransform: 'capitalize' },
bgBlack25: { backgroundColor: 'rgba(0, 0, 0, 0.25)' },
bgBlack50: { backgroundColor: 'rgba(0, 0, 0, 0.50)' },
bgBlack75: { backgroundColor: 'rgba(0, 0, 0, 0.75)' },
bgWhite25: { backgroundColor: 'rgba(255, 255, 255, 0.25)' },
bgWhite50: { backgroundColor: 'rgba(255, 255, 255, 0.50)' },
bgWhite75: { backgroundColor: 'rgba(255, 255, 255, 0.75)' },
shadow: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.18,
shadowRadius: 1.0,
elevation: 1,
},
shadow2: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
shadow3: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
m0: { marginTop: 0, marginBottom: 0, marginRight: 0, marginLeft: 0 },
m1: { marginTop: 1, marginBottom: 1, marginRight: 1, marginLeft: 1 },
m4: { marginTop: 4, marginBottom: 4, marginRight: 4, marginLeft: 4 },
m8: { marginTop: 8, marginBottom: 8, marginRight: 8, marginLeft: 8 },
m12: { marginTop: 12, marginBottom: 12, marginRight: 12, marginLeft: 12 },
m16: { marginTop: 16, marginBottom: 16, marginRight: 16, marginLeft: 16 },
m24: { marginTop: 24, marginBottom: 24, marginRight: 24, marginLeft: 24 },
m32: { marginTop: 32, marginBottom: 32, marginRight: 32, marginLeft: 32 },
my0: { marginTop: 0, marginBottom: 0 },
mx0: { marginLeft: 0, marginRight: 0 },
my1: { marginTop: 1, marginBottom: 1 },
mx1: { marginLeft: 1, marginRight: 1 },
my4: { marginTop: 4, marginBottom: 4 },
mx4: { marginLeft: 4, marginRight: 4 },
my8: { marginTop: 8, marginBottom: 8 },
mx8: { marginLeft: 8, marginRight: 8 },
my12: { marginTop: 12, marginBottom: 12 },
mx12: { marginLeft: 12, marginRight: 12 },
my16: { marginTop: 16, marginBottom: 16 },
mx16: { marginLeft: 16, marginRight: 16 },
my24: { marginTop: 24, marginBottom: 24 },
mx24: { marginLeft: 24, marginRight: 24 },
my32: { marginTop: 32, marginBottom: 32 },
mx32: { marginLeft: 32, marginRight: 32 },
mt0: { marginTop: 0 },
mr0: { marginRight: 0 },
mb0: { marginBottom: 0 },
ml0: { marginLeft: 0 },
mt1: { marginTop: 1 },
mr1: { marginRight: 1 },
mb1: { marginBottom: 1 },
ml1: { marginLeft: 1 },
mt4: { marginTop: 4 },
mr4: { marginRight: 4 },
mb4: { marginBottom: 4 },
ml4: { marginLeft: 4 },
mt8: { marginTop: 8 },
mr8: { marginRight: 8 },
mb8: { marginBottom: 8 },
ml8: { marginLeft: 8 },
mt12: { marginTop: 12 },
mr12: { marginRight: 12 },
mb12: { marginBottom: 12 },
ml12: { marginLeft: 12 },
mt16: { marginTop: 16 },
mr16: { marginRight: 16 },
mb16: { marginBottom: 16 },
ml16: { marginLeft: 16 },
mt24: { marginTop: 24 },
mr24: { marginRight: 24 },
mb24: { marginBottom: 24 },
ml24: { marginLeft: 24 },
mt32: { marginTop: 32 },
mr32: { marginRight: 32 },
mb32: { marginBottom: 32 },
ml32: { marginLeft: 32 },
p0: { paddingTop: 0, paddingBottom: 0, paddingRight: 0, paddingLeft: 0 },
p1: { paddingTop: 1, paddingBottom: 1, paddingRight: 1, paddingLeft: 1 },
p4: { paddingTop: 4, paddingBottom: 4, paddingRight: 4, paddingLeft: 4 },
p8: { paddingTop: 8, paddingBottom: 8, paddingRight: 8, paddingLeft: 8 },
p12: { paddingTop: 12, paddingBottom: 12, paddingRight: 12, paddingLeft: 12 },
p16: { paddingTop: 16, paddingBottom: 16, paddingRight: 16, paddingLeft: 16 },
p24: { paddingTop: 24, paddingBottom: 24, paddingRight: 24, paddingLeft: 24 },
p32: { paddingTop: 32, paddingBottom: 32, paddingRight: 32, paddingLeft: 32 },
py0: { paddingTop: 0, paddingBottom: 0 },
px0: { paddingLeft: 0, paddingRight: 0 },
py1: { paddingTop: 1, paddingBottom: 1 },
px1: { paddingLeft: 1, paddingRight: 1 },
py4: { paddingTop: 4, paddingBottom: 4 },
px4: { paddingLeft: 4, paddingRight: 4 },
py8: { paddingTop: 8, paddingBottom: 8 },
px8: { paddingLeft: 8, paddingRight: 8 },
py12: { paddingTop: 12, paddingBottom: 12 },
px12: { paddingLeft: 12, paddingRight: 12 },
py16: { paddingTop: 16, paddingBottom: 16 },
px16: { paddingLeft: 16, paddingRight: 16 },
py24: { paddingTop: 24, paddingBottom: 24 },
px24: { paddingLeft: 24, paddingRight: 24 },
py32: { paddingTop: 32, paddingBottom: 32 },
px32: { paddingLeft: 32, paddingRight: 32 },
pt0: { paddingTop: 0 },
pr0: { paddingRight: 0 },
pb0: { paddingBottom: 0 },
pl0: { paddingLeft: 0 },
pt1: { paddingTop: 1 },
pr1: { paddingRight: 1 },
pb1: { paddingBottom: 1 },
pl1: { paddingLeft: 1 },
pt4: { paddingTop: 4 },
pr4: { paddingRight: 4 },
pb4: { paddingBottom: 4 },
pl4: { paddingLeft: 4 },
pt8: { paddingTop: 8 },
pr8: { paddingRight: 8 },
pb8: { paddingBottom: 8 },
pl8: { paddingLeft: 8 },
pt12: { paddingTop: 12 },
pr12: { paddingRight: 12 },
pb12: { paddingBottom: 12 },
pl12: { paddingLeft: 12 },
pt16: { paddingTop: 16 },
pr16: { paddingRight: 16 },
pb16: { paddingBottom: 16 },
pl16: { paddingLeft: 16 },
pt24: { paddingTop: 24 },
pr24: { paddingRight: 24 },
pb24: { paddingBottom: 24 },
pl24: { paddingLeft: 24 },
pt32: { paddingTop: 32 },
pr32: { paddingRight: 32 },
pb32: { paddingBottom: 32 },
pl32: { paddingLeft: 32 },
})
export default styles;