[Docs Site] Adopt new sidebar and breadcrumb styling (#20375)

Author: KianNH

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/asides.css renamed to src/styles/asides.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");
+}