Color change on ToC nav items

Author: webstackdev

_TODO.md

@@ -324,10 +324,4 @@ We can add a path like `/articles/pdf` or `/articles/deep-dive` for the long-for
 
 - Move the "What I Deliver" box from the Hero into the Backstage image. Move the Backstage image / video to the hero.
 
-## Instructions for revamps
-
-All changes should look good on both light and dark theme, use our tailwind theme colors, and look good on mobile.
-
-"Condensed" or "Intro"
-
-Cursor on hovering a link
+- Focus-visible / active handling on ToC nav items

src/components/Toc/index.astro

@@ -77,7 +77,7 @@ const tocTree = buildTocTree(items)
           >
             {/* Desktop heading — hidden on mobile where the drawer header shows instead */}
             <div class="hidden lg:flex items-center justify-between gap-3">
-              <h2 id="toc-heading" class="text-base font-semibold">
+              <h2 id="toc-heading" class="text-content text-base font-semibold">
                 Table of Contents
               </h2>
               <span class="text-xs font-medium uppercase tracking-wide text-content-active">
@@ -95,7 +95,7 @@ const tocTree = buildTocTree(items)
                           href={`#${node.slug}`}
                           data-toc-link
                           data-toc-slug={node.slug}
-                          class="block mb-2 text-sm sm:text-base text-content-offset transition-colors hover:text-content-active data-[current=true]:text-content no-underline hover:underline"
+                          class="block mb-2 text-sm sm:text-base text-content transition-colors hover:text-content-active data-[current=true]:text-content no-underline hover:underline"
                         >
                           {node.text}
                         </a>