Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +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}
{implementsTokens?.length ? (
<Group noWrap>
<Group pb="xs" noWrap>
<Title order={3} ml="xs">
Implements
</Title>

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

@@ -43,7 +43,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<Stack>
<Box className={classes.outer} ml={matches ? 0 : -45}>
<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} />
</ActionIcon>
</MediaQuery>

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

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

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

@@ -130,11 +130,18 @@ const useStyles = createStyles(
gap: 50,
},
},
link: { color: theme.colorScheme === 'dark' ? theme.white : theme.black },
}),
);
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}
</Menu.Item>
));
@@ -173,7 +180,12 @@ export function SidebarLayout({
const versionMenuItems = useMemo(
() =>
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}
</Menu.Item>
)) ?? [],
@@ -184,7 +196,9 @@ export function SidebarLayout({
() =>
asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
<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>
)),
[asPathWithoutQueryAndAnchor],
@@ -358,12 +372,12 @@ export function SidebarLayout({
<Title order={4}>Community</Title>
<Stack spacing={0}>
<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
</Anchor>
</Link>
<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
</Anchor>
</Link>
@@ -373,17 +387,17 @@ export function SidebarLayout({
<Title order={4}>Project</Title>
<Stack spacing={0}>
<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
</Anchor>
</Link>
<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
</Anchor>
</Link>
<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
</Anchor>
</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
link: {
...theme.fn.focusStyles(),
fontWeight: 500,
display: 'block',
textDecoration: 'none',
color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.colors.gray![7],
lineHeight: 1.2,
fontSize: theme.fontSizes.sm,
padding: theme.spacing.xs,
padding: 5,
paddingLeft: theme.spacing.md,
marginLeft: 14,
borderTopRightRadius: theme.radius.sm,
borderBottomRightRadius: theme.radius.sm,
borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
fontWeight: 500,
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -48,7 +48,7 @@ export function TableOfContentItems({
</Group>
</Box>
)),
[properties],
[properties, colorScheme],
);
const methodItems = useMemo(
@@ -73,7 +73,7 @@ export function TableOfContentItems({
</Box>
);
}),
[methods],
[methods, colorScheme],
);
return (

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

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