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

refactor: light theme for cmdk

Browse Source
This commit is contained in:
iCrawl
2022-09-16 23:42:01 +02:00
parent 1d72663e92
commit bccc2c8e89
6 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/website/src/components/Cmdk.tsx
View File

@@ -124,8 +124,8 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string
{resolveIcon(item.kind)} {resolveIcon(item.kind)}
<div className="flex flex-col"> <div className="flex flex-col">
<h2 className="font-semibold">{item.name}</h2> <h2 className="font-semibold">{item.name}</h2>
<span className="text-sm font-normal">{item.summary}</span> <span className="line-clamp-1 text-sm font-normal">{item.summary}</span>
<span className="text-xs font-light opacity-50">{item.path}</span> <span className="line-clamp-1 text-xs font-light opacity-75 dark:opacity-50">{item.path}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -180,9 +180,13 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string
return ( return (
<Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog}> <Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog}>
<Command label="Command Menu" className="bg-dark-300 min-w-xs sm:min-w-lg rounded" shouldFilter={false}> <Command
label="Command Menu"
className="dark:bg-dark-300 min-w-xs sm:min-w-lg max-w-xs rounded bg-white sm:max-w-lg"
shouldFilter={false}
>
<Command.Input <Command.Input
className="bg-dark-300 caret-blurple mt-4 w-full border-0 p-4 pt-0 text-lg outline-0" className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 mt-4 w-full border-0 bg-white p-4 pt-0 text-lg outline-0 dark:placeholder:text-white/75"
placeholder="Type to search..." placeholder="Type to search..."
value={search} value={search}
onValueChange={setSearch} onValueChange={setSearch}

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

@@ -73,7 +73,7 @@ export function DocContainer({
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}> <Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
{summary ? <TSDoc node={summary} /> : <span>No summary provided.</span>} {summary ? <TSDoc node={summary} /> : <span>No summary provided.</span>}
<div className="border-light-900 -mx-8 mt-6 border-t-2" /> <div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" />
</Section> </Section>
<SyntaxHighlighter code={excerpt} /> <SyntaxHighlighter code={excerpt} />

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

@@ -10,7 +10,7 @@ export function MethodList({ data }: { data: (ApiMethodJSON | ApiMethodSignature
key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`} key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`}
> >
<MethodItem data={method} /> <MethodItem data={method} />
<div className="border-light-900 -mx-8 border-t-2" /> <div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
</Fragment> </Fragment>
)), )),
[data], [data],

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

@@ -17,7 +17,7 @@ export function PropertyList({ data }: { data: ApiPropertyItemJSON[] }) {
deprecation={prop.deprecated} deprecation={prop.deprecated}
inheritanceData={prop.inheritanceData} inheritanceData={prop.inheritanceData}
/> />
<div className="border-light-900 -mx-8 border-t-2" /> <div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
</Fragment> </Fragment>
)), )),
[data], [data],

5
packages/website/src/components/Table.tsx
View File

@@ -12,7 +12,10 @@ export function Table({
const cols = useMemo( const cols = useMemo(
() => () =>
columns.map((column) => ( columns.map((column) => (
<th key={column} className="border-light-900 break-normal border-b px-3 py-2 text-left text-sm"> <th
key={column}
className="border-light-900 dark:border-dark-100 break-normal border-b px-3 py-2 text-left text-sm"
>
{column} {column}
</th> </th>
)), )),

2
packages/website/src/styles/cmdk.css
View File

@@ -1,3 +1,3 @@
[data-backdrop] { [data-backdrop] {
background-color: rgb(0 0 0 / 25%); background-color: rgb(0 0 0 / 35%);
} }