docs: design polish (#8696)

* polish

* finish polish

* change typography

www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx

@@ -6,13 +6,11 @@ import { CheckMini, SquareTwoStack } from "@medusajs/icons"
 export type CodeBlockCopyActionProps = {
   source: string
   inHeader: boolean
-  iconColor: string
 }
 
 export const CodeBlockCopyAction = ({
   source,
   inHeader,
-  iconColor,
 }: CodeBlockCopyActionProps) => {
   const [copied, setCopied] = useState(false)
 
@@ -24,16 +22,27 @@ export const CodeBlockCopyAction = ({
     }
   }, [copied])
 
+  const iconClassName = [
+    "text-medusa-contrast-fg-secondary",
+    "group-hover:text-medusa-contrast-fg-primary",
+    "group-focus:text-medusa-contrast-fg-primary",
+  ]
+
   return (
     <CopyButton
       text={source}
       tooltipClassName="font-base"
-      className={clsx("h-fit", !inHeader && "p-[6px]", inHeader && "p-[4.5px]")}
-      tooltipInnerClassName={clsx(inHeader && "flex")}
+      className={clsx("group")}
+      buttonClassName={clsx(!inHeader && "p-[6px]", inHeader && "p-[4.5px]")}
+      tooltipInnerClassName={clsx(
+        inHeader && "flex",
+        "h-fit rounded-docs_sm",
+        "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
+      )}
       onCopy={() => setCopied(true)}
     >
-      {!copied && <SquareTwoStack className={clsx(iconColor)} />}
-      {copied && <CheckMini className={clsx(iconColor)} />}
+      {!copied && <SquareTwoStack className={clsx(iconClassName)} />}
+      {copied && <CheckMini className={clsx(iconClassName)} />}
     </CopyButton>
   )
 }

www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx

@@ -1,10 +1,9 @@
 "use client"
 
 import clsx from "clsx"
-import React, { useMemo } from "react"
-import { CodeBlockStyle, Link, Tooltip } from "@/components"
+import React from "react"
+import { Link, Tooltip } from "@/components"
 import { ExclamationCircle, PlaySolid } from "@medusajs/icons"
-import { useColorMode } from "@/providers"
 import { GITHUB_ISSUES_PREFIX } from "@/constants"
 import { CodeBlockCopyAction } from "./Copy"
 
@@ -16,7 +15,6 @@ export type CodeBlockActionsProps = {
   inInnerCode?: boolean
   isCollapsed: boolean
   canShowApiTesting?: boolean
-  blockStyle: CodeBlockStyle
   onApiTesting: React.Dispatch<React.SetStateAction<boolean>>
   noReport?: boolean
   noCopy?: boolean
@@ -30,23 +28,15 @@ export const CodeBlockActions = ({
   isCollapsed,
   isSingleLine = false,
   canShowApiTesting = false,
-  blockStyle,
   onApiTesting,
   noReport = false,
   noCopy = false,
 }: CodeBlockActionsProps) => {
-  const { colorMode } = useColorMode()
-  const iconColor = useMemo(
-    () =>
-      clsx(
-        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "text-medusa-fg-muted",
-          colorMode === "dark" && "text-medusa-fg-secondary",
-        ]
-      ),
-    [blockStyle, colorMode]
-  )
+  const iconClassName = [
+    "text-medusa-contrast-fg-secondary",
+    "group-hover:text-medusa-contrast-fg-primary",
+    "group-focus:text-medusa-contrast-fg-primary",
+  ]
 
   return (
     <div
@@ -88,29 +78,35 @@ export const CodeBlockActions = ({
           <Tooltip
             text="Test API"
             tooltipClassName="font-base"
-            className={clsx(
-              "h-fit",
-              !inHeader && "p-[6px]",
-              inHeader && "p-[4.5px]"
+            className={clsx("group")}
+            innerClassName={clsx(
+              inHeader && "flex",
+              "h-fit rounded-docs_sm",
+              "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
             )}
-            innerClassName={clsx(inHeader && "flex")}
           >
-            <PlaySolid
-              className={clsx("cursor-pointer", iconColor)}
+            <span
+              className={clsx(
+                !inHeader && "p-[6px]",
+                inHeader && "p-[4.5px]",
+                "cursor-pointer"
+              )}
               onClick={() => onApiTesting(true)}
-            />
+            >
+              <PlaySolid className={clsx(iconClassName)} />
+            </span>
           </Tooltip>
         )}
         {!noReport && (
           <Tooltip
             text="Report Issue"
             tooltipClassName="font-base"
-            className={clsx(
-              "h-fit",
-              !inHeader && "p-[6px]",
-              inHeader && "p-[4.5px]"
+            className={clsx("group")}
+            innerClassName={clsx(
+              inHeader && "flex",
+              "h-fit rounded-docs_sm",
+              "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
             )}
-            innerClassName={clsx(inHeader && "flex")}
           >
             <Link
               href={`${GITHUB_ISSUES_PREFIX}&title=${encodeURIComponent(
@@ -120,21 +116,17 @@ export const CodeBlockActions = ({
               className={clsx(
                 "bg-transparent border-none cursor-pointer rounded",
                 "[&:not(:first-child)]:ml-docs_0.5",
-                "inline-flex justify-center items-center invisible xs:visible"
+                "inline-flex justify-center items-center invisible xs:visible",
+                !inHeader && "p-[6px]",
+                inHeader && "p-[4.5px]"
               )}
               rel="noreferrer"
             >
-              <ExclamationCircle className={clsx(iconColor)} />
+              <ExclamationCircle className={clsx(iconClassName)} />
             </Link>
           </Tooltip>
         )}
-        {!noCopy && (
-          <CodeBlockCopyAction
-            source={source}
-            inHeader={inHeader}
-            iconColor={iconColor}
-          />
-        )}
+        {!noCopy && <CodeBlockCopyAction source={source} inHeader={inHeader} />}
       </div>
     </div>
   )

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -262,7 +262,6 @@ export const CodeBlock = ({
       source,
       canShowApiTesting,
       setShowTesting,
-      blockStyle,
       noReport,
       noCopy,
       collapsibleType,

www/packages/docs-ui/src/components/LinkButton/index.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+
+import type { LinkProps as NextLinkProps } from "next/link"
+import Link from "next/link"
+import clsx from "clsx"
+
+type LinkButtonProps = NextLinkProps & {
+  variant?: "base" | "interactive" | "subtle" | "muted"
+  className?: string
+} & React.AllHTMLAttributes<HTMLAnchorElement>
+
+export const LinkButton = ({
+  variant = "base",
+  className,
+  ...linkProps
+}: LinkButtonProps) => {
+  return (
+    <Link
+      {...linkProps}
+      className={clsx(
+        className,
+        "inline-flex justify-center items-center",
+        "gap-docs_0.25 rounded-docs_xs",
+        "text-compact-small-plus disabled:text-medusa-fg-disabled",
+        "focus:shadow-borders-focus no-underline",
+        variant === "base" && [
+          "text-medusa-fg-base hover:text-medusa-fg-subtle",
+          "focus:text-medusa-fg-base",
+        ],
+        variant === "interactive" && [
+          "text-medusa-fg-interactive hover:text-medusa-interactive-hover",
+          "focus:text-medusa-fg-interactive",
+        ],
+        variant === "subtle" && [
+          "text-medusa-fg-subtle hover:text-medusa-fg-base",
+          "focus:text-medusa-fg-subtle",
+        ],
+        variant === "muted" && [
+          "text-medusa-fg-muted hover:text-medusa-fg-subtle",
+          "focus:text-medusa-fg-muted",
+        ]
+      )}
+    />
+  )
+}

www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useMemo } from "react"
-import { CurrentItemsState, useSidebar } from "../../.."
+import { Button, CurrentItemsState, useSidebar } from "../../.."
 import clsx from "clsx"
 import Link from "next/link"
 import { SidebarItemLink } from "types"
@@ -61,22 +61,19 @@ export const MainNavBreadcrumbs = () => {
   return (
     <div
       className={clsx(
-        "flex items-center",
+        "flex items-center gap-docs_0.25",
         "text-medusa-fg-muted text-compact-small"
       )}
     >
       {Array.from(breadcrumbItems).map(([link, title]) => (
         <React.Fragment key={link}>
           <span>/</span>
-          <Link
-            href={link}
-            className={clsx(
-              "hover:text-medusa-fg-base transition-colors",
-              "px-docs_0.5 py-docs_0.25"
-            )}
+          <Button
+            variant="transparent-clear"
+            className="px-docs_0.5 py-docs_0.25"
           >
-            {title}
-          </Link>
+            <Link href={link}>{title}</Link>
+          </Button>
         </React.Fragment>
       ))}
     </div>

www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { useColorMode } from "../../../providers"
-import { Button } from "../../.."
+import { Button, Tooltip } from "../../.."
 import { Moon, Sun } from "@medusajs/icons"
 import clsx from "clsx"
 
@@ -10,13 +10,15 @@ export const MainNavColorMode = () => {
   const { colorMode, toggleColorMode } = useColorMode()
 
   return (
-    <Button
-      variant="transparent-clear"
-      className={clsx("!p-[6.5px] text-medusa-fg-muted")}
-      onClick={toggleColorMode}
-    >
-      {colorMode === "light" && <Sun />}
-      {colorMode === "dark" && <Moon />}
-    </Button>
+    <Tooltip place="bottom" tooltipChildren="Change Theme">
+      <Button
+        variant="transparent-clear"
+        className={clsx("!p-[6.5px] text-medusa-fg-muted")}
+        onClick={toggleColorMode}
+      >
+        {colorMode === "light" && <Sun />}
+        {colorMode === "dark" && <Moon />}
+      </Button>
+    </Tooltip>
   )
 }

www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx

@@ -46,9 +46,9 @@ export const MainNavHelpButton = () => {
     <div className="relative" ref={ref}>
       <Tooltip
         tooltipChildren={
-          <span className="flex gap-[6px]">
+          <span className="flex gap-[6px] items-center">
             <span>Need help?</span>
-            <Kbd>?</Kbd>
+            <Kbd className="w-docs_1 h-docs_1">?</Kbd>
           </span>
         }
         place="bottom"
@@ -56,7 +56,7 @@ export const MainNavHelpButton = () => {
       >
         <Button
           variant="transparent-clear"
-          className="text-medusa-fg-muted"
+          className="text-medusa-fg-muted !px-[6.5px] !py-[6.5px]"
           onClick={() => setShowMenu((prev) => !prev)}
         >
           <QuestionMark />

www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx

@@ -9,11 +9,13 @@ import { MainNavigationDropdownIcon } from "../Icon"
 export type MainNavigationDropdownSelectedProps = {
   item: NavigationDropdownItem
   onClick: () => void
+  isActive: boolean
 }
 
 export const MainNavigationDropdownSelected = ({
   item,
   onClick,
+  isActive,
 }: MainNavigationDropdownSelectedProps) => {
   if (item.type === "divider") {
     return <></>
@@ -22,15 +24,22 @@ export const MainNavigationDropdownSelected = ({
   return (
     <div
       className={clsx(
-        "flex justify-between items-center",
-        "cursor-pointer rounded-docs_sm hover:bg-medusa-bg-hover"
+        "flex justify-between items-center gap-docs_0.25",
+        "cursor-pointer rounded-docs_sm group"
       )}
       tabIndex={-1}
       onClick={onClick}
     >
       <MainNavigationDropdownIcon icon={item.icon} />
-      <div className="flex gap-[6px] py-docs_0.25 px-docs_0.5 items-center">
-        <span className="text-medusa-fg-base whitespace-nowrap flex-1">
+      <div
+        className={clsx(
+          "flex gap-[6px] py-docs_0.25 px-docs_0.5",
+          "items-center group-hover:bg-medusa-button-transparent-hover",
+          "rounded-docs_sm",
+          isActive && "bg-medusa-button-transparent-hover"
+        )}
+      >
+        <span className="text-medusa-fg-base whitespace-nowrap flex-1 text-compact-small-plus">
           {item.title}
         </span>
         <TrianglesMini className="text-medusa-fg-muted" />

www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx

@@ -34,6 +34,7 @@ export const MainNavigationDropdown = () => {
         <MainNavigationDropdownSelected
           item={selectedItem}
           onClick={() => setMenuOpen((prev) => !prev)}
+          isActive={menuOpen}
         />
       )}
       <MainNavigationDropdownMenu

www/packages/docs-ui/src/components/MainNav/index.tsx

@@ -4,9 +4,14 @@ import clsx from "clsx"
 import React from "react"
 import { MainNavigationDropdown } from "./NavigationDropdown"
 import { MainNavBreadcrumbs } from "./Breadcrumb"
-import { Button, SearchModalOpener, useMainNav, useSidebar } from "../.."
+import {
+  Button,
+  LinkButton,
+  SearchModalOpener,
+  useMainNav,
+  useSidebar,
+} from "../.."
 import { MainNavColorMode } from "./ColorMode"
-import Link from "next/link"
 import { MainNavDivider } from "./Divider"
 import { MainNavSidebarOpener } from "./SidebarOpener"
 import { MainNavHelpButton } from "./HelpButton"
@@ -39,7 +44,9 @@ export const MainNav = () => {
       <div className="flex items-center gap-docs_0.75">
         <div className="flex items-center gap-[6px] text-medusa-fg-muted">
           {editDate && <MainNavEditDate date={editDate} />}
-          <Link href={reportIssueLink}>Report Issue</Link>
+          <LinkButton href={reportIssueLink} variant="muted" target="_blank">
+            Report Issue
+          </LinkButton>
         </div>
         <MainNavDivider />
         <div className="flex items-center gap-docs_0.25">

www/packages/docs-ui/src/components/Menu/Action/index.tsx

@@ -10,25 +10,27 @@ export type MenuActionProps = {
 
 export const MenuAction = ({ item }: MenuActionProps) => {
   return (
-    <span
-      className={clsx(
-        "flex py-docs_0.25 px-docs_0.5",
-        "gap-docs_0.5 rounded-docs_xs",
-        "hover:bg-medusa-bg-component-hover",
-        "text-medusa-fg-base cursor-pointer"
-      )}
-      tabIndex={-1}
-      onClick={item.action}
-    >
-      <span className="text-medusa-fg-subtle mt-[2.5px] block">
-        {item.icon}
-      </span>
-      <span className="text-compact-small flex-1">{item.title}</span>
-      {item.shortcut && (
-        <span className="text-medusa-fg-subtle text-compact-small">
-          {item.shortcut}
+    <div className="px-docs_0.25">
+      <span
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-medusa-bg-component-hover",
+          "text-medusa-fg-base cursor-pointer"
+        )}
+        tabIndex={-1}
+        onClick={item.action}
+      >
+        <span className="text-medusa-fg-subtle mt-[2.5px] block">
+          {item.icon}
         </span>
-      )}
-    </span>
+        <span className="text-compact-small flex-1">{item.title}</span>
+        {item.shortcut && (
+          <span className="text-medusa-fg-subtle text-compact-small">
+            {item.shortcut}
+          </span>
+        )}
+      </span>
+    </div>
   )
 }

www/packages/docs-ui/src/components/Menu/Divider/index.tsx

@@ -3,5 +3,34 @@
 import React from "react"
 
 export const MenuDivider = () => {
-  return <hr className="bg-medusa-border-menu-top mt-[3px] mb-[3px]" />
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 205 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="197"
+        height="8"
+        transform="translate(4)"
+        fill="var(--docs-bg-component)"
+      />
+      <rect
+        x="-4"
+        y="3"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-top)"
+      />
+      <rect
+        x="-4"
+        y="4"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-bot)"
+      />
+    </svg>
+  )
 }

www/packages/docs-ui/src/components/Menu/Item/index.tsx

@@ -11,19 +11,21 @@ export type MenuItemProps = {
 
 export const MenuItem = ({ item }: MenuItemProps) => {
   return (
-    <Link
-      className={clsx(
-        "flex py-docs_0.25 px-docs_0.5",
-        "gap-docs_0.5 rounded-docs_xs",
-        "hover:bg-medusa-bg-component-hover",
-        "text-medusa-fg-base"
-      )}
-      href={item.link}
-    >
-      <span className="text-medusa-fg-subtle mt-[2.5px] block">
-        {item.icon}
-      </span>
-      <span className="text-compact-small">{item.title}</span>
-    </Link>
+    <div className="px-docs_0.25">
+      <Link
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-medusa-bg-component-hover",
+          "text-medusa-fg-base"
+        )}
+        href={item.link}
+      >
+        <span className="text-medusa-fg-subtle mt-[2.5px] block">
+          {item.icon}
+        </span>
+        <span className="text-compact-small">{item.title}</span>
+      </Link>
+    </div>
   )
 }

www/packages/docs-ui/src/components/Menu/index.tsx

@@ -14,7 +14,7 @@ export const Menu = ({ items, className }: MenuProps) => {
   return (
     <div
       className={clsx(
-        "bg-medusa-bg-component p-docs_0.25 rounded-docs_DEFAULT",
+        "bg-medusa-bg-component py-docs_0.25 rounded-docs_DEFAULT",
         "shadow-elevation-flyout dark:shadow-elevation-flyout-dark",
         className
       )}

www/packages/docs-ui/src/components/Pagination/Card/index.tsx

@@ -21,7 +21,7 @@ export const PaginationCard = ({
   return (
     <div
       className={clsx(
-        "relative flex flex-1 gap-docs_0.75 items-center",
+        "relative flex-1",
         "py-docs_0.5 px-docs_0.75 rounded",
         "bg-medusa-bg-component hover:bg-medusa-bg-component-hover",
         "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
@@ -30,28 +30,30 @@ export const PaginationCard = ({
       )}
     >
       <Link href={link} className="absolute top-0 left-0 w-full h-full" />
-      {type === "previous" && (
-        <TriangleLeftMini className="text-medusa-fg-muted" />
-      )}
-      <div
-        className={clsx(
-          "flex-1",
-          type === "previous" && "text-left",
-          type === "next" && "text-right"
+      <div className={clsx("h-[40px] flex gap-docs_0.75 items-center")}>
+        {type === "previous" && (
+          <TriangleLeftMini className="text-medusa-fg-muted" />
         )}
-      >
-        {parentTitle && (
-          <span className="block text-compact-small text-medusa-fg-subtle">
-            {parentTitle}
+        <div
+          className={clsx(
+            "flex-1",
+            type === "previous" && "text-left",
+            type === "next" && "text-right"
+          )}
+        >
+          {parentTitle && (
+            <span className="block text-compact-small text-medusa-fg-subtle">
+              {parentTitle}
+            </span>
+          )}
+          <span className="block text-compact-small-plus text-medusa-fg-base">
+            {title}
           </span>
+        </div>
+        {type === "next" && (
+          <TriangleRightMini className="text-medusa-fg-muted" />
         )}
-        <span className="block text-compact-small-plus text-medusa-fg-base">
-          {title}
-        </span>
       </div>
-      {type === "next" && (
-        <TriangleRightMini className="text-medusa-fg-muted" />
-      )}
     </div>
   )
 }

www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx

@@ -3,7 +3,7 @@
 import React, { MouseEvent, useMemo } from "react"
 import clsx from "clsx"
 import { useMobile, useSearch } from "@/providers"
-import { Button } from "@/components"
+import { Button, Tooltip } from "@/components"
 import { MagnifyingGlass } from "@medusajs/icons"
 import { useKeyboardShortcut } from "@/hooks"
 
@@ -53,19 +53,21 @@ export const SearchModalOpener = ({
         </Button>
       )}
       {!isMobile && (
-        <Button
-          className={clsx(
-            "relative hover:cursor-pointer group",
-            "flex gap-[6px] !py-docs_0.25 !px-docs_0.5",
-            "justify-between items-center text-medusa-fg-muted",
-            className
-          )}
-          variant="transparent-clear"
-          onClick={handleOpen}
-        >
-          <MagnifyingGlass />
-          <span>{isApple ? "⌘" : "Ctrl"}K</span>
-        </Button>
+        <Tooltip place="bottom" tooltipChildren="Ask or search">
+          <Button
+            className={clsx(
+              "relative hover:cursor-pointer group",
+              "flex gap-[6px] !py-docs_0.25 !px-docs_0.5",
+              "justify-between items-center text-medusa-fg-muted",
+              className
+            )}
+            variant="transparent-clear"
+            onClick={handleOpen}
+          >
+            <MagnifyingGlass />
+            <span>{isApple ? "⌘" : "Ctrl"}K</span>
+          </Button>
+        </Tooltip>
       )}
     </>
   )

www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx

@@ -69,7 +69,9 @@ export const SidebarItemCategory = ({
   )
 
   return (
-    <div className={clsx("my-docs_0.75 w-full relative", className)}>
+    <div
+      className={clsx("my-docs_0.75 first:!mt-0 w-full relative", className)}
+    >
       <div className="px-docs_0.75">
         <div
           className={clsx(

www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx

@@ -118,7 +118,12 @@ export const SidebarItemLink = ({
           shallow={!item.isPathHref}
           {...item.linkProps}
         >
-          <span className={clsx(isTitleOneWord && "truncate")}>
+          <span
+            className={clsx(
+              isTitleOneWord && "truncate",
+              nested && "inline-block pl-docs_1.5"
+            )}
+          >
             {item.title}
           </span>
           {item.additionalElms}
@@ -129,7 +134,6 @@ export const SidebarItemLink = ({
           className={clsx(
             "ease-ease overflow-hidden",
             "flex flex-col gap-docs_0.125",
-            !item.childrenSameLevel && "pl-docs_1.5",
             "pt-docs_0.125 pb-docs_0.5"
           )}
         >

www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx

@@ -116,7 +116,12 @@ export const SidebarItemSubCategory = ({
             className
           )}
         >
-          <span className={clsx(isTitleOneWord && "truncate")}>
+          <span
+            className={clsx(
+              isTitleOneWord && "truncate",
+              nested && "pl-docs_1.5"
+            )}
+          >
             {item.title}
           </span>
           {item.additionalElms}
@@ -127,7 +132,6 @@ export const SidebarItemSubCategory = ({
           className={clsx(
             "ease-ease overflow-hidden",
             "flex flex-col gap-docs_0.125",
-            !item.childrenSameLevel && "pl-docs_1.5",
             "pb-docs_0.5 pt-docs_0.125"
           )}
         >

www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx

@@ -46,7 +46,7 @@ export const SidebarTopMedusaMenu = () => {
         <span className="text-compact-small-plus text-medusa-fg-base flex-1">
           Medusa Docs
         </span>
-        <EllipsisHorizontal className="text-medusa-fg-subtle" />
+        <EllipsisHorizontal className="text-medusa-fg-muted" />
       </div>
       <div
         className={clsx(

www/packages/docs-ui/src/components/Sidebar/Top/index.tsx

@@ -24,7 +24,7 @@ export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
               <SidebarChild item={parentItem} />
             </>
           )}
-          <DottedSeparator className="!my-0" />
+          <DottedSeparator wrapperClassName="!my-0" />
         </div>
       </div>
     )

www/packages/docs-ui/src/components/index.ts

@@ -34,6 +34,7 @@ export * from "./Kbd"
 export * from "./Label"
 export * from "./LearningPath"
 export * from "./Link"
+export * from "./LinkButton"
 export * from "./Loading"
 export * from "./Loading/Dots"
 export * from "./Loading/Spinner"

www/packages/docs-ui/src/layouts/main-content.tsx

@@ -48,7 +48,7 @@ export const MainContentLayout = ({
           "flex-col items-center",
           "h-full w-full",
           "overflow-y-scroll overflow-x-hidden",
-          "md:rounded shadow-elevation-card-rest",
+          "md:rounded-t-docs_DEFAULT shadow-elevation-card-rest",
           mainWrapperClasses
         )}
         id="main"

www/packages/tailwind/base.tailwind.config.js

@@ -234,9 +234,9 @@ module.exports = {
           "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
 
         "elevation-code-block":
-          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
+          "0px 0px 0px 1px #18181B, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.20)",
         "elevation-code-block-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px #27272A, 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
         active: "0px 0px 0px 3px #E1F0FF",
         "active-dark": "0px 0px 0px 3px #2C2250",
         "border-base":
@@ -317,128 +317,142 @@ module.exports = {
       },
       fontSize: {
         h1: [
-          "2rem",
+          "24px",
           {
-            lineHeight: "2.75rem",
+            lineHeight: "36px",
             fontWeight: "500",
           },
         ],
         h2: [
-          "1.5rem",
+          "18px",
           {
-            lineHeight: "2rem",
+            lineHeight: "28px",
             fontWeight: "500",
           },
         ],
         h3: [
-          "1.125rem",
+          "16px",
           {
-            lineHeight: "1.75rem",
+            lineHeight: "24px",
             fontWeight: "500",
           },
         ],
         h4: [
           "1rem",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
-        "compact-large-plus": [
-          "1rem",
+        "compact-x-large-plus": [
+          "18px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
+            fontWeight: "500",
+          },
+        ],
+        "compact-x-large": [
+          "18px",
+          {
+            lineHeight: "20px",
+            fontWeight: "400",
+          },
+        ],
+        "compact-large-plus": [
+          "16px",
+          {
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
         "compact-large": [
-          "1rem",
+          "16px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "400",
           },
         ],
         "compact-medium-plus": [
-          "0.875rem",
+          "14px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
         "compact-medium": [
-          "0.875rem",
+          "14px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "400",
           },
         ],
         "compact-small-plus": [
-          "0.8125rem",
+          "13px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
         "compact-small": [
-          "0.8125rem",
+          "13px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "400",
           },
         ],
         "compact-x-small-plus": [
-          "0.75rem",
+          "12px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "500",
           },
         ],
         "compact-x-small": [
-          "0.75rem",
+          "12px",
           {
-            lineHeight: "1.25rem",
+            lineHeight: "20px",
             fontWeight: "400",
           },
         ],
         "x-large-plus": [
-          "1.125rem",
+          "18px",
           {
-            lineHeight: "1.6875rem",
+            lineHeight: "150%",
             fontWeight: "500",
           },
         ],
         "x-large": [
-          "1.125rem",
+          "18px",
           {
-            lineHeight: "1.6875rem",
+            lineHeight: "150%",
             fontWeight: "400",
           },
         ],
         "large-plus": [
-          "1rem",
+          "16px",
           {
-            lineHeight: "1.5rem",
+            lineHeight: "150%",
             fontWeight: "500",
           },
         ],
         large: [
-          "1rem",
+          "16px",
           {
-            lineHeight: "1.5rem",
+            lineHeight: "150%",
             fontWeight: "400",
           },
         ],
         "medium-plus": [
-          "0.875rem",
+          "14px",
           {
-            lineHeight: "1.3125rem",
+            lineHeight: "150%",
             fontWeight: "500",
           },
         ],
         medium: [
-          "0.875rem",
+          "14px",
           {
-            lineHeight: "1.3125rem",
+            lineHeight: "150%",
             fontWeight: "400",
           },
         ],
@@ -456,6 +470,20 @@ module.exports = {
             fontWeight: "500",
           },
         ],
+        "x-small": [
+          "12px",
+          {
+            lineHeight: "150%",
+            fontWeight: "400",
+          },
+        ],
+        "x-small-plus": [
+          "12px",
+          {
+            lineHeight: "150%",
+            fontWeight: "500",
+          },
+        ],
         "code-label": [
           "12px",
           {
@@ -466,7 +494,7 @@ module.exports = {
         "code-body": [
           "12px",
           {
-            lineHeight: "18px",
+            lineHeight: "150%",
             fontWeight: "400",
           },
         ],

www/packages/tailwind/theme-presets.js

@@ -37,6 +37,7 @@ const light = {
   "--docs-border-danger": "rgba(190, 18, 60, 1)",
   "--docs-border-transparent": "rgba(255, 255, 255, 0)",
   "--docs-border-menu-top": "rgba(228, 228, 231, 1)",
+  "--docs-border-menu-bot": "rgba(255, 255, 255, 1)",
 
   "--docs-button-inverted": "rgba(39, 39, 42, 1)",
   "--docs-button-inverted-hover": "rgba(63, 63, 70, 1)",
@@ -140,6 +141,7 @@ const dark = {
   "--docs-border-danger": "rgba(190, 18, 60, 1)",
   "--docs-border-transparent": "rgba(255, 255, 255, 0)",
   "--docs-border-menu-top": "rgba(255, 255, 255, 0.08)",
+  "--docs-border-menu-bot": "rgba(255, 255, 255, 0.08)",
 
   "--docs-button-inverted": "rgba(82, 82, 91, 1)",
   "--docs-button-inverted-hover": "rgba(113, 113, 122, 1)",