From a3b300a5f4e5206328e2a4ecd94975de94aa3326 Mon Sep 17 00:00:00 2001
From: "Sahil.Sharma3184@gmail.com" <sahil.sharma3184@gmail.com>
Date: Mon, 20 Apr 2026 03:30:32 +0530
Subject: [PATCH 1/2] fix(footer): align legal link hover color with adjacent
 nav

---
 src/components/Footer/Footer.jsx |  6 +++---
 src/styles/index.css             | 12 ++++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index d0550f6579d1..8c00a73787d2 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -10,7 +10,7 @@ const footerLinkClasses =
 
 const Footer = () => (
   <footer className="w-full flex-[0_0_auto] print:hidden">
-    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">
+    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">
           <img
@@ -20,7 +20,7 @@ const Footer = () => (
           />
         </a>
       </div>
-      <p className="mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
+      <p className="footer-legal-links mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
         Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and
         webpack contributors. All rights reserved. The{" "}
         <a href="https://openjsf.org">OpenJS Foundation</a> has registered
@@ -36,7 +36,7 @@ const Footer = () => (
         holders. Use of them does not imply any affiliation with or endorsement
         by them.
       </p>
-      <p className="mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
+      <p className="footer-legal-links mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
         <a href="https://openjsf.org">The OpenJS Foundation</a> |{" "}
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a> |{" "}
         <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> |{" "}
diff --git a/src/styles/index.css b/src/styles/index.css
index 954288ab1581..fd2ba176362c 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -66,3 +66,15 @@ body {
 .screen-reader-only {
   @apply sr-only;
 }
+
+.footer-legal-links a {
+  @apply text-[#3b7eb5] transition-colors duration-[250ms];
+}
+
+.footer-legal-links a:hover {
+  color: var(--color-brand-link-hover);
+}
+
+.dark .footer-legal-links a:hover {
+  color: var(--color-dark-link-hover);
+}

From a8e3f8c18b8131c42f6224157d814d1ae6c02057 Mon Sep 17 00:00:00 2001
From: "Sahil.Sharma3184@gmail.com" <sahil.sharma3184@gmail.com>
Date: Mon, 20 Apr 2026 22:40:10 +0530
Subject: [PATCH 2/2] refactor(footer): use tailwind utilities for legal link
 hover

---
 src/components/Footer/Footer.jsx |  4 ++--
 src/styles/index.css             | 12 ------------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 8c00a73787d2..0a655f96aca5 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -20,7 +20,7 @@ const Footer = () => (
           />
         </a>
       </div>
-      <p className="footer-legal-links mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
+      <p className="mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0] [&_a]:text-[#3b7eb5] [&_a:hover]:!text-[#144f80] dark:[&_a:hover]:!text-[#82b7f6]">
         Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and
         webpack contributors. All rights reserved. The{" "}
         <a href="https://openjsf.org">OpenJS Foundation</a> has registered
@@ -36,7 +36,7 @@ const Footer = () => (
         holders. Use of them does not imply any affiliation with or endorsement
         by them.
       </p>
-      <p className="footer-legal-links mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
+      <p className="mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0] [&_a]:text-[#3b7eb5] [&_a:hover]:!text-[#144f80] dark:[&_a:hover]:!text-[#82b7f6]">
         <a href="https://openjsf.org">The OpenJS Foundation</a> |{" "}
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a> |{" "}
         <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> |{" "}
diff --git a/src/styles/index.css b/src/styles/index.css
index fd2ba176362c..954288ab1581 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -66,15 +66,3 @@ body {
 .screen-reader-only {
   @apply sr-only;
 }
-
-.footer-legal-links a {
-  @apply text-[#3b7eb5] transition-colors duration-[250ms];
-}
-
-.footer-legal-links a:hover {
-  color: var(--color-brand-link-hover);
-}
-
-.dark .footer-legal-links a:hover {
-  color: var(--color-dark-link-hover);
-}