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
|
import {StyleSheet} from 'react-native'
export const s = StyleSheet.create({
// font weights
fw600: {fontWeight: '600'},
bold: {fontWeight: '600'},
fw500: {fontWeight: '500'},
semiBold: {fontWeight: '500'},
fw400: {fontWeight: '400'},
normal: {fontWeight: '400'},
fw300: {fontWeight: '300'},
light: {fontWeight: '300'},
fw200: {fontWeight: '200'},
// font sizes
f13: {fontSize: 13},
f14: {fontSize: 14},
f15: {fontSize: 15},
f16: {fontSize: 16},
f18: {fontSize: 18},
// line heights
['lh13-1']: {lineHeight: 13},
['lh13-1.3']: {lineHeight: 16.9}, // 1.3 of 13px
['lh14-1']: {lineHeight: 14},
['lh14-1.3']: {lineHeight: 18.2}, // 1.3 of 14px
['lh15-1']: {lineHeight: 15},
['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
['lh16-1']: {lineHeight: 16},
['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
['lh18-1']: {lineHeight: 18},
['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
// colors
black: {color: 'black'},
gray: {color: 'gray'},
blue: {color: '#006bf7'},
green: {color: 'green'},
red: {color: 'red'},
// margins
mr2: {marginRight: 2},
mr5: {marginRight: 5},
mr10: {marginRight: 10},
ml2: {marginLeft: 2},
ml5: {marginLeft: 5},
ml10: {marginLeft: 10},
mt2: {marginTop: 2},
mt5: {marginTop: 5},
mt10: {marginTop: 10},
mb2: {marginBottom: 2},
mb5: {marginBottom: 5},
mb10: {marginBottom: 10},
// paddings
p2: {padding: 2},
p5: {padding: 5},
p10: {padding: 10},
pr2: {paddingRight: 2},
pr5: {paddingRight: 5},
pr10: {paddingRight: 10},
pl2: {paddingLeft: 2},
pl5: {paddingLeft: 5},
pl10: {paddingLeft: 10},
pt2: {paddingTop: 2},
pt5: {paddingTop: 5},
pt10: {paddingTop: 10},
pb2: {paddingBottom: 2},
pb5: {paddingBottom: 5},
pb10: {paddingBottom: 10},
// flex
flexRow: {flexDirection: 'row'},
flexCol: {flexDirection: 'column'},
flex1: {flex: 1},
})
|
