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