mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
2
3import {isWeb} from 'platform/detection'
4import {Theme, TypographyVariant} from './ThemeContext'
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: '#141417',
19
20 blue0: '#bfe1ff',
21 blue1: '#8bc7fd',
22 blue2: '#52acfe',
23 blue3: '#0085ff',
24 blue4: '#0062bd',
25 blue5: '#034581',
26 blue6: '#012561',
27 blue7: '#001040',
28
29 red1: '#ffe6eb',
30 red2: '#fba2b2',
31 red3: '#ec4868',
32 red4: '#d11043',
33 red5: '#970721',
34 red6: '#690419',
35 red7: '#4F0314',
36
37 pink1: '#f8ccff',
38 pink2: '#e966ff',
39 pink3: '#db00ff',
40 pink4: '#a601c1',
41 pink5: '#570066',
42
43 purple1: '#ebdbff',
44 purple2: '#ba85ff',
45 purple3: '#9747ff',
46 purple4: '#6d00fa',
47 purple5: '#380080',
48
49 green1: '#c1ffb8',
50 green2: '#27f406',
51 green3: '#20bc07',
52 green4: '#148203',
53 green5: '#082b03',
54
55 unreadNotifBg: '#ebf6ff',
56 brandBlue: '#0066FF',
57 like: '#ec4899',
58}
59
60export const gradients = {
61 blueLight: {start: '#5A71FA', end: colors.blue3}, // buttons
62 blue: {start: '#5E55FB', end: colors.blue3}, // fab
63 blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
64}
65
66export const s = StyleSheet.create({
67 // helpers
68 footerSpacer: {height: 100},
69 contentContainer: {paddingBottom: 200},
70 contentContainerExtra: {paddingBottom: 300},
71 border0: {borderWidth: 0},
72 border1: {borderWidth: 1},
73 borderTop1: {borderTopWidth: 1},
74 borderRight1: {borderRightWidth: 1},
75 borderBottom1: {borderBottomWidth: 1},
76 borderLeft1: {borderLeftWidth: 1},
77 hidden: {display: 'none'},
78 dimmed: {opacity: 0.5},
79
80 // font weights
81 fw600: {fontWeight: '600'},
82 bold: {fontWeight: 'bold'},
83 fw500: {fontWeight: '500'},
84 semiBold: {fontWeight: '500'},
85 fw400: {fontWeight: '400'},
86 normal: {fontWeight: '400'},
87 fw300: {fontWeight: '300'},
88 light: {fontWeight: '300'},
89 fw200: {fontWeight: '200'},
90
91 // text decoration
92 underline: {textDecorationLine: 'underline'},
93
94 // font variants
95 tabularNum: {fontVariant: ['tabular-nums']},
96
97 // font sizes
98 f9: {fontSize: 9},
99 f10: {fontSize: 10},
100 f11: {fontSize: 11},
101 f12: {fontSize: 12},
102 f13: {fontSize: 13},
103 f14: {fontSize: 14},
104 f15: {fontSize: 15},
105 f16: {fontSize: 16},
106 f17: {fontSize: 17},
107 f18: {fontSize: 18},
108
109 // line heights
110 ['lh13-1']: {lineHeight: 13},
111 ['lh13-1.3']: {lineHeight: 16.9}, // 1.3 of 13px
112 ['lh14-1']: {lineHeight: 14},
113 ['lh14-1.3']: {lineHeight: 18.2}, // 1.3 of 14px
114 ['lh15-1']: {lineHeight: 15},
115 ['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
116 ['lh16-1']: {lineHeight: 16},
117 ['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
118 ['lh17-1']: {lineHeight: 17},
119 ['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 17px
120 ['lh18-1']: {lineHeight: 18},
121 ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
122
123 // margins
124 mr2: {marginRight: 2},
125 mr5: {marginRight: 5},
126 mr10: {marginRight: 10},
127 mr20: {marginRight: 20},
128 ml2: {marginLeft: 2},
129 ml5: {marginLeft: 5},
130 ml10: {marginLeft: 10},
131 ml20: {marginLeft: 20},
132 mt2: {marginTop: 2},
133 mt5: {marginTop: 5},
134 mt10: {marginTop: 10},
135 mt20: {marginTop: 20},
136 mb2: {marginBottom: 2},
137 mb5: {marginBottom: 5},
138 mb10: {marginBottom: 10},
139 mb20: {marginBottom: 20},
140
141 // paddings
142 p2: {padding: 2},
143 p5: {padding: 5},
144 p10: {padding: 10},
145 p20: {padding: 20},
146 pr2: {paddingRight: 2},
147 pr5: {paddingRight: 5},
148 pr10: {paddingRight: 10},
149 pr20: {paddingRight: 20},
150 pl2: {paddingLeft: 2},
151 pl5: {paddingLeft: 5},
152 pl10: {paddingLeft: 10},
153 pl20: {paddingLeft: 20},
154 pt2: {paddingTop: 2},
155 pt5: {paddingTop: 5},
156 pt10: {paddingTop: 10},
157 pt20: {paddingTop: 20},
158 pb2: {paddingBottom: 2},
159 pb5: {paddingBottom: 5},
160 pb10: {paddingBottom: 10},
161 pb20: {paddingBottom: 20},
162 px5: {paddingHorizontal: 5},
163
164 // flex
165 flexRow: {flexDirection: 'row'},
166 flexCol: {flexDirection: 'column'},
167 flex1: {flex: 1},
168 flexGrow1: {flexGrow: 1},
169 alignCenter: {alignItems: 'center'},
170 alignBaseline: {alignItems: 'baseline'},
171 justifyCenter: {justifyContent: 'center'},
172
173 // position
174 absolute: {position: 'absolute'},
175
176 // dimensions
177 w100pct: {width: '100%'},
178 h100pct: {height: '100%'},
179 hContentRegion: isWeb ? {minHeight: '100%'} : {height: '100%'},
180 window: {
181 width: Dimensions.get('window').width,
182 height: Dimensions.get('window').height,
183 },
184
185 // text align
186 textLeft: {textAlign: 'left'},
187 textCenter: {textAlign: 'center'},
188 textRight: {textAlign: 'right'},
189
190 // colors
191 white: {color: colors.white},
192 black: {color: colors.black},
193
194 gray1: {color: colors.gray1},
195 gray2: {color: colors.gray2},
196 gray3: {color: colors.gray3},
197 gray4: {color: colors.gray4},
198 gray5: {color: colors.gray5},
199
200 blue1: {color: colors.blue1},
201 blue2: {color: colors.blue2},
202 blue3: {color: colors.blue3},
203 blue4: {color: colors.blue4},
204 blue5: {color: colors.blue5},
205
206 red1: {color: colors.red1},
207 red2: {color: colors.red2},
208 red3: {color: colors.red3},
209 red4: {color: colors.red4},
210 red5: {color: colors.red5},
211
212 pink1: {color: colors.pink1},
213 pink2: {color: colors.pink2},
214 pink3: {color: colors.pink3},
215 pink4: {color: colors.pink4},
216 pink5: {color: colors.pink5},
217
218 purple1: {color: colors.purple1},
219 purple2: {color: colors.purple2},
220 purple3: {color: colors.purple3},
221 purple4: {color: colors.purple4},
222 purple5: {color: colors.purple5},
223
224 green1: {color: colors.green1},
225 green2: {color: colors.green2},
226 green3: {color: colors.green3},
227 green4: {color: colors.green4},
228 green5: {color: colors.green5},
229
230 brandBlue: {color: colors.brandBlue},
231 likeColor: {color: colors.like},
232})
233
234export function lh(
235 theme: Theme,
236 type: TypographyVariant,
237 height: number,
238): TextStyle {
239 return {
240 lineHeight: Math.round((theme.typography[type].fontSize || 16) * height),
241 }
242}
243
244export function addStyle<T>(
245 base: StyleProp<T>,
246 addedStyle: StyleProp<T>,
247): StyleProp<T> {
248 if (Array.isArray(base)) {
249 return base.concat([addedStyle])
250 }
251 return [base, addedStyle]
252}