wip

Author: coltondotio

packages/fern-docs/components/src/sidebar/nodes/SidebarRootNode.tsx

@@ -1,5 +1,5 @@
-import { createFileResolver } from "@fern-api/docs-server/file-resolver";
 import type { DocsLoader } from "@fern-api/docs-server/docs-loader";
+import { createFileResolver } from "@fern-api/docs-server/file-resolver";
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import Image from "next/image";
 

packages/fern-docs/components/src/sidebar/nodes/SidebarVariantedNode.tsx

@@ -82,7 +82,9 @@ export function SidebarVariantedNode({ node, depth, renderOptions }: SidebarVari
                                 {node.children.map((variant) => {
                                     const href = slugToHref(variant.pointsTo ?? variant.slug);
                                     // Process icon properly by passing the full variant object
-                                    const icon = variant.icon ? processIcon(variant, undefined, forceClientRender) : undefined;
+                                    const icon = variant.icon
+                                        ? processIcon(variant, undefined, forceClientRender)
+                                        : undefined;
                                     // Get pre-resolved image from renderOptions (resolved on server)
                                     const image = renderOptions.variantImages?.[variant.variantId];
 
@@ -102,8 +104,8 @@ export function SidebarVariantedNode({ node, depth, renderOptions }: SidebarVari
                                                     {(image || icon) && (
                                                         <div
                                                             className={cn(
-                                                                "m-0.5 flex h-[36px] w-[36px] shrink-0 items-center justify-center overflow-hidden rounded-2 p-0.5",
-                                                                icon && !image && "border border-(color:--grayscale-a5)"
+                                                                "m-0.5 flex h-[36px] w-[36px] shrink-0 items-center justify-center overflow-hidden rounded-2 p-0.5 text-current",
+                                                                icon && !image && "border border-current/30"
                                                             )}
                                                         >
                                                             {image || icon}
@@ -112,11 +114,11 @@ export function SidebarVariantedNode({ node, depth, renderOptions }: SidebarVari
 
                                                     {/* Title and Subtitle */}
                                                     <div className="flex flex-1 flex-col gap-1">
-                                                        <p className="font-bold leading-tight lg:text-sm">
+                                                        <p className="font-bold leading-tight text-current lg:text-sm">
                                                             {variant.title}
                                                         </p>
                                                         {variant.subtitle && (
-                                                            <p className="text-xs leading-tight opacity-60">
+                                                            <p className="text-xs leading-tight text-current opacity-60">
                                                                 {variant.subtitle}
                                                             </p>
                                                         )}