update styling for toc

Author: LadyBluenotes

app.config.ts

@@ -41,7 +41,9 @@ function docsData() {
 
 const theme = defineTheme({
 	componentsPath: import.meta.resolve("./src/solidbase-theme"),
+	extends: defaultTheme,
 });
+
 export default defineConfig(
 	createWithSolidBase(theme)(
 		{
@@ -137,6 +139,7 @@ export default defineConfig(
 
 import { readFile } from "node:fs/promises";
 import { codeToHtml } from "shiki";
+import defaultTheme from "@kobalte/solidbase/default-theme";
 
 function heroCodeSnippet() {
 	const virtualModuleId = "solid:hero-code-snippet";

package.json

@@ -41,6 +41,7 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.35.0",
+		"@iconify-json/ri": "^1.2.6",
 		"@kobalte/tailwindcss": "^0.9.0",
 		"@orama/crawly": "^0.0.6",
 		"@tailwindcss/typography": "^0.5.16",

pnpm-lock.yaml

@@ -65,7 +65,7 @@ export const TableOfContents = () => {
 							href="#_top"
 							classList={{
 								"dark:text-slate-300": currentSection() !== undefined,
-								"text-blue-800 dark:text-blue-300 font-bold hover:text-slate-700 dark:hover:text-slate-200":
+								"text-blue-800 dark:text-blue-300 hover:text-slate-700 dark:hover:text-slate-200 hover:underline underline-offset-2":
 									currentSection() === undefined,
 							}}
 							class="no-underline hover:text-slate-800"
@@ -81,32 +81,32 @@ export const TableOfContents = () => {
 								<a
 									href={section().href}
 									classList={{
-										"dark:text-slate-300": currentSection() !== section().href,
-										"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200 font-bold":
+										"dark:text-slate-400": currentSection() !== section().href,
+										"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200 ":
 											currentSection() === section().href,
 									}}
-									class="no-underline hover:text-slate-700 dark:hover:text-blue-300"
+									class="no-underline underline-offset-2 hover:text-slate-700 hover:underline dark:hover:text-blue-300"
 								>
 									{section().title}
 								</a>
 							</span>
 							<Show when={section().children.length !== 0}>
 								<ol
 									role="list"
-									class="list-none space-y-2 pl-2.5 font-bold text-slate-500 hover:text-slate-700 active:font-bold active:text-blue-600 dark:text-slate-300 dark:hover:text-blue-200"
+									class="list-none space-y-2 pl-2.5 text-slate-500 hover:text-slate-700 active:text-blue-600 dark:text-slate-300 dark:hover:text-blue-200"
 								>
 									<Index each={section().children}>
 										{(subSection) => (
 											<li>
 												<a
 													href={subSection().href}
 													classList={{
-														"dark:text-slate-300":
+														"dark:text-slate-400":
 															currentSection() !== subSection().href,
-														"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200 font-bold":
+														"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200":
 															currentSection() === subSection().href,
 													}}
-													class="no-underline hover:text-blue-700 dark:hover:text-blue-300"
+													class="no-underline underline-offset-2 hover:text-blue-700 hover:underline dark:hover:text-blue-300"
 												>
 													{subSection().title}
 												</a>