[docs] Reshuffle font sizes

docs/src/app/(public)/(content)/react/components/accordion/demos/hero/css-modules/index.module.css

@@ -57,8 +57,8 @@
   height: var(--accordion-panel-height);
   overflow: hidden;
   color: var(--color-gray-600);
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   transition: height 150ms ease-out;
 
   &[data-starting-style],
@@ -68,5 +68,5 @@
 }
 
 .Content {
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.75rem;
 }

docs/src/app/(public)/(content)/react/components/accordion/demos/hero/css-modules/index.tsx

@@ -14,8 +14,8 @@ export default function ExampleAccordion() {
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
           <div className={styles.Content}>
-            Base UI is a library of high-quality, accessible, unstyled React
-            components for design systems and web apps.
+            Base UI is a library of high-quality unstyled React components for design
+            systems and web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
@@ -30,7 +30,7 @@ export default function ExampleAccordion() {
         <Accordion.Panel className={styles.Panel}>
           <div className={styles.Content}>
             Head to the “Quick start” guide in the docs. If you’ve used unstyled
-            libraries before, you’ll feel right at home.
+            libraries before, you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>

docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx

@@ -11,10 +11,10 @@ export default function ExampleAccordion() {
             <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
           <div className="pb-3">
-            Base UI is a library of high-quality, accessible, unstyled React
-            components for design systems and web apps.
+            Base UI is a library of high-quality unstyled React components for design
+            systems and web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
@@ -26,10 +26,10 @@ export default function ExampleAccordion() {
             <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
           <div className="pb-3">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled
-            libraries before, you’ll feel right at home.
+            libraries before, you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
@@ -41,7 +41,7 @@ export default function ExampleAccordion() {
             <PlusIcon className="mr-2 size-3 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out [[data-starting-style],[data-ending-style]]:h-0">
           <div className="pb-3">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>

docs/src/app/(public)/(content)/react/components/collapsible/demos/hero/css-modules/index.module.css

@@ -19,8 +19,8 @@
   background-color: var(--color-gray-100);
   color: var(--color-gray-900);
   font-family: inherit;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 500;
 
   @media (hover: hover) {
@@ -54,8 +54,8 @@
   flex-direction: column;
   justify-content: flex-end;
   overflow: hidden;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transition: all 150ms ease-out;
 
   &[data-starting-style],

docs/src/app/(public)/(content)/react/components/field/demos/hero/css-modules/index.module.css

@@ -6,8 +6,8 @@
 }
 
 .Label {
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 500;
   color: var(--color-gray-900);
 }
@@ -32,14 +32,14 @@
 }
 
 .Error {
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--color-red-800);
 }
 
 .Description {
   margin: 0;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--color-gray-600);
 }

docs/src/app/(public)/(content)/react/components/fieldset/demos/hero/css-modules/index.module.css

@@ -25,8 +25,8 @@
 }
 
 .Label {
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 500;
   color: var(--color-gray-900);
 }
@@ -51,14 +51,14 @@
 }
 
 .Error {
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--color-red-800);
 }
 
 .Description {
   margin: 0;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--color-gray-600);
 }

docs/src/app/(public)/(content)/react/components/form/demos/hero/css-modules/index.module.css

@@ -12,8 +12,8 @@
 }
 
 .Label {
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 500;
   color: var(--color-gray-900);
 }
@@ -38,8 +38,8 @@
 }
 
 .Error {
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--color-red-800);
 }
 

docs/src/app/(public)/(content)/react/components/menu/demos/hero/css-modules/index.module.css

@@ -121,7 +121,7 @@
   padding-left: 1rem;
   padding-right: 2rem;
   display: flex;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {

docs/src/app/(public)/(content)/react/components/number-field/demos/hero/css-modules/index.module.css

@@ -17,8 +17,8 @@
 
 .Label {
   cursor: ew-resize;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 500;
   color: var(--color-gray-900);
 }

docs/src/app/(public)/(content)/react/components/preview-card/demos/hero/css-modules/index.module.css

@@ -111,8 +111,8 @@
 
 .Summary {
   margin: 0;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--color-gray-900);
   text-wrap: pretty;
 }

docs/src/app/(public)/(content)/react/components/scroll-area/demos/hero/css-modules/index.module.css

@@ -21,12 +21,14 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 0.75rem 1.25rem;
+  padding-block: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1.5rem;
 }
 
 .Paragraph {
   margin: 0;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   line-height: 1.375rem;
   color: var(--color-gray-900);
 }

docs/src/app/(public)/(content)/react/components/scroll-area/demos/hero/tailwind/index.tsx

@@ -5,8 +5,8 @@ export default function ExampleScrollArea() {
   return (
     <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)]">
       <ScrollArea.Viewport className="h-full overscroll-contain rounded-md outline -outline-offset-1 outline-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800">
-        <div className="flex flex-col gap-4 px-5 py-3">
-          <p className="text-sm text-gray-900">
+        <div className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900">
+          <p>
             Vernacular architecture is building done outside any academic tradition,
             and without professional guidance. It is not a particular architectural
             movement or style, but rather a broad category, encompassing a wide range
@@ -17,7 +17,7 @@ export default function ExampleScrollArea() {
             the small percentage of new buildings every year designed by architects
             and built by engineers.
           </p>
-          <p className="text-sm text-gray-900">
+          <p>
             This type of architecture usually serves immediate, local needs, is
             constrained by the materials available in its particular region and
             reflects local traditions and cultural practices. The study of vernacular

docs/src/app/(public)/(content)/react/components/select/demos/hero/css-modules/index.module.css

@@ -120,7 +120,7 @@
 .Item {
   box-sizing: border-box;
   outline: 0;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   line-height: 1rem;
   padding-block: 0.5rem;
   padding-left: 0.625rem;

docs/src/app/(public)/(content)/react/components/separator/demos/hero/css-modules/index.module.css

@@ -4,8 +4,8 @@
 }
 
 .Link {
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--color-gray-900);
   text-decoration-color: var(--color-gray-400);
   text-decoration-thickness: 1px;

docs/src/app/(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css

@@ -23,7 +23,7 @@
   appearance: none;
   color: var(--color-gray-600);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
   user-select: none;

docs/src/app/(public)/(content)/react/components/tabs/demos/hero/tailwind/index.tsx

@@ -6,19 +6,19 @@ export default function ExampleScrollArea() {
     <Tabs.Root className="rounded-md border border-gray-200" defaultValue="overview">
       <Tabs.List className="relative z-0 flex gap-1 px-1 shadow-[inset_0_-1px] shadow-gray-200">
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-xs font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
           value="overview"
         >
           Overview
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-xs font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
           value="projects"
         >
           Projects
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-xs font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
+          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium text-gray-600 outline-0 select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-[selected]:text-gray-900"
           value="account"
         >
           Account

docs/src/app/(public)/(content)/react/components/tooltip/demos/hero/css-modules/index.module.css

@@ -51,8 +51,8 @@
 
 .Popup {
   box-sizing: border-box;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   display: flex;
   flex-direction: column;
   padding: 0.25rem 0.5rem;

docs/src/components/CodeBlock.css

@@ -45,6 +45,7 @@
   }
 
   .CodeBlockPanelTitle {
+    @apply text-sm;
     color: var(--color-foreground);
     font-weight: 500;
   }

docs/src/components/Header.css

@@ -1,6 +1,6 @@
 @layer components {
   .Header {
-    @apply text-sm;
+    @apply text-md;
     position: absolute;
     left: 0;
     top: 0;

docs/src/components/Header.tsx

@@ -67,7 +67,7 @@ export function Header() {
                       <NpmIcon />
                       <span className="flex flex-grow-1 items-baseline justify-between">
                         npm package
-                        <span className="text-sm text-gray-600">{VERSION}</span>
+                        <span className="text-md text-gray-600">{VERSION}</span>
                       </span>
                     </MobileNav.Item>
                     <MobileNav.Item href="https://github.com/mui/base-ui" rel="noopener">

docs/src/components/Link.tsx

@@ -3,19 +3,26 @@ import clsx from 'clsx';
 import NextLink from 'next/link';
 import { ExternalLinkIcon } from 'docs/src/components/icons/ExternalLinkIcon';
 
-export function Link(props: React.ComponentProps<typeof NextLink>) {
-  if (typeof props.href === 'string' && props.href.startsWith('http')) {
+export function Link({ href, className, ...props }: React.ComponentProps<typeof NextLink>) {
+  // Sometimes link come from component descriptions; in this case, remove the domain
+  if (typeof href === 'string' && href.startsWith('https://base-ui.com')) {
+    href = href.replace('https://base-ui.com', '');
+  }
+
+  if (typeof href === 'string' && href.startsWith('http')) {
     return (
       <NextLink
+        href={href}
         target="_blank"
         rel="noopener"
         {...props}
-        className={clsx('Link inline-flex items-center gap-1', props.className)}
+        className={clsx('Link inline-flex items-center gap-1', className)}
       >
         {props.children}
         <ExternalLinkIcon />
       </NextLink>
     );
   }
-  return <NextLink {...props} className={clsx('Link', props.className)} />;
+
+  return <NextLink href={href} className={clsx('Link', className)} {...props} />;
 }

docs/src/components/Select.css

@@ -60,7 +60,7 @@
     }
 
     @media (pointer: coarse) {
-      @apply text-sm;
+      @apply text-md;
       height: 2.25rem;
       grid-template-columns: 0.5rem 0.75rem 0.5rem auto 1.5rem;
     }

docs/src/components/SideNav.css

@@ -2,7 +2,7 @@
   .SideNavRoot {
     /* Match quick nav spacing so side nav and quick nav are visually aligned */
     --side-nav-item-height: 2rem;
-    --side-nav-item-line-height: var(--text-sm--line-height);
+    --side-nav-item-line-height: var(--text-md--line-height);
     --side-nav-item-padding-y: calc(
       var(--side-nav-item-height) / 2 - var(--side-nav-item-line-height) / 2
     );
@@ -16,7 +16,7 @@
         var(--side-nav-scrollbar-thumb-width) / 2
     );
 
-    @apply text-sm;
+    @apply text-md;
     position: sticky;
     top: 0;
 

docs/src/components/Table.css

@@ -1,6 +1,6 @@
 @layer components {
   .TableRoot {
-    @apply text-xs;
+    @apply text-sm;
     color: var(--color-gray);
     border: 1px solid var(--color-gray-200);
     border-collapse: separate;