small a11y Improvements for aria-labels, opacity, and color contrast (#441)

Author: RezixDev

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>

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,10 @@ 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

src/components/OpenSourceStats.tsx

@@ -84,7 +84,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>
@@ -100,7 +100,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>
@@ -111,7 +111,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>
@@ -122,7 +122,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>
@@ -135,7 +135,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

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,15 @@ 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

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>