fix(a11y): fixed color contrast and heading issues

Author: llalunio

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -66,7 +66,7 @@ export function SidebarLink({
           'text-primary dark:text-primary-dark': level === 0 && !selected,
           'text-base text-secondary dark:text-secondary-dark':
             level > 0 && !selected,
-          'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
+          'text-base text-primary dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
             selected,
           'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
             isPending,

src/components/Layout/TopNav/TopNav.tsx

@@ -129,7 +129,7 @@ function NavItem({url, isActive, children}: any) {
           'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap',
           !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
           isActive &&
-            'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
+            'bg-highlight dark:bg-highlight-dark text-link-10 dark:text-link-dark'
         )}>
         {children}
       </Link>
@@ -304,7 +304,7 @@ export default function TopNav({
               <button
                 type="button"
                 className={cn(
-                  'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-30 rounded-full align-middle text-base'
+                  'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full rounded-full align-middle text-base'
                 )}
                 onClick={onOpenSearch}>
                 <IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />

src/components/MDX/Diagram.tsx

@@ -16,7 +16,7 @@ interface DiagramProps {
 function Caption({text}: {text: string}) {
   return (
     <div className="w-full flex justify-center">
-      <figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight table-caption max-w-lg">
+      <figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-base lg:text-lg text-center leading-tight table-caption max-w-lg">
         {text}
       </figcaption>
     </div>

src/components/MDX/InlineCode.tsx

@@ -18,7 +18,7 @@ function InlineCode({
       className={cn(
         'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline',
         {
-          'bg-gray-30 bg-opacity-10 py-px': !isLink,
+          'bg-opacity-10 py-px': !isLink,
           'bg-highlight dark:bg-highlight-dark py-0': isLink,
         }
       )}

src/components/MDX/SimpleCallout.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import cn from 'classnames';
-import {H3} from './Heading';
+import {H2} from './Heading';
 
 interface SimpleCalloutProps {
   title: string;
@@ -18,11 +18,11 @@ function SimpleCallout({title, children, className}: SimpleCalloutProps) {
         'p-6 xl:p-8 pb-4 xl:pb-6 bg-card dark:bg-card-dark rounded-2xl shadow-inner-border dark:shadow-inner-border-dark text-base text-secondary dark:text-secondary-dark my-8',
         className
       )}>
-      <H3
+      <H2
         className="text-primary dark:text-primary-dark mt-0 mb-3 leading-tight"
         isPageAnchor={false}>
         {title}
-      </H3>
+      </H2>
       {children}
     </div>
   );

src/content/learn/index.md

@@ -263,7 +263,7 @@ export default function ShoppingList() {
     <li
       key={product.id}
       style={{
-        color: product.isFruit ? 'magenta' : 'darkgreen'
+        color: product.isFruit ? 'darkblue' : 'darkgreen'
       }}
     >
       {product.title}

src/styles/sandpack.css

@@ -47,8 +47,8 @@ html .sandpack {
 
   --sp-syntax-color-plain: #24292e;
   --sp-syntax-color-comment: #6a737d;
-  --sp-syntax-color-keyword: #d73a49;
-  --sp-syntax-color-tag: #22863a;
+  --sp-syntax-color-keyword: #d21a2d;
+  --sp-syntax-color-tag: #077e23;
   --sp-syntax-color-punctuation: #24292e;
   --sp-syntax-color-definition: #6f42c1;
   --sp-syntax-color-property: #005cc5;