From f25dfaa81ba8014b892500946bc9c7075a5c8ffd Mon Sep 17 00:00:00 2001
From: Nicolas Ettlin <nicolas.ettlin@me.com>
Date: Sun, 2 Aug 2026 14:06:54 -0700
Subject: [PATCH] Fix text contrast in menu elements

---
 src/components/MegaMenuItem.tsx |  4 +++-
 src/components/Navbar.tsx       | 14 ++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/MegaMenuItem.tsx b/src/components/MegaMenuItem.tsx
index 3fdc4cb16..9579062eb 100644
--- a/src/components/MegaMenuItem.tsx
+++ b/src/components/MegaMenuItem.tsx
@@ -82,7 +82,9 @@ export function MegaMenuItem({
           {/* Rest = neutral tint (Figma neutral/tint/200); brightens to
               text-primary on hover. Plain string (not twMerge) so the DS size
               utility and the color utilities coexist. */}
-          <span className="font-ds-display text-ds-heading-5 whitespace-nowrap text-text-menu-title transition-colors group-hover/mmi:text-text-primary group-active/mmi:text-text-primary">
+          <span
+            className={`font-ds-display text-ds-heading-5 whitespace-nowrap ${variant === 'mobile' ? 'text-ds-neutral-tint-200' : 'text-text-menu-title'} transition-colors group-hover/mmi:text-text-primary group-active/mmi:text-text-primary`}
+          >
             {title}
           </span>
           {badge ? (
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 77312b85e..b291cec4e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1005,7 +1005,9 @@ function MegaMenuContent({
                 variant === 'mobile' && sectionIndex > 0 && 'pt-3',
               )}
             >
-              <div className="mb-2 px-2 font-ds-mono text-ds-mono-sm uppercase text-ds-neutral-100">
+              <div
+                className={`mb-2 px-2 font-ds-mono text-ds-mono-sm uppercase ${variant === 'mobile' ? 'text-ds-neutral-100' : 'text-ds-neutral-300 dark:text-ds-neutral-100'}`}
+              >
                 {section.label}
               </div>
               <div
@@ -1289,7 +1291,9 @@ function BlogMenuContent({
       )}
     >
       <section>
-        <div className="mb-3 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-ds-neutral-100">
+        <div
+          className={`mb-3 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider ${variant === 'mobile' ? 'text-ds-neutral-100' : 'text-ds-neutral-300 dark:text-ds-neutral-100'}`}
+        >
           Blog &amp; Release Notes
         </div>
         <div
@@ -1327,7 +1331,9 @@ function BlogMenuContent({
 
       {aboutSection && aboutSection.items.length > 0 ? (
         <section className="border-t border-border-subtle pt-4">
-          <div className="mb-2 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider text-ds-neutral-100">
+          <div
+            className={`mb-2 px-1 font-ds-mono text-ds-mono-xs uppercase tracking-wider ${variant === 'mobile' ? 'text-ds-neutral-100' : 'text-ds-neutral-300 dark:text-ds-neutral-100'}`}
+          >
             {aboutSection.label}
           </div>
           <div
@@ -1563,7 +1569,7 @@ function MenuRail({
         <div className="flex flex-col items-start gap-2.5">
           {/* "Work with" + the TanStack lockup read together as "Work with
               TanStack" (Figma: terracotta/200 label above the landscape mark). */}
-          <div className="font-ds-display text-base font-normal text-ds-terracotta-200">
+          <div className="font-ds-display text-base font-normal text-ds-terracotta-400 dark:text-ds-terracotta-200">
             {rail.title}
           </div>
           <img