delete unused s properties

src/App.native.tsx

@@ -16,7 +16,6 @@ import * as Sentry from '@sentry/react-native'
 
 import {Provider as HideBottomBarBorderProvider} from '#/lib/hooks/useHideBottomBarBorder'
 import {QueryProvider} from '#/lib/react-query'
-import {s} from '#/lib/styles'
 import {ThemeProvider} from '#/lib/ThemeContext'
 import {Provider as TranslateOnDeviceProvider} from '#/lib/translation'
 import I18nProvider from '#/locale/i18nProvider'
@@ -58,7 +57,7 @@ import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
 import {Shell} from '#/view/shell'
-import {ThemeProvider as Alf} from '#/alf'
+import {atoms as a, ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as ContextMenuProvider} from '#/components/ContextMenu'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
@@ -175,7 +174,7 @@ function InnerApp() {
                                                     <EmailVerificationProvider>
                                                       <HideBottomBarBorderProvider>
                                                         <GestureHandlerRootView
-                                                          style={s.h100pct}>
+                                                          style={a.h_full}>
                                                           <GlobalGestureEventsProvider>
                                                             <IntentDialogProvider>
                                                               <TranslateOnDeviceProvider>

src/lib/styles.ts

@@ -1,9 +1,4 @@
-import {
+import {type StyleProp, StyleSheet, type TextStyle} from 'react-native'
-  Dimensions,
-  type StyleProp,
-  StyleSheet,
-  type TextStyle,
-} from 'react-native'
 
 import {IS_WEB} from '#/env'
 import {type Theme, type TypographyVariant} from './ThemeContext'
@@ -61,14 +56,6 @@ export const colors = {
   green5: '#082b03',
 
   unreadNotifBg: '#ebf6ff',
-  brandBlue: '#0066FF',
-  like: '#ec4899',
-}
-
-export const gradients = {
-  blueLight: {start: '#5A71FA', end: colors.blue3}, // buttons
-  blue: {start: '#5E55FB', end: colors.blue3}, // fab
-  blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
 }
 
 /**
@@ -78,57 +65,6 @@ export const s = StyleSheet.create({
   // helpers
   footerSpacer: {height: 100},
   contentContainer: {paddingBottom: 200},
-  contentContainerExtra: {paddingBottom: 300},
-  border0: {borderWidth: 0},
-  border1: {borderWidth: 1},
-  borderTop1: {borderTopWidth: 1},
-  borderRight1: {borderRightWidth: 1},
-  borderBottom1: {borderBottomWidth: 1},
-  borderLeft1: {borderLeftWidth: 1},
-  hidden: {display: 'none'},
-  dimmed: {opacity: 0.5},
-
-  // font weights
-  fw600: {fontWeight: '600'},
-  bold: {fontWeight: '600'},
-  fw500: {fontWeight: '600'},
-  semiBold: {fontWeight: '600'},
-  fw400: {fontWeight: '400'},
-  normal: {fontWeight: '400'},
-  fw300: {fontWeight: '400'},
-  light: {fontWeight: '400'},
-
-  // text decoration
-  underline: {textDecorationLine: 'underline'},
-
-  // font variants
-  tabularNum: {fontVariant: ['tabular-nums']},
-
-  // font sizes
-  f9: {fontSize: 9},
-  f10: {fontSize: 10},
-  f11: {fontSize: 11},
-  f12: {fontSize: 12},
-  f13: {fontSize: 13},
-  f14: {fontSize: 14},
-  f15: {fontSize: 15},
-  f16: {fontSize: 16},
-  f17: {fontSize: 17},
-  f18: {fontSize: 18},
-
-  // line heights
-  ['lh13-1']: {lineHeight: 13},
-  ['lh13-1.3']: {lineHeight: 16.9}, // 1.3 of 13px
-  ['lh14-1']: {lineHeight: 14},
-  ['lh14-1.3']: {lineHeight: 18.2}, // 1.3 of 14px
-  ['lh15-1']: {lineHeight: 15},
-  ['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
-  ['lh16-1']: {lineHeight: 16},
-  ['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
-  ['lh17-1']: {lineHeight: 17},
-  ['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 17px
-  ['lh18-1']: {lineHeight: 18},
-  ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
 
   // margins
   mr2: {marginRight: 2},
@@ -171,71 +107,15 @@ export const s = StyleSheet.create({
   pb20: {paddingBottom: 20},
   px5: {paddingHorizontal: 5},
 
-  // flex
-  flexRow: {flexDirection: 'row'},
-  flexCol: {flexDirection: 'column'},
-  flex1: {flex: 1},
-  flexGrow1: {flexGrow: 1},
-  alignCenter: {alignItems: 'center'},
-  alignBaseline: {alignItems: 'baseline'},
-  justifyCenter: {justifyContent: 'center'},
-
-  // position
-  absolute: {position: 'absolute'},
-
   // dimensions
-  w100pct: {width: '100%'},
-  h100pct: {height: '100%'},
   hContentRegion: IS_WEB ? {minHeight: '100%'} : {height: '100%'},
-  window: {
-    width: Dimensions.get('window').width,
-    height: Dimensions.get('window').height,
-  },
 
   // text align
-  textLeft: {textAlign: 'left'},
   textCenter: {textAlign: 'center'},
-  textRight: {textAlign: 'right'},
 
   // colors
   white: {color: colors.white},
   black: {color: colors.black},
-
-  gray1: {color: colors.gray1},
-  gray2: {color: colors.gray2},
-  gray3: {color: colors.gray3},
-  gray4: {color: colors.gray4},
-  gray5: {color: colors.gray5},
-
-  blue1: {color: colors.blue1},
-  blue2: {color: colors.blue2},
-  blue3: {color: colors.blue3},
-  blue4: {color: colors.blue4},
-  blue5: {color: colors.blue5},
-
-  red1: {color: colors.red1},
-  red2: {color: colors.red2},
-  red3: {color: colors.red3},
-  red4: {color: colors.red4},
-  red5: {color: colors.red5},
-
-  pink1: {color: colors.pink1},
-  pink2: {color: colors.pink2},
-  pink3: {color: colors.pink3},
-  pink4: {color: colors.pink4},
-  pink5: {color: colors.pink5},
-
-  purple1: {color: colors.purple1},
-  purple2: {color: colors.purple2},
-  purple3: {color: colors.purple3},
-  purple4: {color: colors.purple4},
-  purple5: {color: colors.purple5},
-
-  green1: {color: colors.green1},
-  green2: {color: colors.green2},
-  green3: {color: colors.green3},
-  green4: {color: colors.green4},
-  green5: {color: colors.green5},
 })
 
 export function lh(

src/view/com/lightbox/ImageViewing/index.tsx

@@ -582,7 +582,7 @@ function LightboxFooter({
         {altText ? (
           <View accessibilityRole="button" style={styles.footerText}>
             <Text
-              style={[s.gray3]}
+              style={{color: colors.gray3}}
               numberOfLines={isAltExpanded ? undefined : 3}
               selectable
               onPress={() => {

src/view/com/modals/UserAddRemoveLists.tsx

@@ -202,7 +202,7 @@ function ListItem({
       <View style={styles.listItemContent}>
         <Text
           type="lg"
-          style={[s.bold, pal.text]}
+          style={[{fontWeight: '600'}, pal.text]}
           numberOfLines={1}
           lineHeight={1.2}>
           {sanitizeDisplayName(list.name)}

src/view/com/util/LoadingPlaceholder.tsx

@@ -60,7 +60,7 @@ export function PostLoadingPlaceholder({
           },
         ]}
       />
-      <View style={[s.flex1]}>
+      <View style={[a.flex_1]}>
         <LoadingPlaceholder width={100} height={6} style={{marginBottom: 10}} />
         <LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
         <LoadingPlaceholder width="95%" height={6} style={{marginBottom: 8}} />
@@ -238,7 +238,7 @@ export function FeedLoadingPlaceholder({
           height={36}
           style={[styles.avatar, {borderRadius: 8}]}
         />
-        <View style={[s.flex1]}>
+        <View style={[a.flex_1]}>
           <LoadingPlaceholder width={100} height={8} style={[s.mt5, s.mb10]} />
           <LoadingPlaceholder width={120} height={8} />
         </View>

src/view/screens/Debug.tsx

@@ -174,7 +174,7 @@ function NotifsView() {
   }
   return (
     <View style={s.p10}>
-      <View style={s.flexRow}>
+      <View style={{flexDirection: 'row'}}>
         <Button onPress={triggerPush} label="Trigger Push" />
         <Button onPress={triggerToast} label="Trigger Toast" />
         <Button onPress={triggerToast2} label="Trigger Toast 2" />
@@ -187,7 +187,7 @@ function PaletteView({palette}: {palette: PaletteColorName}) {
   const defaultPal = usePalette('default')
   const pal = usePalette(palette)
   return (
-    <View style={[pal.view, pal.border, s.p10, s.mb5, s.border1]}>
+    <View style={[pal.view, pal.border, s.p10, s.mb5, {borderWidth: 1}]}>
       <Text style={[pal.text]}>{palette} colors</Text>
       <Text style={[pal.textLight]}>Light text</Text>
       <Text style={[pal.link]}>Link text</Text>
@@ -343,15 +343,15 @@ function ButtonsView() {
   const buttonStyles = {marginRight: 5}
   return (
     <View style={[defaultPal.view]}>
-      <View style={[s.flexRow, s.mb5]}>
+      <View style={[{flexDirection: 'row'}, s.mb5]}>
         <Button type="primary" label="Primary solid" style={buttonStyles} />
         <Button type="secondary" label="Secondary solid" style={buttonStyles} />
       </View>
-      <View style={[s.flexRow, s.mb5]}>
+      <View style={[{flexDirection: 'row'}, s.mb5]}>
         <Button type="default" label="Default solid" style={buttonStyles} />
         <Button type="inverted" label="Inverted solid" style={buttonStyles} />
       </View>
-      <View style={s.flexRow}>
+      <View style={{flexDirection: 'row'}}>
         <Button
           type="primary-outline"
           label="Primary outline"
@@ -363,7 +363,7 @@ function ButtonsView() {
           style={buttonStyles}
         />
       </View>
-      <View style={s.flexRow}>
+      <View style={{flexDirection: 'row'}}>
         <Button
           type="primary-light"
           label="Primary light"
@@ -375,7 +375,7 @@ function ButtonsView() {
           style={buttonStyles}
         />
       </View>
-      <View style={s.flexRow}>
+      <View style={{flexDirection: 'row'}}>
         <Button
           type="default-light"
           label="Default light"