From 84e51370573a1f1c77357375915321121db484cb Mon Sep 17 00:00:00 2001
From: RezixDev <mateuszrysownik2@gmail.com>
Date: Thu, 17 Jul 2025 00:18:52 +0200
Subject: [PATCH 1/3] feat: add aria-labels for social media links inside
 smallMenu

---
 src/routes/_libraries/route.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/routes/_libraries/route.tsx b/src/routes/_libraries/route.tsx
index 923b88a86..b438a0aaa 100644
--- a/src/routes/_libraries/route.tsx
+++ b/src/routes/_libraries/route.tsx
@@ -252,18 +252,21 @@ function LibrariesLayout() {
         <a
           href="https://x.com/tan_stack"
           className="opacity-70 hover:opacity-100"
+          aria-label="Follow TanStack on X (Twitter)"
         >
           <TbBrandTwitter className="text-xl" />
         </a>
         <a
           href="https://bsky.app/profile/tanstack.com"
           className="opacity-70 hover:opacity-100"
+          aria-label="Follow TanStack on Bluesky"
         >
           <TbBrandBluesky className="text-xl" />
         </a>
         <a
           href="https://instagram.com/tan_stack"
           className="opacity-70 hover:opacity-100"
+          aria-label="Follow TanStack on Instagram"
         >
           <FaInstagram className="text-xl" />
         </a>

From 0d271f1402d219e6298a2bc8dda2e11b69e5c975 Mon Sep 17 00:00:00 2001
From: RezixDev <mateuszrysownik2@gmail.com>
Date: Thu, 17 Jul 2025 09:17:00 +0200
Subject: [PATCH 2/3] style: update text opacity and color for better
 visibility across components (A11y)

---
 src/components/Footer.tsx          |  2 +-
 src/components/LandingPageGad.tsx  |  4 ++--
 src/components/OpenSourceStats.tsx | 10 +++++-----
 src/routes/_libraries/index.tsx    | 10 +++++-----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index dd4835582..4ace15cad 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -46,7 +46,7 @@ export function Footer() {
           </div>
         ))}
       </div>
-      <div className={`text-center opacity-20`}>
+      <div className={`text-center opacity-60`}>
         &copy; {new Date().getFullYear()} TanStack LLC
       </div>
     </div>
diff --git a/src/components/LandingPageGad.tsx b/src/components/LandingPageGad.tsx
index 4e5f991b0..4bcb60966 100644
--- a/src/components/LandingPageGad.tsx
+++ b/src/components/LandingPageGad.tsx
@@ -9,7 +9,7 @@ export default function LandingPageGad() {
           <GamFooter />
         </div>
         <div
-          className="text-xs bg-gray-500 bg-opacity-10 py-2 px-4 rounded text-gray-500
+          className="text-xs bg-gray-500 bg-opacity-10 py-2 px-4 rounded text-gray-600 dark:text-gray-300
                 dark:bg-opacity-20 self-center text-center w-[500px] max-w-full space-y-2"
         >
           <div>
@@ -25,7 +25,7 @@ export default function LandingPageGad() {
             used by millions daily. What did you expect?
           </div>
           <div>
-            <Link to="/ethos" className="text-gray-500 font-bold underline">
+            <Link to="/ethos" className="text-gray-600 dark:text-gray-200 font-bold underline">
               Check out our ethos
             </Link>{' '}
             to learn more about how we plan on sticking around (and staying
diff --git a/src/components/OpenSourceStats.tsx b/src/components/OpenSourceStats.tsx
index 575dc0a69..cfa047cfc 100644
--- a/src/components/OpenSourceStats.tsx
+++ b/src/components/OpenSourceStats.tsx
@@ -82,7 +82,7 @@ export default function OssStats() {
             <div className="text-2xl font-bold opacity-80 relative group-hover:text-emerald-500 transition-colors duration-200">
               <NpmDownloadCounter npmData={npm} />
             </div>
-            <div className="text-sm opacity-50 font-medium italic group-hover:text-emerald-500 transition-colors duration-200">
+            <div className="text-sm opacity-60 font-medium italic group-hover:text-emerald-500 transition-colors duration-200">
               NPM Downloads
             </div>
           </div>
@@ -98,7 +98,7 @@ export default function OssStats() {
             <div className="text-2xl font-bold opacity-80 leading-none group-hover:text-yellow-500 transition-colors duration-200">
               <NumberFlow value={github?.starCount} />
             </div>
-            <div className="text-sm opacity-50 font-medium italic -mt-1 group-hover:text-yellow-500 transition-colors duration-200">
+            <div className="text-sm opacity-60 font-medium italic -mt-1 group-hover:text-yellow-500 transition-colors duration-200">
               Stars on Github
             </div>
           </div>
@@ -109,7 +109,7 @@ export default function OssStats() {
             <div className="text-2xl font-bold opacity-80">
               <NumberFlow value={github?.contributorCount} />
             </div>
-            <div className="text-sm opacity-50 font-medium italic -mt-1">
+            <div className="text-sm opacity-60 font-medium italic -mt-1">
               Contributors on GitHub
             </div>
           </div>
@@ -120,7 +120,7 @@ export default function OssStats() {
             <div className="text-2xl font-bold opacity-80 relative">
               <NumberFlow value={github?.dependentCount} />
             </div>
-            <div className="text-sm opacity-50 font-medium italic -mt-1">
+            <div className="text-sm opacity-60 font-medium italic -mt-1">
               Dependents on GitHub
             </div>
           </div>
@@ -133,7 +133,7 @@ export default function OssStats() {
         >
           <div className="h-2 w-2 animate-pulse rounded-full bg-green-500"></div>
           <div className="flex items-center gap-1">
-            <span className="text-[.75rem] opacity-30 relative -top-px">
+            <span className="text-[.75rem] opacity-60 relative -top-px">
               Powered by
             </span>
             <img
diff --git a/src/routes/_libraries/index.tsx b/src/routes/_libraries/index.tsx
index 42e1e79cd..28d3c9a3d 100644
--- a/src/routes/_libraries/index.tsx
+++ b/src/routes/_libraries/index.tsx
@@ -196,7 +196,7 @@ function Index() {
                                     }}
                                   >
                                     <span className="bg-current rounded-lg leading-none flex items-center">
-                                      <span className="font-black text-white dark:text-black text-xs leading-none p-1.5 px-2 uppercase">
+                                      <span className="text-white dark:text-black text-xs leading-none p-1.5 px-2 uppercase">
                                         TanStack
                                       </span>
                                     </span>
@@ -330,12 +330,12 @@ function Index() {
                   className={`col-span-2
                     md:col-span-5`}
                 >
-                  <div className={`text-2xl font-bold text-green-500`}>
+                  <div className={`text-2xl font-bold text-green-600`}>
                     {course.name}
                   </div>
                   <div className={`text-sm mt-2`}>{course.description}</div>
                   <div
-                    className={`inline-block mt-4 px-4 py-2 bg-green-500 text-white rounded shadow uppercase font-black text-sm`}
+                    className={`inline-block mt-4 px-4 py-2 bg-green-700 text-white rounded shadow uppercase font-black text-sm`}
                   >
                     Check it out →
                   </div>
@@ -367,13 +367,13 @@ function Index() {
             <div>
               <a
                 href="https://github.com/sponsors/tannerlinsley"
-                className={`inline-block p-4 bg-green-500 rounded text-white uppercase font-black`}
+                className={`inline-block p-4 bg-green-700 rounded text-white uppercase font-black`}
               >
                 Become a Sponsor!
               </a>
             </div>
             <div className={`h-4`} />
-            <p className={`italic mx-auto max-w-screen-sm text-gray-500`}>
+            <p className={`italic mx-auto max-w-screen-sm text-gray-500 dark:text-gray-300`}>
               Sponsors get special perks like{' '}
               <strong>
                 private discord channels, priority issue requests, direct

From 33892354d846b8c535b07c94a03033cc2543c956 Mon Sep 17 00:00:00 2001
From: RezixDev <mateuszrysownik2@gmail.com>
Date: Thu, 17 Jul 2025 18:41:31 +0200
Subject: [PATCH 3/3] fix: adjust formatting (lint error)

---
 src/components/LandingPageGad.tsx | 5 ++++-
 src/routes/_libraries/index.tsx   | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/LandingPageGad.tsx b/src/components/LandingPageGad.tsx
index 4bcb60966..655e2365f 100644
--- a/src/components/LandingPageGad.tsx
+++ b/src/components/LandingPageGad.tsx
@@ -25,7 +25,10 @@ export default function LandingPageGad() {
             used by millions daily. What did you expect?
           </div>
           <div>
-            <Link to="/ethos" className="text-gray-600 dark:text-gray-200 font-bold underline">
+            <Link
+              to="/ethos"
+              className="text-gray-600 dark:text-gray-200 font-bold underline"
+            >
               Check out our ethos
             </Link>{' '}
             to learn more about how we plan on sticking around (and staying
diff --git a/src/routes/_libraries/index.tsx b/src/routes/_libraries/index.tsx
index 28d3c9a3d..fbcf12881 100644
--- a/src/routes/_libraries/index.tsx
+++ b/src/routes/_libraries/index.tsx
@@ -373,7 +373,9 @@ function Index() {
               </a>
             </div>
             <div className={`h-4`} />
-            <p className={`italic mx-auto max-w-screen-sm text-gray-500 dark:text-gray-300`}>
+            <p
+              className={`italic mx-auto max-w-screen-sm text-gray-500 dark:text-gray-300`}
+            >
               Sponsors get special perks like{' '}
               <strong>
                 private discord channels, priority issue requests, direct