Bluesky app fork with some witchin' additions 💫

[Neue] Font weights (#5442)

* Align all font weights

* Only load necessary fonts

* Also comment out from hook

authored by

Eric Bailey and committed by
GitHub
7e2456b9 4161e233

+362 -367
+12
bskyweb/templates/base.html
··· 15 15 16 16 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf"> 17 17 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf"> 18 + <!-- 18 19 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf"> 19 20 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf"> 21 + --> 20 22 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf"> 21 23 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf"> 24 + <!-- 22 25 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf"> 23 26 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf"> 27 + --> 24 28 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf"> 25 29 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf"> 30 + <!-- 26 31 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf"> 27 32 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf"> 33 + --> 28 34 29 35 <style> 30 36 @font-face { ··· 41 47 font-style: italic; 42 48 font-display: swap; 43 49 } 50 + /* 44 51 @font-face { 45 52 font-family: "Inter-Medium"; 46 53 src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf"); ··· 55 62 font-style: italic; 56 63 font-display: swap; 57 64 } 65 + */ 58 66 @font-face { 59 67 font-family: "Inter-SemiBold"; 60 68 src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf"); ··· 69 77 font-style: italic; 70 78 font-display: swap; 71 79 } 80 + /* 72 81 @font-face { 73 82 font-family: "Inter-Bold"; 74 83 src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf"); ··· 83 92 font-style: italic; 84 93 font-display: swap; 85 94 } 95 + */ 86 96 @font-face { 87 97 font-family: "Inter-ExtraBold"; 88 98 src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf"); ··· 97 107 font-style: italic; 98 108 font-display: swap; 99 109 } 110 + /* 100 111 @font-face { 101 112 font-family: "Inter-Black"; 102 113 src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf"); ··· 111 122 font-style: italic; 112 123 font-display: swap; 113 124 } 125 + */ 114 126 115 127 /** 116 128 * Extend the react-native-web reset:
+3 -6
src/alf/atoms.ts
··· 276 276 letterSpacing: tokens.TRACKING, 277 277 }, 278 278 font_normal: { 279 - fontWeight: tokens.fontWeight.normal, 279 + fontWeight: tokens.fontWeight.regular, 280 280 }, 281 - font_semibold: { 281 + font_bold: { 282 282 fontWeight: tokens.fontWeight.semibold, 283 283 }, 284 - font_bold: { 285 - fontWeight: tokens.fontWeight.bold, 286 - }, 287 284 font_heavy: { 288 - fontWeight: tokens.fontWeight.heavy, 285 + fontWeight: tokens.fontWeight.extrabold, 289 286 }, 290 287 italic: { 291 288 fontStyle: 'italic',
+6 -6
src/alf/fonts.ts
··· 54 54 // 'Inter-LightItalic': require('../../assets/fonts/inter/Inter-LightItalic.otf'), 55 55 'Inter-Regular': require('../../assets/fonts/inter/Inter-Regular.otf'), 56 56 'Inter-Italic': require('../../assets/fonts/inter/Inter-Italic.otf'), 57 - 'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'), 58 - 'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'), 57 + // 'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'), 58 + // 'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'), 59 59 'Inter-SemiBold': require('../../assets/fonts/inter/Inter-SemiBold.otf'), 60 60 'Inter-SemiBoldItalic': require('../../assets/fonts/inter/Inter-SemiBoldItalic.otf'), 61 - 'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'), 62 - 'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'), 61 + // 'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'), 62 + // 'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'), 63 63 'Inter-ExtraBold': require('../../assets/fonts/inter/Inter-ExtraBold.otf'), 64 64 'Inter-ExtraBoldItalic': require('../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'), 65 - 'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'), 66 - 'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'), 65 + // 'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'), 66 + // 'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'), 67 67 }) 68 68 } 69 69
+9 -4
src/alf/tokens.ts
··· 47 47 full: 999, 48 48 } as const 49 49 50 + /** 51 + * These correspond to Inter font files we actually load. 52 + */ 50 53 export const fontWeight = { 51 - normal: '400', 52 - semibold: '500', 53 - bold: '600', 54 - heavy: '700', 54 + regular: '400', 55 + // medium: '500', 56 + semibold: '600', 57 + // bold: '700', 58 + extrabold: '800', 59 + // black: '900', 55 60 } as const 56 61 57 62 export const gradients = {
+1 -1
src/components/LabelingServiceCard/index.tsx
··· 86 86 a.mt_sm, 87 87 a.text_sm, 88 88 t.atoms.text_contrast_medium, 89 - {fontWeight: '500'}, 89 + {fontWeight: '600'}, 90 90 ]}> 91 91 <Plural value={count} one="Liked by # user" other="Liked by # users" /> 92 92 </Text>
+1 -1
src/components/MediaPreview.tsx
··· 170 170 alt: { 171 171 color: 'white', 172 172 fontSize: 7, 173 - fontWeight: 'bold', 173 + fontWeight: '600', 174 174 }, 175 175 })
+1 -1
src/components/Pills.tsx
··· 132 132 <Text 133 133 style={[ 134 134 text, 135 - a.font_semibold, 135 + a.font_bold, 136 136 a.leading_tight, 137 137 t.atoms.text_contrast_medium, 138 138 {paddingRight: 3},
+1 -1
src/components/ProgressGuide/List.tsx
··· 26 26 <Text 27 27 style={[ 28 28 t.atoms.text_contrast_medium, 29 - a.font_semibold, 29 + a.font_bold, 30 30 a.text_sm, 31 31 {textTransform: 'uppercase'}, 32 32 ]}>
+1 -3
src/components/ProgressGuide/Task.tsx
··· 35 35 )} 36 36 37 37 <View style={[a.flex_col, a.gap_2xs, {marginTop: -2}]}> 38 - <Text style={[a.text_sm, a.font_semibold, a.leading_tight]}> 39 - {title} 40 - </Text> 38 + <Text style={[a.text_sm, a.font_bold, a.leading_tight]}>{title}</Text> 41 39 {subtitle && ( 42 40 <Text 43 41 style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}>
+1 -1
src/components/ProgressGuide/Toast.tsx
··· 154 154 ref={animatedCheckRef} 155 155 /> 156 156 <View> 157 - <Text style={[a.text_md, a.font_semibold]}>{title}</Text> 157 + <Text style={[a.text_md, a.font_bold]}>{title}</Text> 158 158 {subtitle && ( 159 159 <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> 160 160 {subtitle}
+1 -2
src/components/ReportDialog/SelectLabelerView.tsx
··· 77 77 handle: labeler.creator.handle, 78 78 })} 79 79 /> 80 - <Text 81 - style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semibold]}> 80 + <Text style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}> 82 81 @{labeler.creator.handle} 83 82 </Text> 84 83 </LabelingServiceCard.Content>
+1 -3
src/components/dialogs/PostInteractionSettingsDialog.tsx
··· 491 491 }, 492 492 style, 493 493 ]}> 494 - <Text style={[a.text_sm, isSelected && a.font_semibold]}> 495 - {label} 496 - </Text> 494 + <Text style={[a.text_sm, isSelected && a.font_bold]}>{label}</Text> 497 495 {isSelected ? ( 498 496 <Check size="sm" fill={t.palette.primary_500} /> 499 497 ) : (
+1 -1
src/components/dialogs/nuxs/NeueTypography.tsx
··· 48 48 <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}> 49 49 <View style={[a.gap_xl]}> 50 50 <View style={[a.gap_md]}> 51 - <Text style={[a.text_3xl, {fontWeight: '900'}]}> 51 + <Text style={[a.text_3xl, a.font_heavy]}> 52 52 <Trans>New font settings ✨</Trans> 53 53 </Text> 54 54 <Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}>
+7 -14
src/components/dialogs/nuxs/TenMillion/index.tsx
··· 19 19 import {useModerationOpts} from '#/state/preferences/moderation-opts' 20 20 import {useProfileQuery} from '#/state/queries/profile' 21 21 import {useAgent, useSession} from '#/state/session' 22 - import {useComposerControls} from 'state/shell' 22 + import {useComposerControls} from '#/state/shell' 23 23 import {formatCount} from '#/view/com/util/numeric/format' 24 + import * as Toast from '#/view/com/util/Toast' 24 25 import {Logomark} from '#/view/icons/Logomark' 25 - import * as Toast from 'view/com/util/Toast' 26 26 import { 27 27 atoms as a, 28 28 ThemeProvider, ··· 441 441 allowFontScaling={false} 442 442 style={[ 443 443 a.absolute, 444 + a.font_heavy, 444 445 { 445 446 color: t.palette.primary_500, 446 447 fontSize: 32, 447 - fontWeight: '900', 448 448 width: 32, 449 449 top: isNative ? -10 : 0, 450 450 left: 0, ··· 462 462 style={[ 463 463 a.relative, 464 464 a.text_center, 465 + a.font_heavy, 465 466 { 466 467 fontStyle: 'italic', 467 468 fontSize: getFontSize(userNumber), 468 469 lineHeight: getFontSize(userNumber), 469 - fontWeight: '900', 470 470 letterSpacing: -2, 471 471 }, 472 472 ]}> ··· 536 536 style={[ 537 537 a.flex_1, 538 538 a.text_sm, 539 - a.font_semibold, 539 + a.font_bold, 540 540 a.leading_snug, 541 541 lightTheme.atoms.text_contrast_medium, 542 542 ]}> ··· 551 551 style={[ 552 552 a.flex_1, 553 553 a.text_sm, 554 - a.font_semibold, 554 + a.font_bold, 555 555 a.leading_snug, 556 556 a.text_right, 557 557 lightTheme.atoms.text_contrast_low, ··· 643 643 <View style={[gtMobile ? a.p_2xl : a.p_xl]}> 644 644 <Text 645 645 allowFontScaling={false} 646 - style={[ 647 - a.text_5xl, 648 - a.leading_tight, 649 - a.pb_lg, 650 - { 651 - fontWeight: '900', 652 - }, 653 - ]}> 646 + style={[a.text_5xl, a.leading_tight, a.pb_lg, a.font_heavy]}> 654 647 <Trans>Thanks for being one of our first 10 million users.</Trans> 655 648 </Text> 656 649
+2 -2
src/components/moderation/ContentHider.tsx
··· 94 94 a.text_left, 95 95 a.font_bold, 96 96 a.leading_snug, 97 - gtMobile && [a.font_semibold], 97 + gtMobile && [a.font_bold], 98 98 t.atoms.text_contrast_medium, 99 99 web({ 100 100 marginBottom: 1, ··· 107 107 style={[ 108 108 a.font_bold, 109 109 a.leading_snug, 110 - gtMobile && [a.font_semibold], 110 + gtMobile && [a.font_bold], 111 111 t.atoms.text_contrast_high, 112 112 web({ 113 113 marginBottom: 1,
+1 -2
src/components/moderation/LabelPreference.tsx
··· 236 236 <View style={[a.flex_row, a.gap_xs, a.align_center, a.mt_xs]}> 237 237 <CircleInfo size="sm" fill={t.atoms.text_contrast_high.color} /> 238 238 239 - <Text 240 - style={[t.atoms.text_contrast_medium, a.font_semibold, a.italic]}> 239 + <Text style={[t.atoms.text_contrast_medium, a.font_bold, a.italic]}> 241 240 {adultDisabled ? ( 242 241 <Trans>Adult content is disabled.</Trans> 243 242 ) : isGlobalLabel ? (
+4 -10
src/components/moderation/ScreenHider.tsx
··· 10 10 import {useLingui} from '@lingui/react' 11 11 import {useNavigation} from '@react-navigation/native' 12 12 13 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 13 14 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription' 14 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 15 - import {NavigationProp} from 'lib/routes/types' 15 + import {NavigationProp} from '#/lib/routes/types' 16 16 import {CenteredView} from '#/view/com/util/Views' 17 17 import {atoms as a, useTheme, web} from '#/alf' 18 18 import {Button, ButtonText} from '#/components/Button' ··· 86 86 </View> 87 87 </View> 88 88 <Text 89 - style={[ 90 - a.text_4xl, 91 - a.font_semibold, 92 - a.text_center, 93 - a.mb_md, 94 - t.atoms.text, 95 - ]}> 89 + style={[a.text_4xl, a.font_bold, a.text_center, a.mb_md, t.atoms.text]}> 96 90 {isNoPwi ? ( 97 91 <Trans>Sign-in Required</Trans> 98 92 ) : ( ··· 118 112 <Text 119 113 style={[ 120 114 a.text_lg, 121 - a.font_semibold, 115 + a.font_bold, 122 116 a.leading_snug, 123 117 t.atoms.text, 124 118 a.ml_xs,
+4 -5
src/lib/styles.ts
··· 1 1 import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native' 2 2 3 - import {isWeb} from 'platform/detection' 3 + import {isWeb} from '#/platform/detection' 4 4 import {Theme, TypographyVariant} from './ThemeContext' 5 5 6 6 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest ··· 79 79 80 80 // font weights 81 81 fw600: {fontWeight: '600'}, 82 - bold: {fontWeight: '700'}, 83 - fw500: {fontWeight: '500'}, 84 - semiBold: {fontWeight: '500'}, 82 + bold: {fontWeight: '600'}, 83 + fw500: {fontWeight: '600'}, 84 + semiBold: {fontWeight: '600'}, 85 85 fw400: {fontWeight: '400'}, 86 86 normal: {fontWeight: '400'}, 87 87 fw300: {fontWeight: '400'}, 88 88 light: {fontWeight: '400'}, 89 - fw200: {fontWeight: '200'}, 90 89 91 90 // text decoration 92 91 underline: {textDecorationLine: 'underline'},
+19 -19
src/lib/themes.ts
··· 100 100 '2xl-medium': { 101 101 fontSize: 18, 102 102 letterSpacing: tokens.TRACKING, 103 - fontWeight: '500', 103 + fontWeight: '600', 104 104 }, 105 105 '2xl-bold': { 106 106 fontSize: 18, 107 107 letterSpacing: tokens.TRACKING, 108 - fontWeight: '700', 108 + fontWeight: '600', 109 109 }, 110 110 '2xl-heavy': { 111 111 fontSize: 18, ··· 125 125 'xl-medium': { 126 126 fontSize: 17, 127 127 letterSpacing: tokens.TRACKING, 128 - fontWeight: '500', 128 + fontWeight: '600', 129 129 }, 130 130 'xl-bold': { 131 131 fontSize: 17, 132 132 letterSpacing: tokens.TRACKING, 133 - fontWeight: '700', 133 + fontWeight: '600', 134 134 }, 135 135 'xl-heavy': { 136 136 fontSize: 17, ··· 150 150 'lg-medium': { 151 151 fontSize: 16, 152 152 letterSpacing: tokens.TRACKING, 153 - fontWeight: '500', 153 + fontWeight: '600', 154 154 }, 155 155 'lg-bold': { 156 156 fontSize: 16, 157 157 letterSpacing: tokens.TRACKING, 158 - fontWeight: '700', 158 + fontWeight: '600', 159 159 }, 160 160 'lg-heavy': { 161 161 fontSize: 16, ··· 175 175 'md-medium': { 176 176 fontSize: 15, 177 177 letterSpacing: tokens.TRACKING, 178 - fontWeight: '500', 178 + fontWeight: '600', 179 179 }, 180 180 'md-bold': { 181 181 fontSize: 15, 182 182 letterSpacing: tokens.TRACKING, 183 - fontWeight: '700', 183 + fontWeight: '600', 184 184 }, 185 185 'md-heavy': { 186 186 fontSize: 15, ··· 200 200 'sm-medium': { 201 201 fontSize: 14, 202 202 letterSpacing: tokens.TRACKING, 203 - fontWeight: '500', 203 + fontWeight: '600', 204 204 }, 205 205 'sm-bold': { 206 206 fontSize: 14, 207 207 letterSpacing: tokens.TRACKING, 208 - fontWeight: '700', 208 + fontWeight: '600', 209 209 }, 210 210 'sm-heavy': { 211 211 fontSize: 14, ··· 225 225 'xs-medium': { 226 226 fontSize: 13, 227 227 letterSpacing: tokens.TRACKING, 228 - fontWeight: '500', 228 + fontWeight: '600', 229 229 }, 230 230 'xs-bold': { 231 231 fontSize: 13, 232 232 letterSpacing: tokens.TRACKING, 233 - fontWeight: '700', 233 + fontWeight: '600', 234 234 }, 235 235 'xs-heavy': { 236 236 fontSize: 13, ··· 241 241 'title-2xl': { 242 242 fontSize: 34, 243 243 letterSpacing: tokens.TRACKING, 244 - fontWeight: '500', 244 + fontWeight: '600', 245 245 }, 246 246 'title-xl': { 247 247 fontSize: 28, 248 248 letterSpacing: tokens.TRACKING, 249 - fontWeight: '500', 249 + fontWeight: '600', 250 250 }, 251 251 'title-lg': { 252 252 fontSize: 22, 253 - fontWeight: '500', 253 + fontWeight: '600', 254 254 }, 255 255 title: { 256 - fontWeight: '500', 256 + fontWeight: '600', 257 257 fontSize: 20, 258 258 letterSpacing: tokens.TRACKING, 259 259 }, 260 260 'title-sm': { 261 - fontWeight: 'bold', 261 + fontWeight: '600', 262 262 fontSize: 17, 263 263 letterSpacing: tokens.TRACKING, 264 264 }, ··· 273 273 fontWeight: '400', 274 274 }, 275 275 'button-lg': { 276 - fontWeight: '500', 276 + fontWeight: '600', 277 277 fontSize: 18, 278 278 letterSpacing: tokens.TRACKING, 279 279 }, 280 280 button: { 281 - fontWeight: '500', 281 + fontWeight: '600', 282 282 fontSize: 14, 283 283 letterSpacing: tokens.TRACKING, 284 284 },
+1 -1
src/screens/Moderation/index.tsx
··· 339 339 a.justify_between, 340 340 disabledOnIOS && {opacity: 0.5}, 341 341 ]}> 342 - <Text style={[a.font_semibold, t.atoms.text_contrast_high]}> 342 + <Text style={[a.font_bold, t.atoms.text_contrast_high]}> 343 343 <Trans>Enable adult content</Trans> 344 344 </Text> 345 345 <Toggle.Item
+3 -3
src/screens/Profile/Header/DisplayName.tsx
··· 2 2 import {View} from 'react-native' 3 3 import {AppBskyActorDefs, ModerationDecision} from '@atproto/api' 4 4 5 + import {sanitizeDisplayName} from '#/lib/strings/display-names' 6 + import {sanitizeHandle} from '#/lib/strings/handles' 5 7 import {Shadow} from '#/state/cache/types' 6 - import {sanitizeDisplayName} from 'lib/strings/display-names' 7 - import {sanitizeHandle} from 'lib/strings/handles' 8 8 import {atoms as a, useTheme} from '#/alf' 9 9 import {Text} from '#/components/Typography' 10 10 ··· 20 20 <View pointerEvents="none"> 21 21 <Text 22 22 testID="profileHeaderDisplayName" 23 - style={[t.atoms.text, a.text_4xl, a.self_start, {fontWeight: '500'}]}> 23 + style={[t.atoms.text, a.text_4xl, a.self_start, {fontWeight: '600'}]}> 24 24 {sanitizeDisplayName( 25 25 profile.displayName || sanitizeHandle(profile.handle), 26 26 moderation.ui('displayName'),
+3 -3
src/screens/Signup/index.tsx
··· 8 8 import {useAnalytics} from '#/lib/analytics/analytics' 9 9 import {FEEDBACK_FORM_URL} from '#/lib/constants' 10 10 import {useServiceQuery} from '#/state/queries/service' 11 - import {useStarterPackQuery} from 'state/queries/starter-packs' 12 - import {useActiveStarterPack} from 'state/shell/starter-pack' 11 + import {useStarterPackQuery} from '#/state/queries/starter-packs' 12 + import {useActiveStarterPack} from '#/state/shell/starter-pack' 13 13 import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' 14 14 import { 15 15 initialState, ··· 132 132 !gtMobile && {paddingBottom: 100}, 133 133 ]}> 134 134 <View style={[a.gap_sm, a.pb_3xl]}> 135 - <Text style={[a.font_semibold, t.atoms.text_contrast_medium]}> 135 + <Text style={[a.font_bold, t.atoms.text_contrast_medium]}> 136 136 <Trans> 137 137 Step {state.activeStep + 1} of{' '} 138 138 {state.serviceDescription &&
+13 -22
src/screens/StarterPack/StarterPackLandingScreen.tsx
··· 11 11 import {msg, Trans} from '@lingui/macro' 12 12 import {useLingui} from '@lingui/react' 13 13 14 + import {isAndroidWeb} from '#/lib/browser' 14 15 import {JOINED_THIS_WEEK} from '#/lib/constants' 15 - import {isAndroidWeb} from 'lib/browser' 16 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 17 - import {logEvent} from 'lib/statsig/statsig' 18 - import {createStarterPackGooglePlayUri} from 'lib/strings/starter-pack' 19 - import {isWeb} from 'platform/detection' 20 - import {useModerationOpts} from 'state/preferences/moderation-opts' 21 - import {useStarterPackQuery} from 'state/queries/starter-packs' 16 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 17 + import {logEvent} from '#/lib/statsig/statsig' 18 + import {createStarterPackGooglePlayUri} from '#/lib/strings/starter-pack' 19 + import {isWeb} from '#/platform/detection' 20 + import {useModerationOpts} from '#/state/preferences/moderation-opts' 21 + import {useStarterPackQuery} from '#/state/queries/starter-packs' 22 22 import { 23 23 useActiveStarterPack, 24 24 useSetActiveStarterPack, 25 - } from 'state/shell/starter-pack' 25 + } from '#/state/shell/starter-pack' 26 + import {LoggedOutScreenState} from '#/view/com/auth/LoggedOut' 26 27 import {formatCount} from '#/view/com/util/numeric/format' 27 - import {LoggedOutScreenState} from 'view/com/auth/LoggedOut' 28 - import {CenteredView} from 'view/com/util/Views' 29 - import {Logo} from 'view/icons/Logo' 28 + import {CenteredView} from '#/view/com/util/Views' 29 + import {Logo} from '#/view/icons/Logo' 30 30 import {atoms as a, useTheme} from '#/alf' 31 31 import {Button, ButtonText} from '#/components/Button' 32 32 import {useDialogControl} from '#/components/Dialog' ··· 188 188 {record.name} 189 189 </Text> 190 190 <Text 191 - style={[ 192 - a.text_center, 193 - a.font_semibold, 194 - a.text_md, 195 - {color: 'white'}, 196 - ]}> 191 + style={[a.text_center, a.font_bold, a.text_md, {color: 'white'}]}> 197 192 Starter pack by {`@${creator.handle}`} 198 193 </Text> 199 194 </LinearGradientBackground> ··· 219 214 color={t.atoms.text_contrast_medium.color} 220 215 /> 221 216 <Text 222 - style={[ 223 - a.font_semibold, 224 - a.text_sm, 225 - t.atoms.text_contrast_medium, 226 - ]} 217 + style={[a.font_bold, a.text_sm, t.atoms.text_contrast_medium]} 227 218 numberOfLines={1}> 228 219 <Trans> 229 220 {formatCount(i18n, JOINED_THIS_WEEK)} joined this week
+2 -3
src/view/com/auth/SplashScreen.tsx
··· 4 4 import {msg, Trans} from '@lingui/macro' 5 5 import {useLingui} from '@lingui/react' 6 6 7 + import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' 7 8 import {Logo} from '#/view/icons/Logo' 8 9 import {Logotype} from '#/view/icons/Logotype' 9 - import {ErrorBoundary} from 'view/com/util/ErrorBoundary' 10 10 import {atoms as a, useTheme} from '#/alf' 11 11 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown' 12 12 import {Button, ButtonText} from '#/components/Button' ··· 35 35 <Logotype width={161} fill={t.atoms.text.color} /> 36 36 </View> 37 37 38 - <Text 39 - style={[a.text_md, a.font_semibold, t.atoms.text_contrast_medium]}> 38 + <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}> 40 39 <Trans>What's up?</Trans> 41 40 </Text> 42 41 </View>
+3 -7
src/view/com/auth/SplashScreen.web.tsx
··· 4 4 import {msg, Trans} from '@lingui/macro' 5 5 import {useLingui} from '@lingui/react' 6 6 7 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 7 8 import {useKawaiiMode} from '#/state/preferences/kawaii' 8 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 9 + import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' 9 10 import {Logo} from '#/view/icons/Logo' 10 11 import {Logotype} from '#/view/icons/Logotype' 11 - import {ErrorBoundary} from 'view/com/util/ErrorBoundary' 12 12 import {atoms as a, useTheme} from '#/alf' 13 13 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown' 14 14 import {Button, ButtonText} from '#/components/Button' ··· 78 78 )} 79 79 80 80 <Text 81 - style={[ 82 - a.text_md, 83 - a.font_semibold, 84 - t.atoms.text_contrast_medium, 85 - ]}> 81 + style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}> 86 82 <Trans>What's up?</Trans> 87 83 </Text> 88 84 </View>
+7 -7
src/view/com/composer/photos/Gallery.tsx
··· 7 7 import {useLingui} from '@lingui/react' 8 8 import {observer} from 'mobx-react-lite' 9 9 10 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 11 + import {Dimensions} from '#/lib/media/types' 12 + import {colors, s} from '#/lib/styles' 13 + import {isNative} from '#/platform/detection' 10 14 import {useModalControls} from '#/state/modals' 11 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 12 - import {Dimensions} from 'lib/media/types' 13 - import {colors, s} from 'lib/styles' 14 - import {isNative} from 'platform/detection' 15 - import {GalleryModel} from 'state/models/media/gallery' 16 - import {Text} from 'view/com/util/text/Text' 15 + import {GalleryModel} from '#/state/models/media/gallery' 16 + import {Text} from '#/view/com/util/text/Text' 17 17 import {useTheme} from '#/alf' 18 18 19 19 const IMAGE_GAP = 8 ··· 263 263 altTextControlLabel: { 264 264 color: 'white', 265 265 fontSize: 12, 266 - fontWeight: 'bold', 266 + fontWeight: '600', 267 267 letterSpacing: 1, 268 268 }, 269 269 altTextHiddenRegion: {
+10 -10
src/view/com/modals/CreateOrEditList.tsx
··· 14 14 import {msg, Trans} from '@lingui/macro' 15 15 import {useLingui} from '@lingui/react' 16 16 17 + import {useAnalytics} from '#/lib/analytics/analytics' 18 + import {usePalette} from '#/lib/hooks/usePalette' 19 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 20 + import {compressIfNeeded} from '#/lib/media/manip' 21 + import {cleanError, isNetworkError} from '#/lib/strings/errors' 22 + import {enforceLen} from '#/lib/strings/helpers' 17 23 import {richTextToString} from '#/lib/strings/rich-text-helpers' 18 24 import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip' 25 + import {colors, gradients, s} from '#/lib/styles' 26 + import {useTheme} from '#/lib/ThemeContext' 19 27 import {useModalControls} from '#/state/modals' 20 28 import { 21 29 useListCreateMutation, 22 30 useListMetadataMutation, 23 31 } from '#/state/queries/list' 24 32 import {useAgent} from '#/state/session' 25 - import {useAnalytics} from 'lib/analytics/analytics' 26 - import {usePalette} from 'lib/hooks/usePalette' 27 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 28 - import {compressIfNeeded} from 'lib/media/manip' 29 - import {cleanError, isNetworkError} from 'lib/strings/errors' 30 - import {enforceLen} from 'lib/strings/helpers' 31 - import {colors, gradients, s} from 'lib/styles' 32 - import {useTheme} from 'lib/ThemeContext' 33 33 import {ErrorMessage} from '../util/error/ErrorMessage' 34 34 import {Text} from '../util/text/Text' 35 35 import * as Toast from '../util/Toast' ··· 359 359 const styles = StyleSheet.create({ 360 360 title: { 361 361 textAlign: 'center', 362 - fontWeight: 'bold', 362 + fontWeight: '600', 363 363 fontSize: 24, 364 364 marginBottom: 18, 365 365 }, ··· 373 373 marginTop: 20, 374 374 }, 375 375 label: { 376 - fontWeight: 'bold', 376 + fontWeight: '600', 377 377 }, 378 378 form: { 379 379 paddingHorizontal: 6,
+10 -10
src/view/com/modals/EditImage.tsx
··· 8 8 import {observer} from 'mobx-react-lite' 9 9 import ImageEditor, {Position} from 'react-avatar-editor' 10 10 11 + import {MAX_ALT_TEXT} from '#/lib/constants' 12 + import {usePalette} from '#/lib/hooks/usePalette' 13 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 14 + import {enforceLen} from '#/lib/strings/helpers' 15 + import {gradients, s} from '#/lib/styles' 16 + import {useTheme} from '#/lib/ThemeContext' 17 + import {getKeys} from '#/lib/type-assertions' 11 18 import {useModalControls} from '#/state/modals' 12 - import {MAX_ALT_TEXT} from 'lib/constants' 13 - import {usePalette} from 'lib/hooks/usePalette' 14 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 15 - import {enforceLen} from 'lib/strings/helpers' 16 - import {gradients, s} from 'lib/styles' 17 - import {useTheme} from 'lib/ThemeContext' 18 - import {getKeys} from 'lib/type-assertions' 19 - import {GalleryModel} from 'state/models/media/gallery' 20 - import {ImageModel} from 'state/models/media/image' 19 + import {GalleryModel} from '#/state/models/media/gallery' 20 + import {ImageModel} from '#/state/models/media/image' 21 21 import {atoms as a} from '#/alf' 22 22 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 23 23 import { ··· 333 333 subsection: {marginTop: 12}, 334 334 gap18: {gap: 18}, 335 335 title: { 336 - fontWeight: 'bold', 336 + fontWeight: '600', 337 337 fontSize: 24, 338 338 }, 339 339 btns: {
+11 -11
src/view/com/modals/EditProfile.tsx
··· 15 15 import {msg, Trans} from '@lingui/macro' 16 16 import {useLingui} from '@lingui/react' 17 17 18 + import {useAnalytics} from '#/lib/analytics/analytics' 19 + import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from '#/lib/constants' 20 + import {usePalette} from '#/lib/hooks/usePalette' 21 + import {compressIfNeeded} from '#/lib/media/manip' 22 + import {cleanError} from '#/lib/strings/errors' 23 + import {enforceLen} from '#/lib/strings/helpers' 24 + import {colors, gradients, s} from '#/lib/styles' 25 + import {useTheme} from '#/lib/ThemeContext' 18 26 import {logger} from '#/logger' 27 + import {isWeb} from '#/platform/detection' 19 28 import {useModalControls} from '#/state/modals' 20 29 import {useProfileUpdateMutation} from '#/state/queries/profile' 21 - import {useAnalytics} from 'lib/analytics/analytics' 22 - import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from 'lib/constants' 23 - import {usePalette} from 'lib/hooks/usePalette' 24 - import {compressIfNeeded} from 'lib/media/manip' 25 - import {cleanError} from 'lib/strings/errors' 26 - import {enforceLen} from 'lib/strings/helpers' 27 - import {colors, gradients, s} from 'lib/styles' 28 - import {useTheme} from 'lib/ThemeContext' 29 - import {isWeb} from 'platform/detection' 30 30 import {ErrorMessage} from '../util/error/ErrorMessage' 31 31 import {Text} from '../util/text/Text' 32 32 import * as Toast from '../util/Toast' ··· 261 261 const styles = StyleSheet.create({ 262 262 title: { 263 263 textAlign: 'center', 264 - fontWeight: 'bold', 264 + fontWeight: '600', 265 265 fontSize: 24, 266 266 marginBottom: 18, 267 267 }, 268 268 label: { 269 - fontWeight: 'bold', 269 + fontWeight: '600', 270 270 paddingHorizontal: 4, 271 271 paddingBottom: 4, 272 272 marginTop: 20,
+7 -8
src/view/com/modals/InAppBrowserConsent.tsx
··· 1 1 import React from 'react' 2 2 import {StyleSheet, View} from 'react-native' 3 - 4 - import {s} from 'lib/styles' 5 - import {Text} from '../util/text/Text' 6 - import {Button} from '../util/forms/Button' 7 - import {ScrollView} from './util' 8 - import {usePalette} from 'lib/hooks/usePalette' 9 - 10 3 import {msg, Trans} from '@lingui/macro' 11 4 import {useLingui} from '@lingui/react' 5 + 6 + import {usePalette} from '#/lib/hooks/usePalette' 7 + import {s} from '#/lib/styles' 12 8 import {useModalControls} from '#/state/modals' 13 9 import { 14 10 useOpenLink, 15 11 useSetInAppBrowser, 16 12 } from '#/state/preferences/in-app-browser' 13 + import {Button} from '../util/forms/Button' 14 + import {Text} from '../util/text/Text' 15 + import {ScrollView} from './util' 17 16 18 17 export const snapPoints = [350] 19 18 ··· 89 88 const styles = StyleSheet.create({ 90 89 title: { 91 90 textAlign: 'center', 92 - fontWeight: 'bold', 91 + fontWeight: '600', 93 92 fontSize: 24, 94 93 marginBottom: 12, 95 94 },
+6 -6
src/view/com/modals/UserAddRemoveLists.tsx
··· 9 9 import {msg, Trans} from '@lingui/macro' 10 10 import {useLingui} from '@lingui/react' 11 11 12 + import {usePalette} from '#/lib/hooks/usePalette' 13 + import {sanitizeDisplayName} from '#/lib/strings/display-names' 12 14 import {cleanError} from '#/lib/strings/errors' 15 + import {sanitizeHandle} from '#/lib/strings/handles' 16 + import {s} from '#/lib/styles' 17 + import {isAndroid, isMobileWeb, isWeb} from '#/platform/detection' 13 18 import {useModalControls} from '#/state/modals' 14 19 import { 15 20 getMembership, ··· 19 24 useListMembershipRemoveMutation, 20 25 } from '#/state/queries/list-memberships' 21 26 import {useSession} from '#/state/session' 22 - import {usePalette} from 'lib/hooks/usePalette' 23 - import {sanitizeDisplayName} from 'lib/strings/display-names' 24 - import {sanitizeHandle} from 'lib/strings/handles' 25 - import {s} from 'lib/styles' 26 - import {isAndroid, isMobileWeb, isWeb} from 'platform/detection' 27 27 import {MyLists} from '../lists/MyLists' 28 28 import {Button} from '../util/forms/Button' 29 29 import {Text} from '../util/text/Text' ··· 71 71 style={[ 72 72 { 73 73 textAlign: 'center', 74 - fontWeight: 'bold', 74 + fontWeight: '600', 75 75 fontSize: 20, 76 76 marginBottom: 12, 77 77 paddingHorizontal: 12,
+3 -3
src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx
··· 2 2 import {StyleSheet, View} from 'react-native' 3 3 import {Trans} from '@lingui/macro' 4 4 5 + import {usePalette} from '#/lib/hooks/usePalette' 6 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 5 7 import {deviceLanguageCodes} from '#/locale/deviceLocales' 6 8 import {useModalControls} from '#/state/modals' 7 9 import { 8 10 useLanguagePrefs, 9 11 useLanguagePrefsApi, 10 12 } from '#/state/preferences/languages' 11 - import {usePalette} from 'lib/hooks/usePalette' 12 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 13 13 import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' 14 14 import {Text} from '../../util/text/Text' 15 15 import {ScrollView} from '../util' ··· 111 111 }, 112 112 title: { 113 113 textAlign: 'center', 114 - fontWeight: 'bold', 114 + fontWeight: '600', 115 115 fontSize: 24, 116 116 marginBottom: 12, 117 117 },
+4 -4
src/view/com/modals/lang-settings/PostLanguagesSettings.tsx
··· 2 2 import {StyleSheet, View} from 'react-native' 3 3 import {Trans} from '@lingui/macro' 4 4 5 + import {usePalette} from '#/lib/hooks/usePalette' 6 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 5 7 import {deviceLanguageCodes} from '#/locale/deviceLocales' 6 8 import {useModalControls} from '#/state/modals' 7 9 import { ··· 9 11 useLanguagePrefs, 10 12 useLanguagePrefsApi, 11 13 } from '#/state/preferences/languages' 12 - import {usePalette} from 'lib/hooks/usePalette' 13 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 14 - import {ToggleButton} from 'view/com/util/forms/ToggleButton' 14 + import {ToggleButton} from '#/view/com/util/forms/ToggleButton' 15 15 import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' 16 16 import {Text} from '../../util/text/Text' 17 17 import {ScrollView} from '../util' ··· 119 119 }, 120 120 title: { 121 121 textAlign: 'center', 122 - fontWeight: 'bold', 122 + fontWeight: '600', 123 123 fontSize: 24, 124 124 marginBottom: 12, 125 125 },
+1 -1
src/view/com/notifications/FeedItem.tsx
··· 632 632 alignItems: 'center', 633 633 }, 634 634 aviExtraCount: { 635 - fontWeight: 'bold', 635 + fontWeight: '600', 636 636 paddingLeft: 6, 637 637 }, 638 638 meta: {
+8 -8
src/view/com/profile/ProfileSubpageHeader.tsx
··· 5 5 import {useLingui} from '@lingui/react' 6 6 import {useNavigation} from '@react-navigation/native' 7 7 8 + import {BACK_HITSLOP} from '#/lib/constants' 9 + import {usePalette} from '#/lib/hooks/usePalette' 10 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 11 + import {makeProfileLink} from '#/lib/routes/links' 12 + import {NavigationProp} from '#/lib/routes/types' 13 + import {sanitizeHandle} from '#/lib/strings/handles' 14 + import {isNative} from '#/platform/detection' 8 15 import {emitSoftReset} from '#/state/events' 9 16 import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' 10 17 import {useSetDrawerOpen} from '#/state/shell' 11 - import {BACK_HITSLOP} from 'lib/constants' 12 - import {usePalette} from 'lib/hooks/usePalette' 13 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 14 - import {makeProfileLink} from 'lib/routes/links' 15 - import {NavigationProp} from 'lib/routes/types' 16 - import {sanitizeHandle} from 'lib/strings/handles' 17 - import {isNative} from 'platform/detection' 18 18 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' 19 19 import {StarterPack} from '#/components/icons/StarterPack' 20 20 import {TextLink} from '../util/Link' ··· 145 145 testID="headerTitle" 146 146 type="title-xl" 147 147 href={href} 148 - style={[pal.text, {fontWeight: 'bold'}]} 148 + style={[pal.text, {fontWeight: '600'}]} 149 149 text={title || ''} 150 150 onPress={emitSoftReset} 151 151 numberOfLines={4}
+7 -6
src/view/com/util/Html.tsx
··· 1 1 import * as React from 'react' 2 2 import {StyleSheet, View} from 'react-native' 3 - import {usePalette} from 'lib/hooks/usePalette' 4 - import {useTheme} from 'lib/ThemeContext' 5 - import {Text} from './text/Text' 6 - import {TextLink} from './Link' 7 3 import { 8 4 H1 as ExpoH1, 9 5 H2 as ExpoH2, 10 6 H3 as ExpoH3, 11 7 H4 as ExpoH4, 12 8 } from '@expo/html-elements' 13 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 9 + 10 + import {usePalette} from '#/lib/hooks/usePalette' 11 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 12 + import {useTheme} from '#/lib/ThemeContext' 13 + import {TextLink} from './Link' 14 + import {Text} from './text/Text' 14 15 15 16 /** 16 17 * These utilities are used to define long documents in an html-like ··· 166 167 h4: { 167 168 marginTop: 0, 168 169 marginBottom: 10, 169 - fontWeight: 'bold', 170 + fontWeight: '600', 170 171 }, 171 172 p: { 172 173 marginBottom: 10,
+6 -6
src/view/com/util/ViewHeader.tsx
··· 6 6 import {useLingui} from '@lingui/react' 7 7 import {useNavigation} from '@react-navigation/native' 8 8 9 + import {useAnalytics} from '#/lib/analytics/analytics' 10 + import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform' 11 + import {usePalette} from '#/lib/hooks/usePalette' 12 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 13 + import {NavigationProp} from '#/lib/routes/types' 9 14 import {useSetDrawerOpen} from '#/state/shell' 10 - import {useAnalytics} from 'lib/analytics/analytics' 11 - import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform' 12 - import {usePalette} from 'lib/hooks/usePalette' 13 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 14 - import {NavigationProp} from 'lib/routes/types' 15 15 import {useTheme} from '#/alf' 16 16 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' 17 17 import {Text} from './text/Text' ··· 250 250 alignItems: 'center', 251 251 }, 252 252 title: { 253 - fontWeight: 'bold', 253 + fontWeight: '600', 254 254 }, 255 255 subtitle: { 256 256 fontSize: 13,
+15 -14
src/view/com/util/forms/Button.tsx
··· 1 1 import React from 'react' 2 2 import { 3 + ActivityIndicator, 3 4 GestureResponderEvent, 5 + NativeSyntheticEvent, 6 + NativeTouchEvent, 7 + Pressable, 8 + PressableStateCallbackType, 4 9 StyleProp, 5 10 StyleSheet, 6 11 TextStyle, 7 - Pressable, 12 + View, 8 13 ViewStyle, 9 - PressableStateCallbackType, 10 - ActivityIndicator, 11 - View, 12 - NativeSyntheticEvent, 13 - NativeTouchEvent, 14 14 } from 'react-native' 15 + 16 + import {choose} from '#/lib/functions' 17 + import {useTheme} from '#/lib/ThemeContext' 15 18 import {Text} from '../text/Text' 16 - import {useTheme} from 'lib/ThemeContext' 17 - import {choose} from 'lib/functions' 18 19 19 20 export type ButtonType = 20 21 | 'primary' ··· 112 113 }, 113 114 secondary: { 114 115 color: theme.palette.secondary.text, 115 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 116 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 116 117 }, 117 118 default: { 118 119 color: theme.palette.default.text, ··· 123 124 }, 124 125 'primary-outline': { 125 126 color: theme.palette.primary.textInverted, 126 - fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined, 127 + fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 127 128 }, 128 129 'secondary-outline': { 129 130 color: theme.palette.secondary.textInverted, 130 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 131 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 131 132 }, 132 133 'primary-light': { 133 134 color: theme.palette.primary.textInverted, 134 - fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined, 135 + fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 135 136 }, 136 137 'secondary-light': { 137 138 color: theme.palette.secondary.textInverted, 138 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 139 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 139 140 }, 140 141 'default-light': { 141 142 color: theme.palette.default.text, 142 - fontWeight: theme.palette.default.isLowContrast ? '500' : undefined, 143 + fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, 143 144 }, 144 145 }, 145 146 )
+6 -6
src/view/com/util/forms/DropdownButton.tsx
··· 17 17 import {msg} from '@lingui/macro' 18 18 import {useLingui} from '@lingui/react' 19 19 20 - import {HITSLOP_10} from 'lib/constants' 21 - import {usePalette} from 'lib/hooks/usePalette' 22 - import {colors} from 'lib/styles' 23 - import {useTheme} from 'lib/ThemeContext' 24 - import {isWeb} from 'platform/detection' 20 + import {HITSLOP_10} from '#/lib/constants' 21 + import {usePalette} from '#/lib/hooks/usePalette' 22 + import {colors} from '#/lib/styles' 23 + import {useTheme} from '#/lib/ThemeContext' 24 + import {isWeb} from '#/platform/detection' 25 25 import {native} from '#/alf' 26 26 import {FullWindowOverlay} from '#/components/FullWindowOverlay' 27 27 import {Text} from '../text/Text' ··· 382 382 }, 383 383 headingLabel: { 384 384 fontSize: 18, 385 - fontWeight: '500', 385 + fontWeight: '600', 386 386 }, 387 387 })
+4 -4
src/view/com/util/forms/NativeDropdown.web.tsx
··· 5 5 import * as DropdownMenu from '@radix-ui/react-dropdown-menu' 6 6 import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' 7 7 8 - import {HITSLOP_10} from 'lib/constants' 9 - import {usePalette} from 'lib/hooks/usePalette' 10 - import {useTheme} from 'lib/ThemeContext' 8 + import {HITSLOP_10} from '#/lib/constants' 9 + import {usePalette} from '#/lib/hooks/usePalette' 10 + import {useTheme} from '#/lib/ThemeContext' 11 11 12 12 // Custom Dropdown Menu Components 13 13 // == ··· 267 267 }, 268 268 itemTitle: { 269 269 fontSize: 16, 270 - fontWeight: '500', 270 + fontWeight: '600', 271 271 paddingRight: 10, 272 272 }, 273 273 })
+11 -11
src/view/com/util/forms/RadioButton.tsx
··· 1 1 import React from 'react' 2 2 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' 3 3 4 - import {choose} from 'lib/functions' 5 - import {useTheme} from 'lib/ThemeContext' 4 + import {choose} from '#/lib/functions' 5 + import {useTheme} from '#/lib/ThemeContext' 6 6 import {Text} from '../text/Text' 7 7 import {Button, ButtonType} from './Button' 8 8 ··· 86 86 const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, { 87 87 primary: { 88 88 color: theme.palette.primary.text, 89 - fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined, 89 + fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 90 90 }, 91 91 secondary: { 92 92 color: theme.palette.secondary.text, 93 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 93 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 94 94 }, 95 95 inverted: { 96 96 color: theme.palette.inverted.text, 97 - fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined, 97 + fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined, 98 98 }, 99 99 'primary-outline': { 100 100 color: theme.palette.primary.textInverted, 101 - fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined, 101 + fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 102 102 }, 103 103 'secondary-outline': { 104 104 color: theme.palette.secondary.textInverted, 105 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 105 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 106 106 }, 107 107 'primary-light': { 108 108 color: theme.palette.primary.textInverted, 109 - fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined, 109 + fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 110 110 }, 111 111 'secondary-light': { 112 112 color: theme.palette.secondary.textInverted, 113 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 113 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 114 114 }, 115 115 default: { 116 116 color: theme.palette.default.text, 117 - fontWeight: theme.palette.default.isLowContrast ? '500' : undefined, 117 + fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, 118 118 }, 119 119 'default-light': { 120 120 color: theme.palette.default.text, 121 - fontWeight: theme.palette.default.isLowContrast ? '500' : undefined, 121 + fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, 122 122 }, 123 123 }) 124 124 return (
+14 -13
src/view/com/util/forms/ToggleButton.tsx
··· 1 1 import React from 'react' 2 2 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' 3 + 4 + import {choose} from '#/lib/functions' 5 + import {colors} from '#/lib/styles' 6 + import {useTheme} from '#/lib/ThemeContext' 7 + import {TypographyVariant} from '#/lib/ThemeContext' 3 8 import {Text} from '../text/Text' 4 9 import {Button, ButtonType} from './Button' 5 - import {useTheme} from 'lib/ThemeContext' 6 - import {choose} from 'lib/functions' 7 - import {colors} from 'lib/styles' 8 - import {TypographyVariant} from 'lib/ThemeContext' 9 10 10 11 export function ToggleButton({ 11 12 testID, ··· 100 101 const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, { 101 102 primary: { 102 103 color: theme.palette.primary.text, 103 - fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined, 104 + fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 104 105 }, 105 106 secondary: { 106 107 color: theme.palette.secondary.text, 107 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 108 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 108 109 }, 109 110 inverted: { 110 111 color: theme.palette.inverted.text, 111 - fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined, 112 + fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined, 112 113 }, 113 114 'primary-outline': { 114 115 color: theme.palette.primary.textInverted, 115 - fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined, 116 + fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 116 117 }, 117 118 'secondary-outline': { 118 119 color: theme.palette.secondary.textInverted, 119 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 120 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 120 121 }, 121 122 'primary-light': { 122 123 color: theme.palette.primary.textInverted, 123 - fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined, 124 + fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 124 125 }, 125 126 'secondary-light': { 126 127 color: theme.palette.secondary.textInverted, 127 - fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined, 128 + fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 128 129 }, 129 130 default: { 130 131 color: theme.palette.default.text, 131 - fontWeight: theme.palette.default.isLowContrast ? '500' : undefined, 132 + fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, 132 133 }, 133 134 'default-light': { 134 135 color: theme.palette.default.text, 135 - fontWeight: theme.palette.default.isLowContrast ? '500' : undefined, 136 + fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, 136 137 }, 137 138 }) 138 139 return (
+3 -3
src/view/com/util/post-embeds/GifEmbed.tsx
··· 13 13 14 14 import {HITSLOP_20} from '#/lib/constants' 15 15 import {parseAltFromGIFDescription} from '#/lib/gif-alt-text' 16 + import {EmbedPlayerParams} from '#/lib/strings/embed-player' 16 17 import {isWeb} from '#/platform/detection' 18 + import {useAutoplayDisabled} from '#/state/preferences' 17 19 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' 18 - import {EmbedPlayerParams} from 'lib/strings/embed-player' 19 - import {useAutoplayDisabled} from 'state/preferences' 20 20 import {atoms as a, useTheme} from '#/alf' 21 21 import {Fill} from '#/components/Fill' 22 22 import {Loader} from '#/components/Loader' ··· 210 210 alt: { 211 211 color: 'white', 212 212 fontSize: isWeb ? 10 : 7, 213 - fontWeight: 'bold', 213 + fontWeight: '600', 214 214 }, 215 215 })
+3 -3
src/view/com/util/post-embeds/index.tsx
··· 20 20 ModerationDecision, 21 21 } from '@atproto/api' 22 22 23 + import {usePalette} from '#/lib/hooks/usePalette' 23 24 import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' 24 25 import {useModerationOpts} from '#/state/preferences/moderation-opts' 25 - import {usePalette} from 'lib/hooks/usePalette' 26 - import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' 26 + import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard' 27 27 import {atoms as a, useTheme} from '#/alf' 28 28 import * as ListCard from '#/components/ListCard' 29 29 import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard' ··· 259 259 alt: { 260 260 color: 'white', 261 261 fontSize: 7, 262 - fontWeight: 'bold', 262 + fontWeight: '600', 263 263 }, 264 264 customFeedOuter: { 265 265 borderWidth: StyleSheet.hairlineWidth,
+1 -1
src/view/screens/AccessibilitySettings.tsx
··· 69 69 }, 70 70 ]}> 71 71 <View style={a.flex_1}> 72 - <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}> 72 + <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}> 73 73 <Trans>Accessibility Settings</Trans> 74 74 </Text> 75 75 </View>
+15 -15
src/view/screens/LanguageSettings.tsx
··· 9 9 import {useLingui} from '@lingui/react' 10 10 import {useFocusEffect} from '@react-navigation/native' 11 11 12 + import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages' 13 + import {useAnalytics} from '#/lib/analytics/analytics' 14 + import {usePalette} from '#/lib/hooks/usePalette' 15 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 16 + import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' 17 + import {s} from '#/lib/styles' 12 18 import {sanitizeAppLanguageSetting} from '#/locale/helpers' 13 19 import {useModalControls} from '#/state/modals' 14 20 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' 15 21 import {useSetMinimalShellMode} from '#/state/shell' 16 - import {APP_LANGUAGES, LANGUAGES} from 'lib/../locale/languages' 17 - import {useAnalytics} from 'lib/analytics/analytics' 18 - import {usePalette} from 'lib/hooks/usePalette' 19 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 20 - import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' 21 - import {s} from 'lib/styles' 22 - import {Button} from 'view/com/util/forms/Button' 23 - import {ViewHeader} from 'view/com/util/ViewHeader' 24 - import {CenteredView} from 'view/com/util/Views' 22 + import {Button} from '#/view/com/util/forms/Button' 23 + import {ViewHeader} from '#/view/com/util/ViewHeader' 24 + import {CenteredView} from '#/view/com/util/Views' 25 25 import {Text} from '../com/util/text/Text' 26 26 27 27 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'> ··· 118 118 color: pal.text.color, 119 119 fontSize: 14, 120 120 letterSpacing: 0.5, 121 - fontWeight: '500', 121 + fontWeight: '600', 122 122 paddingHorizontal: 14, 123 123 paddingVertical: 8, 124 124 borderRadius: 24, ··· 128 128 color: pal.text.color, 129 129 fontSize: 14, 130 130 letterSpacing: 0.5, 131 - fontWeight: '500', 131 + fontWeight: '600', 132 132 paddingHorizontal: 14, 133 133 paddingVertical: 8, 134 134 borderRadius: 24, ··· 147 147 fontSize: 14, 148 148 fontFamily: 'inherit', 149 149 letterSpacing: 0.5, 150 - fontWeight: '500', 150 + fontWeight: '600', 151 151 paddingHorizontal: 14, 152 152 paddingVertical: 8, 153 153 borderRadius: 24, ··· 211 211 color: pal.text.color, 212 212 fontSize: 14, 213 213 letterSpacing: 0.5, 214 - fontWeight: '500', 214 + fontWeight: '600', 215 215 paddingHorizontal: 14, 216 216 paddingVertical: 8, 217 217 borderRadius: 24, ··· 221 221 color: pal.text.color, 222 222 fontSize: 14, 223 223 letterSpacing: 0.5, 224 - fontWeight: '500', 224 + fontWeight: '600', 225 225 paddingHorizontal: 14, 226 226 paddingVertical: 8, 227 227 borderRadius: 24, ··· 239 239 fontSize: 14, 240 240 fontFamily: 'inherit', 241 241 letterSpacing: 0.5, 242 - fontWeight: '500', 242 + fontWeight: '600', 243 243 paddingHorizontal: 14, 244 244 paddingVertical: 8, 245 245 borderRadius: 24,
+9 -9
src/view/screens/Lists.tsx
··· 5 5 import {Trans} from '@lingui/macro' 6 6 import {useFocusEffect, useNavigation} from '@react-navigation/native' 7 7 8 + import {usePalette} from '#/lib/hooks/usePalette' 9 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 10 + import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' 11 + import {NavigationProp} from '#/lib/routes/types' 12 + import {s} from '#/lib/styles' 8 13 import {useModalControls} from '#/state/modals' 9 14 import {useSetMinimalShellMode} from '#/state/shell' 10 - import {usePalette} from 'lib/hooks/usePalette' 11 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 12 - import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' 13 - import {NavigationProp} from 'lib/routes/types' 14 - import {s} from 'lib/styles' 15 15 import {MyLists} from '#/view/com/lists/MyLists' 16 - import {Button} from 'view/com/util/forms/Button' 17 - import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' 18 - import {Text} from 'view/com/util/text/Text' 16 + import {Button} from '#/view/com/util/forms/Button' 17 + import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' 18 + import {Text} from '#/view/com/util/text/Text' 19 19 20 20 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'> 21 21 export function ListsScreen({}: Props) { ··· 61 61 }, 62 62 ]}> 63 63 <View style={{flex: 1}}> 64 - <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}> 64 + <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}> 65 65 <Trans>User Lists</Trans> 66 66 </Text> 67 67 <Text style={pal.textLight}>
+15 -14
src/view/screens/ModerationModlists.tsx
··· 1 1 import React from 'react' 2 2 import {View} from 'react-native' 3 + import {AtUri} from '@atproto/api' 4 + import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 5 + import {Trans} from '@lingui/macro' 3 6 import {useFocusEffect, useNavigation} from '@react-navigation/native' 4 - import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 5 - import {AtUri} from '@atproto/api' 6 - import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' 7 + 8 + import {usePalette} from '#/lib/hooks/usePalette' 9 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 10 + import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' 11 + import {NavigationProp} from '#/lib/routes/types' 12 + import {s} from '#/lib/styles' 13 + import {useModalControls} from '#/state/modals' 14 + import {useSetMinimalShellMode} from '#/state/shell' 7 15 import {MyLists} from '#/view/com/lists/MyLists' 8 - import {Text} from 'view/com/util/text/Text' 9 - import {Button} from 'view/com/util/forms/Button' 10 - import {NavigationProp} from 'lib/routes/types' 11 - import {usePalette} from 'lib/hooks/usePalette' 12 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 13 - import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' 14 - import {s} from 'lib/styles' 15 - import {useSetMinimalShellMode} from '#/state/shell' 16 - import {useModalControls} from '#/state/modals' 17 - import {Trans} from '@lingui/macro' 16 + import {Button} from '#/view/com/util/forms/Button' 17 + import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' 18 + import {Text} from '#/view/com/util/text/Text' 18 19 19 20 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ModerationModlists'> 20 21 export function ModerationModlistsScreen({}: Props) { ··· 54 55 !isMobile && [pal.border, {borderLeftWidth: 1, borderRightWidth: 1}] 55 56 }> 56 57 <View style={{flex: 1}}> 57 - <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}> 58 + <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}> 58 59 <Trans>Moderation Lists</Trans> 59 60 </Text> 60 61 <Text style={pal.textLight}>
+9 -9
src/view/screens/PreferencesExternalEmbeds.tsx
··· 3 3 import {Trans} from '@lingui/macro' 4 4 import {useFocusEffect} from '@react-navigation/native' 5 5 6 + import {useAnalytics} from '#/lib/analytics/analytics' 7 + import {usePalette} from '#/lib/hooks/usePalette' 8 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 9 + import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' 6 10 import { 7 11 EmbedPlayerSource, 8 12 externalEmbedLabels, 9 13 } from '#/lib/strings/embed-player' 10 - import {useSetMinimalShellMode} from '#/state/shell' 11 - import {useAnalytics} from 'lib/analytics/analytics' 12 - import {usePalette} from 'lib/hooks/usePalette' 13 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 14 - import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' 15 - import {s} from 'lib/styles' 14 + import {s} from '#/lib/styles' 16 15 import { 17 16 useExternalEmbedsPrefs, 18 17 useSetExternalEmbedPref, 19 - } from 'state/preferences' 20 - import {ToggleButton} from 'view/com/util/forms/ToggleButton' 18 + } from '#/state/preferences' 19 + import {useSetMinimalShellMode} from '#/state/shell' 20 + import {ToggleButton} from '#/view/com/util/forms/ToggleButton' 21 21 import {atoms as a} from '#/alf' 22 22 import {SimpleViewHeader} from '../com/util/SimpleViewHeader' 23 23 import {Text} from '../com/util/text/Text' ··· 50 50 showBackButton={isTabletOrMobile} 51 51 style={[pal.border, a.border_b]}> 52 52 <View style={a.flex_1}> 53 - <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}> 53 + <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}> 54 54 <Trans>External Media Preferences</Trans> 55 55 </Text> 56 56 <Text style={pal.textLight}>
+1 -1
src/view/screens/PreferencesFollowingFeed.tsx
··· 44 44 showBackButton={isTabletOrMobile} 45 45 style={[pal.border, a.border_b]}> 46 46 <View style={a.flex_1}> 47 - <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}> 47 + <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}> 48 48 <Trans>Following Feed Preferences</Trans> 49 49 </Text> 50 50 <Text style={pal.textLight}>
+1 -1
src/view/screens/PreferencesThreads.tsx
··· 47 47 showBackButton={isTabletOrMobile} 48 48 style={[pal.border, a.border_b]}> 49 49 <View style={a.flex_1}> 50 - <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}> 50 + <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}> 51 51 <Trans>Thread Preferences</Trans> 52 52 </Text> 53 53 <Text style={pal.textLight}>
+9 -9
src/view/screens/Search/Search.tsx
··· 24 24 import {useAnalytics} from '#/lib/analytics/analytics' 25 25 import {createHitslop} from '#/lib/constants' 26 26 import {HITSLOP_10} from '#/lib/constants' 27 + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' 27 28 import {usePalette} from '#/lib/hooks/usePalette' 29 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 28 30 import {MagnifyingGlassIcon} from '#/lib/icons' 29 31 import {makeProfileLink} from '#/lib/routes/links' 30 32 import {NavigationProp} from '#/lib/routes/types' 33 + import { 34 + NativeStackScreenProps, 35 + SearchTabNavigatorParams, 36 + } from '#/lib/routes/types' 31 37 import {augmentSearchQuery} from '#/lib/strings/helpers' 38 + import {useTheme} from '#/lib/ThemeContext' 32 39 import {logger} from '#/logger' 33 40 import {isNative, isWeb} from '#/platform/detection' 34 41 import {listenSoftReset} from '#/state/events' ··· 40 47 import {useSession} from '#/state/session' 41 48 import {useSetDrawerOpen} from '#/state/shell' 42 49 import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' 43 - import {useNonReactiveCallback} from 'lib/hooks/useNonReactiveCallback' 44 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 45 - import { 46 - NativeStackScreenProps, 47 - SearchTabNavigatorParams, 48 - } from 'lib/routes/types' 49 - import {useTheme} from 'lib/ThemeContext' 50 50 import {Pager} from '#/view/com/pager/Pager' 51 51 import {TabBar} from '#/view/com/pager/TabBar' 52 52 import {Post} from '#/view/com/post/Post' ··· 414 414 display: 'flex', 415 415 paddingVertical: 12, 416 416 paddingHorizontal: 18, 417 - fontWeight: 'bold', 417 + fontWeight: '600', 418 418 borderBottomWidth: 1, 419 419 }, 420 420 ]}> ··· 1134 1134 borderRadius: 8, 1135 1135 }, 1136 1136 searchHistoryTitle: { 1137 - fontWeight: 'bold', 1137 + fontWeight: '600', 1138 1138 paddingVertical: 12, 1139 1139 paddingHorizontal: 10, 1140 1140 },
+21 -21
src/view/screens/Settings/index.tsx
··· 18 18 import {useFocusEffect, useNavigation} from '@react-navigation/native' 19 19 import {useQueryClient} from '@tanstack/react-query' 20 20 21 + import {useAnalytics} from '#/lib/analytics/analytics' 22 + import {appVersion, BUNDLE_DATE, bundleInfo} from '#/lib/app-info' 23 + import {STATUS_PAGE_URL} from '#/lib/constants' 24 + import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher' 25 + import {useCustomPalette} from '#/lib/hooks/useCustomPalette' 26 + import {usePalette} from '#/lib/hooks/usePalette' 27 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 28 + import {HandIcon, HashtagIcon} from '#/lib/icons' 29 + import {makeProfileLink} from '#/lib/routes/links' 30 + import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' 31 + import {NavigationProp} from '#/lib/routes/types' 32 + import {colors, s} from '#/lib/styles' 21 33 import {isNative} from '#/platform/detection' 22 34 import {useModalControls} from '#/state/modals' 23 35 import {clearStorage} from '#/state/persisted' ··· 33 45 import {useOnboardingDispatch, useSetMinimalShellMode} from '#/state/shell' 34 46 import {useLoggedOutViewControls} from '#/state/shell/logged-out' 35 47 import {useCloseAllActiveElements} from '#/state/util' 36 - import {useAnalytics} from 'lib/analytics/analytics' 37 - import {appVersion, BUNDLE_DATE, bundleInfo} from 'lib/app-info' 38 - import {STATUS_PAGE_URL} from 'lib/constants' 39 - import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' 40 - import {useCustomPalette} from 'lib/hooks/useCustomPalette' 41 - import {usePalette} from 'lib/hooks/usePalette' 42 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 43 - import {HandIcon, HashtagIcon} from 'lib/icons' 44 - import {makeProfileLink} from 'lib/routes/links' 45 - import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' 46 - import {NavigationProp} from 'lib/routes/types' 47 - import {colors, s} from 'lib/styles' 48 - import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' 49 - import {ToggleButton} from 'view/com/util/forms/ToggleButton' 50 - import {Link, TextLink} from 'view/com/util/Link' 51 - import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' 52 - import {Text} from 'view/com/util/text/Text' 53 - import * as Toast from 'view/com/util/Toast' 54 - import {UserAvatar} from 'view/com/util/UserAvatar' 55 - import {ScrollView} from 'view/com/util/Views' 48 + import {AccountDropdownBtn} from '#/view/com/util/AccountDropdownBtn' 49 + import {ToggleButton} from '#/view/com/util/forms/ToggleButton' 50 + import {Link, TextLink} from '#/view/com/util/Link' 51 + import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' 52 + import {Text} from '#/view/com/util/text/Text' 53 + import * as Toast from '#/view/com/util/Toast' 54 + import {UserAvatar} from '#/view/com/util/UserAvatar' 55 + import {ScrollView} from '#/view/com/util/Views' 56 56 import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog' 57 57 import {atoms as a, useTheme} from '#/alf' 58 58 import {useDialogControl} from '#/components/Dialog' ··· 298 298 !isMobile && {borderLeftWidth: 1, borderRightWidth: 1}, 299 299 ]}> 300 300 <View style={{flex: 1}}> 301 - <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}> 301 + <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}> 302 302 <Trans>Settings</Trans> 303 303 </Text> 304 304 </View>
+13 -13
src/view/shell/Drawer.tsx
··· 14 14 import {useLingui} from '@lingui/react' 15 15 import {StackActions, useNavigation} from '@react-navigation/native' 16 16 17 + import {useAnalytics} from '#/lib/analytics/analytics' 18 + import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants' 19 + import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState' 20 + import {usePalette} from '#/lib/hooks/usePalette' 21 + import {getTabState, TabState} from '#/lib/routes/helpers' 22 + import {NavigationProp} from '#/lib/routes/types' 23 + import {colors, s} from '#/lib/styles' 24 + import {useTheme} from '#/lib/ThemeContext' 25 + import {isWeb} from '#/platform/detection' 17 26 import {emitSoftReset} from '#/state/events' 18 27 import {useKawaiiMode} from '#/state/preferences/kawaii' 19 28 import {useUnreadNotifications} from '#/state/queries/notifications/unread' 20 29 import {useProfileQuery} from '#/state/queries/profile' 21 30 import {SessionAccount, useSession} from '#/state/session' 22 31 import {useSetDrawerOpen} from '#/state/shell' 23 - import {useAnalytics} from 'lib/analytics/analytics' 24 - import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' 25 - import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' 26 - import {usePalette} from 'lib/hooks/usePalette' 27 - import {getTabState, TabState} from 'lib/routes/helpers' 28 - import {NavigationProp} from 'lib/routes/types' 29 - import {colors, s} from 'lib/styles' 30 - import {useTheme} from 'lib/ThemeContext' 31 - import {isWeb} from 'platform/detection' 32 + import {formatCount} from '#/view/com/util/numeric/format' 33 + import {Text} from '#/view/com/util/text/Text' 34 + import {UserAvatar} from '#/view/com/util/UserAvatar' 32 35 import {NavSignupCard} from '#/view/shell/NavSignupCard' 33 - import {formatCount} from 'view/com/util/numeric/format' 34 - import {Text} from 'view/com/util/text/Text' 35 - import {UserAvatar} from 'view/com/util/UserAvatar' 36 36 import {atoms as a} from '#/alf' 37 37 import {useTheme as useAlfTheme} from '#/alf' 38 38 import {Button, ButtonIcon, ButtonText} from '#/components/Button' ··· 674 674 }, 675 675 menuItemCountLabel: { 676 676 fontSize: 12, 677 - fontWeight: 'bold', 677 + fontWeight: '600', 678 678 fontVariant: ['tabular-nums'], 679 679 color: colors.white, 680 680 },
+2 -2
src/view/shell/bottom-bar/BottomBarStyles.tsx
··· 1 1 import {StyleSheet} from 'react-native' 2 2 3 - import {colors} from 'lib/styles' 3 + import {colors} from '#/lib/styles' 4 4 5 5 export const styles = StyleSheet.create({ 6 6 bottomBar: { ··· 40 40 }, 41 41 notificationCountLabel: { 42 42 fontSize: 12, 43 - fontWeight: 'bold', 43 + fontWeight: '600', 44 44 color: colors.white, 45 45 fontVariant: ['tabular-nums'], 46 46 },
+5 -5
src/view/shell/desktop/Feeds.tsx
··· 4 4 import {useLingui} from '@lingui/react' 5 5 import {useNavigation, useNavigationState} from '@react-navigation/native' 6 6 7 + import {usePalette} from '#/lib/hooks/usePalette' 8 + import {getCurrentRoute} from '#/lib/routes/helpers' 9 + import {NavigationProp} from '#/lib/routes/types' 7 10 import {emitSoftReset} from '#/state/events' 8 11 import {usePinnedFeedsInfos} from '#/state/queries/feed' 9 12 import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' 10 - import {usePalette} from 'lib/hooks/usePalette' 11 - import {getCurrentRoute} from 'lib/routes/helpers' 12 - import {NavigationProp} from 'lib/routes/types' 13 - import {TextLink} from 'view/com/util/Link' 13 + import {TextLink} from '#/view/com/util/Link' 14 14 15 15 export function DesktopFeeds() { 16 16 const pal = usePalette('default') ··· 81 81 onPress={onPress} 82 82 style={[ 83 83 current ? pal.text : pal.textLight, 84 - {letterSpacing: 0.15, fontWeight: current ? '500' : 'normal'}, 84 + {letterSpacing: 0.15, fontWeight: current ? '600' : '400'}, 85 85 ]} 86 86 /> 87 87 </View>
+12 -12
src/view/shell/desktop/LeftNav.tsx
··· 12 12 useNavigationState, 13 13 } from '@react-navigation/native' 14 14 15 + import {usePalette} from '#/lib/hooks/usePalette' 16 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 17 + import {getCurrentRoute, isStateAtTabRoot, isTab} from '#/lib/routes/helpers' 18 + import {makeProfileLink} from '#/lib/routes/links' 19 + import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' 15 20 import {isInvalidHandle} from '#/lib/strings/handles' 21 + import {colors, s} from '#/lib/styles' 16 22 import {emitSoftReset} from '#/state/events' 17 23 import {useFetchHandle} from '#/state/queries/handle' 18 24 import {useUnreadMessageCount} from '#/state/queries/messages/list-converations' ··· 20 26 import {useProfileQuery} from '#/state/queries/profile' 21 27 import {useSession} from '#/state/session' 22 28 import {useComposerControls} from '#/state/shell/composer' 23 - import {usePalette} from 'lib/hooks/usePalette' 24 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 25 - import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers' 26 - import {makeProfileLink} from 'lib/routes/links' 27 - import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' 28 - import {colors, s} from 'lib/styles' 29 + import {Link} from '#/view/com/util/Link' 30 + import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 31 + import {PressableWithHover} from '#/view/com/util/PressableWithHover' 32 + import {Text} from '#/view/com/util/text/Text' 33 + import {UserAvatar} from '#/view/com/util/UserAvatar' 29 34 import {NavSignupCard} from '#/view/shell/NavSignupCard' 30 - import {Link} from 'view/com/util/Link' 31 - import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' 32 - import {PressableWithHover} from 'view/com/util/PressableWithHover' 33 - import {Text} from 'view/com/util/text/Text' 34 - import {UserAvatar} from 'view/com/util/UserAvatar' 35 35 import { 36 36 Bell_Filled_Corner0_Rounded as BellFilled, 37 37 Bell_Stroke2_Corner0_Rounded as Bell, ··· 468 468 backgroundColor: colors.blue3, 469 469 color: colors.white, 470 470 fontSize: 12, 471 - fontWeight: 'bold', 471 + fontWeight: '600', 472 472 paddingHorizontal: 4, 473 473 borderRadius: 6, 474 474 },
+12
web/index.html
··· 20 20 21 21 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf"> 22 22 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf"> 23 + <!-- 23 24 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf"> 24 25 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf"> 26 + --> 25 27 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf"> 26 28 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf"> 29 + <!-- 27 30 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf"> 28 31 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf"> 32 + --> 29 33 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf"> 30 34 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf"> 35 + <!-- 31 36 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf"> 32 37 <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf"> 38 + --> 33 39 34 40 <style> 35 41 @font-face { ··· 46 52 font-style: italic; 47 53 font-display: swap; 48 54 } 55 + /* 49 56 @font-face { 50 57 font-family: "Inter-Medium"; 51 58 src: local("Inter-Medium"), url(/static/media/Inter-Medium.296aa2d65964269836b3.otf) format("font/otf"); ··· 60 67 font-style: italic; 61 68 font-display: swap; 62 69 } 70 + */ 63 71 @font-face { 64 72 font-family: "Inter-SemiBold"; 65 73 src: local("Inter-SemiBold"), url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf) format("font/otf"); ··· 74 82 font-style: italic; 75 83 font-display: swap; 76 84 } 85 + /* 77 86 @font-face { 78 87 font-family: "Inter-Bold"; 79 88 src: local("Inter-Bold"), url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf) format("font/otf"); ··· 88 97 font-style: italic; 89 98 font-display: swap; 90 99 } 100 + */ 91 101 @font-face { 92 102 font-family: "Inter-ExtraBold"; 93 103 src: local("Inter-ExtraBold"), url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf) format("font/otf"); ··· 102 112 font-style: italic; 103 113 font-display: swap; 104 114 } 115 + /* 105 116 @font-face { 106 117 font-family: "Inter-Black"; 107 118 src: local("Inter-Black"), url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf) format("font/otf"); ··· 116 127 font-style: italic; 117 128 font-display: swap; 118 129 } 130 + */ 119 131 120 132 /** 121 133 * Extend the react-native-web reset: