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