fix: colors

Author: pranjalisr

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-[#465E69] [&_a:hover]:text-[#2B3A42] dark:[&_a]:text-[#8dd6f9] dark:[&_a:hover]:text-white">
+    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[var(--color-link-accessible)] [&_a:hover]:text-[var(--color-link-accessible-hover)] dark:[&_a]:text-[var(--color-link-accessible-dark)] dark:[&_a:hover]:text-white">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">
           <img

src/components/Markdown/Markdown.css

@@ -293,8 +293,8 @@
     font-family:
       "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     @apply text-[90%] mx-0.5 py-0.5 px-1.5 whitespace-normal bg-[rgba(70,94,105,0.05)] rounded-[3px];
-    color: #2b3a42;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+    color: var(--color-code-inline-text);
+    text-shadow: none;
   }
 
   a {
@@ -457,10 +457,34 @@
   @apply text-white;
 }
 
+.markdown a > code,
+.markdown a > tt {
+  color: var(--color-link-accessible) !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  text-shadow: none !important;
+}
+
+.dark .markdown a > code,
+.dark .markdown a > tt {
+  color: var(--color-link-accessible-dark) !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  text-shadow: none !important;
+}
+
 .markdown aside.tip a {
-  color: #465e69;
+  color: var(--color-link-accessible) !important;
 }
 
 .markdown aside.tip a:hover {
-  color: #2b3a42;
+  color: var(--color-link-accessible-hover) !important;
+}
+
+.dark .markdown aside.tip a {
+  color: var(--color-link-accessible-dark) !important;
 }

src/components/Navigation/Navigation.jsx

@@ -248,7 +248,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
                 >
                   {link.children.map((child) => {
                     const classNames =
-                      "text-[#465E69] dark:text-[#8dd6f9] py-5 text-sm capitalize hover:text-[#2B3A42] dark:hover:text-white";
+                      "text-[var(--color-link-accessible)] dark:text-[var(--color-link-accessible-dark)] py-5 text-sm capitalize hover:text-[var(--color-link-accessible-hover)] dark:hover:text-white";
                     const isActive = location.pathname.startsWith(child.url);
                     return (
                       <NavLink

src/styles/theme.css

@@ -4,6 +4,9 @@
   --color-brand-link-hover: #144f80;
   --color-brand-link-dark: #69a8ee;
   --color-brand-link-dark-hover: #82b7f6;
+  /* Accessible link colors (a11y fix) */
+  --color-link-accessible: #144f80;
+  --color-link-accessible-hover: #144f80;
 
   /* Brand button/UI blue */
   --color-brand-blue: #175d96;
@@ -37,6 +40,7 @@
   --color-code-link: #1e78c2;
   --color-code-link-hover: #2186d8;
   --color-code-anchor-border: #175d96;
+  --color-code-inline-text: #144f80;
 
   /* Dark mode surface colors */
   --color-dark-bg: #121212;
@@ -61,6 +65,8 @@
   --color-dark-section-border: #343434;
   --color-dark-sidebar-text: #cadbe6;
   --color-dark-active-text: #465e69;
+  --color-link-accessible-dark: #8dd6f9;
+  --color-dark-code-inline-text: #e2e8f0;
 
   /* Sidebar/nav */
   --color-nav-bg: #526b78;