docs: small improvements

src/components/api-section.svelte

@@ -14,10 +14,11 @@
 	{#each schemas as schema}
 		<div>
 			<div
-				class="inline-flex h-[29px] items-center justify-center rounded-button bg-accent px-3 font-mono text-[17px] font-medium leading-tight tracking-tight"
+				class="inline-flex h-[29px] items-center justify-center rounded-button bg-accent px-3 font-mono text-[17px] font-medium leading-tight tracking-tight dark:text-neutral-900"
 			>
 				<h3>
-					<span class="text-muted-foreground">{$page.data.title.replaceAll(" ", "")}.</span
+					<span class="text-muted-foreground dark:text-neutral-900/40"
+						>{$page.data.title.replaceAll(" ", "")}.</span
 					>{schema.title}
 				</h3>
 			</div>

src/components/copy-code-button.svelte

@@ -10,7 +10,7 @@
 
 <button
 	class={cn(
-		"relative z-20 inline-flex h-6 w-6 items-center justify-center rounded-md border bg-background text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+		"relative z-20 inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background",
 		className
 	)}
 	on:click={copyCode}
@@ -19,8 +19,8 @@
 	data-copy-code
 >
 	{#if copied}
-		<Check class="h-3 w-3" />
+		<Check class="h-5 w-5" />
 	{:else}
-		<CopySimple class="h-3 w-3" />
+		<CopySimple class="h-5 w-5" />
 	{/if}
 </button>

src/components/demos/combobox-demo.svelte

@@ -23,8 +23,8 @@
 		<OrangeSlice class="absolute start-3 top-1/2 size-6 -translate-y-1/2 text-muted-foreground" />
 		<Combobox.Input
 			class="inline-flex h-input w-[296px] truncate rounded-9px border border-border-input bg-background px-11 text-sm transition-colors placeholder:text-foreground-alt/50 focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
-			placeholder="Select a fruit"
-			aria-label="Select a fruit"
+			placeholder="Search a fruit"
+			aria-label="Search a fruit"
 		/>
 		<CaretUpDown class="absolute end-3 top-1/2 size-6 -translate-y-1/2 text-muted-foreground" />
 	</div>

src/components/demos/progress-demo.svelte

@@ -15,7 +15,7 @@
 	class="relative h-[15px] w-[60%] overflow-hidden rounded-full bg-dark-10 shadow-mini-inset"
 >
 	<div
-		class="h-full w-full flex-1 rounded-full bg-foreground shadow-mini-inset transition-all duration-300 ease-linear"
+		class="h-full w-full flex-1 rounded-full bg-foreground shadow-mini-inset transition-all duration-1000 ease-in-out"
 		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (100 ?? 1)}%)`}
 	/>
 </Progress.Root>

src/components/demos/toggle-group-demo.svelte

@@ -8,7 +8,7 @@
 <ToggleGroup.Root
 	bind:value
 	type="multiple"
-	class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-border bg-background px-[5px] py-1 shadow-mini"
+	class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-border bg-background px-[4px] py-1 shadow-mini"
 >
 	<ToggleGroup.Item
 		aria-label="toggle bold"

src/components/demos/toolbar-demo.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <Toolbar.Root
-	class="flex h-12 min-w-max items-center justify-center rounded-10px border border-border bg-background p-1 shadow-mini"
+	class="flex h-12 min-w-max items-center justify-center rounded-10px border border-border bg-background px-[4px] py-1 shadow-mini"
 >
 	<Toolbar.Group bind:value={text} type="multiple" class="flex items-center gap-x-0.5">
 		<Toolbar.GroupItem

src/components/markdown/pre.svelte

@@ -9,7 +9,10 @@
 </script>
 
 <pre
-	class={cn("mb-4 mt-6 overflow-x-auto rounded-card border-2 border-muted py-4", className)}
+	class={cn(
+		"relative mb-4 mt-6 overflow-x-auto rounded-card border-2 border-muted py-8",
+		className
+	)}
 	use:setCodeString
 	{...$$restProps}>
 	<slot />

src/styles/app.postcss

@@ -52,7 +52,7 @@
 		--dark-40: 0 0% 96% / 0.4;
 		--dark-10: 0 0% 96% / 0.1;
 		--dark-04: 0 0% 96% / 0.04;
-		--accent: 204 80% 16%;
+		--accent: 204 90 90%;
 		--accent-foreground: 204 94% 94%;
 		--destructive: 350 89% 60%;
 

src/styles/markdown.postcss

@@ -25,7 +25,7 @@
 	@apply relative;
 
 	& pre {
-		@apply mb-4 mt-6 w-full overflow-x-auto rounded-card px-2.5 py-4 text-sm font-semibold;
+		@apply mb-4 mt-6 w-full overflow-x-auto rounded-card px-2.5 py-5 text-sm font-semibold;
 	}
 
 	& code {
@@ -74,7 +74,7 @@
 }
 
 [data-rehype-pretty-code-title] {
-	@apply mt-2 px-4 pt-6 text-sm font-medium;
+	@apply mt-4 rounded-t-xl bg-muted px-4 py-4 text-sm font-medium text-foreground/70;
 }
 
 [data-rehype-pretty-code-title] + pre {