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