lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import {StyleProp, StyleSheet, TextStyle} from 'react-native'
2import {Theme, TypographyVariant} from './ThemeContext'
3import {isDesktopWeb} from 'platform/detection'
4import {DESKTOP_HEADER_HEIGHT} from './constants'
5
6// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
7export const colors = {
8 white: '#ffffff',
9 black: '#000000',
10
11 gray1: '#F3F3F8',
12 gray2: '#E2E2E4',
13 gray3: '#B9B9C1',
14 gray4: '#8D8E96',
15 gray5: '#545664',
16 gray6: '#373942',
17 gray7: '#26272D',
18 gray8: '#101013',
19
20 blue0: '#bfe1ff',
21 blue1: '#8bc7fd',
22 blue2: '#52acfe',
23 blue3: '#0085ff',
24 blue4: '#0062bd',
25 blue5: '#034581',
26
27 red1: '#ffe6f2',
28 red2: '#fba2ce',
29 red3: '#ec4899',
30 red4: '#d1106f',
31 red5: '#97074e',
32
33 pink1: '#f8ccff',
34 pink2: '#e966ff',
35 pink3: '#db00ff',
36 pink4: '#a601c1',
37 pink5: '#570066',
38
39 purple1: '#ebdbff',
40 purple2: '#ba85ff',
41 purple3: '#9747ff',
42 purple4: '#6d00fa',
43 purple5: '#380080',
44
45 green1: '#c1ffb8',
46 green2: '#27f406',
47 green3: '#20bc07',
48 green4: '#148203',
49 green5: '#082b03',
50
51 unreadNotifBg: '#ebf6ff',
52}
53
54export const gradients = {
55 blueLight: {start: '#5A71FA', end: colors.blue3}, // buttons
56 blue: {start: '#5E55FB', end: colors.blue3}, // fab
57 blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
58}
59
60export const s = StyleSheet.create({
61 // helpers
62 footerSpacer: {height: 100},
63 contentContainer: {paddingBottom: 200},
64 border1: {borderWidth: 1},
65
66 // font weights
67 fw600: {fontWeight: '600'},
68 bold: {fontWeight: 'bold'},
69 fw500: {fontWeight: '500'},
70 semiBold: {fontWeight: '500'},
71 fw400: {fontWeight: '400'},
72 normal: {fontWeight: '400'},
73 fw300: {fontWeight: '300'},
74 light: {fontWeight: '300'},
75 fw200: {fontWeight: '200'},
76
77 // text decoration
78 underline: {textDecorationLine: 'underline'},
79
80 // font sizes
81 f9: {fontSize: 9},
82 f10: {fontSize: 10},
83 f11: {fontSize: 11},
84 f12: {fontSize: 12},
85 f13: {fontSize: 13},
86 f14: {fontSize: 14},
87 f15: {fontSize: 15},
88 f16: {fontSize: 16},
89 f17: {fontSize: 17},
90 f18: {fontSize: 18},
91
92 // line heights
93 ['lh13-1']: {lineHeight: 13},
94 ['lh13-1.3']: {lineHeight: 16.9}, // 1.3 of 13px
95 ['lh14-1']: {lineHeight: 14},
96 ['lh14-1.3']: {lineHeight: 18.2}, // 1.3 of 14px
97 ['lh15-1']: {lineHeight: 15},
98 ['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
99 ['lh16-1']: {lineHeight: 16},
100 ['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
101 ['lh17-1']: {lineHeight: 17},
102 ['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 17px
103 ['lh18-1']: {lineHeight: 18},
104 ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
105
106 // margins
107 mr2: {marginRight: 2},
108 mr5: {marginRight: 5},
109 mr10: {marginRight: 10},
110 ml2: {marginLeft: 2},
111 ml5: {marginLeft: 5},
112 ml10: {marginLeft: 10},
113 mt2: {marginTop: 2},
114 mt5: {marginTop: 5},
115 mt10: {marginTop: 10},
116 mb2: {marginBottom: 2},
117 mb5: {marginBottom: 5},
118 mb10: {marginBottom: 10},
119
120 // paddings
121 p2: {padding: 2},
122 p5: {padding: 5},
123 p10: {padding: 10},
124 p20: {padding: 20},
125 pr2: {paddingRight: 2},
126 pr5: {paddingRight: 5},
127 pr10: {paddingRight: 10},
128 pr20: {paddingRight: 20},
129 pl2: {paddingLeft: 2},
130 pl5: {paddingLeft: 5},
131 pl10: {paddingLeft: 10},
132 pl20: {paddingLeft: 20},
133 pt2: {paddingTop: 2},
134 pt5: {paddingTop: 5},
135 pt10: {paddingTop: 10},
136 pt20: {paddingTop: 20},
137 pb2: {paddingBottom: 2},
138 pb5: {paddingBottom: 5},
139 pb10: {paddingBottom: 10},
140 pb20: {paddingBottom: 20},
141
142 // flex
143 flexRow: {flexDirection: 'row'},
144 flexCol: {flexDirection: 'column'},
145 flex1: {flex: 1},
146 alignCenter: {alignItems: 'center'},
147 alignBaseline: {alignItems: 'baseline'},
148
149 // position
150 absolute: {position: 'absolute'},
151
152 // dimensions
153 w100pct: {width: '100%'},
154 h100pct: {height: '100%'},
155 hContentRegion: isDesktopWeb
156 ? {height: `calc(100vh - ${DESKTOP_HEADER_HEIGHT}px)`}
157 : {height: '100%'},
158
159 // text align
160 textLeft: {textAlign: 'left'},
161 textCenter: {textAlign: 'center'},
162 textRight: {textAlign: 'right'},
163
164 // colors
165 white: {color: colors.white},
166 black: {color: colors.black},
167
168 gray1: {color: colors.gray1},
169 gray2: {color: colors.gray2},
170 gray3: {color: colors.gray3},
171 gray4: {color: colors.gray4},
172 gray5: {color: colors.gray5},
173
174 blue1: {color: colors.blue1},
175 blue2: {color: colors.blue2},
176 blue3: {color: colors.blue3},
177 blue4: {color: colors.blue4},
178 blue5: {color: colors.blue5},
179
180 red1: {color: colors.red1},
181 red2: {color: colors.red2},
182 red3: {color: colors.red3},
183 red4: {color: colors.red4},
184 red5: {color: colors.red5},
185
186 pink1: {color: colors.pink1},
187 pink2: {color: colors.pink2},
188 pink3: {color: colors.pink3},
189 pink4: {color: colors.pink4},
190 pink5: {color: colors.pink5},
191
192 purple1: {color: colors.purple1},
193 purple2: {color: colors.purple2},
194 purple3: {color: colors.purple3},
195 purple4: {color: colors.purple4},
196 purple5: {color: colors.purple5},
197
198 green1: {color: colors.green1},
199 green2: {color: colors.green2},
200 green3: {color: colors.green3},
201 green4: {color: colors.green4},
202 green5: {color: colors.green5},
203})
204
205export function lh(
206 theme: Theme,
207 type: TypographyVariant,
208 height: number,
209): TextStyle {
210 return {
211 lineHeight: (theme.typography[type].fontSize || 16) * height,
212 }
213}
214
215export function addStyle<T>(
216 base: StyleProp<T>,
217 addedStyle: StyleProp<T>,
218): StyleProp<T> {
219 if (Array.isArray(base)) {
220 return base.concat([addedStyle])
221 }
222 return [base, addedStyle]
223}