acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Playing around

Browse Source
This commit is contained in:
Eric Bailey
2023-12-13 18:49:58 -06:00
parent c64e74ecf2
commit db7ba3be15
2 changed files with 98 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/nova/themes.ts
+1
View File
@@ -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
+97 -50
View File
@@ -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>
<Box py="xl" gap="xxl">
<Box row gap="s">
<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">
<ScrollView>
<CenteredView>
<Box pa="xl" gap="xxl">
<Box row gap="s">
<Box pa="s" bg="l6" />
<Box pa="s" bg="l6" />
<Box pa="s" bg="l6" />
<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 row gap="s">
<Box pa="s" bg="l6" flex={1} />
<Box pa="s" bg="l6" flex={1} />
<Box pa="s" bg="l6" flex={1} />
<BreakpointDebugger />
<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 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 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" />
<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>
)
}