From bccc2c8e89c84cb095bed7d8a65a5a7f8e31a38f Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Fri, 16 Sep 2022 23:42:01 +0200
Subject: [PATCH] refactor: light theme for cmdk

---
 packages/website/src/components/Cmdk.tsx         | 12 ++++++++----
 packages/website/src/components/DocContainer.tsx |  2 +-
 packages/website/src/components/MethodList.tsx   |  2 +-
 packages/website/src/components/PropertyList.tsx |  2 +-
 packages/website/src/components/Table.tsx        |  5 ++++-
 packages/website/src/styles/cmdk.css             |  2 +-
 6 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/website/src/components/Cmdk.tsx b/packages/website/src/components/Cmdk.tsx
index 09f3644ca..7c22ae93c 100644
--- a/packages/website/src/components/Cmdk.tsx
+++ b/packages/website/src/components/Cmdk.tsx
@@ -124,8 +124,8 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string
 								{resolveIcon(item.kind)}
 								<div className="flex flex-col">
 									<h2 className="font-semibold">{item.name}</h2>
-									<span className="text-sm font-normal">{item.summary}</span>
-									<span className="text-xs font-light opacity-50">{item.path}</span>
+									<span className="line-clamp-1 text-sm font-normal">{item.summary}</span>
+									<span className="line-clamp-1 text-xs font-light opacity-75 dark:opacity-50">{item.path}</span>
 								</div>
 							</div>
 						</div>
@@ -180,9 +180,13 @@ export function CmdkDialog({ currentPackageName }: { currentPackageName?: string
 
 	return (
 		<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
-					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..."
 					value={search}
 					onValueChange={setSearch}
diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index 4f7ddf778..92d18b8fa 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -73,7 +73,7 @@ export function DocContainer({
 
 				<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
 					{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>
 
 				<SyntaxHighlighter code={excerpt} />
diff --git a/packages/website/src/components/MethodList.tsx b/packages/website/src/components/MethodList.tsx
index 431b3e2aa..56b4a45f3 100644
--- a/packages/website/src/components/MethodList.tsx
+++ b/packages/website/src/components/MethodList.tsx
@@ -10,7 +10,7 @@ export function MethodList({ data }: { data: (ApiMethodJSON | ApiMethodSignature
 					key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`}
 				>
 					<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>
 			)),
 		[data],
diff --git a/packages/website/src/components/PropertyList.tsx b/packages/website/src/components/PropertyList.tsx
index 61b7e2d37..504f635ef 100644
--- a/packages/website/src/components/PropertyList.tsx
+++ b/packages/website/src/components/PropertyList.tsx
@@ -17,7 +17,7 @@ export function PropertyList({ data }: { data: ApiPropertyItemJSON[] }) {
 						deprecation={prop.deprecated}
 						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>
 			)),
 		[data],
diff --git a/packages/website/src/components/Table.tsx b/packages/website/src/components/Table.tsx
index c6340fee4..90e0a390d 100644
--- a/packages/website/src/components/Table.tsx
+++ b/packages/website/src/components/Table.tsx
@@ -12,7 +12,10 @@ export function Table({
 	const cols = useMemo(
 		() =>
 			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}
 				</th>
 			)),
diff --git a/packages/website/src/styles/cmdk.css b/packages/website/src/styles/cmdk.css
index 4aa7cc1a3..1c47f4ddf 100644
--- a/packages/website/src/styles/cmdk.css
+++ b/packages/website/src/styles/cmdk.css
@@ -1,3 +1,3 @@
 [data-backdrop] {
-	background-color: rgb(0 0 0 / 25%);
+	background-color: rgb(0 0 0 / 35%);
 }