Docs restyling (#348)

Author: GabrielaReyna

packages/astro-theme/components/BlogPostCard.astro

@@ -24,7 +24,9 @@ const authors = await resolveAuthors(post.data.authors);
 const productName = typeof product === "undefined" ? "Labs" : product.name;
 //if product is cheerpj, add prefix /docs on post url
 const blog_url =
-	productName === "CheerpJ" ? "https://labs.leaningtech.com/blog/" : "/blog/";
+	productName === "CheerpJ" || productName === "BrowserPod"
+		? "https://labs.leaningtech.com/blog/"
+		: "/blog/";
 ---
 
 <a
@@ -38,16 +40,14 @@ const blog_url =
 				width={size === "wide" ? 600 : 390}
 				height={256}
 				alt=""
-				class="rounded-xl mb-4 bg-stone-100 object-cover w-full h-64 self-center"
+				class="rounded-xl mb-4 bg-bg-100 object-cover w-full h-64 self-center"
 			/>
 		)
 	}
 	<h3
 		class:list={{
 			"font-bold text-balance text-white grow": true,
-			"group-hover:text-cheerp grow": productName === "Cheerp",
-			"group-hover:text-[#6386a5] grow": productName === "CheerpX",
-			"group-hover:text-primary-400 grow": productName === "Labs",
+			"group-hover:text-primary-400 grow": true,
 			"text-2xl leading-7": size === "wide",
 			"text-xl leading-6": size === "narrow",
 		}}
@@ -56,13 +56,13 @@ const blog_url =
 	</h3>
 	{
 		showMetadata && (
-			<div class="mt-4 flex justify-between items-center gap-8 text-stone-400 text-base whitespace-nowrap">
+			<div class="mt-4 flex justify-between items-center gap-8 text-bg-400 text-base whitespace-nowrap">
 				<div class="flex items-center gap-2 font-semibold overflow-hidden">
 					<div class="flex-none space-x-[-1rem]">
 						{authors.map((author) =>
 							author.avatar ? (
 								<img
-									class="inline-block w-8 h-8 rounded-full shadow border-2 border-stone-900"
+									class="inline-block w-8 h-8 rounded-full shadow border-2 border-bg-900"
 									src={author.avatar.src}
 									alt=""
 									loading="lazy"

packages/astro-theme/components/Breadcrumbs.astro

@@ -25,7 +25,7 @@ const crumbs = path
 	});
 ---
 
-<nav aria-label="Breadcrumb" class="leading-6 text-stone-400 text-sm">
+<nav aria-label="Breadcrumb" class="leading-6 text-bg-400 text-sm">
 	<ol>
 		{
 			crumbs.map(({ title, url, isLast }) => (
@@ -37,7 +37,7 @@ const crumbs = path
 						{title}
 					</a>
 					{!isLast && (
-						<Icon name="jam:chevron-right" class="h-5 mx-2 text-stone-700" />
+						<Icon name="jam:chevron-right" class="h-5 mx-2 text-bg-700" />
 					)}
 				</li>
 			))

packages/astro-theme/components/DirectoryListing.astro

@@ -22,12 +22,12 @@ function getEntryDescription(entry: NavEntry): string | undefined {
 				<li>
 					<a
 						href={entry.href}
-						class="block group rounded-md border bg-stone-950 px-4 py-3 shadow border-stone-800 hover:border-stone-700 transition-colors"
+						class="block group rounded-md border bg-bg-950 px-4 py-3 shadow border-bg-800 hover:border-bg-700 transition-colors"
 					>
-						<div class="text-lg font-semibold text-stone-300 group-hover:text-stone-50 transition-colors">
+						<div class="text-lg font-semibold text-bg-300 group-hover:text-bg-50 transition-colors">
 							{entry.title}
 						</div>
-						<div class="text-ellipsis whitespace-nowrap overflow-hidden text-stone-400 text-sm">
+						<div class="text-ellipsis whitespace-nowrap overflow-hidden text-bg-400 text-sm">
 							{getEntryDescription(entry) ?? ""}
 						</div>
 					</a>

packages/astro-theme/components/DocsPagination.astro

@@ -57,7 +57,7 @@ const { next, prev } = await getNextPrev();
 // TODO: `"href" in X` no longer needed once NavDirectorys have href (i.e. dir listing / index pages are a thing)
 ---
 
-<div class="flex justify-between font-medium text-stone-400 text-base gap-8">
+<div class="flex justify-between font-medium text-bg-400 text-base gap-8">
 	{
 		prev && "href" in prev ? (
 			<a href={prev.href} class="flex items-center gap-2 hover:text-white p-2">

packages/astro-theme/components/DocsSidebar.astro

@@ -19,7 +19,7 @@ const hasMultipleLocales = !!Astro.currentLocale;
 
 <aside
 	is="docs-sidebar"
-	class="bg-stone-800 lg:bg-stone-900 fixed lg:sticky top-0 h-[100dvh] lg:top-[65px] z-10 p-8 w-full md:w-80 lg:h-[calc(100vh-4rem)] overflow-y-auto lg:text-sm"
+	class="bg-bg-800 lg:bg-bg-900 fixed lg:sticky top-0 h-[100dvh] lg:top-[65px] z-10 p-8 w-full md:w-80 lg:h-[calc(100vh-4rem)] overflow-y-auto lg:text-sm"
 >
 	<button data-sidebar-close class="absolute top-4 right-4 lg:hidden">
 		<span class="sr-only">Close navigation</span>

packages/astro-theme/components/DocsSidebarNavEntry.astro

@@ -27,11 +27,11 @@ const title = await getLocalisedEntryTitle(entry);
 	entry.type === "file" && (!entry.isIndex || depth === 0) && (
 		<li
 			class:list={[
-				"group py-1 text-stone-400 hover:border-stone-400 hover:text-white",
+				"group py-1 text-bg-400 hover:border-bg-400 hover:text-white",
 				{
 					"font-semibold !text-primary-500 !border-primary-600":
 						entry.href === pathname,
-					"px-4 border-l border-stone-800": depth > 0,
+					"px-4 border-l border-bg-800": depth > 0,
 					"bg-primary-600 bg-opacity-5": depth > 0 && entry.href === pathname,
 				},
 			]}
@@ -47,11 +47,11 @@ const title = await getLocalisedEntryTitle(entry);
 	entry.type === "directory" && (
 		<li
 			class:list={[
-				"py-4 first:pt-2",
-				{ "pl-4 border-l border-stone-800": depth > 0 },
+				"py-2 first:pt-2",
+				{ "pl-4 border-l border-bg-800": depth > 0 },
 			]}
 		>
-			<h5 class="mb-1 font-semibold text-stone-300 hover:text-white">
+			<h5 class="mb-1 text-bg-300 hover:text-white font-semibold tracking-wide">
 				<a
 					href={entry.href}
 					class:list={[

packages/astro-theme/components/Footer.astro

@@ -98,7 +98,7 @@ const sections: Section[] = [
 
 {Astro.props.includeGrow === false ? null : <div class="grow" />}
 
-<footer class="p-14 bg-black border-t border-stone-700">
+<footer class="p-14 bg-black border-t border-bg-700">
 	<div class="w-full max-w-screen-2xl mx-auto">
 		<div
 			class="grid sm:grid-cols-1 lg:grid-cols-[auto_1fr_1fr] gap-14 place-content-between text-lg"
@@ -138,14 +138,14 @@ const sections: Section[] = [
 						<section class="space-y-3">
 							<h3 class="text-xl font-semibold">{section.name}</h3>
 							{section.description && (
-								<p class="text-stone-400">{section.description}</p>
+								<p class="text-bg-400">{section.description}</p>
 							)}
 							<ul class="space-y-3">
 								{section.links.map((link) => (
 									<li>
 										<a
 											href={link.href}
-											class="text-stone-400 hover:text-primary-500"
+											class="text-bg-400 hover:text-primary-500"
 										>
 											{link.text}
 										</a>
@@ -158,7 +158,7 @@ const sections: Section[] = [
 			</div>
 		</div>
 		<div
-			class="grid sm:grid-cols-1 md:grid-cols-4 border-t border-stone-800 mt-14 pt-6 gap-6"
+			class="grid sm:grid-cols-1 md:grid-cols-4 border-t border-bg-800 mt-14 pt-6 gap-6"
 		>
 			<div class="flex items-left gap-3">
 				<a href={DISCORD_URL}>
@@ -177,7 +177,7 @@ const sections: Section[] = [
 					<Icon name="mdi:linkedin" class="w-6 h-6 hover:text-primary-500" />
 				</a>
 			</div>
-			<div class="text-stone-400 text-xs md:text-right md:col-span-3">
+			<div class="text-bg-400 text-xs md:text-right md:col-span-3">
 				<p class="align-baseline">
 					© {today.getFullYear()} Leaning Technologies . All rights reserved.
 				</p>

packages/astro-theme/components/LinkButton.astro

@@ -42,7 +42,7 @@ const {
 				type === "primary2",
 			"border-white bg-white text-black hover:bg-[#8e88ff] hover:text-white hover:border-[#8e88ff]":
 				type === "primary-cheerp",
-			"border-stone-600 text-primary-400 hover:border-primary-300":
+			"border-bg-600 text-primary-400 hover:border-primary-300":
 				type === "secondary",
 			"border-white text-white hover:border-[#8e88ff] hover:text-[#8e88ff]":
 				type === "secondary-cheerp",

packages/astro-theme/components/ShowcaseList.astro

@@ -28,7 +28,7 @@ if (typeof props.limit == "number") {
 				<li>
 					<a
 						href={project.data.url}
-						class="block h-full p-2 border border-stone-700 text-stone-500 rounded-lg shadow-lg hover:translate-y-[-2px] hover:border-stone-600 hover:text-stone-400 transition-all"
+						class="block h-full p-2 border border-bg-700 text-bg-500 rounded-lg shadow-lg hover:translate-y-[-2px] hover:border-bg-600 hover:text-bg-400 transition-all"
 					>
 						{project.data.heroImage && (
 							<Image
@@ -40,7 +40,7 @@ if (typeof props.limit == "number") {
 								loading="lazy"
 							/>
 						)}
-						<h5 class="font-semibold p-3 pb-1 text-stone-100">
+						<h5 class="font-semibold p-3 pb-1 text-bg-100">
 							{project.data.title}
 						</h5>
 						<p class="p-3 pt-0 leading-5">{project.data.description}</p>

packages/astro-theme/components/TableOfContents.astro

@@ -38,7 +38,8 @@ function buildToc(headings: BasicHeading[]) {
 }
 ---
 
-<nav aria-label="On this page">
+<nav aria-label="On this page" class="text-sm">
+	<p class="font-extrabold text-base">On this page</p>
 	<ol>
 		{toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
 	</ol>