Lighten blue (link) text for dim and dark themes (#11164)

oxlint-suppressions.json

@@ -1617,14 +1617,6 @@
       "count": 1
     }
   },
-  "src/view/com/composer/text-input/TextInput.tsx": {
-    "typescript/no-floating-promises": {
-      "count": 1
-    },
-    "typescript/no-misused-promises": {
-      "count": 1
-    }
-  },
   "src/view/com/composer/text-input/TextInput.web.tsx": {
     "typescript/no-misused-promises": {
       "count": 1

package.json

@@ -101,7 +101,7 @@
     "@atproto/syntax": "0.7.2",
     "@bitdrift/react-native": "^0.6.8",
     "@braintree/sanitize-url": "^6.0.2",
-    "@bsky.app/alf": "^0.1.14",
+    "@bsky.app/alf": "^0.1.15",
     "@bsky.app/expo-dynamic-app-icon": "^1.8.5",
     "@bsky.app/expo-guess-language": "^0.2.8",
     "@bsky.app/expo-image-crop-tool": "^0.5.1",

pnpm-lock.yaml

@@ -257,8 +257,8 @@ importers:
         specifier: ^6.0.2
         version: 6.0.4
       '@bsky.app/alf':
-        specifier: ^0.1.14
-        version: 0.1.14(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ^0.1.15
+        version: 0.1.15(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       '@bsky.app/expo-dynamic-app-icon':
         specifier: ^1.8.5
         version: 1.8.5(expo@54.0.34(@babel/core@7.29.0)(react-native-webview@13.15.0(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
@@ -1606,8 +1606,8 @@ packages:
   '@braintree/sanitize-url@6.0.4':
     resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==}
 
-  '@bsky.app/alf@0.1.14':
-    resolution: {integrity: sha512-c/KK6avyjEnYzhXDsN0rQaTFSbi8BPg4sJCW8aUk8AtKsO34GTaY6FU1adQ2i8xVfe5UIRu9FJjnBoGpuXj21A==}
+  '@bsky.app/alf@0.1.15':
+    resolution: {integrity: sha512-e6blt+oZ2klv+Cp7u11FeZckoILdXOtUZ11ATERgjZgb4zX3y7rt4e2fI03JkJO31wTvXHG8A1LnM96Az+ndJg==}
     peerDependencies:
       react: '*'
       react-native: '*'
@@ -10072,7 +10072,7 @@ snapshots:
 
   '@braintree/sanitize-url@6.0.4': {}
 
-  '@bsky.app/alf@0.1.14(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@bsky.app/alf@0.1.15(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
     dependencies:
       react: 19.1.0
       react-native: 0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0)

src/components/Composer/index.tsx

@@ -286,7 +286,7 @@ export function Composer({
                 ref={IS_WEB ? sift.refs.setAnchor : undefined}
                 style={
                   node.type === 'facet' && {
-                    color: t.palette.primary_500,
+                    color: t.atoms.text_link.color,
                   }
                 }>
                 {node.raw}

src/components/FeedInterstitials.tsx

@@ -481,11 +481,11 @@ export function ProfileGrid({
             <Text
               style={[
                 a.text_sm,
-                {color: t.palette.primary_500},
+                t.atoms.text_link,
                 hovered &&
                   web({
                     textDecorationLine: 'underline',
-                    textDecorationColor: t.palette.primary_500,
+                    textDecorationColor: t.atoms.text_link.color,
                   }),
               ]}>
               <Trans>See more</Trans>

src/components/Link.tsx

@@ -415,7 +415,7 @@ function LinkPeek({
           // dialog can show.
           useInAppBrowser: useInAppBrowserPref === true,
           browserToolbarColor: t.atoms.bg.backgroundColor,
-          browserControlsColor: t.palette.primary_500,
+          browserControlsColor: t.atoms.text_link.color,
         }}
         borderRadius={borderRadius}
         // Fires only when not morphing natively (in-app browser off/unset).
@@ -487,14 +487,14 @@ export function InlineLinkText({
       accessibilityLabel={label}
       {...rest}
       style={[
-        {color: t.palette.primary_500},
+        t.atoms.text_link,
         interacted &&
           !disableUnderline && {
             ...web({
               outline: 0,
               textDecorationLine: 'underline',
               textDecorationColor:
-                flattenedStyle.color ?? t.palette.primary_500,
+                flattenedStyle.color ?? t.atoms.text_link.color,
             }),
           },
         flattenedStyle,
@@ -591,14 +591,14 @@ export function SimpleInlineLinkText({
       accessibilityLabel={label}
       {...rest}
       style={[
-        {color: t.palette.primary_500},
+        t.atoms.text_link,
         interacted &&
           !disableUnderline && {
             ...web({
               outline: 0,
               textDecorationLine: 'underline',
               textDecorationColor:
-                flattenedStyle.color ?? t.palette.primary_500,
+                flattenedStyle.color ?? t.atoms.text_link.color,
             }),
           },
         flattenedStyle,

src/components/Post/ShowMoreTextButton.tsx

@@ -1,8 +1,6 @@
 import {useCallback, useMemo} from 'react'
 import {LayoutAnimation, type TextStyle} from 'react-native'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {atoms as a, flatten, type TextStyleProp, useTheme} from '#/alf'
@@ -14,7 +12,7 @@ export function ShowMoreTextButton({
   style,
 }: TextStyleProp & {onPress: () => void}) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
   const onPress = useCallback(() => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
@@ -30,7 +28,7 @@ export function ShowMoreTextButton({
 
   return (
     <Button
-      label={_(msg`Expand post text`)}
+      label={l`Expand post text`}
       onPress={onPress}
       style={[
         a.self_start,
@@ -43,13 +41,13 @@ export function ShowMoreTextButton({
         <Text
           style={[
             textStyle,
+            t.atoms.text_link,
             {
-              color: t.palette.primary_500,
               opacity: pressed ? 0.6 : 1,
               textDecorationLine: hovered ? 'underline' : undefined,
             },
           ]}>
-          <Trans>Show More</Trans>
+          <Trans>Show more</Trans>
         </Text>
       )}
     </Button>

src/components/Post/Translated/index.tsx

@@ -150,10 +150,10 @@ function TranslationLink({
         label={l`Translate`}
         hoverStyle={[
           native({opacity: 0.5}),
-          web([a.underline, {textDecorationColor: t.palette.primary_500}]),
+          web([a.underline, {textDecorationColor: t.atoms.text_link.color}]),
         ]}
         hitSlop={HITSLOP_30}>
-        <Text style={[a.text_sm, {color: t.palette.primary_500}]}>
+        <Text style={[a.text_sm, t.atoms.text_link]}>
           <Trans>Translate</Trans>
         </Text>
       </Link>
@@ -229,7 +229,7 @@ function TranslationError({
           label={l`Try Google Translate`}
           hoverStyle={[
             native({opacity: 0.5}),
-            web([a.underline, {textDecorationColor: t.palette.primary_500}]),
+            web([a.underline, {textDecorationColor: t.atoms.text_link.color}]),
           ]}
           hitSlop={HITSLOP_30}>
           <Text
@@ -237,7 +237,7 @@ function TranslationError({
               a.text_xs,
               a.font_medium,
               a.leading_snug,
-              {color: t.palette.primary_500},
+              t.atoms.text_link,
             ]}>
             <Trans>Try Google Translate</Trans>
           </Text>

src/components/moderation/ContentHider.tsx

@@ -6,9 +6,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {type ModerationUI} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {
   ADULT_CONTENT_LABELS,
@@ -78,7 +76,7 @@ function ContentHiderActive({
   children?: React.ReactNode
 }) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {gtMobile} = useBreakpoints()
   const [override, setOverride] = useState(false)
   const control = useModerationDetailsDialogControl()
@@ -97,7 +95,7 @@ function ContentHiderActive({
       (blur.type === 'label' && blur.source.type !== 'user')
     ) {
       if (desc.isSubjectAccount) {
-        return _(msg`${desc.name} (Account)`)
+        return l`${desc.name} (Account)`
       } else {
         return desc.name
       }
@@ -128,7 +126,7 @@ function ContentHiderActive({
 
         const def = cause.labelDef || getDefinition(labelDefs, cause.label)
         if (def.identifier === 'porn' || def.identifier === 'sexual') {
-          return _(msg`Adult Content`)
+          return l`Adult Content`
         }
         return getLabelStrings(i18n.locale, globalLabelStrings, def).name
       })
@@ -138,7 +136,7 @@ function ContentHiderActive({
     }
     return [...new Set(selfBlurNames)].join(', ')
   }, [
-    _,
+    l,
     modui.blurs,
     blur,
     desc.name,
@@ -151,7 +149,6 @@ function ContentHiderActive({
   return (
     <View testID={testID} style={[a.overflow_hidden, style]}>
       <ModerationDetailsDialog control={control} modcause={blur} />
-
       <Button
         onPress={e => {
           e.preventDefault()
@@ -166,10 +163,10 @@ function ContentHiderActive({
         label={desc.name}
         accessibilityHint={
           modui.noOverride
-            ? _(msg`Learn more about the moderation applied to this content`)
+            ? l`Learn more about the moderation applied to this content`
             : override
-              ? _(msg`Hides the content`)
-              : _(msg`Shows the content`)
+              ? l`Hides the content`
+              : l`Shows the content`
         }>
         {state => (
           <View
@@ -223,7 +220,6 @@ function ContentHiderActive({
           </View>
         )}
       </Button>
-
       {desc.source && blur.type === 'label' && !override && (
         <Button
           onPress={e => {
@@ -231,9 +227,7 @@ function ContentHiderActive({
             e.stopPropagation()
             control.open()
           }}
-          label={_(
-            msg`Learn more about the moderation applied to this content`,
-          )}
+          label={l`Learn more about the moderation applied to this content`}
           style={[a.pt_sm]}>
           {state => (
             <Text
@@ -252,7 +246,7 @@ function ContentHiderActive({
               )}{' '}
               <Text
                 style={[
-                  {color: t.palette.primary_500},
+                  t.atoms.text_link,
                   a.text_sm,
                   state.hovered && [web({textDecoration: 'underline'})],
                 ]}>
@@ -262,7 +256,6 @@ function ContentHiderActive({
           )}
         </Button>
       )}
-
       {override && <View style={childContainerStyle}>{children}</View>}
     </View>
   )

src/components/moderation/ScreenHider.tsx

@@ -6,9 +6,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {type ModerationUI} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
@@ -38,7 +36,7 @@ export function ScreenHider({
   containerStyle?: StyleProp<ViewStyle>
 }>) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const [override, setOverride] = useState(false)
   const navigation = useNavigation<NavigationProp>()
   const {isMobile} = useWebMediaQueries()
@@ -131,15 +129,13 @@ export function ScreenHider({
                 control.open()
               }}
               accessibilityRole="button"
-              accessibilityLabel={_(msg`Learn more about this warning`)}
+              accessibilityLabel={l`Learn more about this warning`}
               accessibilityHint="">
               <Text
                 style={[
                   a.text_lg,
                   a.leading_snug,
-                  {
-                    color: t.palette.primary_500,
-                  },
+                  t.atoms.text_link,
                   web({
                     cursor: 'pointer',
                   }),
@@ -158,7 +154,7 @@ export function ScreenHider({
           color="primary"
           size="large"
           style={[a.rounded_full]}
-          label={_(msg`Go back`)}
+          label={l`Go back`}
           onPress={() => {
             if (navigation.canGoBack()) {
               navigation.goBack()
@@ -176,7 +172,7 @@ export function ScreenHider({
             color="secondary"
             size="large"
             style={[a.rounded_full]}
-            label={_(msg`Show anyway`)}
+            label={l`Show anyway`}
             onPress={() => setOverride(v => !v)}>
             <ButtonText>
               <Trans>Show anyway</Trans>

src/screens/Settings/components/SettingsList.tsx

@@ -311,7 +311,7 @@ export function BadgeButton({
             a.text_md,
             a.font_normal,
             a.text_right,
-            {color: pressed ? t.palette.contrast_300 : t.palette.primary_500},
+            {color: pressed ? t.palette.contrast_300 : t.atoms.text_link.color},
           ]}>
           {label}
         </Button.ButtonText>

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

@@ -6,10 +6,9 @@ import {
   useState,
 } from 'react'
 import {
-  type NativeSyntheticEvent,
   Text as RNText,
   TextInput as RNTextInput,
-  type TextInputSelectionChangeEventData,
+  type TextInputSelectionChangeEvent,
   View,
 } from 'react-native'
 import {type PasteEventPayload, TextInputWrapper} from 'expo-paste-input'
@@ -141,7 +140,7 @@ export function TextInput({
   )
 
   const onSelectionChange = useCallback(
-    (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+    (evt: TextInputSelectionChangeEvent) => {
       // NOTE we track the input selection using a ref to avoid excessive renders -prf
       textInputSelection.current = evt.nativeEvent.selection
     },
@@ -150,7 +149,7 @@ export function TextInput({
 
   const onSelectAutocompleteItem = useCallback(
     (item: string) => {
-      onChangeText(
+      void onChangeText(
         insertMentionAt(
           richtext.text,
           textInputSelection.current?.start || 0,
@@ -201,7 +200,9 @@ export function TextInput({
           style={[
             inputTextStyle,
             {
-              color: segment.facet ? t.palette.primary_500 : t.atoms.text.color,
+              color: segment.facet
+                ? t.atoms.text_link.color
+                : t.atoms.text.color,
               marginTop: -1,
             },
           ]}>
@@ -217,7 +218,7 @@ export function TextInput({
         <RNTextInput
           testID="composerTextInput"
           ref={textInput}
-          onChangeText={onChangeText}
+          onChangeText={(newText: string) => void onChangeText(newText)}
           onSelectionChange={onSelectionChange}
           placeholder={placeholder}
           placeholderTextColor={t.atoms.text_contrast_low.color}

src/view/com/posts/ViewFullThread.tsx

@@ -58,7 +58,8 @@ export function ViewFullThread({uri}: {uri: string}) {
           <Text
             style={[
               a.text_md,
-              {color: t.palette.primary_500, paddingTop: 18, paddingBottom: 4},
+              t.atoms.text_link,
+              {paddingTop: 18, paddingBottom: 4},
             ]}>
             {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
             {l`View full thread`}