docs(navigations-docs): use ghost buttonVariant for anchors

Author: maiieul

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -3,6 +3,7 @@ import { useLocation } from '@builder.io/qwik-city';
 import { ComponentStatus } from '~/_state/component-status.type';
 import { StatusBadge } from '../component-status-badge/component-status-badge';
 import { cn } from '@qwik-ui/utils';
+import { buttonVariants } from '@qwik-ui/styled';
 
 export interface LinkGroup {
   name: string;
@@ -57,7 +58,8 @@ export const DocsNavigation = component$(
                     <li key={link.name + link.href}>
                       <a
                         class={cn(
-                          'transition-color flex items-center rounded-base px-4 py-2 text-sm duration-300 ease-step hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+                          buttonVariants({ look: 'ghost' }),
+                          'flex h-10 items-center rounded-base font-sans',
                           isLinkActive ||
                             (location.url.pathname?.startsWith('/docs/headless/') &&
                               link.name === 'Headless') ||