Polish documentation menus and page navigation

apps/web/src/components/docs/copy-markdown-button.tsx

@@ -55,7 +55,7 @@ export function CopyMarkdownButton({ markdownUrl }: { markdownUrl: string }) {
       <Button
         variant="ghost"
         size="sm"
-        className="bg-background h-full hover:bg-background! hover:border-primary/14 w-23.5 justify-start gap-1.5 rounded-xs border px-1.5! text-xs duration-0"
+        className="bg-background h-full hover:bg-background! hover:border-subtle-hover-border w-23.5 justify-start gap-1.5 rounded-xs border px-1.5! text-xs duration-0"
         onClick={onClick}
       >
         {copied ? <RiCheckLine className="size-3" /> : <RiFileCopyLine className="size-3" />}
@@ -72,21 +72,21 @@ export function CopyMarkdownButton({ markdownUrl }: { markdownUrl: string }) {
             />
           }
         >
-          <RiArrowDownSLine className="size-3.5" />
+          <RiArrowDownSLine />
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-44">
+        <DropdownMenuContent align="end">
           <DropdownMenuItem render={<Link href={markdownUrl} target="_blank" rel="noreferrer" />}>
-            <RiMarkdownLine className="size-3.5" />
+            <RiMarkdownLine />
             View as markdown
           </DropdownMenuItem>
           <DropdownMenuItem render={<Link href="/llms.txt" target="_blank" rel="noreferrer" />}>
-            <RiExternalLinkLine className="size-3.5" />
+            <RiExternalLinkLine />
             View llms.txt
           </DropdownMenuItem>
           <DropdownMenuItem
             render={<Link href="/llms-full.txt" target="_blank" rel="noreferrer" />}
           >
-            <RiExternalLinkLine className="size-3.5" />
+            <RiExternalLinkLine />
             View llms-full.txt
           </DropdownMenuItem>
         </DropdownMenuContent>

apps/web/src/components/docs/docs-layout.tsx

@@ -60,7 +60,7 @@ function SearchButton({ className }: { className?: string }) {
     <button
       type="button"
       className={cn(
-        "text-primary/70 hover:bg-muted hover:text-primary/90 inline-flex h-7.5 items-center gap-1.5 rounded-sm border bg-secondary/50 px-2 text-[14px] transition-colors dark:hover:bg-muted/50",
+        "text-primary/70 hover:bg-subtle-hover hover:text-subtle-hover-foreground inline-flex h-7.5 items-center gap-1.5 rounded-sm border bg-secondary/50 px-2 text-[14px] transition-colors",
         className,
       )}
       onClick={() => setOpenSearch(true)}
@@ -120,7 +120,7 @@ function LlmsDropdown() {
         render={
           <Button
             aria-label="Open LLM files"
-            className="size-7 text-muted-foreground"
+            className="text-muted-foreground"
             size="icon-sm"
             type="button"
             variant="ghost"
@@ -129,13 +129,13 @@ function LlmsDropdown() {
       >
         <RiRobot2Line />
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" side="top" className="w-40">
+      <DropdownMenuContent align="start" side="top">
         <DropdownMenuItem render={<Link href="/llms.txt" target="_blank" rel="noreferrer" />}>
-          <RiExternalLinkLine className="size-3.5" />
+          <RiExternalLinkLine />
           llms.txt
         </DropdownMenuItem>
         <DropdownMenuItem render={<Link href="/llms-full.txt" target="_blank" rel="noreferrer" />}>
-          <RiExternalLinkLine className="size-3.5" />
+          <RiExternalLinkLine />
           llms-full.txt
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -166,10 +166,7 @@ function DocsSidebar({
       >
         <div className="flex h-full w-full flex-col">
           <div className="flex h-12 items-center justify-between px-2.5">
-            <BrandMenu
-              linkClassName="rounded-sm px-2 py-1.5 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors"
-              wordmarkBaseClassName="h-3.5"
-            />
+            <BrandMenu linkClassName="px-2" wordmarkBaseClassName="h-3.5" />
             <Button
               aria-label="Hide sidebar"
               className="size-7 text-muted-foreground"
@@ -260,10 +257,7 @@ function MobileSidebar({
         </SheetHeader>
         <div className="flex h-full flex-col">
           <div className="flex h-12 items-center border-b px-2.5">
-            <BrandMenu
-              linkClassName="rounded-sm px-2 py-1.5 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors"
-              wordmarkBaseClassName="h-3.5"
-            />
+            <BrandMenu linkClassName="px-2" wordmarkBaseClassName="h-3.5" />
           </div>
           <SidebarContent onItemClick={() => onOpenChange(false)} pathname={pathname} tree={tree} />
         </div>
@@ -401,8 +395,8 @@ function SidebarItem({
       className={cn(
         "flex h-6.75 items-center gap-2 rounded-sm px-2 text-[13px] transition-none",
         active
-          ? "bg-accent/50 text-accent-foreground/80"
-          : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground/80",
+          ? "bg-accent/50 text-accent-foreground/80 hover:text-subtle-hover-foreground"
+          : "text-muted-foreground hover:bg-subtle-hover hover:text-subtle-hover-foreground",
       )}
     >
       {getDocsPageIcon(String(item.name))}
@@ -498,11 +492,7 @@ export function DocsLayout({ children, tree }: { children: ReactNode; tree: Root
           data-transparent="false"
           className="fixed top-0 z-30 flex h-12 w-full flex-row items-center justify-between border-b bg-background px-2.5 [grid-area:header] md:hidden"
         >
-          <BrandMenu
-            className="md:hidden"
-            linkClassName="rounded-sm px-2 py-1.5 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors"
-            wordmarkBaseClassName="h-3.5"
-          />
+          <BrandMenu className="md:hidden" linkClassName="px-2" wordmarkBaseClassName="h-3.5" />
           <div className="flex items-center gap-1 md:hidden">
             <Button
               aria-label="Open search"

apps/web/src/components/docs/docs-page.tsx

@@ -181,22 +181,29 @@ function DocsFooterItem({ item, index }: { item: FooterItem; index: 0 | 1 }) {
     <Link
       href={item.url}
       className={cn(
-        "flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-accent/80 hover:text-accent-foreground @max-lg:col-span-full",
-        index === 1 && "text-end",
+        "group focus-visible:ring-ring flex min-w-0 rounded-sm bg-secondary p-0.5 text-primary/70 focus-visible:ring-2 focus-visible:outline-none @max-lg:col-span-full",
+        index === 0 && "flex-row-reverse",
       )}
     >
-      <div
+      <div className="bg-background bg-clip-padding group-hover:border-subtle-hover-border flex min-w-0 flex-1 flex-col gap-0.5 rounded-xs border p-2.5 transition-colors duration-200">
+        <span
+          title={typeof item.name === "string" ? item.name : undefined}
+          className="line-clamp-1 text-[13px] transition-colors duration-200 group-hover:text-subtle-hover-foreground"
+        >
+          {item.name}
+        </span>
+        <span className="text-muted-foreground/70 line-clamp-1 text-xs">
+          {item.description ?? (index === 0 ? "Previous page" : "Next page")}
+        </span>
+      </div>
+      <span
         className={cn(
-          "inline-flex items-center gap-1.5 font-medium",
-          index === 1 && "flex-row-reverse",
+          "flex shrink-0 items-center text-foreground/65 transition-colors duration-200 group-hover:text-primary",
+          index === 0 ? "pr-2 pl-1.5" : "pr-1.5 pl-2",
         )}
       >
-        <Icon className="-mx-1 size-4 shrink-0" />
-        <p>{item.name}</p>
-      </div>
-      <p className="truncate text-muted-foreground">
-        {item.description ?? (index === 0 ? "Previous page" : "Next page")}
-      </p>
+        <Icon aria-hidden className="size-5" />
+      </span>
     </Link>
   );
 }

apps/web/src/components/layout/mini-nav-bar.tsx

@@ -16,10 +16,7 @@ export function MiniNavBar() {
         className="bg-background border-border pointer-events-auto w-full border-b lg:hidden"
       >
         <SectionShell className="flex items-center">
-          <BrandMenu
-            linkClassName="gap-1 rounded-sm px-5 py-3 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors"
-            wordmarkClassName="scale-95"
-          />
+          <BrandMenu linkClassName="gap-1 px-5 py-3" wordmarkClassName="scale-95" />
         </SectionShell>
       </motion.div>
 
@@ -31,7 +28,7 @@ export function MiniNavBar() {
       >
         <SectionShell>
           <div className="flex h-12 items-center px-12">
-            <BrandMenu linkClassName="-ml-2.5 rounded-sm px-2.5 py-2 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors" />
+            <BrandMenu linkClassName="-ml-2.5 px-2.5 py-2" />
           </div>
         </SectionShell>
       </motion.div>

apps/web/src/components/layout/navigation-bar.tsx

@@ -83,7 +83,7 @@ const tabBase =
   "group/tab relative flex h-full items-center justify-center gap-1.5 px-4 py-3.5 transition-colors duration-150";
 const tabActive = "bg-background";
 const tabInactive =
-  "hover:bg-foreground/[0.03] bg-transparent text-foreground/60 dark:text-foreground/40 hover:text-foreground/70";
+  "hover:bg-subtle-hover bg-transparent text-foreground/60 dark:text-foreground/40 hover:text-foreground/70";
 const labelBase =
   "text-sm tracking-wider whitespace-nowrap uppercase transition-colors duration-150";
 
@@ -124,7 +124,7 @@ export function NavigationBar({ stars = "1k" }: { stars?: string }) {
         >
           <SectionShell className="border-border border-b">
             <div className="flex h-11 w-full items-center justify-between px-5">
-              <BrandMenu linkClassName="-ml-2.5 rounded-sm px-2.5 py-2 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors" />
+              <BrandMenu linkClassName="-ml-2.5 px-2.5 py-2" />
               <button
                 type="button"
                 aria-label={mobileMenuOpen ? "Close navigation menu" : "Open navigation menu"}
@@ -149,7 +149,7 @@ export function NavigationBar({ stars = "1k" }: { stars?: string }) {
           <SectionShell className="border-border border-b">
             <div className="flex h-12 items-center justify-between px-12">
               {/* Logo */}
-              <BrandMenu linkClassName="-ml-2.5 rounded-sm px-2.5 py-2 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors" />
+              <BrandMenu linkClassName="-ml-2.5 px-2.5 py-2" />
 
               {/* Center tabs */}
               <div className="absolute inset-0 flex items-stretch justify-center">
@@ -228,7 +228,7 @@ export function NavigationBar({ stars = "1k" }: { stars?: string }) {
                             <NavLink
                               key={link.name}
                               item={link}
-                              className="text-foreground/60 hover:text-foreground hover:bg-foreground/3 flex items-center justify-between px-4 py-2 text-sm transition-colors"
+                              className="text-foreground/60 hover:text-foreground hover:bg-subtle-hover flex items-center justify-between px-4 py-2 text-sm transition-colors"
                               onClick={() => setLinksOpen(false)}
                             >
                               <span className="flex items-center gap-2.5">
@@ -287,7 +287,7 @@ export function NavigationBar({ stars = "1k" }: { stars?: string }) {
                   <NavLink
                     item={item}
                     className={`flex items-center gap-2.5 px-5 py-3.5 transition-colors ${
-                      isActive(item.path || item.href) ? "bg-foreground/4" : "hover:bg-foreground/3"
+                      isActive(item.path || item.href) ? "bg-foreground/4" : "hover:bg-subtle-hover"
                     }`}
                     onClick={() => setMobileMenuOpen(false)}
                   >

apps/web/src/components/ui/button.tsx

@@ -16,7 +16,7 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
-          "text-primary/70 hover:bg-muted hover:text-primary/90 aria-expanded:bg-muted aria-expanded:text-primary/70 dark:hover:bg-muted/50",
+          "text-primary/70 hover:bg-subtle-hover hover:text-subtle-hover-foreground aria-expanded:bg-muted aria-expanded:text-primary/70",
         destructive:
           "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",

apps/web/src/components/ui/context-menu.tsx

@@ -6,6 +6,22 @@ import { RiArrowRightSLine, RiCheckLine } from "react-icons/ri";
 
 import { cn } from "@/lib/utils";
 
+const menuContentStyles =
+  "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-sm bg-popover p-0.5 text-foreground/75 shadow-md ring-1 ring-[color:color-mix(in_srgb,var(--foreground)_10%,var(--popover))] duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95";
+
+const menuItemStyles =
+  "relative flex cursor-default items-center gap-1.5 rounded-xs min-h-6.75 px-2 py-0.5 text-sm text-muted-foreground outline-hidden select-none focus:bg-subtle-hover focus:text-subtle-hover-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-3.5";
+
+const menuLabelStyles = "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7";
+
+const menuSeparatorStyles = "-mx-0.5 my-0.5 h-px bg-border";
+
+const menuDestructiveItemStyles =
+  "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:[&_svg]:text-destructive";
+
+const menuSubTriggerStyles =
+  "data-open:bg-subtle-hover data-open:text-subtle-hover-foreground data-popup-open:bg-subtle-hover data-popup-open:text-subtle-hover-foreground";
+
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
@@ -52,11 +68,7 @@ function ContextMenuContent({
       >
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
-          className={cn(
-            "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            "rounded-md",
-            className,
-          )}
+          className={cn(menuContentStyles, className)}
           {...props}
         />
       </ContextMenuPrimitive.Positioner>
@@ -79,10 +91,7 @@ function ContextMenuLabel({
     <ContextMenuPrimitive.GroupLabel
       data-slot="context-menu-label"
       data-inset={inset}
-      className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
-        className,
-      )}
+      className={cn(menuLabelStyles, className)}
       {...props}
     />
   );
@@ -103,8 +112,9 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
-        "rounded-sm",
+        "group/context-menu-item",
+        menuItemStyles,
+        menuDestructiveItemStyles,
         className,
       )}
       {...props}
@@ -128,10 +138,7 @@ function ContextMenuSubTrigger({
     <ContextMenuPrimitive.SubmenuTrigger
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, menuSubTriggerStyles, className)}
       {...props}
     >
       {children}
@@ -164,10 +171,7 @@ function ContextMenuCheckboxItem({
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, "pr-8", className)}
       checked={checked}
       {...props}
     >
@@ -197,10 +201,7 @@ function ContextMenuRadioItem({
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, "pr-8", className)}
       {...props}
     >
       <span className="pointer-events-none absolute right-2">
@@ -217,7 +218,7 @@ function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Sepa
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      className={cn(menuSeparatorStyles, className)}
       {...props}
     />
   );
@@ -228,7 +229,7 @@ function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-subtle-hover-foreground",
         className,
       )}
       {...props}