docs: refine UI styling and remove loglib

docs/app/docs/[[...slug]]/page.tsx

@@ -93,6 +93,20 @@ export default async function Page({
 						Accordion,
 						Accordions,
 						Endpoint,
+						Callout: ({ children, ...props }) => (
+							<defaultMdxComponents.Callout
+								{...props}
+								className={cn(
+									props,
+									"bg-none rounded-none border-dashed border-border",
+									props.type === "info" && "border-l-blue-500/50",
+									props.type === "warn" && "border-l-amber-700/50",
+									props.type === "error" && "border-l-red-500/50",
+								)}
+							>
+								{children}
+							</defaultMdxComponents.Callout>
+						),
 						DividerText,
 						iframe: (props) => (
 							<iframe {...props} className="w-full h-[500px]" />
@@ -106,7 +120,6 @@ export default async function Page({
 							href={prevPage.url}
 							className="[&>p]:ml-1 [&>p]:truncate [&>p]:w-full"
 							description={<>{prevPage.data.description}</>}
-							//@ts-expect-error - this works
 							title={
 								<div className="flex items-center gap-1">
 									<ChevronLeft className="size-4" />
@@ -121,7 +134,6 @@ export default async function Page({
 						<Card
 							href={nextPage.url}
 							description={<>{nextPage.data.description}</>}
-							//@ts-expect-error - this works
 							title={
 								<div className="flex items-center gap-1">
 									{nextPage.data.title}

docs/app/docs/layout.tsx

@@ -12,7 +12,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 				component: (
 					<div
 						className={cn(
-							"[--fd-tocnav-height:36px] md:mr-[268px] lg:mr-[286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]",
+							"[--fd-tocnav-height:36px] md:mr-[268px] lg:mr-[286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px] ",
 						)}
 					>
 						<ArticleLayout />

docs/app/global.css

@@ -2,7 +2,7 @@
 @config "../tailwind.config.js";
 @plugin 'tailwindcss-animate';
 @custom-variant dark (&:is(.dark *));
-@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/black.css";
 @import "fumadocs-ui/css/preset.css";
 @source '../../node_modules/fumadocs-ui/dist/**/*.js';
 @source '../node_modules/fumadocs-ui/dist/**/*.js';
@@ -55,7 +55,7 @@
 
 	--chart-5: oklch(0.769 0.188 70.08);
 
-	--radius: 0.625rem;
+	--radius: 0.2rem;
 
 	--sidebar: oklch(0.985 0.001 106.423);
 
@@ -75,7 +75,7 @@
 }
 
 .dark {
-	--background: oklch(0.147 0.004 49.25);
+	--background: hsl(0 0% 2%);
 
 	--foreground: oklch(0.985 0.001 106.423);
 

docs/app/page.tsx

@@ -28,7 +28,7 @@ export default async function HomePage() {
 	return (
 		<main className="h-min mx-auto overflow-x-hidden">
 			<Section
-				className="-z-1 dark:bg-black/[0.95] mb-1 overflow-y-clip"
+				className="-z-1 mb-1 overflow-y-clip"
 				crosses
 				crossesOffset="lg:translate-y-[5.25rem]"
 				customPaddings