Playing around

src/view/nova/themes.ts

@@ -133,6 +133,7 @@ export const light = createTheme({
         lineHeight: tokens.lineHeight[value],
       }
     },
+    fontFamily: (fontFamily: string) => ({fontFamily}),
   },
   breakpoints: {
     /** Greater than 800 */

src/view/screens/Debug.tsx

@@ -1,15 +1,42 @@
 import React from 'react'
-import {CenteredView} from '#/view/com/util/Views'
+import {CenteredView, ScrollView} from '#/view/com/util/Views'
 
 import {useSetColorMode} from '#/state/shell'
-import {Box, Text, Button, H1, H2, H3, H4, H5, H6} from '#/view/nova'
+import {
+  useBreakpoints,
+  Box,
+  Text,
+  Button,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+} from '#/view/nova'
+
+function BreakpointDebugger() {
+  const breakpoints = useBreakpoints()
+
+  return (
+    <Box>
+      <Text fontSize="l" fontWeight="900">
+        Breakpoints
+      </Text>
+      <Text pa="m" bg="l2" fontFamily="monospace">
+        {JSON.stringify(breakpoints, null, 2)}
+      </Text>
+    </Box>
+  )
+}
 
 export function DebugScreen() {
   const setColorMode = useSetColorMode()
 
   return (
+    <ScrollView>
       <CenteredView>
-      <Box py="xl" gap="xxl">
+        <Box pa="xl" gap="xxl">
           <Box row gap="s">
             <Button onPress={() => setColorMode('system')}>
               <Text>System</Text>
@@ -22,6 +49,8 @@ export function DebugScreen() {
             </Button>
           </Box>
 
+          <BreakpointDebugger />
+
           <Box gap="m">
             <H1>Heading 1</H1>
             <H2>Heading 2</H2>
@@ -61,7 +90,25 @@ export function DebugScreen() {
               <Box pa="s" bg="l6" flex={1} />
             </Box>
           </Box>
+
+          <Box
+            row
+            justifyContent="center"
+            px="l"
+            py="l"
+            bg="l3"
+            gtMobile={{
+              py: 'xl',
+              bg: 'l5',
+            }}
+            gtTablet={{
+              py: 64,
+              bg: 'l7',
+            }}>
+            <Box w={64} h={64} bg="primary" />
+          </Box>
         </Box>
       </CenteredView>
+    </ScrollView>
   )
 }