+1

package.json

··· 74 "@atproto/api": "^0.16.7", 75 "@bitdrift/react-native": "^0.6.8", 76 "@braintree/sanitize-url": "^6.0.2", 0 77 "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet", 78 "@emoji-mart/react": "^1.1.1", 79 "@expo/html-elements": "^0.12.5",

··· 74 "@atproto/api": "^0.16.7", 75 "@bitdrift/react-native": "^0.6.8", 76 "@braintree/sanitize-url": "^6.0.2", 77 + "@bsky.app/alf": "^0.1.2", 78 "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet", 79 "@emoji-mart/react": "^1.1.1", 80 "@expo/html-elements": "^0.12.5",

+4 -997

src/alf/atoms.ts

··· 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

··· 1 + import {type StyleProp, type ViewStyle} from 'react-native' 2 + import {atoms as baseAtoms} from '@bsky.app/alf' 0 0 0 0 3 4 + import {native, platform, web} from '#/alf/util/platform' 0 5 import * as Layout from '#/components/Layout' 6 7 export const atoms = { 8 + ...baseAtoms, 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 0 0 0 0 0 0 0 0 0 10 h_full_vh: web({ 11 height: '100vh', 12 }), 0 0 0 0 0 0 13 14 /** 15 * Used for the outermost components on screens, to ensure that they can fill ··· 32 }, 33 34 /* 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 35 * Transition 36 */ 37 transition_none: web({ ··· 110 transform: [], 111 }, 112 }) as {transform: Exclude<ViewStyle['transform'], string | undefined>}, 0 0 0 0 113 } as const

+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 * 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']) {

··· 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']) {

+13 -30

src/alf/index.tsx

··· 1 import React from 'react' 0 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 0 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,

··· 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' 0 0 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' 0 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, 0 0 0 0 0 0 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 ) 0 0 0 0 0 0 0 0 0 91 92 const value = React.useMemo<Alf>( 93 () => ({ ··· 105 }), 106 [ 107 themeName, 0 108 fontScale, 109 setFontScaleAndPersist, 110 fontFamily,

+22 -563

src/alf/themes.ts

··· 1 - import {atoms} from '#/alf/atoms' 2 - import {type Palette, type Theme} from '#/alf/types' 3 import { 4 - BLUE_HUE, 5 - defaultScale, 6 - dimScale, 7 - GREEN_HUE, 8 - RED_HUE, 9 - } from '#/alf/util/colorGeneration' 10 11 - const themes = createThemes({ 12 - hues: { 13 - primary: BLUE_HUE, 14 - negative: RED_HUE, 15 - positive: GREEN_HUE, 16 - }, 17 }) 18 0 0 0 0 0 0 0 0 0 19 /** 20 * @deprecated use ALF and access palette from `useTheme()` 21 */ 22 - export const lightPalette = themes.lightPalette 23 /** 24 * @deprecated use ALF and access palette from `useTheme()` 25 */ 26 - export const darkPalette = themes.darkPalette 27 /** 28 * @deprecated use ALF and access palette from `useTheme()` 29 */ 30 - export const dimPalette = themes.dimPalette 31 /** 32 * @deprecated use ALF and access theme from `useTheme()` 33 */ 34 - export const light = themes.light 35 /** 36 * @deprecated use ALF and access theme from `useTheme()` 37 */ 38 - export const dark = themes.dark 39 /** 40 * @deprecated use ALF and access theme from `useTheme()` 41 */ 42 - export const dim = themes.dim 43 - 44 - export const defaultTheme = themes.light 45 - 46 - export function createThemes({ 47 - hues, 48 - }: { 49 - hues: { 50 - primary: number 51 - negative: number 52 - positive: number 53 - } 54 - }): { 55 - lightPalette: Palette 56 - darkPalette: Palette 57 - dimPalette: Palette 58 - light: Theme 59 - dark: Theme 60 - dim: Theme 61 - } { 62 - const color = { 63 - like: '#ec4899', 64 - trueBlack: '#000000', 65 - 66 - gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`, 67 - gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`, 68 - gray_50: `hsl(${hues.primary}, 20%, ${defaultScale[12]}%)`, 69 - gray_100: `hsl(${hues.primary}, 20%, ${defaultScale[11]}%)`, 70 - gray_200: `hsl(${hues.primary}, 20%, ${defaultScale[10]}%)`, 71 - gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`, 72 - gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`, 73 - gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`, 74 - gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`, 75 - gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`, 76 - gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`, 77 - gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`, 78 - gray_950: `hsl(${hues.primary}, 28%, ${defaultScale[2]}%)`, 79 - gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`, 80 - gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`, 81 - 82 - primary_25: `hsl(${hues.primary}, 99%, 97%)`, 83 - primary_50: `hsl(${hues.primary}, 99%, 95%)`, 84 - primary_100: `hsl(${hues.primary}, 99%, 90%)`, 85 - primary_200: `hsl(${hues.primary}, 99%, 80%)`, 86 - primary_300: `hsl(${hues.primary}, 99%, 70%)`, 87 - primary_400: `hsl(${hues.primary}, 99%, 60%)`, 88 - primary_500: `hsl(${hues.primary}, 99%, 53%)`, 89 - primary_600: `hsl(${hues.primary}, 99%, 42%)`, 90 - primary_700: `hsl(${hues.primary}, 99%, 34%)`, 91 - primary_800: `hsl(${hues.primary}, 99%, 26%)`, 92 - primary_900: `hsl(${hues.primary}, 99%, 18%)`, 93 - primary_950: `hsl(${hues.primary}, 99%, 10%)`, 94 - primary_975: `hsl(${hues.primary}, 99%, 7%)`, 95 - 96 - green_25: `hsl(${hues.positive}, 82%, 97%)`, 97 - green_50: `hsl(${hues.positive}, 82%, 95%)`, 98 - green_100: `hsl(${hues.positive}, 82%, 90%)`, 99 - green_200: `hsl(${hues.positive}, 82%, 80%)`, 100 - green_300: `hsl(${hues.positive}, 82%, 70%)`, 101 - green_400: `hsl(${hues.positive}, 82%, 60%)`, 102 - green_500: `hsl(${hues.positive}, 82%, 50%)`, 103 - green_600: `hsl(${hues.positive}, 82%, 42%)`, 104 - green_700: `hsl(${hues.positive}, 82%, 34%)`, 105 - green_800: `hsl(${hues.positive}, 82%, 26%)`, 106 - green_900: `hsl(${hues.positive}, 82%, 18%)`, 107 - green_950: `hsl(${hues.positive}, 82%, 10%)`, 108 - green_975: `hsl(${hues.positive}, 82%, 7%)`, 109 - 110 - red_25: `hsl(${hues.negative}, 91%, 97%)`, 111 - red_50: `hsl(${hues.negative}, 91%, 95%)`, 112 - red_100: `hsl(${hues.negative}, 91%, 90%)`, 113 - red_200: `hsl(${hues.negative}, 91%, 80%)`, 114 - red_300: `hsl(${hues.negative}, 91%, 70%)`, 115 - red_400: `hsl(${hues.negative}, 91%, 60%)`, 116 - red_500: `hsl(${hues.negative}, 91%, 50%)`, 117 - red_600: `hsl(${hues.negative}, 91%, 42%)`, 118 - red_700: `hsl(${hues.negative}, 91%, 34%)`, 119 - red_800: `hsl(${hues.negative}, 91%, 26%)`, 120 - red_900: `hsl(${hues.negative}, 91%, 18%)`, 121 - red_950: `hsl(${hues.negative}, 91%, 10%)`, 122 - red_975: `hsl(${hues.negative}, 91%, 7%)`, 123 - } as const 124 - 125 - const lightPalette = { 126 - white: color.gray_0, 127 - black: color.gray_1000, 128 - like: color.like, 129 - 130 - contrast_25: color.gray_25, 131 - contrast_50: color.gray_50, 132 - contrast_100: color.gray_100, 133 - contrast_200: color.gray_200, 134 - contrast_300: color.gray_300, 135 - contrast_400: color.gray_400, 136 - contrast_500: color.gray_500, 137 - contrast_600: color.gray_600, 138 - contrast_700: color.gray_700, 139 - contrast_800: color.gray_800, 140 - contrast_900: color.gray_900, 141 - contrast_950: color.gray_950, 142 - contrast_975: color.gray_975, 143 - 144 - primary_25: color.primary_25, 145 - primary_50: color.primary_50, 146 - primary_100: color.primary_100, 147 - primary_200: color.primary_200, 148 - primary_300: color.primary_300, 149 - primary_400: color.primary_400, 150 - primary_500: color.primary_500, 151 - primary_600: color.primary_600, 152 - primary_700: color.primary_700, 153 - primary_800: color.primary_800, 154 - primary_900: color.primary_900, 155 - primary_950: color.primary_950, 156 - primary_975: color.primary_975, 157 - 158 - positive_25: color.green_25, 159 - positive_50: color.green_50, 160 - positive_100: color.green_100, 161 - positive_200: color.green_200, 162 - positive_300: color.green_300, 163 - positive_400: color.green_400, 164 - positive_500: color.green_500, 165 - positive_600: color.green_600, 166 - positive_700: color.green_700, 167 - positive_800: color.green_800, 168 - positive_900: color.green_900, 169 - positive_950: color.green_950, 170 - positive_975: color.green_975, 171 - 172 - negative_25: color.red_25, 173 - negative_50: color.red_50, 174 - negative_100: color.red_100, 175 - negative_200: color.red_200, 176 - negative_300: color.red_300, 177 - negative_400: color.red_400, 178 - negative_500: color.red_500, 179 - negative_600: color.red_600, 180 - negative_700: color.red_700, 181 - negative_800: color.red_800, 182 - negative_900: color.red_900, 183 - negative_950: color.red_950, 184 - negative_975: color.red_975, 185 - } as const 186 - 187 - const darkPalette: Palette = { 188 - white: color.gray_25, 189 - black: color.trueBlack, 190 - like: color.like, 191 - 192 - contrast_25: color.gray_975, 193 - contrast_50: color.gray_950, 194 - contrast_100: color.gray_900, 195 - contrast_200: color.gray_800, 196 - contrast_300: color.gray_700, 197 - contrast_400: color.gray_600, 198 - contrast_500: color.gray_500, 199 - contrast_600: color.gray_400, 200 - contrast_700: color.gray_300, 201 - contrast_800: color.gray_200, 202 - contrast_900: color.gray_100, 203 - contrast_950: color.gray_50, 204 - contrast_975: color.gray_25, 205 - 206 - primary_25: color.primary_975, 207 - primary_50: color.primary_950, 208 - primary_100: color.primary_900, 209 - primary_200: color.primary_800, 210 - primary_300: color.primary_700, 211 - primary_400: color.primary_600, 212 - primary_500: color.primary_500, 213 - primary_600: color.primary_400, 214 - primary_700: color.primary_300, 215 - primary_800: color.primary_200, 216 - primary_900: color.primary_100, 217 - primary_950: color.primary_50, 218 - primary_975: color.primary_25, 219 - 220 - positive_25: color.green_975, 221 - positive_50: color.green_950, 222 - positive_100: color.green_900, 223 - positive_200: color.green_800, 224 - positive_300: color.green_700, 225 - positive_400: color.green_600, 226 - positive_500: color.green_500, 227 - positive_600: color.green_400, 228 - positive_700: color.green_300, 229 - positive_800: color.green_200, 230 - positive_900: color.green_100, 231 - positive_950: color.green_50, 232 - positive_975: color.green_25, 233 - 234 - negative_25: color.red_975, 235 - negative_50: color.red_950, 236 - negative_100: color.red_900, 237 - negative_200: color.red_800, 238 - negative_300: color.red_700, 239 - negative_400: color.red_600, 240 - negative_500: color.red_500, 241 - negative_600: color.red_400, 242 - negative_700: color.red_300, 243 - negative_800: color.red_200, 244 - negative_900: color.red_100, 245 - negative_950: color.red_50, 246 - negative_975: color.red_25, 247 - } as const 248 - 249 - const dimPalette: Palette = { 250 - ...darkPalette, 251 - black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`, 252 - like: color.like, 253 - 254 - contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`, 255 - contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`, 256 - contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`, 257 - contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`, 258 - contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`, 259 - contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`, 260 - contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`, 261 - contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`, 262 - contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`, 263 - contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`, 264 - contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`, 265 - contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`, 266 - contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`, 267 - 268 - primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`, 269 - primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`, 270 - primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`, 271 - primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`, 272 - primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`, 273 - primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`, 274 - primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`, 275 - primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`, 276 - primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`, 277 - primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`, 278 - primary_900: `hsl(${hues.primary}, 99%, ${dimScale[11]}%)`, 279 - primary_950: `hsl(${hues.primary}, 99%, ${dimScale[12]}%)`, 280 - primary_975: `hsl(${hues.primary}, 99%, ${dimScale[13]}%)`, 281 - 282 - positive_25: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`, 283 - positive_50: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`, 284 - positive_100: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`, 285 - positive_200: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`, 286 - positive_300: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`, 287 - positive_400: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`, 288 - positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`, 289 - positive_600: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`, 290 - positive_700: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`, 291 - positive_800: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`, 292 - positive_900: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`, 293 - positive_950: `hsl(${hues.positive}, 82%, ${dimScale[12]}%)`, 294 - positive_975: `hsl(${hues.positive}, 82%, ${dimScale[13]}%)`, 295 - 296 - negative_25: `hsl(${hues.negative}, 70%, ${dimScale[1]}%)`, 297 - negative_50: `hsl(${hues.negative}, 80%, ${dimScale[2]}%)`, 298 - negative_100: `hsl(${hues.negative}, 84%, ${dimScale[3]}%)`, 299 - negative_200: `hsl(${hues.negative}, 88%, ${dimScale[4]}%)`, 300 - negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`, 301 - negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`, 302 - negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`, 303 - negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`, 304 - negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`, 305 - negative_800: `hsl(${hues.negative}, 91%, ${dimScale[10]}%)`, 306 - negative_900: `hsl(${hues.negative}, 91%, ${dimScale[11]}%)`, 307 - negative_950: `hsl(${hues.negative}, 91%, ${dimScale[12]}%)`, 308 - negative_975: `hsl(${hues.negative}, 91%, ${dimScale[13]}%)`, 309 - } as const 310 - 311 - const light: Theme = { 312 - scheme: 'light', 313 - name: 'light', 314 - palette: lightPalette, 315 - atoms: { 316 - text: { 317 - color: lightPalette.black, 318 - }, 319 - text_contrast_low: { 320 - color: lightPalette.contrast_400, 321 - }, 322 - text_contrast_medium: { 323 - color: lightPalette.contrast_700, 324 - }, 325 - text_contrast_high: { 326 - color: lightPalette.contrast_900, 327 - }, 328 - text_inverted: { 329 - color: lightPalette.white, 330 - }, 331 - bg: { 332 - backgroundColor: lightPalette.white, 333 - }, 334 - bg_contrast_25: { 335 - backgroundColor: lightPalette.contrast_25, 336 - }, 337 - bg_contrast_50: { 338 - backgroundColor: lightPalette.contrast_50, 339 - }, 340 - bg_contrast_100: { 341 - backgroundColor: lightPalette.contrast_100, 342 - }, 343 - bg_contrast_200: { 344 - backgroundColor: lightPalette.contrast_200, 345 - }, 346 - bg_contrast_300: { 347 - backgroundColor: lightPalette.contrast_300, 348 - }, 349 - bg_contrast_400: { 350 - backgroundColor: lightPalette.contrast_400, 351 - }, 352 - bg_contrast_500: { 353 - backgroundColor: lightPalette.contrast_500, 354 - }, 355 - bg_contrast_600: { 356 - backgroundColor: lightPalette.contrast_600, 357 - }, 358 - bg_contrast_700: { 359 - backgroundColor: lightPalette.contrast_700, 360 - }, 361 - bg_contrast_800: { 362 - backgroundColor: lightPalette.contrast_800, 363 - }, 364 - bg_contrast_900: { 365 - backgroundColor: lightPalette.contrast_900, 366 - }, 367 - bg_contrast_950: { 368 - backgroundColor: lightPalette.contrast_950, 369 - }, 370 - bg_contrast_975: { 371 - backgroundColor: lightPalette.contrast_975, 372 - }, 373 - border_contrast_low: { 374 - borderColor: lightPalette.contrast_100, 375 - }, 376 - border_contrast_medium: { 377 - borderColor: lightPalette.contrast_200, 378 - }, 379 - border_contrast_high: { 380 - borderColor: lightPalette.contrast_300, 381 - }, 382 - shadow_sm: { 383 - ...atoms.shadow_sm, 384 - shadowColor: lightPalette.black, 385 - }, 386 - shadow_md: { 387 - ...atoms.shadow_md, 388 - shadowColor: lightPalette.black, 389 - }, 390 - shadow_lg: { 391 - ...atoms.shadow_lg, 392 - shadowColor: lightPalette.black, 393 - }, 394 - }, 395 - } 396 - 397 - const dark: Theme = { 398 - scheme: 'dark', 399 - name: 'dark', 400 - palette: darkPalette, 401 - atoms: { 402 - text: { 403 - color: darkPalette.white, 404 - }, 405 - text_contrast_low: { 406 - color: darkPalette.contrast_400, 407 - }, 408 - text_contrast_medium: { 409 - color: darkPalette.contrast_600, 410 - }, 411 - text_contrast_high: { 412 - color: darkPalette.contrast_900, 413 - }, 414 - text_inverted: { 415 - color: darkPalette.black, 416 - }, 417 - bg: { 418 - backgroundColor: darkPalette.black, 419 - }, 420 - bg_contrast_25: { 421 - backgroundColor: darkPalette.contrast_25, 422 - }, 423 - bg_contrast_50: { 424 - backgroundColor: darkPalette.contrast_50, 425 - }, 426 - bg_contrast_100: { 427 - backgroundColor: darkPalette.contrast_100, 428 - }, 429 - bg_contrast_200: { 430 - backgroundColor: darkPalette.contrast_200, 431 - }, 432 - bg_contrast_300: { 433 - backgroundColor: darkPalette.contrast_300, 434 - }, 435 - bg_contrast_400: { 436 - backgroundColor: darkPalette.contrast_400, 437 - }, 438 - bg_contrast_500: { 439 - backgroundColor: darkPalette.contrast_500, 440 - }, 441 - bg_contrast_600: { 442 - backgroundColor: darkPalette.contrast_600, 443 - }, 444 - bg_contrast_700: { 445 - backgroundColor: darkPalette.contrast_700, 446 - }, 447 - bg_contrast_800: { 448 - backgroundColor: darkPalette.contrast_800, 449 - }, 450 - bg_contrast_900: { 451 - backgroundColor: darkPalette.contrast_900, 452 - }, 453 - bg_contrast_950: { 454 - backgroundColor: darkPalette.contrast_950, 455 - }, 456 - bg_contrast_975: { 457 - backgroundColor: darkPalette.contrast_975, 458 - }, 459 - border_contrast_low: { 460 - borderColor: darkPalette.contrast_100, 461 - }, 462 - border_contrast_medium: { 463 - borderColor: darkPalette.contrast_200, 464 - }, 465 - border_contrast_high: { 466 - borderColor: darkPalette.contrast_300, 467 - }, 468 - shadow_sm: { 469 - ...atoms.shadow_sm, 470 - shadowOpacity: 0.7, 471 - shadowColor: color.trueBlack, 472 - }, 473 - shadow_md: { 474 - ...atoms.shadow_md, 475 - shadowOpacity: 0.7, 476 - shadowColor: color.trueBlack, 477 - }, 478 - shadow_lg: { 479 - ...atoms.shadow_lg, 480 - shadowOpacity: 0.7, 481 - shadowColor: color.trueBlack, 482 - }, 483 - }, 484 - } 485 - 486 - const dim: Theme = { 487 - ...dark, 488 - scheme: 'dark', 489 - name: 'dim', 490 - palette: dimPalette, 491 - atoms: { 492 - ...dark.atoms, 493 - text: { 494 - color: dimPalette.white, 495 - }, 496 - text_contrast_low: { 497 - color: dimPalette.contrast_400, 498 - }, 499 - text_contrast_medium: { 500 - color: dimPalette.contrast_600, 501 - }, 502 - text_contrast_high: { 503 - color: dimPalette.contrast_900, 504 - }, 505 - text_inverted: { 506 - color: dimPalette.black, 507 - }, 508 - bg: { 509 - backgroundColor: dimPalette.black, 510 - }, 511 - bg_contrast_25: { 512 - backgroundColor: dimPalette.contrast_25, 513 - }, 514 - bg_contrast_50: { 515 - backgroundColor: dimPalette.contrast_50, 516 - }, 517 - bg_contrast_100: { 518 - backgroundColor: dimPalette.contrast_100, 519 - }, 520 - bg_contrast_200: { 521 - backgroundColor: dimPalette.contrast_200, 522 - }, 523 - bg_contrast_300: { 524 - backgroundColor: dimPalette.contrast_300, 525 - }, 526 - bg_contrast_400: { 527 - backgroundColor: dimPalette.contrast_400, 528 - }, 529 - bg_contrast_500: { 530 - backgroundColor: dimPalette.contrast_500, 531 - }, 532 - bg_contrast_600: { 533 - backgroundColor: dimPalette.contrast_600, 534 - }, 535 - bg_contrast_700: { 536 - backgroundColor: dimPalette.contrast_700, 537 - }, 538 - bg_contrast_800: { 539 - backgroundColor: dimPalette.contrast_800, 540 - }, 541 - bg_contrast_900: { 542 - backgroundColor: dimPalette.contrast_900, 543 - }, 544 - bg_contrast_950: { 545 - backgroundColor: dimPalette.contrast_950, 546 - }, 547 - bg_contrast_975: { 548 - backgroundColor: dimPalette.contrast_975, 549 - }, 550 - border_contrast_low: { 551 - borderColor: dimPalette.contrast_100, 552 - }, 553 - border_contrast_medium: { 554 - borderColor: dimPalette.contrast_200, 555 - }, 556 - border_contrast_high: { 557 - borderColor: dimPalette.contrast_300, 558 - }, 559 - shadow_sm: { 560 - ...atoms.shadow_sm, 561 - shadowOpacity: 0.7, 562 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 563 - }, 564 - shadow_md: { 565 - ...atoms.shadow_md, 566 - shadowOpacity: 0.7, 567 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 568 - }, 569 - shadow_lg: { 570 - ...atoms.shadow_lg, 571 - shadowOpacity: 0.7, 572 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 573 - }, 574 - }, 575 - } 576 - 577 - return { 578 - lightPalette, 579 - darkPalette, 580 - dimPalette, 581 - light, 582 - dark, 583 - dim, 584 - } 585 - }

··· 0 0 1 import { 2 + createThemes, 3 + DEFAULT_PALETTE, 4 + DEFAULT_SUBDUED_PALETTE, 5 + } from '@bsky.app/alf' 0 0 6 7 + const DEFAULT_THEMES = createThemes({ 8 + defaultPalette: DEFAULT_PALETTE, 9 + subduedPalette: DEFAULT_SUBDUED_PALETTE, 0 0 0 10 }) 11 12 + export const themes = { 13 + lightPalette: DEFAULT_THEMES.light.palette, 14 + darkPalette: DEFAULT_THEMES.dark.palette, 15 + dimPalette: DEFAULT_THEMES.dim.palette, 16 + light: DEFAULT_THEMES.light, 17 + dark: DEFAULT_THEMES.dark, 18 + dim: DEFAULT_THEMES.dim, 19 + } 20 + 21 /** 22 * @deprecated use ALF and access palette from `useTheme()` 23 */ 24 + export const lightPalette = DEFAULT_THEMES.light.palette 25 /** 26 * @deprecated use ALF and access palette from `useTheme()` 27 */ 28 + export const darkPalette = DEFAULT_THEMES.dark.palette 29 /** 30 * @deprecated use ALF and access palette from `useTheme()` 31 */ 32 + export const dimPalette = DEFAULT_THEMES.dim.palette 33 /** 34 * @deprecated use ALF and access theme from `useTheme()` 35 */ 36 + export const light = DEFAULT_THEMES.light 37 /** 38 * @deprecated use ALF and access theme from `useTheme()` 39 */ 40 + export const dark = DEFAULT_THEMES.dark 41 /** 42 * @deprecated use ALF and access theme from `useTheme()` 43 */ 44 + export const dim = DEFAULT_THEMES.dim 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

+4 -55

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 = {

··· 1 + import {tokens} from '@bsky.app/alf' 2 3 + export * from '@bsky.app/alf/dist/tokens' 4 5 export const color = { 6 + temp_purple: tokens.labelerColor.purple, 7 + temp_purple_dark: tokens.labelerColor.purple_dark, 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 8 } as const 9 10 export const gradients = {

-164

src/alf/types.ts

··· 1 - import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native' 2 - 3 - export type TextStyleProp = { 4 - style?: StyleProp<TextStyle> 5 - } 6 - 7 - export type ViewStyleProp = { 8 - style?: StyleProp<ViewStyle> 9 - } 10 - 11 - export type ThemeName = 'light' | 'dim' | 'dark' 12 - export type Palette = { 13 - white: string 14 - black: string 15 - like: string 16 - 17 - contrast_25: string 18 - contrast_50: string 19 - contrast_100: string 20 - contrast_200: string 21 - contrast_300: string 22 - contrast_400: string 23 - contrast_500: string 24 - contrast_600: string 25 - contrast_700: string 26 - contrast_800: string 27 - contrast_900: string 28 - contrast_950: string 29 - contrast_975: string 30 - 31 - primary_25: string 32 - primary_50: string 33 - primary_100: string 34 - primary_200: string 35 - primary_300: string 36 - primary_400: string 37 - primary_500: string 38 - primary_600: string 39 - primary_700: string 40 - primary_800: string 41 - primary_900: string 42 - primary_950: string 43 - primary_975: string 44 - 45 - positive_25: string 46 - positive_50: string 47 - positive_100: string 48 - positive_200: string 49 - positive_300: string 50 - positive_400: string 51 - positive_500: string 52 - positive_600: string 53 - positive_700: string 54 - positive_800: string 55 - positive_900: string 56 - positive_950: string 57 - positive_975: string 58 - 59 - negative_25: string 60 - negative_50: string 61 - negative_100: string 62 - negative_200: string 63 - negative_300: string 64 - negative_400: string 65 - negative_500: string 66 - negative_600: string 67 - negative_700: string 68 - negative_800: string 69 - negative_900: string 70 - negative_950: string 71 - negative_975: string 72 - } 73 - export type ThemedAtoms = { 74 - text: { 75 - color: string 76 - } 77 - text_contrast_low: { 78 - color: string 79 - } 80 - text_contrast_medium: { 81 - color: string 82 - } 83 - text_contrast_high: { 84 - color: string 85 - } 86 - text_inverted: { 87 - color: string 88 - } 89 - bg: { 90 - backgroundColor: string 91 - } 92 - bg_contrast_25: { 93 - backgroundColor: string 94 - } 95 - bg_contrast_50: { 96 - backgroundColor: string 97 - } 98 - bg_contrast_100: { 99 - backgroundColor: string 100 - } 101 - bg_contrast_200: { 102 - backgroundColor: string 103 - } 104 - bg_contrast_300: { 105 - backgroundColor: string 106 - } 107 - bg_contrast_400: { 108 - backgroundColor: string 109 - } 110 - bg_contrast_500: { 111 - backgroundColor: string 112 - } 113 - bg_contrast_600: { 114 - backgroundColor: string 115 - } 116 - bg_contrast_700: { 117 - backgroundColor: string 118 - } 119 - bg_contrast_800: { 120 - backgroundColor: string 121 - } 122 - bg_contrast_900: { 123 - backgroundColor: string 124 - } 125 - bg_contrast_950: { 126 - backgroundColor: string 127 - } 128 - bg_contrast_975: { 129 - backgroundColor: string 130 - } 131 - border_contrast_low: { 132 - borderColor: string 133 - } 134 - border_contrast_medium: { 135 - borderColor: string 136 - } 137 - border_contrast_high: { 138 - borderColor: string 139 - } 140 - shadow_sm: { 141 - shadowRadius: number 142 - shadowOpacity: number 143 - elevation: number 144 - shadowColor: string 145 - } 146 - shadow_md: { 147 - shadowRadius: number 148 - shadowOpacity: number 149 - elevation: number 150 - shadowColor: string 151 - } 152 - shadow_lg: { 153 - shadowRadius: number 154 - shadowOpacity: number 155 - elevation: number 156 - shadowColor: string 157 - } 158 - } 159 - export type Theme = { 160 - scheme: 'light' | 'dark' // for library support 161 - name: ThemeName 162 - palette: Palette 163 - atoms: ThemedAtoms 164 - }

··· 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

-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 *

··· 9 import {type Alf, applyFonts, atoms, flatten} from '#/alf' 10 11 /** 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 12 * Ensures that `lineHeight` defaults to a relative value of `1`, or applies 13 * other relative leading atoms. 14 *

-8

src/alf/util/__tests__/colors.test.ts

··· 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 })

··· 1 import {jest} from '@jest/globals' 2 0 3 import {transparentifyColor} from '../colorGeneration' 0 0 0 0 4 5 describe('transparentifyColor', () => { 6 beforeEach(() => { ··· 36 const unsupported = 'blue' 37 const result = transparentifyColor(unsupported, 0.5) 38 expect(result).toBe(unsupported) 0 0 0 39 }) 40 })

+3 -44

src/alf/util/colorGeneration.ts

··· 1 - import {logger} from '#/logger' 2 3 export const BLUE_HUE = 211 4 - export const RED_HUE = 346 5 - export const GREEN_HUE = 152 6 7 /** 8 - * Smooth progression of lightness "stops" for generating HSL colors. 9 */ 10 - export const COLOR_STOPS = [ 11 - 0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1, 12 - ] 13 - 14 - export function generateScale(start: number, end: number) { 15 - const range = end - start 16 - return COLOR_STOPS.map(stop => { 17 - return start + range * stop 18 - }) 19 - } 20 - 21 - export const defaultScale = generateScale(6, 100) 22 - // dim shifted 6% lighter 23 - export const dimScale = generateScale(12, 100) 24 - 25 - export function transparentifyColor(color: string, alpha: number) { 26 - if (color.startsWith('hsl(')) { 27 - return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})` 28 - } else if (color.startsWith('rgb(')) { 29 - return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})` 30 - } else if (color.startsWith('#')) { 31 - if (color.length === 7) { 32 - const alphaHex = Math.round(alpha * 255).toString(16) 33 - // Per MDN: If there is only one number, it is duplicated: e means ee 34 - // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color 35 - return color.slice(0, 7) + alphaHex.padStart(2, alphaHex) 36 - } else if (color.length === 4) { 37 - // convert to 6-digit hex before adding alpha 38 - const [r, g, b] = color.slice(1).split('') 39 - const alphaHex = Math.round(alpha * 255).toString(16) 40 - return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart( 41 - 2, 42 - alphaHex, 43 - )}` 44 - } 45 - } else { 46 - logger.warn(`Could not make '${color}' transparent`) 47 - } 48 - return color 49 - }

··· 1 + import {utils} from '@bsky.app/alf' 2 3 export const BLUE_HUE = 211 0 0 4 5 /** 6 + * @deprecated use `utils.alpha` from `@bsky.app/alf` instead 7 */ 8 + export const transparentifyColor = utils.alpha 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

+1 -62

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 + export {android, ios, native, platform, web} from '@bsky.app/alf' 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

+1 -1

src/alf/util/systemUI.ts

··· 1 import * as SystemUI from 'expo-system-ui' 0 2 3 import {isAndroid} from '#/platform/detection' 4 - import {type Theme} from '../types' 5 6 export function setSystemUITheme(themeType: 'theme' | 'lightbox', t: Theme) { 7 if (isAndroid) {

··· 1 import * as SystemUI from 'expo-system-ui' 2 + import {type Theme} from '@bsky.app/alf' 3 4 import {isAndroid} from '#/platform/detection' 0 5 6 export function setSystemUITheme(themeType: 'theme' | 'lightbox', t: Theme) { 7 if (isAndroid) {

+2 -13

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 + import {utils} from '@bsky.app/alf' 2 3 + export const select = utils.select 0 0 0 0 0 0 0 0 0 0 0

+1 -1

src/alf/util/useColorModeTheme.ts

··· 1 import React from 'react' 2 import {type ColorSchemeName, useColorScheme} from 'react-native' 0 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()

··· 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' 0 8 9 export function useColorModeTheme(): ThemeName { 10 const theme = useThemeName()

+2 -2

src/components/AccountList.tsx

··· 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,

··· 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,

+2 -3

src/components/BlockedGeoOverlay.tsx

··· 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

··· 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]}> 0 125 <Trans>Not in Mississippi?</Trans> 126 </Text> 127 <Text

+5 -13

src/components/Button.tsx

··· 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 }

··· 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, 0 0 0 0 293 }) 294 } 295 } else if (color === 'negative_subtle') { ··· 310 }) 311 } else { 312 baseStyles.push({ 313 + backgroundColor: t.palette.negative_50, 0 0 0 0 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 }

+6 -2

src/components/ContextMenu/index.tsx

··· 796 style={[ 797 a.flex_1, 798 a.text_md, 799 - a.font_bold, 800 t.atoms.text_contrast_high, 801 {paddingTop: 3}, 802 style, ··· 855 const t = useTheme() 856 return ( 857 <Text 858 - style={[a.font_bold, t.atoms.text_contrast_medium, {marginBottom: -8}]}> 0 0 0 0 859 {children} 860 </Text> 861 )

··· 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/Dialog/shared.tsx

··· 62 style?: StyleProp<TextStyle> 63 }) { 64 return ( 65 - <Text style={[a.text_lg, a.text_center, a.font_heavy, style]}> 66 {children} 67 </Text> 68 )

··· 62 style?: StyleProp<TextStyle> 63 }) { 64 return ( 65 + <Text style={[a.text_lg, a.text_center, a.font_bold, style]}> 66 {children} 67 </Text> 68 )

+1 -1

src/components/Error.tsx

··· 40 ]} 41 sideBorders={sideBorders}> 42 <View style={[a.w_full, a.align_center, a.gap_lg]}> 43 - <Text style={[a.font_bold, a.text_3xl]}>{title}</Text> 44 <Text 45 style={[ 46 a.text_md,

··· 40 ]} 41 sideBorders={sideBorders}> 42 <View style={[a.w_full, a.align_center, a.gap_lg]}> 43 + <Text style={[a.font_semi_bold, a.text_3xl]}>{title}</Text> 44 <Text 45 style={[ 46 a.text_md,

+2 -2

src/components/FeedCard.tsx

··· 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>

··· 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>

+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_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>

··· 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>

+1 -1

src/components/LabelingServiceCard/index.tsx

··· 45 46 export function Title({value}: {value: string}) { 47 return ( 48 - <Text emoji style={[a.text_md, a.font_bold, a.leading_tight]}> 49 {value} 50 </Text> 51 )

··· 45 46 export function Title({value}: {value: string}) { 47 return ( 48 + <Text emoji style={[a.text_md, a.font_semi_bold, a.leading_tight]}> 49 {value} 50 </Text> 51 )

+1 -1

src/components/Layout/Header/index.tsx

··· 181 <Text 182 style={[ 183 a.text_lg, 184 - a.font_heavy, 185 a.leading_tight, 186 isIOS && align === 'platform' && a.text_center, 187 gtMobile && a.text_xl,

··· 181 <Text 182 style={[ 183 a.text_lg, 184 + a.font_bold, 185 a.leading_tight, 186 isIOS && align === 'platform' && a.text_center, 187 gtMobile && a.text_xl,

+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_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>

··· 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>

+1 -1

src/components/LoggedOutCTA.tsx

··· 50 <View style={[a.flex_row, a.align_center, a.flex_1, a.pr_md]}> 51 <Logo width={30} style={[a.mr_md]} /> 52 <View style={[a.flex_1]}> 53 - <Text style={[a.text_lg, a.font_bold, a.leading_snug]}> 54 <Trans>Join Bluesky</Trans> 55 </Text> 56 <Text

··· 50 <View style={[a.flex_row, a.align_center, a.flex_1, a.pr_md]}> 51 <Logo width={30} style={[a.mr_md]} /> 52 <View style={[a.flex_1]}> 53 + <Text style={[a.text_lg, a.font_semi_bold, a.leading_snug]}> 54 <Trans>Join Bluesky</Trans> 55 </Text> 56 <Text

+2 -2

src/components/Menu/index.tsx

··· 191 style={[ 192 a.flex_1, 193 a.text_md, 194 - a.font_bold, 195 t.atoms.text_contrast_high, 196 {paddingTop: 3}, 197 style, ··· 293 return ( 294 <Text 295 style={[ 296 - a.font_bold, 297 t.atoms.text_contrast_medium, 298 {marginBottom: -8}, 299 style,

··· 191 style={[ 192 a.flex_1, 193 a.text_md, 194 + a.font_semi_bold, 195 t.atoms.text_contrast_high, 196 {paddingTop: 3}, 197 style, ··· 293 return ( 294 <Text 295 style={[ 296 + a.font_semi_bold, 297 t.atoms.text_contrast_medium, 298 {marginBottom: -8}, 299 style,

+2 -2

src/components/Menu/index.web.tsx

··· 292 <Text 293 style={[ 294 a.flex_1, 295 - a.font_bold, 296 t.atoms.text_contrast_high, 297 style, 298 disabled && t.atoms.text_contrast_low, ··· 372 return ( 373 <Text 374 style={[ 375 - a.font_bold, 376 a.p_sm, 377 t.atoms.text_contrast_low, 378 a.leading_snug,

··· 292 <Text 293 style={[ 294 a.flex_1, 295 + a.font_semi_bold, 296 t.atoms.text_contrast_high, 297 style, 298 disabled && t.atoms.text_contrast_low, ··· 372 return ( 373 <Text 374 style={[ 375 + a.font_semi_bold, 376 a.p_sm, 377 t.atoms.text_contrast_low, 378 a.leading_snug,

+1 -1

src/components/NewskieDialog.tsx

··· 135 style={[a.absolute, a.inset_0]} 136 /> 137 </View> 138 - <Text style={[a.font_bold, a.text_xl]}> 139 {isMe ? <Trans>Welcome, friend!</Trans> : <Trans>Say hello!</Trans>} 140 </Text> 141 </View>

··· 135 style={[a.absolute, a.inset_0]} 136 /> 137 </View> 138 + <Text style={[a.font_semi_bold, a.text_xl]}> 139 {isMe ? <Trans>Welcome, friend!</Trans> : <Trans>Say hello!</Trans>} 140 </Text> 141 </View>

+1 -1

src/components/Pills.tsx

··· 133 emoji 134 style={[ 135 text, 136 - a.font_bold, 137 a.leading_tight, 138 t.atoms.text_contrast_medium, 139 {paddingRight: 3},

··· 133 emoji 134 style={[ 135 text, 136 + a.font_semi_bold, 137 a.leading_tight, 138 t.atoms.text_contrast_medium, 139 {paddingRight: 3},

+1 -1

src/components/PolicyUpdateOverlay/Badge.tsx

··· 25 <Logo fill={t.palette.primary_600} width={14} /> 26 <Text 27 style={[ 28 - a.font_bold, 29 { 30 color: t.palette.primary_600, 31 },

··· 25 <Logo fill={t.palette.primary_600} width={14} /> 26 <Text 27 style={[ 28 + a.font_semi_bold, 29 { 30 color: t.palette.primary_600, 31 },

+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_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]}>

··· 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]}>

+1 -1

src/components/Post/Embed/ExternalEmbed/index.tsx

··· 126 <Text 127 emoji 128 numberOfLines={3} 129 - style={[a.text_md, a.font_bold, a.leading_snug]}> 130 {link.title || link.uri} 131 </Text> 132 )}

··· 126 <Text 127 emoji 128 numberOfLines={3} 129 + style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 130 {link.title || link.uri} 131 </Text> 132 )}

+1 -1

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx

··· 54 <Text 55 style={[ 56 {color: t.palette.white, fontSize: 12, fontVariant: ['tabular-nums']}, 57 - a.font_bold, 58 {lineHeight: 1.25}, 59 ]}> 60 {`${minutes}:${seconds}`}

··· 54 <Text 55 style={[ 56 {color: t.palette.white, fontSize: 12, fontVariant: ['tabular-nums']}, 57 + a.font_semi_bold, 58 {lineHeight: 1.25}, 59 ]}> 60 {`${minutes}:${seconds}`}

+6 -1

src/components/PostControls/PostControlButton.tsx

··· 128 129 return ( 130 <Text 131 - style={[color, big ? a.text_md : a.text_sm, active && a.font_bold, style]} 0 0 0 0 0 132 {...props} 133 /> 134 )

··· 128 129 return ( 130 <Text 131 + style={[ 132 + color, 133 + big ? a.text_md : a.text_sm, 134 + active && a.font_semi_bold, 135 + style, 136 + ]} 137 {...props} 138 /> 139 )

+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_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 ]}>

··· 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 ]}>

+1 -1

src/components/PostControls/ShareMenu/RecentChats.tsx

··· 203 a.text_sm, 204 t.atoms.text_contrast_high, 205 a.text_center, 206 - a.font_bold, 207 ]}> 208 <Trans>Start a conversation, and it will appear here.</Trans> 209 </Text>

··· 203 a.text_sm, 204 t.atoms.text_contrast_high, 205 a.text_center, 206 + a.font_semi_bold, 207 ]}> 208 <Trans>Start a conversation, and it will appear here.</Trans> 209 </Text>

+2 -2

src/components/ProfileCard.tsx

··· 233 <Text 234 emoji 235 style={[ 236 - a.font_bold, 237 a.leading_tight, 238 a.flex_shrink_0, 239 {maxWidth: '70%'}, ··· 287 emoji 288 style={[ 289 a.text_md, 290 - a.font_bold, 291 a.leading_snug, 292 a.self_start, 293 a.flex_shrink,

··· 233 <Text 234 emoji 235 style={[ 236 + a.font_semi_bold, 237 a.leading_tight, 238 a.flex_shrink_0, 239 {maxWidth: '70%'}, ··· 287 emoji 288 style={[ 289 a.text_md, 290 + a.font_semi_bold, 291 a.leading_snug, 292 a.self_start, 293 a.flex_shrink,

+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_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>

··· 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>

+1 -1

src/components/ProgressGuide/FollowDialog.tsx

··· 360 style={[ 361 a.z_10, 362 a.text_lg, 363 - a.font_heavy, 364 a.leading_tight, 365 t.atoms.text_contrast_high, 366 ]}>

··· 360 style={[ 361 a.z_10, 362 a.text_lg, 363 + a.font_bold, 364 a.leading_tight, 365 t.atoms.text_contrast_high, 366 ]}>

+1 -1

src/components/ProgressGuide/List.tsx

··· 28 <Text 29 style={[ 30 t.atoms.text_contrast_medium, 31 - a.font_bold, 32 a.text_sm, 33 {textTransform: 'uppercase'}, 34 ]}>

··· 28 <Text 29 style={[ 30 t.atoms.text_contrast_medium, 31 + a.font_semi_bold, 32 a.text_sm, 33 {textTransform: 'uppercase'}, 34 ]}>

+1 -1

src/components/ProgressGuide/Task.tsx

··· 39 <Text 40 style={[ 41 a.text_sm, 42 - a.font_bold, 43 a.leading_tight, 44 tabularNumsTitle && {fontVariant: ['tabular-nums']}, 45 ]}>

··· 39 <Text 40 style={[ 41 a.text_sm, 42 + a.font_semi_bold, 43 a.leading_tight, 44 tabularNumsTitle && {fontVariant: ['tabular-nums']}, 45 ]}>

+1 -1

src/components/ProgressGuide/Toast.tsx

··· 160 ref={animatedCheckRef} 161 /> 162 <View> 163 - <Text style={[a.text_md, a.font_bold]}>{title}</Text> 164 {subtitle && ( 165 <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> 166 {subtitle}

··· 160 ref={animatedCheckRef} 161 /> 162 <View> 163 + <Text style={[a.text_md, a.font_semi_bold]}>{title}</Text> 164 {subtitle && ( 165 <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> 166 {subtitle}

+1 -1

src/components/Prompt.tsx

··· 77 style={[ 78 a.flex_1, 79 a.text_2xl, 80 - a.font_bold, 81 a.pb_sm, 82 a.leading_snug, 83 style,

··· 77 style={[ 78 a.flex_1, 79 a.text_2xl, 80 + a.font_semi_bold, 81 a.pb_sm, 82 a.leading_snug, 83 style,

+3 -2

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_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]}> 0 79 @{labeler.creator.handle} 80 </Text> 81 </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_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>

+3 -2

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_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]}> 0 177 {title} 178 </Text> 179 <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_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>

+1 -1

src/components/ReportDialog/SubmitView.tsx

··· 125 t.atoms.border_contrast_low, 126 ]}> 127 <View style={[a.flex_1, a.gap_xs]}> 128 - <Text style={[a.text_md, a.font_bold]}> 129 {selectedReportOption.title} 130 </Text> 131 <Text style={[a.leading_tight, {maxWidth: 400}]}>

··· 125 t.atoms.border_contrast_low, 126 ]}> 127 <View style={[a.flex_1, a.gap_xs]}> 128 + <Text style={[a.text_md, a.font_semi_bold]}> 129 {selectedReportOption.title} 130 </Text> 131 <Text style={[a.leading_tight, {maxWidth: 400}]}>

+7 -1

src/components/SearchError.tsx

··· 34 {maxWidth: gtMobile ? 394 : 294}, 35 gtMobile ? a.gap_md : a.gap_sm, 36 ]}> 37 - <Text style={[a.font_bold, a.text_lg, a.text_center, a.leading_snug]}> 0 0 0 0 0 0 38 {title} 39 </Text> 40 {children}

··· 34 {maxWidth: gtMobile ? 394 : 294}, 35 gtMobile ? a.gap_md : a.gap_sm, 36 ]}> 37 + <Text 38 + style={[ 39 + a.font_semi_bold, 40 + a.text_lg, 41 + a.text_center, 42 + a.leading_snug, 43 + ]}> 44 {title} 45 </Text> 46 {children}

+1 -1

src/components/Select/index.tsx

··· 280 // eslint-disable-next-line bsky-internal/avoid-unwrapped-text 281 return ( 282 <View style={[a.flex_1, a.py_md, a.border_b, t.atoms.border_contrast_low]}> 283 - <Text style={[a.text_md, selected && a.font_bold]}>{children}</Text> 284 </View> 285 ) 286 }

··· 280 // eslint-disable-next-line bsky-internal/avoid-unwrapped-text 281 return ( 282 <View style={[a.flex_1, a.py_md, a.border_b, t.atoms.border_contrast_low]}> 283 + <Text style={[a.text_md, selected && a.font_semi_bold]}>{children}</Text> 284 </View> 285 ) 286 }

+1 -1

src/components/Select/index.web.tsx

··· 259 a.text_sm, 260 {outline: 0}, 261 (hovered || focused) && {backgroundColor: t.palette.primary_50}, 262 - selected && [a.font_bold], 263 a.transition_color, 264 style, 265 ])}>

··· 259 a.text_sm, 260 {outline: 0}, 261 (hovered || focused) && {backgroundColor: t.palette.primary_50}, 262 + selected && [a.font_semi_bold], 263 a.transition_color, 264 style, 265 ])}>

+1 -1

src/components/StarterPack/ProfileStarterPacks.tsx

··· 255 {marginTop: a.border.borderWidth}, 256 ]}> 257 <View style={[a.gap_xs]}> 258 - <Text style={[a.font_bold, a.text_lg, {color: 'white'}]}> 259 <Trans>You haven't created a starter pack yet!</Trans> 260 </Text> 261 <Text style={[a.text_md, {color: 'white'}]}>

··· 255 {marginTop: a.border.borderWidth}, 256 ]}> 257 <View style={[a.gap_xs]}> 258 + <Text style={[a.font_semi_bold, a.text_lg, {color: 'white'}]}> 259 <Trans>You haven't created a starter pack yet!</Trans> 260 </Text> 261 <Text style={[a.text_md, {color: 'white'}]}>

+8 -3

src/components/StarterPack/QrCode.tsx

··· 54 ]}> 55 <View style={[a.gap_sm]}> 56 <Text 57 - style={[a.font_bold, a.text_3xl, a.text_center, {color: 'white'}]}> 0 0 0 0 0 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>

··· 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>

+1 -1

src/components/StarterPack/ShareDialog.tsx

··· 77 ) : ( 78 <View style={[!gtMobile && a.gap_lg]}> 79 <View style={[a.gap_sm, gtMobile && a.pb_lg]}> 80 - <Text style={[a.font_bold, a.text_2xl]}> 81 <Trans>Invite people to this starter pack!</Trans> 82 </Text> 83 <Text style={[a.text_md, t.atoms.text_contrast_medium]}>

··· 77 ) : ( 78 <View style={[!gtMobile && a.gap_lg]}> 79 <View style={[a.gap_sm, gtMobile && a.pb_lg]}> 80 + <Text style={[a.font_semi_bold, a.text_2xl]}> 81 <Trans>Invite people to this starter pack!</Trans> 82 </Text> 83 <Text style={[a.text_md, t.atoms.text_contrast_medium]}>

+2 -2

src/components/StarterPack/StarterPackCard.tsx

··· 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>

··· 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>

+1 -1

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

··· 105 : [a.pb_sm, a.align_end], 106 ]}> 107 <View style={{width: 60}} /> 108 - <Text style={[a.font_bold, a.text_xl]}> 109 {state.currentStep === 'Profiles' ? ( 110 <Trans>Edit People</Trans> 111 ) : (

··· 105 : [a.pb_sm, a.align_end], 106 ]}> 107 <View style={{width: 60}} /> 108 + <Text style={[a.font_semi_bold, a.text_xl]}> 109 {state.currentStep === 'Profiles' ? ( 110 <Trans>Edit People</Trans> 111 ) : (

+1 -1

src/components/StarterPack/Wizard/WizardListCard.tsx

··· 83 emoji 84 style={[ 85 a.flex_1, 86 - a.font_bold, 87 a.text_md, 88 a.leading_tight, 89 a.self_start,

··· 83 emoji 84 style={[ 85 a.flex_1, 86 + a.font_semi_bold, 87 a.text_md, 88 a.leading_tight, 89 a.self_start,

+1 -1

src/components/SubtleWebHover.web.tsx

··· 11 if (isTouchDevice) { 12 return null 13 } 14 - let opacity: number 15 switch (t.name) { 16 case 'dark': 17 opacity = 0.4

··· 11 if (isTouchDevice) { 12 return null 13 } 14 + let opacity = 0.5 15 switch (t.name) { 16 case 'dark': 17 opacity = 0.4

+1 -1

src/components/TrendingTopics.tsx

··· 90 91 <Text 92 style={[ 93 - a.font_bold, 94 a.leading_tight, 95 isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}], 96 ]}

··· 90 91 <Text 92 style={[ 93 + a.font_semi_bold, 94 a.leading_tight, 95 isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}], 96 ]}

+9 -3

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 style={[a.text_sm, a.font_bold, {color: 'white'}]}> 0 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'}]}> 0 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'}]}> 0 0 0 0 524 {formatCount(i18n, likeCount)} 525 </Text> 526 </View>

··· 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>

+2 -2

src/components/WelcomeModal.tsx

··· 108 <Text 109 style={[ 110 a.text_2xl, 111 - a.font_bold, 112 a.user_select_none, 113 {color: '#354358', letterSpacing: -0.5}, 114 ]}> ··· 127 <Text 128 style={[ 129 gtMobile ? a.text_4xl : a.text_3xl, 130 - a.font_bold, 131 a.text_center, 132 {color: '#354358'}, 133 web({

··· 108 <Text 109 style={[ 110 a.text_2xl, 111 + a.font_semi_bold, 112 a.user_select_none, 113 {color: '#354358', letterSpacing: -0.5}, 114 ]}> ··· 127 <Text 128 style={[ 129 gtMobile ? a.text_4xl : a.text_3xl, 130 + a.font_semi_bold, 131 a.text_center, 132 {color: '#354358'}, 133 web({

+1 -1

src/components/WhoCanReply.tsx

··· 188 label={_(msg`Dialog: adjust who can interact with this post`)} 189 style={web({maxWidth: 400})}> 190 <View style={[a.gap_sm]}> 191 - <Text style={[a.font_bold, a.text_xl, a.pb_sm]}> 192 <Trans>Who can interact with this post?</Trans> 193 </Text> 194 <Rules

··· 188 label={_(msg`Dialog: adjust who can interact with this post`)} 189 style={web({maxWidth: 400})}> 190 <View style={[a.gap_sm]}> 191 + <Text style={[a.font_semi_bold, a.text_xl, a.pb_sm]}> 192 <Trans>Who can interact with this post?</Trans> 193 </Text> 194 <Rules

+1 -1

src/components/activity-notifications/SubscribeProfileDialog.tsx

··· 219 label={_(msg`Get notified of new posts from ${name}`)}> 220 <View style={[a.gap_lg]}> 221 <View style={[a.gap_xs]}> 222 - <Text style={[a.font_heavy, a.text_2xl]}> 223 <Trans>Keep me posted</Trans> 224 </Text> 225 <Text style={[t.atoms.text_contrast_medium, a.text_md]}>

··· 219 label={_(msg`Get notified of new posts from ${name}`)}> 220 <View style={[a.gap_lg]}> 221 <View style={[a.gap_xs]}> 222 + <Text style={[a.font_bold, a.text_2xl]}> 223 <Trans>Keep me posted</Trans> 224 </Text> 225 <Text style={[t.atoms.text_contrast_medium, a.text_md]}>

+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_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 }}>

··· 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 }}>

+1 -1

src/components/ageAssurance/AgeAssuranceAppealDialog.tsx

··· 89 <AgeAssuranceBadge /> 90 </View> 91 92 - <Text style={[a.text_2xl, a.font_heavy, a.pt_md, a.leading_tight]}> 93 <Trans>Contact us</Trans> 94 </Text> 95

··· 89 <AgeAssuranceBadge /> 90 </View> 91 92 + <Text style={[a.text_2xl, a.font_bold, a.pt_md, a.leading_tight]}> 93 <Trans>Contact us</Trans> 94 </Text> 95

+1 -1

src/components/ageAssurance/AgeAssuranceBadge.tsx

··· 29 <Shield size="sm" /> 30 <Text 31 style={[ 32 - a.font_bold, 33 a.leading_snug, 34 { 35 color: select(t.name, {

··· 29 <Shield size="sm" /> 30 <Text 31 style={[ 32 + a.font_semi_bold, 33 a.leading_snug, 34 { 35 color: select(t.name, {

+1 -1

src/components/ageAssurance/AgeAssuranceInitDialog.tsx

··· 178 <View style={[a.align_start]}> 179 <AgeAssuranceBadge /> 180 181 - <Text style={[a.text_xl, a.font_heavy, a.pt_xl, a.pb_md]}> 182 {success ? <Trans>Success!</Trans> : <Trans>Verify your age</Trans>} 183 </Text> 184

··· 178 <View style={[a.align_start]}> 179 <AgeAssuranceBadge /> 180 181 + <Text style={[a.text_xl, a.font_bold, a.pt_xl, a.pb_md]}> 182 {success ? <Trans>Success!</Trans> : <Trans>Verify your age</Trans>} 183 </Text> 184

+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_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

··· 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

+1 -1

src/components/ageAssurance/AgeRestrictedScreen.tsx

··· 62 </View> 63 64 <View style={[a.gap_sm, a.pb_lg]}> 65 - <Text style={[a.text_xl, a.leading_snug, a.font_heavy]}> 66 <Trans> 67 You must complete age assurance in order to access this screen. 68 </Trans>

··· 62 </View> 63 64 <View style={[a.gap_sm, a.pb_lg]}> 65 + <Text style={[a.text_xl, a.leading_snug, a.font_bold]}> 66 <Trans> 67 You must complete age assurance in order to access this screen. 68 </Trans>

+1 -1

src/components/dialogs/BirthDateSettings.tsx

··· 38 label={_(msg`My Birthday`)} 39 style={web({maxWidth: 400})}> 40 <View style={[a.gap_sm]}> 41 - <Text style={[a.text_xl, a.font_bold]}> 42 <Trans>My Birthday</Trans> 43 </Text> 44 <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>

··· 38 label={_(msg`My Birthday`)} 39 style={web({maxWidth: 400})}> 40 <View style={[a.gap_sm]}> 41 + <Text style={[a.text_xl, a.font_semi_bold]}> 42 <Trans>My Birthday</Trans> 43 </Text> 44 <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>

+1 -1

src/components/dialogs/DeviceLocationRequestDialog.tsx

··· 108 109 return ( 110 <View style={[a.gap_md]}> 111 - <Text style={[a.text_xl, a.font_heavy]}> 112 <Trans>Confirm your location</Trans> 113 </Text> 114 <View style={[a.gap_sm, a.pb_xs]}>

··· 108 109 return ( 110 <View style={[a.gap_md]}> 111 + <Text style={[a.text_xl, a.font_bold]}> 112 <Trans>Confirm your location</Trans> 113 </Text> 114 <View style={[a.gap_sm, a.pb_xs]}>

+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_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

··· 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

+1 -1

src/components/dialogs/EmailDialog/screens/Manage2FA/Enable.tsx

··· 88 return ( 89 <View style={[a.gap_lg]}> 90 <View style={[a.gap_sm]}> 91 - <Text style={[a.text_xl, a.font_heavy, a.leading_snug]}> 92 <Trans>Enable email 2FA</Trans> 93 </Text> 94

··· 88 return ( 89 <View style={[a.gap_lg]}> 90 <View style={[a.gap_sm]}> 91 + <Text style={[a.text_xl, a.font_bold, a.leading_snug]}> 92 <Trans>Enable email 2FA</Trans> 93 </Text> 94

+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_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>

··· 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>

+1 -1

src/components/dialogs/EmailDialog/screens/VerificationReminder.tsx

··· 58 <View style={[a.mb_xs, {height: 150 - dialogPadding}]} /> 59 60 <View style={[a.gap_sm]}> 61 - <Text style={[a.text_xl, a.font_heavy]}> 62 <Trans>Please verify your email</Trans> 63 </Text> 64 <Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>

··· 58 <View style={[a.mb_xs, {height: 150 - dialogPadding}]} /> 59 60 <View style={[a.gap_sm]}> 61 + <Text style={[a.text_xl, a.font_bold]}> 62 <Trans>Please verify your email</Trans> 63 </Text> 64 <Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>

+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_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.

··· 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.

+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_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

··· 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

+1 -1

src/components/dialogs/EmbedConsent.tsx

··· 54 label={_(msg`External Media`)} 55 style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}> 56 <View style={a.gap_sm}> 57 - <Text style={[a.text_2xl, a.font_bold]}> 58 <Trans>External Media</Trans> 59 </Text> 60

··· 54 label={_(msg`External Media`)} 55 style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}> 56 <View style={a.gap_sm}> 57 + <Text style={[a.text_2xl, a.font_semi_bold]}> 58 <Trans>External Media</Trans> 59 </Text> 60

+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_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]}>

··· 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]}>

+3 -2

src/components/dialogs/LinkWarning.tsx

··· 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]}> 0 155 {hostname} 156 </Text> 157 {rest}

··· 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}

+15 -8

src/components/dialogs/MutedWords.tsx

··· 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]}> 0 0 0 0 0 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]}> 0 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]}> 0 480 tags 481 </Text> 482 </Text>

··· 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>

+7 -5

src/components/dialogs/PostInteractionSettingsDialog.tsx

··· 84 ]}> 85 <Trans> 86 You can set default interaction settings in{' '} 87 - <Text style={[a.font_bold, t.atoms.text_contrast_medium]}> 88 Settings &rarr; Moderation &rarr; 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> 0 0 539 {isSelected ? ( 540 <Check size="sm" fill={t.palette.primary_500} /> 541 ) : (

··· 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 &rarr; Moderation &rarr; 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 ) : (

+1 -1

src/components/dialogs/SearchablePeopleList.tsx

··· 284 style={[ 285 a.z_10, 286 a.text_lg, 287 - a.font_heavy, 288 a.leading_tight, 289 t.atoms.text_contrast_high, 290 ]}>

··· 284 style={[ 285 a.z_10, 286 a.text_lg, 287 + a.font_bold, 288 a.leading_tight, 289 t.atoms.text_contrast_high, 290 ]}>

+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_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

··· 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

+1 -1

src/components/dialogs/SwitchAccount.tsx

··· 45 <Dialog.Handle /> 46 <Dialog.ScrollableInner label={_(msg`Switch Account`)}> 47 <View style={[a.gap_lg]}> 48 - <Text style={[a.text_2xl, a.font_bold]}> 49 <Trans>Switch Account</Trans> 50 </Text> 51

··· 45 <Dialog.Handle /> 46 <Dialog.ScrollableInner label={_(msg`Switch Account`)}> 47 <View style={[a.gap_lg]}> 48 + <Text style={[a.text_2xl, a.font_semi_bold]}> 49 <Trans>Switch Account</Trans> 50 </Text> 51

+2 -2

src/components/dialogs/nuxs/ActivitySubscriptions.tsx

··· 66 <SparkleIcon fill={t.palette.primary_800} size="sm" /> 67 <Text 68 style={[ 69 - a.font_bold, 70 { 71 color: t.palette.primary_800, 72 }, ··· 127 style={[ 128 a.text_3xl, 129 a.leading_tight, 130 - a.font_heavy, 131 a.text_center, 132 { 133 fontSize: isWeb ? 28 : 32,

··· 66 <SparkleIcon fill={t.palette.primary_800} size="sm" /> 67 <Text 68 style={[ 69 + a.font_semi_bold, 70 { 71 color: t.palette.primary_800, 72 }, ··· 127 style={[ 128 a.text_3xl, 129 a.leading_tight, 130 + a.font_bold, 131 a.text_center, 132 { 133 fontSize: isWeb ? 28 : 32,

+2 -2

src/components/dialogs/nuxs/BookmarksAnnouncement.tsx

··· 65 <SparkleIcon fill={t.palette.primary_800} size="sm" /> 66 <Text 67 style={[ 68 - a.font_bold, 69 { 70 color: t.palette.primary_800, 71 }, ··· 133 style={[ 134 a.text_3xl, 135 a.leading_tight, 136 - a.font_heavy, 137 a.text_center, 138 { 139 fontSize: isWeb ? 28 : 32,

··· 65 <SparkleIcon fill={t.palette.primary_800} size="sm" /> 66 <Text 67 style={[ 68 + a.font_semi_bold, 69 { 70 color: t.palette.primary_800, 71 }, ··· 133 style={[ 134 a.text_3xl, 135 a.leading_tight, 136 + a.font_bold, 137 a.text_center, 138 { 139 fontSize: isWeb ? 28 : 32,

+4 -4

src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx

··· 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>

··· 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>

+3 -1

src/components/dms/ChatEmptyPill.tsx

··· 89 onPress={onPress} 90 onPressIn={onPressIn} 91 onPressOut={onPressOut}> 92 - <Text style={[a.font_bold, a.pointer_events_none]} selectable={false}> 0 0 93 {prompts[promptIndex]} 94 </Text> 95 </AnimatedPressable>

··· 89 onPress={onPress} 90 onPressIn={onPressIn} 91 onPressOut={onPressOut}> 92 + <Text 93 + style={[a.font_semi_bold, a.pointer_events_none]} 94 + selectable={false}> 95 {prompts[promptIndex]} 96 </Text> 97 </AnimatedPressable>

+2 -1

src/components/dms/DateDivider.tsx

··· 67 a.px_md, 68 ]}> 69 <Trans> 70 - <Text style={[a.text_xs, t.atoms.text_contrast_medium, a.font_bold]}> 0 71 {date} 72 </Text>{' '} 73 at {time}

··· 67 a.px_md, 68 ]}> 69 <Trans> 70 + <Text 71 + style={[a.text_xs, t.atoms.text_contrast_medium, a.font_semi_bold]}> 72 {date} 73 </Text>{' '} 74 at {time}

+1 -1

src/components/dms/EmojiPopup.android.tsx

··· 51 a.border_b, 52 t.atoms.border_contrast_low, 53 ]}> 54 - <Text style={[a.font_bold, a.text_md]}> 55 <Trans>Add Reaction</Trans> 56 </Text> 57 <Button

··· 51 a.border_b, 52 t.atoms.border_contrast_low, 53 ]}> 54 + <Text style={[a.font_semi_bold, a.text_md]}> 55 <Trans>Add Reaction</Trans> 56 </Text> 57 <Button

+1 -1

src/components/dms/MessagesListBlockedFooter.tsx

··· 61 return ( 62 <View style={[hasMessages && a.pt_md, a.pb_xl, a.gap_lg]}> 63 <Divider /> 64 - <Text style={[a.text_md, a.font_bold, a.text_center]}> 65 {isBlocking ? ( 66 <Trans>You have blocked this user</Trans> 67 ) : (

··· 61 return ( 62 <View style={[hasMessages && a.pt_md, a.pb_xl, a.gap_lg]}> 63 <Divider /> 64 + <Text style={[a.text_md, a.font_semi_bold, a.text_center]}> 65 {isBlocking ? ( 66 <Trans>You have blocked this user</Trans> 67 ) : (

+1 -1

src/components/dms/MessagesListHeader.tsx

··· 154 emoji 155 style={[ 156 a.text_md, 157 - a.font_bold, 158 a.self_start, 159 web(a.leading_normal), 160 ]}

··· 154 emoji 155 style={[ 156 a.text_md, 157 + a.font_semi_bold, 158 a.self_start, 159 web(a.leading_normal), 160 ]}

+1 -1

src/components/dms/NewMessagesPill.tsx

··· 88 onPress={onPress} 89 onPressIn={onPressIn} 90 onPressOut={onPressOut}> 91 - <Text style={[a.font_bold]}> 92 <Trans>New messages</Trans> 93 </Text> 94 </AnimatedPressable>

··· 88 onPress={onPress} 89 onPressIn={onPressIn} 90 onPressOut={onPressOut}> 91 + <Text style={[a.font_semi_bold]}> 92 <Trans>New messages</Trans> 93 </Text> 94 </AnimatedPressable>

+5 -4

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_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]}> 0 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]}>

··· 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]}>

+2 -1

src/components/forms/FormError.tsx

··· 20 ]}> 21 <Warning fill={t.palette.white} size="md" /> 22 <View style={[a.flex_1]}> 23 - <Text style={[{color: t.palette.white}, a.font_bold, a.leading_snug]}> 0 24 {error} 25 </Text> 26 </View>

··· 20 ]}> 21 <Warning fill={t.palette.white} size="md" /> 22 <View style={[a.flex_1]}> 23 + <Text 24 + style={[{color: t.palette.white}, a.font_semi_bold, a.leading_snug]}> 25 {error} 26 </Text> 27 </View>

+19 -9

src/components/forms/TextField.tsx

··· 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, 0 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 0 0 0 0 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]}> 0 0 0 0 0 291 {children} 292 </Text> 293 )

··· 15 android, 16 applyFonts, 17 atoms as a, 0 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 )

+1 -1

src/components/forms/Toggle.tsx

··· 249 return ( 250 <Text 251 style={[ 252 - a.font_bold, 253 a.leading_tight, 254 { 255 userSelect: 'none',

··· 249 return ( 250 <Text 251 style={[ 252 + a.font_semi_bold, 253 a.leading_tight, 254 { 255 userSelect: 'none',

+1 -1

src/components/forms/ToggleButton.tsx

··· 133 <Text 134 style={[ 135 a.text_center, 136 - a.font_bold, 137 t.atoms.text_contrast_medium, 138 textStyles, 139 ]}>

··· 133 <Text 134 style={[ 135 a.text_center, 136 + a.font_semi_bold, 137 t.atoms.text_contrast_medium, 138 textStyles, 139 ]}>

+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_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 .

··· 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 .

+2 -2

src/components/interstitials/Trending.tsx

··· 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}

··· 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}

+1 -1

src/components/interstitials/TrendingVideos.tsx

··· 82 a.align_center, 83 a.justify_between, 84 ]}> 85 - <Text style={[a.text_sm, a.font_bold, a.leading_snug]}> 86 <Trans>Trending Videos</Trans> 87 </Text> 88 <Button

··· 82 a.align_center, 83 a.justify_between, 84 ]}> 85 + <Text style={[a.text_sm, a.font_semi_bold, a.leading_snug]}> 86 <Trans>Trending Videos</Trans> 87 </Text> 88 <Button

+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_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 ? (

··· 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 ? (

+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_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 ? (

··· 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 ? (

+1 -1

src/components/live/LinkPreview.tsx

··· 70 <> 71 <Text 72 numberOfLines={2} 73 - style={[a.leading_snug, a.font_bold, a.text_md]}> 74 {linkMeta.title || linkMeta.url} 75 </Text> 76 <View style={[a.flex_row, a.align_center, a.gap_2xs]}>

··· 70 <> 71 <Text 72 numberOfLines={2} 73 + style={[a.leading_snug, a.font_semi_bold, a.text_md]}> 74 {linkMeta.title || linkMeta.url} 75 </Text> 76 <View style={[a.flex_row, a.align_center, a.gap_2xs]}>

+1 -1

src/components/live/LiveIndicator.tsx

··· 39 <Text 40 style={[ 41 a.text_center, 42 - a.font_bold, 43 fontSize, 44 {color: t.palette.white}, 45 ]}>

··· 39 <Text 40 style={[ 41 a.text_center, 42 + a.font_semi_bold, 43 fontSize, 44 {color: t.palette.white}, 45 ]}>

+1 -1

src/components/live/LiveStatusDialog.tsx

··· 137 <View style={[a.w_full, a.justify_center, a.gap_2xs]}> 138 <Text 139 numberOfLines={3} 140 - style={[a.leading_snug, a.font_bold, a.text_xl]}> 141 {embed.external.title || embed.external.uri} 142 </Text> 143 <View style={[a.flex_row, a.align_center, a.gap_2xs]}>

··· 137 <View style={[a.w_full, a.justify_center, a.gap_2xs]}> 138 <Text 139 numberOfLines={3} 140 + style={[a.leading_snug, a.font_semi_bold, a.text_xl]}> 141 {embed.external.title || embed.external.uri} 142 </Text> 143 <View style={[a.flex_row, a.align_center, a.gap_2xs]}>

+4 -4

src/components/moderation/ContentHider.tsx

··· 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,

··· 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,

+8 -3

src/components/moderation/LabelPreference.tsx

··· 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]}> 0 0 0 0 0 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>

··· 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>

+3 -3

src/components/moderation/LabelsOnMeDialog.tsx

··· 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]}>

··· 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]}>

+1 -1

src/components/moderation/ModerationDetailsDialog.tsx

··· 142 paddingBottom: 0, 143 }}> 144 <View style={[xGutters, a.pb_lg]}> 145 - <Text emoji style={[t.atoms.text, a.text_2xl, a.font_heavy, a.mb_sm]}> 146 {name} 147 </Text> 148 <Text style={[t.atoms.text, a.text_sm, a.leading_snug]}>

··· 142 paddingBottom: 0, 143 }}> 144 <View style={[xGutters, a.pb_lg]}> 145 + <Text emoji style={[t.atoms.text, a.text_2xl, a.font_bold, a.mb_sm]}> 146 {name} 147 </Text> 148 <Text style={[t.atoms.text, a.text_sm, a.leading_snug]}>

+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_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

··· 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

+8 -2

src/components/moderation/ScreenHider.tsx

··· 86 </View> 87 </View> 88 <Text 89 - style={[a.text_4xl, a.font_bold, a.text_center, a.mb_md, t.atoms.text]}> 0 0 0 0 0 0 90 {isNoPwi ? ( 91 <Trans>Sign-in Required</Trans> 92 ) : ( ··· 112 <Text 113 style={[ 114 a.text_lg, 115 - a.font_bold, 116 a.leading_snug, 117 t.atoms.text, 118 a.ml_xs,

··· 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

··· 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>

··· 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>

+2 -1

src/components/verification/VerifierDialog.tsx

··· 89 </View> 90 91 <View style={[a.gap_sm]}> 92 - <Text style={[a.text_2xl, a.font_bold, a.pr_4xl, a.leading_tight]}> 0 93 {label} 94 </Text> 95 <Text style={[a.text_md, a.leading_snug]}>

··· 89 </View> 90 91 <View style={[a.gap_sm]}> 92 + <Text 93 + style={[a.text_2xl, a.font_semi_bold, a.pr_4xl, a.leading_tight]}> 94 {label} 95 </Text> 96 <Text style={[a.text_md, a.leading_snug]}>

+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' 0 4 5 - import {type ThemeName} from '#/alf/types' 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 + import {type ThemeName} from '@bsky.app/alf' 5 0 6 import {darkTheme, defaultTheme, dimTheme} from './themes' 7 8 export type ColorScheme = 'light' | 'dark'

+2 -2

src/lib/custom-animations/CountWheel.tsx

··· 147 big ? a.text_md : a.text_sm, 148 a.user_select_none, 149 isLiked 150 - ? [a.font_bold, s.likeColor] 151 : {color: t.palette.contrast_500}, 152 ]}> 153 {formattedCount} ··· 165 big ? a.text_md : a.text_sm, 166 a.user_select_none, 167 isLiked 168 - ? [a.font_bold, s.likeColor] 169 : {color: t.palette.contrast_500}, 170 ]}> 171 {formattedPrevCount}

··· 147 big ? a.text_md : a.text_sm, 148 a.user_select_none, 149 isLiked 150 + ? [a.font_semi_bold, s.likeColor] 151 : {color: t.palette.contrast_500}, 152 ]}> 153 {formattedCount} ··· 165 big ? a.text_md : a.text_sm, 166 a.user_select_none, 167 isLiked 168 + ? [a.font_semi_bold, s.likeColor] 169 : {color: t.palette.contrast_500}, 170 ]}> 171 {formattedPrevCount}

+2 -2

src/lib/custom-animations/CountWheel.web.tsx

··· 93 big ? a.text_md : a.text_sm, 94 a.user_select_none, 95 isLiked 96 - ? [a.font_bold, s.likeColor] 97 : {color: t.palette.contrast_500}, 98 ]}> 99 {formattedCount} ··· 110 big ? a.text_md : a.text_sm, 111 a.user_select_none, 112 isLiked 113 - ? [a.font_bold, s.likeColor] 114 : {color: t.palette.contrast_500}, 115 ]}> 116 {formattedPrevCount}

··· 93 big ? a.text_md : a.text_sm, 94 a.user_select_none, 95 isLiked 96 + ? [a.font_semi_bold, s.likeColor] 97 : {color: t.palette.contrast_500}, 98 ]}> 99 {formattedCount} ··· 110 big ? a.text_md : a.text_sm, 111 a.user_select_none, 112 isLiked 113 + ? [a.font_semi_bold, s.likeColor] 114 : {color: t.palette.contrast_500}, 115 ]}> 116 {formattedPrevCount}

+27 -27

src/lib/themes.ts

··· 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,

··· 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,

+1 -1

src/screens/Deactivated.tsx

··· 121 </View> 122 123 <View style={[a.gap_xs, a.pb_3xl]}> 124 - <Text style={[a.text_xl, a.font_bold, a.leading_snug]}> 125 <Trans>Welcome back!</Trans> 126 </Text> 127 <Text style={[a.text_sm, a.leading_snug]}>

··· 121 </View> 122 123 <View style={[a.gap_xs, a.pb_3xl]}> 124 + <Text style={[a.text_xl, a.font_semi_bold, a.leading_snug]}> 125 <Trans>Welcome back!</Trans> 126 </Text> 127 <Text style={[a.text_sm, a.leading_snug]}>

+1 -1

src/screens/Home/NoFeedsPinned.tsx

··· 75 }, 76 ]}> 77 <View style={[a.align_center, a.gap_sm, a.pb_xl]}> 78 - <Text style={[a.text_xl, a.font_bold]}> 79 <Trans>Whoops!</Trans> 80 </Text> 81 <Text

··· 75 }, 76 ]}> 77 <View style={[a.align_center, a.gap_sm, a.pb_xl]}> 78 + <Text style={[a.text_xl, a.font_semi_bold]}> 79 <Trans>Whoops!</Trans> 80 </Text> 81 <Text

+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_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

··· 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

+1 -1

src/screens/Login/FormContainer.tsx

··· 22 testID={testID} 23 style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.py_md], style]}> 24 {titleText && !gtMobile && ( 25 - <Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}> 26 {titleText} 27 </Text> 28 )}

··· 22 testID={testID} 23 style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.py_md], style]}> 24 {titleText && !gtMobile && ( 25 + <Text style={[a.text_xl, a.font_semi_bold, t.atoms.text_contrast_high]}> 26 {titleText} 27 </Text> 28 )}

+1 -1

src/screens/Login/PasswordUpdatedForm.tsx

··· 19 <FormContainer 20 testID="passwordUpdatedForm" 21 style={[a.gap_2xl, !gtMobile && a.mt_5xl]}> 22 - <Text style={[a.text_3xl, a.font_bold, a.text_center]}> 23 <Trans>Password updated!</Trans> 24 </Text> 25 <Text style={[a.text_center, a.mx_auto, {maxWidth: '80%'}]}>

··· 19 <FormContainer 20 testID="passwordUpdatedForm" 21 style={[a.gap_2xl, !gtMobile && a.mt_5xl]}> 22 + <Text style={[a.text_3xl, a.font_semi_bold, a.text_center]}> 23 <Trans>Password updated!</Trans> 24 </Text> 25 <Text style={[a.text_center, a.mx_auto, {maxWidth: '80%'}]}>

+4 -2

src/screens/Messages/ChatList.tsx

··· 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]}> 0 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]}> 0 302 <Trans>Nothing here</Trans> 303 </Text> 304 <Text

··· 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

+4 -2

src/screens/Messages/Inbox.tsx

··· 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]}> 0 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]}> 0 229 <Trans comment="Title message shown in chat requests inbox when it's empty"> 230 Inbox zero! 231 </Trans>

··· 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>

+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_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

··· 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

+7 -2

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={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}> 0 0 0 0 0 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]}>

··· 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]}>

+2 -2

src/screens/Messages/components/ChatListItem.tsx

··· 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}

··· 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}

+1 -1

src/screens/Messages/components/InboxPreview.tsx

··· 57 )} 58 </View> 59 <ButtonText 60 - style={[a.flex_1, a.font_bold, a.text_left]} 61 numberOfLines={1}> 62 <Trans>Chat requests</Trans> 63 </ButtonText>

··· 57 )} 58 </View> 59 <ButtonText 60 + style={[a.flex_1, a.font_semi_bold, a.text_left]} 61 numberOfLines={1}> 62 <Trans>Chat requests</Trans> 63 </ButtonText>

+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_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_semi_bold]}> 42 <Trans comment="Accept a chat request">Accept Request</Trans> 43 </Text> 44 </View>

+12 -6

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_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]}> 0 0 0 0 0 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]}> 0 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,

··· 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,

+2 -5

src/screens/Onboarding/Layout.tsx

··· 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}

··· 17 useTheme, 18 web, 19 } from '#/alf' 0 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, 0 0 238 flatten(style), 239 ]}> 240 {children}

+4 -4

src/screens/Onboarding/StepFinished.tsx

··· 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

··· 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

+1 -1

src/screens/Onboarding/StepInterests/InterestButton.tsx

··· 69 { 70 color: t.palette.contrast_900, 71 }, 72 - a.font_bold, 73 native({paddingTop: 2}), 74 ctx.selected ? styles.textSelected : {}, 75 ]}>

··· 69 { 70 color: t.palette.contrast_900, 71 }, 72 + a.font_semi_bold, 73 native({paddingTop: 2}), 74 ctx.selected ? styles.textSelected : {}, 75 ]}>

+1 -1

src/screens/Onboarding/StepInterests/index.tsx

··· 184 <Text 185 style={[ 186 a.text_md, 187 - a.font_bold, 188 { 189 color: t.palette.negative_900, 190 },

··· 184 <Text 185 style={[ 186 a.text_md, 187 + a.font_semi_bold, 188 { 189 color: t.palette.negative_900, 190 },

+1 -1

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

··· 133 134 return ( 135 <View style={[a.align_start]} testID="onboardingInterests"> 136 - <Text style={[a.font_heavy, a.text_3xl]}> 137 <Trans comment="Accounts suggested to the user for them to follow"> 138 Suggested for you 139 </Trans>

··· 133 134 return ( 135 <View style={[a.align_start]} testID="onboardingInterests"> 136 + <Text style={[a.font_bold, a.text_3xl]}> 137 <Trans comment="Accounts suggested to the user for them to follow"> 138 Suggested for you 139 </Trans>

+6 -1

src/screens/PostThread/components/ThreadError.tsx

··· 58 ]}> 59 <View style={[a.gap_xs]}> 60 <Text 61 - style={[a.text_center, a.text_lg, a.font_bold, a.leading_snug]}> 0 0 0 0 0 62 {title} 63 </Text> 64 <Text

··· 58 ]}> 59 <View style={[a.gap_xs]}> 60 <Text 61 + style={[ 62 + a.text_center, 63 + a.text_lg, 64 + a.font_semi_bold, 65 + a.leading_snug, 66 + ]}> 67 {title} 68 </Text> 69 <Text

+16 -10

src/screens/PostThread/components/ThreadItemAnchor.tsx

··· 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]}> 0 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>. 0 0 0 0 0 675 </Trans> 676 </Prompt.DescriptionText> 677 <Text

··· 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

+2 -1

src/screens/PostThread/components/ThreadItemPost.tsx

··· 106 ]}> 107 <TrashIcon style={[t.atoms.text_contrast_medium]} /> 108 </View> 109 - <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}> 0 110 <Trans>Post has been deleted</Trans> 111 </Text> 112 </View>

··· 106 ]}> 107 <TrashIcon style={[t.atoms.text_contrast_medium]} /> 108 </View> 109 + <Text 110 + style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}> 111 <Trans>Post has been deleted</Trans> 112 </Text> 113 </View>

+2 -1

src/screens/PostThread/components/ThreadItemPostTombstone.tsx

··· 46 <View style={[a.flex_row, a.justify_center, {width: LINEAR_AVI_WIDTH}]}> 47 <Icon style={[t.atoms.text_contrast_medium]} /> 48 </View> 49 - <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}> 0 50 {copy} 51 </Text> 52 </View>

··· 46 <View style={[a.flex_row, a.justify_center, {width: LINEAR_AVI_WIDTH}]}> 47 <Icon style={[t.atoms.text_contrast_medium]} /> 48 </View> 49 + <Text 50 + style={[a.text_md, a.font_semi_bold, t.atoms.text_contrast_medium]}> 51 {copy} 52 </Text> 53 </View>

+1 -1

src/screens/Profile/ErrorState.tsx

··· 27 <View style={[a.px_xl]}> 28 <CircleInfo width={48} style={[t.atoms.text_contrast_low]} /> 29 30 - <Text style={[a.text_xl, a.font_bold, a.pb_md, a.pt_xl]}> 31 <Trans>Hmmmm, we couldn't load that moderation service.</Trans> 32 </Text> 33 <Text

··· 27 <View style={[a.px_xl]}> 28 <CircleInfo width={48} style={[t.atoms.text_contrast_low]} /> 29 30 + <Text style={[a.text_xl, a.font_semi_bold, a.pb_md, a.pt_xl]}> 31 <Trans>Hmmmm, we couldn't load that moderation service.</Trans> 32 </Text> 33 <Text

+1 -1

src/screens/Profile/Header/DisplayName.tsx

··· 26 t.atoms.text, 27 gtMobile ? a.text_4xl : a.text_3xl, 28 a.self_start, 29 - a.font_heavy, 30 ]}> 31 {sanitizeDisplayName( 32 profile.displayName || sanitizeHandle(profile.handle),

··· 26 t.atoms.text, 27 gtMobile ? a.text_4xl : a.text_3xl, 28 a.self_start, 29 + a.font_bold, 30 ]}> 31 {sanitizeDisplayName( 32 profile.displayName || sanitizeHandle(profile.handle),

+2 -2

src/screens/Profile/Header/EditProfileDialog.tsx

··· 326 style={[ 327 a.text_sm, 328 a.mt_xs, 329 - a.font_bold, 330 {color: t.palette.negative_400}, 331 ]}> 332 <Plural ··· 377 style={[ 378 a.text_sm, 379 a.mt_xs, 380 - a.font_bold, 381 {color: t.palette.negative_400}, 382 ]}> 383 <Plural

··· 326 style={[ 327 a.text_sm, 328 a.mt_xs, 329 + a.font_semi_bold, 330 {color: t.palette.negative_400}, 331 ]}> 332 <Plural ··· 377 style={[ 378 a.text_sm, 379 a.mt_xs, 380 + a.font_semi_bold, 381 {color: t.palette.negative_400}, 382 ]}> 383 <Plural

+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_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'})}

··· 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'})}

+2 -2

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

··· 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) &&

··· 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) &&

+1 -1

src/screens/Profile/Header/ProfileHeaderStandard.tsx

··· 267 t.atoms.text, 268 gtMobile ? a.text_4xl : a.text_3xl, 269 a.self_start, 270 - a.font_heavy, 271 a.leading_tight, 272 ]}> 273 {sanitizeDisplayName(

··· 267 t.atoms.text, 268 gtMobile ? a.text_4xl : a.text_3xl, 269 a.self_start, 270 + a.font_bold, 271 a.leading_tight, 272 ]}> 273 {sanitizeDisplayName(

+2 -2

src/screens/Profile/components/ProfileFeedHeader.tsx

··· 234 <Text 235 style={[ 236 a.text_md, 237 - a.font_heavy, 238 a.leading_tight, 239 gtMobile && a.text_lg, 240 ]} ··· 441 442 <View style={[a.flex_1, a.gap_2xs]}> 443 <Text 444 - style={[a.text_2xl, a.font_heavy, a.leading_tight]} 445 numberOfLines={2}> 446 {info.displayName} 447 </Text>

··· 234 <Text 235 style={[ 236 a.text_md, 237 + a.font_bold, 238 a.leading_tight, 239 gtMobile && a.text_lg, 240 ]} ··· 441 442 <View style={[a.flex_1, a.gap_2xs]}> 443 <Text 444 + style={[a.text_2xl, a.font_bold, a.leading_tight]} 445 numberOfLines={2}> 446 {info.displayName} 447 </Text>

+1 -1

src/screens/ProfileList/components/ErrorScreen.tsx

··· 22 23 return ( 24 <View style={[a.px_xl, a.py_md, a.gap_md]}> 25 - <Text style={[a.text_4xl, a.font_heavy]}> 26 <Trans>Could not load list</Trans> 27 </Text> 28 <Text style={[a.text_md, t.atoms.text_contrast_high, a.leading_snug]}>

··· 22 23 return ( 24 <View style={[a.px_xl, a.py_md, a.gap_md]}> 25 + <Text style={[a.text_4xl, a.font_bold]}> 26 <Trans>Could not load list</Trans> 27 </Text> 28 <Text style={[a.text_md, t.atoms.text_contrast_high, a.leading_snug]}>

+2 -2

src/screens/SavedFeeds.tsx

··· 374 a.border_b, 375 t.atoms.border_contrast_low, 376 ]}> 377 - <Text style={[a.text_xl, a.font_heavy, a.leading_snug]}>{children}</Text> 378 </View> 379 ) 380 } ··· 406 /> 407 </View> 408 <View style={[a.flex_1, a.flex_row, a.gap_sm, a.align_center]}> 409 - <Text style={[a.text_sm, a.font_bold, a.leading_snug]}> 410 <Trans context="feed-name">Following</Trans> 411 </Text> 412 </View>

··· 374 a.border_b, 375 t.atoms.border_contrast_low, 376 ]}> 377 + <Text style={[a.text_xl, a.font_bold, a.leading_snug]}>{children}</Text> 378 </View> 379 ) 380 } ··· 406 /> 407 </View> 408 <View style={[a.flex_1, a.flex_row, a.gap_sm, a.align_center]}> 409 + <Text style={[a.text_sm, a.font_semi_bold, a.leading_snug]}> 410 <Trans context="feed-name">Following</Trans> 411 </Text> 412 </View>

+1 -1

src/screens/Search/Explore.tsx

··· 885 ]}> 886 <CircleInfo size="md" fill={t.palette.negative_400} /> 887 <View style={[a.flex_1, a.gap_sm]}> 888 - <Text style={[a.font_bold, a.leading_snug]}> 889 {item.message} 890 </Text> 891 <Text

··· 885 ]}> 886 <CircleInfo size="md" fill={t.palette.negative_400} /> 887 <View style={[a.flex_1, a.gap_sm]}> 888 + <Text style={[a.font_semi_bold, a.leading_snug]}> 889 {item.message} 890 </Text> 891 <Text

+1 -1

src/screens/Search/Shell.tsx

··· 460 a.pt_sm, 461 a.pb_lg, 462 ]}> 463 - <Text style={[a.text_2xl, a.font_heavy]}> 464 <Trans>Search</Trans> 465 </Text> 466 </View>

··· 460 a.pt_sm, 461 a.pb_lg, 462 ]}> 463 + <Text style={[a.text_2xl, a.font_bold]}> 464 <Trans>Search</Trans> 465 </Text> 466 </View>

+5 -1

src/screens/Search/components/ModuleHeader.tsx

··· 93 94 export function TitleText({style, ...props}: TextProps) { 95 return ( 96 - <Text style={[a.font_bold, a.flex_1, a.text_xl, style]} emoji {...props} /> 0 0 0 0 97 ) 98 } 99

··· 93 94 export function TitleText({style, ...props}: TextProps) { 95 return ( 96 + <Text 97 + style={[a.font_semi_bold, a.flex_1, a.text_xl, style]} 98 + emoji 99 + {...props} 100 + /> 101 ) 102 } 103

+1 -1

src/screens/Search/components/SearchHistory.tsx

··· 45 <View style={[a.w_full, a.gap_md]}> 46 {(searchHistory.length > 0 || selectedProfiles.length > 0) && ( 47 <View style={[a.px_lg, a.pt_sm]}> 48 - <Text style={[a.text_md, a.font_bold]}> 49 <Trans>Recent Searches</Trans> 50 </Text> 51 </View>

··· 45 <View style={[a.w_full, a.gap_md]}> 46 {(searchHistory.length > 0 || selectedProfiles.length > 0) && ( 47 <View style={[a.px_lg, a.pt_sm]}> 48 + <Text style={[a.text_md, a.font_semi_bold]}> 49 <Trans>Recent Searches</Trans> 50 </Text> 51 </View>

+2 -2

src/screens/Search/components/StarterPackCard.tsx

··· 89 <View style={[a.flex_1]}> 90 <Text 91 emoji 92 - style={[a.text_md, a.font_bold, a.leading_snug]} 93 numberOfLines={1}> 94 {record.name} 95 </Text> ··· 242 <Text 243 style={[ 244 gtPhone ? a.text_md : a.text_xs, 245 - a.font_bold, 246 a.leading_snug, 247 {color: 'white'}, 248 ]}>

··· 89 <View style={[a.flex_1]}> 90 <Text 91 emoji 92 + style={[a.text_md, a.font_semi_bold, a.leading_snug]} 93 numberOfLines={1}> 94 {record.name} 95 </Text> ··· 242 <Text 243 style={[ 244 gtPhone ? a.text_md : a.text_xs, 245 + a.font_semi_bold, 246 a.leading_snug, 247 {color: 'white'}, 248 ]}>

+1 -1

src/screens/Search/modules/ExploreInterestsCard.tsx

··· 63 ]}> 64 <View style={[a.flex_row, a.gap_sm, a.align_center]}> 65 <Shapes /> 66 - <Text style={[a.text_xl, a.font_bold, a.leading_tight]}> 67 <Trans>Your interests</Trans> 68 </Text> 69 </View>

··· 63 ]}> 64 <View style={[a.flex_row, a.gap_sm, a.align_center]}> 65 <Shapes /> 66 + <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}> 67 <Trans>Your interests</Trans> 68 </Text> 69 </View>

+1 -1

src/screens/Search/modules/ExploreRecommendations.tsx

··· 50 fill={t.palette.primary_500} 51 style={{marginLeft: -2}} 52 /> 53 - <Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}> 54 <Trans>Recommended</Trans> 55 </Text> 56 </View>

··· 50 fill={t.palette.primary_500} 51 style={{marginLeft: -2}} 52 /> 53 + <Text style={[a.text_2xl, a.font_bold, t.atoms.text]}> 54 <Trans>Recommended</Trans> 55 </Text> 56 </View>

+2 -2

src/screens/Search/modules/ExploreTrendingTopics.tsx

··· 104 <Text 105 style={[ 106 a.text_md, 107 - a.font_bold, 108 a.leading_tight, 109 {width: 20}, 110 ]}> ··· 113 </Trans> 114 </Text> 115 <Text 116 - style={[a.text_md, a.font_bold, a.leading_tight]} 117 numberOfLines={1}> 118 {trend.displayName} 119 </Text>

··· 104 <Text 105 style={[ 106 a.text_md, 107 + a.font_semi_bold, 108 a.leading_tight, 109 {width: 20}, 110 ]}> ··· 113 </Trans> 114 </Text> 115 <Text 116 + style={[a.text_md, a.font_semi_bold, a.leading_tight]} 117 numberOfLines={1}> 118 {trend.displayName} 119 </Text>

+1 -1

src/screens/Settings/AccountSettings.tsx

··· 97 color={t.palette.primary_500} 98 /> 99 <SettingsList.ItemText 100 - style={[{color: t.palette.primary_500}, a.font_bold]}> 101 <Trans>Verify your email</Trans> 102 </SettingsList.ItemText> 103 <SettingsList.Chevron color={t.palette.primary_500} />

··· 97 color={t.palette.primary_500} 98 /> 99 <SettingsList.ItemText 100 + style={[{color: t.palette.primary_500}, a.font_semi_bold]}> 101 <Trans>Verify your email</Trans> 102 </SettingsList.ItemText> 103 <SettingsList.Chevron color={t.palette.primary_500} />

+7 -2

src/screens/Settings/AppIconSettings/index.tsx

··· 93 a.text_md, 94 a.mt_xl, 95 a.mb_sm, 96 - a.font_bold, 97 t.atoms.text_contrast_medium, 98 ]}> 99 <Trans>Bluesky+</Trans> ··· 201 const t = useTheme() 202 return ( 203 <Text 204 - style={[a.text_md, a.font_bold, a.flex_1, t.atoms.text_contrast_medium]} 0 0 0 0 0 205 emoji> 206 {children} 207 </Text>

··· 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>

+1 -1

src/screens/Settings/AppPasswords.tsx

··· 167 a.gap_sm, 168 ]}> 169 <View style={[a.gap_xs]}> 170 - <Text style={[t.atoms.text, a.text_md, a.font_bold]}> 171 {appPassword.name} 172 </Text> 173 <Text style={[t.atoms.text_contrast_medium]}>

··· 167 a.gap_sm, 168 ]}> 169 <View style={[a.gap_xs]}> 170 + <Text style={[t.atoms.text, a.text_md, a.font_semi_bold]}> 171 {appPassword.name} 172 </Text> 173 <Text style={[t.atoms.text_contrast_medium]}>

+1 -1

src/screens/Settings/InterestsSettings.tsx

··· 222 { 223 color: t.palette.contrast_900, 224 }, 225 - a.font_bold, 226 ctx.selected ? styles.textSelected : {}, 227 ]}> 228 {interestsDisplayNames[interest]}

··· 222 { 223 color: t.palette.contrast_900, 224 }, 225 + a.font_semi_bold, 226 ctx.selected ? styles.textSelected : {}, 227 ]}> 228 {interestsDisplayNames[interest]}

+5 -2

src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx

··· 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]}> 0 0 0 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 &rarr; Privacy and Security 162 </InlineLinkText> 163 .

··· 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 &rarr; Privacy and Security 165 </InlineLinkText> 166 .

+1 -1

src/screens/Settings/NotificationSettings/components/ItemTextWithSubtitle.tsx

··· 19 const t = useTheme() 20 return ( 21 <View style={[a.flex_1, bold ? a.gap_xs : a.gap_2xs]}> 22 - <SettingsList.ItemText style={bold && [a.font_bold, a.text_lg]}> 23 {titleText} 24 </SettingsList.ItemText> 25 {showSkeleton ? (

··· 19 const t = useTheme() 20 return ( 21 <View style={[a.flex_1, bold ? a.gap_xs : a.gap_2xs]}> 22 + <SettingsList.ItemText style={bold && [a.font_semi_bold, a.text_lg]}> 23 {titleText} 24 </SettingsList.ItemText> 25 {showSkeleton ? (

+1 -1

src/screens/Settings/NotificationSettings/components/PreferenceControls.tsx

··· 150 {'include' in preference && ( 151 <> 152 <Divider /> 153 - <Text style={[a.font_bold, a.text_md]}> 154 <Trans>From</Trans> 155 </Text> 156 <Toggle.Group

··· 150 {'include' in preference && ( 151 <> 152 <Divider /> 153 + <Text style={[a.font_semi_bold, a.text_md]}> 154 <Trans>From</Trans> 155 </Text> 156 <Toggle.Group

+4 -2

src/screens/Settings/Settings.tsx

··· 343 a.pt_sm, 344 t.atoms.text, 345 gtMobile ? a.text_4xl : a.text_3xl, 346 - a.font_heavy, 347 ]}> 348 {displayName} 349 </Text> ··· 513 514 <SettingsList.Divider /> 515 <View style={[a.p_xl, a.gap_md]}> 516 - <Text style={[a.text_lg, a.font_bold]}>PolicyUpdate202508 Debug</Text> 0 0 517 518 <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_md]}> 519 <Button

··· 343 a.pt_sm, 344 t.atoms.text, 345 gtMobile ? a.text_4xl : a.text_3xl, 346 + a.font_bold, 347 ]}> 348 {displayName} 349 </Text> ··· 513 514 <SettingsList.Divider /> 515 <View style={[a.p_xl, a.gap_md]}> 516 + <Text style={[a.text_lg, a.font_semi_bold]}> 517 + PolicyUpdate202508 Debug 518 + </Text> 519 520 <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_md]}> 521 <Button

+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_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]}>

··· 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]}>

+3 -3

src/screens/Settings/components/ChangeHandleDialog.tsx

··· 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

··· 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

+1 -1

src/screens/Settings/components/ChangePasswordDialog.tsx

··· 165 style={web({maxWidth: 400})}> 166 <View style={[a.gap_xl]}> 167 <View style={[a.gap_sm]}> 168 - <Text style={[a.font_heavy, a.text_2xl]}> 169 {uiStrings[stage].title} 170 </Text> 171 {error ? (

··· 165 style={web({maxWidth: 400})}> 166 <View style={[a.gap_xl]}> 167 <View style={[a.gap_sm]}> 168 + <Text style={[a.font_bold, a.text_2xl]}> 169 {uiStrings[stage].title} 170 </Text> 171 {error ? (

+1 -1

src/screens/Settings/components/CopyButton.tsx

··· 58 pointerEvents="none"> 59 <Text 60 style={[ 61 - a.font_bold, 62 a.text_right, 63 a.text_md, 64 t.atoms.text_contrast_high,

··· 58 pointerEvents="none"> 59 <Text 60 style={[ 61 + a.font_semi_bold, 62 a.text_right, 63 a.text_md, 64 t.atoms.text_contrast_high,

+1 -1

src/screens/Settings/components/DisableEmail2FADialog.tsx

··· 85 <View style={[a.relative, a.gap_md, a.w_full]}> 86 <Text 87 nativeID="dialog-title" 88 - style={[a.text_2xl, a.font_bold, t.atoms.text]}> 89 <Trans>Disable Email 2FA</Trans> 90 </Text> 91 <P nativeID="dialog-description">

··· 85 <View style={[a.relative, a.gap_md, a.w_full]}> 86 <Text 87 nativeID="dialog-title" 88 + style={[a.text_2xl, a.font_semi_bold, t.atoms.text]}> 89 <Trans>Disable Email 2FA</Trans> 90 </Text> 91 <P nativeID="dialog-description">

+1 -1

src/screens/Settings/components/ExportCarDialog.tsx

··· 58 accessibilityDescribedBy="dialog-description" 59 accessibilityLabelledBy="dialog-title"> 60 <View style={[a.relative, a.gap_lg, a.w_full]}> 61 - <Text nativeID="dialog-title" style={[a.text_2xl, a.font_heavy]}> 62 <Trans>Export My Data</Trans> 63 </Text> 64 <Text

··· 58 accessibilityDescribedBy="dialog-description" 59 accessibilityLabelledBy="dialog-title"> 60 <View style={[a.relative, a.gap_lg, a.w_full]}> 61 + <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}> 62 <Trans>Export My Data</Trans> 63 </Text> 64 <Text

+4 -3

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_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]}> 0 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 ? (

··· 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 ? (

+2 -2

src/screens/SignupQueued.tsx

··· 123 <Logo width={120} /> 124 </View> 125 126 - <Text style={[a.text_4xl, a.font_heavy, a.pb_sm]}> 127 <Trans>You're in line</Trans> 128 </Text> 129 <P style={[t.atoms.text_contrast_medium]}> ··· 146 ]}> 147 {typeof placeInQueue === 'number' && ( 148 <Text 149 - style={[a.text_5xl, a.text_center, a.font_heavy, a.mb_2xl]}> 150 {placeInQueue} 151 </Text> 152 )}

··· 123 <Logo width={120} /> 124 </View> 125 126 + <Text style={[a.text_4xl, a.font_bold, a.pb_sm]}> 127 <Trans>You're in line</Trans> 128 </Text> 129 <P style={[t.atoms.text_contrast_medium]}> ··· 146 ]}> 147 {typeof placeInQueue === 'number' && ( 148 <Text 149 + style={[a.text_5xl, a.text_center, a.font_bold, a.mb_2xl]}> 150 {placeInQueue} 151 </Text> 152 )}

+19 -6

src/screens/StarterPack/StarterPackLandingScreen.tsx

··· 183 </View> 184 <Text 185 style={[ 186 - a.font_bold, 187 a.text_4xl, 188 a.text_center, 189 a.leading_tight, ··· 192 {record.name} 193 </Text> 194 <Text 195 - style={[a.text_center, a.font_bold, a.text_md, {color: 'white'}]}> 0 0 0 0 0 196 Starter pack by {`@${creator.handle}`} 197 </Text> 198 </LinearGradientBackground> ··· 218 color={t.atoms.text_contrast_medium.color} 219 /> 220 <Text 221 - style={[a.font_bold, a.text_sm, t.atoms.text_contrast_medium]} 0 0 0 0 222 numberOfLines={1}> 223 <Trans> 224 {formatCount(i18n, JOINED_THIS_WEEK)} joined this week ··· 229 <View style={[a.gap_3xl]}> 230 {Boolean(listItemsSample?.length) && ( 231 <View style={[a.gap_md]}> 232 - <Text style={[a.font_heavy, a.text_lg]}> 233 {listItemsCount <= 8 ? ( 234 <Trans>You'll follow these people right away</Trans> 235 ) : ( ··· 270 )} 271 {feeds?.length ? ( 272 <View style={[a.gap_md]}> 273 - <Text style={[a.font_heavy, a.text_lg]}> 274 <Trans>You'll stay updated with these feeds</Trans> 275 </Text> 276 ··· 387 {/* Webkit needs this to have a zindex of 2? */} 388 <View style={[a.gap_md, {zIndex: 2}]}> 389 <Text 390 - style={[a.font_bold, a.text_4xl, {lineHeight: 40, color: 'white'}]}> 0 0 0 0 391 Download Bluesky to get started! 392 </Text> 393 <Text style={[a.text_lg, {color: 'white'}]}>

··· 183 </View> 184 <Text 185 style={[ 186 + a.font_semi_bold, 187 a.text_4xl, 188 a.text_center, 189 a.leading_tight, ··· 192 {record.name} 193 </Text> 194 <Text 195 + style={[ 196 + a.text_center, 197 + a.font_semi_bold, 198 + a.text_md, 199 + {color: 'white'}, 200 + ]}> 201 Starter pack by {`@${creator.handle}`} 202 </Text> 203 </LinearGradientBackground> ··· 223 color={t.atoms.text_contrast_medium.color} 224 /> 225 <Text 226 + style={[ 227 + a.font_semi_bold, 228 + a.text_sm, 229 + t.atoms.text_contrast_medium, 230 + ]} 231 numberOfLines={1}> 232 <Trans> 233 {formatCount(i18n, JOINED_THIS_WEEK)} joined this week ··· 238 <View style={[a.gap_3xl]}> 239 {Boolean(listItemsSample?.length) && ( 240 <View style={[a.gap_md]}> 241 + <Text style={[a.font_bold, a.text_lg]}> 242 {listItemsCount <= 8 ? ( 243 <Trans>You'll follow these people right away</Trans> 244 ) : ( ··· 279 )} 280 {feeds?.length ? ( 281 <View style={[a.gap_md]}> 282 + <Text style={[a.font_bold, a.text_lg]}> 283 <Trans>You'll stay updated with these feeds</Trans> 284 </Text> 285 ··· 396 {/* Webkit needs this to have a zindex of 2? */} 397 <View style={[a.gap_md, {zIndex: 2}]}> 398 <Text 399 + style={[ 400 + a.font_semi_bold, 401 + a.text_4xl, 402 + {lineHeight: 40, color: 'white'}, 403 + ]}> 404 Download Bluesky to get started! 405 </Text> 406 <Text style={[a.text_lg, {color: 'white'}]}>

+7 -3

src/screens/StarterPack/StarterPackScreen.tsx

··· 486 color={t.atoms.text_contrast_medium.color} 487 /> 488 <Text 489 - style={[a.font_bold, a.text_sm, t.atoms.text_contrast_medium]}> 0 0 0 0 490 <Trans comment="Number of users (always at least 25) who have joined Bluesky using a specific starter pack"> 491 <Plural 492 value={starterPack.joinedAllTimeCount || 0} ··· 669 t.atoms.bg_contrast_25, 670 ]}> 671 <View style={[a.flex_1, a.gap_2xs]}> 672 - <Text style={[a.font_bold]}> 673 <Trans>Unable to delete</Trans> 674 </Text> 675 <Text style={[a.leading_snug]}>{cleanError(deleteError)}</Text> ··· 727 <Layout.Content centerContent> 728 <View style={[a.py_4xl, a.px_xl, a.align_center, a.gap_5xl]}> 729 <View style={[a.w_full, a.align_center, a.gap_lg]}> 730 - <Text style={[a.font_bold, a.text_3xl]}> 731 <Trans>Starter pack is invalid</Trans> 732 </Text> 733 <Text

··· 486 color={t.atoms.text_contrast_medium.color} 487 /> 488 <Text 489 + style={[ 490 + a.font_semi_bold, 491 + a.text_sm, 492 + t.atoms.text_contrast_medium, 493 + ]}> 494 <Trans comment="Number of users (always at least 25) who have joined Bluesky using a specific starter pack"> 495 <Plural 496 value={starterPack.joinedAllTimeCount || 0} ··· 673 t.atoms.bg_contrast_25, 674 ]}> 675 <View style={[a.flex_1, a.gap_2xs]}> 676 + <Text style={[a.font_semi_bold]}> 677 <Trans>Unable to delete</Trans> 678 </Text> 679 <Text style={[a.leading_snug]}>{cleanError(deleteError)}</Text> ··· 731 <Layout.Content centerContent> 732 <View style={[a.py_4xl, a.px_xl, a.align_center, a.gap_5xl]}> 733 <View style={[a.w_full, a.align_center, a.gap_lg]}> 734 + <Text style={[a.font_semi_bold, a.text_3xl]}> 735 <Trans>Starter pack is invalid</Trans> 736 </Text> 737 <Text

+1 -1

src/screens/StarterPack/Wizard/StepDetails.tsx

··· 27 <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}> 28 <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}> 29 <StarterPack width={90} gradient="sky" /> 30 - <Text style={[a.font_bold, a.text_3xl]}> 31 <Trans>Invites, but personal</Trans> 32 </Text> 33 <Text style={[a.text_center, a.text_md, a.px_md]}>

··· 27 <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}> 28 <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}> 29 <StarterPack width={90} gradient="sky" /> 30 + <Text style={[a.font_semi_bold, a.text_3xl]}> 31 <Trans>Invites, but personal</Trans> 32 </Text> 33 <Text style={[a.text_center, a.text_md, a.px_md]}>

+1 -1

src/screens/StarterPack/Wizard/StepFeeds.tsx

··· 113 ) : ( 114 <Text 115 style={[ 116 - a.font_bold, 117 a.text_lg, 118 a.text_center, 119 a.mt_lg,

··· 113 ) : ( 114 <Text 115 style={[ 116 + a.font_semi_bold, 117 a.text_lg, 118 a.text_center, 119 a.mt_lg,

+1 -1

src/screens/StarterPack/Wizard/StepProfiles.tsx

··· 98 ) : ( 99 <Text 100 style={[ 101 - a.font_bold, 102 a.text_lg, 103 a.text_center, 104 a.mt_lg,

··· 98 ) : ( 99 <Text 100 style={[ 101 + a.font_semi_bold, 102 a.text_lg, 103 a.text_center, 104 a.mt_lg,

+20 -15

src/screens/StarterPack/Wizard/index.tsx

··· 447 ]}> 448 {items.length > minimumItems && ( 449 <View style={[a.absolute, {right: 14, top: 31}]}> 450 - <Text style={[a.font_bold]}> 451 {items.length}/ 452 {state.currentStep === 'Profiles' ? STARTER_PACK_MAX_SIZE : 3} 453 </Text> ··· 490 ) : ( 491 <Trans> 492 It's just{' '} 493 - <Text style={[a.font_bold, textStyles]} emoji> 494 {getName(items[0])}{' '} 495 </Text> 496 right now! Add more people to your starter pack by searching ··· 500 ) : items.length === 2 ? ( 501 currentAccount?.did === items[0].did ? ( 502 <Trans> 503 - <Text style={[a.font_bold, textStyles]}>You</Text> and 504 <Text> </Text> 505 - <Text style={[a.font_bold, textStyles]} emoji> 506 {getName(items[1] /* [0] is self, skip it */)}{' '} 507 </Text> 508 are included in your starter pack 509 </Trans> 510 ) : ( 511 <Trans> 512 - <Text style={[a.font_bold, textStyles]}> 513 {getName(items[0])} 514 </Text>{' '} 515 and 516 <Text> </Text> 517 - <Text style={[a.font_bold, textStyles]} emoji> 518 {getName(items[1] /* [0] is self, skip it */)}{' '} 519 </Text> 520 are included in your starter pack ··· 522 ) 523 ) : items.length > 2 ? ( 524 <Trans context="profiles"> 525 - <Text style={[a.font_bold, textStyles]} emoji> 526 {getName(items[1] /* [0] is self, skip it */)},{' '} 527 </Text> 528 - <Text style={[a.font_bold, textStyles]} emoji> 529 {getName(items[2])},{' '} 530 </Text> 531 and{' '} ··· 542 ) : state.currentStep === 'Feeds' ? ( 543 items.length === 0 ? ( 544 <View style={[a.gap_sm]}> 545 - <Text style={[a.font_bold, a.text_center, textStyles]}> 546 <Trans>Add some feeds to your starter pack!</Trans> 547 </Text> 548 <Text style={[a.text_center, textStyles]}> ··· 556 { 557 items.length === 1 ? ( 558 <Trans> 559 - <Text style={[a.font_bold, textStyles]} emoji> 560 {getName(items[0])} 561 </Text>{' '} 562 is included in your starter pack 563 </Trans> 564 ) : items.length === 2 ? ( 565 <Trans> 566 - <Text style={[a.font_bold, textStyles]} emoji> 567 {getName(items[0])} 568 </Text>{' '} 569 and 570 <Text> </Text> 571 - <Text style={[a.font_bold, textStyles]} emoji> 572 {getName(items[1])}{' '} 573 </Text> 574 are included in your starter pack 575 </Trans> 576 ) : items.length > 2 ? ( 577 <Trans context="feeds"> 578 - <Text style={[a.font_bold, textStyles]} emoji> 579 {getName(items[0])},{' '} 580 </Text> 581 - <Text style={[a.font_bold, textStyles]} emoji> 582 {getName(items[1])},{' '} 583 </Text> 584 and{' '} ··· 604 isNative ? a.mt_sm : a.mt_md, 605 ]}> 606 {state.currentStep === 'Profiles' && items.length < 8 && ( 607 - <Text style={[a.font_bold, textStyles, t.atoms.text_contrast_medium]}> 0 0 0 0 0 608 <Trans>Add {8 - items.length} more to continue</Trans> 609 </Text> 610 )}

··· 447 ]}> 448 {items.length > minimumItems && ( 449 <View style={[a.absolute, {right: 14, top: 31}]}> 450 + <Text style={[a.font_semi_bold]}> 451 {items.length}/ 452 {state.currentStep === 'Profiles' ? STARTER_PACK_MAX_SIZE : 3} 453 </Text> ··· 490 ) : ( 491 <Trans> 492 It's just{' '} 493 + <Text style={[a.font_semi_bold, textStyles]} emoji> 494 {getName(items[0])}{' '} 495 </Text> 496 right now! Add more people to your starter pack by searching ··· 500 ) : items.length === 2 ? ( 501 currentAccount?.did === items[0].did ? ( 502 <Trans> 503 + <Text style={[a.font_semi_bold, textStyles]}>You</Text> and 504 <Text> </Text> 505 + <Text style={[a.font_semi_bold, textStyles]} emoji> 506 {getName(items[1] /* [0] is self, skip it */)}{' '} 507 </Text> 508 are included in your starter pack 509 </Trans> 510 ) : ( 511 <Trans> 512 + <Text style={[a.font_semi_bold, textStyles]}> 513 {getName(items[0])} 514 </Text>{' '} 515 and 516 <Text> </Text> 517 + <Text style={[a.font_semi_bold, textStyles]} emoji> 518 {getName(items[1] /* [0] is self, skip it */)}{' '} 519 </Text> 520 are included in your starter pack ··· 522 ) 523 ) : items.length > 2 ? ( 524 <Trans context="profiles"> 525 + <Text style={[a.font_semi_bold, textStyles]} emoji> 526 {getName(items[1] /* [0] is self, skip it */)},{' '} 527 </Text> 528 + <Text style={[a.font_semi_bold, textStyles]} emoji> 529 {getName(items[2])},{' '} 530 </Text> 531 and{' '} ··· 542 ) : state.currentStep === 'Feeds' ? ( 543 items.length === 0 ? ( 544 <View style={[a.gap_sm]}> 545 + <Text style={[a.font_semi_bold, a.text_center, textStyles]}> 546 <Trans>Add some feeds to your starter pack!</Trans> 547 </Text> 548 <Text style={[a.text_center, textStyles]}> ··· 556 { 557 items.length === 1 ? ( 558 <Trans> 559 + <Text style={[a.font_semi_bold, textStyles]} emoji> 560 {getName(items[0])} 561 </Text>{' '} 562 is included in your starter pack 563 </Trans> 564 ) : items.length === 2 ? ( 565 <Trans> 566 + <Text style={[a.font_semi_bold, textStyles]} emoji> 567 {getName(items[0])} 568 </Text>{' '} 569 and 570 <Text> </Text> 571 + <Text style={[a.font_semi_bold, textStyles]} emoji> 572 {getName(items[1])}{' '} 573 </Text> 574 are included in your starter pack 575 </Trans> 576 ) : items.length > 2 ? ( 577 <Trans context="feeds"> 578 + <Text style={[a.font_semi_bold, textStyles]} emoji> 579 {getName(items[0])},{' '} 580 </Text> 581 + <Text style={[a.font_semi_bold, textStyles]} emoji> 582 {getName(items[1])},{' '} 583 </Text> 584 and{' '} ··· 604 isNative ? a.mt_sm : a.mt_md, 605 ]}> 606 {state.currentStep === 'Profiles' && items.length < 8 && ( 607 + <Text 608 + style={[ 609 + a.font_semi_bold, 610 + textStyles, 611 + t.atoms.text_contrast_medium, 612 + ]}> 613 <Trans>Add {8 - items.length} more to continue</Trans> 614 </Text> 615 )}

+1 -1

src/screens/Takendown.tsx

··· 148 <Logo width={64} /> 149 </View> 150 151 - <Text style={[a.text_4xl, a.font_heavy, a.pb_md]}> 152 {isAppealling ? ( 153 <Trans>Appeal suspension</Trans> 154 ) : (

··· 148 <Logo width={64} /> 149 </View> 150 151 + <Text style={[a.text_4xl, a.font_bold, a.pb_md]}> 152 {isAppealling ? ( 153 <Trans>Appeal suspension</Trans> 154 ) : (

+1 -1

src/screens/VideoFeed/components/Header.tsx

··· 120 <Text 121 style={[ 122 a.text_md, 123 - a.font_heavy, 124 a.leading_tight, 125 gtMobile && a.text_lg, 126 ]}

··· 120 <Text 121 style={[ 122 a.text_md, 123 + a.font_bold, 124 a.leading_tight, 125 gtMobile && a.text_lg, 126 ]}

+1 -1

src/screens/VideoFeed/components/Scrubber.tsx

··· 179 timeStyle, 180 ]} 181 pointerEvents="none"> 182 - <Text style={[a.text_center, a.font_bold]}> 183 <Text style={[a.text_5xl, {fontVariant: ['tabular-nums']}]}> 184 {formatTime(currentSeekTime)} 185 </Text>

··· 179 timeStyle, 180 ]} 181 pointerEvents="none"> 182 + <Text style={[a.text_center, a.font_semi_bold]}> 183 <Text style={[a.text_5xl, {fontVariant: ['tabular-nums']}]}> 184 {formatTime(currentSeekTime)} 185 </Text>

+4 -4

src/screens/VideoFeed/index.tsx

··· 524 <Text 525 style={[ 526 a.text_2xl, 527 - a.font_heavy, 528 a.text_center, 529 a.leading_tight, 530 a.mx_xl, ··· 670 <Text 671 style={[ 672 a.text_sm, 673 - a.font_bold, 674 a.text_center, 675 {opacity: pressed ? 0.5 : 1}, 676 ]}> ··· 807 /> 808 <View style={[a.flex_1]}> 809 <Text 810 - style={[a.text_md, a.font_heavy]} 811 emoji 812 numberOfLines={1}> 813 {sanitizeDisplayName( ··· 1115 <LeafIcon width={64} fill="black" /> 1116 </View> 1117 <View style={[a.w_full, a.gap_md]}> 1118 - <Text style={[a.text_3xl, a.text_center, a.font_heavy]}> 1119 <Trans>That's everything!</Trans> 1120 </Text> 1121 <Text

··· 524 <Text 525 style={[ 526 a.text_2xl, 527 + a.font_bold, 528 a.text_center, 529 a.leading_tight, 530 a.mx_xl, ··· 670 <Text 671 style={[ 672 a.text_sm, 673 + a.font_semi_bold, 674 a.text_center, 675 {opacity: pressed ? 0.5 : 1}, 676 ]}> ··· 807 /> 808 <View style={[a.flex_1]}> 809 <Text 810 + style={[a.text_md, a.font_bold]} 811 emoji 812 numberOfLines={1}> 813 {sanitizeDisplayName( ··· 1115 <LeafIcon width={64} fill="black" /> 1116 </View> 1117 <View style={[a.w_full, a.gap_md]}> 1118 + <Text style={[a.text_3xl, a.text_center, a.font_bold]}> 1119 <Trans>That's everything!</Trans> 1120 </Text> 1121 <Text

+1 -1

src/view/com/auth/SplashScreen.tsx

··· 44 <Text 45 style={[ 46 a.text_md, 47 - a.font_bold, 48 t.atoms.text_contrast_medium, 49 a.text_center, 50 ]}>

··· 44 <Text 45 style={[ 46 a.text_md, 47 + a.font_semi_bold, 48 t.atoms.text_contrast_medium, 49 a.text_center, 50 ]}>

+5 -1

src/view/com/auth/SplashScreen.web.tsx

··· 95 )} 96 97 <Text 98 - style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}> 0 0 0 0 99 <Trans>What's up?</Trans> 100 </Text> 101 </View>

··· 95 )} 96 97 <Text 98 + style={[ 99 + a.text_md, 100 + a.font_semi_bold, 101 + t.atoms.text_contrast_medium, 102 + ]}> 103 <Trans>What's up?</Trans> 104 </Text> 105 </View>

+1 -1

src/view/com/auth/server-input/index.tsx

··· 126 accessibilityDescribedBy="dialog-description" 127 accessibilityLabelledBy="dialog-title"> 128 <View style={[a.relative, a.gap_md, a.w_full]}> 129 - <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}> 130 <Trans>Choose your account provider</Trans> 131 </Text> 132 <ToggleButton.Group

··· 126 accessibilityDescribedBy="dialog-description" 127 accessibilityLabelledBy="dialog-title"> 128 <View style={[a.relative, a.gap_md, a.w_full]}> 129 + <Text nativeID="dialog-title" style={[a.text_2xl, a.font_semi_bold]}> 130 <Trans>Choose your account provider</Trans> 131 </Text> 132 <ToggleButton.Group

+2 -2

src/view/com/composer/Composer.tsx

··· 1770 style={[ 1771 {paddingLeft: 28}, 1772 a.text_xs, 1773 - a.font_bold, 1774 a.leading_snug, 1775 t.atoms.text_contrast_low, 1776 ]}> ··· 1863 progress={wheelProgress} 1864 /> 1865 </Animated.View> 1866 - <NewText style={[a.font_bold, a.ml_sm]}>{text}</NewText> 1867 </ToolbarWrapper> 1868 ) 1869 }

··· 1770 style={[ 1771 {paddingLeft: 28}, 1772 a.text_xs, 1773 + a.font_semi_bold, 1774 a.leading_snug, 1775 t.atoms.text_contrast_low, 1776 ]}> ··· 1863 progress={wheelProgress} 1864 /> 1865 </Animated.View> 1866 + <NewText style={[a.font_semi_bold, a.ml_sm]}>{text}</NewText> 1867 </ToolbarWrapper> 1868 ) 1869 }

+1 -1

src/view/com/composer/ComposerReplyTo.tsx

··· 101 <View style={[a.flex_1, a.pl_md, a.pr_sm, a.gap_2xs]}> 102 <View style={[a.flex_row, a.align_center, a.pr_xs]}> 103 <Text 104 - style={[a.font_bold, a.text_md, a.leading_snug, a.flex_shrink]} 105 numberOfLines={1} 106 emoji> 107 {sanitizeDisplayName(

··· 101 <View style={[a.flex_1, a.pl_md, a.pr_sm, a.gap_2xs]}> 102 <View style={[a.flex_row, a.align_center, a.pr_xs]}> 103 <Text 104 + style={[a.font_semi_bold, a.text_md, a.leading_snug, a.flex_shrink]} 105 numberOfLines={1} 106 emoji> 107 {sanitizeDisplayName(

+3 -2

src/view/com/composer/GifAltText.tsx

··· 95 <Plus size="sm" fill={t.palette.white} /> 96 )} 97 <Text 98 - style={[a.font_bold, {color: t.palette.white}]} 99 accessible={false}> 100 <Trans>ALT</Trans> 101 </Text> ··· 206 </View> 207 {/* below the text input to force tab order */} 208 <View> 209 - <Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_sm]}> 0 210 <Trans>Add alt text</Trans> 211 </Text> 212 <View style={[a.align_center]}>

··· 95 <Plus size="sm" fill={t.palette.white} /> 96 )} 97 <Text 98 + style={[a.font_semi_bold, {color: t.palette.white}]} 99 accessible={false}> 100 <Trans>ALT</Trans> 101 </Text> ··· 206 </View> 207 {/* below the text input to force tab order */} 208 <View> 209 + <Text 210 + style={[a.text_2xl, a.font_semi_bold, a.leading_tight, a.pb_sm]}> 211 <Trans>Add alt text</Trans> 212 </Text> 213 <View style={[a.align_center]}>

+3 -3

src/view/com/composer/labels/LabelsBtn.tsx

··· 108 style={[{maxWidth: 500}, a.w_full]}> 109 <View style={[a.flex_1]}> 110 <View style={[a.gap_sm]}> 111 - <Text style={[a.text_2xl, a.font_bold]}> 112 <Trans>Add a content warning</Trans> 113 </Text> 114 <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}> ··· 123 <View> 124 <View 125 style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}> 126 - <Text style={[a.font_bold, a.text_lg]}> 127 <Trans>Adult Content</Trans> 128 </Text> 129 </View> ··· 181 <View> 182 <View 183 style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}> 184 - <Text style={[a.font_bold, a.text_lg]}> 185 <Trans>Other</Trans> 186 </Text> 187 </View>

··· 108 style={[{maxWidth: 500}, a.w_full]}> 109 <View style={[a.flex_1]}> 110 <View style={[a.gap_sm]}> 111 + <Text style={[a.text_2xl, a.font_semi_bold]}> 112 <Trans>Add a content warning</Trans> 113 </Text> 114 <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}> ··· 123 <View> 124 <View 125 style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}> 126 + <Text style={[a.font_semi_bold, a.text_lg]}> 127 <Trans>Adult Content</Trans> 128 </Text> 129 </View> ··· 181 <View> 182 <View 183 style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}> 184 + <Text style={[a.font_semi_bold, a.text_lg]}> 185 <Trans>Other</Trans> 186 </Text> 187 </View>

+1 -1

src/view/com/composer/photos/ImageAltTextDialog.tsx

··· 89 <Dialog.Close /> 90 91 <View> 92 - <Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_sm]}> 93 <Trans>Add alt text</Trans> 94 </Text> 95

··· 89 <Dialog.Close /> 90 91 <View> 92 + <Text style={[a.text_2xl, a.font_semi_bold, a.leading_tight, a.pb_sm]}> 93 <Trans>Add alt text</Trans> 94 </Text> 95

+1 -1

src/view/com/composer/select-language/PostLanguageSelect.tsx

··· 111 <Text 112 style={[ 113 {color}, 114 - a.font_bold, 115 a.text_sm, 116 a.leading_snug, 117 {maxWidth: 100},

··· 111 <Text 112 style={[ 113 {color}, 114 + a.font_semi_bold, 115 a.text_sm, 116 a.leading_snug, 117 {maxWidth: 100},

+2 -2

src/view/com/composer/select-language/PostLanguageSelectDialog.tsx

··· 155 style={[ 156 t.atoms.text, 157 a.text_left, 158 - a.font_bold, 159 a.text_xl, 160 a.mb_sm, 161 ]}> ··· 240 style={[ 241 a.px_0, 242 a.py_md, 243 - a.font_bold, 244 a.text_xs, 245 t.atoms.text_contrast_low, 246 a.pt_3xl,

··· 155 style={[ 156 t.atoms.text, 157 a.text_left, 158 + a.font_semi_bold, 159 a.text_xl, 160 a.mb_sm, 161 ]}> ··· 240 style={[ 241 a.px_0, 242 a.py_md, 243 + a.font_semi_bold, 244 a.text_xs, 245 t.atoms.text_contrast_low, 246 a.pt_3xl,

+1 -1

src/view/com/composer/select-language/SuggestedLanguage.tsx

··· 88 <Text style={[a.flex_1]}> 89 <Trans> 90 Are you writing in{' '} 91 - <Text style={[a.font_bold]}>{suggestedLanguageName}</Text>? 92 </Trans> 93 </Text> 94

··· 88 <Text style={[a.flex_1]}> 89 <Trans> 90 Are you writing in{' '} 91 + <Text style={[a.font_semi_bold]}>{suggestedLanguageName}</Text>? 92 </Trans> 93 </Text> 94

+1 -1

src/view/com/composer/text-input/TextInput.web.tsx

··· 353 <Text 354 style={[ 355 a.text_lg, 356 - a.font_bold, 357 t.atoms.text_contrast_medium, 358 t.atoms.border_contrast_high, 359 styles.dropText,

··· 353 <Text 354 style={[ 355 a.text_lg, 356 + a.font_semi_bold, 357 t.atoms.text_contrast_medium, 358 t.atoms.border_contrast_high, 359 styles.dropText,

+1 -1

src/view/com/composer/text-input/mobile/Autocomplete.tsx

··· 110 platform({ios: a.flex_1}), 111 ]}> 112 <Text 113 - style={[a.text_md, a.font_bold, a.leading_snug]} 114 emoji 115 numberOfLines={1}> 116 {displayName}

··· 110 platform({ios: a.flex_1}), 111 ]}> 112 <Text 113 + style={[a.text_md, a.font_semi_bold, a.leading_snug]} 114 emoji 115 numberOfLines={1}> 116 {displayName}

+3 -3

src/view/com/composer/videos/SubtitleDialog.tsx

··· 97 return ( 98 <Dialog.ScrollableInner label={_(msg`Video settings`)}> 99 <View style={a.gap_md}> 100 - <Text style={[a.text_xl, a.font_bold, a.leading_tight]}> 101 <Trans>Alt text</Trans> 102 </Text> 103 <TextField.Root> ··· 128 a.my_md, 129 ]} 130 /> 131 - <Text style={[a.text_xl, a.font_bold, a.leading_tight]}> 132 <Trans>Captions (.vtt)</Trans> 133 </Text> 134 <SubtitleFilePicker ··· 235 <PageTextIcon style={[t.atoms.text, a.flex_shrink_0]} size="sm" /> 236 )} 237 <Text 238 - style={[a.flex_1, a.leading_snug, a.font_bold, a.mb_2xs]} 239 numberOfLines={1}> 240 {file.name} 241 </Text>

··· 97 return ( 98 <Dialog.ScrollableInner label={_(msg`Video settings`)}> 99 <View style={a.gap_md}> 100 + <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}> 101 <Trans>Alt text</Trans> 102 </Text> 103 <TextField.Root> ··· 128 a.my_md, 129 ]} 130 /> 131 + <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}> 132 <Trans>Captions (.vtt)</Trans> 133 </Text> 134 <SubtitleFilePicker ··· 235 <PageTextIcon style={[t.atoms.text, a.flex_shrink_0]} size="sm" /> 236 )} 237 <Text 238 + style={[a.flex_1, a.leading_snug, a.font_semi_bold, a.mb_2xs]} 239 numberOfLines={1}> 240 {file.name} 241 </Text>

+2 -2

src/view/com/feeds/FeedSourceCard.tsx

··· 139 <View style={[a.flex_1]}> 140 <Text 141 emoji 142 - style={[a.text_sm, a.font_bold, a.leading_snug]} 143 numberOfLines={1}> 144 {feed.displayName} 145 </Text> ··· 165 <Text 166 style={[ 167 a.text_sm, 168 - a.font_bold, 169 t.atoms.text_contrast_medium, 170 a.leading_snug, 171 ]}>

··· 139 <View style={[a.flex_1]}> 140 <Text 141 emoji 142 + style={[a.text_sm, a.font_semi_bold, a.leading_snug]} 143 numberOfLines={1}> 144 {feed.displayName} 145 </Text> ··· 165 <Text 166 style={[ 167 a.text_sm, 168 + a.font_semi_bold, 169 t.atoms.text_contrast_medium, 170 a.leading_snug, 171 ]}>

+7 -5

src/view/com/feeds/MissingFeed.tsx

··· 67 <View style={[a.flex_1]}> 68 <Text 69 emoji 70 - style={[a.text_sm, a.font_bold, a.leading_snug, a.italic]} 71 numberOfLines={1}> 72 {type === 'feed' ? ( 73 <Trans>Feed unavailable</Trans> ··· 128 } 129 style={web({maxWidth: 500})}> 130 <View style={[a.gap_sm]}> 131 - <Text style={[a.font_heavy, a.text_2xl]}> 132 {type === 'feed' ? ( 133 <Trans>Could not connect to feed service</Trans> 134 ) : ( ··· 147 )} 148 </Text> 149 <Divider style={[a.my_md]} /> 150 - <Text style={[a.font_bold, t.atoms.text_contrast_high]}> 151 {type === 'feed' ? ( 152 <Trans>Feed creator</Trans> 153 ) : ( ··· 184 )} 185 {type === 'feed' && ( 186 <> 187 - <Text style={[a.font_bold, t.atoms.text_contrast_high, a.mt_md]}> 0 188 <Trans>Feed identifier</Trans> 189 </Text> 190 <Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}> ··· 194 )} 195 {error instanceof Error && ( 196 <> 197 - <Text style={[a.font_bold, t.atoms.text_contrast_high, a.mt_md]}> 0 198 <Trans>Error message</Trans> 199 </Text> 200 <Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}>

··· 67 <View style={[a.flex_1]}> 68 <Text 69 emoji 70 + style={[a.text_sm, a.font_semi_bold, a.leading_snug, a.italic]} 71 numberOfLines={1}> 72 {type === 'feed' ? ( 73 <Trans>Feed unavailable</Trans> ··· 128 } 129 style={web({maxWidth: 500})}> 130 <View style={[a.gap_sm]}> 131 + <Text style={[a.font_bold, a.text_2xl]}> 132 {type === 'feed' ? ( 133 <Trans>Could not connect to feed service</Trans> 134 ) : ( ··· 147 )} 148 </Text> 149 <Divider style={[a.my_md]} /> 150 + <Text style={[a.font_semi_bold, t.atoms.text_contrast_high]}> 151 {type === 'feed' ? ( 152 <Trans>Feed creator</Trans> 153 ) : ( ··· 184 )} 185 {type === 'feed' && ( 186 <> 187 + <Text 188 + style={[a.font_semi_bold, t.atoms.text_contrast_high, a.mt_md]}> 189 <Trans>Feed identifier</Trans> 190 </Text> 191 <Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}> ··· 195 )} 196 {error instanceof Error && ( 197 <> 198 + <Text 199 + style={[a.font_semi_bold, t.atoms.text_contrast_high, a.mt_md]}> 200 <Trans>Error message</Trans> 201 </Text> 202 <Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}>

+11 -11

src/view/com/notifications/NotificationFeedItem.tsx

··· 214 <ProfileHoverCard did={firstAuthor.profile.did} inline> 215 <InlineLinkText 216 key={firstAuthor.href} 217 - style={[t.atoms.text, a.font_bold, a.text_md, a.leading_tight]} 218 to={firstAuthor.href} 219 disableMismatchWarning 220 emoji ··· 271 notificationContent = hasMultipleAuthors ? ( 272 <Trans> 273 {firstAuthorLink} and{' '} 274 - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> 275 <Plural 276 value={additionalAuthorsCount} 277 one={`${formattedAuthorsCount} other`} ··· 295 notificationContent = hasMultipleAuthors ? ( 296 <Trans> 297 {firstAuthorLink} and{' '} 298 - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> 299 <Plural 300 value={additionalAuthorsCount} 301 one={`${formattedAuthorsCount} other`} ··· 352 notificationContent = hasMultipleAuthors ? ( 353 <Trans> 354 {firstAuthorLink} and{' '} 355 - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> 356 <Plural 357 value={additionalAuthorsCount} 358 one={`${formattedAuthorsCount} other`} ··· 378 notificationContent = hasMultipleAuthors ? ( 379 <Trans> 380 {firstAuthorLink} and{' '} 381 - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> 382 <Plural 383 value={additionalAuthorsCount} 384 one={`${formattedAuthorsCount} other`} ··· 402 notificationContent = hasMultipleAuthors ? ( 403 <Trans> 404 {firstAuthorLink} and{' '} 405 - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> 406 <Plural 407 value={additionalAuthorsCount} 408 one={`${formattedAuthorsCount} other`} ··· 483 notificationContent = hasMultipleAuthors ? ( 484 <Trans> 485 {firstAuthorLink} and{' '} 486 - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> 487 <Plural 488 value={additionalAuthorsCount} 489 one={`${formattedAuthorsCount} other`} ··· 507 notificationContent = hasMultipleAuthors ? ( 508 <Trans> 509 {firstAuthorLink} and{' '} 510 - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> 511 <Plural 512 value={additionalAuthorsCount} 513 one={`${formattedAuthorsCount} other`} ··· 541 notificationContent = hasMultipleAuthors ? ( 542 <Trans> 543 New posts from {firstAuthorLink} and{' '} 544 - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> 545 <Plural 546 value={additionalAuthorsCount} 547 one={`${formattedAuthorsCount} other`} ··· 846 {authors.length > MAX_AUTHORS ? ( 847 <Text 848 style={[ 849 - a.font_bold, 850 {paddingLeft: 6}, 851 t.atoms.text_contrast_medium, 852 ]}> ··· 926 emoji 927 style={[ 928 a.text_md, 929 - a.font_bold, 930 a.leading_tight, 931 {maxWidth: '70%'}, 932 ]}>

··· 214 <ProfileHoverCard did={firstAuthor.profile.did} inline> 215 <InlineLinkText 216 key={firstAuthor.href} 217 + style={[t.atoms.text, a.font_semi_bold, a.text_md, a.leading_tight]} 218 to={firstAuthor.href} 219 disableMismatchWarning 220 emoji ··· 271 notificationContent = hasMultipleAuthors ? ( 272 <Trans> 273 {firstAuthorLink} and{' '} 274 + <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 275 <Plural 276 value={additionalAuthorsCount} 277 one={`${formattedAuthorsCount} other`} ··· 295 notificationContent = hasMultipleAuthors ? ( 296 <Trans> 297 {firstAuthorLink} and{' '} 298 + <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 299 <Plural 300 value={additionalAuthorsCount} 301 one={`${formattedAuthorsCount} other`} ··· 352 notificationContent = hasMultipleAuthors ? ( 353 <Trans> 354 {firstAuthorLink} and{' '} 355 + <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 356 <Plural 357 value={additionalAuthorsCount} 358 one={`${formattedAuthorsCount} other`} ··· 378 notificationContent = hasMultipleAuthors ? ( 379 <Trans> 380 {firstAuthorLink} and{' '} 381 + <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 382 <Plural 383 value={additionalAuthorsCount} 384 one={`${formattedAuthorsCount} other`} ··· 402 notificationContent = hasMultipleAuthors ? ( 403 <Trans> 404 {firstAuthorLink} and{' '} 405 + <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 406 <Plural 407 value={additionalAuthorsCount} 408 one={`${formattedAuthorsCount} other`} ··· 483 notificationContent = hasMultipleAuthors ? ( 484 <Trans> 485 {firstAuthorLink} and{' '} 486 + <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 487 <Plural 488 value={additionalAuthorsCount} 489 one={`${formattedAuthorsCount} other`} ··· 507 notificationContent = hasMultipleAuthors ? ( 508 <Trans> 509 {firstAuthorLink} and{' '} 510 + <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 511 <Plural 512 value={additionalAuthorsCount} 513 one={`${formattedAuthorsCount} other`} ··· 541 notificationContent = hasMultipleAuthors ? ( 542 <Trans> 543 New posts from {firstAuthorLink} and{' '} 544 + <Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}> 545 <Plural 546 value={additionalAuthorsCount} 547 one={`${formattedAuthorsCount} other`} ··· 846 {authors.length > MAX_AUTHORS ? ( 847 <Text 848 style={[ 849 + a.font_semi_bold, 850 {paddingLeft: 6}, 851 t.atoms.text_contrast_medium, 852 ]}> ··· 926 emoji 927 style={[ 928 a.text_md, 929 + a.font_semi_bold, 930 a.leading_tight, 931 {maxWidth: '70%'}, 932 ]}>

+1 -1

src/view/com/pager/TabBar.tsx

··· 431 <Text 432 emoji 433 testID={testID ? `${testID}-${item}` : undefined} 434 - style={[styles.itemText, t.atoms.text, a.text_md, a.font_bold]} 435 onLayout={handleTextLayout}> 436 {item} 437 </Text>

··· 431 <Text 432 emoji 433 testID={testID ? `${testID}-${item}` : undefined} 434 + style={[styles.itemText, t.atoms.text, a.text_md, a.font_semi_bold]} 435 onLayout={handleTextLayout}> 436 {item} 437 </Text>

+1 -1

src/view/com/pager/TabBar.web.tsx

··· 121 styles.itemText, 122 selected ? t.atoms.text : t.atoms.text_contrast_medium, 123 a.text_md, 124 - a.font_bold, 125 {lineHeight: 20}, 126 ]}> 127 {item}

··· 121 styles.itemText, 122 selected ? t.atoms.text : t.atoms.text_contrast_medium, 123 a.text_md, 124 + a.font_semi_bold, 125 {lineHeight: 20}, 126 ]}> 127 {item}

+1 -1

src/view/com/posts/FeedShutdownMsg.tsx

··· 92 t.atoms.border_contrast_low, 93 a.border_t, 94 ]}> 95 - <Text style={[a.text_5xl, a.font_bold, t.atoms.text, a.text_center]}> 96 :( 97 </Text> 98 <Text style={[a.text_md, a.leading_snug, t.atoms.text, a.text_center]}>

··· 92 t.atoms.border_contrast_low, 93 a.border_t, 94 ]}> 95 + <Text style={[a.text_5xl, a.font_semi_bold, t.atoms.text, a.text_center]}> 96 :( 97 </Text> 98 <Text style={[a.text_md, a.leading_snug, t.atoms.text, a.text_center]}>

+1 -1

src/view/com/util/PostMeta.tsx

··· 92 onPress={onBeforePressAuthor} 93 style={[ 94 a.text_md, 95 - a.font_bold, 96 t.atoms.text, 97 a.leading_tight, 98 a.flex_shrink_0,

··· 92 onPress={onBeforePressAuthor} 93 style={[ 94 a.text_md, 95 + a.font_semi_bold, 96 t.atoms.text, 97 a.leading_tight, 98 a.flex_shrink_0,

+1 -1

src/view/com/util/error/ErrorScreen.tsx

··· 62 /> 63 </View> 64 </View> 65 - <Text style={[a.text_center, a.font_heavy, a.text_2xl, a.mb_md]}> 66 {title} 67 </Text> 68 <Text style={[a.text_center, a.text_md, a.mb_xl]}>{message}</Text>

··· 62 /> 63 </View> 64 </View> 65 + <Text style={[a.text_center, a.font_bold, a.text_2xl, a.mb_md]}> 66 {title} 67 </Text> 68 <Text style={[a.text_center, a.text_md, a.mb_xl]}>{message}</Text>

+1 -2

src/view/com/util/images/AutoSizedImage.tsx

··· 185 }, 186 ], 187 ]}> 188 - <Text 189 - style={[a.font_heavy, largeAlt ? a.text_xs : {fontSize: 8}]}> 190 ALT 191 </Text> 192 </View>

··· 185 }, 186 ], 187 ]}> 188 + <Text style={[a.font_bold, largeAlt ? a.text_xs : {fontSize: 8}]}> 0 189 ALT 190 </Text> 191 </View>

+1 -1

src/view/com/util/images/Gallery.tsx

··· 109 ], 110 ]}> 111 <Text 112 - style={[a.font_heavy, largeAltBadge ? a.text_xs : {fontSize: 8}]}> 113 ALT 114 </Text> 115 </View>

··· 109 ], 110 ]}> 111 <Text 112 + style={[a.font_bold, largeAltBadge ? a.text_xs : {fontSize: 8}]}> 113 ALT 114 </Text> 115 </View>

+9 -7

src/view/screens/DebugMod.tsx

··· 275 <moderationOptsOverrideContext.Provider value={modOpts}> 276 <ScrollView> 277 <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}> 278 - <H1 style={[a.text_5xl, a.font_bold, a.pb_lg]}> 279 Moderation states 280 </H1> 281 ··· 396 <View style={[a.mt_md]}> 397 <Text 398 style={[ 399 - a.font_bold, 400 a.text_xs, 401 t.atoms.text, 402 a.pb_sm, ··· 438 <View> 439 <Text 440 style={[ 441 - a.font_bold, 442 a.text_xs, 443 t.atoms.text, 444 a.pl_md, ··· 596 function Heading({title, subtitle}: {title: string; subtitle?: string}) { 597 const t = useTheme() 598 return ( 599 - <H3 style={[a.text_3xl, a.font_bold, a.pb_md]}> 600 {title}{' '} 601 {!!subtitle && ( 602 <H3 style={[t.atoms.text_contrast_medium, a.text_lg]}>{subtitle}</H3> ··· 627 a.mt_md, 628 ]}> 629 <View> 630 - <Text style={[a.font_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}> 0 631 Blurs 632 </Text> 633 <View ··· 662 </View> 663 </View> 664 <View> 665 - <Text style={[a.font_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}> 0 666 Severity 667 </Text> 668 <View ··· 789 const ui = mod.ui(key as keyof ModerationBehavior) 790 return ( 791 <View key={key} style={[a.flex_row, a.gap_md]}> 792 - <Text style={[a.font_bold, {width: 100}]}>{key}</Text> 793 <Flag v={ui.filter} label="Filter" /> 794 <Flag v={ui.blur} label="Blur" /> 795 <Flag v={ui.alert} label="Alert" />

··· 275 <moderationOptsOverrideContext.Provider value={modOpts}> 276 <ScrollView> 277 <CenteredView style={[t.atoms.bg, a.px_lg, a.py_lg]}> 278 + <H1 style={[a.text_5xl, a.font_semi_bold, a.pb_lg]}> 279 Moderation states 280 </H1> 281 ··· 396 <View style={[a.mt_md]}> 397 <Text 398 style={[ 399 + a.font_semi_bold, 400 a.text_xs, 401 t.atoms.text, 402 a.pb_sm, ··· 438 <View> 439 <Text 440 style={[ 441 + a.font_semi_bold, 442 a.text_xs, 443 t.atoms.text, 444 a.pl_md, ··· 596 function Heading({title, subtitle}: {title: string; subtitle?: string}) { 597 const t = useTheme() 598 return ( 599 + <H3 style={[a.text_3xl, a.font_semi_bold, a.pb_md]}> 600 {title}{' '} 601 {!!subtitle && ( 602 <H3 style={[t.atoms.text_contrast_medium, a.text_lg]}>{subtitle}</H3> ··· 627 a.mt_md, 628 ]}> 629 <View> 630 + <Text 631 + style={[a.font_semi_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}> 632 Blurs 633 </Text> 634 <View ··· 663 </View> 664 </View> 665 <View> 666 + <Text 667 + style={[a.font_semi_bold, a.text_xs, t.atoms.text, a.pl_md, a.pb_xs]}> 668 Severity 669 </Text> 670 <View ··· 791 const ui = mod.ui(key as keyof ModerationBehavior) 792 return ( 793 <View key={key} style={[a.flex_row, a.gap_md]}> 794 + <Text style={[a.font_semi_bold, {width: 100}]}>{key}</Text> 795 <Flag v={ui.filter} label="Filter" /> 796 <Flag v={ui.blur} label="Blur" /> 797 <Flag v={ui.alert} label="Alert" />

+2 -2

src/view/screens/Feeds.tsx

··· 700 }> 701 <IconCircle icon={ListSparkle_Stroke2_Corner0_Rounded} size="lg" /> 702 <View style={[a.flex_1, a.gap_xs]}> 703 - <Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}> 704 <Trans>My Feeds</Trans> 705 </Text> 706 <Text style={[t.atoms.text_contrast_high]}> ··· 726 size="lg" 727 /> 728 <View style={[a.flex_1, a.gap_sm]}> 729 - <Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}> 730 <Trans>Discover New Feeds</Trans> 731 </Text> 732 <Text style={[t.atoms.text_contrast_high]}>

··· 700 }> 701 <IconCircle icon={ListSparkle_Stroke2_Corner0_Rounded} size="lg" /> 702 <View style={[a.flex_1, a.gap_xs]}> 703 + <Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}> 704 <Trans>My Feeds</Trans> 705 </Text> 706 <Text style={[t.atoms.text_contrast_high]}> ··· 726 size="lg" 727 /> 728 <View style={[a.flex_1, a.gap_sm]}> 729 + <Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}> 730 <Trans>Discover New Feeds</Trans> 731 </Text> 732 <Text style={[t.atoms.text_contrast_high]}>

+2 -2

src/view/screens/Storybook/Buttons.tsx

··· 16 export function Buttons() { 17 return ( 18 <View style={[a.gap_md]}> 19 - <Text style={[a.font_heavy, a.text_5xl]}>Buttons</Text> 20 21 {[ 22 'primary', ··· 29 <Fragment key={color}> 30 {['tiny', 'small', 'large'].map(size => ( 31 <Fragment key={size}> 32 - <Text style={[a.font_heavy, a.text_2xl]}> 33 color={color} size={size} 34 </Text> 35 <View style={[a.flex_row, a.align_start, a.gap_md]}>

··· 16 export function Buttons() { 17 return ( 18 <View style={[a.gap_md]}> 19 + <Text style={[a.font_bold, a.text_5xl]}>Buttons</Text> 20 21 {[ 22 'primary', ··· 29 <Fragment key={color}> 30 {['tiny', 'small', 'large'].map(size => ( 31 <Fragment key={size}> 32 + <Text style={[a.font_bold, a.text_2xl]}> 33 color={color} size={size} 34 </Text> 35 <View style={[a.flex_row, a.align_start, a.gap_md]}>

+1 -1

src/view/screens/Storybook/Settings.tsx

··· 106 color={t.palette.primary_500} 107 /> 108 <SettingsList.ItemText 109 - style={[{color: t.palette.primary_500}, a.font_bold]}> 110 Protect your account 111 </SettingsList.ItemText> 112 <SettingsList.Chevron color={t.palette.primary_500} />

··· 106 color={t.palette.primary_500} 107 /> 108 <SettingsList.ItemText 109 + style={[{color: t.palette.primary_500}, a.font_semi_bold]}> 110 Protect your account 111 </SettingsList.ItemText> 112 <SettingsList.Chevron color={t.palette.primary_500} />

+4 -4

src/view/screens/Storybook/Theming.tsx

··· 11 <View style={[t.atoms.bg, a.gap_lg, a.p_xl]}> 12 <Palette /> 13 14 - <Text style={[a.font_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text> 15 16 <View style={[a.flex_1, t.atoms.border_contrast_high, a.border_t]} /> 17 - <Text style={[a.font_bold, t.atoms.text_contrast_high, a.px_md]}> 18 theme.atoms.text_contrast_high 19 </Text> 20 21 <View style={[a.flex_1, t.atoms.border_contrast_medium, a.border_t]} /> 22 - <Text style={[a.font_bold, t.atoms.text_contrast_medium, a.px_md]}> 23 theme.atoms.text_contrast_medium 24 </Text> 25 26 <View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} /> 27 - <Text style={[a.font_bold, t.atoms.text_contrast_low, a.px_md]}> 28 theme.atoms.text_contrast_low 29 </Text> 30

··· 11 <View style={[t.atoms.bg, a.gap_lg, a.p_xl]}> 12 <Palette /> 13 14 + <Text style={[a.font_semi_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text> 15 16 <View style={[a.flex_1, t.atoms.border_contrast_high, a.border_t]} /> 17 + <Text style={[a.font_semi_bold, t.atoms.text_contrast_high, a.px_md]}> 18 theme.atoms.text_contrast_high 19 </Text> 20 21 <View style={[a.flex_1, t.atoms.border_contrast_medium, a.border_t]} /> 22 + <Text style={[a.font_semi_bold, t.atoms.text_contrast_medium, a.px_md]}> 23 theme.atoms.text_contrast_medium 24 </Text> 25 26 <View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} /> 27 + <Text style={[a.font_semi_bold, t.atoms.text_contrast_low, a.px_md]}> 28 theme.atoms.text_contrast_low 29 </Text> 30

+4 -4

src/view/screens/Storybook/Typography.tsx

··· 26 <Text style={[a.text_xl, a.font_medium, a.italic]}> 27 This is medium italic text 28 </Text> 29 - <Text style={[a.text_xl, a.font_bold]}>This is bold text</Text> 30 - <Text style={[a.text_xl, a.font_bold, a.italic]}> 31 This is bold italic text 32 </Text> 33 - <Text style={[a.text_xl, a.font_heavy]}>This is heavy text</Text> 34 - <Text style={[a.text_xl, a.font_heavy, a.italic]}> 35 This is heavy italic text 36 </Text> 37

··· 26 <Text style={[a.text_xl, a.font_medium, a.italic]}> 27 This is medium italic text 28 </Text> 29 + <Text style={[a.text_xl, a.font_semi_bold]}>This is bold text</Text> 30 + <Text style={[a.text_xl, a.font_semi_bold, a.italic]}> 31 This is bold italic text 32 </Text> 33 + <Text style={[a.text_xl, a.font_bold]}>This is heavy text</Text> 34 + <Text style={[a.text_xl, a.font_bold, a.italic]}> 35 This is heavy italic text 36 </Text> 37

+5 -5

src/view/shell/Drawer.tsx

··· 90 <View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}> 91 <Text 92 emoji 93 - style={[a.font_heavy, a.text_xl, a.mt_2xs, a.leading_tight]} 94 numberOfLines={1}> 95 {profile?.displayName || account.handle} 96 </Text> ··· 115 </View> 116 <Text style={[a.text_md, t.atoms.text_contrast_medium]}> 117 <Trans> 118 - <Text style={[a.text_md, a.font_bold]}> 119 {formatCount(i18n, profile?.followersCount ?? 0)} 120 </Text>{' '} 121 <Plural ··· 126 </Trans>{' '} 127 &middot;{' '} 128 <Trans> 129 - <Text style={[a.text_md, a.font_bold]}> 130 {formatCount(i18n, profile?.followsCount ?? 0)} 131 </Text>{' '} 132 <Plural ··· 656 style={[ 657 a.text_xs, 658 a.leading_tight, 659 - a.font_bold, 660 { 661 fontVariant: ['tabular-nums'], 662 color: colors.white, ··· 673 style={[ 674 a.flex_1, 675 a.text_2xl, 676 - bold && a.font_heavy, 677 web(a.leading_snug), 678 ]} 679 numberOfLines={1}>

··· 90 <View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}> 91 <Text 92 emoji 93 + style={[a.font_bold, a.text_xl, a.mt_2xs, a.leading_tight]} 94 numberOfLines={1}> 95 {profile?.displayName || account.handle} 96 </Text> ··· 115 </View> 116 <Text style={[a.text_md, t.atoms.text_contrast_medium]}> 117 <Trans> 118 + <Text style={[a.text_md, a.font_semi_bold]}> 119 {formatCount(i18n, profile?.followersCount ?? 0)} 120 </Text>{' '} 121 <Plural ··· 126 </Trans>{' '} 127 &middot;{' '} 128 <Trans> 129 + <Text style={[a.text_md, a.font_semi_bold]}> 130 {formatCount(i18n, profile?.followsCount ?? 0)} 131 </Text>{' '} 132 <Plural ··· 656 style={[ 657 a.text_xs, 658 a.leading_tight, 659 + a.font_semi_bold, 660 { 661 fontVariant: ['tabular-nums'], 662 color: colors.white, ··· 673 style={[ 674 a.flex_1, 675 a.text_2xl, 676 + bold && a.font_bold, 677 web(a.leading_snug), 678 ]} 679 numberOfLines={1}>

+1 -1

src/view/shell/NavSignupCard.tsx

··· 36 37 <View style={[a.pt_lg]}> 38 <Text 39 - style={[a.text_3xl, a.font_heavy, {lineHeight: a.text_3xl.fontSize}]}> 40 <Trans>Join the conversation</Trans> 41 </Text> 42 </View>

··· 36 37 <View style={[a.pt_lg]}> 38 <Text 39 + style={[a.text_3xl, a.font_bold, {lineHeight: a.text_3xl.fontSize}]}> 40 <Trans>Join the conversation</Trans> 41 </Text> 42 </View>

+1 -1

src/view/shell/desktop/Feeds.tsx

··· 90 a.text_md, 91 a.leading_snug, 92 current 93 - ? [a.font_bold, t.atoms.text] 94 : [t.atoms.text_contrast_medium], 95 web({ 96 marginHorizontal: 2,

··· 90 a.text_md, 91 a.leading_snug, 92 current 93 + ? [a.font_semi_bold, t.atoms.text] 94 : [t.atoms.text_contrast_medium], 95 web({ 96 marginHorizontal: 2,

+3 -3

src/view/shell/desktop/LeftNav.tsx

··· 161 }, 162 ]}> 163 <Text 164 - style={[a.font_heavy, a.text_sm, a.leading_snug]} 165 numberOfLines={1}> 166 {sanitizeDisplayName( 167 profile.displayName || profile.handle, ··· 462 style={[ 463 a.absolute, 464 a.text_xs, 465 - a.font_bold, 466 a.rounded_full, 467 a.text_center, 468 a.leading_tight, ··· 509 ) : null} 510 </View> 511 {!leftNavMinimal && ( 512 - <Text style={[a.text_xl, isCurrent ? a.font_heavy : a.font_normal]}> 513 {label} 514 </Text> 515 )}

··· 161 }, 162 ]}> 163 <Text 164 + style={[a.font_bold, a.text_sm, a.leading_snug]} 165 numberOfLines={1}> 166 {sanitizeDisplayName( 167 profile.displayName || profile.handle, ··· 462 style={[ 463 a.absolute, 464 a.text_xs, 465 + a.font_semi_bold, 466 a.rounded_full, 467 a.text_center, 468 a.leading_tight, ··· 509 ) : null} 510 </View> 511 {!leftNavMinimal && ( 512 + <Text style={[a.text_xl, isCurrent ? a.font_bold : a.font_normal]}> 513 {label} 514 </Text> 515 )}

+1 -1

src/view/shell/desktop/SidebarTrendingTopics.tsx

··· 53 style={[ 54 a.flex_1, 55 a.text_sm, 56 - a.font_bold, 57 t.atoms.text_contrast_medium, 58 ]}> 59 <Trans>Trending</Trans>

··· 53 style={[ 54 a.flex_1, 55 a.text_sm, 56 + a.font_semi_bold, 57 t.atoms.text_contrast_medium, 58 ]}> 59 <Trans>Trending</Trans>

+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 0 0 0 0 0 0 0 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"

··· 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"