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