[Docs Site] Adopt new sidebar and breadcrumb styling

astro.config.ts

@@ -37,7 +37,21 @@ async function autogenSections() {
 	});
 }
 
+async function autogenStyles() {
+	const styles = (
+		await readdir("./src/styles/", {
+			withFileTypes: true,
+			recursive: true,
+		})
+	)
+		.filter((x) => x.isFile())
+		.map((x) => x.parentPath + x.name);
+
+	return styles;
+}
+
 const sidebar = await autogenSections();
+const customCss = await autogenStyles();
 
 const runLinkCheck = process.env.RUN_LINK_CHECK || false;
 
@@ -97,18 +111,7 @@ export default defineConfig({
 				TableOfContents: "./src/components/overrides/TableOfContents.astro",
 			},
 			sidebar,
-			customCss: [
-				"./src/asides.css",
-				"./src/badges.css",
-				"./src/code.css",
-				"./src/footnotes.css",
-				"./src/headings.css",
-				"./src/input.css",
-				"./src/mermaid.css",
-				"./src/table.css",
-				"./src/tailwind.css",
-				"./src/title.css",
-			],
+			customCss,
 			pagination: false,
 			plugins: [
 				...(runLinkCheck

src/components/overrides/Sidebar.astro

@@ -8,15 +8,9 @@ import { lookupProductTitle } from "~/util/sidebar";
 const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 ---
 
-<a
-	href={"/" + product + "/"}
-	class="flex items-center decoration-[color:var(--orange-accent-200)] hover:opacity-80"
->
-	<AstroIcon
-		name={product}
-		class="mr-2 text-4xl text-[color:var(--orange-accent-200)]"
-	/>
-	<span class="text-black">
+<a href={"/" + product + "/"} class="flex items-center gap-2 px-1 no-underline">
+	<AstroIcon name={product} size="32px" class="text-cl1-brand-orange" />
+	<span class="text-xl text-black">
 		<strong>
 			{lookupProductTitle(product, module)}
 		</strong>

src/styles/breadcrumbs.css

@@ -0,0 +1,27 @@
+.c-breadcrumbs {
+	--spacing-vertical-separator-breadcrumbs: 0.625rem;
+
+	padding: 0.5rem 0;
+
+	.c-breadcrumbs__link {
+		font-size: 0.75rem;
+		line-height: 1.25rem;
+		font-weight: 600;
+	}
+
+	.c-breadcrumbs__separator {
+		color: theme("colors.cl1.brand.orange");
+	}
+
+	.c-breadcrumbs__truncated-button {
+		color: theme("colors.cl1.brand.orange");
+	}
+}
+
+:root[data-theme="dark"] {
+	--color-link-breadcrumbs: theme("colors.cl1.gray.7");
+}
+
+:root[data-theme="light"] {
+	--color-link-breadcrumbs: theme("colors.cl1.gray.4");
+}

src/styles/sidebar.css

@@ -0,0 +1,88 @@
+.sidebar-content {
+	gap: 0.5rem;
+	padding: 1rem 1.5rem;
+
+	.large {
+		font-weight: unset;
+		font-size: unset;
+		color: unset;
+	}
+
+	[aria-current="page"] {
+		background-color: transparent !important;
+		font-weight: 500 !important;
+		color: var(--sl-color-sidebar-active) !important;
+	}
+
+	.top-level > li {
+		& + li {
+			margin-top: 0.5rem;
+		}
+
+		& > a,
+		& > details > summary {
+			font-size: 1rem;
+			font-weight: normal;
+
+			background-color: transparent;
+			color: var(--sl-color-white);
+
+			padding: 0.25rem 0.5rem;
+
+			&:hover {
+				background-color: var(--sl-color-sidebar-hover);
+				border-radius: 0.25rem;
+			}
+		}
+
+		& > details > ul {
+			--sl-sidebar-item-padding-inline: 0.5rem;
+		}
+
+		ul {
+			--sl-sidebar-item-padding-inline: 0.75rem;
+
+			margin-inline-start: var(--sl-sidebar-item-padding-inline);
+			border-inline-start: 1px solid var(--sl-color-hairline-light);
+
+			margin-top: 0.5rem;
+
+			li {
+				margin-inline-start: unset;
+				border-inline-start: unset;
+				padding-inline-start: unset;
+
+				& + li {
+					margin-top: 0.375rem;
+				}
+			}
+
+			a,
+			summary {
+				--sl-sidebar-item-padding-inline: 0.75rem;
+
+				padding-top: 0.25rem;
+				padding-bottom: 0.25rem;
+
+				font-size: 0.875rem;
+				color: var(--sl-color-text);
+
+				&:hover {
+					background-color: var(--sl-color-sidebar-hover);
+					border-radius: 0;
+				}
+			}
+		}
+	}
+}
+
+:root[data-theme="dark"] {
+	--sl-color-bg-sidebar: theme("colors.cl1.gray.0");
+	--sl-color-sidebar-active: theme("colors.cl1.blue.7");
+	--sl-color-sidebar-hover: theme("colors.cl1.gray.2");
+}
+
+:root[data-theme="light"] {
+	--sl-color-sidebar-active: theme("colors.cl1.blue.4");
+	--sl-color-sidebar-hover: theme("colors.cl1.gray.9");
+}