Better naming, better code

src/alf/README.md

@@ -1,34 +1,23 @@
 # Application Layout Framework (ALF)
 
 ```tsx
-import { View } from 'react-native'
-import { useAlf } from '#/alf'
-import { H3 } from '#/view/com/Typography'
+import {View} from 'react-native'
+import {atoms, useTheme, useBreakpoints, web} from '#/alf'
+import {H3, Text} from '#/view/com/Typography'
 
 function App() {
-  const { styles, breakpoints } = useAlf()
+  const theme = useAlf()
+  const breakpoints = useBreakpoints()
 
   return (
-    <View style={[styles.flex.row, styles.padding.pa.xl]}>
-      <H3 style={[styles.padding.pb.m, styles.color.primary]}>I'm the blue color</H3>
-    </View>
-  )
-}
-```
-
-Is a little nicer than:
-
-```tsx
-import { View } from 'react-native'
-import { useTheme, styles } from '#/alf'
-import { H3 } from '#/view/com/Typography'
-
-function App() {
-  const theme = useTheme()
-
-  return (
-    <View style={[styles.flex.row, styles.padding.pa.xl]}>
-      <H3 style={[styles.padding.pb.m, theme.color.primary]}>I'm the blue color</H3>
+    <View style={[atoms.flex.row, atoms.padding.pa.xl, web({height: '100vh'})]}>
+      <H3 style={[atoms.padding.pb.m, theme.atoms.color.primary]}>
+        I'm the blue color
+      </H3>
+
+      {breakpoints.gtMobile && (
+        <Text style={[theme.atoms.backgroundColor.l1]}>Only visible on tablet and above!</Text>
+      )}
     </View>
   )
 }