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