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