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

Tweak colors, bit of cleanup

Browse Source
This commit is contained in:
Eric Bailey
2023-12-18 17:27:28 -06:00
parent 0eb2065491
commit f427862bbf
4 changed files with 90 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/nova/components/Button.tsx
+1 -1
View File
@@ -4,6 +4,6 @@ import {styled} from '#/view/nova/system'
export const Button = styled(Pressable, { export const Button = styled(Pressable, {
px: 'l', px: 'l',
py: 's', py: 's',
bg: 'l3', bg: 'l2',
radius: 40, radius: 40,
}) })
src/view/nova/components/Typography.tsx
+8 -8
View File
@@ -3,7 +3,7 @@ import {styled} from '#/view/nova/system'
import {web} from '#/view/nova/util/platform' import {web} from '#/view/nova/util/platform'
export const Text = styled(RNText, { export const Text = styled(RNText, {
color: 'l8', color: 'l7',
fontSize: 's', fontSize: 's',
}) })
@@ -12,7 +12,7 @@ export const Text = styled(RNText, {
* @see https://docs.expo.dev/develop/user-interface/fonts/ * @see https://docs.expo.dev/develop/user-interface/fonts/
*/ */
export const H1 = styled(RNText, { export const H1 = styled(RNText, {
color: 'l8', color: 'l7',
fontSize: 'l', fontSize: 'l',
gtMobile: { gtMobile: {
fontSize: 'xl', fontSize: 'xl',
@@ -23,7 +23,7 @@ export const H1 = styled(RNText, {
}), }),
}) })
export const H2 = styled(RNText, { export const H2 = styled(RNText, {
color: 'l8', color: 'l7',
fontSize: 'm', fontSize: 'm',
gtMobile: { gtMobile: {
fontSize: 'l', fontSize: 'l',
@@ -34,7 +34,7 @@ export const H2 = styled(RNText, {
}), }),
}) })
export const H3 = styled(RNText, { export const H3 = styled(RNText, {
color: 'l8', color: 'l7',
fontSize: 'm', fontSize: 'm',
...web({ ...web({
role: 'heading', role: 'heading',
@@ -42,7 +42,7 @@ export const H3 = styled(RNText, {
}), }),
}) })
export const H4 = styled(RNText, { export const H4 = styled(RNText, {
color: 'l8', color: 'l7',
fontSize: 's', fontSize: 's',
...web({ ...web({
role: 'heading', role: 'heading',
@@ -50,7 +50,7 @@ export const H4 = styled(RNText, {
}), }),
}) })
export const H5 = styled(RNText, { export const H5 = styled(RNText, {
color: 'l8', color: 'l7',
fontSize: 'xs', fontSize: 'xs',
...web({ ...web({
role: 'heading', role: 'heading',
@@ -58,7 +58,7 @@ export const H5 = styled(RNText, {
}), }),
}) })
export const H6 = styled(RNText, { export const H6 = styled(RNText, {
color: 'l8', color: 'l7',
fontSize: 'xxs', fontSize: 'xxs',
...web({ ...web({
role: 'heading', role: 'heading',
@@ -66,7 +66,7 @@ export const H6 = styled(RNText, {
}), }),
}) })
export const P = styled(RNText, { export const P = styled(RNText, {
color: 'l8', color: 'l7',
fontSize: 's', fontSize: 's',
...web({ ...web({
role: 'paragraph', role: 'paragraph',
src/view/nova/themes.ts
+45 -25
View File
@@ -1,15 +1,24 @@
import {createTheme} from './lib/theme' import {createTheme} from './lib/theme'
const palette = { const BLUE_HUE = 210
const GRAYSCALE_SATURATION = 12
export const palette = {
white: '#FFFFFF', white: '#FFFFFF',
black: '#0A0B0D',
gray1: '#F7F9FC', /**
gray2: '#E4E8EE', * Mathematical scale of grays, from lightest to darkest, all based on the
gray3: '#CED5DE', * primary blue color
gray4: '#828A99', */
gray5: '#4D5564', gray1: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
gray6: '#1D2126', gray2: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 85%)`,
blue: '#1185FE', gray3: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 75%)`,
gray4: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 30%)`,
gray5: `hsl(${BLUE_HUE} ${GRAYSCALE_SATURATION}%, 20%)`,
gray6: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
black: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
blue: `hsl(${BLUE_HUE}, 100%, 53%)`,
green: '#54D469', green: '#54D469',
red: '#FB4566', red: '#FB4566',
} }
@@ -27,14 +36,14 @@ export const light = createTheme({
}, },
color: { color: {
primary: palette.blue, primary: palette.blue,
l1: palette.white, l0: palette.white,
l2: palette.gray1, l1: palette.gray1,
l3: palette.gray2, l2: palette.gray2,
l4: palette.gray3, l3: palette.gray3,
l5: palette.gray4, l4: palette.gray4,
l6: palette.gray5, l5: palette.gray5,
l7: palette.gray6, l6: palette.gray6,
l8: palette.black, l7: palette.black,
}, },
fontSize: { fontSize: {
xxs: 10, xxs: 10,
@@ -54,6 +63,17 @@ export const light = createTheme({
xl: 22, xl: 22,
xxl: 26, xxl: 26,
}, },
borderRadius: {
s: 8,
m: 12,
xl: 36,
round: 999,
},
fontWeight: {
normal: '400',
semi: '700',
bold: '900',
},
}, },
properties: { properties: {
/** Alias for `width` */ /** Alias for `width` */
@@ -149,14 +169,14 @@ export const dark = createTheme({
...light.config.tokens, ...light.config.tokens,
color: { color: {
...light.config.tokens.color, ...light.config.tokens.color,
l1: palette.black, l0: palette.black,
l2: palette.gray6, l1: palette.gray6,
l3: palette.gray5, l2: palette.gray5,
l4: palette.gray4, l3: palette.gray4,
l5: palette.gray3, l4: palette.gray3,
l6: palette.gray2, l5: palette.gray2,
l7: palette.gray1, l6: palette.gray1,
l8: palette.white, l7: palette.white,
}, },
}, },
}) })
src/view/screens/Debug.tsx
+36 -20
View File
@@ -41,10 +41,10 @@ function BreakpointDebugger() {
return ( return (
<Box> <Box>
<H3 pb="s" fontWeight="900"> <H3 pb="s" fontWeight="bold">
Breakpoint Debugger Breakpoint Debugger
</H3> </H3>
<Text pa="m" bg="l2" fontFamily="monospace"> <Text pa="m" bg="l1" fontFamily="monospace">
{JSON.stringify(breakpoints, null, 2)} {JSON.stringify(breakpoints, null, 2)}
</Text> </Text>
</Box> </Box>
@@ -54,12 +54,12 @@ function BreakpointDebugger() {
function Hooks() { function Hooks() {
const outer = useStyle({ const outer = useStyle({
pa: 'm', pa: 'm',
bg: 'l2', bg: 'l1',
}) })
const {heading} = useStyles({ const {heading} = useStyles({
heading: { heading: {
fontSize: 'l', fontSize: 'l',
fontWeight: '900', fontWeight: 'bold',
gtTablet: { gtTablet: {
fontSize: 'xl', fontSize: 'xl',
}, },
@@ -74,26 +74,42 @@ function Hooks() {
} }
export function DebugScreen() { export function DebugScreen() {
const backgroundStyles = useStyle({
bg: 'l0',
})
return ( return (
<ScrollView> <ScrollView>
<CenteredView> <CenteredView style={backgroundStyles}>
<Box pa="xl" gap="xxl"> <Box pa="xl" gap="xxl">
<ThemeSelector /> <ThemeSelector />
<Box row gap="m">
<Box column bg="l0" h={60} />
<Box column bg="l1" h={60} />
<Box column bg="l2" 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>
<BreakpointDebugger /> <BreakpointDebugger />
<Box> <Box>
<H3 pb="s" fontWeight="900"> <H3 pb="s" fontWeight="bold">
Typography Typography
</H3> </H3>
<Box gap="m" pa="m" bg="l2"> <Box gap="m" pa="m" bg="l1">
<H1>Heading 1</H1> <H1>Heading 1</H1>
<H2>Heading 2</H2> <H2>Heading 2</H2>
<H3>Heading 3</H3> <H3>Heading 3</H3>
<H4>Heading 4</H4> <H4>Heading 4</H4>
<H5>Heading 5</H5> <H5>Heading 5</H5>
<H6>Heading 6</H6> <H6>Heading 6</H6>
<Text fontSize="xl" fontWeight="900"> <Text fontSize="xl" fontWeight="bold">
H1 Size Text H1 Size Text
</Text> </Text>
<Text fontSize="l">H2 Size Text</Text> <Text fontSize="l">H2 Size Text</Text>
@@ -105,10 +121,10 @@ export function DebugScreen() {
</Box> </Box>
<Box> <Box>
<H3 pb="s" fontWeight="900"> <H3 pb="s" fontWeight="bold">
Grid Grid
</H3> </H3>
<Box pa="m" gap="m" bg="l3"> <Box pa="m" gap="m" bg="l1">
<Box row gap="s"> <Box row gap="s">
<Box pa="s" bg="l6" /> <Box pa="s" bg="l6" />
<Box pa="s" bg="l6" /> <Box pa="s" bg="l6" />
@@ -116,21 +132,21 @@ export function DebugScreen() {
</Box> </Box>
<Box row gap="s"> <Box row gap="s">
<Box pa="s" bg="l6" flex={1} /> <Box column pa="s" bg="l6" />
<Box pa="s" bg="l6" flex={1} /> <Box column pa="s" bg="l6" />
<Box pa="s" bg="l6" flex={1} /> <Box column pa="s" bg="l6" />
</Box> </Box>
<Box row gap="s"> <Box row gap="s">
<Box pa="s" bg="l6" flex={1} /> <Box column pa="s" bg="l6" debug />
<Box pa="s" bg="l6" flex={2} /> <Box column pa="s" bg="l6" debug flex={2} />
<Box pa="s" bg="l6" flex={1} /> <Box column pa="s" bg="l6" />
</Box> </Box>
</Box> </Box>
</Box> </Box>
<Box> <Box>
<H3 pb="s" fontWeight="900"> <H3 pb="s" fontWeight="bold">
Breakpoint styles Breakpoint styles
</H3> </H3>
@@ -139,14 +155,14 @@ export function DebugScreen() {
justifyContent="center" justifyContent="center"
px="l" px="l"
py="l" py="l"
bg="l3" bg="l2"
gtMobile={{ gtMobile={{
py: 'xl', py: 'xl',
bg: 'l5', bg: 'l4',
}} }}
gtTablet={{ gtTablet={{
py: 64, py: 64,
bg: 'l7', bg: 'l6',
}}> }}>
<Box w={64} h={64} bg="primary" /> <Box w={64} h={64} bg="primary" />
</Box> </Box>