Delete "non-standard" styles from pal (#10279)

src/lib/ThemeContext.tsx

@@ -21,8 +21,6 @@ export type PaletteColor = {
   textInverted: string
   link: string
   border: string
-  borderDark: string
-  icon: string
   [k: string]: string
 }
 export type Palette = Record<PaletteColorName, PaletteColor>

src/lib/hooks/usePalette.ts

@@ -13,12 +13,10 @@ export interface UsePaletteValue {
   viewLight: ViewStyle
   btn: ViewStyle
   border: ViewStyle
-  borderDark: ViewStyle
   text: TextStyle
   textLight: TextStyle
   textInverted: TextStyle
   link: TextStyle
-  icon: TextStyle
 }
 
 /**
@@ -42,9 +40,6 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
       border: {
         borderColor: palette.border,
       },
-      borderDark: {
-        borderColor: palette.borderDark,
-      },
       text: {
         color: palette.text,
       },
@@ -57,9 +52,6 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
       link: {
         color: palette.link,
       },
-      icon: {
-        color: palette.icon,
-      },
     }
   }, [theme, color])
 }

src/lib/styles.ts

@@ -54,8 +54,6 @@ export const colors = {
   green3: '#20bc07',
   green4: '#148203',
   green5: '#082b03',
-
-  unreadNotifBg: '#ebf6ff',
 }
 
 /**

src/lib/themes.ts

@@ -17,19 +17,6 @@ export const defaultTheme: Theme = {
       textInverted: lightPalette.white,
       link: lightPalette.primary_500,
       border: lightPalette.contrast_100,
-      borderDark: lightPalette.contrast_200,
-      icon: lightPalette.contrast_500,
-
-      // non-standard
-      textVeryLight: lightPalette.contrast_400,
-      replyLine: lightPalette.contrast_100,
-      replyLineDot: lightPalette.contrast_200,
-      unreadNotifBg: lightPalette.primary_25,
-      unreadNotifBorder: lightPalette.primary_100,
-      postCtrl: lightPalette.contrast_500,
-      brandText: lightPalette.primary_500,
-      emptyStateIcon: lightPalette.contrast_300,
-      borderLinkHover: lightPalette.contrast_300,
     },
     primary: {
       background: colors.blue3,
@@ -39,8 +26,6 @@ export const defaultTheme: Theme = {
       textInverted: colors.blue3,
       link: colors.blue0,
       border: colors.blue4,
-      borderDark: colors.blue5,
-      icon: colors.blue4,
     },
     secondary: {
       background: colors.green3,
@@ -50,8 +35,6 @@ export const defaultTheme: Theme = {
       textInverted: colors.green4,
       link: colors.green1,
       border: colors.green4,
-      borderDark: colors.green5,
-      icon: colors.green4,
     },
     inverted: {
       background: darkPalette.black,
@@ -61,8 +44,6 @@ export const defaultTheme: Theme = {
       textInverted: darkPalette.black,
       link: darkPalette.primary_500,
       border: darkPalette.contrast_100,
-      borderDark: darkPalette.contrast_200,
-      icon: darkPalette.contrast_500,
     },
     error: {
       background: colors.red3,
@@ -72,8 +53,6 @@ export const defaultTheme: Theme = {
       textInverted: colors.red3,
       link: colors.red1,
       border: colors.red4,
-      borderDark: colors.red5,
-      icon: colors.red4,
     },
   },
   shapes: {
@@ -303,19 +282,6 @@ export const darkTheme: Theme = {
       textInverted: darkPalette.black,
       link: darkPalette.primary_500,
       border: darkPalette.contrast_100,
-      borderDark: darkPalette.contrast_200,
-      icon: darkPalette.contrast_500,
-
-      // non-standard
-      textVeryLight: darkPalette.contrast_400,
-      replyLine: darkPalette.contrast_200,
-      replyLineDot: darkPalette.contrast_200,
-      unreadNotifBg: darkPalette.primary_25,
-      unreadNotifBorder: darkPalette.primary_100,
-      postCtrl: darkPalette.contrast_500,
-      brandText: darkPalette.primary_500,
-      emptyStateIcon: darkPalette.contrast_300,
-      borderLinkHover: darkPalette.contrast_300,
     },
     primary: {
       ...defaultTheme.palette.primary,
@@ -333,8 +299,6 @@ export const darkTheme: Theme = {
       textInverted: darkPalette.white,
       link: lightPalette.primary_500,
       border: lightPalette.contrast_100,
-      borderDark: lightPalette.contrast_200,
-      icon: lightPalette.contrast_500,
     },
   },
 }
@@ -352,19 +316,6 @@ export const dimTheme: Theme = {
       textInverted: dimPalette.black,
       link: dimPalette.primary_500,
       border: dimPalette.contrast_100,
-      borderDark: dimPalette.contrast_200,
-      icon: dimPalette.contrast_500,
-
-      // non-standard
-      textVeryLight: dimPalette.contrast_400,
-      replyLine: dimPalette.contrast_200,
-      replyLineDot: dimPalette.contrast_200,
-      unreadNotifBg: dimPalette.primary_25,
-      unreadNotifBorder: dimPalette.primary_100,
-      postCtrl: dimPalette.contrast_500,
-      brandText: dimPalette.primary_500,
-      emptyStateIcon: dimPalette.contrast_300,
-      borderLinkHover: dimPalette.contrast_300,
     },
   },
 }

src/view/com/notifications/NotificationFeedItem.tsx

@@ -26,7 +26,6 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {DM_SERVICE_HEADERS, MAX_POST_LINES} from '#/lib/constants'
 import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'
 import {forceLTR} from '#/lib/strings/bidi'
@@ -92,10 +91,9 @@ let NotificationFeedItem = ({
   hideTopBorder?: boolean
 }): React.ReactNode => {
   const queryClient = useQueryClient()
-  const pal = usePalette('default')
   const t = useTheme()
   const {_, i18n} = useLingui()
-  const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false)
+  const [isAuthorsExpanded, setIsAuthorsExpanded] = useState<boolean>(false)
   const itemHref = useMemo(() => {
     switch (item.type) {
       case 'post-like':
@@ -145,7 +143,7 @@ let NotificationFeedItem = ({
       e.preventDefault()
       e.stopPropagation()
     }
-    setAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
+    setIsAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
   }
 
   const onBeforePress = useCallback(() => {
@@ -222,8 +220,8 @@ let NotificationFeedItem = ({
           post={item.subject}
           style={
             isHighlighted && {
-              backgroundColor: pal.colors.unreadNotifBg,
+              backgroundColor: t.palette.primary_25,
-              borderColor: pal.colors.unreadNotifBorder,
+              borderColor: t.palette.primary_100,
             }
           }
           hideTopBorder={hideTopBorder}
@@ -577,8 +575,8 @@ let NotificationFeedItem = ({
         item.notification.isRead
           ? undefined
           : {
-              backgroundColor: pal.colors.unreadNotifBg,
+              backgroundColor: t.palette.primary_25,
-              borderColor: pal.colors.unreadNotifBorder,
+              borderColor: t.palette.primary_100,
             },
         !hideTopBorder && a.border_t,
         a.overflow_hidden,

src/view/com/post/Post.tsx

@@ -12,10 +12,8 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {MAX_POST_LINES} from '#/lib/constants'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
 import {countLines} from '#/lib/strings/helpers'
-import {colors} from '#/lib/styles'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -26,7 +24,7 @@ import {unstableCacheProfileView} from '#/state/queries/profile'
 import {Link} from '#/view/com/util/Link'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a} from '#/alf'
+import {atoms as a, select, useTheme} from '#/alf'
 import {
   GalleryBleed,
   maybeApplyGalleryOffsetStyles,
@@ -119,7 +117,7 @@ function PostInner({
   onBeforePress?: () => void
 }) {
   const queryClient = useQueryClient()
-  const pal = usePalette('default')
+  const t = useTheme()
   const {openComposer} = useOpenComposer()
   const [limitLines, setLimitLines] = useState(
     () => countLines(richText?.text) >= MAX_POST_LINES,
@@ -164,8 +162,8 @@ function PostInner({
         href={itemHref}
         style={[
           styles.outer,
-          pal.border,
+          t.atoms.border_contrast_low,
-          !hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth},
+          !hideTopBorder && a.border_t,
           style,
         ]}
         onBeforePress={onBeforePress}
@@ -176,7 +174,20 @@ function PostInner({
           setHover(false)
         }}>
         <SubtleHover hover={hover} />
-        {showReplyLine && <View style={styles.replyLine} />}
+        {showReplyLine && (
+          <View
+            style={[
+              styles.replyLine,
+              {
+                backgroundColor: select(t.name, {
+                  light: t.palette.contrast_100,
+                  dim: t.palette.contrast_200,
+                  dark: t.palette.contrast_200,
+                }),
+              },
+            ]}
+          />
+        )}
         <View style={styles.layout}>
           <View style={styles.layoutAvi}>
             <PreviewableUserAvatar
@@ -290,7 +301,6 @@ const styles = StyleSheet.create({
     top: 70,
     bottom: 0,
     borderLeftWidth: 2,
-    borderLeftColor: colors.gray2,
   },
   contentHider: {
     marginBottom: 2,

src/view/com/posts/PostFeedItem.tsx

@@ -33,7 +33,7 @@ import {
 import {Link} from '#/view/com/util/Link'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a} from '#/alf'
+import {atoms as a, select, useTheme} from '#/alf'
 import {
   GalleryBleed,
   maybeApplyGalleryOffsetStyles,
@@ -167,6 +167,7 @@ let FeedItemInner = ({
   const queryClient = useQueryClient()
   const {openComposer} = useOpenComposer()
   const pal = usePalette('default')
+  const t = useTheme()
   const {currentAccount} = useSession()
 
   const [hover, setHover] = useState(false)
@@ -346,8 +347,11 @@ let FeedItemInner = ({
                 style={[
                   styles.replyLine,
                   {
-                    flexGrow: 1,
+                    backgroundColor: select(t.name, {
-                    backgroundColor: pal.colors.replyLine,
+                      light: t.palette.contrast_100,
+                      dim: t.palette.contrast_200,
+                      dark: t.palette.contrast_200,
+                    }),
                     marginBottom: 4,
                   },
                 ]}
@@ -381,8 +385,11 @@ let FeedItemInner = ({
                 style={[
                   styles.replyLine,
                   {
-                    flexGrow: 1,
+                    backgroundColor: select(t.name, {
-                    backgroundColor: pal.colors.replyLine,
+                      light: t.palette.contrast_100,
+                      dim: t.palette.contrast_200,
+                      dark: t.palette.contrast_200,
+                    }),
                     marginTop: live ? 8 : 4,
                   },
                 ]}
@@ -536,6 +543,7 @@ const styles = StyleSheet.create({
     cursor: 'pointer',
   },
   replyLine: {
+    flexGrow: 1,
     width: 2,
     marginLeft: 'auto',
     marginRight: 'auto',

src/view/com/posts/ViewFullThread.tsx

@@ -1,75 +1,70 @@
 import {useMemo} from 'react'
-import {StyleSheet, View} from 'react-native'
+import {View} from 'react-native'
 import Svg, {Circle, Line} from 'react-native-svg'
 import {AtUri} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
-import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {atoms as a, select, useTheme} from '#/alf'
+import {Link} from '#/components/Link'
 import {SubtleHover} from '#/components/SubtleHover'
-import {Link} from '../util/Link'
+import {Text} from '#/components/Typography'
-import {Text} from '../util/text/Text'
 
 export function ViewFullThread({uri}: {uri: string}) {
-  const {
+  const t = useTheme()
-    state: hover,
-    onIn: onHoverIn,
-    onOut: onHoverOut,
-  } = useInteractionState()
-  const pal = usePalette('default')
   const itemHref = useMemo(() => {
     const urip = new AtUri(uri)
     return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
   }, [uri])
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
   return (
     <Link
-      style={[styles.viewFullThread]}
+      style={[
-      href={itemHref}
+        a.flex_row,
-      asAnchor
+        {
-      noFeedback
+          gap: 10,
-      onPointerEnter={onHoverIn}
+          paddingLeft: 18,
-      onPointerLeave={onHoverOut}>
+        },
-      <SubtleHover
+      ]}
-        hover={hover}
+      to={itemHref}
-        // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
+      label={l`View full thread`}>
-        style={{top: 8, bottom: -5}}
+      {({hovered}) => (
-      />
+        <>
-      <View style={styles.viewFullThreadDots}>
+          <SubtleHover
-        <Svg width="4" height="40">
+            hover={hovered}
-          <Line
+            // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
-            x1="2"
+            style={{top: 8, bottom: -5}}
-            y1="0"
-            x2="2"
-            y2="15"
-            stroke={pal.colors.replyLine}
-            strokeWidth="2"
           />
-          <Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} />
+          <View style={[a.align_center, {width: 42}]}>
-          <Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} />
+            <Svg width="4" height="40">
-          <Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} />
+              <Line
-        </Svg>
+                x1="2"
-      </View>
+                y1="0"
-
+                x2="2"
-      <Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
+                y2="15"
-        {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
+                stroke={select(t.name, {
-        {_(msg`View full thread`)}
+                  light: t.palette.contrast_100,
-      </Text>
+                  dim: t.palette.contrast_200,
+                  dark: t.palette.contrast_200,
+                })}
+                strokeWidth="2"
+              />
+              <Circle cx="2" cy="22" r="1.5" fill={t.palette.contrast_200} />
+              <Circle cx="2" cy="28" r="1.5" fill={t.palette.contrast_200} />
+              <Circle cx="2" cy="34" r="1.5" fill={t.palette.contrast_200} />
+            </Svg>
+          </View>
+          <Text
+            style={[
+              a.text_md,
+              {color: t.palette.primary_500, paddingTop: 18, paddingBottom: 4},
+            ]}>
+            {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
+            {l`View full thread`}
+          </Text>
+        </>
+      )}
     </Link>
   )
 }
-
-const styles = StyleSheet.create({
-  viewFullThread: {
-    flexDirection: 'row',
-    gap: 10,
-    paddingLeft: 18,
-  },
-  viewFullThreadDots: {
-    width: 42,
-    alignItems: 'center',
-  },
-})