Unify focus styles

Author: hasparus

src/components/footer/conference-footer-box.tsx

@@ -16,7 +16,7 @@ export function ConferenceFooterBox({
     <Anchor
       href={href}
       className={clsx(
-        "dark group relative inline-flex flex-col bg-pri-base text-neu-900 after:absolute after:inset-0 hover:after:bg-white/[.025] dark:bg-pri-dark",
+        "dark gql-focus-visible group relative inline-flex flex-col bg-pri-base text-neu-900 after:absolute after:inset-0 hover:after:bg-white/[.025] dark:bg-pri-dark",
         className,
       )}
     >

src/components/footer/index.tsx

@@ -51,7 +51,7 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
                 <h3 className="font-bold lg:mb-4 3xl:mb-10">
                   {section.route ? (
                     <Anchor
-                      className="gql-focus-visible block p-4 underline-offset-4 hover:underline md:px-6 2xl:px-10"
+                      className="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10"
                       href={section.route}
                     >
                       {section.title}
@@ -65,7 +65,7 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
                 <Anchor
                   key={link.route}
                   href={link.route}
-                  className="gql-focus-visible block p-4 underline-offset-4 hover:underline md:px-6 2xl:px-10"
+                  className="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10"
                 >
                   {link.title}
                 </Anchor>
@@ -81,7 +81,7 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
             )}
             <SocialIcons
               count={4}
-              className="col-span-full gap-px text-pri-base *:flex *:flex-1 *:items-center *:justify-center *:bg-neu-100 *:dark:bg-neu-0 max-sm:*:aspect-square lg:*:aspect-square [&>a:focus]:text-current [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-0/90 [&>a:hover]:text-current [&_svg]:!h-8"
+              className="gql-all-anchors-focusable col-span-full gap-px text-pri-base *:flex *:flex-1 *:items-center *:justify-center *:bg-neu-100 *:dark:bg-neu-0 max-sm:*:aspect-square lg:*:aspect-square [&>a:focus]:text-current [&>a:focus]:!-outline-offset-[6px] [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-0/90 [&>a:hover]:text-current [&_svg]:!h-8"
             />
           </div>
         </div>

src/components/index-page/powered-by-community.tsx

@@ -5,7 +5,7 @@ import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.sv
 export function PoweredByCommunity() {
   return (
     <section className="gql-section lg:pb-16 xl:pb-24">
-      <div className="gql-container typography-body-lg flex bg-pri-darker text-white max-lg:flex-col">
+      <div className="gql-container dark typography-body-lg flex bg-pri-darker text-neu-900 max-lg:flex-col">
         <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
           <h2 className="typography-h2 text-balance">
             Powered by the community
@@ -20,21 +20,21 @@ export function PoweredByCommunity() {
         <div>
           <Anchor
             href="/community/tools-and-libraries"
-            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 focus-visible:!-outline-offset-8 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
           >
             Browse libraries
             <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
           </Anchor>
           <Anchor
             href="/community/events"
-            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 focus-visible:!-outline-offset-8 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
           >
             Explore events & meetups
             <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
           </Anchor>
           <Anchor
             href="/community/foundation"
-            className="flex items-center justify-between gap-4 whitespace-pre px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+            className="flex items-center justify-between gap-4 whitespace-pre px-6 py-8 hover:bg-white/10 focus-visible:!-outline-offset-8 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
           >
             Learn about GraphQL Foundation
             <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />

src/components/index-page/quotes-from-the-industry.tsx

@@ -66,7 +66,7 @@ export function QuotesFromTheIndustry() {
       </div>
       <TestimonialsList
         testimonials={testimonials}
-        className="lg:!mt-0 lg:*:px-16"
+        className="gql-focus-visible focus-visible:!-outline-offset-4 lg:!mt-0 lg:*:px-16"
       />
     </div>
   )

src/components/index-page/trusted-by/index.tsx

@@ -32,7 +32,6 @@ const logos: LogoListItem[] = [
       />
     ),
   },
-
   // todo: Netflix?
   // {
   //   href: "https://netflix.com",
@@ -125,7 +124,7 @@ export function TrustedBy() {
             href={href}
             target="_blank"
             rel="noreferrer"
-            className="group relative flex shrink-0 items-center justify-center bg-neu-0 p-10 *:z-[1] before:absolute before:inset-2 hover:before:bg-neu-100/50 dark:hover:before:bg-[#202219]"
+            className="group relative flex shrink-0 items-center justify-center bg-neu-0 p-10 *:z-[1] before:absolute before:inset-2 hover:before:bg-neu-100/50 focus-visible:z-[1] dark:hover:before:bg-[#202219]"
           >
             <Component />
           </a>