ALF TabBar (#6924)

* alf tabbar

* reduce indicator height

src/view/com/pager/TabBar.tsx

@@ -12,9 +12,9 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated'
 
-import {usePalette} from '#/lib/hooks/usePalette'
+import {PressableWithHover} from '#/view/com/util/PressableWithHover'
-import {PressableWithHover} from '../util/PressableWithHover'
+import {atoms as a, useTheme} from '#/alf'
-import {Text} from '../util/text/Text'
+import {Text} from '#/components/Typography'
 
 export interface TabBarProps {
   testID?: string
@@ -41,7 +41,7 @@ export function TabBar({
   dragProgress,
   dragState,
 }: TabBarProps) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const scrollElRef = useAnimatedRef<ScrollView>()
   const syncScrollState = useSharedValue<'synced' | 'unsynced' | 'needs-sync'>(
     'synced',
@@ -264,7 +264,7 @@ export function TabBar({
   return (
     <View
       testID={testID}
-      style={[pal.view, styles.outer]}
+      style={[t.atoms.bg, a.flex_row]}
       accessibilityRole="tablist">
       <ScrollView
         testID={`${testID}-selector`}
@@ -309,14 +309,14 @@ export function TabBar({
                 left: 0,
                 bottom: 0,
                 right: 0,
-                borderBottomWidth: 3,
+                borderBottomWidth: 2,
-                borderColor: pal.link.color,
+                borderColor: t.palette.primary_500,
               },
             ]}
           />
         </Animated.View>
       </ScrollView>
-      <View style={[pal.border, styles.outerBottomBorder]} />
+      <View style={[t.atoms.border_contrast_low, styles.outerBottomBorder]} />
     </View>
   )
 }
@@ -336,7 +336,7 @@ function TabBarItem({
   onPressItem: (index: number) => void
   onItemLayout: (index: number, layout: {x: number; width: number}) => void
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const style = useAnimatedStyle(() => {
     if (!_WORKLET) {
       return {opacity: 0.7}
@@ -363,15 +363,14 @@ function TabBarItem({
       <PressableWithHover
         testID={`${testID}-selector-${index}`}
         style={styles.item}
-        hoverStyle={pal.viewLight}
+        hoverStyle={t.atoms.bg_contrast_25}
         onPress={() => onPressItem(index)}
         accessibilityRole="tab">
         <Animated.View style={[style, styles.itemInner]}>
           <Text
             emoji
-            type="lg-bold"
             testID={testID ? `${testID}-${item}` : undefined}
-            style={[pal.text, {lineHeight: 20}]}>
+            style={[t.atoms.text, a.text_md, a.font_bold, {lineHeight: 20}]}>
             {item}
           </Text>
         </Animated.View>
@@ -381,9 +380,6 @@ function TabBarItem({
 }
 
 const styles = StyleSheet.create({
-  outer: {
-    flexDirection: 'row',
-  },
   contentContainer: {
     backgroundColor: 'transparent',
     paddingHorizontal: CONTENT_PADDING,

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

@@ -1,10 +1,9 @@
-import {useCallback, useEffect, useMemo, useRef} from 'react'
+import {useCallback, useEffect, useRef} from 'react'
 import {ScrollView, StyleSheet, View} from 'react-native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {Text} from '#/components/Typography'
 import {PressableWithHover} from '../util/PressableWithHover'
-import {Text} from '../util/text/Text'
 import {DraggableScrollView} from './DraggableScrollView'
 
 export interface TabBarProps {
@@ -12,6 +11,8 @@ export interface TabBarProps {
   selectedPage: number
   items: string[]
   indicatorColor?: string
+  backgroundColor?: string
+
   onSelect?: (index: number) => void
   onPressSelected?: (index: number) => void
 }
@@ -28,15 +29,14 @@ export function TabBar({
   onSelect,
   onPressSelected,
 }: TabBarProps) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const scrollElRef = useRef<ScrollView>(null)
   const itemRefs = useRef<Array<Element>>([])
-  const indicatorStyle = useMemo(
+  const indicatorStyle = {
-    () => ({borderBottomColor: indicatorColor || pal.colors.link}),
+    borderBottomColor: indicatorColor || t.palette.primary_500,
-    [indicatorColor, pal],
+  }
-  )
+  const {gtMobile} = useBreakpoints()
-  const {isDesktop, isTablet} = useWebMediaQueries()
+  const styles = gtMobile ? desktopStyles : mobileStyles
-  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
 
   useEffect(() => {
     // On the web, the primary interaction is tapping.
@@ -96,7 +96,7 @@ export function TabBar({
   return (
     <View
       testID={testID}
-      style={[pal.view, styles.outer]}
+      style={[t.atoms.bg, styles.outer]}
       accessibilityRole="tablist">
       <DraggableScrollView
         testID={`${testID}-selector`}
@@ -112,16 +112,17 @@ export function TabBar({
               key={`${item}-${i}`}
               ref={node => (itemRefs.current[i] = node as any)}
               style={styles.item}
-              hoverStyle={pal.viewLight}
+              hoverStyle={t.atoms.bg_contrast_25}
               onPress={() => onPressItem(i)}
               accessibilityRole="tab">
               <View style={[styles.itemInner, selected && indicatorStyle]}>
                 <Text
                   emoji
-                  type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
                   testID={testID ? `${testID}-${item}` : undefined}
                   style={[
-                    selected ? pal.text : pal.textLight,
+                    selected ? t.atoms.text : t.atoms.text_contrast_medium,
+                    a.text_md,
+                    a.font_bold,
                     {lineHeight: 20},
                   ]}>
                   {item}
@@ -131,7 +132,7 @@ export function TabBar({
           )
         })}
       </DraggableScrollView>
-      <View style={[pal.border, styles.outerBottomBorder]} />
+      <View style={[t.atoms.border_contrast_low, styles.outerBottomBorder]} />
     </View>
   )
 }
@@ -179,7 +180,7 @@ const mobileStyles = StyleSheet.create({
   },
   itemInner: {
     paddingBottom: 10,
-    borderBottomWidth: 3,
+    borderBottomWidth: 2,
     borderBottomColor: 'transparent',
   },
   outerBottomBorder: {