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

Add some more examples

Browse Source
This commit is contained in:
Eric Bailey
2023-12-18 17:58:45 -06:00
parent 2ee4528ee9
commit c18bdfa2a8
2 changed files with 53 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/nova/themes.ts
+1 -1
View File
@@ -119,7 +119,7 @@ export const light = createTheme({
}, },
macros: { macros: {
/** Shorthand for `flexDirection: 'row'` */ /** Shorthand for `flexDirection: 'row'` */
row: (_: boolean) => ({flexDirection: 'row'}), row: (_: boolean) => ({flexDirection: 'row', flex: 1}),
/** /**
* Shorthand for `flex: 1`. * Shorthand for `flex: 1`.
* *
src/view/screens/Debug.tsx
+52 -9
View File
@@ -58,6 +58,7 @@ function Hooks() {
}) })
const {heading} = useStyles({ const {heading} = useStyles({
heading: { heading: {
color: 'l7',
fontSize: 'l', fontSize: 'l',
fontWeight: 'bold', fontWeight: 'bold',
gtTablet: { gtTablet: {
@@ -84,15 +85,57 @@ export function DebugScreen() {
<Box pa="xl" gap="xxl"> <Box pa="xl" gap="xxl">
<ThemeSelector /> <ThemeSelector />
<Box row gap="m"> <Box>
<Box column bg="l0" h={60} /> <H3 pb="s" fontWeight="bold">
<Box column bg="l1" h={60} /> Colors
<Box column bg="l2" h={60} /> </H3>
<Box column bg="l3" h={60} /> <Box row gap="m">
<Box column bg="l4" h={60} /> <Box column bg="l0" h={60} />
<Box column bg="l5" h={60} /> <Box column bg="l1" h={60} />
<Box column bg="l6" h={60} /> <Box column bg="l2" h={60} />
<Box column bg="l7" h={60} /> <Box column bg="l3" h={60} />
<Box column bg="l4" h={60} />
<Box column bg="l5" h={60} />
<Box column bg="l6" h={60} />
<Box column bg="l7" h={60} />
</Box>
</Box>
<Box>
<H3 pb="s" fontWeight="bold">
Spacing
</H3>
<Box gap="m">
<Box row alignItems="center">
<Text w={80}>xxs (2px)</Text>
<Box flex={1} w="100%" pt="xxs" bg="l3" />
</Box>
<Box row alignItems="center">
<Text w={80}>xs (4px)</Text>
<Box flex={1} w="100%" pt="xs" bg="l3" />
</Box>
<Box row alignItems="center">
<Text w={80}>s (8px)</Text>
<Box flex={1} w="100%" pt="s" bg="l3" />
</Box>
<Box row alignItems="center">
<Text w={80}>m (12px)</Text>
<Box flex={1} w="100%" pt="m" bg="l3" />
</Box>
<Box row alignItems="center">
<Text w={80}>l (18px)</Text>
<Box flex={1} w="100%" pt="l" bg="l3" />
</Box>
<Box row alignItems="center">
<Text w={80}>xl (24px)</Text>
<Box flex={1} w="100%" pt="xl" bg="l3" />
</Box>
<Box row alignItems="center">
<Text w={80}>xxl (32px)</Text>
<Box flex={1} w="100%" pt="xxl" bg="l3" />
</Box>
</Box>
</Box> </Box>
<BreakpointDebugger /> <BreakpointDebugger />