quilling.dev
An ATproto social media client -- with an independent Appview.
Revert "Migrate to `@bsky.app/alf` package (#9030)"
This reverts commit bd17f0481054f23aa2e0bb5aecf88566fdfe9d6a.
-1
package.json
-1
package.json
+997
-4
src/alf/atoms.ts
+997
-4
src/alf/atoms.ts
···
1
-
import {type StyleProp, type ViewStyle} from 'react-native'
2
-
import {atoms as baseAtoms} from '@bsky.app/alf'
3
4
-
import {native, platform, web} from '#/alf/util/platform'
5
import * as Layout from '#/components/Layout'
6
7
export const atoms = {
8
-
...baseAtoms,
9
10
h_full_vh: web({
11
height: '100vh',
12
}),
13
14
/**
15
* Used for the outermost components on screens, to ensure that they can fill
···
32
},
33
34
/*
35
* Transition
36
*/
37
transition_none: web({
···
110
transform: [],
111
},
112
}) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
113
} as const
···
1
+
import {
2
+
Platform,
3
+
type StyleProp,
4
+
StyleSheet,
5
+
type ViewStyle,
6
+
} from 'react-native'
7
8
+
import * as tokens from '#/alf/tokens'
9
+
import {ios, native, platform, web} from '#/alf/util/platform'
10
import * as Layout from '#/components/Layout'
11
12
export const atoms = {
13
+
debug: {
14
+
borderColor: 'red',
15
+
borderWidth: 1,
16
+
},
17
18
+
/*
19
+
* Positioning
20
+
*/
21
+
fixed: {
22
+
position: Platform.select({web: 'fixed', native: 'absolute'}) as 'absolute',
23
+
},
24
+
absolute: {
25
+
position: 'absolute',
26
+
},
27
+
relative: {
28
+
position: 'relative',
29
+
},
30
+
static: {
31
+
position: 'static',
32
+
},
33
+
sticky: web({
34
+
position: 'sticky',
35
+
}),
36
+
inset_0: {
37
+
top: 0,
38
+
left: 0,
39
+
right: 0,
40
+
bottom: 0,
41
+
},
42
+
top_0: {
43
+
top: 0,
44
+
},
45
+
right_0: {
46
+
right: 0,
47
+
},
48
+
bottom_0: {
49
+
bottom: 0,
50
+
},
51
+
left_0: {
52
+
left: 0,
53
+
},
54
+
z_10: {
55
+
zIndex: 10,
56
+
},
57
+
z_20: {
58
+
zIndex: 20,
59
+
},
60
+
z_30: {
61
+
zIndex: 30,
62
+
},
63
+
z_40: {
64
+
zIndex: 40,
65
+
},
66
+
z_50: {
67
+
zIndex: 50,
68
+
},
69
+
70
+
overflow_visible: {
71
+
overflow: 'visible',
72
+
},
73
+
overflow_x_visible: {
74
+
overflowX: 'visible',
75
+
},
76
+
overflow_y_visible: {
77
+
overflowY: 'visible',
78
+
},
79
+
overflow_hidden: {
80
+
overflow: 'hidden',
81
+
},
82
+
overflow_x_hidden: {
83
+
overflowX: 'hidden',
84
+
},
85
+
overflow_y_hidden: {
86
+
overflowY: 'hidden',
87
+
},
88
+
/**
89
+
* @platform web
90
+
*/
91
+
overflow_auto: web({
92
+
overflow: 'auto',
93
+
}),
94
+
95
+
/*
96
+
* Width & Height
97
+
*/
98
+
w_full: {
99
+
width: '100%',
100
+
},
101
+
h_full: {
102
+
height: '100%',
103
+
},
104
h_full_vh: web({
105
height: '100vh',
106
}),
107
+
max_w_full: {
108
+
maxWidth: '100%',
109
+
},
110
+
max_h_full: {
111
+
maxHeight: '100%',
112
+
},
113
114
/**
115
* Used for the outermost components on screens, to ensure that they can fill
···
132
},
133
134
/*
135
+
* Border radius
136
+
*/
137
+
rounded_0: {
138
+
borderRadius: 0,
139
+
},
140
+
rounded_2xs: {
141
+
borderRadius: tokens.borderRadius._2xs,
142
+
},
143
+
rounded_xs: {
144
+
borderRadius: tokens.borderRadius.xs,
145
+
},
146
+
rounded_sm: {
147
+
borderRadius: tokens.borderRadius.sm,
148
+
},
149
+
rounded_md: {
150
+
borderRadius: tokens.borderRadius.md,
151
+
},
152
+
rounded_lg: {
153
+
borderRadius: tokens.borderRadius.lg,
154
+
},
155
+
rounded_full: {
156
+
borderRadius: tokens.borderRadius.full,
157
+
},
158
+
159
+
/*
160
+
* Flex
161
+
*/
162
+
gap_0: {
163
+
gap: 0,
164
+
},
165
+
gap_2xs: {
166
+
gap: tokens.space._2xs,
167
+
},
168
+
gap_xs: {
169
+
gap: tokens.space.xs,
170
+
},
171
+
gap_sm: {
172
+
gap: tokens.space.sm,
173
+
},
174
+
gap_md: {
175
+
gap: tokens.space.md,
176
+
},
177
+
gap_lg: {
178
+
gap: tokens.space.lg,
179
+
},
180
+
gap_xl: {
181
+
gap: tokens.space.xl,
182
+
},
183
+
gap_2xl: {
184
+
gap: tokens.space._2xl,
185
+
},
186
+
gap_3xl: {
187
+
gap: tokens.space._3xl,
188
+
},
189
+
gap_4xl: {
190
+
gap: tokens.space._4xl,
191
+
},
192
+
gap_5xl: {
193
+
gap: tokens.space._5xl,
194
+
},
195
+
flex: {
196
+
display: 'flex',
197
+
},
198
+
flex_col: {
199
+
flexDirection: 'column',
200
+
},
201
+
flex_row: {
202
+
flexDirection: 'row',
203
+
},
204
+
flex_col_reverse: {
205
+
flexDirection: 'column-reverse',
206
+
},
207
+
flex_row_reverse: {
208
+
flexDirection: 'row-reverse',
209
+
},
210
+
flex_wrap: {
211
+
flexWrap: 'wrap',
212
+
},
213
+
flex_nowrap: {
214
+
flexWrap: 'nowrap',
215
+
},
216
+
flex_0: {
217
+
flex: web('0 0 auto') || (native(0) as number),
218
+
},
219
+
flex_1: {
220
+
flex: 1,
221
+
},
222
+
flex_grow: {
223
+
flexGrow: 1,
224
+
},
225
+
flex_grow_0: {
226
+
flexGrow: 0,
227
+
},
228
+
flex_shrink: {
229
+
flexShrink: 1,
230
+
},
231
+
flex_shrink_0: {
232
+
flexShrink: 0,
233
+
},
234
+
justify_start: {
235
+
justifyContent: 'flex-start',
236
+
},
237
+
justify_center: {
238
+
justifyContent: 'center',
239
+
},
240
+
justify_between: {
241
+
justifyContent: 'space-between',
242
+
},
243
+
justify_end: {
244
+
justifyContent: 'flex-end',
245
+
},
246
+
align_center: {
247
+
alignItems: 'center',
248
+
},
249
+
align_start: {
250
+
alignItems: 'flex-start',
251
+
},
252
+
align_end: {
253
+
alignItems: 'flex-end',
254
+
},
255
+
align_baseline: {
256
+
alignItems: 'baseline',
257
+
},
258
+
align_stretch: {
259
+
alignItems: 'stretch',
260
+
},
261
+
self_auto: {
262
+
alignSelf: 'auto',
263
+
},
264
+
self_start: {
265
+
alignSelf: 'flex-start',
266
+
},
267
+
self_end: {
268
+
alignSelf: 'flex-end',
269
+
},
270
+
self_center: {
271
+
alignSelf: 'center',
272
+
},
273
+
self_stretch: {
274
+
alignSelf: 'stretch',
275
+
},
276
+
self_baseline: {
277
+
alignSelf: 'baseline',
278
+
},
279
+
280
+
/*
281
+
* Text
282
+
*/
283
+
text_left: {
284
+
textAlign: 'left',
285
+
},
286
+
text_center: {
287
+
textAlign: 'center',
288
+
},
289
+
text_right: {
290
+
textAlign: 'right',
291
+
},
292
+
text_2xs: {
293
+
fontSize: tokens.fontSize._2xs,
294
+
letterSpacing: tokens.TRACKING,
295
+
},
296
+
text_xs: {
297
+
fontSize: tokens.fontSize.xs,
298
+
letterSpacing: tokens.TRACKING,
299
+
},
300
+
text_sm: {
301
+
fontSize: tokens.fontSize.sm,
302
+
letterSpacing: tokens.TRACKING,
303
+
},
304
+
text_md: {
305
+
fontSize: tokens.fontSize.md,
306
+
letterSpacing: tokens.TRACKING,
307
+
},
308
+
text_lg: {
309
+
fontSize: tokens.fontSize.lg,
310
+
letterSpacing: tokens.TRACKING,
311
+
},
312
+
text_xl: {
313
+
fontSize: tokens.fontSize.xl,
314
+
letterSpacing: tokens.TRACKING,
315
+
},
316
+
text_2xl: {
317
+
fontSize: tokens.fontSize._2xl,
318
+
letterSpacing: tokens.TRACKING,
319
+
},
320
+
text_3xl: {
321
+
fontSize: tokens.fontSize._3xl,
322
+
letterSpacing: tokens.TRACKING,
323
+
},
324
+
text_4xl: {
325
+
fontSize: tokens.fontSize._4xl,
326
+
letterSpacing: tokens.TRACKING,
327
+
},
328
+
text_5xl: {
329
+
fontSize: tokens.fontSize._5xl,
330
+
letterSpacing: tokens.TRACKING,
331
+
},
332
+
leading_tight: {
333
+
lineHeight: 1.15,
334
+
},
335
+
leading_snug: {
336
+
lineHeight: 1.3,
337
+
},
338
+
leading_normal: {
339
+
lineHeight: 1.5,
340
+
},
341
+
tracking_normal: {
342
+
letterSpacing: tokens.TRACKING,
343
+
},
344
+
font_normal: {
345
+
fontWeight: tokens.fontWeight.normal,
346
+
},
347
+
font_medium: {
348
+
fontWeight: tokens.fontWeight.medium,
349
+
},
350
+
font_bold: {
351
+
fontWeight: tokens.fontWeight.bold,
352
+
},
353
+
font_heavy: {
354
+
fontWeight: tokens.fontWeight.heavy,
355
+
},
356
+
italic: {
357
+
fontStyle: 'italic',
358
+
},
359
+
360
+
/*
361
+
* Border
362
+
*/
363
+
border_0: {
364
+
borderWidth: 0,
365
+
},
366
+
border_t_0: {
367
+
borderTopWidth: 0,
368
+
},
369
+
border_b_0: {
370
+
borderBottomWidth: 0,
371
+
},
372
+
border_l_0: {
373
+
borderLeftWidth: 0,
374
+
},
375
+
border_r_0: {
376
+
borderRightWidth: 0,
377
+
},
378
+
border_x_0: {
379
+
borderLeftWidth: 0,
380
+
borderRightWidth: 0,
381
+
},
382
+
border_y_0: {
383
+
borderTopWidth: 0,
384
+
borderBottomWidth: 0,
385
+
},
386
+
border: {
387
+
borderWidth: StyleSheet.hairlineWidth,
388
+
},
389
+
border_t: {
390
+
borderTopWidth: StyleSheet.hairlineWidth,
391
+
},
392
+
border_b: {
393
+
borderBottomWidth: StyleSheet.hairlineWidth,
394
+
},
395
+
border_l: {
396
+
borderLeftWidth: StyleSheet.hairlineWidth,
397
+
},
398
+
border_r: {
399
+
borderRightWidth: StyleSheet.hairlineWidth,
400
+
},
401
+
border_x: {
402
+
borderLeftWidth: StyleSheet.hairlineWidth,
403
+
borderRightWidth: StyleSheet.hairlineWidth,
404
+
},
405
+
border_y: {
406
+
borderTopWidth: StyleSheet.hairlineWidth,
407
+
borderBottomWidth: StyleSheet.hairlineWidth,
408
+
},
409
+
border_transparent: {
410
+
borderColor: 'transparent',
411
+
},
412
+
curve_circular: ios({
413
+
borderCurve: 'circular',
414
+
}),
415
+
curve_continuous: ios({
416
+
borderCurve: 'continuous',
417
+
}),
418
+
419
+
/*
420
+
* Shadow
421
+
*/
422
+
shadow_sm: {
423
+
shadowRadius: 8,
424
+
shadowOpacity: 0.1,
425
+
elevation: 8,
426
+
},
427
+
shadow_md: {
428
+
shadowRadius: 16,
429
+
shadowOpacity: 0.1,
430
+
elevation: 16,
431
+
},
432
+
shadow_lg: {
433
+
shadowRadius: 32,
434
+
shadowOpacity: 0.1,
435
+
elevation: 24,
436
+
},
437
+
438
+
/*
439
+
* Padding
440
+
*/
441
+
p_0: {
442
+
padding: 0,
443
+
},
444
+
p_2xs: {
445
+
padding: tokens.space._2xs,
446
+
},
447
+
p_xs: {
448
+
padding: tokens.space.xs,
449
+
},
450
+
p_sm: {
451
+
padding: tokens.space.sm,
452
+
},
453
+
p_md: {
454
+
padding: tokens.space.md,
455
+
},
456
+
p_lg: {
457
+
padding: tokens.space.lg,
458
+
},
459
+
p_xl: {
460
+
padding: tokens.space.xl,
461
+
},
462
+
p_2xl: {
463
+
padding: tokens.space._2xl,
464
+
},
465
+
p_3xl: {
466
+
padding: tokens.space._3xl,
467
+
},
468
+
p_4xl: {
469
+
padding: tokens.space._4xl,
470
+
},
471
+
p_5xl: {
472
+
padding: tokens.space._5xl,
473
+
},
474
+
px_0: {
475
+
paddingLeft: 0,
476
+
paddingRight: 0,
477
+
},
478
+
px_2xs: {
479
+
paddingLeft: tokens.space._2xs,
480
+
paddingRight: tokens.space._2xs,
481
+
},
482
+
px_xs: {
483
+
paddingLeft: tokens.space.xs,
484
+
paddingRight: tokens.space.xs,
485
+
},
486
+
px_sm: {
487
+
paddingLeft: tokens.space.sm,
488
+
paddingRight: tokens.space.sm,
489
+
},
490
+
px_md: {
491
+
paddingLeft: tokens.space.md,
492
+
paddingRight: tokens.space.md,
493
+
},
494
+
px_lg: {
495
+
paddingLeft: tokens.space.lg,
496
+
paddingRight: tokens.space.lg,
497
+
},
498
+
px_xl: {
499
+
paddingLeft: tokens.space.xl,
500
+
paddingRight: tokens.space.xl,
501
+
},
502
+
px_2xl: {
503
+
paddingLeft: tokens.space._2xl,
504
+
paddingRight: tokens.space._2xl,
505
+
},
506
+
px_3xl: {
507
+
paddingLeft: tokens.space._3xl,
508
+
paddingRight: tokens.space._3xl,
509
+
},
510
+
px_4xl: {
511
+
paddingLeft: tokens.space._4xl,
512
+
paddingRight: tokens.space._4xl,
513
+
},
514
+
px_5xl: {
515
+
paddingLeft: tokens.space._5xl,
516
+
paddingRight: tokens.space._5xl,
517
+
},
518
+
py_0: {
519
+
paddingTop: 0,
520
+
paddingBottom: 0,
521
+
},
522
+
py_2xs: {
523
+
paddingTop: tokens.space._2xs,
524
+
paddingBottom: tokens.space._2xs,
525
+
},
526
+
py_xs: {
527
+
paddingTop: tokens.space.xs,
528
+
paddingBottom: tokens.space.xs,
529
+
},
530
+
py_sm: {
531
+
paddingTop: tokens.space.sm,
532
+
paddingBottom: tokens.space.sm,
533
+
},
534
+
py_md: {
535
+
paddingTop: tokens.space.md,
536
+
paddingBottom: tokens.space.md,
537
+
},
538
+
py_lg: {
539
+
paddingTop: tokens.space.lg,
540
+
paddingBottom: tokens.space.lg,
541
+
},
542
+
py_xl: {
543
+
paddingTop: tokens.space.xl,
544
+
paddingBottom: tokens.space.xl,
545
+
},
546
+
py_2xl: {
547
+
paddingTop: tokens.space._2xl,
548
+
paddingBottom: tokens.space._2xl,
549
+
},
550
+
py_3xl: {
551
+
paddingTop: tokens.space._3xl,
552
+
paddingBottom: tokens.space._3xl,
553
+
},
554
+
py_4xl: {
555
+
paddingTop: tokens.space._4xl,
556
+
paddingBottom: tokens.space._4xl,
557
+
},
558
+
py_5xl: {
559
+
paddingTop: tokens.space._5xl,
560
+
paddingBottom: tokens.space._5xl,
561
+
},
562
+
pt_0: {
563
+
paddingTop: 0,
564
+
},
565
+
pt_2xs: {
566
+
paddingTop: tokens.space._2xs,
567
+
},
568
+
pt_xs: {
569
+
paddingTop: tokens.space.xs,
570
+
},
571
+
pt_sm: {
572
+
paddingTop: tokens.space.sm,
573
+
},
574
+
pt_md: {
575
+
paddingTop: tokens.space.md,
576
+
},
577
+
pt_lg: {
578
+
paddingTop: tokens.space.lg,
579
+
},
580
+
pt_xl: {
581
+
paddingTop: tokens.space.xl,
582
+
},
583
+
pt_2xl: {
584
+
paddingTop: tokens.space._2xl,
585
+
},
586
+
pt_3xl: {
587
+
paddingTop: tokens.space._3xl,
588
+
},
589
+
pt_4xl: {
590
+
paddingTop: tokens.space._4xl,
591
+
},
592
+
pt_5xl: {
593
+
paddingTop: tokens.space._5xl,
594
+
},
595
+
pb_0: {
596
+
paddingBottom: 0,
597
+
},
598
+
pb_2xs: {
599
+
paddingBottom: tokens.space._2xs,
600
+
},
601
+
pb_xs: {
602
+
paddingBottom: tokens.space.xs,
603
+
},
604
+
pb_sm: {
605
+
paddingBottom: tokens.space.sm,
606
+
},
607
+
pb_md: {
608
+
paddingBottom: tokens.space.md,
609
+
},
610
+
pb_lg: {
611
+
paddingBottom: tokens.space.lg,
612
+
},
613
+
pb_xl: {
614
+
paddingBottom: tokens.space.xl,
615
+
},
616
+
pb_2xl: {
617
+
paddingBottom: tokens.space._2xl,
618
+
},
619
+
pb_3xl: {
620
+
paddingBottom: tokens.space._3xl,
621
+
},
622
+
pb_4xl: {
623
+
paddingBottom: tokens.space._4xl,
624
+
},
625
+
pb_5xl: {
626
+
paddingBottom: tokens.space._5xl,
627
+
},
628
+
pl_0: {
629
+
paddingLeft: 0,
630
+
},
631
+
pl_2xs: {
632
+
paddingLeft: tokens.space._2xs,
633
+
},
634
+
pl_xs: {
635
+
paddingLeft: tokens.space.xs,
636
+
},
637
+
pl_sm: {
638
+
paddingLeft: tokens.space.sm,
639
+
},
640
+
pl_md: {
641
+
paddingLeft: tokens.space.md,
642
+
},
643
+
pl_lg: {
644
+
paddingLeft: tokens.space.lg,
645
+
},
646
+
pl_xl: {
647
+
paddingLeft: tokens.space.xl,
648
+
},
649
+
pl_2xl: {
650
+
paddingLeft: tokens.space._2xl,
651
+
},
652
+
pl_3xl: {
653
+
paddingLeft: tokens.space._3xl,
654
+
},
655
+
pl_4xl: {
656
+
paddingLeft: tokens.space._4xl,
657
+
},
658
+
pl_5xl: {
659
+
paddingLeft: tokens.space._5xl,
660
+
},
661
+
pr_0: {
662
+
paddingRight: 0,
663
+
},
664
+
pr_2xs: {
665
+
paddingRight: tokens.space._2xs,
666
+
},
667
+
pr_xs: {
668
+
paddingRight: tokens.space.xs,
669
+
},
670
+
pr_sm: {
671
+
paddingRight: tokens.space.sm,
672
+
},
673
+
pr_md: {
674
+
paddingRight: tokens.space.md,
675
+
},
676
+
pr_lg: {
677
+
paddingRight: tokens.space.lg,
678
+
},
679
+
pr_xl: {
680
+
paddingRight: tokens.space.xl,
681
+
},
682
+
pr_2xl: {
683
+
paddingRight: tokens.space._2xl,
684
+
},
685
+
pr_3xl: {
686
+
paddingRight: tokens.space._3xl,
687
+
},
688
+
pr_4xl: {
689
+
paddingRight: tokens.space._4xl,
690
+
},
691
+
pr_5xl: {
692
+
paddingRight: tokens.space._5xl,
693
+
},
694
+
695
+
/*
696
+
* Margin
697
+
*/
698
+
m_0: {
699
+
margin: 0,
700
+
},
701
+
m_2xs: {
702
+
margin: tokens.space._2xs,
703
+
},
704
+
m_xs: {
705
+
margin: tokens.space.xs,
706
+
},
707
+
m_sm: {
708
+
margin: tokens.space.sm,
709
+
},
710
+
m_md: {
711
+
margin: tokens.space.md,
712
+
},
713
+
m_lg: {
714
+
margin: tokens.space.lg,
715
+
},
716
+
m_xl: {
717
+
margin: tokens.space.xl,
718
+
},
719
+
m_2xl: {
720
+
margin: tokens.space._2xl,
721
+
},
722
+
m_3xl: {
723
+
margin: tokens.space._3xl,
724
+
},
725
+
m_4xl: {
726
+
margin: tokens.space._4xl,
727
+
},
728
+
m_5xl: {
729
+
margin: tokens.space._5xl,
730
+
},
731
+
m_auto: {
732
+
margin: 'auto',
733
+
},
734
+
mx_0: {
735
+
marginLeft: 0,
736
+
marginRight: 0,
737
+
},
738
+
mx_2xs: {
739
+
marginLeft: tokens.space._2xs,
740
+
marginRight: tokens.space._2xs,
741
+
},
742
+
mx_xs: {
743
+
marginLeft: tokens.space.xs,
744
+
marginRight: tokens.space.xs,
745
+
},
746
+
mx_sm: {
747
+
marginLeft: tokens.space.sm,
748
+
marginRight: tokens.space.sm,
749
+
},
750
+
mx_md: {
751
+
marginLeft: tokens.space.md,
752
+
marginRight: tokens.space.md,
753
+
},
754
+
mx_lg: {
755
+
marginLeft: tokens.space.lg,
756
+
marginRight: tokens.space.lg,
757
+
},
758
+
mx_xl: {
759
+
marginLeft: tokens.space.xl,
760
+
marginRight: tokens.space.xl,
761
+
},
762
+
mx_2xl: {
763
+
marginLeft: tokens.space._2xl,
764
+
marginRight: tokens.space._2xl,
765
+
},
766
+
mx_3xl: {
767
+
marginLeft: tokens.space._3xl,
768
+
marginRight: tokens.space._3xl,
769
+
},
770
+
mx_4xl: {
771
+
marginLeft: tokens.space._4xl,
772
+
marginRight: tokens.space._4xl,
773
+
},
774
+
mx_5xl: {
775
+
marginLeft: tokens.space._5xl,
776
+
marginRight: tokens.space._5xl,
777
+
},
778
+
mx_auto: {
779
+
marginLeft: 'auto',
780
+
marginRight: 'auto',
781
+
},
782
+
my_0: {
783
+
marginTop: 0,
784
+
marginBottom: 0,
785
+
},
786
+
my_2xs: {
787
+
marginTop: tokens.space._2xs,
788
+
marginBottom: tokens.space._2xs,
789
+
},
790
+
my_xs: {
791
+
marginTop: tokens.space.xs,
792
+
marginBottom: tokens.space.xs,
793
+
},
794
+
my_sm: {
795
+
marginTop: tokens.space.sm,
796
+
marginBottom: tokens.space.sm,
797
+
},
798
+
my_md: {
799
+
marginTop: tokens.space.md,
800
+
marginBottom: tokens.space.md,
801
+
},
802
+
my_lg: {
803
+
marginTop: tokens.space.lg,
804
+
marginBottom: tokens.space.lg,
805
+
},
806
+
my_xl: {
807
+
marginTop: tokens.space.xl,
808
+
marginBottom: tokens.space.xl,
809
+
},
810
+
my_2xl: {
811
+
marginTop: tokens.space._2xl,
812
+
marginBottom: tokens.space._2xl,
813
+
},
814
+
my_3xl: {
815
+
marginTop: tokens.space._3xl,
816
+
marginBottom: tokens.space._3xl,
817
+
},
818
+
my_4xl: {
819
+
marginTop: tokens.space._4xl,
820
+
marginBottom: tokens.space._4xl,
821
+
},
822
+
my_5xl: {
823
+
marginTop: tokens.space._5xl,
824
+
marginBottom: tokens.space._5xl,
825
+
},
826
+
my_auto: {
827
+
marginTop: 'auto',
828
+
marginBottom: 'auto',
829
+
},
830
+
mt_0: {
831
+
marginTop: 0,
832
+
},
833
+
mt_2xs: {
834
+
marginTop: tokens.space._2xs,
835
+
},
836
+
mt_xs: {
837
+
marginTop: tokens.space.xs,
838
+
},
839
+
mt_sm: {
840
+
marginTop: tokens.space.sm,
841
+
},
842
+
mt_md: {
843
+
marginTop: tokens.space.md,
844
+
},
845
+
mt_lg: {
846
+
marginTop: tokens.space.lg,
847
+
},
848
+
mt_xl: {
849
+
marginTop: tokens.space.xl,
850
+
},
851
+
mt_2xl: {
852
+
marginTop: tokens.space._2xl,
853
+
},
854
+
mt_3xl: {
855
+
marginTop: tokens.space._3xl,
856
+
},
857
+
mt_4xl: {
858
+
marginTop: tokens.space._4xl,
859
+
},
860
+
mt_5xl: {
861
+
marginTop: tokens.space._5xl,
862
+
},
863
+
mt_auto: {
864
+
marginTop: 'auto',
865
+
},
866
+
mb_0: {
867
+
marginBottom: 0,
868
+
},
869
+
mb_2xs: {
870
+
marginBottom: tokens.space._2xs,
871
+
},
872
+
mb_xs: {
873
+
marginBottom: tokens.space.xs,
874
+
},
875
+
mb_sm: {
876
+
marginBottom: tokens.space.sm,
877
+
},
878
+
mb_md: {
879
+
marginBottom: tokens.space.md,
880
+
},
881
+
mb_lg: {
882
+
marginBottom: tokens.space.lg,
883
+
},
884
+
mb_xl: {
885
+
marginBottom: tokens.space.xl,
886
+
},
887
+
mb_2xl: {
888
+
marginBottom: tokens.space._2xl,
889
+
},
890
+
mb_3xl: {
891
+
marginBottom: tokens.space._3xl,
892
+
},
893
+
mb_4xl: {
894
+
marginBottom: tokens.space._4xl,
895
+
},
896
+
mb_5xl: {
897
+
marginBottom: tokens.space._5xl,
898
+
},
899
+
mb_auto: {
900
+
marginBottom: 'auto',
901
+
},
902
+
ml_0: {
903
+
marginLeft: 0,
904
+
},
905
+
ml_2xs: {
906
+
marginLeft: tokens.space._2xs,
907
+
},
908
+
ml_xs: {
909
+
marginLeft: tokens.space.xs,
910
+
},
911
+
ml_sm: {
912
+
marginLeft: tokens.space.sm,
913
+
},
914
+
ml_md: {
915
+
marginLeft: tokens.space.md,
916
+
},
917
+
ml_lg: {
918
+
marginLeft: tokens.space.lg,
919
+
},
920
+
ml_xl: {
921
+
marginLeft: tokens.space.xl,
922
+
},
923
+
ml_2xl: {
924
+
marginLeft: tokens.space._2xl,
925
+
},
926
+
ml_3xl: {
927
+
marginLeft: tokens.space._3xl,
928
+
},
929
+
ml_4xl: {
930
+
marginLeft: tokens.space._4xl,
931
+
},
932
+
ml_5xl: {
933
+
marginLeft: tokens.space._5xl,
934
+
},
935
+
ml_auto: {
936
+
marginLeft: 'auto',
937
+
},
938
+
mr_0: {
939
+
marginRight: 0,
940
+
},
941
+
mr_2xs: {
942
+
marginRight: tokens.space._2xs,
943
+
},
944
+
mr_xs: {
945
+
marginRight: tokens.space.xs,
946
+
},
947
+
mr_sm: {
948
+
marginRight: tokens.space.sm,
949
+
},
950
+
mr_md: {
951
+
marginRight: tokens.space.md,
952
+
},
953
+
mr_lg: {
954
+
marginRight: tokens.space.lg,
955
+
},
956
+
mr_xl: {
957
+
marginRight: tokens.space.xl,
958
+
},
959
+
mr_2xl: {
960
+
marginRight: tokens.space._2xl,
961
+
},
962
+
mr_3xl: {
963
+
marginRight: tokens.space._3xl,
964
+
},
965
+
mr_4xl: {
966
+
marginRight: tokens.space._4xl,
967
+
},
968
+
mr_5xl: {
969
+
marginRight: tokens.space._5xl,
970
+
},
971
+
mr_auto: {
972
+
marginRight: 'auto',
973
+
},
974
+
975
+
/*
976
+
* Pointer events & user select
977
+
*/
978
+
pointer_events_none: {
979
+
pointerEvents: 'none',
980
+
},
981
+
pointer_events_auto: {
982
+
pointerEvents: 'auto',
983
+
},
984
+
user_select_none: {
985
+
userSelect: 'none',
986
+
},
987
+
user_select_text: {
988
+
userSelect: 'text',
989
+
},
990
+
user_select_all: {
991
+
userSelect: 'all',
992
+
},
993
+
outline_inset_1: {
994
+
outlineOffset: -1,
995
+
},
996
+
997
+
/*
998
+
* Text decoration
999
+
*/
1000
+
underline: {
1001
+
textDecorationLine: 'underline',
1002
+
},
1003
+
strike_through: {
1004
+
textDecorationLine: 'line-through',
1005
+
},
1006
+
1007
+
/*
1008
+
* Display
1009
+
*/
1010
+
hidden: {
1011
+
display: 'none',
1012
+
},
1013
+
inline: web({
1014
+
display: 'inline',
1015
+
}),
1016
+
block: web({
1017
+
display: 'block',
1018
+
}),
1019
+
contents: web({
1020
+
display: 'contents',
1021
+
}),
1022
+
1023
+
/*
1024
* Transition
1025
*/
1026
transition_none: web({
···
1099
transform: [],
1100
},
1101
}) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
1102
+
1103
+
pointer: web({
1104
+
cursor: 'pointer',
1105
+
}),
1106
} as const
+5
-5
src/alf/fonts.ts
+5
-5
src/alf/fonts.ts
···
7
8
const factor = 0.0625 // 1 - (15/16)
9
const fontScaleMultipliers: Record<Device['fontScale'], number> = {
10
-
'-2': 1 - factor * 1, // unused
11
-
'-1': 1 - factor * 1,
12
-
'0': 1, // default
13
-
'1': 1 + factor * 1,
14
-
'2': 1 + factor * 1, // unused
15
}
16
17
export function computeFontScaleMultiplier(scale: Device['fontScale']) {
···
7
8
const factor = 0.0625 // 1 - (15/16)
9
const fontScaleMultipliers: Record<Device['fontScale'], number> = {
10
+
'-2': 1 - factor * 3,
11
+
'-1': 1 - factor * 2,
12
+
'0': 1 - factor * 1, // default
13
+
'1': 1,
14
+
'2': 1 + factor * 1,
15
}
16
17
export function computeFontScaleMultiplier(scale: Device['fontScale']) {
+30
-13
src/alf/index.tsx
+30
-13
src/alf/index.tsx
···
1
import React from 'react'
2
-
import {type Theme, type ThemeName} from '@bsky.app/alf'
3
4
import {
5
computeFontScaleMultiplier,
···
8
setFontFamily as persistFontFamily,
9
setFontScale as persistFontScale,
10
} from '#/alf/fonts'
11
-
import {themes} from '#/alf/themes'
12
import {type Device} from '#/storage'
13
14
-
export {type TextStyleProp, type Theme, type ViewStyleProp} from '@bsky.app/alf'
15
export {atoms} from '#/alf/atoms'
16
export * from '#/alf/breakpoints'
17
export * from '#/alf/fonts'
18
export * as tokens from '#/alf/tokens'
19
export * from '#/alf/util/flatten'
20
export * from '#/alf/util/platform'
21
export * from '#/alf/util/themeSelector'
···
24
export type Alf = {
25
themeName: ThemeName
26
theme: Theme
27
-
themes: typeof themes
28
fonts: {
29
scale: Exclude<Device['fontScale'], undefined>
30
scaleMultiplier: number
···
43
*/
44
export const Context = React.createContext<Alf>({
45
themeName: 'light',
46
-
theme: themes.light,
47
-
themes,
48
fonts: {
49
scale: getFontScale(),
50
scaleMultiplier: computeFontScaleMultiplier(getFontScale()),
···
69
const setFontScaleAndPersist = React.useCallback<
70
Alf['fonts']['setFontScale']
71
>(
72
-
fs => {
73
-
setFontScale(fs)
74
-
persistFontScale(fs)
75
-
setFontScaleMultiplier(computeFontScaleMultiplier(fs))
76
},
77
[setFontScale],
78
)
···
82
const setFontFamilyAndPersist = React.useCallback<
83
Alf['fonts']['setFontFamily']
84
>(
85
-
ff => {
86
-
setFontFamily(ff)
87
-
persistFontFamily(ff)
88
},
89
[setFontFamily],
90
)
91
92
const value = React.useMemo<Alf>(
93
() => ({
···
105
}),
106
[
107
themeName,
108
fontScale,
109
setFontScaleAndPersist,
110
fontFamily,
···
1
import React from 'react'
2
3
import {
4
computeFontScaleMultiplier,
···
7
setFontFamily as persistFontFamily,
8
setFontScale as persistFontScale,
9
} from '#/alf/fonts'
10
+
import {createThemes, defaultTheme} from '#/alf/themes'
11
+
import {type Theme, type ThemeName} from '#/alf/types'
12
+
import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
13
import {type Device} from '#/storage'
14
15
export {atoms} from '#/alf/atoms'
16
export * from '#/alf/breakpoints'
17
export * from '#/alf/fonts'
18
export * as tokens from '#/alf/tokens'
19
+
export * from '#/alf/types'
20
export * from '#/alf/util/flatten'
21
export * from '#/alf/util/platform'
22
export * from '#/alf/util/themeSelector'
···
25
export type Alf = {
26
themeName: ThemeName
27
theme: Theme
28
+
themes: ReturnType<typeof createThemes>
29
fonts: {
30
scale: Exclude<Device['fontScale'], undefined>
31
scaleMultiplier: number
···
44
*/
45
export const Context = React.createContext<Alf>({
46
themeName: 'light',
47
+
theme: defaultTheme,
48
+
themes: createThemes({
49
+
hues: {
50
+
primary: BLUE_HUE,
51
+
negative: RED_HUE,
52
+
positive: GREEN_HUE,
53
+
},
54
+
}),
55
fonts: {
56
scale: getFontScale(),
57
scaleMultiplier: computeFontScaleMultiplier(getFontScale()),
···
76
const setFontScaleAndPersist = React.useCallback<
77
Alf['fonts']['setFontScale']
78
>(
79
+
fontScale => {
80
+
setFontScale(fontScale)
81
+
persistFontScale(fontScale)
82
+
setFontScaleMultiplier(computeFontScaleMultiplier(fontScale))
83
},
84
[setFontScale],
85
)
···
89
const setFontFamilyAndPersist = React.useCallback<
90
Alf['fonts']['setFontFamily']
91
>(
92
+
fontFamily => {
93
+
setFontFamily(fontFamily)
94
+
persistFontFamily(fontFamily)
95
},
96
[setFontFamily],
97
)
98
+
const themes = React.useMemo(() => {
99
+
return createThemes({
100
+
hues: {
101
+
primary: BLUE_HUE,
102
+
negative: RED_HUE,
103
+
positive: GREEN_HUE,
104
+
},
105
+
})
106
+
}, [])
107
108
const value = React.useMemo<Alf>(
109
() => ({
···
121
}),
122
[
123
themeName,
124
+
themes,
125
fontScale,
126
setFontScaleAndPersist,
127
fontFamily,
+556
-27
src/alf/themes.ts
+556
-27
src/alf/themes.ts
···
1
import {atoms} from '#/alf/atoms'
2
import {mocha} from '#/alf/catppuccin/palette'
3
import {type Palette, type Theme} from '#/alf/types'
4
import {defaultScale, dimScale} from '#/alf/util/colorGeneration'
5
import {fade} from '#/alf/util/colors'
6
7
-
const DEFAULT_THEMES = createThemes({
8
-
defaultPalette: DEFAULT_PALETTE,
9
-
subduedPalette: DEFAULT_SUBDUED_PALETTE,
10
})
11
12
/**
···
603
}
604
}
605
606
-
/**
607
-
* @deprecated use ALF and access palette from `useTheme()`
608
-
*/
609
-
export const lightPalette = DEFAULT_THEMES.light.palette
610
-
/**
611
-
* @deprecated use ALF and access palette from `useTheme()`
612
-
*/
613
-
export const darkPalette = DEFAULT_THEMES.dark.palette
614
-
/**
615
-
* @deprecated use ALF and access palette from `useTheme()`
616
-
*/
617
-
export const dimPalette = DEFAULT_THEMES.dim.palette
618
-
/**
619
-
* @deprecated use ALF and access theme from `useTheme()`
620
-
*/
621
-
export const light = DEFAULT_THEMES.light
622
-
/**
623
-
* @deprecated use ALF and access theme from `useTheme()`
624
-
*/
625
-
export const dark = DEFAULT_THEMES.dark
626
-
/**
627
-
* @deprecated use ALF and access theme from `useTheme()`
628
-
*/
629
-
export const dim = DEFAULT_THEMES.dim
···
1
import {atoms} from '#/alf/atoms'
2
import {mocha} from '#/alf/catppuccin/palette'
3
import {type Palette, type Theme} from '#/alf/types'
4
+
import {type Palette, type Theme} from '#/alf/types'
5
import {defaultScale, dimScale} from '#/alf/util/colorGeneration'
6
+
import {
7
+
BLUE_HUE,
8
+
defaultScale,
9
+
dimScale,
10
+
GREEN_HUE,
11
+
RED_HUE,
12
+
} from '#/alf/util/colorGeneration'
13
import {fade} from '#/alf/util/colors'
14
15
+
const themes = createThemes({
16
+
hues: {
17
+
primary: BLUE_HUE,
18
+
negative: RED_HUE,
19
+
positive: GREEN_HUE,
20
+
},
21
})
22
23
/**
···
614
}
615
}
616
617
+
export const defaultTheme = themes.light
618
+
619
+
export function createThemes({
620
+
hues,
621
+
}: {
622
+
hues: {
623
+
primary: number
624
+
negative: number
625
+
positive: number
626
+
}
627
+
}): {
628
+
lightPalette: Palette
629
+
darkPalette: Palette
630
+
dimPalette: Palette
631
+
light: Theme
632
+
dark: Theme
633
+
dim: Theme
634
+
} {
635
+
const color = {
636
+
like: '#ec4899',
637
+
trueBlack: '#000000',
638
+
639
+
gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`,
640
+
gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`,
641
+
gray_50: `hsl(${hues.primary}, 20%, ${defaultScale[12]}%)`,
642
+
gray_100: `hsl(${hues.primary}, 20%, ${defaultScale[11]}%)`,
643
+
gray_200: `hsl(${hues.primary}, 20%, ${defaultScale[10]}%)`,
644
+
gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`,
645
+
gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`,
646
+
gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`,
647
+
gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`,
648
+
gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`,
649
+
gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`,
650
+
gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`,
651
+
gray_950: `hsl(${hues.primary}, 28%, ${defaultScale[2]}%)`,
652
+
gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`,
653
+
gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`,
654
+
655
+
primary_25: `hsl(${hues.primary}, 99%, 97%)`,
656
+
primary_50: `hsl(${hues.primary}, 99%, 95%)`,
657
+
primary_100: `hsl(${hues.primary}, 99%, 90%)`,
658
+
primary_200: `hsl(${hues.primary}, 99%, 80%)`,
659
+
primary_300: `hsl(${hues.primary}, 99%, 70%)`,
660
+
primary_400: `hsl(${hues.primary}, 99%, 60%)`,
661
+
primary_500: `hsl(${hues.primary}, 99%, 53%)`,
662
+
primary_600: `hsl(${hues.primary}, 99%, 42%)`,
663
+
primary_700: `hsl(${hues.primary}, 99%, 34%)`,
664
+
primary_800: `hsl(${hues.primary}, 99%, 26%)`,
665
+
primary_900: `hsl(${hues.primary}, 99%, 18%)`,
666
+
primary_950: `hsl(${hues.primary}, 99%, 10%)`,
667
+
primary_975: `hsl(${hues.primary}, 99%, 7%)`,
668
+
669
+
green_25: `hsl(${hues.positive}, 82%, 97%)`,
670
+
green_50: `hsl(${hues.positive}, 82%, 95%)`,
671
+
green_100: `hsl(${hues.positive}, 82%, 90%)`,
672
+
green_200: `hsl(${hues.positive}, 82%, 80%)`,
673
+
green_300: `hsl(${hues.positive}, 82%, 70%)`,
674
+
green_400: `hsl(${hues.positive}, 82%, 60%)`,
675
+
green_500: `hsl(${hues.positive}, 82%, 50%)`,
676
+
green_600: `hsl(${hues.positive}, 82%, 42%)`,
677
+
green_700: `hsl(${hues.positive}, 82%, 34%)`,
678
+
green_800: `hsl(${hues.positive}, 82%, 26%)`,
679
+
green_900: `hsl(${hues.positive}, 82%, 18%)`,
680
+
green_950: `hsl(${hues.positive}, 82%, 10%)`,
681
+
green_975: `hsl(${hues.positive}, 82%, 7%)`,
682
+
683
+
red_25: `hsl(${hues.negative}, 91%, 97%)`,
684
+
red_50: `hsl(${hues.negative}, 91%, 95%)`,
685
+
red_100: `hsl(${hues.negative}, 91%, 90%)`,
686
+
red_200: `hsl(${hues.negative}, 91%, 80%)`,
687
+
red_300: `hsl(${hues.negative}, 91%, 70%)`,
688
+
red_400: `hsl(${hues.negative}, 91%, 60%)`,
689
+
red_500: `hsl(${hues.negative}, 91%, 50%)`,
690
+
red_600: `hsl(${hues.negative}, 91%, 42%)`,
691
+
red_700: `hsl(${hues.negative}, 91%, 34%)`,
692
+
red_800: `hsl(${hues.negative}, 91%, 26%)`,
693
+
red_900: `hsl(${hues.negative}, 91%, 18%)`,
694
+
red_950: `hsl(${hues.negative}, 91%, 10%)`,
695
+
red_975: `hsl(${hues.negative}, 91%, 7%)`,
696
+
} as const
697
+
698
+
const lightPalette = {
699
+
white: color.gray_0,
700
+
black: color.gray_1000,
701
+
like: color.like,
702
+
703
+
contrast_25: color.gray_25,
704
+
contrast_50: color.gray_50,
705
+
contrast_100: color.gray_100,
706
+
contrast_200: color.gray_200,
707
+
contrast_300: color.gray_300,
708
+
contrast_400: color.gray_400,
709
+
contrast_500: color.gray_500,
710
+
contrast_600: color.gray_600,
711
+
contrast_700: color.gray_700,
712
+
contrast_800: color.gray_800,
713
+
contrast_900: color.gray_900,
714
+
contrast_950: color.gray_950,
715
+
contrast_975: color.gray_975,
716
+
717
+
primary_25: color.primary_25,
718
+
primary_50: color.primary_50,
719
+
primary_100: color.primary_100,
720
+
primary_200: color.primary_200,
721
+
primary_300: color.primary_300,
722
+
primary_400: color.primary_400,
723
+
primary_500: color.primary_500,
724
+
primary_600: color.primary_600,
725
+
primary_700: color.primary_700,
726
+
primary_800: color.primary_800,
727
+
primary_900: color.primary_900,
728
+
primary_950: color.primary_950,
729
+
primary_975: color.primary_975,
730
+
731
+
positive_25: color.green_25,
732
+
positive_50: color.green_50,
733
+
positive_100: color.green_100,
734
+
positive_200: color.green_200,
735
+
positive_300: color.green_300,
736
+
positive_400: color.green_400,
737
+
positive_500: color.green_500,
738
+
positive_600: color.green_600,
739
+
positive_700: color.green_700,
740
+
positive_800: color.green_800,
741
+
positive_900: color.green_900,
742
+
positive_950: color.green_950,
743
+
positive_975: color.green_975,
744
+
745
+
negative_25: color.red_25,
746
+
negative_50: color.red_50,
747
+
negative_100: color.red_100,
748
+
negative_200: color.red_200,
749
+
negative_300: color.red_300,
750
+
negative_400: color.red_400,
751
+
negative_500: color.red_500,
752
+
negative_600: color.red_600,
753
+
negative_700: color.red_700,
754
+
negative_800: color.red_800,
755
+
negative_900: color.red_900,
756
+
negative_950: color.red_950,
757
+
negative_975: color.red_975,
758
+
} as const
759
+
760
+
const darkPalette: Palette = {
761
+
white: color.gray_25,
762
+
black: color.trueBlack,
763
+
like: color.like,
764
+
765
+
contrast_25: color.gray_975,
766
+
contrast_50: color.gray_950,
767
+
contrast_100: color.gray_900,
768
+
contrast_200: color.gray_800,
769
+
contrast_300: color.gray_700,
770
+
contrast_400: color.gray_600,
771
+
contrast_500: color.gray_500,
772
+
contrast_600: color.gray_400,
773
+
contrast_700: color.gray_300,
774
+
contrast_800: color.gray_200,
775
+
contrast_900: color.gray_100,
776
+
contrast_950: color.gray_50,
777
+
contrast_975: color.gray_25,
778
+
779
+
primary_25: color.primary_975,
780
+
primary_50: color.primary_950,
781
+
primary_100: color.primary_900,
782
+
primary_200: color.primary_800,
783
+
primary_300: color.primary_700,
784
+
primary_400: color.primary_600,
785
+
primary_500: color.primary_500,
786
+
primary_600: color.primary_400,
787
+
primary_700: color.primary_300,
788
+
primary_800: color.primary_200,
789
+
primary_900: color.primary_100,
790
+
primary_950: color.primary_50,
791
+
primary_975: color.primary_25,
792
+
793
+
positive_25: color.green_975,
794
+
positive_50: color.green_950,
795
+
positive_100: color.green_900,
796
+
positive_200: color.green_800,
797
+
positive_300: color.green_700,
798
+
positive_400: color.green_600,
799
+
positive_500: color.green_500,
800
+
positive_600: color.green_400,
801
+
positive_700: color.green_300,
802
+
positive_800: color.green_200,
803
+
positive_900: color.green_100,
804
+
positive_950: color.green_50,
805
+
positive_975: color.green_25,
806
+
807
+
negative_25: color.red_975,
808
+
negative_50: color.red_950,
809
+
negative_100: color.red_900,
810
+
negative_200: color.red_800,
811
+
negative_300: color.red_700,
812
+
negative_400: color.red_600,
813
+
negative_500: color.red_500,
814
+
negative_600: color.red_400,
815
+
negative_700: color.red_300,
816
+
negative_800: color.red_200,
817
+
negative_900: color.red_100,
818
+
negative_950: color.red_50,
819
+
negative_975: color.red_25,
820
+
} as const
821
+
822
+
const dimPalette: Palette = {
823
+
...darkPalette,
824
+
black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`,
825
+
like: color.like,
826
+
827
+
contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`,
828
+
contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
829
+
contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
830
+
contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
831
+
contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
832
+
contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
833
+
contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
834
+
contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
835
+
contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
836
+
contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
837
+
contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
838
+
contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
839
+
contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
840
+
841
+
primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`,
842
+
primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`,
843
+
primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`,
844
+
primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`,
845
+
primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`,
846
+
primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`,
847
+
primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`,
848
+
primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`,
849
+
primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`,
850
+
primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`,
851
+
primary_900: `hsl(${hues.primary}, 99%, ${dimScale[11]}%)`,
852
+
primary_950: `hsl(${hues.primary}, 99%, ${dimScale[12]}%)`,
853
+
primary_975: `hsl(${hues.primary}, 99%, ${dimScale[13]}%)`,
854
+
855
+
positive_25: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`,
856
+
positive_50: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`,
857
+
positive_100: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`,
858
+
positive_200: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`,
859
+
positive_300: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`,
860
+
positive_400: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`,
861
+
positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`,
862
+
positive_600: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`,
863
+
positive_700: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`,
864
+
positive_800: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`,
865
+
positive_900: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`,
866
+
positive_950: `hsl(${hues.positive}, 82%, ${dimScale[12]}%)`,
867
+
positive_975: `hsl(${hues.positive}, 82%, ${dimScale[13]}%)`,
868
+
869
+
negative_25: `hsl(${hues.negative}, 70%, ${dimScale[1]}%)`,
870
+
negative_50: `hsl(${hues.negative}, 80%, ${dimScale[2]}%)`,
871
+
negative_100: `hsl(${hues.negative}, 84%, ${dimScale[3]}%)`,
872
+
negative_200: `hsl(${hues.negative}, 88%, ${dimScale[4]}%)`,
873
+
negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`,
874
+
negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`,
875
+
negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`,
876
+
negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`,
877
+
negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`,
878
+
negative_800: `hsl(${hues.negative}, 91%, ${dimScale[10]}%)`,
879
+
negative_900: `hsl(${hues.negative}, 91%, ${dimScale[11]}%)`,
880
+
negative_950: `hsl(${hues.negative}, 91%, ${dimScale[12]}%)`,
881
+
negative_975: `hsl(${hues.negative}, 91%, ${dimScale[13]}%)`,
882
+
} as const
883
+
884
+
const light: Theme = {
885
+
scheme: 'light',
886
+
name: 'light',
887
+
palette: lightPalette,
888
+
atoms: {
889
+
text: {
890
+
color: lightPalette.black,
891
+
},
892
+
text_contrast_low: {
893
+
color: lightPalette.contrast_400,
894
+
},
895
+
text_contrast_medium: {
896
+
color: lightPalette.contrast_700,
897
+
},
898
+
text_contrast_high: {
899
+
color: lightPalette.contrast_900,
900
+
},
901
+
text_inverted: {
902
+
color: lightPalette.white,
903
+
},
904
+
bg: {
905
+
backgroundColor: lightPalette.white,
906
+
},
907
+
bg_contrast_25: {
908
+
backgroundColor: lightPalette.contrast_25,
909
+
},
910
+
bg_contrast_50: {
911
+
backgroundColor: lightPalette.contrast_50,
912
+
},
913
+
bg_contrast_100: {
914
+
backgroundColor: lightPalette.contrast_100,
915
+
},
916
+
bg_contrast_200: {
917
+
backgroundColor: lightPalette.contrast_200,
918
+
},
919
+
bg_contrast_300: {
920
+
backgroundColor: lightPalette.contrast_300,
921
+
},
922
+
bg_contrast_400: {
923
+
backgroundColor: lightPalette.contrast_400,
924
+
},
925
+
bg_contrast_500: {
926
+
backgroundColor: lightPalette.contrast_500,
927
+
},
928
+
bg_contrast_600: {
929
+
backgroundColor: lightPalette.contrast_600,
930
+
},
931
+
bg_contrast_700: {
932
+
backgroundColor: lightPalette.contrast_700,
933
+
},
934
+
bg_contrast_800: {
935
+
backgroundColor: lightPalette.contrast_800,
936
+
},
937
+
bg_contrast_900: {
938
+
backgroundColor: lightPalette.contrast_900,
939
+
},
940
+
bg_contrast_950: {
941
+
backgroundColor: lightPalette.contrast_950,
942
+
},
943
+
bg_contrast_975: {
944
+
backgroundColor: lightPalette.contrast_975,
945
+
},
946
+
border_contrast_low: {
947
+
borderColor: lightPalette.contrast_100,
948
+
},
949
+
border_contrast_medium: {
950
+
borderColor: lightPalette.contrast_200,
951
+
},
952
+
border_contrast_high: {
953
+
borderColor: lightPalette.contrast_300,
954
+
},
955
+
shadow_sm: {
956
+
...atoms.shadow_sm,
957
+
shadowColor: lightPalette.black,
958
+
},
959
+
shadow_md: {
960
+
...atoms.shadow_md,
961
+
shadowColor: lightPalette.black,
962
+
},
963
+
shadow_lg: {
964
+
...atoms.shadow_lg,
965
+
shadowColor: lightPalette.black,
966
+
},
967
+
},
968
+
}
969
+
970
+
const dark: Theme = {
971
+
scheme: 'dark',
972
+
name: 'dark',
973
+
palette: darkPalette,
974
+
atoms: {
975
+
text: {
976
+
color: darkPalette.white,
977
+
},
978
+
text_contrast_low: {
979
+
color: darkPalette.contrast_400,
980
+
},
981
+
text_contrast_medium: {
982
+
color: darkPalette.contrast_600,
983
+
},
984
+
text_contrast_high: {
985
+
color: darkPalette.contrast_900,
986
+
},
987
+
text_inverted: {
988
+
color: darkPalette.black,
989
+
},
990
+
bg: {
991
+
backgroundColor: darkPalette.black,
992
+
},
993
+
bg_contrast_25: {
994
+
backgroundColor: darkPalette.contrast_25,
995
+
},
996
+
bg_contrast_50: {
997
+
backgroundColor: darkPalette.contrast_50,
998
+
},
999
+
bg_contrast_100: {
1000
+
backgroundColor: darkPalette.contrast_100,
1001
+
},
1002
+
bg_contrast_200: {
1003
+
backgroundColor: darkPalette.contrast_200,
1004
+
},
1005
+
bg_contrast_300: {
1006
+
backgroundColor: darkPalette.contrast_300,
1007
+
},
1008
+
bg_contrast_400: {
1009
+
backgroundColor: darkPalette.contrast_400,
1010
+
},
1011
+
bg_contrast_500: {
1012
+
backgroundColor: darkPalette.contrast_500,
1013
+
},
1014
+
bg_contrast_600: {
1015
+
backgroundColor: darkPalette.contrast_600,
1016
+
},
1017
+
bg_contrast_700: {
1018
+
backgroundColor: darkPalette.contrast_700,
1019
+
},
1020
+
bg_contrast_800: {
1021
+
backgroundColor: darkPalette.contrast_800,
1022
+
},
1023
+
bg_contrast_900: {
1024
+
backgroundColor: darkPalette.contrast_900,
1025
+
},
1026
+
bg_contrast_950: {
1027
+
backgroundColor: darkPalette.contrast_950,
1028
+
},
1029
+
bg_contrast_975: {
1030
+
backgroundColor: darkPalette.contrast_975,
1031
+
},
1032
+
border_contrast_low: {
1033
+
borderColor: darkPalette.contrast_100,
1034
+
},
1035
+
border_contrast_medium: {
1036
+
borderColor: darkPalette.contrast_200,
1037
+
},
1038
+
border_contrast_high: {
1039
+
borderColor: darkPalette.contrast_300,
1040
+
},
1041
+
shadow_sm: {
1042
+
...atoms.shadow_sm,
1043
+
shadowOpacity: 0.7,
1044
+
shadowColor: color.trueBlack,
1045
+
},
1046
+
shadow_md: {
1047
+
...atoms.shadow_md,
1048
+
shadowOpacity: 0.7,
1049
+
shadowColor: color.trueBlack,
1050
+
},
1051
+
shadow_lg: {
1052
+
...atoms.shadow_lg,
1053
+
shadowOpacity: 0.7,
1054
+
shadowColor: color.trueBlack,
1055
+
},
1056
+
},
1057
+
}
1058
+
1059
+
const dim: Theme = {
1060
+
...dark,
1061
+
scheme: 'dark',
1062
+
name: 'dim',
1063
+
palette: dimPalette,
1064
+
atoms: {
1065
+
...dark.atoms,
1066
+
text: {
1067
+
color: dimPalette.white,
1068
+
},
1069
+
text_contrast_low: {
1070
+
color: dimPalette.contrast_400,
1071
+
},
1072
+
text_contrast_medium: {
1073
+
color: dimPalette.contrast_600,
1074
+
},
1075
+
text_contrast_high: {
1076
+
color: dimPalette.contrast_900,
1077
+
},
1078
+
text_inverted: {
1079
+
color: dimPalette.black,
1080
+
},
1081
+
bg: {
1082
+
backgroundColor: dimPalette.black,
1083
+
},
1084
+
bg_contrast_25: {
1085
+
backgroundColor: dimPalette.contrast_25,
1086
+
},
1087
+
bg_contrast_50: {
1088
+
backgroundColor: dimPalette.contrast_50,
1089
+
},
1090
+
bg_contrast_100: {
1091
+
backgroundColor: dimPalette.contrast_100,
1092
+
},
1093
+
bg_contrast_200: {
1094
+
backgroundColor: dimPalette.contrast_200,
1095
+
},
1096
+
bg_contrast_300: {
1097
+
backgroundColor: dimPalette.contrast_300,
1098
+
},
1099
+
bg_contrast_400: {
1100
+
backgroundColor: dimPalette.contrast_400,
1101
+
},
1102
+
bg_contrast_500: {
1103
+
backgroundColor: dimPalette.contrast_500,
1104
+
},
1105
+
bg_contrast_600: {
1106
+
backgroundColor: dimPalette.contrast_600,
1107
+
},
1108
+
bg_contrast_700: {
1109
+
backgroundColor: dimPalette.contrast_700,
1110
+
},
1111
+
bg_contrast_800: {
1112
+
backgroundColor: dimPalette.contrast_800,
1113
+
},
1114
+
bg_contrast_900: {
1115
+
backgroundColor: dimPalette.contrast_900,
1116
+
},
1117
+
bg_contrast_950: {
1118
+
backgroundColor: dimPalette.contrast_950,
1119
+
},
1120
+
bg_contrast_975: {
1121
+
backgroundColor: dimPalette.contrast_975,
1122
+
},
1123
+
border_contrast_low: {
1124
+
borderColor: dimPalette.contrast_100,
1125
+
},
1126
+
border_contrast_medium: {
1127
+
borderColor: dimPalette.contrast_200,
1128
+
},
1129
+
border_contrast_high: {
1130
+
borderColor: dimPalette.contrast_300,
1131
+
},
1132
+
shadow_sm: {
1133
+
...atoms.shadow_sm,
1134
+
shadowOpacity: 0.7,
1135
+
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
1136
+
},
1137
+
shadow_md: {
1138
+
...atoms.shadow_md,
1139
+
shadowOpacity: 0.7,
1140
+
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
1141
+
},
1142
+
shadow_lg: {
1143
+
...atoms.shadow_lg,
1144
+
shadowOpacity: 0.7,
1145
+
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
1146
+
},
1147
+
},
1148
+
}
1149
+
1150
+
return {
1151
+
lightPalette,
1152
+
darkPalette,
1153
+
dimPalette,
1154
+
light,
1155
+
dark,
1156
+
dim,
1157
+
}
1158
+
}
+55
-4
src/alf/tokens.ts
+55
-4
src/alf/tokens.ts
···
1
+
import {isAndroid} from '#/platform/detection'
2
3
+
export const TRACKING = isAndroid ? 0.1 : 0
4
5
export const color = {
6
+
temp_purple: 'rgb(105 0 255)',
7
+
temp_purple_dark: 'rgb(83 0 202)',
8
+
} as const
9
+
10
+
export const space = {
11
+
_2xs: 2,
12
+
xs: 4,
13
+
sm: 8,
14
+
md: 12,
15
+
lg: 16,
16
+
xl: 20,
17
+
_2xl: 24,
18
+
_3xl: 28,
19
+
_4xl: 32,
20
+
_5xl: 40,
21
+
} as const
22
+
23
+
export const fontSize = {
24
+
_2xs: 10,
25
+
xs: 12,
26
+
sm: 14,
27
+
md: 16,
28
+
lg: 18,
29
+
xl: 20,
30
+
_2xl: 22,
31
+
_3xl: 26,
32
+
_4xl: 32,
33
+
_5xl: 40,
34
+
} as const
35
+
36
+
export const lineHeight = {
37
+
none: 1,
38
+
normal: 1.5,
39
+
relaxed: 1.625,
40
+
} as const
41
+
42
+
export const borderRadius = {
43
+
_2xs: 2,
44
+
xs: 4,
45
+
sm: 8,
46
+
md: 12,
47
+
lg: 16,
48
+
full: 999,
49
+
} as const
50
+
51
+
/**
52
+
* These correspond to Inter font files we actually load.
53
+
*/
54
+
export const fontWeight = {
55
+
normal: '400',
56
+
medium: '500',
57
+
bold: '600',
58
+
heavy: '800',
59
} as const
60
61
export const gradients = {
+15
src/alf/typography.tsx
+15
src/alf/typography.tsx
···
9
import {type Alf, applyFonts, atoms, flatten} from '#/alf'
10
11
/**
12
+
* Util to calculate lineHeight from a text size atom and a leading atom
13
+
*
14
+
* Example:
15
+
* `leading(atoms.text_md, atoms.leading_normal)` // => 24
16
+
*/
17
+
export function leading<
18
+
Size extends {fontSize?: number},
19
+
Leading extends {lineHeight?: number},
20
+
>(textSize: Size, leading: Leading) {
21
+
const size = textSize?.fontSize || atoms.text_md.fontSize
22
+
const lineHeight = leading?.lineHeight || atoms.leading_normal.lineHeight
23
+
return Math.round(size * lineHeight)
24
+
}
25
+
26
+
/**
27
* Ensures that `lineHeight` defaults to a relative value of `1`, or applies
28
* other relative leading atoms.
29
*
+8
src/alf/util/__tests__/colors.test.ts
+8
src/alf/util/__tests__/colors.test.ts
···
1
import {jest} from '@jest/globals'
2
3
import {transparentifyColor} from '../colorGeneration'
4
5
describe('transparentifyColor', () => {
6
beforeEach(() => {
···
36
const unsupported = 'blue'
37
const result = transparentifyColor(unsupported, 0.5)
38
expect(result).toBe(unsupported)
39
})
40
})
···
1
import {jest} from '@jest/globals'
2
3
+
import {logger} from '#/logger'
4
import {transparentifyColor} from '../colorGeneration'
5
+
6
+
jest.mock('#/logger', () => ({
7
+
logger: {warn: jest.fn()},
8
+
}))
9
10
describe('transparentifyColor', () => {
11
beforeEach(() => {
···
41
const unsupported = 'blue'
42
const result = transparentifyColor(unsupported, 0.5)
43
expect(result).toBe(unsupported)
44
+
expect(logger.warn).toHaveBeenCalledWith(
45
+
`Could not make '${unsupported}' transparent`,
46
+
)
47
})
48
})
+62
-1
src/alf/util/platform.ts
+62
-1
src/alf/util/platform.ts
···
1
+
import {Platform} from 'react-native'
2
+
3
+
import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
4
+
5
+
/**
6
+
* Identity function on web. Returns nothing on other platforms.
7
+
*
8
+
* Note: Platform splitting does not tree-shake away the other platforms,
9
+
* so don't do stuff like e.g. rely on platform-specific imports. Use
10
+
* platform-split files instead.
11
+
*/
12
+
export function web(value: any) {
13
+
if (isWeb) {
14
+
return value
15
+
}
16
+
}
17
+
18
+
/**
19
+
* Identity function on iOS. Returns nothing on other platforms.
20
+
*
21
+
* Note: Platform splitting does not tree-shake away the other platforms,
22
+
* so don't do stuff like e.g. rely on platform-specific imports. Use
23
+
* platform-split files instead.
24
+
*/
25
+
export function ios(value: any) {
26
+
if (isIOS) {
27
+
return value
28
+
}
29
+
}
30
+
31
+
/**
32
+
* Identity function on Android. Returns nothing on other platforms..
33
+
*
34
+
* Note: Platform splitting does not tree-shake away the other platforms,
35
+
* so don't do stuff like e.g. rely on platform-specific imports. Use
36
+
* platform-split files instead.
37
+
*/
38
+
export function android(value: any) {
39
+
if (isAndroid) {
40
+
return value
41
+
}
42
+
}
43
+
44
+
/**
45
+
* Identity function on iOS and Android. Returns nothing on web.
46
+
*
47
+
* Note: Platform splitting does not tree-shake away the other platforms,
48
+
* so don't do stuff like e.g. rely on platform-specific imports. Use
49
+
* platform-split files instead.
50
+
*/
51
+
export function native(value: any) {
52
+
if (isNative) {
53
+
return value
54
+
}
55
+
}
56
+
57
+
/**
58
+
* Note: Platform splitting does not tree-shake away the other platforms,
59
+
* so don't do stuff like e.g. rely on platform-specific imports. Use
60
+
* platform-split files instead.
61
+
*/
62
+
export const platform = Platform.select
+1
-1
src/alf/util/systemUI.ts
+1
-1
src/alf/util/systemUI.ts
+13
-2
src/alf/util/themeSelector.ts
+13
-2
src/alf/util/themeSelector.ts
···
1
+
import {type ThemeName} from '#/alf/types'
2
3
+
export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
4
+
switch (name) {
5
+
case 'light':
6
+
return options.light
7
+
case 'dark':
8
+
return options.dark || options.dim
9
+
case 'dim':
10
+
return options.dim || options.dark
11
+
default:
12
+
throw new Error(`select(theme, options) received unknown theme ${name}`)
13
+
}
14
+
}
+1
-1
src/alf/util/useColorModeTheme.ts
+1
-1
src/alf/util/useColorModeTheme.ts
···
1
import React from 'react'
2
import {type ColorSchemeName, useColorScheme} from 'react-native'
3
-
import {type ThemeName} from '@bsky.app/alf'
4
5
import {isWeb} from '#/platform/detection'
6
import {useThemePrefs} from '#/state/shell'
7
import {dark, dim, light} from '#/alf/themes'
8
9
export function useColorModeTheme(): ThemeName {
10
const theme = useThemeName()
···
1
import React from 'react'
2
import {type ColorSchemeName, useColorScheme} from 'react-native'
3
4
import {isWeb} from '#/platform/detection'
5
import {useThemePrefs} from '#/state/shell'
6
import {dark, dim, light} from '#/alf/themes'
7
+
import {type ThemeName} from '#/alf/types'
8
9
export function useColorModeTheme(): ThemeName {
10
const theme = useThemeName()
+2
-2
src/components/AccountList.tsx
+2
-2
src/components/AccountList.tsx
···
77
]}>
78
<Text
79
style={[
80
-
a.font_semi_bold,
81
a.flex_1,
82
a.flex_row,
83
a.py_sm,
···
151
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
152
<Text
153
emoji
154
-
style={[a.font_semi_bold, a.leading_tight]}
155
numberOfLines={1}>
156
{sanitizeDisplayName(
157
profile?.displayName || profile?.handle || account.handle,
···
77
]}>
78
<Text
79
style={[
80
+
a.font_bold,
81
a.flex_1,
82
a.flex_row,
83
a.py_sm,
···
151
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
152
<Text
153
emoji
154
+
style={[a.font_bold, a.leading_tight]}
155
numberOfLines={1}>
156
{sanitizeDisplayName(
157
profile?.displayName || profile?.handle || account.handle,
+3
-2
src/components/BlockedGeoOverlay.tsx
+3
-2
src/components/BlockedGeoOverlay.tsx
···
96
<Mark fill={t.palette.primary_600} width={14} />
97
<Text
98
style={[
99
-
a.font_semi_bold,
100
{
101
color: t.palette.primary_600,
102
},
···
121
</View>
122
123
<View style={[a.mt_xl, a.align_start]}>
124
-
<Text style={[a.text_lg, a.font_bold, a.leading_snug, a.pb_xs]}>
125
<Trans>Not in Mississippi?</Trans>
126
</Text>
127
<Text
···
96
<Mark fill={t.palette.primary_600} width={14} />
97
<Text
98
style={[
99
+
a.font_bold,
100
{
101
color: t.palette.primary_600,
102
},
···
121
</View>
122
123
<View style={[a.mt_xl, a.align_start]}>
124
+
<Text
125
+
style={[a.text_lg, a.font_heavy, a.leading_snug, a.pb_xs]}>
126
<Trans>Not in Mississippi?</Trans>
127
</Text>
128
<Text
+13
-5
src/components/Button.tsx
+13
-5
src/components/Button.tsx
···
240
}
241
} else if (color === 'secondary') {
242
if (!disabled) {
243
-
baseStyles.push(t.atoms.bg_contrast_50)
244
hoverStyles.push(t.atoms.bg_contrast_100)
245
} else {
246
baseStyles.push(t.atoms.bg_contrast_50)
···
289
})
290
} else {
291
baseStyles.push({
292
-
backgroundColor: t.palette.primary_50,
293
})
294
}
295
} else if (color === 'negative_subtle') {
···
310
})
311
} else {
312
baseStyles.push({
313
-
backgroundColor: t.palette.negative_50,
314
})
315
}
316
}
···
364
if (!disabled) {
365
baseStyles.push(t.atoms.bg)
366
hoverStyles.push({
367
-
backgroundColor: t.palette.contrast_50,
368
})
369
}
370
}
···
388
if (!disabled) {
389
baseStyles.push(t.atoms.bg)
390
hoverStyles.push({
391
-
backgroundColor: t.palette.contrast_50,
392
})
393
}
394
}
···
240
}
241
} else if (color === 'secondary') {
242
if (!disabled) {
243
+
baseStyles.push(t.atoms.bg_contrast_25)
244
hoverStyles.push(t.atoms.bg_contrast_100)
245
} else {
246
baseStyles.push(t.atoms.bg_contrast_50)
···
289
})
290
} else {
291
baseStyles.push({
292
+
backgroundColor: select(t.name, {
293
+
light: t.palette.primary_25,
294
+
dim: t.palette.primary_50,
295
+
dark: t.palette.primary_50,
296
+
}),
297
})
298
}
299
} else if (color === 'negative_subtle') {
···
314
})
315
} else {
316
baseStyles.push({
317
+
backgroundColor: select(t.name, {
318
+
light: t.palette.negative_25,
319
+
dim: t.palette.negative_50,
320
+
dark: t.palette.negative_50,
321
+
}),
322
})
323
}
324
}
···
372
if (!disabled) {
373
baseStyles.push(t.atoms.bg)
374
hoverStyles.push({
375
+
backgroundColor: t.palette.contrast_25,
376
})
377
}
378
}
···
396
if (!disabled) {
397
baseStyles.push(t.atoms.bg)
398
hoverStyles.push({
399
+
backgroundColor: t.palette.contrast_25,
400
})
401
}
402
}
+2
-6
src/components/ContextMenu/index.tsx
+2
-6
src/components/ContextMenu/index.tsx
···
796
style={[
797
a.flex_1,
798
a.text_md,
799
-
a.font_semi_bold,
800
t.atoms.text_contrast_high,
801
{paddingTop: 3},
802
style,
···
855
const t = useTheme()
856
return (
857
<Text
858
-
style={[
859
-
a.font_semi_bold,
860
-
t.atoms.text_contrast_medium,
861
-
{marginBottom: -8},
862
-
]}>
863
{children}
864
</Text>
865
)
+1
-1
src/components/Error.tsx
+1
-1
src/components/Error.tsx
+2
-2
src/components/FeedCard.tsx
+2
-2
src/components/FeedCard.tsx
···
128
<View style={[a.flex_1]}>
129
<Text
130
emoji
131
-
style={[a.text_md, a.font_semi_bold, a.leading_snug]}
132
numberOfLines={1}>
133
{title}
134
</Text>
···
214
export function Likes({count}: {count: number}) {
215
const t = useTheme()
216
return (
217
-
<Text style={[a.text_sm, t.atoms.text_contrast_medium, a.font_semi_bold]}>
218
<Trans>
219
Liked by <Plural value={count || 0} one="# user" other="# users" />
220
</Trans>
···
128
<View style={[a.flex_1]}>
129
<Text
130
emoji
131
+
style={[a.text_md, a.font_bold, a.leading_snug]}
132
numberOfLines={1}>
133
{title}
134
</Text>
···
214
export function Likes({count}: {count: number}) {
215
const t = useTheme()
216
return (
217
+
<Text style={[a.text_sm, t.atoms.text_contrast_medium, a.font_bold]}>
218
<Trans>
219
Liked by <Plural value={count || 0} one="# user" other="# users" />
220
</Trans>
+2
-2
src/components/FeedInterstitials.tsx
+2
-2
src/components/FeedInterstitials.tsx
···
380
a.justify_between,
381
]}
382
pointerEvents={isIOS ? 'auto' : 'box-none'}>
383
-
<Text style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
384
{isFeedContext ? (
385
<Trans>Suggested for you</Trans>
386
) : (
···
516
style={[
517
a.flex_1,
518
a.text_lg,
519
-
a.font_semi_bold,
520
t.atoms.text_contrast_medium,
521
]}>
522
<Trans>Some other feeds you might like</Trans>
···
380
a.justify_between,
381
]}
382
pointerEvents={isIOS ? 'auto' : 'box-none'}>
383
+
<Text style={[a.text_sm, a.font_bold, t.atoms.text]}>
384
{isFeedContext ? (
385
<Trans>Suggested for you</Trans>
386
) : (
···
516
style={[
517
a.flex_1,
518
a.text_lg,
519
+
a.font_bold,
520
t.atoms.text_contrast_medium,
521
]}>
522
<Trans>Some other feeds you might like</Trans>
+1
-1
src/components/LabelingServiceCard/index.tsx
+1
-1
src/components/LabelingServiceCard/index.tsx
+1
-1
src/components/Layout/Header/index.tsx
+1
-1
src/components/Layout/Header/index.tsx
+2
-2
src/components/ListCard.tsx
+2
-2
src/components/ListCard.tsx
···
127
allowOverride={creator && currentAccount?.did === creator.did}>
128
<Hider.Mask>
129
<Text
130
-
style={[a.text_md, a.font_semi_bold, a.leading_snug, a.italic]}
131
numberOfLines={1}>
132
<Trans>Hidden list</Trans>
133
</Text>
···
135
<Hider.Content>
136
<Text
137
emoji
138
-
style={[a.text_md, a.font_semi_bold, a.leading_snug]}
139
numberOfLines={1}>
140
{title}
141
</Text>
···
127
allowOverride={creator && currentAccount?.did === creator.did}>
128
<Hider.Mask>
129
<Text
130
+
style={[a.text_md, a.font_bold, a.leading_snug, a.italic]}
131
numberOfLines={1}>
132
<Trans>Hidden list</Trans>
133
</Text>
···
135
<Hider.Content>
136
<Text
137
emoji
138
+
style={[a.text_md, a.font_bold, a.leading_snug]}
139
numberOfLines={1}>
140
{title}
141
</Text>
+1
-1
src/components/LoggedOutCTA.tsx
+1
-1
src/components/LoggedOutCTA.tsx
+2
-2
src/components/Menu/index.tsx
+2
-2
src/components/Menu/index.tsx
+2
-2
src/components/Menu/index.web.tsx
+2
-2
src/components/Menu/index.web.tsx
+1
-1
src/components/NewskieDialog.tsx
+1
-1
src/components/NewskieDialog.tsx
+1
-1
src/components/Pills.tsx
+1
-1
src/components/Pills.tsx
+1
-1
src/components/PolicyUpdateOverlay/Badge.tsx
+1
-1
src/components/PolicyUpdateOverlay/Badge.tsx
+2
-2
src/components/PolicyUpdateOverlay/updates/202508/index.tsx
+2
-2
src/components/PolicyUpdateOverlay/updates/202508/index.tsx
···
69
70
{screenReaderEnabled ? (
71
<View style={[a.gap_sm]}>
72
-
<Text emoji style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
73
<Trans>Hey there 👋</Trans>
74
</Text>
75
<Text style={[a.leading_snug, a.text_md]}>
···
115
</View>
116
) : (
117
<View style={[a.gap_sm]}>
118
-
<Text emoji style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
119
<Trans>Hey there 👋</Trans>
120
</Text>
121
<Text style={[a.leading_snug, a.text_md]}>
···
69
70
{screenReaderEnabled ? (
71
<View style={[a.gap_sm]}>
72
+
<Text emoji style={[a.text_2xl, a.font_bold, a.leading_snug]}>
73
<Trans>Hey there 👋</Trans>
74
</Text>
75
<Text style={[a.leading_snug, a.text_md]}>
···
115
</View>
116
) : (
117
<View style={[a.gap_sm]}>
118
+
<Text emoji style={[a.text_2xl, a.font_bold, a.leading_snug]}>
119
<Trans>Hey there 👋</Trans>
120
</Text>
121
<Text style={[a.leading_snug, a.text_md]}>
+1
-1
src/components/Post/Embed/ExternalEmbed/index.tsx
+1
-1
src/components/Post/Embed/ExternalEmbed/index.tsx
+1
-1
src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx
+1
-1
src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx
+1
-6
src/components/PostControls/PostControlButton.tsx
+1
-6
src/components/PostControls/PostControlButton.tsx
+2
-2
src/components/PostControls/RepostButton.tsx
+2
-2
src/components/PostControls/RepostButton.tsx
···
157
variant="ghost"
158
color="primary">
159
<Repost size="lg" fill={t.palette.primary_500} />
160
-
<Text style={[a.font_semi_bold, a.text_xl]}>
161
{isReposted ? (
162
<Trans>Remove repost</Trans>
163
) : (
···
188
/>
189
<Text
190
style={[
191
-
a.font_semi_bold,
192
a.text_xl,
193
embeddingDisabled && t.atoms.text_contrast_low,
194
]}>
···
157
variant="ghost"
158
color="primary">
159
<Repost size="lg" fill={t.palette.primary_500} />
160
+
<Text style={[a.font_bold, a.text_xl]}>
161
{isReposted ? (
162
<Trans>Remove repost</Trans>
163
) : (
···
188
/>
189
<Text
190
style={[
191
+
a.font_bold,
192
a.text_xl,
193
embeddingDisabled && t.atoms.text_contrast_low,
194
]}>
+2
-2
src/components/ProfileCard.tsx
+2
-2
src/components/ProfileCard.tsx
+3
-3
src/components/ProfileHoverCard/index.web.tsx
+3
-3
src/components/ProfileHoverCard/index.web.tsx
···
515
<View style={[a.flex_row, a.align_center, a.pt_md, a.pb_xs]}>
516
<Text
517
numberOfLines={1}
518
-
style={[a.text_lg, a.font_semi_bold, a.self_start]}>
519
{sanitizeDisplayName(
520
profile.displayName || sanitizeHandle(profile.handle),
521
moderation.ui('displayName'),
···
562
label={`${followers} ${pluralizedFollowers}`}
563
style={[t.atoms.text]}
564
onPress={hide}>
565
-
<Text style={[a.text_md, a.font_semi_bold]}>{followers} </Text>
566
<Text style={[t.atoms.text_contrast_medium]}>
567
{pluralizedFollowers}
568
</Text>
···
572
label={_(msg`${following} following`)}
573
style={[t.atoms.text]}
574
onPress={hide}>
575
-
<Text style={[a.text_md, a.font_semi_bold]}>{following} </Text>
576
<Text style={[t.atoms.text_contrast_medium]}>
577
{pluralizedFollowings}
578
</Text>
···
515
<View style={[a.flex_row, a.align_center, a.pt_md, a.pb_xs]}>
516
<Text
517
numberOfLines={1}
518
+
style={[a.text_lg, a.font_bold, a.self_start]}>
519
{sanitizeDisplayName(
520
profile.displayName || sanitizeHandle(profile.handle),
521
moderation.ui('displayName'),
···
562
label={`${followers} ${pluralizedFollowers}`}
563
style={[t.atoms.text]}
564
onPress={hide}>
565
+
<Text style={[a.text_md, a.font_bold]}>{followers} </Text>
566
<Text style={[t.atoms.text_contrast_medium]}>
567
{pluralizedFollowers}
568
</Text>
···
572
label={_(msg`${following} following`)}
573
style={[t.atoms.text]}
574
onPress={hide}>
575
+
<Text style={[a.text_md, a.font_bold]}>{following} </Text>
576
<Text style={[t.atoms.text_contrast_medium]}>
577
{pluralizedFollowings}
578
</Text>
+1
-1
src/components/ProgressGuide/FollowDialog.tsx
+1
-1
src/components/ProgressGuide/FollowDialog.tsx
+1
-1
src/components/ProgressGuide/List.tsx
+1
-1
src/components/ProgressGuide/List.tsx
+1
-1
src/components/ProgressGuide/Task.tsx
+1
-1
src/components/ProgressGuide/Task.tsx
+1
-1
src/components/ProgressGuide/Toast.tsx
+1
-1
src/components/ProgressGuide/Toast.tsx
+1
-1
src/components/Prompt.tsx
+1
-1
src/components/Prompt.tsx
+2
-3
src/components/ReportDialog/SelectLabelerView.tsx
+2
-3
src/components/ReportDialog/SelectLabelerView.tsx
···
24
return (
25
<View style={[a.gap_lg]}>
26
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
27
-
<Text style={[a.text_2xl, a.font_semi_bold]}>
28
<Trans>Select moderator</Trans>
29
</Text>
30
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
···
75
handle: labeler.creator.handle,
76
})}
77
/>
78
-
<Text
79
-
style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semi_bold]}>
80
@{labeler.creator.handle}
81
</Text>
82
</LabelingServiceCard.Content>
···
24
return (
25
<View style={[a.gap_lg]}>
26
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
27
+
<Text style={[a.text_2xl, a.font_bold]}>
28
<Trans>Select moderator</Trans>
29
</Text>
30
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
···
75
handle: labeler.creator.handle,
76
})}
77
/>
78
+
<Text style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
79
@{labeler.creator.handle}
80
</Text>
81
</LabelingServiceCard.Content>
+2
-3
src/components/ReportDialog/SelectReportOptionView.tsx
+2
-3
src/components/ReportDialog/SelectReportOptionView.tsx
···
85
) : null}
86
87
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
88
-
<Text style={[a.text_2xl, a.font_semi_bold]}>{i18n.title}</Text>
89
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
90
{i18n.description}
91
</Text>
···
173
interacted && t.atoms.bg_contrast_50,
174
]}>
175
<View style={[a.flex_1, a.gap_xs]}>
176
-
<Text
177
-
style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
178
{title}
179
</Text>
180
<Text style={[a.leading_tight, {maxWidth: 400}]}>{description}</Text>
···
85
) : null}
86
87
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
88
+
<Text style={[a.text_2xl, a.font_bold]}>{i18n.title}</Text>
89
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
90
{i18n.description}
91
</Text>
···
173
interacted && t.atoms.bg_contrast_50,
174
]}>
175
<View style={[a.flex_1, a.gap_xs]}>
176
+
<Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
177
{title}
178
</Text>
179
<Text style={[a.leading_tight, {maxWidth: 400}]}>{description}</Text>
+1
-1
src/components/ReportDialog/SubmitView.tsx
+1
-1
src/components/ReportDialog/SubmitView.tsx
+1
-7
src/components/SearchError.tsx
+1
-7
src/components/SearchError.tsx
+1
-1
src/components/Select/index.tsx
+1
-1
src/components/Select/index.tsx
+1
-1
src/components/Select/index.web.tsx
+1
-1
src/components/Select/index.web.tsx
+1
-1
src/components/StarterPack/ProfileStarterPacks.tsx
+1
-1
src/components/StarterPack/ProfileStarterPacks.tsx
+3
-8
src/components/StarterPack/QrCode.tsx
+3
-8
src/components/StarterPack/QrCode.tsx
···
54
]}>
55
<View style={[a.gap_sm]}>
56
<Text
57
-
style={[
58
-
a.font_semi_bold,
59
-
a.text_3xl,
60
-
a.text_center,
61
-
{color: 'white'},
62
-
]}>
63
{record.name}
64
</Text>
65
</View>
66
<View style={[a.gap_xl, a.align_center]}>
67
<Text
68
style={[
69
-
a.font_semi_bold,
70
a.text_center,
71
{color: 'white', fontSize: 18},
72
]}>
···
81
a.flex,
82
a.flex_row,
83
a.align_center,
84
-
a.font_semi_bold,
85
{color: 'white', fontSize: 18, gap: 6},
86
]}>
87
<Trans>
···
54
]}>
55
<View style={[a.gap_sm]}>
56
<Text
57
+
style={[a.font_bold, a.text_3xl, a.text_center, {color: 'white'}]}>
58
{record.name}
59
</Text>
60
</View>
61
<View style={[a.gap_xl, a.align_center]}>
62
<Text
63
style={[
64
+
a.font_bold,
65
a.text_center,
66
{color: 'white', fontSize: 18},
67
]}>
···
76
a.flex,
77
a.flex_row,
78
a.align_center,
79
+
a.font_bold,
80
{color: 'white', fontSize: 18, gap: 6},
81
]}>
82
<Trans>
+2
-2
src/components/StarterPack/StarterPackCard.tsx
+2
-2
src/components/StarterPack/StarterPackCard.tsx
···
77
<View style={[a.flex_1]}>
78
<Text
79
emoji
80
-
style={[a.text_md, a.font_semi_bold, a.leading_snug]}
81
numberOfLines={2}>
82
{record.name}
83
</Text>
···
97
</Text>
98
) : null}
99
{!!joinedAllTimeCount && joinedAllTimeCount >= 50 && (
100
-
<Text style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
101
<Trans comment="Number of users (always at least 50) who have joined Bluesky using a specific starter pack">
102
<Plural value={joinedAllTimeCount} other="# users have" /> joined!
103
</Trans>
···
77
<View style={[a.flex_1]}>
78
<Text
79
emoji
80
+
style={[a.text_md, a.font_bold, a.leading_snug]}
81
numberOfLines={2}>
82
{record.name}
83
</Text>
···
97
</Text>
98
) : null}
99
{!!joinedAllTimeCount && joinedAllTimeCount >= 50 && (
100
+
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
101
<Trans comment="Number of users (always at least 50) who have joined Bluesky using a specific starter pack">
102
<Plural value={joinedAllTimeCount} other="# users have" /> joined!
103
</Trans>
+1
-1
src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+1
-1
src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+1
-1
src/components/StarterPack/Wizard/WizardListCard.tsx
+1
-1
src/components/StarterPack/Wizard/WizardListCard.tsx
+1
-1
src/components/SubtleWebHover.web.tsx
+1
-1
src/components/SubtleWebHover.web.tsx
+1
-1
src/components/TrendingTopics.tsx
+1
-1
src/components/TrendingTopics.tsx
+3
-9
src/components/VideoPostCard.tsx
+3
-9
src/components/VideoPostCard.tsx
···
227
{likeCount > 0 && (
228
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
229
<Heart size="sm" fill="white" />
230
-
<Text
231
-
style={[a.text_sm, a.font_semi_bold, {color: 'white'}]}>
232
{formatCount(i18n, likeCount)}
233
</Text>
234
</View>
···
236
{repostCount > 0 && (
237
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
238
<Repost size="sm" fill="white" />
239
-
<Text
240
-
style={[a.text_sm, a.font_semi_bold, {color: 'white'}]}>
241
{formatCount(i18n, repostCount)}
242
</Text>
243
</View>
···
522
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
523
<Heart size="sm" fill="white" />
524
<Text
525
-
style={[
526
-
a.text_sm,
527
-
a.font_semi_bold,
528
-
{color: 'white'},
529
-
]}>
530
{formatCount(i18n, likeCount)}
531
</Text>
532
</View>
···
227
{likeCount > 0 && (
228
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
229
<Heart size="sm" fill="white" />
230
+
<Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
231
{formatCount(i18n, likeCount)}
232
</Text>
233
</View>
···
235
{repostCount > 0 && (
236
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
237
<Repost size="sm" fill="white" />
238
+
<Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
239
{formatCount(i18n, repostCount)}
240
</Text>
241
</View>
···
520
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
521
<Heart size="sm" fill="white" />
522
<Text
523
+
style={[a.text_sm, a.font_bold, {color: 'white'}]}>
524
{formatCount(i18n, likeCount)}
525
</Text>
526
</View>
+2
-2
src/components/WelcomeModal.tsx
+2
-2
src/components/WelcomeModal.tsx
+1
-1
src/components/WhoCanReply.tsx
+1
-1
src/components/WhoCanReply.tsx
+1
-1
src/components/activity-notifications/SubscribeProfileDialog.tsx
+1
-1
src/components/activity-notifications/SubscribeProfileDialog.tsx
+2
-2
src/components/ageAssurance/AgeAssuranceAdmonition.tsx
+2
-2
src/components/ageAssurance/AgeAssuranceAdmonition.tsx
···
82
</View>
83
<View style={[a.flex_1, a.gap_xs, a.pr_4xl]}>
84
<Text style={[a.text_sm, a.leading_snug]}>{children}</Text>
85
-
<Text style={[a.text_sm, a.leading_snug, a.font_semi_bold]}>
86
<Trans>
87
Learn more in your{' '}
88
<InlineLinkText
89
label={_(msg`Go to account settings`)}
90
to={'/settings/account'}
91
-
style={[a.text_sm, a.leading_snug, a.font_semi_bold]}
92
onPress={() => {
93
logger.metric('ageAssurance:navigateToSettings', {})
94
}}>
···
82
</View>
83
<View style={[a.flex_1, a.gap_xs, a.pr_4xl]}>
84
<Text style={[a.text_sm, a.leading_snug]}>{children}</Text>
85
+
<Text style={[a.text_sm, a.leading_snug, a.font_bold]}>
86
<Trans>
87
Learn more in your{' '}
88
<InlineLinkText
89
label={_(msg`Go to account settings`)}
90
to={'/settings/account'}
91
+
style={[a.text_sm, a.leading_snug, a.font_bold]}
92
onPress={() => {
93
logger.metric('ageAssurance:navigateToSettings', {})
94
}}>
+1
-1
src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
+1
-1
src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
+1
-1
src/components/ageAssurance/AgeAssuranceBadge.tsx
+1
-1
src/components/ageAssurance/AgeAssuranceBadge.tsx
+1
-1
src/components/ageAssurance/AgeAssuranceInitDialog.tsx
+1
-1
src/components/ageAssurance/AgeAssuranceInitDialog.tsx
+2
-2
src/components/ageAssurance/AgeAssuranceRedirectDialog.tsx
+2
-2
src/components/ageAssurance/AgeAssuranceRedirectDialog.tsx
···
160
a.pb_md,
161
]}>
162
<SuccessIcon size="sm" fill={t.palette.positive_600} />
163
-
<Text style={[a.text_xl, a.font_bold]}>
164
<Trans>Success</Trans>
165
</Text>
166
</View>
···
209
]}>
210
{error && <ErrorIcon size="md" fill={t.palette.negative_500} />}
211
212
-
<Text style={[a.text_xl, a.font_bold]}>
213
{error ? <Trans>Connection issue</Trans> : <Trans>Verifying</Trans>}
214
</Text>
215
···
160
a.pb_md,
161
]}>
162
<SuccessIcon size="sm" fill={t.palette.positive_600} />
163
+
<Text style={[a.text_xl, a.font_heavy]}>
164
<Trans>Success</Trans>
165
</Text>
166
</View>
···
209
]}>
210
{error && <ErrorIcon size="md" fill={t.palette.negative_500} />}
211
212
+
<Text style={[a.text_xl, a.font_heavy]}>
213
{error ? <Trans>Connection issue</Trans> : <Trans>Verifying</Trans>}
214
</Text>
215
+1
-1
src/components/ageAssurance/AgeRestrictedScreen.tsx
+1
-1
src/components/ageAssurance/AgeRestrictedScreen.tsx
+1
-1
src/components/dialogs/BirthDateSettings.tsx
+1
-1
src/components/dialogs/BirthDateSettings.tsx
+1
-1
src/components/dialogs/DeviceLocationRequestDialog.tsx
+1
-1
src/components/dialogs/DeviceLocationRequestDialog.tsx
+3
-3
src/components/dialogs/EmailDialog/screens/Manage2FA/Disable.tsx
+3
-3
src/components/dialogs/EmailDialog/screens/Manage2FA/Disable.tsx
···
153
154
return (
155
<View style={[a.gap_sm]}>
156
-
<Text style={[a.text_xl, a.font_bold, a.leading_snug]}>
157
<Trans>Disable email 2FA</Trans>
158
</Text>
159
···
163
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
164
<Trans>
165
To disable your email 2FA method, please verify your access to{' '}
166
-
<Span style={[a.font_semi_bold]}>{currentAccount?.email}</Span>
167
</Trans>
168
</Text>
169
···
214
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
215
<Trans>
216
To disable your email 2FA method, please verify your access to{' '}
217
-
<Span style={[a.font_semi_bold]}>{currentAccount?.email}</Span>
218
</Trans>
219
</Text>
220
···
153
154
return (
155
<View style={[a.gap_sm]}>
156
+
<Text style={[a.text_xl, a.font_heavy, a.leading_snug]}>
157
<Trans>Disable email 2FA</Trans>
158
</Text>
159
···
163
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
164
<Trans>
165
To disable your email 2FA method, please verify your access to{' '}
166
+
<Span style={[a.font_bold]}>{currentAccount?.email}</Span>
167
</Trans>
168
</Text>
169
···
214
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
215
<Trans>
216
To disable your email 2FA method, please verify your access to{' '}
217
+
<Span style={[a.font_bold]}>{currentAccount?.email}</Span>
218
</Trans>
219
</Text>
220
+1
-1
src/components/dialogs/EmailDialog/screens/Manage2FA/Enable.tsx
+1
-1
src/components/dialogs/EmailDialog/screens/Manage2FA/Enable.tsx
+3
-3
src/components/dialogs/EmailDialog/screens/Update.tsx
+3
-3
src/components/dialogs/EmailDialog/screens/Update.tsx
···
199
200
return (
201
<View style={[a.gap_lg]}>
202
-
<Text style={[a.text_xl, a.font_bold]}>
203
<Trans>Update your email</Trans>
204
</Text>
205
···
239
<>
240
<Divider />
241
<View>
242
-
<Text style={[a.text_md, a.pb_sm, a.font_semi_bold]}>
243
<Trans>Security step required</Trans>
244
</Text>
245
<Text
···
282
<View style={[a.gap_sm]}>
283
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
284
<Check fill={t.palette.positive_600} size="xs" />
285
-
<Text style={[a.text_md, a.font_bold]}>
286
<Trans>Success!</Trans>
287
</Text>
288
</View>
···
199
200
return (
201
<View style={[a.gap_lg]}>
202
+
<Text style={[a.text_xl, a.font_heavy]}>
203
<Trans>Update your email</Trans>
204
</Text>
205
···
239
<>
240
<Divider />
241
<View>
242
+
<Text style={[a.text_md, a.pb_sm, a.font_bold]}>
243
<Trans>Security step required</Trans>
244
</Text>
245
<Text
···
282
<View style={[a.gap_sm]}>
283
<View style={[a.flex_row, a.gap_sm, a.align_center]}>
284
<Check fill={t.palette.positive_600} size="xs" />
285
+
<Text style={[a.text_md, a.font_heavy]}>
286
<Trans>Success!</Trans>
287
</Text>
288
</View>
+1
-1
src/components/dialogs/EmailDialog/screens/VerificationReminder.tsx
+1
-1
src/components/dialogs/EmailDialog/screens/VerificationReminder.tsx
+5
-5
src/components/dialogs/EmailDialog/screens/Verify.tsx
+5
-5
src/components/dialogs/EmailDialog/screens/Verify.tsx
···
174
return (
175
<View style={[a.gap_lg]}>
176
<View style={[a.gap_sm]}>
177
-
<Text style={[a.text_xl, a.font_bold]}>
178
<Span style={{top: 1}}>
179
<Check size="sm" fill={t.palette.positive_600} />
180
</Span>
···
197
return (
198
<View style={[a.gap_lg]}>
199
<View style={[a.gap_sm]}>
200
-
<Text style={[a.text_xl, a.font_bold]}>
201
{state.step === 'email' ? (
202
state.mutationStatus === 'success' ? (
203
<>
···
239
state.mutationStatus === 'success' ? (
240
<Trans>
241
We sent an email to{' '}
242
-
<Span style={[a.font_semi_bold, t.atoms.text]}>
243
{currentAccount!.email}
244
</Span>{' '}
245
containing a link. Please click on it to complete the email
···
248
) : (
249
<Trans>
250
We'll send an email to{' '}
251
-
<Span style={[a.font_semi_bold, t.atoms.text]}>
252
{currentAccount!.email}
253
</Span>{' '}
254
containing a link. Please click on it to complete the email
···
258
) : (
259
<Trans>
260
Please enter the code we sent to{' '}
261
-
<Span style={[a.font_semi_bold, t.atoms.text]}>
262
{currentAccount!.email}
263
</Span>{' '}
264
below.
···
174
return (
175
<View style={[a.gap_lg]}>
176
<View style={[a.gap_sm]}>
177
+
<Text style={[a.text_xl, a.font_heavy]}>
178
<Span style={{top: 1}}>
179
<Check size="sm" fill={t.palette.positive_600} />
180
</Span>
···
197
return (
198
<View style={[a.gap_lg]}>
199
<View style={[a.gap_sm]}>
200
+
<Text style={[a.text_xl, a.font_heavy]}>
201
{state.step === 'email' ? (
202
state.mutationStatus === 'success' ? (
203
<>
···
239
state.mutationStatus === 'success' ? (
240
<Trans>
241
We sent an email to{' '}
242
+
<Span style={[a.font_bold, t.atoms.text]}>
243
{currentAccount!.email}
244
</Span>{' '}
245
containing a link. Please click on it to complete the email
···
248
) : (
249
<Trans>
250
We'll send an email to{' '}
251
+
<Span style={[a.font_bold, t.atoms.text]}>
252
{currentAccount!.email}
253
</Span>{' '}
254
containing a link. Please click on it to complete the email
···
258
) : (
259
<Trans>
260
Please enter the code we sent to{' '}
261
+
<Span style={[a.font_bold, t.atoms.text]}>
262
{currentAccount!.email}
263
</Span>{' '}
264
below.
+2
-2
src/components/dialogs/Embed.tsx
+2
-2
src/components/dialogs/Embed.tsx
···
104
<Dialog.Inner label={_(msg`Embed post`)} style={[{maxWidth: 500}]}>
105
<View style={[a.gap_lg]}>
106
<View style={[a.gap_sm]}>
107
-
<Text style={[a.text_2xl, a.font_bold]}>
108
<Trans>Embed post</Trans>
109
</Text>
110
<Text
···
147
148
{showCustomisation && (
149
<View style={[a.gap_sm, a.p_md]}>
150
-
<Text style={[t.atoms.text_contrast_medium, a.font_semi_bold]}>
151
<Trans>Color theme</Trans>
152
</Text>
153
<ToggleButton.Group
···
104
<Dialog.Inner label={_(msg`Embed post`)} style={[{maxWidth: 500}]}>
105
<View style={[a.gap_lg]}>
106
<View style={[a.gap_sm]}>
107
+
<Text style={[a.text_2xl, a.font_heavy]}>
108
<Trans>Embed post</Trans>
109
</Text>
110
<Text
···
147
148
{showCustomisation && (
149
<View style={[a.gap_sm, a.p_md]}>
150
+
<Text style={[t.atoms.text_contrast_medium, a.font_bold]}>
151
<Trans>Color theme</Trans>
152
</Text>
153
<ToggleButton.Group
+1
-1
src/components/dialogs/EmbedConsent.tsx
+1
-1
src/components/dialogs/EmbedConsent.tsx
+1
-1
src/components/dialogs/InAppBrowserConsent.tsx
+1
-1
src/components/dialogs/InAppBrowserConsent.tsx
···
62
<Dialog.ScrollableInner label={_(msg`How should we open this link?`)}>
63
<View style={[a.gap_2xl]}>
64
<View style={[a.gap_sm]}>
65
-
<Text style={[a.font_bold, a.text_2xl]}>
66
<Trans>How should we open this link?</Trans>
67
</Text>
68
<Text style={[t.atoms.text_contrast_high, a.leading_snug, a.text_md]}>
···
62
<Dialog.ScrollableInner label={_(msg`How should we open this link?`)}>
63
<View style={[a.gap_2xl]}>
64
<View style={[a.gap_sm]}>
65
+
<Text style={[a.font_heavy, a.text_2xl]}>
66
<Trans>How should we open this link?</Trans>
67
</Text>
68
<Text style={[t.atoms.text_contrast_high, a.leading_snug, a.text_md]}>
+2
-3
src/components/dialogs/LinkWarning.tsx
+2
-3
src/components/dialogs/LinkWarning.tsx
···
68
}>
69
<View style={[a.gap_2xl]}>
70
<View style={[a.gap_sm]}>
71
-
<Text style={[a.font_bold, a.text_2xl]}>
72
{potentiallyMisleading ? (
73
<Trans>Potentially misleading link</Trans>
74
) : (
···
151
]}>
152
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
153
{scheme}
154
-
<Text
155
-
style={[a.text_md, a.leading_snug, t.atoms.text, a.font_semi_bold]}>
156
{hostname}
157
</Text>
158
{rest}
···
68
}>
69
<View style={[a.gap_2xl]}>
70
<View style={[a.gap_sm]}>
71
+
<Text style={[a.font_heavy, a.text_2xl]}>
72
{potentiallyMisleading ? (
73
<Trans>Potentially misleading link</Trans>
74
) : (
···
151
]}>
152
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
153
{scheme}
154
+
<Text style={[a.text_md, a.leading_snug, t.atoms.text, a.font_bold]}>
155
{hostname}
156
</Text>
157
{rest}
+8
-15
src/components/dialogs/MutedWords.tsx
+8
-15
src/components/dialogs/MutedWords.tsx
···
108
<Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
109
<View>
110
<Text
111
-
style={[
112
-
a.text_md,
113
-
a.font_semi_bold,
114
-
a.pb_sm,
115
-
t.atoms.text_contrast_high,
116
-
]}>
117
<Trans>Add muted words and tags</Trans>
118
</Text>
119
<Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
···
152
style={[
153
a.pb_xs,
154
a.text_sm,
155
-
a.font_semi_bold,
156
t.atoms.text_contrast_medium,
157
]}>
158
<Trans>Duration:</Trans>
···
252
style={[
253
a.pb_xs,
254
a.text_sm,
255
-
a.font_semi_bold,
256
t.atoms.text_contrast_medium,
257
]}>
258
<Trans>Mute in:</Trans>
···
298
style={[
299
a.pb_xs,
300
a.text_sm,
301
-
a.font_semi_bold,
302
t.atoms.text_contrast_medium,
303
]}>
304
<Trans>Options:</Trans>
···
367
<Text
368
style={[
369
a.text_md,
370
-
a.font_semi_bold,
371
a.pb_md,
372
t.atoms.text_contrast_high,
373
]}>
···
460
style={[
461
a.flex_1,
462
a.leading_snug,
463
-
a.font_semi_bold,
464
web({
465
overflowWrap: 'break-word',
466
wordBreak: 'break-word',
···
471
{word.value}{' '}
472
<Text style={[a.font_normal, t.atoms.text_contrast_medium]}>
473
in{' '}
474
-
<Text
475
-
style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
476
text & tags
477
</Text>
478
</Text>
···
482
{word.value}{' '}
483
<Text style={[a.font_normal, t.atoms.text_contrast_medium]}>
484
in{' '}
485
-
<Text
486
-
style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
487
tags
488
</Text>
489
</Text>
···
108
<Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
109
<View>
110
<Text
111
+
style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
112
<Trans>Add muted words and tags</Trans>
113
</Text>
114
<Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
···
147
style={[
148
a.pb_xs,
149
a.text_sm,
150
+
a.font_bold,
151
t.atoms.text_contrast_medium,
152
]}>
153
<Trans>Duration:</Trans>
···
247
style={[
248
a.pb_xs,
249
a.text_sm,
250
+
a.font_bold,
251
t.atoms.text_contrast_medium,
252
]}>
253
<Trans>Mute in:</Trans>
···
293
style={[
294
a.pb_xs,
295
a.text_sm,
296
+
a.font_bold,
297
t.atoms.text_contrast_medium,
298
]}>
299
<Trans>Options:</Trans>
···
362
<Text
363
style={[
364
a.text_md,
365
+
a.font_bold,
366
a.pb_md,
367
t.atoms.text_contrast_high,
368
]}>
···
455
style={[
456
a.flex_1,
457
a.leading_snug,
458
+
a.font_bold,
459
web({
460
overflowWrap: 'break-word',
461
wordBreak: 'break-word',
···
466
{word.value}{' '}
467
<Text style={[a.font_normal, t.atoms.text_contrast_medium]}>
468
in{' '}
469
+
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
470
text & tags
471
</Text>
472
</Text>
···
476
{word.value}{' '}
477
<Text style={[a.font_normal, t.atoms.text_contrast_medium]}>
478
in{' '}
479
+
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
480
tags
481
</Text>
482
</Text>
+5
-7
src/components/dialogs/PostInteractionSettingsDialog.tsx
+5
-7
src/components/dialogs/PostInteractionSettingsDialog.tsx
···
84
]}>
85
<Trans>
86
You can set default interaction settings in{' '}
87
-
<Text style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
88
Settings → Moderation → Interaction settings
89
</Text>
90
.
···
100
export function Header() {
101
return (
102
<View style={[a.gap_md, a.pb_sm]}>
103
-
<Text style={[a.text_2xl, a.font_semi_bold]}>
104
<Trans>Post interaction settings</Trans>
105
</Text>
106
<Text style={[a.text_md, a.pb_xs]}>
···
329
<View style={[a.flex_1, a.gap_md]}>
330
<View style={[a.gap_lg]}>
331
<View style={[a.gap_sm]}>
332
-
<Text style={[a.font_semi_bold, a.text_lg]}>
333
<Trans>Quote settings</Trans>
334
</Text>
335
···
385
opacity: replySettingsDisabled ? 0.3 : 1,
386
},
387
]}>
388
-
<Text style={[a.font_semi_bold, a.text_lg]}>
389
<Trans>Reply settings</Trans>
390
</Text>
391
···
535
},
536
style,
537
]}>
538
-
<Text style={[a.text_sm, isSelected && a.font_semi_bold]}>
539
-
{label}
540
-
</Text>
541
{isSelected ? (
542
<Check size="sm" fill={t.palette.primary_500} />
543
) : (
···
84
]}>
85
<Trans>
86
You can set default interaction settings in{' '}
87
+
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
88
Settings → Moderation → Interaction settings
89
</Text>
90
.
···
100
export function Header() {
101
return (
102
<View style={[a.gap_md, a.pb_sm]}>
103
+
<Text style={[a.text_2xl, a.font_bold]}>
104
<Trans>Post interaction settings</Trans>
105
</Text>
106
<Text style={[a.text_md, a.pb_xs]}>
···
329
<View style={[a.flex_1, a.gap_md]}>
330
<View style={[a.gap_lg]}>
331
<View style={[a.gap_sm]}>
332
+
<Text style={[a.font_bold, a.text_lg]}>
333
<Trans>Quote settings</Trans>
334
</Text>
335
···
385
opacity: replySettingsDisabled ? 0.3 : 1,
386
},
387
]}>
388
+
<Text style={[a.font_bold, a.text_lg]}>
389
<Trans>Reply settings</Trans>
390
</Text>
391
···
535
},
536
style,
537
]}>
538
+
<Text style={[a.text_sm, isSelected && a.font_bold]}>{label}</Text>
539
{isSelected ? (
540
<Check size="sm" fill={t.palette.primary_500} />
541
) : (
+1
-1
src/components/dialogs/SearchablePeopleList.tsx
+1
-1
src/components/dialogs/SearchablePeopleList.tsx
+3
-3
src/components/dialogs/StarterPackDialog.tsx
+3
-3
src/components/dialogs/StarterPackDialog.tsx
···
172
isWeb ? a.mb_2xl : a.my_lg,
173
a.align_center,
174
]}>
175
-
<Text style={[a.text_lg, a.font_semi_bold]}>
176
<Trans>Add to starter packs</Trans>
177
</Text>
178
<Button
···
189
<>
190
<View
191
style={[a.flex_row, a.justify_between, a.align_center, a.py_md]}>
192
-
<Text style={[a.text_md, a.font_semi_bold]}>
193
<Trans>New starter pack</Trans>
194
</Text>
195
<Button
···
331
return (
332
<View style={[a.flex_row, a.justify_between, a.align_center, a.py_md]}>
333
<View>
334
-
<Text emoji style={[a.text_md, a.font_semi_bold]} numberOfLines={1}>
335
{record.name}
336
</Text>
337
···
172
isWeb ? a.mb_2xl : a.my_lg,
173
a.align_center,
174
]}>
175
+
<Text style={[a.text_lg, a.font_bold]}>
176
<Trans>Add to starter packs</Trans>
177
</Text>
178
<Button
···
189
<>
190
<View
191
style={[a.flex_row, a.justify_between, a.align_center, a.py_md]}>
192
+
<Text style={[a.text_md, a.font_bold]}>
193
<Trans>New starter pack</Trans>
194
</Text>
195
<Button
···
331
return (
332
<View style={[a.flex_row, a.justify_between, a.align_center, a.py_md]}>
333
<View>
334
+
<Text emoji style={[a.text_md, a.font_bold]} numberOfLines={1}>
335
{record.name}
336
</Text>
337
+1
-1
src/components/dialogs/SwitchAccount.tsx
+1
-1
src/components/dialogs/SwitchAccount.tsx
+2
-2
src/components/dialogs/nuxs/ActivitySubscriptions.tsx
+2
-2
src/components/dialogs/nuxs/ActivitySubscriptions.tsx
+2
-2
src/components/dialogs/nuxs/BookmarksAnnouncement.tsx
+2
-2
src/components/dialogs/nuxs/BookmarksAnnouncement.tsx
+4
-4
src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
+4
-4
src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
···
55
<SparkleIcon fill={t.palette.primary_700} size="sm" />
56
<Text
57
style={[
58
-
a.font_semi_bold,
59
{
60
color: t.palette.primary_700,
61
},
···
87
</View>
88
89
<View style={[a.gap_xs]}>
90
-
<Text style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
91
<Trans>A new form of verification</Trans>
92
</Text>
93
<Text style={[a.leading_snug, a.text_md]}>
···
123
<View style={[a.gap_sm]}>
124
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
125
<VerifierCheck width={14} />
126
-
<Text style={[a.text_lg, a.font_semi_bold, a.leading_snug]}>
127
<Trans>Who can verify?</Trans>
128
</Text>
129
</View>
···
138
<Trans>
139
Trust emerges from relationships, communities, and shared
140
context, so we’re also enabling{' '}
141
-
<Span style={[a.font_semi_bold]}>trusted verifiers</Span>:
142
organizations that can directly issue verification.
143
</Trans>
144
</Text>
···
55
<SparkleIcon fill={t.palette.primary_700} size="sm" />
56
<Text
57
style={[
58
+
a.font_bold,
59
{
60
color: t.palette.primary_700,
61
},
···
87
</View>
88
89
<View style={[a.gap_xs]}>
90
+
<Text style={[a.text_2xl, a.font_bold, a.leading_snug]}>
91
<Trans>A new form of verification</Trans>
92
</Text>
93
<Text style={[a.leading_snug, a.text_md]}>
···
123
<View style={[a.gap_sm]}>
124
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
125
<VerifierCheck width={14} />
126
+
<Text style={[a.text_lg, a.font_bold, a.leading_snug]}>
127
<Trans>Who can verify?</Trans>
128
</Text>
129
</View>
···
138
<Trans>
139
Trust emerges from relationships, communities, and shared
140
context, so we’re also enabling{' '}
141
+
<Span style={[a.font_bold]}>trusted verifiers</Span>:
142
organizations that can directly issue verification.
143
</Trans>
144
</Text>
+1
-3
src/components/dms/ChatEmptyPill.tsx
+1
-3
src/components/dms/ChatEmptyPill.tsx
+1
-2
src/components/dms/DateDivider.tsx
+1
-2
src/components/dms/DateDivider.tsx
+1
-1
src/components/dms/EmojiPopup.android.tsx
+1
-1
src/components/dms/EmojiPopup.android.tsx
+1
-1
src/components/dms/MessagesListHeader.tsx
+1
-1
src/components/dms/MessagesListHeader.tsx
+1
-1
src/components/dms/NewMessagesPill.tsx
+1
-1
src/components/dms/NewMessagesPill.tsx
+4
-5
src/components/dms/ReportDialog.tsx
+4
-5
src/components/dms/ReportDialog.tsx
···
200
</Button>
201
202
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
203
-
<Text style={[a.text_2xl, a.font_semi_bold]}>{copy.title}</Text>
204
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
205
<Trans>
206
Your report will be sent to the Bluesky Moderation Service
···
213
)}
214
215
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
216
-
<Text
217
-
style={[a.font_semi_bold, a.text_md, t.atoms.text_contrast_medium]}>
218
<Trans>Reason:</Trans>
219
</Text>{' '}
220
-
<Text style={[a.font_semi_bold, a.text_md]}>{reportOption.title}</Text>
221
</Text>
222
223
<Divider />
···
347
return (
348
<View style={a.gap_2xl}>
349
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
350
-
<Text style={[a.text_2xl, a.font_semi_bold]}>
351
<Trans>Report submitted</Trans>
352
</Text>
353
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
···
200
</Button>
201
202
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
203
+
<Text style={[a.text_2xl, a.font_bold]}>{copy.title}</Text>
204
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
205
<Trans>
206
Your report will be sent to the Bluesky Moderation Service
···
213
)}
214
215
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
216
+
<Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
217
<Trans>Reason:</Trans>
218
</Text>{' '}
219
+
<Text style={[a.font_bold, a.text_md]}>{reportOption.title}</Text>
220
</Text>
221
222
<Divider />
···
346
return (
347
<View style={a.gap_2xl}>
348
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
349
+
<Text style={[a.text_2xl, a.font_bold]}>
350
<Trans>Report submitted</Trans>
351
</Text>
352
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+1
-2
src/components/forms/FormError.tsx
+1
-2
src/components/forms/FormError.tsx
+9
-19
src/components/forms/TextField.tsx
+9
-19
src/components/forms/TextField.tsx
···
15
android,
16
applyFonts,
17
atoms as a,
18
platform,
19
type TextStyleProp,
20
tokens,
···
201
a.px_xs,
202
{
203
// paddingVertical doesn't work w/multiline - esb
204
-
lineHeight: a.text_md.fontSize * 1.2,
205
textAlignVertical: rest.multiline ? 'top' : undefined,
206
minHeight: rest.multiline ? 80 : undefined,
207
minWidth: 0,
208
-
paddingTop: 13,
209
-
paddingBottom: 13,
210
},
211
-
android({
212
-
paddingTop: 8,
213
-
paddingBottom: 9,
214
-
}),
215
-
/*
216
-
* Margins are needed here to avoid autofill background overlapping the
217
-
* top and bottom borders - esb
218
-
*/
219
web({
220
-
paddingTop: 11,
221
paddingBottom: 11,
222
marginTop: 2,
223
marginBottom: 2,
···
267
a.absolute,
268
a.inset_0,
269
a.rounded_sm,
270
-
t.atoms.bg_contrast_50,
271
{borderColor: 'transparent', borderWidth: 2},
272
ctx.hovered ? chromeHover : {},
273
ctx.focused ? chromeFocus : {},
···
292
return (
293
<Text
294
nativeID={nativeID}
295
-
style={[
296
-
a.text_sm,
297
-
a.font_semi_bold,
298
-
t.atoms.text_contrast_medium,
299
-
a.mb_sm,
300
-
]}>
301
{children}
302
</Text>
303
)
···
15
android,
16
applyFonts,
17
atoms as a,
18
+
ios,
19
platform,
20
type TextStyleProp,
21
tokens,
···
202
a.px_xs,
203
{
204
// paddingVertical doesn't work w/multiline - esb
205
+
lineHeight: a.text_md.fontSize * 1.1875,
206
textAlignVertical: rest.multiline ? 'top' : undefined,
207
minHeight: rest.multiline ? 80 : undefined,
208
minWidth: 0,
209
},
210
+
ios({paddingTop: 12, paddingBottom: 13}),
211
+
// Needs to be sm on Paper, md on Fabric for some godforsaken reason -sfn
212
+
android(a.py_sm),
213
+
// fix for autofill styles covering border
214
web({
215
+
paddingTop: 10,
216
paddingBottom: 11,
217
marginTop: 2,
218
marginBottom: 2,
···
262
a.absolute,
263
a.inset_0,
264
a.rounded_sm,
265
+
t.atoms.bg_contrast_25,
266
{borderColor: 'transparent', borderWidth: 2},
267
ctx.hovered ? chromeHover : {},
268
ctx.focused ? chromeFocus : {},
···
287
return (
288
<Text
289
nativeID={nativeID}
290
+
style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}>
291
{children}
292
</Text>
293
)
+1
-1
src/components/forms/Toggle.tsx
+1
-1
src/components/forms/Toggle.tsx
+1
-1
src/components/forms/ToggleButton.tsx
+1
-1
src/components/forms/ToggleButton.tsx
+4
-4
src/components/intents/VerifyEmailIntentDialog.tsx
+4
-4
src/components/intents/VerifyEmailIntentDialog.tsx
···
75
</View>
76
) : status === 'success' ? (
77
<View style={[a.gap_sm, isNative && a.pb_xl]}>
78
-
<Text style={[a.font_bold, a.text_2xl]}>
79
<Trans>Email Verified</Trans>
80
</Text>
81
<Text style={[a.text_md, a.leading_snug]}>
···
87
</View>
88
) : status === 'failure' ? (
89
<View style={[a.gap_sm]}>
90
-
<Text style={[a.font_bold, a.text_2xl]}>
91
<Trans>Invalid Verification Code</Trans>
92
</Text>
93
<Text style={[a.text_md, a.leading_snug]}>
···
100
</View>
101
) : (
102
<View style={[a.gap_sm, isNative && a.pb_xl]}>
103
-
<Text style={[a.font_bold, a.text_2xl]}>
104
<Trans>Email Resent</Trans>
105
</Text>
106
<Text style={[a.text_md, a.leading_snug]}>
107
<Trans>
108
We have sent another verification email to{' '}
109
-
<Text style={[a.text_md, a.font_semi_bold]}>
110
{currentAccount?.email}
111
</Text>
112
.
···
75
</View>
76
) : status === 'success' ? (
77
<View style={[a.gap_sm, isNative && a.pb_xl]}>
78
+
<Text style={[a.font_heavy, a.text_2xl]}>
79
<Trans>Email Verified</Trans>
80
</Text>
81
<Text style={[a.text_md, a.leading_snug]}>
···
87
</View>
88
) : status === 'failure' ? (
89
<View style={[a.gap_sm]}>
90
+
<Text style={[a.font_heavy, a.text_2xl]}>
91
<Trans>Invalid Verification Code</Trans>
92
</Text>
93
<Text style={[a.text_md, a.leading_snug]}>
···
100
</View>
101
) : (
102
<View style={[a.gap_sm, isNative && a.pb_xl]}>
103
+
<Text style={[a.font_heavy, a.text_2xl]}>
104
<Trans>Email Resent</Trans>
105
</Text>
106
<Text style={[a.text_md, a.leading_snug]}>
107
<Trans>
108
We have sent another verification email to{' '}
109
+
<Text style={[a.text_md, a.font_bold]}>
110
{currentAccount?.email}
111
</Text>
112
.
+2
-2
src/components/interstitials/Trending.tsx
+2
-2
src/components/interstitials/Trending.tsx
···
82
style={[
83
t.atoms.text_contrast_medium,
84
a.text_sm,
85
-
a.font_semi_bold,
86
]}>
87
{' '}
88
</Text>
···
101
style={[
102
t.atoms.text,
103
a.text_sm,
104
-
a.font_semi_bold,
105
{opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
106
]}>
107
{topic.topic}
···
82
style={[
83
t.atoms.text_contrast_medium,
84
a.text_sm,
85
+
a.font_bold,
86
]}>
87
{' '}
88
</Text>
···
101
style={[
102
t.atoms.text,
103
a.text_sm,
104
+
a.font_bold,
105
{opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
106
]}>
107
{topic.topic}
+1
-1
src/components/interstitials/TrendingVideos.tsx
+1
-1
src/components/interstitials/TrendingVideos.tsx
+2
-2
src/components/live/EditLiveDialog.tsx
+2
-2
src/components/live/EditLiveDialog.tsx
···
120
style={web({maxWidth: 420})}>
121
<View style={[a.gap_lg]}>
122
<View style={[a.gap_sm]}>
123
-
<Text style={[a.font_semi_bold, a.text_2xl]}>
124
<Trans>You are Live</Trans>
125
</Text>
126
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
···
182
a.text_sm,
183
a.leading_snug,
184
a.flex_1,
185
-
a.font_semi_bold,
186
{color: t.palette.negative_500},
187
]}>
188
{liveLinkError ? (
···
120
style={web({maxWidth: 420})}>
121
<View style={[a.gap_lg]}>
122
<View style={[a.gap_sm]}>
123
+
<Text style={[a.font_bold, a.text_2xl]}>
124
<Trans>You are Live</Trans>
125
</Text>
126
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
···
182
a.text_sm,
183
a.leading_snug,
184
a.flex_1,
185
+
a.font_bold,
186
{color: t.palette.negative_500},
187
]}>
188
{liveLinkError ? (
+2
-2
src/components/live/GoLiveDialog.tsx
+2
-2
src/components/live/GoLiveDialog.tsx
···
94
style={web({maxWidth: 420})}>
95
<View style={[a.gap_xl]}>
96
<View style={[a.gap_sm]}>
97
-
<Text style={[a.font_semi_bold, a.text_2xl]}>
98
<Trans>Go Live</Trans>
99
</Text>
100
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high]}>
···
153
a.text_sm,
154
a.leading_snug,
155
a.flex_1,
156
-
a.font_semi_bold,
157
{color: t.palette.negative_500},
158
]}>
159
{liveLinkError ? (
···
94
style={web({maxWidth: 420})}>
95
<View style={[a.gap_xl]}>
96
<View style={[a.gap_sm]}>
97
+
<Text style={[a.font_bold, a.text_2xl]}>
98
<Trans>Go Live</Trans>
99
</Text>
100
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high]}>
···
153
a.text_sm,
154
a.leading_snug,
155
a.flex_1,
156
+
a.font_bold,
157
{color: t.palette.negative_500},
158
]}>
159
{liveLinkError ? (
+1
-1
src/components/live/LinkPreview.tsx
+1
-1
src/components/live/LinkPreview.tsx
+1
-1
src/components/live/LiveIndicator.tsx
+1
-1
src/components/live/LiveIndicator.tsx
+1
-1
src/components/live/LiveStatusDialog.tsx
+1
-1
src/components/live/LiveStatusDialog.tsx
+4
-4
src/components/moderation/ContentHider.tsx
+4
-4
src/components/moderation/ContentHider.tsx
···
178
style={[
179
a.flex_1,
180
a.text_left,
181
-
a.font_semi_bold,
182
a.leading_snug,
183
-
gtMobile && [a.font_semi_bold],
184
t.atoms.text_contrast_medium,
185
web({
186
marginBottom: 1,
···
192
{!modui.noOverride && (
193
<Text
194
style={[
195
-
a.font_semi_bold,
196
a.leading_snug,
197
-
gtMobile && [a.font_semi_bold],
198
t.atoms.text_contrast_high,
199
web({
200
marginBottom: 1,
···
178
style={[
179
a.flex_1,
180
a.text_left,
181
+
a.font_bold,
182
a.leading_snug,
183
+
gtMobile && [a.font_bold],
184
t.atoms.text_contrast_medium,
185
web({
186
marginBottom: 1,
···
192
{!modui.noOverride && (
193
<Text
194
style={[
195
+
a.font_bold,
196
a.leading_snug,
197
+
gtMobile && [a.font_bold],
198
t.atoms.text_contrast_high,
199
web({
200
marginBottom: 1,
+3
-8
src/components/moderation/LabelPreference.tsx
+3
-8
src/components/moderation/LabelPreference.tsx
···
48
49
return (
50
<View style={[a.gap_xs, a.flex_1]}>
51
-
<Text emoji style={[a.font_semi_bold, gtPhone ? a.text_sm : a.text_md]}>
52
{name}
53
</Text>
54
<Text emoji style={[t.atoms.text_contrast_medium, a.leading_snug]}>
···
241
<View style={[a.flex_row, a.gap_xs, a.align_center, a.mt_xs]}>
242
<CircleInfo size="sm" fill={t.atoms.text_contrast_high.color} />
243
244
-
<Text
245
-
style={[
246
-
t.atoms.text_contrast_medium,
247
-
a.font_semi_bold,
248
-
a.italic,
249
-
]}>
250
{adultDisabled ? (
251
<Trans>Adult content is disabled.</Trans>
252
) : isGlobalLabel ? (
···
279
t.atoms.border_contrast_low,
280
a.self_start,
281
]}>
282
-
<Text emoji style={[a.font_semi_bold, t.atoms.text_contrast_low]}>
283
{currentPrefLabel}
284
</Text>
285
</View>
···
48
49
return (
50
<View style={[a.gap_xs, a.flex_1]}>
51
+
<Text emoji style={[a.font_bold, gtPhone ? a.text_sm : a.text_md]}>
52
{name}
53
</Text>
54
<Text emoji style={[t.atoms.text_contrast_medium, a.leading_snug]}>
···
241
<View style={[a.flex_row, a.gap_xs, a.align_center, a.mt_xs]}>
242
<CircleInfo size="sm" fill={t.atoms.text_contrast_high.color} />
243
244
+
<Text style={[t.atoms.text_contrast_medium, a.font_bold, a.italic]}>
245
{adultDisabled ? (
246
<Trans>Adult content is disabled.</Trans>
247
) : isGlobalLabel ? (
···
274
t.atoms.border_contrast_low,
275
a.self_start,
276
]}>
277
+
<Text emoji style={[a.font_bold, t.atoms.text_contrast_low]}>
278
{currentPrefLabel}
279
</Text>
280
</View>
+3
-3
src/components/moderation/LabelsOnMeDialog.tsx
+3
-3
src/components/moderation/LabelsOnMeDialog.tsx
···
67
/>
68
) : (
69
<>
70
-
<Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
71
{isAccount ? (
72
<Trans>Labels on your account</Trans>
73
) : (
···
134
]}>
135
<View style={[a.p_md, a.gap_sm, a.flex_row]}>
136
<View style={[a.flex_1, a.gap_xs]}>
137
-
<Text emoji style={[a.font_semi_bold, a.text_md]}>
138
{strings.name}
139
</Text>
140
<Text emoji style={[t.atoms.text_contrast_medium, a.leading_snug]}>
···
264
return (
265
<>
266
<View>
267
-
<Text style={[a.text_2xl, a.font_semi_bold, a.pb_xs, a.leading_tight]}>
268
<Trans>Appeal "{strings.name}" label</Trans>
269
</Text>
270
<Text style={[a.text_md, a.leading_snug]}>
···
67
/>
68
) : (
69
<>
70
+
<Text style={[a.text_2xl, a.font_heavy, a.pb_xs, a.leading_tight]}>
71
{isAccount ? (
72
<Trans>Labels on your account</Trans>
73
) : (
···
134
]}>
135
<View style={[a.p_md, a.gap_sm, a.flex_row]}>
136
<View style={[a.flex_1, a.gap_xs]}>
137
+
<Text emoji style={[a.font_bold, a.text_md]}>
138
{strings.name}
139
</Text>
140
<Text emoji style={[t.atoms.text_contrast_medium, a.leading_snug]}>
···
264
return (
265
<>
266
<View>
267
+
<Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
268
<Trans>Appeal "{strings.name}" label</Trans>
269
</Text>
270
<Text style={[a.text_md, a.leading_snug]}>
+1
-1
src/components/moderation/ModerationDetailsDialog.tsx
+1
-1
src/components/moderation/ModerationDetailsDialog.tsx
+6
-6
src/components/moderation/ReportDialog/index.tsx
+6
-6
src/components/moderation/ReportDialog/index.tsx
···
69
const {_} = useLingui()
70
return (
71
<Dialog.ScrollableInner label={_(msg`Report dialog`)}>
72
-
<Text style={[a.font_bold, a.text_xl, a.leading_snug, a.pb_xs]}>
73
<Trans>Invalid report subject</Trans>
74
</Text>
75
<Text style={[a.text_md, a.leading_snug]}>
···
393
<Text style={[a.leading_snug, a.pb_xs]}>
394
<Trans>
395
Your report will be sent to{' '}
396
-
<Text style={[a.font_semi_bold, a.leading_snug]}>
397
{state.selectedLabeler?.creator.displayName}
398
</Text>
399
.
···
529
) : (
530
<Text
531
style={[
532
-
a.font_bold,
533
a.text_center,
534
t.atoms.text,
535
{
···
552
<Text
553
style={[
554
a.flex_1,
555
-
a.font_bold,
556
a.text_lg,
557
a.leading_snug,
558
active ? t.atoms.text : t.atoms.text_contrast_medium,
···
598
? [t.atoms.border_contrast_high]
599
: [t.atoms.border_contrast_low],
600
]}>
601
-
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
602
{option.title}
603
</Text>
604
<Text
···
670
avatar={labeler.creator.avatar}
671
/>
672
<View style={[a.flex_1]}>
673
-
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
674
{title}
675
</Text>
676
<Text
···
69
const {_} = useLingui()
70
return (
71
<Dialog.ScrollableInner label={_(msg`Report dialog`)}>
72
+
<Text style={[a.font_heavy, a.text_xl, a.leading_snug, a.pb_xs]}>
73
<Trans>Invalid report subject</Trans>
74
</Text>
75
<Text style={[a.text_md, a.leading_snug]}>
···
393
<Text style={[a.leading_snug, a.pb_xs]}>
394
<Trans>
395
Your report will be sent to{' '}
396
+
<Text style={[a.font_bold, a.leading_snug]}>
397
{state.selectedLabeler?.creator.displayName}
398
</Text>
399
.
···
529
) : (
530
<Text
531
style={[
532
+
a.font_heavy,
533
a.text_center,
534
t.atoms.text,
535
{
···
552
<Text
553
style={[
554
a.flex_1,
555
+
a.font_heavy,
556
a.text_lg,
557
a.leading_snug,
558
active ? t.atoms.text : t.atoms.text_contrast_medium,
···
598
? [t.atoms.border_contrast_high]
599
: [t.atoms.border_contrast_low],
600
]}>
601
+
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
602
{option.title}
603
</Text>
604
<Text
···
670
avatar={labeler.creator.avatar}
671
/>
672
<View style={[a.flex_1]}>
673
+
<Text style={[a.text_md, a.font_bold, a.leading_snug]}>
674
{title}
675
</Text>
676
<Text
+2
-8
src/components/moderation/ScreenHider.tsx
+2
-8
src/components/moderation/ScreenHider.tsx
···
86
</View>
87
</View>
88
<Text
89
-
style={[
90
-
a.text_4xl,
91
-
a.font_semi_bold,
92
-
a.text_center,
93
-
a.mb_md,
94
-
t.atoms.text,
95
-
]}>
96
{isNoPwi ? (
97
<Trans>Sign-in Required</Trans>
98
) : (
···
118
<Text
119
style={[
120
a.text_lg,
121
-
a.font_semi_bold,
122
a.leading_snug,
123
t.atoms.text,
124
a.ml_xs,
+2
-2
src/components/verification/VerificationsDialog.tsx
+2
-2
src/components/verification/VerificationsDialog.tsx
···
79
gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
80
]}>
81
<View style={[a.gap_sm, a.pb_lg]}>
82
-
<Text style={[a.text_2xl, a.font_semi_bold, a.pr_4xl, a.leading_tight]}>
83
{label}
84
</Text>
85
<Text style={[a.text_md, a.leading_snug]}>
···
206
<ProfileCard.AvatarPlaceholder />
207
<View style={[a.flex_1]}>
208
<Text
209
-
style={[a.text_md, a.font_semi_bold, a.leading_snug]}
210
numberOfLines={1}>
211
<Trans>Unknown verifier</Trans>
212
</Text>
···
79
gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
80
]}>
81
<View style={[a.gap_sm, a.pb_lg]}>
82
+
<Text style={[a.text_2xl, a.font_bold, a.pr_4xl, a.leading_tight]}>
83
{label}
84
</Text>
85
<Text style={[a.text_md, a.leading_snug]}>
···
206
<ProfileCard.AvatarPlaceholder />
207
<View style={[a.flex_1]}>
208
<Text
209
+
style={[a.text_md, a.font_bold, a.leading_snug]}
210
numberOfLines={1}>
211
<Trans>Unknown verifier</Trans>
212
</Text>
+1
-2
src/components/verification/VerifierDialog.tsx
+1
-2
src/components/verification/VerifierDialog.tsx
+1
-1
src/lib/ThemeContext.tsx
+1
-1
src/lib/ThemeContext.tsx
···
1
import {type ReactNode} from 'react'
2
import {createContext, useContext} from 'react'
3
import {type TextStyle, type ViewStyle} from 'react-native'
4
-
import {type ThemeName} from '@bsky.app/alf'
5
6
import {darkTheme, defaultTheme, dimTheme} from './themes'
7
8
export type ColorScheme = 'light' | 'dark'
···
1
import {type ReactNode} from 'react'
2
import {createContext, useContext} from 'react'
3
import {type TextStyle, type ViewStyle} from 'react-native'
4
5
+
import {type ThemeName} from '#/alf/types'
6
import {darkTheme, defaultTheme, dimTheme} from './themes'
7
8
export type ColorScheme = 'light' | 'dark'
+27
-27
src/lib/themes.ts
+27
-27
src/lib/themes.ts
···
101
'2xl-medium': {
102
fontSize: 18,
103
letterSpacing: tokens.TRACKING,
104
-
fontWeight: fontWeight.semiBold,
105
},
106
'2xl-bold': {
107
fontSize: 18,
108
letterSpacing: tokens.TRACKING,
109
-
fontWeight: fontWeight.semiBold,
110
},
111
'2xl-heavy': {
112
fontSize: 18,
113
letterSpacing: tokens.TRACKING,
114
-
fontWeight: fontWeight.bold,
115
},
116
'xl-thin': {
117
fontSize: 17,
···
126
'xl-medium': {
127
fontSize: 17,
128
letterSpacing: tokens.TRACKING,
129
-
fontWeight: fontWeight.semiBold,
130
},
131
'xl-bold': {
132
fontSize: 17,
133
letterSpacing: tokens.TRACKING,
134
-
fontWeight: fontWeight.semiBold,
135
},
136
'xl-heavy': {
137
fontSize: 17,
138
letterSpacing: tokens.TRACKING,
139
-
fontWeight: fontWeight.bold,
140
},
141
'lg-thin': {
142
fontSize: 16,
···
151
'lg-medium': {
152
fontSize: 16,
153
letterSpacing: tokens.TRACKING,
154
-
fontWeight: fontWeight.semiBold,
155
},
156
'lg-bold': {
157
fontSize: 16,
158
letterSpacing: tokens.TRACKING,
159
-
fontWeight: fontWeight.semiBold,
160
},
161
'lg-heavy': {
162
fontSize: 16,
163
letterSpacing: tokens.TRACKING,
164
-
fontWeight: fontWeight.bold,
165
},
166
'md-thin': {
167
fontSize: 15,
···
176
'md-medium': {
177
fontSize: 15,
178
letterSpacing: tokens.TRACKING,
179
-
fontWeight: fontWeight.semiBold,
180
},
181
'md-bold': {
182
fontSize: 15,
183
letterSpacing: tokens.TRACKING,
184
-
fontWeight: fontWeight.semiBold,
185
},
186
'md-heavy': {
187
fontSize: 15,
188
letterSpacing: tokens.TRACKING,
189
-
fontWeight: fontWeight.bold,
190
},
191
'sm-thin': {
192
fontSize: 14,
···
201
'sm-medium': {
202
fontSize: 14,
203
letterSpacing: tokens.TRACKING,
204
-
fontWeight: fontWeight.semiBold,
205
},
206
'sm-bold': {
207
fontSize: 14,
208
letterSpacing: tokens.TRACKING,
209
-
fontWeight: fontWeight.semiBold,
210
},
211
'sm-heavy': {
212
fontSize: 14,
213
letterSpacing: tokens.TRACKING,
214
-
fontWeight: fontWeight.bold,
215
},
216
'xs-thin': {
217
fontSize: 13,
···
226
'xs-medium': {
227
fontSize: 13,
228
letterSpacing: tokens.TRACKING,
229
-
fontWeight: fontWeight.semiBold,
230
},
231
'xs-bold': {
232
fontSize: 13,
233
letterSpacing: tokens.TRACKING,
234
-
fontWeight: fontWeight.semiBold,
235
},
236
'xs-heavy': {
237
fontSize: 13,
238
letterSpacing: tokens.TRACKING,
239
-
fontWeight: fontWeight.bold,
240
},
241
242
'title-2xl': {
243
fontSize: 34,
244
letterSpacing: tokens.TRACKING,
245
-
fontWeight: fontWeight.semiBold,
246
},
247
'title-xl': {
248
fontSize: 28,
249
letterSpacing: tokens.TRACKING,
250
-
fontWeight: fontWeight.semiBold,
251
},
252
'title-lg': {
253
fontSize: 22,
254
-
fontWeight: fontWeight.semiBold,
255
},
256
title: {
257
-
fontWeight: fontWeight.semiBold,
258
fontSize: 20,
259
letterSpacing: tokens.TRACKING,
260
},
261
'title-sm': {
262
-
fontWeight: fontWeight.semiBold,
263
fontSize: 17,
264
letterSpacing: tokens.TRACKING,
265
},
···
274
fontWeight: fontWeight.normal,
275
},
276
'button-lg': {
277
-
fontWeight: fontWeight.semiBold,
278
fontSize: 18,
279
letterSpacing: tokens.TRACKING,
280
},
281
button: {
282
-
fontWeight: fontWeight.semiBold,
283
fontSize: 14,
284
letterSpacing: tokens.TRACKING,
285
},
···
296
palette: {
297
...defaultTheme.palette,
298
default: {
299
-
background: darkPalette.contrast_0,
300
backgroundLight: darkPalette.contrast_25,
301
text: darkPalette.white,
302
textLight: darkPalette.contrast_600,
···
345
...darkTheme.palette,
346
default: {
347
...darkTheme.palette.default,
348
-
background: dimPalette.contrast_0,
349
backgroundLight: dimPalette.contrast_25,
350
text: dimPalette.white,
351
textLight: dimPalette.contrast_700,
···
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,
···
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,
···
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,
···
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,
···
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,
···
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
},
···
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
},
···
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,
···
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,
+1
-1
src/screens/Home/NoFeedsPinned.tsx
+1
-1
src/screens/Home/NoFeedsPinned.tsx
+2
-2
src/screens/List/ListHiddenScreen.tsx
+2
-2
src/screens/List/ListHiddenScreen.tsx
···
122
width={42}
123
/>
124
<View style={[a.gap_sm, a.align_center]}>
125
-
<Text style={[a.font_semi_bold, a.text_3xl]}>
126
{list.creator.viewer?.blocking || list.creator.viewer?.blockedBy ? (
127
<Trans>Creator has been blocked</Trans>
128
) : (
···
150
) : (
151
<Trans>
152
This list – created by{' '}
153
-
<Text style={[a.font_semi_bold]}>
154
{sanitizeHandle(list.creator.handle, '@')}
155
</Text>{' '}
156
– contains possible violations of Bluesky's community guidelines
···
122
width={42}
123
/>
124
<View style={[a.gap_sm, a.align_center]}>
125
+
<Text style={[a.font_bold, a.text_3xl]}>
126
{list.creator.viewer?.blocking || list.creator.viewer?.blockedBy ? (
127
<Trans>Creator has been blocked</Trans>
128
) : (
···
150
) : (
151
<Trans>
152
This list – created by{' '}
153
+
<Text style={[a.font_bold]}>
154
{sanitizeHandle(list.creator.handle, '@')}
155
</Text>{' '}
156
– contains possible violations of Bluesky's community guidelines
+1
-1
src/screens/Login/FormContainer.tsx
+1
-1
src/screens/Login/FormContainer.tsx
+1
-1
src/screens/Login/PasswordUpdatedForm.tsx
+1
-1
src/screens/Login/PasswordUpdatedForm.tsx
+2
-4
src/screens/Messages/ChatList.tsx
+2
-4
src/screens/Messages/ChatList.tsx
···
265
width={48}
266
fill={t.atoms.text_contrast_low.color}
267
/>
268
-
<Text
269
-
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
270
<Trans>Whoops!</Trans>
271
</Text>
272
<Text
···
299
<>
300
<View style={[a.pt_3xl, a.align_center]}>
301
<MessageIcon width={48} fill={t.palette.primary_500} />
302
-
<Text
303
-
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
304
<Trans>Nothing here</Trans>
305
</Text>
306
<Text
···
265
width={48}
266
fill={t.atoms.text_contrast_low.color}
267
/>
268
+
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
269
<Trans>Whoops!</Trans>
270
</Text>
271
<Text
···
298
<>
299
<View style={[a.pt_3xl, a.align_center]}>
300
<MessageIcon width={48} fill={t.palette.primary_500} />
301
+
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
302
<Trans>Nothing here</Trans>
303
</Text>
304
<Text
+2
-4
src/screens/Messages/Inbox.tsx
+2
-4
src/screens/Messages/Inbox.tsx
···
193
width={48}
194
fill={t.atoms.text_contrast_low.color}
195
/>
196
-
<Text
197
-
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
198
<Trans>Whoops!</Trans>
199
</Text>
200
<Text
···
226
<>
227
<View style={[a.pt_3xl, a.align_center]}>
228
<MessageIcon width={48} fill={t.palette.primary_500} />
229
-
<Text
230
-
style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_semi_bold]}>
231
<Trans comment="Title message shown in chat requests inbox when it's empty">
232
Inbox zero!
233
</Trans>
···
193
width={48}
194
fill={t.atoms.text_contrast_low.color}
195
/>
196
+
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
197
<Trans>Whoops!</Trans>
198
</Text>
199
<Text
···
225
<>
226
<View style={[a.pt_3xl, a.align_center]}>
227
<MessageIcon width={48} fill={t.palette.primary_500} />
228
+
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
229
<Trans comment="Title message shown in chat requests inbox when it's empty">
230
Inbox zero!
231
</Trans>
+2
-2
src/screens/Messages/Settings.tsx
+2
-2
src/screens/Messages/Settings.tsx
···
71
</Layout.Header.Outer>
72
<Layout.Content>
73
<View style={[a.p_lg, a.gap_md]}>
74
-
<Text style={[a.text_lg, a.font_semi_bold]}>
75
<Trans>Allow new messages from</Trans>
76
</Text>
77
<Toggle.Group
···
121
{isNative && (
122
<>
123
<Divider style={a.my_md} />
124
-
<Text style={[a.text_lg, a.font_semi_bold]}>
125
<Trans>Notification Sounds</Trans>
126
</Text>
127
<Toggle.Group
···
71
</Layout.Header.Outer>
72
<Layout.Content>
73
<View style={[a.p_lg, a.gap_md]}>
74
+
<Text style={[a.text_lg, a.font_bold]}>
75
<Trans>Allow new messages from</Trans>
76
</Text>
77
<Toggle.Group
···
121
{isNative && (
122
<>
123
<Divider style={a.my_md} />
124
+
<Text style={[a.text_lg, a.font_bold]}>
125
<Trans>Notification Sounds</Trans>
126
</Text>
127
<Toggle.Group
+2
-7
src/screens/Messages/components/ChatDisabled.tsx
+2
-7
src/screens/Messages/components/ChatDisabled.tsx
···
22
<View
23
style={[a.align_start, a.p_xl, a.rounded_md, t.atoms.bg_contrast_25]}>
24
<Text
25
-
style={[
26
-
a.text_md,
27
-
a.font_semi_bold,
28
-
a.pb_sm,
29
-
t.atoms.text_contrast_high,
30
-
]}>
31
<Trans>Your chats have been disabled</Trans>
32
</Text>
33
<Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
···
109
110
return (
111
<Dialog.ScrollableInner label={_(msg`Appeal this decision`)}>
112
-
<Text style={[a.text_2xl, a.font_semi_bold, a.pb_xs, a.leading_tight]}>
113
<Trans>Appeal this decision</Trans>
114
</Text>
115
<Text style={[a.text_md, a.leading_snug]}>
···
22
<View
23
style={[a.align_start, a.p_xl, a.rounded_md, t.atoms.bg_contrast_25]}>
24
<Text
25
+
style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
26
<Trans>Your chats have been disabled</Trans>
27
</Text>
28
<Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
···
104
105
return (
106
<Dialog.ScrollableInner label={_(msg`Appeal this decision`)}>
107
+
<Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
108
<Trans>Appeal this decision</Trans>
109
</Text>
110
<Text style={[a.text_md, a.leading_snug]}>
+2
-2
src/screens/Messages/components/ChatListItem.tsx
+2
-2
src/screens/Messages/components/ChatListItem.tsx
···
397
style={[
398
a.text_md,
399
t.atoms.text,
400
-
a.font_semi_bold,
401
{lineHeight: 21},
402
isDimStyle && t.atoms.text_contrast_medium,
403
]}>
···
461
style={[
462
a.text_sm,
463
a.leading_snug,
464
-
hasUnread ? a.font_semi_bold : t.atoms.text_contrast_high,
465
isDimStyle && t.atoms.text_contrast_medium,
466
]}>
467
{lastMessage}
···
397
style={[
398
a.text_md,
399
t.atoms.text,
400
+
a.font_bold,
401
{lineHeight: 21},
402
isDimStyle && t.atoms.text_contrast_medium,
403
]}>
···
461
style={[
462
a.text_sm,
463
a.leading_snug,
464
+
hasUnread ? a.font_bold : t.atoms.text_contrast_high,
465
isDimStyle && t.atoms.text_contrast_medium,
466
]}>
467
{lastMessage}
+1
-1
src/screens/Messages/components/InboxPreview.tsx
+1
-1
src/screens/Messages/components/InboxPreview.tsx
+1
-1
src/screens/Messages/components/RequestListItem.tsx
+1
-1
src/screens/Messages/components/RequestListItem.tsx
···
38
{/* spacer, since you can't nest pressables */}
39
<View style={[a.pt_md, a.pb_xs, a.w_full, {opacity: 0}]} aria-hidden>
40
{/* Placeholder text so that it responds to the font height */}
41
-
<Text style={[a.text_xs, a.leading_tight, a.font_semi_bold]}>
42
<Trans comment="Accept a chat request">Accept Request</Trans>
43
</Text>
44
</View>
···
38
{/* spacer, since you can't nest pressables */}
39
<View style={[a.pt_md, a.pb_xs, a.w_full, {opacity: 0}]} aria-hidden>
40
{/* Placeholder text so that it responds to the font height */}
41
+
<Text style={[a.text_xs, a.leading_tight, a.font_bold]}>
42
<Trans comment="Accept a chat request">Accept Request</Trans>
43
</Text>
44
</View>
+6
-12
src/screens/Moderation/index.tsx
+6
-12
src/screens/Moderation/index.tsx
···
142
]}>
143
<View style={[a.flex_row, a.align_center, a.gap_md]}>
144
<Icon size="md" style={[t.atoms.text_contrast_medium]} />
145
-
<Text style={[a.text_sm, a.font_semi_bold]}>{title}</Text>
146
</View>
147
<ChevronRight
148
size="sm"
···
221
)}
222
223
<Text
224
-
style={[
225
-
a.text_md,
226
-
a.font_semi_bold,
227
-
a.pb_md,
228
-
t.atoms.text_contrast_high,
229
-
]}>
230
<Trans>Moderation tools</Trans>
231
</Text>
232
···
335
a.pt_2xl,
336
a.pb_md,
337
a.text_md,
338
-
a.font_semi_bold,
339
t.atoms.text_contrast_high,
340
]}>
341
<Trans>Content filters</Trans>
···
369
a.pt_2xl,
370
a.pb_md,
371
a.text_md,
372
-
a.font_semi_bold,
373
t.atoms.text_contrast_high,
374
]}>
375
<Trans>Content filters</Trans>
···
401
a.justify_between,
402
disabledOnIOS && {opacity: 0.5},
403
]}>
404
-
<Text
405
-
style={[a.font_semi_bold, t.atoms.text_contrast_high]}>
406
<Trans>Enable adult content</Trans>
407
</Text>
408
<Toggle.Item
···
471
<Text
472
style={[
473
a.text_md,
474
-
a.font_semi_bold,
475
a.pt_2xl,
476
a.pb_md,
477
t.atoms.text_contrast_high,
···
142
]}>
143
<View style={[a.flex_row, a.align_center, a.gap_md]}>
144
<Icon size="md" style={[t.atoms.text_contrast_medium]} />
145
+
<Text style={[a.text_sm, a.font_bold]}>{title}</Text>
146
</View>
147
<ChevronRight
148
size="sm"
···
221
)}
222
223
<Text
224
+
style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}>
225
<Trans>Moderation tools</Trans>
226
</Text>
227
···
330
a.pt_2xl,
331
a.pb_md,
332
a.text_md,
333
+
a.font_bold,
334
t.atoms.text_contrast_high,
335
]}>
336
<Trans>Content filters</Trans>
···
364
a.pt_2xl,
365
a.pb_md,
366
a.text_md,
367
+
a.font_bold,
368
t.atoms.text_contrast_high,
369
]}>
370
<Trans>Content filters</Trans>
···
396
a.justify_between,
397
disabledOnIOS && {opacity: 0.5},
398
]}>
399
+
<Text style={[a.font_bold, t.atoms.text_contrast_high]}>
400
<Trans>Enable adult content</Trans>
401
</Text>
402
<Toggle.Item
···
465
<Text
466
style={[
467
a.text_md,
468
+
a.font_bold,
469
a.pt_2xl,
470
a.pb_md,
471
t.atoms.text_contrast_high,
+5
-2
src/screens/Onboarding/Layout.tsx
+5
-2
src/screens/Onboarding/Layout.tsx
···
17
useTheme,
18
web,
19
} from '#/alf'
20
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
21
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
22
import {HEADER_SLOT_SIZE} from '#/components/Layout'
···
233
style={[
234
a.pb_sm,
235
a.text_4xl,
236
-
a.font_semi_bold,
237
-
a.leading_tight,
238
flatten(style),
239
]}>
240
{children}
···
17
useTheme,
18
web,
19
} from '#/alf'
20
+
import {leading} from '#/alf/typography'
21
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
22
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
23
import {HEADER_SLOT_SIZE} from '#/components/Layout'
···
234
style={[
235
a.pb_sm,
236
a.text_4xl,
237
+
a.font_bold,
238
+
{
239
+
lineHeight: leading(a.text_4xl, a.leading_tight),
240
+
},
241
flatten(style),
242
]}>
243
{children}
+4
-4
src/screens/Onboarding/StepFinished.tsx
+4
-4
src/screens/Onboarding/StepFinished.tsx
···
432
</View>
433
434
<View style={[a.gap_sm]}>
435
-
<Text style={[a.font_bold, a.text_3xl, a.text_center]}>
436
{title}
437
</Text>
438
<Text
···
537
<View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
538
<IconCircle icon={Growth} size="lg" style={{width: 48, height: 48}} />
539
<View style={[a.flex_1, a.gap_xs]}>
540
-
<Text style={[a.font_semi_bold, a.text_lg]}>
541
<Trans>Public</Trans>
542
</Text>
543
<Text
···
551
<View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
552
<IconCircle icon={News} size="lg" style={{width: 48, height: 48}} />
553
<View style={[a.flex_1, a.gap_xs]}>
554
-
<Text style={[a.font_semi_bold, a.text_lg]}>
555
<Trans>Open</Trans>
556
</Text>
557
<Text
···
567
style={{width: 48, height: 48}}
568
/>
569
<View style={[a.flex_1, a.gap_xs]}>
570
-
<Text style={[a.font_semi_bold, a.text_lg]}>
571
<Trans>Flexible</Trans>
572
</Text>
573
<Text
···
432
</View>
433
434
<View style={[a.gap_sm]}>
435
+
<Text style={[a.font_heavy, a.text_3xl, a.text_center]}>
436
{title}
437
</Text>
438
<Text
···
537
<View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
538
<IconCircle icon={Growth} size="lg" style={{width: 48, height: 48}} />
539
<View style={[a.flex_1, a.gap_xs]}>
540
+
<Text style={[a.font_bold, a.text_lg]}>
541
<Trans>Public</Trans>
542
</Text>
543
<Text
···
551
<View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
552
<IconCircle icon={News} size="lg" style={{width: 48, height: 48}} />
553
<View style={[a.flex_1, a.gap_xs]}>
554
+
<Text style={[a.font_bold, a.text_lg]}>
555
<Trans>Open</Trans>
556
</Text>
557
<Text
···
567
style={{width: 48, height: 48}}
568
/>
569
<View style={[a.flex_1, a.gap_xs]}>
570
+
<Text style={[a.font_bold, a.text_lg]}>
571
<Trans>Flexible</Trans>
572
</Text>
573
<Text
+1
-1
src/screens/Onboarding/StepInterests/InterestButton.tsx
+1
-1
src/screens/Onboarding/StepInterests/InterestButton.tsx
+1
-1
src/screens/Onboarding/StepInterests/index.tsx
+1
-1
src/screens/Onboarding/StepInterests/index.tsx
+1
-1
src/screens/Onboarding/StepSuggestedAccounts/index.tsx
+1
-1
src/screens/Onboarding/StepSuggestedAccounts/index.tsx
+1
-6
src/screens/PostThread/components/ThreadError.tsx
+1
-6
src/screens/PostThread/components/ThreadError.tsx
+10
-16
src/screens/PostThread/components/ThreadItemAnchor.tsx
+10
-16
src/screens/PostThread/components/ThreadItemAnchor.tsx
···
129
]}>
130
<TrashIcon style={[t.atoms.text_contrast_medium]} />
131
</View>
132
-
<Text
133
-
style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}>
134
<Trans>Post has been deleted</Trans>
135
</Text>
136
</View>
···
344
style={[
345
a.flex_shrink,
346
a.text_lg,
347
-
a.font_semi_bold,
348
a.leading_snug,
349
]}
350
numberOfLines={1}>
···
440
<Text
441
testID="repostCount-expanded"
442
style={[a.text_md, t.atoms.text_contrast_medium]}>
443
-
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
444
{formatPostStatCount(post.repostCount)}
445
</Text>{' '}
446
<Plural
···
458
<Text
459
testID="quoteCount-expanded"
460
style={[a.text_md, t.atoms.text_contrast_medium]}>
461
-
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
462
{formatPostStatCount(post.quoteCount)}
463
</Text>{' '}
464
<Plural
···
474
<Text
475
testID="likeCount-expanded"
476
style={[a.text_md, t.atoms.text_contrast_medium]}>
477
-
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
478
{formatPostStatCount(post.likeCount)}
479
</Text>{' '}
480
<Plural value={post.likeCount} one="like" other="likes" />
···
485
<Text
486
testID="bookmarkCount-expanded"
487
style={[a.text_md, t.atoms.text_contrast_medium]}>
488
-
<Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
489
{formatPostStatCount(post.bookmarkCount)}
490
</Text>{' '}
491
<Plural value={post.bookmarkCount} one="save" other="saves" />
···
653
<Text
654
style={[
655
a.text_xs,
656
-
a.font_semi_bold,
657
a.leading_tight,
658
t.atoms.text_contrast_medium,
659
]}>
···
670
<Prompt.DescriptionText>
671
<Trans>
672
This post claims to have been created on{' '}
673
-
<RNText style={[a.font_semi_bold]}>
674
-
{niceDate(i18n, createdAt)}
675
-
</RNText>
676
-
, but was first seen by Bluesky on{' '}
677
-
<RNText style={[a.font_semi_bold]}>
678
-
{niceDate(i18n, indexedAt)}
679
-
</RNText>
680
-
.
681
</Trans>
682
</Prompt.DescriptionText>
683
<Text
···
129
]}>
130
<TrashIcon style={[t.atoms.text_contrast_medium]} />
131
</View>
132
+
<Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
133
<Trans>Post has been deleted</Trans>
134
</Text>
135
</View>
···
343
style={[
344
a.flex_shrink,
345
a.text_lg,
346
+
a.font_bold,
347
a.leading_snug,
348
]}
349
numberOfLines={1}>
···
439
<Text
440
testID="repostCount-expanded"
441
style={[a.text_md, t.atoms.text_contrast_medium]}>
442
+
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
443
{formatPostStatCount(post.repostCount)}
444
</Text>{' '}
445
<Plural
···
457
<Text
458
testID="quoteCount-expanded"
459
style={[a.text_md, t.atoms.text_contrast_medium]}>
460
+
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
461
{formatPostStatCount(post.quoteCount)}
462
</Text>{' '}
463
<Plural
···
473
<Text
474
testID="likeCount-expanded"
475
style={[a.text_md, t.atoms.text_contrast_medium]}>
476
+
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
477
{formatPostStatCount(post.likeCount)}
478
</Text>{' '}
479
<Plural value={post.likeCount} one="like" other="likes" />
···
484
<Text
485
testID="bookmarkCount-expanded"
486
style={[a.text_md, t.atoms.text_contrast_medium]}>
487
+
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
488
{formatPostStatCount(post.bookmarkCount)}
489
</Text>{' '}
490
<Plural value={post.bookmarkCount} one="save" other="saves" />
···
652
<Text
653
style={[
654
a.text_xs,
655
+
a.font_bold,
656
a.leading_tight,
657
t.atoms.text_contrast_medium,
658
]}>
···
669
<Prompt.DescriptionText>
670
<Trans>
671
This post claims to have been created on{' '}
672
+
<RNText style={[a.font_bold]}>{niceDate(i18n, createdAt)}</RNText>,
673
+
but was first seen by Bluesky on{' '}
674
+
<RNText style={[a.font_bold]}>{niceDate(i18n, indexedAt)}</RNText>.
675
</Trans>
676
</Prompt.DescriptionText>
677
<Text
+1
-2
src/screens/PostThread/components/ThreadItemPost.tsx
+1
-2
src/screens/PostThread/components/ThreadItemPost.tsx
+1
-2
src/screens/PostThread/components/ThreadItemPostTombstone.tsx
+1
-2
src/screens/PostThread/components/ThreadItemPostTombstone.tsx
+1
-1
src/screens/Profile/ErrorState.tsx
+1
-1
src/screens/Profile/ErrorState.tsx
+1
-1
src/screens/Profile/Header/DisplayName.tsx
+1
-1
src/screens/Profile/Header/DisplayName.tsx
+2
-2
src/screens/Profile/Header/EditProfileDialog.tsx
+2
-2
src/screens/Profile/Header/EditProfileDialog.tsx
+3
-3
src/screens/Profile/Header/Metrics.tsx
+3
-3
src/screens/Profile/Header/Metrics.tsx
···
37
style={[a.flex_row, t.atoms.text]}
38
to={makeProfileLink(profile, 'followers')}
39
label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
40
-
<Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
41
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
42
{pluralizedFollowers}
43
</Text>
···
47
style={[a.flex_row, t.atoms.text]}
48
to={makeProfileLink(profile, 'follows')}
49
label={_(msg`${profile.followsCount || 0} following`)}>
50
-
<Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
51
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
52
{pluralizedFollowings}
53
</Text>
54
</InlineLinkText>
55
-
<Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
56
{formatCount(i18n, profile.postsCount || 0)}{' '}
57
<Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
58
{plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
···
37
style={[a.flex_row, t.atoms.text]}
38
to={makeProfileLink(profile, 'followers')}
39
label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
40
+
<Text style={[a.font_bold, a.text_md]}>{followers} </Text>
41
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
42
{pluralizedFollowers}
43
</Text>
···
47
style={[a.flex_row, t.atoms.text]}
48
to={makeProfileLink(profile, 'follows')}
49
label={_(msg`${profile.followsCount || 0} following`)}>
50
+
<Text style={[a.font_bold, a.text_md]}>{following} </Text>
51
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
52
{pluralizedFollowings}
53
</Text>
54
</InlineLinkText>
55
+
<Text style={[a.font_bold, t.atoms.text, a.text_md]}>
56
{formatCount(i18n, profile.postsCount || 0)}{' '}
57
<Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
58
{plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
+2
-2
src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+2
-2
src/screens/Profile/Header/ProfileHeaderLabeler.tsx
···
225
? t.palette.contrast_700
226
: t.palette.white,
227
},
228
-
a.font_semi_bold,
229
a.text_center,
230
a.leading_tight,
231
]}>
···
297
{({hovered, focused, pressed}) => (
298
<Text
299
style={[
300
-
a.font_semi_bold,
301
a.text_sm,
302
t.atoms.text_contrast_medium,
303
(hovered || focused || pressed) &&
···
225
? t.palette.contrast_700
226
: t.palette.white,
227
},
228
+
a.font_bold,
229
a.text_center,
230
a.leading_tight,
231
]}>
···
297
{({hovered, focused, pressed}) => (
298
<Text
299
style={[
300
+
a.font_bold,
301
a.text_sm,
302
t.atoms.text_contrast_medium,
303
(hovered || focused || pressed) &&
+1
-1
src/screens/Profile/Header/ProfileHeaderStandard.tsx
+1
-1
src/screens/Profile/Header/ProfileHeaderStandard.tsx
+2
-2
src/screens/Profile/components/ProfileFeedHeader.tsx
+2
-2
src/screens/Profile/components/ProfileFeedHeader.tsx
+1
-1
src/screens/ProfileList/components/ErrorScreen.tsx
+1
-1
src/screens/ProfileList/components/ErrorScreen.tsx
+1
-1
src/screens/Search/Explore.tsx
+1
-1
src/screens/Search/Explore.tsx
+1
-1
src/screens/Search/Shell.tsx
+1
-1
src/screens/Search/Shell.tsx
+1
-5
src/screens/Search/components/ModuleHeader.tsx
+1
-5
src/screens/Search/components/ModuleHeader.tsx
+1
-1
src/screens/Search/components/SearchHistory.tsx
+1
-1
src/screens/Search/components/SearchHistory.tsx
+2
-2
src/screens/Search/components/StarterPackCard.tsx
+2
-2
src/screens/Search/components/StarterPackCard.tsx
+1
-1
src/screens/Search/modules/ExploreInterestsCard.tsx
+1
-1
src/screens/Search/modules/ExploreInterestsCard.tsx
+1
-1
src/screens/Search/modules/ExploreRecommendations.tsx
+1
-1
src/screens/Search/modules/ExploreRecommendations.tsx
+2
-2
src/screens/Search/modules/ExploreTrendingTopics.tsx
+2
-2
src/screens/Search/modules/ExploreTrendingTopics.tsx
+1
-1
src/screens/Settings/AccountSettings.tsx
+1
-1
src/screens/Settings/AccountSettings.tsx
+2
-7
src/screens/Settings/AppIconSettings/index.tsx
+2
-7
src/screens/Settings/AppIconSettings/index.tsx
···
93
a.text_md,
94
a.mt_xl,
95
a.mb_sm,
96
-
a.font_semi_bold,
97
t.atoms.text_contrast_medium,
98
]}>
99
<Trans>Bluesky+</Trans>
···
201
const t = useTheme()
202
return (
203
<Text
204
-
style={[
205
-
a.text_md,
206
-
a.font_semi_bold,
207
-
a.flex_1,
208
-
t.atoms.text_contrast_medium,
209
-
]}
210
emoji>
211
{children}
212
</Text>
+2
-5
src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx
+2
-5
src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx
···
140
Enable notifications for an account by visiting their
141
profile and pressing the{' '}
142
<RNText
143
-
style={[
144
-
a.font_semi_bold,
145
-
t.atoms.text_contrast_high,
146
-
]}>
147
bell icon
148
</RNText>{' '}
149
<BellRingingFilledIcon
···
160
<InlineLinkText
161
label={_(msg`Privacy and Security settings`)}
162
to={{screen: 'ActivityPrivacySettings'}}
163
-
style={[a.font_semi_bold]}>
164
Settings → Privacy and Security
165
</InlineLinkText>
166
.
···
140
Enable notifications for an account by visiting their
141
profile and pressing the{' '}
142
<RNText
143
+
style={[a.font_bold, t.atoms.text_contrast_high]}>
144
bell icon
145
</RNText>{' '}
146
<BellRingingFilledIcon
···
157
<InlineLinkText
158
label={_(msg`Privacy and Security settings`)}
159
to={{screen: 'ActivityPrivacySettings'}}
160
+
style={[a.font_bold]}>
161
Settings → Privacy and Security
162
</InlineLinkText>
163
.
+1
-1
src/screens/Settings/NotificationSettings/components/ItemTextWithSubtitle.tsx
+1
-1
src/screens/Settings/NotificationSettings/components/ItemTextWithSubtitle.tsx
+1
-1
src/screens/Settings/NotificationSettings/components/PreferenceControls.tsx
+1
-1
src/screens/Settings/NotificationSettings/components/PreferenceControls.tsx
+2
-2
src/screens/Settings/components/AddAppPasswordDialog.tsx
+2
-2
src/screens/Settings/components/AddAppPasswordDialog.tsx
···
107
style={[a.gap_lg]}
108
exiting={native(SlideOutLeft)}
109
key={0}>
110
-
<Text style={[a.text_2xl, a.font_semi_bold]}>
111
<Trans>Add App Password</Trans>
112
</Text>
113
<Text style={[a.text_md, a.leading_snug]}>
···
183
style={[a.gap_lg]}
184
entering={isWeb ? FadeIn.delay(200) : SlideInRight}
185
key={1}>
186
-
<Text style={[a.text_2xl, a.font_semi_bold]}>
187
<Trans>Here is your app password!</Trans>
188
</Text>
189
<Text style={[a.text_md, a.leading_snug]}>
···
107
style={[a.gap_lg]}
108
exiting={native(SlideOutLeft)}
109
key={0}>
110
+
<Text style={[a.text_2xl, a.font_bold]}>
111
<Trans>Add App Password</Trans>
112
</Text>
113
<Text style={[a.text_md, a.leading_snug]}>
···
183
style={[a.gap_lg]}
184
entering={isWeb ? FadeIn.delay(200) : SlideInRight}
185
key={1}>
186
+
<Text style={[a.text_2xl, a.font_bold]}>
187
<Trans>Here is your app password!</Trans>
188
</Text>
189
<Text style={[a.text_md, a.leading_snug]}>
+3
-3
src/screens/Settings/components/ChangeHandleDialog.tsx
+3
-3
src/screens/Settings/components/ChangeHandleDialog.tsx
···
244
<Text>
245
<Trans>
246
Your full handle will be{' '}
247
-
<Text style={[a.font_semi_bold]}>
248
@{createFullHandle(subdomain, host)}
249
</Text>
250
</Trans>
···
280
}),
281
)}
282
to="https://bsky.social/about/blog/4-28-2023-domain-handle-tutorial"
283
-
style={[a.font_semi_bold]}
284
disableMismatchWarning>
285
Learn more here.
286
</InlineLinkText>
···
522
<Admonition type="info" style={[a.mb_md]}>
523
<Trans>
524
Your current handle{' '}
525
-
<Text style={[a.font_semi_bold]}>
526
{sanitizeHandle(currentAccount?.handle || '', '@')}
527
</Text>{' '}
528
will automatically remain reserved for you. You can switch back to
···
244
<Text>
245
<Trans>
246
Your full handle will be{' '}
247
+
<Text style={[a.font_bold]}>
248
@{createFullHandle(subdomain, host)}
249
</Text>
250
</Trans>
···
280
}),
281
)}
282
to="https://bsky.social/about/blog/4-28-2023-domain-handle-tutorial"
283
+
style={[a.font_bold]}
284
disableMismatchWarning>
285
Learn more here.
286
</InlineLinkText>
···
522
<Admonition type="info" style={[a.mb_md]}>
523
<Trans>
524
Your current handle{' '}
525
+
<Text style={[a.font_bold]}>
526
{sanitizeHandle(currentAccount?.handle || '', '@')}
527
</Text>{' '}
528
will automatically remain reserved for you. You can switch back to
+1
-1
src/screens/Settings/components/ChangePasswordDialog.tsx
+1
-1
src/screens/Settings/components/ChangePasswordDialog.tsx
+1
-1
src/screens/Settings/components/CopyButton.tsx
+1
-1
src/screens/Settings/components/CopyButton.tsx
+1
-1
src/screens/Settings/components/DisableEmail2FADialog.tsx
+1
-1
src/screens/Settings/components/DisableEmail2FADialog.tsx
+1
-1
src/screens/Settings/components/ExportCarDialog.tsx
+1
-1
src/screens/Settings/components/ExportCarDialog.tsx
+3
-4
src/screens/Signup/index.tsx
+3
-4
src/screens/Signup/index.tsx
···
133
<Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
134
<LinearGradientBackground
135
style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
136
-
<Text style={[a.font_semi_bold, a.text_xl, {color: 'white'}]}>
137
{starterPack.record.name}
138
</Text>
139
<Text style={[{color: 'white'}]}>
···
164
!gtMobile && {paddingBottom: 100},
165
]}>
166
<View style={[a.gap_sm, a.pb_3xl]}>
167
-
<Text
168
-
style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
169
<Trans>
170
Step {state.activeStep + 1} of{' '}
171
{state.serviceDescription &&
···
174
: '3'}
175
</Trans>
176
</Text>
177
-
<Text style={[a.text_3xl, a.font_semi_bold]}>
178
{state.activeStep === SignupStep.INFO ? (
179
<Trans>Your account</Trans>
180
) : state.activeStep === SignupStep.HANDLE ? (
···
133
<Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
134
<LinearGradientBackground
135
style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
136
+
<Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
137
{starterPack.record.name}
138
</Text>
139
<Text style={[{color: 'white'}]}>
···
164
!gtMobile && {paddingBottom: 100},
165
]}>
166
<View style={[a.gap_sm, a.pb_3xl]}>
167
+
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
168
<Trans>
169
Step {state.activeStep + 1} of{' '}
170
{state.serviceDescription &&
···
173
: '3'}
174
</Trans>
175
</Text>
176
+
<Text style={[a.text_3xl, a.font_bold]}>
177
{state.activeStep === SignupStep.INFO ? (
178
<Trans>Your account</Trans>
179
) : state.activeStep === SignupStep.HANDLE ? (
+1
-1
src/view/com/auth/SplashScreen.tsx
+1
-1
src/view/com/auth/SplashScreen.tsx
+2
-1
src/view/com/util/images/AutoSizedImage.tsx
+2
-1
src/view/com/util/images/AutoSizedImage.tsx
+2
-2
src/view/screens/Feeds.tsx
+2
-2
src/view/screens/Feeds.tsx
···
709
<IconCircle icon={ListSparkle_Stroke2_Corner0_Rounded} size="lg" />
710
<View style={[a.flex_1, a.gap_xs]}>
711
<Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}>
712
-
<Trans>My Feeds </Trans>
713
</Text>
714
<Text style={[t.atoms.text_contrast_high]}>
715
<Trans>All the feeds you've saved, right in one place.</Trans>
···
735
/>
736
<View style={[a.flex_1, a.gap_sm]}>
737
<Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}>
738
-
<Trans>Discover New Feeds </Trans>
739
</Text>
740
<Text style={[t.atoms.text_contrast_high]}>
741
<Trans>
···
709
<IconCircle icon={ListSparkle_Stroke2_Corner0_Rounded} size="lg" />
710
<View style={[a.flex_1, a.gap_xs]}>
711
<Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}>
712
+
<Trans>My Feeds</Trans>
713
</Text>
714
<Text style={[t.atoms.text_contrast_high]}>
715
<Trans>All the feeds you've saved, right in one place.</Trans>
···
735
/>
736
<View style={[a.flex_1, a.gap_sm]}>
737
<Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}>
738
+
<Trans>Discover New Feeds</Trans>
739
</Text>
740
<Text style={[t.atoms.text_contrast_high]}>
741
<Trans>
-7
yarn.lock
-7
yarn.lock
···
3635
resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
3636
integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
3637
3638
-
"@bsky.app/alf@^0.1.2":
3639
-
version "0.1.2"
3640
-
resolved "https://registry.yarnpkg.com/@bsky.app/alf/-/alf-0.1.2.tgz#8e3b3cd0b27f1dfe359d99edd2afd7d123b7ab69"
3641
-
integrity sha512-lIidmkoHsqXwj07BY4fYIu/JyWGXRAGLfh65qhGzWpXLTK1DGyoQUjz5CwsqTDSQWpCfBC7eEaOtYjjv9cAjSQ==
3642
-
dependencies:
3643
-
react-responsive "^10.0.1"
3644
-
3645
"@bufbuild/protobuf@^1.5.0":
3646
version "1.7.0"
3647
resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-1.7.0.tgz#cecddc8162a231642b410bc7b99309cd5969733c"
···
3635
resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
3636
integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
3637
3638
"@bufbuild/protobuf@^1.5.0":
3639
version "1.7.0"
3640
resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-1.7.0.tgz#cecddc8162a231642b410bc7b99309cd5969733c"