Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-16 19:43:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: contrast & colors

Browse Source
This commit is contained in:
iCrawl
2022-08-23 21:31:38 +02:00
parent 92933c2b61
commit 249ba0a9a6
6 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/src/components/DocContainer.tsx
View File

@@ -121,7 +121,7 @@ export function DocContainer({
) : null} ) : null}
{implementsTokens?.length ? ( {implementsTokens?.length ? (
<Group noWrap> <Group pb="xs" noWrap>
<Title order={3} ml="xs"> <Title order={3} ml="xs">
Implements Implements
</Title> </Title>

2
packages/website/src/components/MethodItem.tsx
View File

@@ -43,7 +43,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<Stack> <Stack>
<Box className={classes.outer} ml={matches ? 0 : -45}> <Box className={classes.outer} ml={matches ? 0 : -45}>
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}> <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<ActionIcon component="a" href={`#${key}`} variant="transparent"> <ActionIcon component="a" href={`#${key}`} variant="transparent" color="dark">
<FiLink size={20} /> <FiLink size={20} />
</ActionIcon> </ActionIcon>
</MediaQuery> </MediaQuery>

2
packages/website/src/components/SidebarItems.tsx
View File

@@ -67,7 +67,9 @@ function resolveIcon(item: keyof GroupedMembers) {
} }
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
link: { link: {
...theme.fn.focusStyles(),
fontWeight: 500, fontWeight: 500,
display: 'block', display: 'block',
width: 'unset', width: 'unset',

30
packages/website/src/components/SidebarLayout.tsx
View File

@@ -130,11 +130,18 @@ const useStyles = createStyles(
gap: 50, gap: 50,
}, },
}, },
link: { color: theme.colorScheme === 'dark' ? theme.white : theme.black },
}), }),
); );
const packageMenuItems = PACKAGES.map((pkg) => ( const packageMenuItems = PACKAGES.map((pkg) => (
<Menu.Item key={pkg} component={NextLink} href={`/docs/packages/${pkg}/main`}> <Menu.Item
key={pkg}
component={NextLink}
href={`/docs/packages/${pkg}/main`}
sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}
>
{pkg} {pkg}
</Menu.Item> </Menu.Item>
)); ));
@@ -173,7 +180,12 @@ export function SidebarLayout({
const versionMenuItems = useMemo( const versionMenuItems = useMemo(
() => () =>
versions?.map((item) => ( versions?.map((item) => (
<Menu.Item key={item} component={NextLink} href={`/docs/packages/${packageName ?? 'builders'}/${item}`}> <Menu.Item
key={item}
component={NextLink}
href={`/docs/packages/${packageName ?? 'builders'}/${item}`}
sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}
>
{item} {item}
</Menu.Item> </Menu.Item>
)) ?? [], )) ?? [],
@@ -184,7 +196,9 @@ export function SidebarLayout({
() => () =>
asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => ( asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref> <Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref>
<Anchor component="a">{path}</Anchor> <Anchor component="a" sx={(theme) => ({ color: theme.colorScheme === 'dark' ? theme.white : theme.black })}>
{path}
</Anchor>
</Link> </Link>
)), )),
[asPathWithoutQueryAndAnchor], [asPathWithoutQueryAndAnchor],
@@ -358,12 +372,12 @@ export function SidebarLayout({
<Title order={4}>Community</Title> <Title order={4}>Community</Title>
<Stack spacing={0}> <Stack spacing={0}>
<Link href="https://discord.gg/djs" passHref> <Link href="https://discord.gg/djs" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer"> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
Discord Discord
</Anchor> </Anchor>
</Link> </Link>
<Link href="https://github.com/discordjs/discord.js/discussions" passHref> <Link href="https://github.com/discordjs/discord.js/discussions" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer"> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
GitHub discussions GitHub discussions
</Anchor> </Anchor>
</Link> </Link>
@@ -373,17 +387,17 @@ export function SidebarLayout({
<Title order={4}>Project</Title> <Title order={4}>Project</Title>
<Stack spacing={0}> <Stack spacing={0}>
<Link href="https://github.com/discordjs/discord.js" passHref> <Link href="https://github.com/discordjs/discord.js" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer"> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
discord.js discord.js
</Anchor> </Anchor>
</Link> </Link>
<Link href="https://discordjs.guide" passHref> <Link href="https://discordjs.guide" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer"> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
discord.js guide discord.js guide
</Anchor> </Anchor>
</Link> </Link>
<Link href="https://discord-api-types.dev" passHref> <Link href="https://discord-api-types.dev" passHref>
<Anchor component="a" target="_blank" rel="noopener noreferrer"> <Anchor component="a" target="_blank" rel="noopener noreferrer" className={classes.link}>
discord-api-types discord-api-types
</Anchor> </Anchor>
</Link> </Link>

8
packages/website/src/components/TableOfContentItems.tsx
View File

@@ -7,18 +7,18 @@ const useStyles = createStyles((theme) => ({
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
link: { link: {
...theme.fn.focusStyles(), ...theme.fn.focusStyles(),
fontWeight: 500,
display: 'block', display: 'block',
textDecoration: 'none', textDecoration: 'none',
color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.colors.gray![7], color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.colors.gray![7],
lineHeight: 1.2, lineHeight: 1.2,
fontSize: theme.fontSizes.sm, fontSize: theme.fontSizes.sm,
padding: theme.spacing.xs, padding: 5,
paddingLeft: theme.spacing.md, paddingLeft: theme.spacing.md,
marginLeft: 14, marginLeft: 14,
borderTopRightRadius: theme.radius.sm, borderTopRightRadius: theme.radius.sm,
borderBottomRightRadius: theme.radius.sm, borderBottomRightRadius: theme.radius.sm,
borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`, borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
fontWeight: 500,
'&:hover': { '&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0], backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -48,7 +48,7 @@ export function TableOfContentItems({
</Group> </Group>
</Box> </Box>
)), )),
[properties], [properties, colorScheme],
); );
const methodItems = useMemo( const methodItems = useMemo(
@@ -73,7 +73,7 @@ export function TableOfContentItems({
</Box> </Box>
); );
}), }),
[methods], [methods, colorScheme],
); );
return ( return (

20
packages/website/src/pages/_app.tsx
View File

@@ -93,16 +93,16 @@ export default function MyApp({ Component, pageProps }: AppProps) {
colorScheme, colorScheme,
colors: { colors: {
blurple: [ blurple: [
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
'#5865F2', '#5865f2',
], ],
}, },
primaryColor: 'blurple', primaryColor: 'blurple',