lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import {Platform} from 'react-native'
2import type {Theme} from './ThemeContext'
3import {colors} from './styles'
4
5import {darkPalette, lightPalette, dimPalette} from '#/alf/themes'
6
7export const defaultTheme: Theme = {
8 colorScheme: 'light',
9 palette: {
10 default: {
11 background: lightPalette.white,
12 backgroundLight: lightPalette.contrast_25,
13 text: lightPalette.black,
14 textLight: lightPalette.contrast_700,
15 textInverted: lightPalette.white,
16 link: lightPalette.primary_500,
17 border: lightPalette.contrast_100,
18 borderDark: lightPalette.contrast_200,
19 icon: lightPalette.contrast_500,
20
21 // non-standard
22 textVeryLight: lightPalette.contrast_400,
23 replyLine: lightPalette.contrast_100,
24 replyLineDot: lightPalette.contrast_200,
25 unreadNotifBg: lightPalette.primary_25,
26 unreadNotifBorder: lightPalette.primary_100,
27 postCtrl: lightPalette.contrast_500,
28 brandText: lightPalette.primary_500,
29 emptyStateIcon: lightPalette.contrast_300,
30 borderLinkHover: lightPalette.contrast_300,
31 },
32 primary: {
33 background: colors.blue3,
34 backgroundLight: colors.blue2,
35 text: colors.white,
36 textLight: colors.blue0,
37 textInverted: colors.blue3,
38 link: colors.blue0,
39 border: colors.blue4,
40 borderDark: colors.blue5,
41 icon: colors.blue4,
42 },
43 secondary: {
44 background: colors.green3,
45 backgroundLight: colors.green2,
46 text: colors.white,
47 textLight: colors.green1,
48 textInverted: colors.green4,
49 link: colors.green1,
50 border: colors.green4,
51 borderDark: colors.green5,
52 icon: colors.green4,
53 },
54 inverted: {
55 background: darkPalette.black,
56 backgroundLight: darkPalette.contrast_50,
57 text: darkPalette.white,
58 textLight: darkPalette.contrast_700,
59 textInverted: darkPalette.black,
60 link: darkPalette.primary_500,
61 border: darkPalette.contrast_100,
62 borderDark: darkPalette.contrast_200,
63 icon: darkPalette.contrast_500,
64 },
65 error: {
66 background: colors.red3,
67 backgroundLight: colors.red2,
68 text: colors.white,
69 textLight: colors.red1,
70 textInverted: colors.red3,
71 link: colors.red1,
72 border: colors.red4,
73 borderDark: colors.red5,
74 icon: colors.red4,
75 },
76 },
77 shapes: {
78 button: {
79 // TODO
80 },
81 bigButton: {
82 // TODO
83 },
84 smallButton: {
85 // TODO
86 },
87 },
88 typography: {
89 '2xl-thin': {
90 fontSize: 18,
91 letterSpacing: 0.25,
92 fontWeight: '300',
93 },
94 '2xl': {
95 fontSize: 18,
96 letterSpacing: 0.25,
97 fontWeight: '400',
98 },
99 '2xl-medium': {
100 fontSize: 18,
101 letterSpacing: 0.25,
102 fontWeight: '500',
103 },
104 '2xl-bold': {
105 fontSize: 18,
106 letterSpacing: 0.25,
107 fontWeight: '700',
108 },
109 '2xl-heavy': {
110 fontSize: 18,
111 letterSpacing: 0.25,
112 fontWeight: '800',
113 },
114 'xl-thin': {
115 fontSize: 17,
116 letterSpacing: 0.25,
117 fontWeight: '300',
118 },
119 xl: {
120 fontSize: 17,
121 letterSpacing: 0.25,
122 fontWeight: '400',
123 },
124 'xl-medium': {
125 fontSize: 17,
126 letterSpacing: 0.25,
127 fontWeight: '500',
128 },
129 'xl-bold': {
130 fontSize: 17,
131 letterSpacing: 0.25,
132 fontWeight: '700',
133 },
134 'xl-heavy': {
135 fontSize: 17,
136 letterSpacing: 0.25,
137 fontWeight: '800',
138 },
139 'lg-thin': {
140 fontSize: 16,
141 letterSpacing: 0.25,
142 fontWeight: '300',
143 },
144 lg: {
145 fontSize: 16,
146 letterSpacing: 0.25,
147 fontWeight: '400',
148 },
149 'lg-medium': {
150 fontSize: 16,
151 letterSpacing: 0.25,
152 fontWeight: '500',
153 },
154 'lg-bold': {
155 fontSize: 16,
156 letterSpacing: 0.25,
157 fontWeight: '700',
158 },
159 'lg-heavy': {
160 fontSize: 16,
161 letterSpacing: 0.25,
162 fontWeight: '800',
163 },
164 'md-thin': {
165 fontSize: 15,
166 letterSpacing: 0.25,
167 fontWeight: '300',
168 },
169 md: {
170 fontSize: 15,
171 letterSpacing: 0.25,
172 fontWeight: '400',
173 },
174 'md-medium': {
175 fontSize: 15,
176 letterSpacing: 0.25,
177 fontWeight: '500',
178 },
179 'md-bold': {
180 fontSize: 15,
181 letterSpacing: 0.25,
182 fontWeight: '700',
183 },
184 'md-heavy': {
185 fontSize: 15,
186 letterSpacing: 0.25,
187 fontWeight: '800',
188 },
189 'sm-thin': {
190 fontSize: 14,
191 letterSpacing: 0.25,
192 fontWeight: '300',
193 },
194 sm: {
195 fontSize: 14,
196 letterSpacing: 0.25,
197 fontWeight: '400',
198 },
199 'sm-medium': {
200 fontSize: 14,
201 letterSpacing: 0.25,
202 fontWeight: '500',
203 },
204 'sm-bold': {
205 fontSize: 14,
206 letterSpacing: 0.25,
207 fontWeight: '700',
208 },
209 'sm-heavy': {
210 fontSize: 14,
211 letterSpacing: 0.25,
212 fontWeight: '800',
213 },
214 'xs-thin': {
215 fontSize: 13,
216 letterSpacing: 0.25,
217 fontWeight: '300',
218 },
219 xs: {
220 fontSize: 13,
221 letterSpacing: 0.25,
222 fontWeight: '400',
223 },
224 'xs-medium': {
225 fontSize: 13,
226 letterSpacing: 0.25,
227 fontWeight: '500',
228 },
229 'xs-bold': {
230 fontSize: 13,
231 letterSpacing: 0.25,
232 fontWeight: '700',
233 },
234 'xs-heavy': {
235 fontSize: 13,
236 letterSpacing: 0.25,
237 fontWeight: '800',
238 },
239
240 'title-2xl': {
241 fontSize: 34,
242 letterSpacing: 0.25,
243 fontWeight: '500',
244 },
245 'title-xl': {
246 fontSize: 28,
247 letterSpacing: 0.25,
248 fontWeight: '500',
249 },
250 'title-lg': {
251 fontSize: 22,
252 fontWeight: '500',
253 },
254 title: {
255 fontWeight: '500',
256 fontSize: 20,
257 letterSpacing: 0.15,
258 },
259 'title-sm': {
260 fontWeight: 'bold',
261 fontSize: 17,
262 letterSpacing: 0.15,
263 },
264 'post-text': {
265 fontSize: 16,
266 letterSpacing: 0.2,
267 fontWeight: '400',
268 },
269 'post-text-lg': {
270 fontSize: 20,
271 letterSpacing: 0.2,
272 fontWeight: '400',
273 },
274 'button-lg': {
275 fontWeight: '500',
276 fontSize: 18,
277 letterSpacing: 0.5,
278 },
279 button: {
280 fontWeight: '500',
281 fontSize: 14,
282 letterSpacing: 0.5,
283 },
284 mono: {
285 fontSize: 14,
286 fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New',
287 },
288 },
289}
290
291export const darkTheme: Theme = {
292 ...defaultTheme,
293 colorScheme: 'dark',
294 palette: {
295 ...defaultTheme.palette,
296 default: {
297 background: darkPalette.black,
298 backgroundLight: darkPalette.contrast_50,
299 text: darkPalette.white,
300 textLight: darkPalette.contrast_700,
301 textInverted: darkPalette.black,
302 link: darkPalette.primary_500,
303 border: darkPalette.contrast_100,
304 borderDark: darkPalette.contrast_200,
305 icon: darkPalette.contrast_500,
306
307 // non-standard
308 textVeryLight: darkPalette.contrast_400,
309 replyLine: darkPalette.contrast_200,
310 replyLineDot: darkPalette.contrast_200,
311 unreadNotifBg: darkPalette.primary_975,
312 unreadNotifBorder: darkPalette.primary_900,
313 postCtrl: darkPalette.contrast_500,
314 brandText: darkPalette.primary_500,
315 emptyStateIcon: darkPalette.contrast_300,
316 borderLinkHover: darkPalette.contrast_300,
317 },
318 primary: {
319 ...defaultTheme.palette.primary,
320 textInverted: colors.blue2,
321 },
322 secondary: {
323 ...defaultTheme.palette.secondary,
324 textInverted: colors.green2,
325 },
326 inverted: {
327 background: lightPalette.white,
328 backgroundLight: lightPalette.contrast_50,
329 text: lightPalette.black,
330 textLight: lightPalette.contrast_700,
331 textInverted: lightPalette.white,
332 link: lightPalette.primary_500,
333 border: lightPalette.contrast_100,
334 borderDark: lightPalette.contrast_200,
335 icon: lightPalette.contrast_500,
336 },
337 },
338}
339
340export const dimTheme: Theme = {
341 ...darkTheme,
342 palette: {
343 ...darkTheme.palette,
344 default: {
345 ...darkTheme.palette.default,
346 background: dimPalette.black,
347 backgroundLight: dimPalette.contrast_50,
348 text: dimPalette.white,
349 textLight: dimPalette.contrast_700,
350 textInverted: dimPalette.black,
351 link: dimPalette.primary_500,
352 border: dimPalette.contrast_100,
353 borderDark: dimPalette.contrast_200,
354 icon: dimPalette.contrast_500,
355
356 // non-standard
357 textVeryLight: dimPalette.contrast_400,
358 replyLine: dimPalette.contrast_200,
359 replyLineDot: dimPalette.contrast_200,
360 unreadNotifBg: dimPalette.primary_975,
361 unreadNotifBorder: dimPalette.primary_900,
362 postCtrl: dimPalette.contrast_500,
363 brandText: dimPalette.primary_500,
364 emptyStateIcon: dimPalette.contrast_300,
365 borderLinkHover: dimPalette.contrast_300,
366 },
367 },
368}