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,67 +1,114 @@
 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 (
-    <CenteredView>
+    <ScrollView>
-      <Box py="xl" gap="xxl">
+      <CenteredView>
-        <Box row gap="s">
+        <Box pa="xl" gap="xxl">
-          <Button onPress={() => setColorMode('system')}>
-            <Text>System</Text>
-          </Button>
-          <Button onPress={() => setColorMode('light')}>
-            <Text>Light</Text>
-          </Button>
-          <Button onPress={() => setColorMode('dark')}>
-            <Text>Dark</Text>
-          </Button>
-        </Box>
-
-        <Box gap="m">
-          <H1>Heading 1</H1>
-          <H2>Heading 2</H2>
-          <H3>Heading 3</H3>
-          <H4>Heading 4</H4>
-          <H5>Heading 5</H5>
-          <H6>Heading 6</H6>
-        </Box>
-
-        <Box gap="m">
-          <Text fontSize="xl" fontWeight="900">
-            H1 Size Text
-          </Text>
-          <Text fontSize="l">H2 Size Text</Text>
-          <Text fontSize="m">H3 Size Text</Text>
-          <Text fontSize="s">H4 Size Text</Text>
-          <Text fontSize="xs">H5 Size Text</Text>
-          <Text fontSize="xxs">H6 Size Text</Text>
-        </Box>
-
-        <Box pa="s" gap="m" bg="l3">
           <Box row gap="s">
-            <Box pa="s" bg="l6" />
+            <Button onPress={() => setColorMode('system')}>
-            <Box pa="s" bg="l6" />
+              <Text>System</Text>
-            <Box pa="s" bg="l6" />
+            </Button>
+            <Button onPress={() => setColorMode('light')}>
+              <Text>Light</Text>
+            </Button>
+            <Button onPress={() => setColorMode('dark')}>
+              <Text>Dark</Text>
+            </Button>
           </Box>
 
-          <Box row gap="s">
+          <BreakpointDebugger />
-            <Box pa="s" bg="l6" flex={1} />
+
-            <Box pa="s" bg="l6" flex={1} />
+          <Box gap="m">
-            <Box pa="s" bg="l6" flex={1} />
+            <H1>Heading 1</H1>
+            <H2>Heading 2</H2>
+            <H3>Heading 3</H3>
+            <H4>Heading 4</H4>
+            <H5>Heading 5</H5>
+            <H6>Heading 6</H6>
           </Box>
 
-          <Box row gap="s">
+          <Box gap="m">
-            <Box pa="s" bg="l6" flex={1} />
+            <Text fontSize="xl" fontWeight="900">
-            <Box pa="s" bg="l6" flex={2} />
+              H1 Size Text
-            <Box pa="s" bg="l6" flex={1} />
+            </Text>
+            <Text fontSize="l">H2 Size Text</Text>
+            <Text fontSize="m">H3 Size Text</Text>
+            <Text fontSize="s">H4 Size Text</Text>
+            <Text fontSize="xs">H5 Size Text</Text>
+            <Text fontSize="xxs">H6 Size Text</Text>
+          </Box>
+
+          <Box pa="s" gap="m" bg="l3">
+            <Box row gap="s">
+              <Box pa="s" bg="l6" />
+              <Box pa="s" bg="l6" />
+              <Box pa="s" bg="l6" />
+            </Box>
+
+            <Box row gap="s">
+              <Box pa="s" bg="l6" flex={1} />
+              <Box pa="s" bg="l6" flex={1} />
+              <Box pa="s" bg="l6" flex={1} />
+            </Box>
+
+            <Box row gap="s">
+              <Box pa="s" bg="l6" flex={1} />
+              <Box pa="s" bg="l6" flex={2} />
+              <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>
-      </Box>
+      </CenteredView>
-    </CenteredView>
+    </ScrollView>
   )
 }