style: improve theming

Author: MohamedH1998

src/components/overrides/Sidebar.astro

@@ -26,11 +26,11 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		<input
 			type="search"
 			id="sidebar-search"
-			placeholder="Search..."
+			placeholder="Search sidebar..."
 			aria-label="Search sidebar navigation"
 			autocomplete="off"
 			spellcheck="false"
-			class="box-border min-h-[2.125rem] w-full rounded-lg border border-neutral-200 bg-transparent px-3 pr-10 text-sm text-neutral-950 placeholder-neutral-400 outline-2 outline-offset-2 outline-transparent transition-colors duration-150 focus-visible:outline-blue-500 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder-neutral-500 dark:focus-visible:outline-blue-400"
+			class="box-border min-h-[2.125rem] w-full cursor-pointer rounded-lg border border-neutral-200 bg-transparent px-3 pr-10 text-sm text-neutral-950 placeholder-neutral-400 outline-2 outline-offset-2 outline-transparent transition-colors duration-150 hover:border-neutral-950 focus:cursor-text focus-visible:outline-blue-500 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder-neutral-500 dark:hover:border-neutral-100 dark:focus-visible:outline-blue-400"
 		/>
 		<div class="sidebar-search-icon"></div>
 	</div>

src/components/overrides/SidebarSublist.astro

@@ -52,11 +52,11 @@ const restoreIndices = sublist.map((entry) =>
 						href={entry.href}
 						aria-current={entry.isCurrent ? "page" : undefined}
 						class:list={[
-							"flex min-h-[2.125rem] items-start rounded-lg px-3 py-1.5 text-sm font-medium no-underline transition-colors duration-150",
+							"flex min-h-[2.125rem] items-start rounded-lg px-3 py-1.5 text-sm font-medium no-underline",
 							"outline-2 outline-offset-[-2px] outline-transparent focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400",
-							"text-[var(--sidebar-text)] hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
-							entry.isCurrent &&
-								"!bg-[var(--sidebar-active-bg)] !font-semibold !text-[var(--sidebar-active-text)]",
+							entry.isCurrent
+								? "!bg-[var(--sidebar-active-bg)] !font-semibold !text-[var(--sidebar-active-text)]"
+								: "transition-colors duration-150 text-[var(--sidebar-text)] hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
 							!nested && "large",
 							entry.attrs.class,
 						]}

src/styles/sidebar.css

@@ -57,11 +57,11 @@
 	--sl-color-hairline-shade: var(--color-cl1-gray-2);
 	--sidebar-text: var(--color-cl1-gray-7);
 	--sidebar-text-strong: var(--color-cl1-white);
-	--sidebar-hover-bg: var(--sidebar-orange-accent-600);
-	--sidebar-hover-text: var(--orange-accent-200);
-	--sidebar-active-bg: var(--sidebar-orange-accent-600);
-	--sidebar-active-text: var(--orange-accent-200);
+	--sidebar-hover-bg: var(--color-cl1-gray-2);
+	--sidebar-hover-text: var(--sidebar-text-strong);
+	--sidebar-active-bg: var(--color-cl1-gray-2);
+	--sidebar-active-text: var(--sidebar-text-strong);
 	--sidebar-border: var(--color-cl1-gray-2);
-	--sl-color-sidebar-active: var(--orange-accent-200);
-	--sl-color-sidebar-hover: var(--sidebar-orange-accent-600);
+	--sl-color-sidebar-active: var(--sidebar-text-strong);
+	--sl-color-sidebar-hover: var(--color-cl1-gray-2);
 }