diff --git a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
index 8d05018b69b..32941ef06fc 100644
--- a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
+++ b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
@@ -20,46 +20,46 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <Accordion.Root className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900">
-      <Accordion.Item className="border-b border-gray-200">
+    <Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">Of course! Base UI is free and open source.</div>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -68,8 +68,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -85,15 +95,26 @@ This example shows how to implement the component using CSS Modules.
 .Accordion {
   box-sizing: border-box;
   display: flex;
-  width: 24rem;
-  max-width: calc(100vw - 8rem);
+  width: 20rem;
+  max-width: 100%;
   flex-direction: column;
-  justify-content: center;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
 }
 
 .Item {
-  border-bottom: 1px solid var(--color-gray-200);
+  & + & {
+    border-top: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 1px solid white;
+    }
+  }
 }
 
 .Header {
@@ -102,46 +123,54 @@ This example shows how to implement the component using CSS Modules.
 
 .Trigger {
   box-sizing: border-box;
-  position: relative;
   display: flex;
   width: 100%;
-  gap: 1rem;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem 0.25rem;
-  color: var(--color-gray-900);
+  gap: 1rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: var(--color-gray-50);
-  border: none;
-  outline: none;
+  line-height: 1.25rem;
   text-align: left;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    position: relative;
+    outline: 2px solid oklch(14.5% 0 0deg);
     z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.TriggerIcon {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: 0.5rem;
-  transition: transform 150ms ease-out;
+.Icon {
+  transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
-    transform: rotate(45deg) scale(1.1);
+    transform: rotate(45deg);
   }
 }
 
@@ -149,9 +178,8 @@ This example shows how to implement the component using CSS Modules.
   box-sizing: border-box;
   height: var(--accordion-panel-height);
   overflow: hidden;
-  color: var(--color-gray-600);
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transition: height 150ms ease-out;
 
   &[data-starting-style],
@@ -161,7 +189,7 @@ This example shows how to implement the component using CSS Modules.
 }
 
 .Content {
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
 }
 
 \`\`\`
@@ -179,7 +207,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             What is Base UI?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -194,7 +222,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             How do I get started?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -209,7 +237,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             Can I use it for my project?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -222,8 +250,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -268,47 +306,47 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900"
+      className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
     >
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">Of course! Base UI is free and open source.</div>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -317,8 +355,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -334,15 +382,26 @@ This example shows how to implement the component using CSS Modules.
 .Accordion {
   box-sizing: border-box;
   display: flex;
-  width: 24rem;
-  max-width: calc(100vw - 8rem);
+  width: 20rem;
+  max-width: 100%;
   flex-direction: column;
-  justify-content: center;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
 }
 
 .Item {
-  border-bottom: 1px solid var(--color-gray-200);
+  & + & {
+    border-top: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 1px solid white;
+    }
+  }
 }
 
 .Header {
@@ -351,46 +410,54 @@ This example shows how to implement the component using CSS Modules.
 
 .Trigger {
   box-sizing: border-box;
-  position: relative;
   display: flex;
   width: 100%;
-  gap: 1rem;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem 0.25rem;
-  color: var(--color-gray-900);
+  gap: 1rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: var(--color-gray-50);
-  border: none;
-  outline: none;
+  line-height: 1.25rem;
   text-align: left;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    position: relative;
+    outline: 2px solid oklch(14.5% 0 0deg);
     z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.TriggerIcon {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: 0.5rem;
-  transition: transform 150ms ease-out;
+.Icon {
+  transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
-    transform: rotate(45deg) scale(1.1);
+    transform: rotate(45deg);
   }
 }
 
@@ -398,9 +465,8 @@ This example shows how to implement the component using CSS Modules.
   box-sizing: border-box;
   height: var(--accordion-panel-height);
   overflow: hidden;
-  color: var(--color-gray-600);
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transition: height 150ms ease-out;
 
   &[data-starting-style],
@@ -410,7 +476,7 @@ This example shows how to implement the component using CSS Modules.
 }
 
 .Content {
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
 }
 
 \`\`\`
@@ -428,7 +494,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             What is Base UI?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -443,7 +509,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             How do I get started?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -458,7 +524,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             Can I use it for my project?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -471,8 +537,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -856,10 +932,10 @@ export default function ExampleDirectionProvider() {
     <div dir="rtl">
       <DirectionProvider direction="rtl">
         <Slider.Root defaultValue={25}>
-          <Slider.Control className="flex w-56 items-center py-3">
-            <Slider.Track className="relative h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
-              <Slider.Indicator className="rounded-sm bg-gray-700" />
-              <Slider.Thumb className="size-4 rounded-full bg-white outline-1 outline-gray-300 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
+          <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
+            <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+              <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
+              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
@@ -882,31 +958,50 @@ This example shows how to implement the component using CSS Modules.
   align-items: center;
   width: 14rem;
   padding-block: 0.75rem;
+  touch-action: none;
+  user-select: none;
 }
 
 .Track {
   width: 100%;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
   height: 0.25rem;
-  border-radius: 0.25rem;
-  position: relative;
+  background-color: oklch(92.2% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  outline: 1px solid var(--color-gray-300);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 002f68bc865..67b041c2e8b 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -1,15 +1,26 @@
 .Accordion {
   box-sizing: border-box;
   display: flex;
-  width: 24rem;
-  max-width: calc(100vw - 8rem);
+  width: 20rem;
+  max-width: 100%;
   flex-direction: column;
-  justify-content: center;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
 }
 
 .Item {
-  border-bottom: 1px solid var(--color-gray-200);
+  & + & {
+    border-top: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 1px solid white;
+    }
+  }
 }
 
 .Header {
@@ -18,46 +29,54 @@
 
 .Trigger {
   box-sizing: border-box;
-  position: relative;
   display: flex;
   width: 100%;
-  gap: 1rem;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem 0.25rem;
-  color: var(--color-gray-900);
+  gap: 1rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: var(--color-gray-50);
-  border: none;
-  outline: none;
+  line-height: 1.25rem;
   text-align: left;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    position: relative;
+    outline: 2px solid oklch(14.5% 0 0deg);
     z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.TriggerIcon {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: 0.5rem;
-  transition: transform 150ms ease-out;
+.Icon {
+  transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
-    transform: rotate(45deg) scale(1.1);
+    transform: rotate(45deg);
   }
 }
 
@@ -65,9 +84,8 @@
   box-sizing: border-box;
   height: var(--accordion-panel-height);
   overflow: hidden;
-  color: var(--color-gray-600);
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transition: height 150ms ease-out;
 
   &[data-starting-style],
@@ -77,5 +95,5 @@
 }
 
 .Content {
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
index d60c7c3e6c2..0e395d9e9fd 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             What is Base UI?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             How do I get started?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             Can I use it for my project?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -52,8 +52,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index df4ac5bf32e..88c590f5cce 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -3,46 +3,46 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <Accordion.Root className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900">
-      <Accordion.Item className="border-b border-gray-200">
+    <Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">Of course! Base UI is free and open source.</div>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -51,8 +51,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
index 0ab74c0a935..e279fd7f9bb 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             What is Base UI?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             How do I get started?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             Can I use it for my project?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -52,8 +52,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 922d0761478..0c2dc4752dc 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -5,47 +5,47 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900"
+      className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
     >
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
-            <PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">Of course! Base UI is free and open source.</div>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -54,8 +54,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 5a951b645d6..aba3d3fe19d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -3,38 +3,70 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
 .DangerButton {
-  color: var(--color-red);
+  color: oklch(50.5% 0.213 27.518deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.4% 0.191 22.216deg);
+  }
 }
 
 .Backdrop {
@@ -43,7 +75,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -51,7 +83,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
@@ -62,6 +94,9 @@
 
 .Popup {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -69,44 +104,57 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  transition: all 150ms;
+  padding: 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .Container {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/css-modules/index.tsx
index ceac1654348..c2bfde509a3 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -68,12 +68,14 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
           <AlertDialog.Portal>
             <AlertDialog.Backdrop className={styles.Backdrop} />
             <AlertDialog.Popup className={styles.Popup}>
-              <AlertDialog.Title className={styles.Title}>
-                {payload?.message ?? 'Are you sure?'}
-              </AlertDialog.Title>
-              <AlertDialog.Description className={styles.Description}>
-                This action cannot be undone.
-              </AlertDialog.Description>
+              <div className={styles.Intro}>
+                <AlertDialog.Title className={styles.Title}>
+                  {payload?.message ?? 'Are you sure?'}
+                </AlertDialog.Title>
+                <AlertDialog.Description className={styles.Description}>
+                  This action cannot be undone.
+                </AlertDialog.Description>
+              </div>
               <div className={styles.Actions}>
                 <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
                 <AlertDialog.Close className={`${styles.Button} ${styles.DangerButton}`}>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 7cfd9aa66d7..fa0210be608 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,6 +6,11 @@ type AlertPayload = { message: string };
 
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
+const buttonClasses =
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+
+const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
+
 export default function AlertDialogDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
   const [triggerId, setTriggerId] = React.useState<string | null>(null);
@@ -19,7 +24,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <AlertDialog.Trigger
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className={dangerButtonClasses}
           handle={demoAlertDialog}
           id="alert-trigger-1"
           payload={{ message: 'Discard draft?' }}
@@ -28,7 +33,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         </AlertDialog.Trigger>
 
         <AlertDialog.Trigger
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className={dangerButtonClasses}
           handle={demoAlertDialog}
           id="alert-trigger-2"
           payload={{ message: 'Delete project?' }}
@@ -37,7 +42,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         </AlertDialog.Trigger>
 
         <AlertDialog.Trigger
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className={buttonClasses}
           handle={demoAlertDialog}
           id="alert-trigger-3"
           payload={{ message: 'Sign out?' }}
@@ -47,7 +52,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className={buttonClasses}
           onClick={() => {
             setTriggerId('alert-trigger-2');
             setOpen(true);
@@ -65,21 +70,19 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <AlertDialog.Portal>
-            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-            <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-              <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-bold">
-                {payload?.message ?? 'Are you sure?'}
-              </AlertDialog.Title>
-              <AlertDialog.Description className="mb-6 text-base text-gray-600">
-                This action cannot be undone.
-              </AlertDialog.Description>
-              <div className="flex justify-end gap-4">
-                <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-                  Cancel
-                </AlertDialog.Close>
-                <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-                  Confirm
-                </AlertDialog.Close>
+            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+            <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+              <div className="flex flex-col gap-1">
+                <AlertDialog.Title className="text-base font-bold">
+                  {payload?.message ?? 'Are you sure?'}
+                </AlertDialog.Title>
+                <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                  This action cannot be undone.
+                </AlertDialog.Description>
+              </div>
+              <div className="flex justify-end gap-3">
+                <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
+                <AlertDialog.Close className={dangerButtonClasses}>Confirm</AlertDialog.Close>
               </div>
             </AlertDialog.Popup>
           </AlertDialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/css-modules/index.tsx
index e837da6ccc6..6ef4bc0c13d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/css-modules/index.tsx
@@ -19,10 +19,12 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
         <AlertDialog.Portal>
           <AlertDialog.Backdrop className={styles.Backdrop} />
           <AlertDialog.Popup className={styles.Popup}>
-            <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
-            <AlertDialog.Description className={styles.Description}>
-              This action cannot be undone.
-            </AlertDialog.Description>
+            <div className={styles.Intro}>
+              <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
+              <AlertDialog.Description className={styles.Description}>
+                This action cannot be undone.
+              </AlertDialog.Description>
+            </div>
             <div className={styles.Actions}>
               <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
               <AlertDialog.Close className={`${styles.Button} ${styles.DangerButton}`}>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 896f6e464de..b863dcec53b 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,33 +4,31 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const demoAlertDialog = AlertDialog.createHandle();
 
+const buttonClasses =
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+
+const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
+
 export default function AlertDialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
-      <AlertDialog.Trigger
-        className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
-        handle={demoAlertDialog}
-      >
+      <AlertDialog.Trigger className={dangerButtonClasses} handle={demoAlertDialog}>
         Discard draft
       </AlertDialog.Trigger>
 
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
-          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-            <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-bold">
-              Discard draft?
-            </AlertDialog.Title>
-            <AlertDialog.Description className="mb-6 text-base text-gray-600">
-              This action cannot be undone.
-            </AlertDialog.Description>
-            <div className="flex justify-end gap-4">
-              <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-                Cancel
-              </AlertDialog.Close>
-              <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-                Discard
-              </AlertDialog.Close>
+          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <div className="flex flex-col gap-1">
+              <AlertDialog.Title className="text-base font-bold">Discard draft?</AlertDialog.Title>
+              <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                This action cannot be undone.
+              </AlertDialog.Description>
+            </div>
+            <div className="flex justify-end gap-3">
+              <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
+              <AlertDialog.Close className={dangerButtonClasses}>Discard</AlertDialog.Close>
             </div>
           </AlertDialog.Popup>
         </AlertDialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 0ced260ed99..de23a0e4799 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -3,37 +3,69 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   &[data-color='red'] {
-    color: var(--color-red);
+    color: oklch(50.5% 0.213 27.518deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.4% 0.191 22.216deg);
+    }
   }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
@@ -51,7 +83,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
@@ -62,6 +94,9 @@
 
 .Popup {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -69,42 +104,55 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-300);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  transition: all 150ms;
+  padding: 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.tsx
index b592b68271b..676e8bed888 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.tsx
@@ -10,10 +10,12 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Portal>
         <AlertDialog.Backdrop className={styles.Backdrop} />
         <AlertDialog.Popup className={styles.Popup}>
-          <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
-          <AlertDialog.Description className={styles.Description}>
-            You can't undo this action.
-          </AlertDialog.Description>
+          <div className={styles.Intro}>
+            <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
+            <AlertDialog.Description className={styles.Description}>
+              You can't undo this action.
+            </AlertDialog.Description>
+          </div>
           <div className={styles.Actions}>
             <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
             <AlertDialog.Close data-color="red" className={styles.Button}>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index ef4b2c7e53f..cbb9dc6808d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,27 +1,26 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
+const buttonClasses =
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+
+const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
+
 export default function ExampleAlertDialog() {
   return (
     <AlertDialog.Root>
-      <AlertDialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-        Discard draft
-      </AlertDialog.Trigger>
+      <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
-        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-          <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-bold">
-            Discard draft?
-          </AlertDialog.Title>
-          <AlertDialog.Description className="mb-6 text-base text-gray-600">
-            You can’t undo this action.
-          </AlertDialog.Description>
-          <div className="flex justify-end gap-4">
-            <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-              Cancel
-            </AlertDialog.Close>
-            <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-red-800 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-              Discard
-            </AlertDialog.Close>
+        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <div className="flex flex-col gap-1">
+            <AlertDialog.Title className="text-base font-bold">Discard draft?</AlertDialog.Title>
+            <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+              You can’t undo this action.
+            </AlertDialog.Description>
+          </div>
+          <div className="flex justify-end gap-3">
+            <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
+            <AlertDialog.Close className={dangerButtonClasses}>Discard</AlertDialog.Close>
           </div>
         </AlertDialog.Popup>
       </AlertDialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index ae8d7f09077..7d375c44f8a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -1,25 +1,45 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
-  &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
   }
 
-  @media (min-width: 500px) {
-    width: 20rem;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -30,7 +50,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -39,46 +63,50 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.5rem;
-  overscroll-behavior: contain;
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
+.Viewport {
+  box-sizing: border-box;
+  max-height: min(var(--available-height), 22.5rem);
+  padding-block: 0.25rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.25rem;
+}
+
 .Item {
   box-sizing: border-box;
   outline: 0;
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -86,9 +114,12 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -107,7 +138,19 @@
 .MovieYear {
   font-size: 0.875rem;
   line-height: 1rem;
-  opacity: 0.8;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
+
+  .Item[data-highlighted] & {
+    color: oklch(87% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(55.6% 0 0deg);
+    }
+  }
 }
 
 .Status {
@@ -115,27 +158,27 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.25rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   font-size: 0.875rem;
-  text-align: center;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Spinner {
   box-sizing: border-box;
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid var(--color-gray-200);
-  border-top: 2px solid var(--color-gray-600);
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 50%;
-  animation: spin 1s linear infinite;
+  border: 1px solid currentColor;
+  border-right-color: transparent;
+  animation: autocompleteSpinner 0.75s linear infinite;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
+@keyframes autocompleteSpinner {
   100% {
     transform: rotate(360deg);
   }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
index 0ddfec204d1..4211e585e13 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleAsyncAutocomplete() {
     if (isPending) {
       return (
         <React.Fragment>
-          <div className={styles.Spinner} aria-hidden />
+          <span className={styles.Spinner} aria-hidden />
           Searching…
         </React.Fragment>
       );
@@ -83,19 +83,21 @@ export default function ExampleAsyncAutocomplete() {
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className={styles.Positioner} sideOffset={4} align="start">
           <Autocomplete.Popup className={styles.Popup} aria-busy={isPending || undefined}>
-            <Autocomplete.Status>
-              {status && <div className={styles.Status}>{status}</div>}
-            </Autocomplete.Status>
-            <Autocomplete.List>
-              {(movie: Movie) => (
-                <Autocomplete.Item key={movie.id} className={styles.Item} value={movie}>
-                  <span className={styles.MovieItem}>
-                    <span className={styles.MovieName}>{movie.title}</span>
-                    <span className={styles.MovieYear}>{movie.year}</span>
-                  </span>
-                </Autocomplete.Item>
-              )}
-            </Autocomplete.List>
+            <div className={styles.Viewport}>
+              <Autocomplete.Status>
+                {status && <div className={styles.Status}>{status}</div>}
+              </Autocomplete.Status>
+              <Autocomplete.List>
+                {(movie: Movie) => (
+                  <Autocomplete.Item key={movie.id} className={styles.Item} value={movie}>
+                    <span className={styles.MovieItem}>
+                      <span className={styles.MovieName}>{movie.title}</span>
+                      <span className={styles.MovieYear}>{movie.year}</span>
+                    </span>
+                  </Autocomplete.Item>
+                )}
+              </Autocomplete.List>
+            </div>
           </Autocomplete.Popup>
         </Autocomplete.Positioner>
       </Autocomplete.Portal>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 435c339c9ad..21f2cc9625d 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -17,8 +17,8 @@ export default function ExampleAsyncAutocomplete() {
     if (isPending) {
       return (
         <React.Fragment>
-          <div
-            className="size-4 rounded-full border-2 border-gray-200 border-t-gray-600 animate-spin"
+          <span
+            className="inline-block size-3 animate-spin rounded-full border border-current border-r-transparent rtl:border-r-current rtl:border-l-transparent"
             aria-hidden
           />
           Searching…
@@ -77,41 +77,45 @@ export default function ExampleAsyncAutocomplete() {
       itemToStringValue={(item) => item.title}
       filter={null}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="start">
           <Autocomplete.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <Autocomplete.Status>
-              {status && (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-8 text-sm text-gray-600">
-                  {status}
-                </div>
-              )}
-            </Autocomplete.Status>
-            <Autocomplete.List>
-              {(movie: Movie) => (
-                <Autocomplete.Item
-                  key={movie.id}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
-                  value={movie}
-                >
-                  <span className="flex w-full flex-col gap-1">
-                    <span className="font-bold leading-5">{movie.title}</span>
-                    <span className="text-sm leading-4 opacity-80">{movie.year}</span>
-                  </span>
-                </Autocomplete.Item>
-              )}
-            </Autocomplete.List>
+            <div className="max-h-[min(var(--available-height),22.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+              <Autocomplete.Status>
+                {status && (
+                  <div className="flex items-center gap-2 py-1 pr-8 pl-2 text-sm text-neutral-500 dark:text-neutral-400">
+                    {status}
+                  </div>
+                )}
+              </Autocomplete.Status>
+              <Autocomplete.List>
+                {(movie: Movie) => (
+                  <Autocomplete.Item
+                    key={movie.id}
+                    className="group flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                    value={movie}
+                  >
+                    <span className="flex w-full flex-col gap-1">
+                      <span className="font-bold leading-5">{movie.title}</span>
+                      <span className="text-sm leading-4 text-neutral-500 dark:text-neutral-400 group-data-highlighted:text-neutral-300 dark:group-data-highlighted:text-neutral-500">
+                        {movie.year}
+                      </span>
+                    </span>
+                  </Autocomplete.Item>
+                )}
+              </Autocomplete.List>
+            </div>
           </Autocomplete.Popup>
         </Autocomplete.Positioner>
       </Autocomplete.Portal>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 2aeb94e5b24..7086b1c7bde 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -1,25 +1,45 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
-  &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
   }
 
-  @media (min-width: 500px) {
-    width: 20rem;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -30,7 +50,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -39,23 +63,18 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: 23rem;
   max-width: var(--available-width);
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
@@ -63,10 +82,10 @@
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-block: 0.5rem;
-  scroll-padding-block: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-block: 0.25rem;
   outline: 0;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
 
   &[data-empty] {
     padding: 0;
@@ -79,16 +98,20 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -96,16 +119,23 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 1rem;
-  font-size: 0.925rem;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index dd3b01a478c..081d73fd0fd 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -4,25 +4,27 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocompleteAutoHighlight() {
   return (
     <Autocomplete.Root items={tags} autoHighlight>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-gray-600">No tags found.</div>
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                No tags found.
+              </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index ed2f920cd29..bf7ec18722e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -3,34 +3,53 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   cursor: default;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -49,6 +68,10 @@
   &[data-ending-style] {
     opacity: 0;
   }
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
 }
 
 .Viewport {
@@ -66,63 +89,73 @@
   position: relative;
   width: calc(100vw - 1rem);
   max-width: 28rem;
-  border-radius: 1rem;
   background-color: white;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   transition:
     transform 150ms,
     opacity 150ms;
   max-height: min(36rem, calc(100dvh - 5rem));
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: translateY(-1rem) scale(0.95);
   }
-
-  outline: 1px solid rgb(0 0 0 / 0.04);
-  box-shadow:
-    0 0.5px 1px rgb(0 0 0 / 0.12),
-    0 1px 3px -1px rgb(0 0 0 / 0.04),
-    0 2px 4px -1px rgb(0 0 0 / 0.04),
-    0 4px 8px -2px rgb(0 0 0 / 0.04),
-    0 12px 14px -4px rgb(0 0 0 / 0.04),
-    0 24px 64px -8px rgb(0 0 0 / 0.04),
-    0 40px 48px -32px rgb(0 0 0 / 0.04);
-
-  @media (prefers-color-scheme: dark) {
-    background-color: oklch(20% 0.5% 264deg);
-    outline: 1px solid rgb(255 255 255 / 0.25);
-  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding: 1rem;
+  position: relative;
+  z-index: 1;
+  padding: 0 0.75rem;
   margin: 0;
   border: none;
-  border-bottom: 1px solid var(--color-gray-100);
   width: 100%;
-  height: auto;
+  height: 2.5rem;
   border-radius: 0;
   font-family: inherit;
-  font-size: 1rem;
-  background-color: transparent;
-  color: var(--color-gray-900);
-  letter-spacing: 0.016em;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   &::placeholder {
-    font-weight: 400;
-    color: var(--color-gray-500);
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus {
-    border-bottom-color: var(--color-gray-100);
-    outline: none;
+    outline: 2px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -133,6 +166,11 @@
   min-height: 0;
   max-height: min(60dvh, 24rem);
   overflow: hidden;
+  border-top: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+  }
 }
 
 .ListViewport {
@@ -143,14 +181,18 @@
   scroll-padding-block: 0.25rem;
 
   &:focus-visible {
-    outline: 1px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .List {
   box-sizing: border-box;
-  padding: 0.5rem;
+  padding: 0.25rem 0;
 
   &:empty {
     padding: 0;
@@ -167,17 +209,20 @@
 
 .GroupLabel {
   outline: 0;
-  cursor: default;
   user-select: none;
   display: flex;
   align-items: center;
   min-height: 2rem;
-  padding: 0 0.875rem;
-  font-size: 0.9375rem;
-  letter-spacing: 0.00625em;
+  margin: 0;
+  padding: 0 1.5rem 0 0.75rem;
+  font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Item {
@@ -187,19 +232,21 @@
   user-select: none;
   scroll-margin-block: 0.25rem;
   min-height: 2rem;
-  padding: 0 0.75rem 0 2.25rem;
-  border-radius: 0.375rem;
+  padding: 0 1.5rem;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.5rem;
   align-items: center;
-  font-size: 0.9375rem;
-  letter-spacing: 0.016em;
+  font-size: 0.875rem;
   line-height: 1.25;
   font-weight: 400;
 
   &[data-highlighted] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 }
 
@@ -213,12 +260,19 @@
 
 .ItemType {
   font-size: 0.875rem;
-  color: var(--color-gray-500);
-  letter-spacing: 0.00625em;
+  color: oklch(55.6% 0 0deg);
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
+
   [data-highlighted] & {
-    color: var(--color-gray-700);
+    color: oklch(37.1% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(87% 0 0deg);
+    }
   }
 }
 
@@ -226,35 +280,48 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  font-size: 0.925rem;
+  justify-content: flex-start;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
   min-height: 8rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Scrollbar {
   display: flex;
   justify-content: center;
-  width: 1.5rem;
-  margin-right: -0.25rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  background-color: rgb(0 0 0 / 12%);
+  width: 0.5rem;
+  opacity: 0;
+  transition: opacity 150ms;
+  pointer-events: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
+  &[data-scrolling] {
+    transition-duration: 0ms;
+  }
+
+  &[data-hovering],
+  &[data-scrolling] {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 .ScrollbarThumb {
-  display: flex;
-  justify-content: center;
   width: 100%;
+  background-color: oklch(14.5% 0 0deg);
 
-  &::before {
-    content: '';
-    display: block;
-    height: 100%;
-    width: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-400);
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
   }
 }
 
@@ -263,18 +330,23 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.625rem 0.75rem;
-  border-top: 1px solid var(--color-gray-200);
+  border-top: 1px solid oklch(14.5% 0 0deg);
   font-size: 0.75rem;
-  color: var(--color-gray-600);
-  background-color: var(--color-gray-50);
-  border-radius: 0 0 1rem 1rem;
+  color: oklch(43.9% 0 0deg);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    color: oklch(70.8% 0 0deg);
+    background-color: oklch(14.5% 0 0deg);
+  }
 }
 
 .FooterLeft,
 .FooterRight {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .Kbd {
@@ -289,10 +361,15 @@
     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
   font-weight: 400;
   line-height: 1;
-  color: var(--color-gray-700);
-  background-color: var(--color-gray-100);
-  border: 1px solid var(--color-gray-300);
-  border-radius: 0.25rem;
+  color: oklch(43.9% 0 0deg);
+  background-color: oklch(97% 0 0deg);
+  border: 1px solid oklch(70.8% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+    background-color: oklch(20.5% 0 0deg);
+    border: 1px solid oklch(43.9% 0 0deg);
+  }
 }
 
 .VisuallyHiddenClose {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index c35599d1aeb..6deff901766 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -13,14 +13,14 @@ export default function ExampleAutocompleteCommandPalette() {
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger className="flex h-10 cursor-default items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-8 cursor-default items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
         Open command palette
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-start justify-center overflow-hidden px-2 pt-18 pb-2">
           <Dialog.Popup
-            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col overflow-hidden rounded-2xl bg-white text-gray-900 outline-1 outline-black/4 shadow-[0_.5px_1px_hsl(0_0%_0%/12%),0_1px_3px_-1px_hsl(0_0%_0%/4%),0_2px_4px_-1px_hsl(0_0%_0%/4%),0_4px_8px_-2px_hsl(0_0%_0%/4%),0_12px_14px_-4px_hsl(0_0%_0%/4%),0_24px_64px_-8px_hsl(0_0%_0%/4%),0_40px_48px_-32px_hsl(0_0%_0%/4%)] transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:bg-[oklch(20%_0.5%_264deg)] dark:outline-white/25"
+            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-md flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[translate,scale,opacity] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-label="Command palette"
           >
             <Autocomplete.Root
@@ -31,28 +31,28 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="w-full border-0 border-b border-gray-100 bg-transparent p-4 text-base font-normal tracking-[0.016em] text-gray-900 placeholder:text-gray-500 outline-none"
+                className="relative z-1 h-10 w-full border-0 bg-white px-3 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
 
-              <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden">
-                <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
+              <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden border-t border-neutral-950 dark:border-t-white">
+                <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   <ScrollArea.Content style={{ minWidth: '100%' }}>
                     <Autocomplete.Empty>
-                      <div className="flex min-h-32 items-center justify-center p-4 text-[0.925rem] leading-4 text-gray-600">
+                      <div className="flex min-h-32 items-center justify-start py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                         No results found.
                       </div>
                     </Autocomplete.Empty>
 
-                    <Autocomplete.List className="p-2">
+                    <Autocomplete.List className="py-1">
                       {(group: Group) => (
                         <Autocomplete.Group
                           key={group.value}
                           items={group.items}
                           className="not-last:mb-1"
                         >
-                          <Autocomplete.GroupLabel className="m-0 flex h-8 items-center px-3.5 text-[0.9375rem] tracking-[0.00625em] font-normal leading-none text-gray-600 select-none outline-none">
+                          <Autocomplete.GroupLabel className="flex min-h-8 items-center pr-6 pl-3 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400">
                             {group.value}
                           </Autocomplete.GroupLabel>
                           <Autocomplete.Collection>
@@ -61,10 +61,10 @@ export default function ExampleAutocompleteCommandPalette() {
                                 key={item.value}
                                 value={item}
                                 onClick={handleItemClick}
-                                className="grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded-md pl-9 pr-3 text-[0.9375rem] tracking-[0.016em] font-normal leading-[1.25] select-none outline-none [scroll-margin-block:0.25rem] data-[highlighted]:bg-gray-100"
+                                className="group grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-6 text-sm font-normal leading-[1.25] outline-none select-none [scroll-margin-block:0.25rem] data-highlighted:bg-neutral-100 dark:data-highlighted:bg-neutral-800"
                               >
-                                <span className="truncate font-normal">{item.label}</span>
-                                <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-gray-500 data-[highlighted]:text-gray-700">
+                                <span className="min-w-0 truncate font-normal">{item.label}</span>
+                                <span className="shrink-0 whitespace-nowrap text-sm text-neutral-500 group-data-highlighted:text-neutral-700 dark:text-neutral-400 dark:group-data-highlighted:text-neutral-300">
                                   {group.value === 'Suggestions' ? 'Application' : 'Command'}
                                 </span>
                               </Autocomplete.Item>
@@ -75,24 +75,24 @@ export default function ExampleAutocompleteCommandPalette() {
                     </Autocomplete.List>
                   </ScrollArea.Content>
                 </ScrollArea.Viewport>
-                <ScrollArea.Scrollbar className="-mr-1 flex w-6 justify-center py-2">
-                  <ScrollArea.Thumb className="flex w-full justify-center before:block before:h-full before:w-1 before:rounded-sm before:bg-gray-400 before:content-['']" />
+                <ScrollArea.Scrollbar className="flex w-2 justify-center bg-black/12 opacity-0 transition-opacity duration-150 pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto dark:bg-white/12">
+                  <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
                 </ScrollArea.Scrollbar>
               </ScrollArea.Root>
 
-              <div className="flex items-center justify-between border-t border-gray-200 bg-gray-50 px-3 py-2.5 text-xs text-gray-600">
-                <div className="flex items-center gap-2">
+              <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-3 py-2.5 text-xs text-neutral-600 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
+                <div className="flex items-center gap-1">
                   <span>Activate</span>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-gray-300 bg-gray-100 px-1 text-[0.625rem] font-normal text-gray-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
                     Enter
                   </kbd>
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1">
                   <span>Actions</span>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-gray-300 bg-gray-100 px-1 text-[0.625rem] font-normal text-gray-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
                     Cmd
                   </kbd>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-gray-300 bg-gray-100 px-1 text-[0.625rem] font-normal text-gray-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
                     K
                   </kbd>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 063ef01314e..0f8ae4d3106 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -5,31 +5,55 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
-  @media (min-width: 500px) {
-    width: 20rem;
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -39,27 +63,18 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 28rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.5rem;
-  overscroll-behavior: contain;
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
@@ -67,6 +82,11 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  padding-block: 0.25rem;
+  max-height: min(var(--available-height), 28rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.25rem;
 }
 
 .Item {
@@ -74,9 +94,9 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1.5rem;
 
   &[data-highlighted] {
@@ -89,9 +109,12 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-200);
+    inset-inline: 0;
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 }
 
@@ -117,24 +140,32 @@
 
 .ItemDescription {
   font-size: 0.875rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
   line-height: 1.25rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 0.5rem 1rem;
+  color: oklch(55.6% 0 0deg);
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Item mark {
   background-color: transparent;
-  color: var(--color-blue);
+  color: oklch(42.4% 0.199 265.638deg);
   font-weight: 700;
-}
 
-.ItemCategory mark {
-  color: var(--color-blue);
+  @media (prefers-color-scheme: dark) {
+    color: oklch(62.3% 0.214 259.815deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 779dcf99396..42af89d7d4b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -10,29 +10,29 @@ export default function ExampleFuzzyMatchingAutocomplete() {
       filter={fuzzyFilter}
       itemToStringValue={(item) => item.title}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-(--anchor-width) max-w-(--available-width) border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+              <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{<Autocomplete.Value />}"
               </div>
             </Autocomplete.Empty>
 
-            <Autocomplete.List className="flex flex-col">
+            <Autocomplete.List className="flex max-h-[min(var(--available-height),28rem)] flex-col overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
               {(item: FuzzyItem) => (
                 <Autocomplete.Item
                   key={item.title}
                   value={item}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-200"
+                  className="flex cursor-default py-3 pr-2 pl-2 text-sm leading-6 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-100 dark:data-highlighted:before:bg-neutral-800"
                 >
                   <Autocomplete.Value>
                     {(value) => (
@@ -42,7 +42,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
                             {highlightText(item.title, value)}
                           </span>
                         </span>
-                        <span className="text-sm leading-5 text-gray-600">
+                        <span className="text-sm text-neutral-500 dark:text-neutral-400">
                           {highlightText(item.description, value)}
                         </span>
                       </span>
@@ -70,7 +70,7 @@ function highlightText(text: string, query: string): React.ReactNode {
 
   return text.split(regex).map((part, idx) =>
     regex.test(part) ? (
-      <mark key={idx} className="text-blue-800 bg-transparent font-bold">
+      <mark key={idx} className="bg-transparent font-bold text-blue-800 dark:text-blue-500">
         {part}
       </mark>
     ) : (
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 0e9f7d56841..e00c1e24da2 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -4,58 +4,110 @@
 }
 
 .InputGroup {
+  position: relative;
   display: flex;
-  gap: 0.5rem;
-  align-items: center;
+  width: 100%;
 }
 
 .TextInput {
   box-sizing: border-box;
-  padding-left: 0.875rem;
-  margin: 0;
-  border: 1px solid var(--color-gray-200);
   flex: 1;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  padding: 0 0.5rem;
+  margin: 0;
+  margin-right: -1px;
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-right: 0;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   outline: none;
+  background-color: white;
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    border-right: 0;
+    color: white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+    position: relative;
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .EmojiButton {
   box-sizing: border-box;
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
+
   &:hover {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
-  &:focus-visible {
-    border-color: var(--color-blue);
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -70,67 +122,101 @@
   padding-right: 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
+  border: 1px solid oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
   min-width: 9rem;
-  background-color: canvas;
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.TriggerIcon {
-  display: flex;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .InputContainer {
   box-sizing: border-box;
+  position: relative;
+  z-index: 2;
   width: 16rem;
-  height: calc(var(--input-container-height));
-  text-align: center;
-  background: canvas;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 0.25rem;
+  height: var(--input-container-height);
+  background: white;
+
+  @media (prefers-color-scheme: dark) {
+    background: oklch(14.5% 0 0deg);
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
+  border-radius: 0;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -139,11 +225,10 @@
 }
 
 .Popup {
-  --input-container-height: 3rem;
+  --input-container-height: 2rem;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -151,32 +236,31 @@
   max-width: var(--available-width);
   max-height: 20.5rem;
 
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.9);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
 }
 
 .List {
   overflow: auto;
-  scroll-padding-top: 2.5rem;
+  scroll-padding-top: 0.25rem;
   scroll-padding-bottom: 0.35rem;
   overscroll-behavior: contain;
   max-height: min(
-    calc(20.5rem - var(--input-container-height)),
-    calc(var(--available-height) - var(--input-container-height))
+    calc(20.5rem - var(--input-container-height) - 2px),
+    calc(var(--available-height) - var(--input-container-height) - 2px)
   );
 
   &:empty {
@@ -184,25 +268,17 @@
   }
 }
 
-.ListContainer {
-  padding: 0.5rem;
-}
-
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--color-gray-600);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  background-color: canvas;
-  border-bottom: 1px solid var(--color-gray-100);
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  margin: 0;
-  width: 100%;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: oklch(55.6% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Group {
@@ -210,7 +286,7 @@
 }
 
 .Grid {
-  padding: 0.25rem;
+  padding: 0 0.5rem 0.25rem;
 }
 
 .Row {
@@ -230,21 +306,27 @@
   min-width: var(--anchor-width);
   height: 2.5rem;
   padding: 0.5rem 0.125rem;
-  border-radius: 0.375rem;
   background: transparent;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
 
     &::before {
       content: '';
       z-index: -1;
       position: absolute;
       inset: 0;
-      border-radius: 0.375rem;
-      background-color: var(--color-gray-200);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 }
@@ -252,7 +334,6 @@
 .Emoji {
   font-size: 1.5rem;
   line-height: 1;
-  margin-bottom: 0.25rem;
 }
 
 .Name {
@@ -273,8 +354,12 @@
 
 .Empty {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 1rem;
-  font-size: 0.925rem;
+  padding: 0.75rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index b227938047b..d7d46cbea38 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -31,11 +31,11 @@ export default function ExampleEmojiPicker() {
 
   return (
     <div className="mx-auto w-[16rem]">
-      <div className="flex items-center gap-2">
+      <div className="relative flex w-full">
         <input
           ref={textInputRef}
           type="text"
-          className="h-10 flex-1 font-normal rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="-mr-px h-8 flex-1 border border-r-0 border-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -55,47 +55,48 @@ export default function ExampleEmojiPicker() {
           }}
         >
           <Autocomplete.Trigger
-            className="size-10 rounded-md border border-gray-200 bg-[canvas] text-[1.25rem] text-gray-900 outline-hidden hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100"
+            className="flex size-8 items-center justify-center border border-neutral-950 bg-transparent text-xl leading-none text-neutral-950 outline-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-solid focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-popup-open:bg-neutral-100 dark:border-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
             aria-label="Choose emoji"
           >
             😀
           </Autocomplete.Trigger>
           <Autocomplete.Portal>
-            <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="end">
-              <Autocomplete.Popup className="[--input-container-height:3rem] max-w-[var(--available-width)] max-h-[20.5rem] origin-[var(--transform-origin)] rounded-lg bg-[canvas] shadow-lg shadow-gray-200 text-gray-900 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-                <div className="mx-1 flex h-[var(--input-container-height)] w-64 items-center justify-center bg-[canvas] text-center">
+            <Autocomplete.Positioner className="outline-0" sideOffset={4} align="end">
+              <Autocomplete.Popup
+                className="[--input-container-height:2rem] max-h-[20.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+                aria-label="Select emoji"
+              >
+                <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+                    className="h-8 w-full border-0 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white"
                   />
                 </div>
                 <Autocomplete.Empty>
-                  <div className="px-4 pb-4 pt-2 text-[0.925rem] leading-4 text-gray-600">
+                  <div className="px-2 py-3 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                     No emojis found
                   </div>
                 </Autocomplete.Empty>
-                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)),calc(var(--available-height)-var(--input-container-height)))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain">
+                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-1 scroll-pb-[0.35rem] overscroll-contain empty:p-0">
                   {(group: EmojiGroup) => (
                     <Autocomplete.Group key={group.value} items={group.items} className="block">
-                      <Autocomplete.GroupLabel className="sticky top-0 z-[1] m-0 w-full border-b border-gray-100 bg-[canvas] px-4 pb-1 pt-2 text-[0.75rem] font-bold uppercase tracking-wide text-gray-600">
+                      <Autocomplete.GroupLabel className="p-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                         {group.label}
                       </Autocomplete.GroupLabel>
-                      <div className="p-1" role="presentation">
+                      <div className="px-2 pb-1 pt-0" role="presentation">
                         {chunkArray(group.items, COLUMNS).map((row, rowIdx) => (
                           <Autocomplete.Row key={rowIdx} className="grid grid-cols-5">
                             {row.map((rowItem) => (
                               <Autocomplete.Item
                                 key={rowItem.emoji}
                                 value={rowItem}
-                                className="group min-w-[var(--anchor-width)] select-none flex h-10 flex-col items-center justify-center rounded-md bg-transparent px-0.5 py-2 text-gray-900 outline-hidden data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-md data-[highlighted]:before:bg-gray-200"
+                                className="group flex h-10 min-w-[var(--anchor-width)] cursor-default flex-col items-center justify-center bg-transparent px-0.5 py-2 text-neutral-950 outline-0 select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-100 dark:text-white dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-neutral-800"
                                 onClick={() => {
                                   handleInsertEmoji(rowItem.emoji);
                                   setPickerOpen(false);
                                 }}
                               >
-                                <span className="mb-1 text-[1.5rem] leading-none">
-                                  {rowItem.emoji}
-                                </span>
+                                <span className="text-2xl leading-none">{rowItem.emoji}</span>
                               </Autocomplete.Item>
                             ))}
                           </Autocomplete.Row>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 1e6bfc23f89..d2d0efaac2b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -1,25 +1,45 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
-  &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 
-  @media (min-width: 500px) {
-    width: 20rem;
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -30,7 +50,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -39,30 +63,27 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: 22.5rem;
   max-width: var(--available-width);
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
 .List {
   box-sizing: border-box;
   overflow-y: auto;
-  scroll-padding-top: 2.25rem;
-  scroll-padding-bottom: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-top: 0.25rem;
+  scroll-padding-bottom: 0.25rem;
   overscroll-behavior: contain;
   max-height: min(22.5rem, var(--available-height));
   outline: 0;
@@ -75,21 +96,23 @@
 .Group {
   display: block;
   padding-bottom: 0.5rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
 }
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  background-color: canvas;
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  margin: 0 0.5rem 0 0;
-  width: calc(100% - 0.5rem);
+  user-select: none;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Item {
@@ -97,15 +120,19 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.5rem 2rem 0.5rem 1rem;
+  padding: 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -113,22 +140,33 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(97% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 1rem;
-  font-size: 0.925rem;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 80ffb03bedb..a8f4555e400 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -4,33 +4,37 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleGroupAutocomplete() {
   return (
     <Autocomplete.Root items={groupedTags}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] rounded-lg bg-[canvas] text-gray-900 outline-1 outline-gray-200 shadow-lg shadow-gray-200 dark:outline-gray-300 dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
               </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-[empty]:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto py-1 scroll-py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(group: TagGroup) => (
-                <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
-                  <Autocomplete.GroupLabel className="sticky top-0 z-[1] mb-0 mr-2 mt-0 ml-0 w-[calc(100%-0.5rem)] bg-[canvas] px-4 pb-1 pt-2 text-xs font-bold uppercase tracking-wider">
+                <Autocomplete.Group
+                  key={group.value}
+                  items={group.items}
+                  className="block pb-2 last:pb-0"
+                >
+                  <Autocomplete.GroupLabel className="p-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Autocomplete.GroupLabel>
                   <Autocomplete.Collection>
                     {(tag: Tag) => (
                       <Autocomplete.Item
                         key={tag.id}
-                        className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                         value={tag}
                       >
                         {tag.label}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index fafc21490ee..521a975f3e2 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -1,25 +1,45 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
-  &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
 
-  @media (min-width: 500px) {
-    width: 20rem;
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -30,7 +50,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -39,23 +63,18 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: 23rem;
   max-width: var(--available-width);
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
@@ -63,10 +82,10 @@
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-block: 0.5rem;
-  scroll-padding-block: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-block: 0.25rem;
   outline: 0;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
 
   &[data-empty] {
     padding: 0;
@@ -79,16 +98,20 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -96,22 +119,33 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(97% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 1rem;
-  font-size: 0.925rem;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 70aa047b685..9caaf30177f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -4,25 +4,27 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocomplete() {
   return (
     <Autocomplete.Root items={tags}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:opacity-100 placeholder:text-neutral-500 placeholder:[-webkit-text-fill-color:var(--color-neutral-500)] dark:placeholder:text-neutral-400 dark:placeholder:[-webkit-text-fill-color:var(--color-neutral-400)] focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-gray-600">No tags found.</div>
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                No tags found.
+              </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index c4221adb3c8..b18b0bdcf1e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -6,26 +6,46 @@
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
-  &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
 
-  @media (min-width: 500px) {
-    width: 20rem;
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -36,7 +56,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -49,23 +73,18 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: 23rem;
   max-width: var(--available-width);
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
@@ -73,10 +92,10 @@
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-block: 0.5rem;
-  scroll-padding-block: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-block: 0.25rem;
   outline: 0;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
 
   &[data-empty] {
     padding: 0;
@@ -89,17 +108,21 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: flex;
   align-items: center;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -107,8 +130,11 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index 3f678663b7a..4a98844e0e8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -4,22 +4,22 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocompleteInline() {
   return (
     <Autocomplete.Root items={tags} mode="both">
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
-        <Autocomplete.Positioner className="outline-hidden data-[empty]:hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
+        <Autocomplete.Positioner className="outline-hidden data-empty:hidden" sideOffset={4}>
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index 50870736782..b77280e2385 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -1,25 +1,45 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
-  &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 
-  @media (min-width: 500px) {
-    width: 20rem;
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -30,7 +50,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -39,27 +63,24 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  padding-block: 0.25rem;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
+  max-height: min(var(--available-height), 22.5rem);
   max-width: var(--available-width);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
@@ -69,16 +90,20 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -86,25 +111,35 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 0.5rem 1rem;
-  font-size: 0.925rem;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Status {
   box-sizing: border-box;
-  margin-top: 0.25rem;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index 275a09469c4..d9084d083a1 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -21,19 +21,19 @@ export default function ExampleAutocompleteLimit() {
 
   return (
     <Autocomplete.Root items={tags} value={value} onValueChange={setValue} limit={limit}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),22.5rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-1 scroll-pb-1 overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+              <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{value}"
               </div>
             </Autocomplete.Empty>
@@ -42,7 +42,7 @@ export default function ExampleAutocompleteLimit() {
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteLimit() {
 
             <Autocomplete.Status>
               {moreCount > 0 ? (
-                <div className="mt-1 px-4 py-2 text-sm leading-5 text-gray-600">
+                <div className="py-2 pr-4 pl-2 text-sm text-neutral-500 dark:text-neutral-400">
                   {`Hiding ${moreCount} results (type a more specific query to narrow results)`}
                 </div>
               ) : null}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index 39fc697d482..823c6efe8ee 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -1,25 +1,37 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
-  &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
   }
 
-  @media (min-width: 500px) {
-    width: 20rem;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -30,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -39,33 +55,28 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
 .Scroller {
   box-sizing: border-box;
-  height: min(22rem, var(--total-size));
+  height: min(22.5rem, var(--total-size));
   max-height: var(--available-height);
   overflow: auto;
   overscroll-behavior: contain;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
 }
 
 .VirtualizedPlaceholder {
@@ -83,16 +94,20 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -100,16 +115,23 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 1rem;
+  color: oklch(55.6% 0 0deg);
+  padding: 1rem 1rem 1rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx
index bd8a4341bc6..59436b3e95e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx
@@ -66,10 +66,10 @@ function VirtualizedList({
     getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 32,
     overscan: 20,
-    paddingStart: 8,
-    paddingEnd: 8,
-    scrollPaddingEnd: 8,
-    scrollPaddingStart: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingEnd: 4,
+    scrollPaddingStart: 4,
   });
 
   React.useImperativeHandle(virtualizerRef, () => virtualizer);
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 616d193350a..dc62677f030 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -30,16 +30,16 @@ export default function ExampleVirtualizedAutocomplete() {
         }
       }}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Autocomplete.Input className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
+        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 outline-1 outline-gray-200 shadow-lg shadow-gray-200 dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-4 text-[0.925rem] leading-4 text-gray-600">
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
               </div>
             </Autocomplete.Empty>
@@ -67,10 +67,10 @@ function VirtualizedList({
     getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 32,
     overscan: 20,
-    paddingStart: 8,
-    paddingEnd: 8,
-    scrollPaddingEnd: 8,
-    scrollPaddingStart: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingEnd: 4,
+    scrollPaddingStart: 4,
   });
 
   React.useImperativeHandle(virtualizerRef, () => virtualizer);
@@ -95,7 +95,7 @@ function VirtualizedList({
     <div
       role="presentation"
       ref={handleScrollElementRef}
-      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-p-2"
+      className="h-[min(22.5rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-1"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
       <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
@@ -112,7 +112,7 @@ function VirtualizedList({
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
               value={item}
-              className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
               aria-setsize={filteredItems.length}
               aria-posinset={virtualItem.index + 1}
               style={{
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
index bf5e9c66394..b0d766924f5 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
@@ -6,13 +6,18 @@
   border-radius: 100%;
   user-select: none;
   font-weight: 400;
-  color: var(--color-gray-900);
-  background-color: var(--color-gray-100);
-  font-size: 1rem;
+  color: oklch(14.5% 0 0deg);
+  background-color: oklch(92.2% 0 0deg);
+  font-size: 0.875rem;
   line-height: 1;
   overflow: hidden;
-  height: 3rem;
-  width: 3rem;
+  height: 2rem;
+  width: 2rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Image {
@@ -27,5 +32,5 @@
   justify-content: center;
   height: 100%;
   width: 100%;
-  font-size: 1rem;
+  font-size: 0.875rem;
 }
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.tsx
index 3fccf92002f..a747c847965 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.tsx
@@ -3,7 +3,7 @@ import styles from './index.module.css';
 
 export default function ExampleAvatar() {
   return (
-    <div style={{ display: 'flex', gap: 20 }}>
+    <div style={{ display: 'flex', gap: '1rem' }}>
       <Avatar.Root className={styles.Root}>
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
index a88e7763a35..87590a4d1d7 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
@@ -2,22 +2,19 @@ import { Avatar } from '@base-ui/react/avatar';
 
 export default function ExampleAvatar() {
   return (
-    <div style={{ display: 'flex', gap: 20 }}>
-      <Avatar.Root className="inline-flex size-12 items-center justify-center overflow-hidden rounded-full bg-gray-100 align-middle text-base text-gray-900 select-none">
+    <div className="flex gap-4">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white">
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
           width="48"
           height="48"
           className="size-full object-cover"
         />
-        <Avatar.Fallback
-          delay={600}
-          className="flex size-full items-center justify-center text-base"
-        >
+        <Avatar.Fallback delay={600} className="flex size-full items-center justify-center text-sm">
           LT
         </Avatar.Fallback>
       </Avatar.Root>
-      <Avatar.Root className="inline-flex size-12 items-center justify-center overflow-hidden rounded-full bg-gray-100 align-middle text-base text-gray-900 select-none">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white">
         LT
       </Avatar.Root>
     </div>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 67d48898127..2b8a29e57c8 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -3,38 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-gray-200);
-    box-shadow: inset 0 1px 3px var(--color-gray-200);
-    border-top-color: var(--color-gray-300);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  &[data-disabled] {
-    color: var(--color-gray-500);
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 890e78bdbda..10f04745840 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500">
+    <Button className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 67d48898127..2b8a29e57c8 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -3,38 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-gray-200);
-    box-shadow: inset 0 1px 3px var(--color-gray-200);
-    border-top-color: var(--color-gray-300);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  &[data-disabled] {
-    color: var(--color-gray-500);
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 4656d339c7f..e4fcae27ae8 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index dc3b49674cb..5861b0af3be 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -3,10 +3,16 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Caption {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -14,47 +20,57 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .Checkbox {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
-  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
-  border: none;
 
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
-  &[data-checked] {
-    background-color: var(--color-gray-900);
+  &[data-checked],
+  &[data-indeterminate] {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Indicator {
   display: flex;
-  color: var(--color-gray-50);
 
   &[data-unchecked] {
     display: none;
   }
 }
-
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index 2c1bf6eea69..bc7da968cc5 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root name="apple" value="fuji-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
@@ -28,7 +28,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root name="apple" value="gala-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
@@ -37,7 +37,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root name="apple" value="granny-smith-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
@@ -48,8 +48,16 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index f544fa923c3..77e729e6725 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -9,46 +9,46 @@ export default function ExampleCheckboxGroup() {
     <CheckboxGroup
       aria-labelledby={id}
       defaultValue={['fuji-apple']}
-      className="flex flex-col items-start gap-1 text-gray-900"
+      className="flex flex-col items-start gap-1 text-neutral-950 dark:text-white"
     >
-      <div className="font-bold" id={id}>
+      <div className="text-sm font-bold" id={id}>
         Apples
       </div>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
-          className="flex size-5 items-center justify-center rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
-          <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
-            <CheckIcon className="size-3" />
+          <Checkbox.Indicator className="flex data-unchecked:hidden">
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="gala-apple"
-          className="flex size-5 items-center justify-center rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
-          <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
-            <CheckIcon className="size-3" />
+          <Checkbox.Indicator className="flex data-unchecked:hidden">
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
       </label>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
-          className="flex size-5 items-center justify-center rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
-          <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
-            <CheckIcon className="size-3" />
+          <Checkbox.Indicator className="flex data-unchecked:hidden">
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
@@ -59,8 +59,16 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index 5da37f280ec..5861b0af3be 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -3,10 +3,16 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Caption {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -14,56 +20,57 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .Checkbox {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
-  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
-  border: none;
-
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
-  }
 
-  &[data-checked] {
-    background-color: var(--color-gray-900);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
+  &[data-checked],
   &[data-indeterminate] {
-    border: 1px solid var(--color-gray-300);
-    background-color: canvas;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Indicator {
   display: flex;
-  color: var(--color-gray-50);
 
   &[data-unchecked] {
     display: none;
   }
-
-  &[data-indeterminate] {
-    color: var(--color-gray-900);
-  }
-}
-
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index 4c2a2e8f04f..35c7c968d21 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -40,13 +40,7 @@ export default function PermissionsForm() {
           <Checkbox.Indicator
             className={styles.Indicator}
             render={(props, state) => (
-              <span {...props}>
-                {state.indeterminate ? (
-                  <HorizontalRuleIcon className={styles.Icon} />
-                ) : (
-                  <CheckIcon className={styles.Icon} />
-                )}
-              </span>
+              <span {...props}>{state.indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}</span>
             )}
           />
         </Checkbox.Root>
@@ -56,7 +50,7 @@ export default function PermissionsForm() {
       <label className={styles.Item}>
         <Checkbox.Root value="view-dashboard" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         View Dashboard
@@ -65,7 +59,7 @@ export default function PermissionsForm() {
       <label className={styles.Item}>
         <Checkbox.Root value="access-reports" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Access Reports
@@ -92,11 +86,7 @@ export default function PermissionsForm() {
               className={styles.Indicator}
               render={(props, state) => (
                 <span {...props}>
-                  {state.indeterminate ? (
-                    <HorizontalRuleIcon className={styles.Icon} />
-                  ) : (
-                    <CheckIcon className={styles.Icon} />
-                  )}
+                  {state.indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}
                 </span>
               )}
             />
@@ -107,7 +97,7 @@ export default function PermissionsForm() {
         <label className={styles.Item}>
           <Checkbox.Root value="create-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
-              <CheckIcon className={styles.Icon} />
+              <CheckIcon />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Create User
@@ -116,7 +106,7 @@ export default function PermissionsForm() {
         <label className={styles.Item}>
           <Checkbox.Root value="edit-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
-              <CheckIcon className={styles.Icon} />
+              <CheckIcon />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Edit User
@@ -125,7 +115,7 @@ export default function PermissionsForm() {
         <label className={styles.Item}>
           <Checkbox.Root value="delete-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
-              <CheckIcon className={styles.Icon} />
+              <CheckIcon />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Delete User
@@ -134,7 +124,7 @@ export default function PermissionsForm() {
         <label className={styles.Item}>
           <Checkbox.Root value="assign-roles" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
-              <CheckIcon className={styles.Icon} />
+              <CheckIcon />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Assign Roles
@@ -146,23 +136,38 @@ export default function PermissionsForm() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
 function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      strokeWidth={1}
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <line
         x1="3"
         y1="12"
         x2="21"
         y2="12"
         stroke="currentColor"
-        strokeWidth={3}
-        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index 5da37f280ec..5861b0af3be 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -3,10 +3,16 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Caption {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -14,56 +20,57 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .Checkbox {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
-  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
-  border: none;
-
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
-  }
 
-  &[data-checked] {
-    background-color: var(--color-gray-900);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
+  &[data-checked],
   &[data-indeterminate] {
-    border: 1px solid var(--color-gray-300);
-    background-color: canvas;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Indicator {
   display: flex;
-  color: var(--color-gray-50);
 
   &[data-unchecked] {
     display: none;
   }
-
-  &[data-indeterminate] {
-    color: var(--color-gray-900);
-  }
-}
-
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index 375ab84636c..a6364da78af 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -24,13 +24,7 @@ export default function ExampleCheckboxGroup() {
           <Checkbox.Indicator
             className={styles.Indicator}
             render={(props, state) => (
-              <span {...props}>
-                {state.indeterminate ? (
-                  <HorizontalRuleIcon className={styles.Icon} />
-                ) : (
-                  <CheckIcon className={styles.Icon} />
-                )}
-              </span>
+              <span {...props}>{state.indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}</span>
             )}
           />
         </Checkbox.Root>
@@ -40,7 +34,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root value="fuji-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
@@ -49,7 +43,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root value="gala-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
@@ -58,7 +52,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root value="granny-smith-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
@@ -69,23 +63,38 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
 function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      strokeWidth={1}
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <line
         x1="3"
         y1="12"
         x2="21"
         y2="12"
         stroke="currentColor"
-        strokeWidth={3}
-        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index 48f2e3229f8..9be042682a6 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -2,50 +2,62 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Checkbox {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
-  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
-  border: none;
 
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
-  &[data-checked] {
-    background-color: var(--color-gray-900);
+  &[data-checked],
+  &[data-indeterminate] {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Indicator {
   display: flex;
-  color: var(--color-gray-50);
 
   &[data-unchecked] {
     display: none;
   }
 }
-
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index 3fa0d995157..d22c16bcba0 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleCheckbox() {
     <label className={styles.Label}>
       <Checkbox.Root defaultChecked className={styles.Checkbox}>
         <Checkbox.Indicator className={styles.Indicator}>
-          <CheckIcon className={styles.Icon} />
+          <CheckIcon />
         </Checkbox.Indicator>
       </Checkbox.Root>
       Enable notifications
@@ -17,8 +17,16 @@ export default function ExampleCheckbox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 30a9b0d80c1..b7143441b9e 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -3,13 +3,13 @@ import { Checkbox } from '@base-ui/react/checkbox';
 
 export default function ExampleCheckbox() {
   return (
-    <label className="flex items-center gap-2 text-base text-gray-900 font-normal">
+    <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
       <Checkbox.Root
         defaultChecked
-        className="flex size-5 items-center justify-center rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
-          <CheckIcon className="size-3" />
+        <Checkbox.Indicator className="flex data-unchecked:hidden">
+          <CheckIcon />
         </Checkbox.Indicator>
       </Checkbox.Root>
       Enable notifications
@@ -19,8 +19,16 @@ export default function ExampleCheckbox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 6281d386434..95984e8c99a 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -1,51 +1,86 @@
 .Collapsible {
   display: flex;
-  width: 14rem;
+  width: 12rem;
   min-height: 9rem;
   flex-direction: column;
   justify-content: center;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-  transition: transform 150ms ease-out;
+  transition: transform 100ms ease-out;
 }
 
 .Trigger {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
-  border: 0;
-  outline: 0;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1.25rem;
   font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-200);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &[data-panel-open] .Icon {
     transform: rotate(90deg);
   }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
 }
 
 .Panel {
@@ -56,7 +91,7 @@
   overflow: hidden;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  transition: all 150ms ease-out;
+  transition: height 150ms ease-out;
 
   &[hidden]:not([hidden='until-found']) {
     display: none;
@@ -72,9 +107,5 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  margin-top: 0.25rem;
-  padding: 0.5rem 0 0.5rem 1.75rem;
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-100);
-  cursor: text;
+  padding: 0.5rem 0.875rem;
 }
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
index 6bf5515d83f..557b1464ee0 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
@@ -6,8 +6,8 @@ export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className={styles.Collapsible}>
       <Collapsible.Trigger className={styles.Trigger}>
-        <ChevronIcon className={styles.Icon} />
         Recovery keys
+        <CaretRightIcon className={styles.Icon} />
       </Collapsible.Trigger>
       <Collapsible.Panel className={styles.Panel}>
         <div className={styles.Content}>
@@ -20,10 +20,17 @@ export default function ExampleCollapsible() {
   );
 }
 
-export function ChevronIcon(props: React.ComponentProps<'svg'>) {
+export function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 47129af3866..8c837c7d27d 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -3,13 +3,13 @@ import { Collapsible } from '@base-ui/react/collapsible';
 
 export default function ExampleCollapsible() {
   return (
-    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-900">
-      <Collapsible.Trigger className="group flex items-center gap-2 rounded-xs bg-gray-100 px-2 py-1 text-sm font-normal hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 active:bg-gray-200">
-        <ChevronIcon className="size-3 transition-all ease-out group-data-[panel-open]:rotate-90" />
+    <Collapsible.Root className="flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
+        <CaretRightIcon className="transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
-      <Collapsible.Panel className="flex [&[hidden]:not([hidden='until-found'])]:hidden h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 duration-150">
-        <div className="mt-1 flex cursor-text flex-col gap-2 rounded-xs bg-gray-100 py-2 pl-7">
+      <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-[height] duration-150 ease-out [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0">
+        <div className="flex flex-col gap-2 px-3.5 py-2">
           <div>alien-bean-pasta</div>
           <div>wild-irish-burrito</div>
           <div>horse-battery-staple</div>
@@ -19,10 +19,17 @@ export default function ExampleCollapsible() {
   );
 }
 
-export function ChevronIcon(props: React.ComponentProps<'svg'>) {
+export function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 3bc2ead58e0..de75d58fc75 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -1,41 +1,57 @@
 .Container {
+  max-width: 28rem;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: var(--color-gray-900);
 }
 
 .Label {
-  display: inline-flex;
-  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputGroup {
   box-sizing: border-box;
-  position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.375rem;
-  min-height: 2.5rem;
+  gap: 0.125rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
   width: 16rem;
   cursor: text;
 
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  @media (min-width: 32rem) {
+    width: 22rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
+  &:has(.Chip) {
+    padding-inline: 0.25rem;
+  }
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  @media (min-width: 500px) {
-    width: 20rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -48,62 +64,116 @@
 }
 
 .Chip {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
-  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  min-height: calc(1.5rem - 2px);
+  background-color: oklch(97% 0 0deg);
+  color: oklch(14.5% 0 0deg);
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1;
+  padding: 0 0.2rem 0 0.4rem;
+  overflow: hidden;
+  gap: 0.25rem;
   outline: 0;
   cursor: default;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+    color: white;
+  }
+
   &:focus-within {
-    background-color: var(--color-blue);
-    color: var(--color-gray-50);
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-blue);
-      color: var(--color-gray-50);
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
     }
   }
 }
 
 .ChipRemove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.2rem;
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
   border: none;
   background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: inherit;
-  border-radius: 0.375rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-200);
+      background-color: oklch(92.2% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(37.1% 0 0deg);
+      }
+    }
+  }
+}
+
+.Chip:focus-within .ChipRemove {
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(37.1% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(92.2% 0 0deg);
+      }
     }
   }
 }
 
 .Input {
-  box-sizing: border-box;
   flex: 1;
-  min-width: 6rem;
-  height: 2rem;
+  box-sizing: border-box;
   padding: 0;
+  margin: 0;
   border: none;
-  border-radius: 0.375rem;
-  padding-left: 0.5rem;
-  background: none;
+  border-radius: 0;
+  height: calc(1.5rem - 2px);
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  min-width: 3rem;
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
     outline: none;
@@ -112,45 +182,43 @@
 
 .Positioner {
   outline: 0;
+  z-index: 50;
 }
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.5rem;
-  overscroll-behavior: contain;
   transition:
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
-  &[data-starting-style] {
-    opacity: 0;
-    transform: scale(0.95);
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 
+  &[data-starting-style],
   &[data-ending-style] {
-    transition: none;
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    opacity: 0;
+    transform: scale(0.95);
   }
+}
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
+.Viewport {
+  box-sizing: border-box;
+  max-height: min(var(--available-height), 24.5rem);
+  padding-block: 0.25rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.25rem;
 }
 
 .Status {
@@ -158,11 +226,15 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.25rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Spinner {
@@ -175,11 +247,6 @@
   animation: comboboxSpinner 0.75s linear infinite;
 }
 
-.Spinner:dir(rtl) {
-  border-right-color: currentColor;
-  border-left-color: transparent;
-}
-
 @keyframes comboboxSpinner {
   100% {
     transform: rotate(360deg);
@@ -190,8 +257,12 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 0.5rem 1rem;
+  color: oklch(55.6% 0 0deg);
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Item {
@@ -200,20 +271,23 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-inline: 1rem;
-  padding-right: 1.25rem;
+  padding-inline: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
-  grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  grid-template-columns: 1rem 1fr;
+  font-size: 0.875rem;
   line-height: 1.2rem;
 
   @media (hover: hover) {
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-gray-900);
+      color: oklch(14.5% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
 
     &[data-highlighted]::before {
@@ -221,9 +295,12 @@
       z-index: -1;
       position: absolute;
       inset-block: 0;
-      inset-inline: 0.5rem;
-      border-radius: 0.25rem;
-      background-color: var(--color-gray-100);
+      inset-inline: 0;
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 }
@@ -233,12 +310,6 @@
   margin-top: 0.25rem;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
   display: flex;
@@ -247,7 +318,8 @@
 }
 
 .ItemTitle {
-  font-size: 0.95rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -255,15 +327,14 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  font-size: 0.8125rem;
-  color: var(--color-gray-600);
-}
+  font-size: 0.75rem;
+  color: oklch(55.6% 0 0deg);
 
-.ItemUsername {
-  opacity: 0.8;
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .ItemEmail {
   font-size: 0.75rem;
-  color: var(--color-gray-500);
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index 9c78b9fb30b..79bc0d1c130 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -167,29 +167,31 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className={styles.Positioner} sideOffset={4}>
           <Combobox.Popup className={styles.Popup} aria-busy={isPending || undefined}>
-            <Combobox.Status>
-              {status ? <div className={styles.Status}>{status}</div> : null}
-            </Combobox.Status>
-            <Combobox.Empty>
-              {emptyMessage ? <div className={styles.Empty}>{emptyMessage}</div> : null}
-            </Combobox.Empty>
-            <Combobox.List>
-              {(user: DirectoryUser) => (
-                <Combobox.Item key={user.id} className={styles.Item} value={user}>
-                  <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
-                  </Combobox.ItemIndicator>
-                  <span className={styles.ItemText}>
-                    <span className={styles.ItemTitle}>{user.name}</span>
-                    <span className={styles.ItemSubtitle}>
-                      <span className={styles.ItemUsername}>@{user.username}</span>
-                      <span>{user.title}</span>
+            <div className={styles.Viewport}>
+              <Combobox.Status>
+                {status ? <div className={styles.Status}>{status}</div> : null}
+              </Combobox.Status>
+              <Combobox.Empty>
+                {emptyMessage ? <div className={styles.Empty}>{emptyMessage}</div> : null}
+              </Combobox.Empty>
+              <Combobox.List>
+                {(user: DirectoryUser) => (
+                  <Combobox.Item key={user.id} className={styles.Item} value={user}>
+                    <Combobox.ItemIndicator className={styles.ItemIndicator}>
+                      <CheckIcon />
+                    </Combobox.ItemIndicator>
+                    <span className={styles.ItemText}>
+                      <span className={styles.ItemTitle}>{user.name}</span>
+                      <span className={styles.ItemEmail}>{user.email}</span>
+                      <span className={styles.ItemSubtitle}>
+                        <span>@{user.username}</span>
+                        <span>{user.title}</span>
+                      </span>
                     </span>
-                    <span className={styles.ItemEmail}>{user.email}</span>
-                  </span>
-                </Combobox.Item>
-              )}
-            </Combobox.List>
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </div>
           </Combobox.Popup>
         </Combobox.Positioner>
       </Combobox.Portal>
@@ -199,8 +201,16 @@ export default function ExampleAsyncMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -208,19 +218,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
-      aria-hidden
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 85b5d3b4867..7387446b43a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function ExampleAsyncMultipleCombobox() {
         <React.Fragment>
           <span
             aria-hidden
-            className="inline-block size-3 animate-[spin_0.75s_linear_infinite] rounded-full border border-current border-r-transparent rtl:border-r-current rtl:border-l-transparent"
+            className="inline-block size-3 animate-[spin_0.75s_linear_infinite] rounded-full border border-current border-r-transparent"
           />
           Searching…
         </React.Fragment>
@@ -134,11 +134,14 @@ export default function ExampleAsyncMultipleCombobox() {
         });
       }}
     >
-      <div className="flex flex-col gap-1 text-sm text-gray-900">
-        <label className="inline-flex text-inherit font-bold" htmlFor={id}>
+      <div className="max-w-md flex flex-col gap-1">
+        <label
+          className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
+          htmlFor={id}
+        >
           Assign reviewers
         </label>
-        <Combobox.InputGroup className="relative flex min-h-10 w-[16rem] cursor-text rounded-md border border-gray-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem]">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: DirectoryUser[]) => (
@@ -146,12 +149,12 @@ export default function ExampleAsyncMultipleCombobox() {
                   {value.map((user) => (
                     <Combobox.Chip
                       key={user.id}
-                      className="flex cursor-default items-center gap-1 rounded-md bg-gray-100 py-1 pl-2 pr-1 text-sm text-gray-900 outline-none focus-within:bg-blue-800 focus-within:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50"
+                      className="group flex min-h-[calc(1.5rem-2px)] cursor-default items-center gap-1 overflow-hidden bg-neutral-100 py-0 pr-[0.2rem] pl-[0.4rem] text-sm leading-none text-neutral-950 outline-none focus-within:bg-neutral-950 focus-within:text-white [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:bg-neutral-800 dark:text-white dark:focus-within:bg-white dark:focus-within:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                       aria-label={user.name}
                     >
                       {user.name}
                       <Combobox.ChipRemove
-                        className="inline-flex items-center justify-center rounded-md border-none bg-transparent p-[0.2rem] text-inherit hover:bg-gray-200"
+                        className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                         aria-label={`Remove ${user.name}`}
                       >
                         <XIcon />
@@ -161,7 +164,7 @@ export default function ExampleAsyncMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. Michael'}
-                    className="h-8 min-w-24 flex-1 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-gray-900 outline-none placeholder:font-normal"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
                   />
                 </React.Fragment>
               )}
@@ -173,44 +176,46 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-[0_10px_15px_-3px_var(--color-gray-200),0_4px_6px_-4px_var(--color-gray-200)] outline outline-1 outline-gray-200 transition-[opacity,transform,scale] duration-100 data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-gray-300"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <Combobox.Status>
-              {status ? (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-gray-600">
-                  {status}
-                </div>
-              ) : null}
-            </Combobox.Status>
-            <Combobox.Empty>
-              {emptyMessage ? (
-                <div className="box-border px-4 py-2 text-sm leading-4 text-gray-600">
-                  {emptyMessage}
-                </div>
-              ) : null}
-            </Combobox.Empty>
-            <Combobox.List>
-              {(user: DirectoryUser) => (
-                <Combobox.Item
-                  key={user.id}
-                  value={user}
-                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
-                >
-                  <Combobox.ItemIndicator className="col-start-1 mt-1">
-                    <CheckIcon className="size-3" />
-                  </Combobox.ItemIndicator>
-                  <span className="col-start-2 flex flex-col gap-1">
-                    <span className="text-[0.95rem] font-bold">{user.name}</span>
-                    <span className="flex flex-wrap gap-2 text-[0.8125rem] text-gray-600">
-                      <span className="opacity-80">@{user.username}</span>
-                      <span>{user.title}</span>
+            <div className="max-h-[min(var(--available-height),24.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+              <Combobox.Status>
+                {status ? (
+                  <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                    {status}
+                  </div>
+                ) : null}
+              </Combobox.Status>
+              <Combobox.Empty>
+                {emptyMessage ? (
+                  <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                    {emptyMessage}
+                  </div>
+                ) : null}
+              </Combobox.Empty>
+              <Combobox.List>
+                {(user: DirectoryUser) => (
+                  <Combobox.Item
+                    key={user.id}
+                    value={user}
+                    className="grid cursor-default grid-cols-[1rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
+                  >
+                    <Combobox.ItemIndicator className="col-start-1 mt-1">
+                      <CheckIcon />
+                    </Combobox.ItemIndicator>
+                    <span className="col-start-2 flex flex-col gap-1">
+                      <span className="text-sm leading-5 font-bold">{user.name}</span>
+                      <span className="text-xs">{user.email}</span>
+                      <span className="flex flex-wrap gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+                        <span>@{user.username}</span>
+                        <span>{user.title}</span>
+                      </span>
                     </span>
-                    <span className="text-xs text-gray-500">{user.email}</span>
-                  </span>
-                </Combobox.Item>
-              )}
-            </Combobox.List>
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </div>
           </Combobox.Popup>
         </Combobox.Positioner>
       </Combobox.Portal>
@@ -220,8 +225,16 @@ export default function ExampleAsyncMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -229,23 +242,20 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
-      aria-hidden
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
-
 interface DirectoryUser {
   id: string;
   name: string;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 7aea89e292a..0c8ad2a9b08 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -5,29 +5,42 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   position: relative;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputGroup {
+  box-sizing: border-box;
   position: relative;
   width: 16rem;
-  height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  height: 2rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
-  @media (min-width: 500px) {
+  @media (min-width: 32rem) {
     width: 20rem;
   }
 
   &:has(.Clear) .Input {
-    padding-right: calc(0.5rem + 1.5rem * 2);
+    padding: 0 calc(0.5rem + 2rem * 2) 0 0.5rem;
   }
 }
 
@@ -36,15 +49,33 @@
   margin: 0;
   width: 100%;
   height: 100%;
-  padding-left: 0.875rem;
-  padding-right: calc(0.5rem + 1.5rem);
+  padding: 0 calc(0.5rem + 2rem) 0 0.5rem;
   border: none;
-  border-radius: inherit;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
     outline: none;
@@ -58,12 +89,15 @@
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2.5rem;
-  right: 0.5rem;
-  border-radius: 0.25rem;
+  height: 100%;
+  right: 0;
   border: none;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
   padding: 0;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Trigger,
@@ -73,18 +107,15 @@
   align-items: center;
   justify-content: center;
   width: 1.5rem;
-  height: 2.5rem;
-  color: var(--color-gray-600);
+  height: 100%;
+  color: oklch(14.5% 0 0deg);
   border: none;
   padding: 0;
-  border-radius: 0.25rem;
   background: none;
-}
 
-.ClearIcon,
-.TriggerIcon {
-  width: 1rem;
-  height: 1rem;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -93,21 +124,25 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.5rem;
-  overscroll-behavior: contain;
   transition:
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style] {
     opacity: 0;
     transform: scale(0.95);
@@ -116,18 +151,15 @@
   &[data-ending-style] {
     transition: none;
   }
+}
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
+.Viewport {
+  box-sizing: border-box;
+  max-height: min(var(--available-height), 22.5rem);
+  padding-block: 0.25rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.25rem;
 }
 
 .Status {
@@ -135,11 +167,15 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.25rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Spinner {
@@ -152,11 +188,6 @@
   animation: comboboxSpinner 0.75s linear infinite;
 }
 
-.Spinner:dir(rtl) {
-  border-right-color: currentColor;
-  border-left-color: transparent;
-}
-
 @keyframes comboboxSpinner {
   100% {
     transform: rotate(360deg);
@@ -169,20 +200,23 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-inline: 1rem;
-  padding-right: 1.25rem;
+  padding-inline: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
-  grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  grid-template-columns: 1rem 1fr;
+  font-size: 0.875rem;
   line-height: 1.2rem;
 
   @media (hover: hover) {
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-gray-900);
+      color: oklch(14.5% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
 
     &[data-highlighted]::before {
@@ -190,9 +224,12 @@
       z-index: -1;
       position: absolute;
       inset-block: 0;
-      inset-inline: 0.5rem;
-      border-radius: 0.25rem;
-      background-color: var(--color-gray-100);
+      inset-inline: 0;
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 }
@@ -202,12 +239,6 @@
   margin-top: 0.25rem;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
   display: flex;
@@ -216,31 +247,35 @@
 }
 
 .ItemTitle {
-  font-size: 0.95rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .ItemSubtitle {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
-  font-size: 0.8125rem;
-  color: var(--color-gray-600);
-}
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: oklch(55.6% 0 0deg);
 
-.ItemUsername {
-  opacity: 0.8;
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .ItemEmail {
   font-size: 0.75rem;
-  opacity: 0.8;
 }
 
 .Empty {
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 0.5rem 1rem;
+  color: oklch(55.6% 0 0deg);
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index 846cac7a2b6..149fd4fc5e8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -116,10 +116,10 @@ export default function ExampleAsyncSingleCombobox() {
           <Combobox.Input id={id} placeholder="e.g. Michael" className={styles.Input} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <ClearIcon className={styles.ClearIcon} />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon className={styles.TriggerIcon} />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -128,29 +128,31 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className={styles.Positioner} sideOffset={4}>
           <Combobox.Popup className={styles.Popup} aria-busy={isPending || undefined}>
-            <Combobox.Status>
-              {status ? <div className={styles.Status}>{status}</div> : null}
-            </Combobox.Status>
-            <Combobox.Empty>
-              {emptyMessage ? <div className={styles.Empty}>{emptyMessage}</div> : null}
-            </Combobox.Empty>
-            <Combobox.List>
-              {(user: DirectoryUser) => (
-                <Combobox.Item key={user.id} className={styles.Item} value={user}>
-                  <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
-                  </Combobox.ItemIndicator>
-                  <span className={styles.ItemText}>
-                    <span className={styles.ItemTitle}>{user.name}</span>
-                    <span className={styles.ItemSubtitle}>
-                      <span className={styles.ItemUsername}>@{user.username}</span>
-                      <span>{user.title}</span>
+            <div className={styles.Viewport}>
+              <Combobox.Status>
+                {status ? <div className={styles.Status}>{status}</div> : null}
+              </Combobox.Status>
+              <Combobox.Empty>
+                {emptyMessage ? <div className={styles.Empty}>{emptyMessage}</div> : null}
+              </Combobox.Empty>
+              <Combobox.List>
+                {(user: DirectoryUser) => (
+                  <Combobox.Item key={user.id} className={styles.Item} value={user}>
+                    <Combobox.ItemIndicator className={styles.ItemIndicator}>
+                      <CheckIcon />
+                    </Combobox.ItemIndicator>
+                    <span className={styles.ItemText}>
+                      <span className={styles.ItemTitle}>{user.name}</span>
+                      <span className={styles.ItemEmail}>{user.email}</span>
+                      <span className={styles.ItemSubtitle}>
+                        <span>@{user.username}</span>
+                        <span>{user.title}</span>
+                      </span>
                     </span>
-                    <span className={styles.ItemEmail}>{user.email}</span>
-                  </span>
-                </Combobox.Item>
-              )}
-            </Combobox.List>
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </div>
           </Combobox.Popup>
         </Combobox.Positioner>
       </Combobox.Portal>
@@ -160,41 +162,49 @@ export default function ExampleAsyncSingleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
-function ClearIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index a4bf1b37236..4973c210795 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAsyncSingleCombobox() {
         <React.Fragment>
           <span
             aria-hidden
-            className="inline-block size-3 animate-spin rounded-full border border-current border-r-transparent rtl:border-r-current rtl:border-l-transparent"
+            className="inline-block size-3 animate-spin rounded-full border border-current border-r-transparent"
           />
           Searching…
         </React.Fragment>
@@ -111,26 +111,26 @@ export default function ExampleAsyncSingleCombobox() {
         });
       }}
     >
-      <div className="relative flex flex-col gap-1 text-sm font-bold leading-5 text-gray-900">
+      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Assign reviewer</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-gray-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem] [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white md:w-80 [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             id={id}
             placeholder="e.g. Michael"
-            className="box-border h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-gray-900 outline-none"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
           />
-          <div className="absolute bottom-0 right-2 flex h-10 items-center justify-center text-gray-600">
+          <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
-              className="combobox-clear flex h-10 w-6 items-center justify-center rounded border-0 bg-transparent p-0"
+              className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <ClearIcon className="size-4" />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger
-              className="flex h-10 w-6 items-center justify-center rounded border-0 bg-transparent p-0"
+              className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-4" />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -139,44 +139,46 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-[0_10px_15px_-3px_var(--color-gray-200),0_4px_6px_-4px_var(--color-gray-200)] outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-gray-300"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <Combobox.Status>
-              {status ? (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-gray-600">
-                  {status}
-                </div>
-              ) : null}
-            </Combobox.Status>
-            <Combobox.Empty>
-              {emptyMessage ? (
-                <div className="px-4 py-2 text-[0.875rem] leading-4 text-gray-600">
-                  {emptyMessage}
-                </div>
-              ) : null}
-            </Combobox.Empty>
-            <Combobox.List>
-              {(user: DirectoryUser) => (
-                <Combobox.Item
-                  key={user.id}
-                  value={user}
-                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
-                >
-                  <Combobox.ItemIndicator className="col-start-1 mt-1">
-                    <CheckIcon className="size-3" />
-                  </Combobox.ItemIndicator>
-                  <span className="col-start-2 flex flex-col gap-1">
-                    <span className="text-[0.95rem] font-bold">{user.name}</span>
-                    <span className="flex flex-wrap gap-3 text-[0.8125rem] text-gray-600">
-                      <span className="opacity-80">@{user.username}</span>
-                      <span>{user.title}</span>
+            <div className="max-h-[min(var(--available-height),22.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+              <Combobox.Status>
+                {status ? (
+                  <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                    {status}
+                  </div>
+                ) : null}
+              </Combobox.Status>
+              <Combobox.Empty>
+                {emptyMessage ? (
+                  <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                    {emptyMessage}
+                  </div>
+                ) : null}
+              </Combobox.Empty>
+              <Combobox.List>
+                {(user: DirectoryUser) => (
+                  <Combobox.Item
+                    key={user.id}
+                    value={user}
+                    className="grid cursor-default grid-cols-[1rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
+                  >
+                    <Combobox.ItemIndicator className="col-start-1 mt-1">
+                      <CheckIcon />
+                    </Combobox.ItemIndicator>
+                    <span className="col-start-2 flex flex-col gap-1">
+                      <span className="text-sm leading-5 font-bold">{user.name}</span>
+                      <span className="text-xs">{user.email}</span>
+                      <span className="flex flex-wrap gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+                        <span>@{user.username}</span>
+                        <span>{user.title}</span>
+                      </span>
                     </span>
-                    <span className="text-xs opacity-80">{user.email}</span>
-                  </span>
-                </Combobox.Item>
-              )}
-            </Combobox.List>
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </div>
           </Combobox.Popup>
         </Combobox.Positioner>
       </Combobox.Portal>
@@ -186,41 +188,49 @@ export default function ExampleAsyncSingleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
-function ClearIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 30b3eb7e909..170dadbdc2d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -12,7 +12,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputGroup {
@@ -21,20 +25,33 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
-  padding: 0.25rem 0.375rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
   width: 16rem;
   cursor: text;
 
+  @media (min-width: 32rem) {
+    width: 22rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
+  &:has(.Chip) {
+    padding-inline: 0.25rem;
+  }
+
   &:focus-within {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  @media (min-width: 500px) {
-    width: 22rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -42,66 +59,122 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.125rem;
+  gap: 0.25rem;
   width: 100%;
 }
 
 .Chip {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
-  border-radius: 0.375rem;
+  min-height: calc(1.5rem - 2px);
+  background-color: oklch(97% 0 0deg);
+  color: oklch(14.5% 0 0deg);
   font-size: 0.875rem;
-  padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+  line-height: 1;
+  padding: 0 0.2rem 0 0.4rem;
   overflow: hidden;
   gap: 0.25rem;
   outline: 0;
   cursor: default;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+    color: white;
+  }
+
   &:focus-within {
-    background-color: var(--color-blue);
-    color: var(--color-gray-50);
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-blue);
-      color: var(--color-gray-50);
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
     }
   }
 }
 
 .ChipRemove {
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
   border: none;
   background: none;
-  padding: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
-  border-radius: 0.375rem;
 
-  &:hover {
-    background-color: rgb(0 0 0 / 0.1);
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(92.2% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(37.1% 0 0deg);
+      }
+    }
+  }
+}
+
+.Chip:focus-within .ChipRemove {
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(37.1% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(92.2% 0 0deg);
+      }
+    }
   }
 }
 
 .Input {
   flex: 1;
   box-sizing: border-box;
-  padding-left: 0.5rem;
+  padding: 0;
   margin: 0;
   border: none;
-  height: 2rem;
-  border-radius: 0.375rem;
+  border-radius: 0;
+  height: calc(1.5rem - 2px);
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   min-width: 3rem;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
   &:focus {
     outline: none;
   }
@@ -114,27 +187,33 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  padding-block: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  padding-block: 0.25rem;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), 24.5rem);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
+  transition:
+    opacity 0.1s,
+    transform 0.1s;
+  transform-origin: var(--transform-origin);
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95);
   }
 }
 
@@ -144,19 +223,23 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  grid-template-columns: 1rem 1fr;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-900);
+    color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
   }
 
   &[data-selected]::before,
@@ -165,19 +248,26 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
+    inset-inline: 0;
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-gray-50);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        color: oklch(14.5% 0 0deg);
+      }
     }
 
     &[data-highlighted]::before {
-      background-color: var(--color-gray-900);
+      background-color: oklch(14.5% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+      }
     }
   }
 }
@@ -190,18 +280,16 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 0.5rem 1rem;
+  color: oklch(55.6% 0 0deg);
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 /* Creatable option styling */
@@ -209,21 +297,19 @@
   box-sizing: border-box;
   width: 100%;
   display: grid;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   align-items: center;
   gap: 0.5rem;
   border: none;
   background: none;
   text-align: left;
-  color: var(--color-gray-900);
-  padding: 0.5rem 2rem 0.5rem 1rem;
+  color: oklch(14.5% 0 0deg);
+  padding: 0.5rem;
   cursor: default;
-  border-radius: 0.25rem;
-}
 
-.CreateIcon {
-  width: 0.75rem;
-  height: 0.75rem;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .CreateText {
@@ -264,14 +350,17 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -282,42 +371,71 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .TextField {
   box-sizing: border-box;
   width: 100%;
-  height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
-  padding: 0 0.625rem;
-  font: inherit;
+  height: 2rem;
+  border-radius: 0;
+  padding: 0 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  padding-inline: 0.5rem;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
   margin-top: 1rem;
 }
 
@@ -326,32 +444,51 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index 1b214178de9..63d12511d22 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -171,14 +171,14 @@ export default function ExampleCreatableCombobox() {
                   item.creatable ? (
                     <Combobox.Item key={item.id} className={styles.Item} value={item}>
                       <span className={styles.ItemIndicator}>
-                        <PlusIcon className={styles.CreateIcon} />
+                        <PlusIcon />
                       </span>
                       <span className={styles.ItemText}>Create "{item.creatable}"</span>
                     </Combobox.Item>
                   ) : (
                     <Combobox.Item key={item.id} className={styles.Item} value={item}>
                       <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                        <CheckIcon className={styles.ItemIndicatorIcon} />
+                        <CheckIcon />
                       </Combobox.ItemIndicator>
                       <span className={styles.ItemText}>{item.value}</span>
                     </Combobox.Item>
@@ -221,8 +221,16 @@ export default function ExampleCreatableCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -230,18 +238,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="butt"
-      strokeLinejoin="miter"
-      aria-hidden
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 1v10M1 6h10" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -249,19 +256,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
-      aria-hidden
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 4f86147917a..a360f5fd0e8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -121,24 +121,27 @@ export default function ExampleCreatableCombobox() {
           highlightedItemRef.current = item;
         }}
       >
-        <div className="max-w-112 flex flex-col gap-1">
-          <label className="text-sm leading-5 font-bold text-gray-900" htmlFor={id}>
+        <div className="max-w-md flex flex-col gap-1">
+          <label
+            className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
+            htmlFor={id}
+          >
             Labels
           </label>
-          <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-gray-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
-            <Combobox.Chips className="flex w-full flex-wrap items-center gap-0.5">
+          <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+            <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
               <Combobox.Value>
                 {(value: LabelItem[]) => (
                   <React.Fragment>
                     {value.map((label) => (
                       <Combobox.Chip
                         key={label.id}
-                        className="flex items-center gap-1 rounded-md bg-gray-100 px-1.5 py-[0.2rem] text-sm text-gray-900 outline-none cursor-default [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 focus-within:bg-blue-800 focus-within:text-gray-50"
+                        className="group flex min-h-[calc(1.5rem-2px)] cursor-default items-center gap-1 overflow-hidden bg-neutral-100 py-0 pr-[0.2rem] pl-[0.4rem] text-sm leading-none text-neutral-950 outline-none focus-within:bg-neutral-950 focus-within:text-white [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:bg-neutral-800 dark:text-white dark:focus-within:bg-white dark:focus-within:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                         aria-label={label.value}
                       >
                         {label.value}
                         <Combobox.ChipRemove
-                          className="rounded-md p-1 text-inherit hover:bg-gray-200"
+                          className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                           aria-label={`Remove ${label.value}`}
                         >
                           <XIcon />
@@ -149,7 +152,7 @@ export default function ExampleCreatableCombobox() {
                       ref={comboboxInputRef}
                       id={id}
                       placeholder={value.length > 0 ? '' : 'e.g. bug'}
-                      className="min-w-12 flex-1 h-8 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-gray-900 outline-none"
+                      className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
                       onKeyDown={handleInputKeyDown}
                     />
                   </React.Fragment>
@@ -161,9 +164,9 @@ export default function ExampleCreatableCombobox() {
 
         <Combobox.Portal>
           <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-lg bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24.5rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Combobox.Empty>
-                <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+                <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   No labels found.
                 </div>
               </Combobox.Empty>
@@ -172,22 +175,22 @@ export default function ExampleCreatableCombobox() {
                   item.creatable ? (
                     <Combobox.Item
                       key={item.id}
-                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900"
+                      className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                       value={item}
                     >
                       <span className="col-start-1">
-                        <PlusIcon className="size-3" />
+                        <PlusIcon />
                       </span>
                       <span className="col-start-2">Create "{item.creatable}"</span>
                     </Combobox.Item>
                   ) : (
                     <Combobox.Item
                       key={item.id}
-                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900"
+                      className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                       value={item}
                     >
                       <Combobox.ItemIndicator className="col-start-1">
-                        <CheckIcon className="size-3" />
+                        <CheckIcon />
                       </Combobox.ItemIndicator>
                       <span className="col-start-2">{item.value}</span>
                     </Combobox.Item>
@@ -201,31 +204,29 @@ export default function ExampleCreatableCombobox() {
 
       <Dialog.Root open={openDialog} onOpenChange={setOpenDialog}>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity dark:opacity-70 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
+          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity dark:opacity-70 data-starting-style:opacity-0 data-ending-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
           <Dialog.Popup
-            className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-[-2rem] w-[24rem] max-w-[calc(100vw-3rem)] rounded-lg bg-[canvas] p-6 text-gray-900 outline-1 outline-gray-200 transition-all data-[starting-style]:opacity-0 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:scale-90 dark:-outline-offset-1 dark:outline-gray-300"
+            className="fixed top-1/2 left-1/2 mt-[-2rem] w-[24rem] max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 border border-neutral-950 bg-white p-6 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-all data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             initialFocus={createInputRef}
           >
-            <Dialog.Title className="-mt-1.5 mb-1 text-lg leading-7 tracking-[-0.0025em] font-bold">
-              Create new label
-            </Dialog.Title>
-            <Dialog.Description className="mb-4 text-base leading-6 text-gray-600">
+            <Dialog.Title className="text-sm leading-5 font-bold">Create new label</Dialog.Title>
+            <Dialog.Description className="mb-4 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
               Add a new label to select.
             </Dialog.Description>
             <form onSubmit={handleCreateSubmit}>
               <input
                 ref={createInputRef}
-                className="w-full h-10 rounded-md border border-gray-200 bg-[canvas] text-gray-900 px-2.5 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:text-white"
                 placeholder="Label name"
                 defaultValue={pendingQueryRef.current}
               />
-              <div className="mt-4 flex justify-end gap-4">
-                <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 font-normal">
+              <div className="mt-4 flex justify-end gap-3">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
                   Cancel
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+                  className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
                 >
                   Create
                 </button>
@@ -240,8 +241,16 @@ export default function ExampleCreatableCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -249,18 +258,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="butt"
-      strokeLinejoin="miter"
-      aria-hidden
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 1v10M1 6h10" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -268,19 +276,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
-      aria-hidden
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 6a0925d9226..337affcbbf7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -1,37 +1,64 @@
 .InputGroup {
+  box-sizing: border-box;
   position: relative;
   width: 16rem;
-  height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  height: 2rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .InputGroup:has(.Clear) .Input {
-  padding-right: calc(0.5rem + 1.5rem * 2);
+  padding: 0 calc(0.5rem + 2rem * 2) 0 0.5rem;
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
-  padding-right: calc(0.5rem + 1.5rem);
+  padding: 0 calc(0.5rem + 2rem) 0 0.5rem;
   margin: 0;
   border: none;
+  border-radius: 0;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
   &:focus {
     outline: none;
   }
@@ -44,24 +71,30 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   position: relative;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .ActionButtons {
-  --size: 1.5rem;
   box-sizing: border-box;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2.5rem;
-  right: 0.5rem;
-  border-radius: 0.25rem;
+  height: 100%;
+  right: 0;
   border: none;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
   padding: 0;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Trigger,
@@ -70,19 +103,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--size);
-  height: 2.5rem;
-  color: var(--color-gray-600);
+  width: 1.5rem;
+  height: 100%;
+  color: oklch(14.5% 0 0deg);
   border: none;
   padding: 0;
-  border-radius: 0.25rem;
   background: none;
-}
 
-.ClearIcon,
-.TriggerIcon {
-  width: 1rem;
-  height: 1rem;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -91,64 +121,63 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  overflow: hidden;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: 23rem;
   max-width: var(--available-width);
   transition:
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.95);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
 }
 
 .List {
   box-sizing: border-box;
   overflow: auto;
   overscroll-behavior: contain;
-  scroll-padding-top: 2.25rem;
-  scroll-padding-bottom: 0.5rem;
-  max-height: min(23rem, var(--available-height));
+  padding-block: 0.25rem;
+  scroll-padding-top: 0.25rem;
+  scroll-padding-bottom: 0.25rem;
+  max-height: min(22.5rem, var(--available-height));
   outline: 0;
 }
 
 .Group {
   display: block;
   padding-bottom: 0.5rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
 }
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.75rem 1rem 0.25rem calc(1rem + 0.75rem + 0.5rem);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  background-color: canvas;
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  margin: 0 0.5rem 0 0;
-  width: calc(100% - 0.5rem);
+  user-select: none;
+  padding: 0.5rem 0.5rem 0.5rem 2rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Item {
@@ -156,18 +185,22 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.5rem 2rem 0.5rem 1rem;
+  padding: 0.5rem;
   display: grid;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   gap: 0.5rem;
   align-items: center;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -175,9 +208,12 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -185,20 +221,18 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 1rem;
-  font-size: 0.925rem;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index b38493325c6..5caec3b838a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -13,10 +13,10 @@ export default function ExampleGroupedCombobox() {
           <Combobox.Input placeholder="e.g. Mango" className={styles.Input} id={id} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <ClearIcon className={styles.ClearIcon} />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon className={styles.TriggerIcon} />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -38,7 +38,7 @@ export default function ExampleGroupedCombobox() {
                     {(item: Produce) => (
                       <Combobox.Item key={item.id} className={styles.Item} value={item}>
                         <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                          <CheckIcon className={styles.ItemIndicatorIcon} />
+                          <CheckIcon />
                         </Combobox.ItemIndicator>
                         <span className={styles.ItemText}>{item.label}</span>
                       </Combobox.Item>
@@ -56,41 +56,49 @@ export default function ExampleGroupedCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
-function ClearIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 29f20452a3d..6d2afac276e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -6,26 +6,26 @@ export default function ExampleGroupedCombobox() {
   const id = React.useId();
   return (
     <Combobox.Root items={groupedProduce}>
-      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Select produce</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-gray-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Mango"
             id={id}
-            className="h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-gray-900 outline-none"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
           />
-          <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
+          <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
-              className="combobox-clear flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
+              className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <ClearIcon className="size-4" />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger
-              className="flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
+              className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-4" />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -33,25 +33,31 @@ export default function ExampleGroupedCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md bg-[canvas] pt-0 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:outline-gray-300 duration-100">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-gray-600">No produce found.</div>
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                No produce found.
+              </div>
             </Combobox.Empty>
-            <Combobox.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(23rem,var(--available-height))]">
+            <Combobox.List className="max-h-[min(22.5rem,var(--available-height))] overflow-auto overscroll-contain py-1 scroll-py-1 outline-0">
               {(group: ProduceGroup) => (
-                <Combobox.Group key={group.value} items={group.items} className="block pb-2">
-                  <Combobox.GroupLabel className="sticky top-0 z-[1] mb-0 mr-2 mt-0 ml-0 w-[calc(100%-0.5rem)] bg-[canvas] pr-4 pl-[2.25rem] pt-3 pb-1 text-[0.7rem] font-bold uppercase tracking-wider">
+                <Combobox.Group
+                  key={group.value}
+                  items={group.items}
+                  className="block pb-2 last:pb-0"
+                >
+                  <Combobox.GroupLabel className="py-2 pr-2 pl-8 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Combobox.GroupLabel>
                   <Combobox.Collection>
                     {(item: Produce) => (
                       <Combobox.Item
                         key={item.id}
-                        className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                         value={item}
                       >
                         <Combobox.ItemIndicator className="col-start-1 flex items-center justify-center">
-                          <CheckIcon className="size-3" />
+                          <CheckIcon />
                         </Combobox.ItemIndicator>
                         <span className="col-start-2">{item.label}</span>
                       </Combobox.Item>
@@ -69,41 +75,49 @@ export default function ExampleGroupedCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
-function ClearIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 2aaf58c9cc8..f28c144c2d1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -1,35 +1,62 @@
 .InputGroup {
+  box-sizing: border-box;
   position: relative;
-  width: 16rem;
-  height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  width: 14rem;
+  height: 2rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &:has(.Clear) .Input {
-    padding-right: calc(0.5rem + 1.5rem * 2);
+    padding: 0 calc(0.5rem + 2rem * 2) 0 0.5rem;
   }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
-  padding-right: calc(0.5rem + 1.5rem);
+  padding: 0 calc(0.5rem + 2rem) 0 0.5rem;
   margin: 0;
   border: none;
+  border-radius: 0;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
     outline: none;
@@ -43,8 +70,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   position: relative;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .ActionButtons {
@@ -54,12 +85,15 @@
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2.5rem;
-  right: 0.5rem;
-  border-radius: 0.25rem;
+  height: 100%;
+  right: 0;
   border: none;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
   padding: 0;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Trigger,
@@ -69,18 +103,15 @@
   align-items: center;
   justify-content: center;
   width: 1.5rem;
-  height: 2.5rem;
-  color: var(--color-gray-600);
+  height: 100%;
+  color: oklch(14.5% 0 0deg);
   border: none;
   padding: 0;
-  border-radius: 0.25rem;
   background: none;
-}
 
-.ClearIcon,
-.TriggerIcon {
-  width: 1rem;
-  height: 1rem;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -89,44 +120,40 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: 23rem;
   max-width: var(--available-width);
   transition:
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.95);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .List {
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-block: 0.5rem;
-  scroll-padding-block: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-block: 0.25rem;
   outline: 0;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
 
   &[data-empty] {
     padding: 0;
@@ -139,19 +166,23 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  grid-template-columns: 1rem 1fr;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -159,9 +190,12 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -173,15 +207,14 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Empty {
-  font-size: 0.925rem;
+  box-sizing: border-box;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 1rem;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index b6c5f29e9a1..73c197c0592 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -13,10 +13,10 @@ export default function ExampleCombobox() {
           <Combobox.Input placeholder="e.g. Apple" id={id} className={styles.Input} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <ClearIcon className={styles.ClearIcon} />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon className={styles.TriggerIcon} />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -32,7 +32,7 @@ export default function ExampleCombobox() {
               {(item: Fruit) => (
                 <Combobox.Item key={item.value} value={item} className={styles.Item}>
                   <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
+                    <CheckIcon />
                   </Combobox.ItemIndicator>
                   <span className={styles.ItemText}>{item.label}</span>
                 </Combobox.Item>
@@ -47,41 +47,49 @@ export default function ExampleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
-function ClearIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 6cebb4cebc1..56fa85826ca 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -6,26 +6,26 @@ export default function ExampleCombobox() {
   const id = React.useId();
   return (
     <Combobox.Root items={fruits}>
-      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Choose a fruit</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-64 rounded-md border border-gray-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-56 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Apple"
             id={id}
-            className="h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-gray-900 outline-none"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
           />
-          <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
+          <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
-              className="combobox-clear flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
+              className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <ClearIcon className="size-4" />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger
-              className="flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
+              className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-4" />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -33,19 +33,21 @@ export default function ExampleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 duration-100">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-gray-600">No fruits found.</div>
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                No fruits found.
+              </div>
             </Combobox.Empty>
-            <Combobox.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
+            <Combobox.List className="max-h-[min(22.5rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0">
               {(item: Fruit) => (
                 <Combobox.Item
                   key={item.value}
                   value={item}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                 >
                   <Combobox.ItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2">{item.label}</span>
                 </Combobox.Item>
@@ -60,41 +62,49 @@ export default function ExampleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
-function ClearIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index a4d710d7f2b..97052bdbd82 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -11,46 +11,79 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
+  border: 1px solid oklch(14.5% 0 0deg);
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
-  background-color: canvas;
-  -webkit-user-select: none;
+  background-color: white;
   user-select: none;
-  min-width: 12rem;
+  min-width: 10rem;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+
+  &[data-placeholder] {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
 .TriggerIcon {
-  display: flex;
-}
+  color: oklch(14.5% 0 0deg);
 
-.Placeholder {
-  opacity: 0.6;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputContainer {
@@ -58,28 +91,54 @@
   width: 20rem;
   height: var(--input-container-height);
   text-align: center;
-  padding: 0.5rem;
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: none;
+  border-radius: 0;
   min-width: 18rem;
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -87,8 +146,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -96,46 +159,43 @@
 }
 
 .Popup {
-  --input-container-height: 3rem;
+  --input-container-height: 2rem;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
     opacity 150ms;
   max-width: var(--available-width);
-  max-height: 24rem;
+  max-height: 24.5rem;
+
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.9);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .List {
   box-sizing: border-box;
   overflow: auto;
-  scroll-padding-block: 0.5rem;
-  padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
+  padding-block: 0.25rem;
   overscroll-behavior: contain;
   max-height: min(
-    calc(24rem - var(--input-container-height)),
-    calc(var(--available-height) - var(--input-container-height))
+    calc(24.5rem - var(--input-container-height) - 2px),
+    calc(var(--available-height) - var(--input-container-height) - 2px)
   );
 
   &:empty {
@@ -150,19 +210,23 @@
   user-select: none;
   min-width: var(--anchor-width);
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  grid-template-columns: 1rem 1fr;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -170,9 +234,12 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -184,22 +251,24 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(97% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 1rem;
+  color: oklch(55.6% 0 0deg);
+  padding: 1rem 1rem 1rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index 5e7711fcf07..5b77997f422 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -9,11 +9,9 @@ export default function ExamplePopoverCombobox() {
       <Combobox.Root items={countries}>
         <Combobox.Label className={styles.Label}>Country</Combobox.Label>
         <Combobox.Trigger className={styles.Trigger}>
-          <Combobox.Value
-            placeholder={<span className={styles.Placeholder}>Select country</span>}
-          />
+          <Combobox.Value placeholder="Select country" />
           <Combobox.Icon className={styles.TriggerIcon}>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Combobox.Icon>
         </Combobox.Trigger>
         <Combobox.Portal>
@@ -29,7 +27,7 @@ export default function ExamplePopoverCombobox() {
                 {(country: Country) => (
                   <Combobox.Item key={country.code} value={country} className={styles.Item}>
                     <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                      <CheckIcon />
                     </Combobox.ItemIndicator>
                     <span className={styles.ItemText}>{country.label}</span>
                   </Combobox.Item>
@@ -43,27 +41,33 @@ export default function ExamplePopoverCombobox() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index c9480580b27..aaf465de555 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -4,43 +4,43 @@ import { Combobox } from '@base-ui/react/combobox';
 
 export default function ExamplePopoverCombobox() {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Combobox.Root items={countries}>
-        <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-gray-900">
+        <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex bg-[canvas] h-10 min-w-[12rem] items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 cursor-default font-normal">
-          <Combobox.Value placeholder={<span className="opacity-60">Select country</span>} />
-          <Combobox.Icon className="flex">
-            <ChevronUpDownIcon />
+        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
+          <Combobox.Value placeholder="Select country" />
+          <Combobox.Icon className="text-neutral-950 dark:text-white">
+            <CaretUpDownIcon />
           </Combobox.Icon>
         </Combobox.Trigger>
         <Combobox.Portal>
           <Combobox.Positioner align="start" sideOffset={4}>
             <Combobox.Popup
-              className="[--input-container-height:3rem] origin-[var(--transform-origin)] max-w-[var(--available-width)] max-h-[24rem] rounded-lg bg-[canvas] shadow-lg shadow-gray-200 text-gray-900 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300"
+              className="[--input-container-height:2rem] max-h-[24.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
               aria-label="Select country"
             >
-              <div className="w-80 h-[var(--input-container-height)] text-center p-2">
+              <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-10 w-full font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:text-white"
                 />
               </div>
               <Combobox.Empty>
-                <div className="p-4 text-[0.925rem] leading-4 text-gray-600">
+                <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   No countries found.
                 </div>
               </Combobox.Empty>
-              <Combobox.List className="overflow-y-auto scroll-py-2 py-2 overscroll-contain max-h-[min(calc(24rem-var(--input-container-height)),calc(var(--available-height)-var(--input-container-height)))] empty:p-0">
+              <Combobox.List className="max-h-[min(calc(24.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto overscroll-contain py-1 scroll-py-1 empty:p-0">
                 {(country: Country) => (
                   <Combobox.Item
                     key={country.code}
                     value={country}
-                    className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                    className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   >
                     <Combobox.ItemIndicator className="col-start-1">
-                      <CheckIcon className="size-3" />
+                      <CheckIcon />
                     </Combobox.ItemIndicator>
                     <span className="col-start-2">{country.label}</span>
                   </Combobox.Item>
@@ -54,27 +54,33 @@ export default function ExamplePopoverCombobox() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 57548773b57..706fd4cfeb3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -12,7 +12,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputGroup {
@@ -21,20 +25,33 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
-  padding: 0.25rem 0.375rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
   width: 16rem;
   cursor: text;
 
+  @media (min-width: 32rem) {
+    width: 22rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
+  &:has(.Chip) {
+    padding-inline: 0.25rem;
+  }
+
   &:focus-within {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  @media (min-width: 500px) {
-    width: 22rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -42,32 +59,49 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.125rem;
+  gap: 0.25rem;
   width: 100%;
 }
 
 .Chip {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
-  border-radius: 0.375rem;
+  min-height: calc(1.5rem - 2px);
+  background-color: oklch(97% 0 0deg);
+  color: oklch(14.5% 0 0deg);
   font-size: 0.875rem;
-  padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+  line-height: 1;
+  padding: 0 0.2rem 0 0.4rem;
   overflow: hidden;
   gap: 0.25rem;
   outline: 0;
   cursor: default;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+    color: white;
+  }
+
   &:focus-within {
-    background-color: var(--color-blue);
-    color: var(--color-gray-50);
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-blue);
-      color: var(--color-gray-50);
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
     }
   }
 }
@@ -86,18 +120,36 @@
 }
 
 .ChipRemove {
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
   border: none;
   background: none;
-  padding: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
-  border-radius: 0.375rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-200);
+      background-color: oklch(92.2% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(37.1% 0 0deg);
+      }
+    }
+  }
+}
+
+.Chip:focus-within .ChipRemove {
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(37.1% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(92.2% 0 0deg);
+      }
     }
   }
 }
@@ -105,53 +157,42 @@
 .Input {
   flex: 1;
   box-sizing: border-box;
-  padding-left: 0.5rem;
+  padding: 0;
   margin: 0;
   border: none;
-  height: 2rem;
-  border-radius: 0.375rem;
+  border-radius: 0;
+  height: calc(1.5rem - 2px);
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   min-width: 3rem;
 
-  &:focus {
-    outline: none;
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
   }
-}
 
-.Trigger {
-  box-sizing: border-box;
-  position: absolute;
-  right: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: none;
-  background: none;
-  color: var(--color-gray-500);
-  border-radius: 0.25rem;
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
 
-  &:hover {
-    color: var(--color-gray-700);
-    background-color: var(--color-gray-100);
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-500);
-    outline-offset: 2px;
+    outline: none;
   }
 }
 
-.TriggerIcon {
-  width: 1rem;
-  height: 1rem;
-}
-
 .Positioner {
   outline: 0;
   z-index: 50;
@@ -159,38 +200,34 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  padding-block: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  padding-block: 0.25rem;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), 24.5rem);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
   transition:
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.95);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .Item {
@@ -199,19 +236,23 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  grid-template-columns: 1rem 1fr;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-900);
+    color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
   }
 
   &[data-selected]::before,
@@ -220,19 +261,26 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
+    inset-inline: 0;
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-gray-50);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        color: oklch(14.5% 0 0deg);
+      }
     }
 
     &[data-highlighted]::before {
-      background-color: var(--color-gray-900);
+      background-color: oklch(14.5% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+      }
     }
   }
 }
@@ -245,12 +293,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemName {
   font-weight: 700;
   color: inherit;
@@ -258,8 +300,12 @@
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 0.5rem 1rem;
+  color: oklch(55.6% 0 0deg);
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
index 91cf2c7b6d5..a7c2473fe4c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
@@ -54,7 +54,7 @@ export default function ExampleMultipleCombobox() {
               {(language: ProgrammingLanguage) => (
                 <Combobox.Item key={language.id} className={styles.Item} value={language}>
                   <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
+                    <CheckIcon />
                   </Combobox.ItemIndicator>
                   <span className={styles.ItemText}>{language.value}</span>
                 </Combobox.Item>
@@ -69,8 +69,16 @@ export default function ExampleMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -78,19 +86,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
-      aria-hidden
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 109b7f273b8..4ee8aa1e0f4 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -7,24 +7,27 @@ export default function ExampleMultipleCombobox() {
 
   return (
     <Combobox.Root items={langs} multiple>
-      <div className="max-w-[28rem] flex flex-col gap-1">
-        <label className="text-sm leading-5 font-bold text-gray-900" htmlFor={id}>
+      <div className="max-w-md flex flex-col gap-1">
+        <label
+          className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
+          htmlFor={id}
+        >
           Programming languages
         </label>
-        <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-gray-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
-          <Combobox.Chips className="flex w-full flex-wrap items-center gap-0.5">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+          <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: ProgrammingLanguage[]) => (
                 <React.Fragment>
                   {value.map((language) => (
                     <Combobox.Chip
                       key={language.id}
-                      className="flex items-center gap-1 rounded-md bg-gray-100 px-1.5 py-[0.2rem] text-sm text-gray-900 outline-none cursor-default [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 focus-within:bg-blue-800 focus-within:text-gray-50"
+                      className="group flex min-h-[calc(1.5rem-2px)] cursor-default items-center gap-1 overflow-hidden bg-neutral-100 py-0 pr-[0.2rem] pl-[0.4rem] text-sm leading-none text-neutral-950 outline-none focus-within:bg-neutral-950 focus-within:text-white [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:bg-neutral-800 dark:text-white dark:focus-within:bg-white dark:focus-within:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                       aria-label={language.value}
                     >
                       {language.value}
                       <Combobox.ChipRemove
-                        className="rounded-md p-1 text-inherit hover:bg-gray-200"
+                        className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                         aria-label={`Remove ${language.value}`}
                       >
                         <XIcon />
@@ -34,7 +37,7 @@ export default function ExampleMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. TypeScript'}
-                    className="min-w-12 flex-1 h-8 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-gray-900 outline-none"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
                   />
                 </React.Fragment>
               )}
@@ -45,9 +48,9 @@ export default function ExampleMultipleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24.5rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+              <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No languages found.
               </div>
             </Combobox.Empty>
@@ -55,11 +58,11 @@ export default function ExampleMultipleCombobox() {
               {(language: ProgrammingLanguage) => (
                 <Combobox.Item
                   key={language.id}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900"
+                  className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                   value={language}
                 >
                   <Combobox.ItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2">{language.value}</span>
                 </Combobox.Item>
@@ -74,8 +77,16 @@ export default function ExampleMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -83,19 +94,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
-      aria-hidden
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index a663430db94..80a420e45d6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -1,21 +1,37 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -26,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -35,33 +55,28 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
-  max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
   }
 }
 
 .Scroller {
   box-sizing: border-box;
-  height: min(22rem, var(--total-size));
+  height: min(22.5rem, var(--total-size));
   max-height: var(--available-height);
   overflow: auto;
   overscroll-behavior: contain;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
 }
 
 .VirtualizedPlaceholder {
@@ -80,19 +95,23 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  grid-template-columns: 1rem 1fr;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -100,9 +119,12 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    inset-inline: 0;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -114,16 +136,14 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-  padding: 1rem;
+  color: oklch(55.6% 0 0deg);
+  padding: 1rem 1rem 1rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
index efa8044a9a0..e0aab071f7a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
@@ -65,10 +65,10 @@ function VirtualizedList({
     getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 32,
     overscan: 20,
-    paddingStart: 8,
-    paddingEnd: 8,
-    scrollPaddingEnd: 8,
-    scrollPaddingStart: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingEnd: 4,
+    scrollPaddingStart: 4,
   });
 
   React.useImperativeHandle(virtualizerRef, () => virtualizer);
@@ -127,7 +127,7 @@ function VirtualizedList({
               }}
             >
               <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                <CheckIcon className={styles.ItemIndicatorIcon} />
+                <CheckIcon />
               </Combobox.ItemIndicator>
               <span className={styles.ItemText}>{item.name}</span>
             </Combobox.Item>
@@ -140,8 +140,16 @@ function VirtualizedList({
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 49ad3317264..6cdb6295d24 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -32,16 +32,16 @@ export default function ExampleVirtualizedCombobox() {
         }
       }}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Combobox.Input className="h-10 w-64 rounded-md font-normal border border-gray-200 pl-3.5 text-base text-gray-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
+        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
       </label>
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 outline-1 outline-gray-200 shadow-lg shadow-gray-200 dark:-outline-offset-1 dark:outline-gray-300">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
-              <div className="px-4 py-4 text-[0.925rem] leading-4 text-gray-600">
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
               </div>
             </Combobox.Empty>
@@ -72,10 +72,10 @@ function VirtualizedList({
     getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 32,
     overscan: 20,
-    paddingStart: 8,
-    paddingEnd: 8,
-    scrollPaddingEnd: 8,
-    scrollPaddingStart: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingEnd: 4,
+    scrollPaddingStart: 4,
   });
 
   React.useImperativeHandle(virtualizerRef, () => virtualizer);
@@ -100,7 +100,7 @@ function VirtualizedList({
     <div
       role="presentation"
       ref={handleScrollElementRef}
-      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-p-2"
+      className="h-[min(22.5rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-1"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
       <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
@@ -117,7 +117,7 @@ function VirtualizedList({
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
               value={item}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
               aria-setsize={filteredItems.length}
               aria-posinset={virtualItem.index + 1}
               style={{
@@ -130,7 +130,7 @@ function VirtualizedList({
               }}
             >
               <Combobox.ItemIndicator className="col-start-1">
-                <CheckIcon className="size-3" />
+                <CheckIcon />
               </Combobox.ItemIndicator>
               <span className="col-start-2">{item.name}</span>
             </Combobox.Item>
@@ -143,8 +143,16 @@ function VirtualizedList({
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index efa3b4c0aa4..0e5a8d4d7a5 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -5,12 +5,19 @@
   justify-content: center;
   width: 15rem;
   height: 12rem;
-  border: 1px solid var(--color-gray-300);
-  color: var(--color-gray-900);
-  border-radius: 0.375rem;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-weight: 400;
-  -webkit-user-select: none;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 }
 
 .Positioner {
@@ -19,29 +26,29 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
-  &[data-ending-style] {
-    opacity: 0;
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -59,7 +66,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -68,13 +79,28 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
index 97539a18a37..9bbde493d10 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
@@ -1,34 +1,25 @@
 import { ContextMenu } from '@base-ui/react/context-menu';
 
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+
 export default function ExampleMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-sm border border-gray-300 text-gray-900 select-none font-normal">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Positioner className="outline-hidden">
-          <ContextMenu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity] data-[ending-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
-              Add to Library
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
-              Add to Playlist
-            </ContextMenu.Item>
-            <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
-              Play Next
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
-              Play Last
-            </ContextMenu.Item>
-            <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
-              Favorite
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
-              Share
-            </ContextMenu.Item>
+          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Add to Playlist</ContextMenu.Item>
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <ContextMenu.Item className={itemClass}>Play Next</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Play Last</ContextMenu.Item>
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <ContextMenu.Item className={itemClass}>Favorite</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Share</ContextMenu.Item>
           </ContextMenu.Popup>
         </ContextMenu.Positioner>
       </ContextMenu.Portal>
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index 92245678b48..729745b164c 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -5,12 +5,19 @@
   justify-content: center;
   width: 15rem;
   height: 12rem;
-  border: 1px solid var(--color-gray-300);
-  color: var(--color-gray-900);
-  border-radius: 0.375rem;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-weight: 400;
-  -webkit-user-select: none;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 }
 
 .Positioner {
@@ -20,37 +27,29 @@
 .Popup,
 .SubmenuPopup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-ending-style] {
-    opacity: 0;
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
-}
 
-.SubmenuPopup {
   &[data-starting-style],
   &[data-ending-style] {
-    transform: scale(0.9);
     opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -79,18 +78,26 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: white;
+
+  @media (prefers-color-scheme: dark) {
+    fill: oklch(14.5% 0 0deg);
+  }
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
+  fill: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    fill: white;
   }
 }
 
 .ArrowInnerStroke {
+  fill: white;
+
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+    fill: oklch(14.5% 0 0deg);
   }
 }
 
@@ -101,7 +108,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 1rem;
-  padding-right: 2rem;
+  padding-right: 1.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
@@ -117,14 +124,21 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -133,8 +147,27 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+
+  &[data-highlighted][data-popup-open]::before {
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
@@ -142,11 +175,15 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding-right: 1rem;
+  padding-right: 0.5rem;
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
index 7b9c9825b99..73872652d76 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleContextMenu() {
             <ContextMenu.SubmenuRoot>
               <ContextMenu.SubmenuTrigger className={styles.SubmenuTrigger}>
                 Add to Playlist
-                <ChevronRightIcon />
+                <CaretRightIcon />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Positioner
@@ -47,10 +47,17 @@ export default function ExampleContextMenu() {
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 75b719bd7e2..0819358f515 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -1,59 +1,48 @@
 import * as React from 'react';
 import { ContextMenu } from '@base-ui/react/context-menu';
 
+const popupClass =
+  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+const itemClass =
+  "flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+const submenuTriggerClass =
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 outline-hidden select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+
 export default function ExampleContextMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-sm border border-gray-300 text-gray-900 select-none font-normal">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Positioner className="outline-hidden">
-          <ContextMenu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity] data-[ending-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Add to Library
-            </ContextMenu.Item>
+          <ContextMenu.Popup className={popupClass}>
+            <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>
 
             <ContextMenu.SubmenuRoot>
-              <ContextMenu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                Add to Playlist <ChevronRightIcon />
+              <ContextMenu.SubmenuTrigger className={submenuTriggerClass}>
+                Add to Playlist <CaretRightIcon />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Positioner className="outline-hidden" alignOffset={-4} sideOffset={-4}>
-                  <ContextMenu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-                    <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Get Up!
-                    </ContextMenu.Item>
-                    <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Inside Out
-                    </ContextMenu.Item>
-                    <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Night Beats
-                    </ContextMenu.Item>
-                    <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-                    <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      New playlist…
-                    </ContextMenu.Item>
+                  <ContextMenu.Popup className={popupClass}>
+                    <ContextMenu.Item className={itemClass}>Get Up!</ContextMenu.Item>
+                    <ContextMenu.Item className={itemClass}>Inside Out</ContextMenu.Item>
+                    <ContextMenu.Item className={itemClass}>Night Beats</ContextMenu.Item>
+                    <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+                    <ContextMenu.Item className={itemClass}>New playlist…</ContextMenu.Item>
                   </ContextMenu.Popup>
                 </ContextMenu.Positioner>
               </ContextMenu.Portal>
             </ContextMenu.SubmenuRoot>
 
-            <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
 
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Play Next
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Play Last
-            </ContextMenu.Item>
-            <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Favorite
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Share
-            </ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Play Next</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Play Last</ContextMenu.Item>
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <ContextMenu.Item className={itemClass}>Favorite</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Share</ContextMenu.Item>
           </ContextMenu.Popup>
         </ContextMenu.Positioner>
       </ContextMenu.Portal>
@@ -61,10 +50,17 @@ export default function ExampleContextMenu() {
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 1333505dec0..c12555fc560 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -39,7 +67,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -47,7 +75,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
@@ -58,6 +86,9 @@
 
 .Popup {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -65,44 +96,57 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  transition: all 150ms;
+  padding: 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .Container {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 78fb16a8762..e5dd562a31f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -39,7 +67,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -47,7 +75,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
@@ -61,86 +89,130 @@
   position: fixed;
   top: 50%;
   left: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  transition: all 150ms;
-
-  transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
-  translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
+  padding: 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
+  scale: calc(1 - 0.1 * var(--nested-dialogs));
+  transition:
+    translate 100ms ease-out,
+    scale 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  &[data-nested-dialog-open] {
-    &::after {
-      content: '';
-      inset: 0;
-      position: absolute;
-      border-radius: inherit;
-      background-color: rgb(0 0 0 / 0.05);
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgb(0 0 0 / 0.05);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 100ms ease-out;
+  }
+
+  &[data-nested-dialog-open]::after {
+    opacity: 1;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    translate: -50% calc(-50% + 0.25rem + 1.25rem * var(--nested-dialogs));
+    scale: 0.96;
   }
 }
 
+.PopupBody,
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .TextareaContainer {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  margin-top: 1rem;
+  gap: 1rem;
 }
 
 .Textarea {
   box-sizing: border-box;
-  padding-block: 0.5rem;
-  padding-inline: 0.875rem;
+  padding: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
-  min-height: 12rem;
-  border-radius: 0.375rem;
+  min-height: 8rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.tsx
index 6e99746ac64..a2c0f98fabc 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.tsx
@@ -29,32 +29,34 @@ export default function ExampleDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Popup className={styles.Popup}>
-          <Dialog.Title id={titleId} className={styles.Title}>
-            New tweet
-          </Dialog.Title>
-          <form
-            className={styles.TextareaContainer}
-            onSubmit={(event) => {
-              event.preventDefault();
-              // Close the dialog when submitting
-              setDialogOpen(false);
-            }}
-          >
-            <textarea
-              aria-labelledby={titleId}
-              required
-              className={styles.Textarea}
-              placeholder="What’s on your mind?"
-              value={textareaValue}
-              onChange={(event) => setTextareaValue(event.target.value)}
-            />
-            <div className={styles.Actions}>
-              <Dialog.Close className={styles.Button}>Cancel</Dialog.Close>
-              <button type="submit" className={styles.Button}>
-                Tweet
-              </button>
-            </div>
-          </form>
+          <div className={styles.PopupBody}>
+            <Dialog.Title id={titleId} className={styles.Title}>
+              New tweet
+            </Dialog.Title>
+            <form
+              className={styles.TextareaContainer}
+              onSubmit={(event) => {
+                event.preventDefault();
+                // Close the dialog when submitting
+                setDialogOpen(false);
+              }}
+            >
+              <textarea
+                aria-labelledby={titleId}
+                required
+                className={styles.Textarea}
+                placeholder="What’s on your mind?"
+                value={textareaValue}
+                onChange={(event) => setTextareaValue(event.target.value)}
+              />
+              <div className={styles.Actions}>
+                <Dialog.Close className={styles.Button}>Cancel</Dialog.Close>
+                <button type="submit" className={styles.Button}>
+                  Tweet
+                </button>
+              </div>
+            </form>
+          </div>
         </Dialog.Popup>
       </Dialog.Portal>
 
@@ -62,10 +64,12 @@ export default function ExampleDialog() {
       <AlertDialog.Root open={confirmationOpen} onOpenChange={setConfirmationOpen}>
         <AlertDialog.Portal>
           <AlertDialog.Popup className={styles.Popup}>
-            <AlertDialog.Title className={styles.Title}>Discard tweet?</AlertDialog.Title>
-            <AlertDialog.Description className={styles.Description}>
-              Your tweet will be lost.
-            </AlertDialog.Description>
+            <div className={styles.Intro}>
+              <AlertDialog.Title className={styles.Title}>Discard tweet?</AlertDialog.Title>
+              <AlertDialog.Description className={styles.Description}>
+                Your tweet will be lost.
+              </AlertDialog.Description>
+            </div>
             <div className={styles.Actions}>
               <AlertDialog.Close className={styles.Button}>Go back</AlertDialog.Close>
               <button
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 4dadd9622b4..57fb33de640 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,17 +24,17 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-          <Dialog.Title id={titleId} className="-mt-1.5 mb-1 text-lg font-bold">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-1 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+          <Dialog.Title id={titleId} className="text-base font-bold">
             New tweet
           </Dialog.Title>
           <form
-            className="mt-4 flex flex-col gap-6"
+            className="flex flex-col gap-4"
             onSubmit={(event) => {
               event.preventDefault();
               // Close the dialog when submitting
@@ -44,18 +44,18 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-48 w-full rounded-md border border-gray-200 px-3.5 py-2 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 p-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}
             />
-            <div className="flex justify-end gap-4">
-              <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+            <div className="flex justify-end gap-3">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
               >
                 Tweet
               </button>
@@ -67,20 +67,20 @@ export default function ExampleDialog() {
       {/* Confirmation dialog */}
       <AlertDialog.Root open={confirmationOpen} onOpenChange={setConfirmationOpen}>
         <AlertDialog.Portal>
-          <AlertDialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-            <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-bold">
-              Discard tweet?
-            </AlertDialog.Title>
-            <AlertDialog.Description className="mb-6 text-base text-gray-600">
-              Your tweet will be lost.
-            </AlertDialog.Description>
-            <div className="flex items-center justify-end gap-4">
-              <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+            <div className="flex flex-col gap-1">
+              <AlertDialog.Title className="text-base font-bold">Discard tweet?</AlertDialog.Title>
+              <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                Your tweet will be lost.
+              </AlertDialog.Description>
+            </div>
+            <div className="flex justify-end gap-3">
+              <AlertDialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 382ea9ff1aa..d63e34239c8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -15,9 +15,9 @@ export default function DialogDetachedTriggersControlledDemo() {
 
   return (
     <React.Fragment>
-      <div className="flex gap-2 flex-wrap justify-center">
+      <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -63,14 +63,14 @@ export default function DialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <Dialog.Portal>
-            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-              <Dialog.Title className="-mt-1.5 mb-1 text-lg font-bold">
-                Dialog {payload}
-              </Dialog.Title>
+            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+              {payload !== undefined && (
+                <Dialog.Title className="text-base font-bold">Dialog {payload}</Dialog.Title>
+              )}
 
-              <div className="flex justify-end gap-4">
-                <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+              <div className="flex justify-end gap-3">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/css-modules/index.tsx
index e4d1fd1edfe..aa4e19e054c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/css-modules/index.tsx
@@ -16,10 +16,12 @@ export default function DialogDetachedTriggersSimpleDemo() {
         <Dialog.Portal>
           <Dialog.Backdrop className={styles.Backdrop} />
           <Dialog.Popup className={styles.Popup}>
-            <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
-            <Dialog.Description className={styles.Description}>
-              You are all caught up. Good job!
-            </Dialog.Description>
+            <div className={styles.Intro}>
+              <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
+              <Dialog.Description className={styles.Description}>
+                You are all caught up. Good job!
+              </Dialog.Description>
+            </div>
             <div className={styles.Actions}>
               <Dialog.Close className={styles.Button}>Close</Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index ab18d3b9c90..f4244f56321 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+        className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         handle={demoDialog}
       >
         View notifications
@@ -16,14 +16,16 @@ export default function DialogDetachedTriggersSimpleDemo() {
 
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-            <Dialog.Title className="-mt-1.5 mb-1 text-lg font-bold">Notifications</Dialog.Title>
-            <Dialog.Description className="mb-6 text-base text-gray-600">
-              You are all caught up. Good job!
-            </Dialog.Description>
-            <div className="flex justify-end gap-4">
-              <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <div className="flex flex-col gap-1">
+              <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
+              <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                You are all caught up. Good job!
+              </Dialog.Description>
+            </div>
+            <div className="flex justify-end gap-3">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index d9b961bd89a..070e3ffa9d2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -39,8 +67,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
-  touch-action: none;
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -48,7 +75,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
@@ -59,6 +86,9 @@
 
 .Popup {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -66,43 +96,55 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  transition: all 150ms;
-  touch-action: none;
+  padding: 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.tsx
index 13e08dafb92..d5171ffbf43 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.tsx
@@ -8,10 +8,12 @@ export default function ExampleDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Popup className={styles.Popup}>
-          <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
-          <Dialog.Description className={styles.Description}>
-            You are all caught up. Good job!
-          </Dialog.Description>
+          <div className={styles.Intro}>
+            <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
+            <Dialog.Description className={styles.Description}>
+              You are all caught up. Good job!
+            </Dialog.Description>
+          </div>
           <div className={styles.Actions}>
             <Dialog.Close className={styles.Button}>Close</Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index d747fd5eca7..270515cdb9b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,18 +3,20 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-          <Dialog.Title className="-mt-1.5 mb-1 text-lg font-bold">Notifications</Dialog.Title>
-          <Dialog.Description className="mb-6 text-base text-gray-600">
-            You are all caught up. Good job!
-          </Dialog.Description>
-          <div className="flex justify-end gap-4">
-            <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <div className="flex flex-col gap-1">
+            <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
+            <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+              You are all caught up. Good job!
+            </Dialog.Description>
+          </div>
+          <div className="flex justify-end gap-3">
+            <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 5882b2d4c64..2adbce35a4a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -38,14 +66,14 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 250ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   @supports (-webkit-touch-callout: none) {
     position: absolute;
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
@@ -82,42 +110,35 @@
 }
 
 .Scrollbar {
-  position: absolute;
   display: flex;
-  width: 0.25rem;
-  margin: 0.25rem;
   justify-content: center;
-  border-radius: 1rem;
+  background-color: rgb(0 0 0 / 12%);
+  width: 0.5rem;
   opacity: 0;
-  transition: opacity 250ms;
+  transition: opacity 150ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
+  &[data-scrolling] {
+    transition-duration: 0ms;
+  }
+
   &[data-hovering],
   &[data-scrolling] {
     opacity: 1;
-    transition-duration: 75ms;
-    transition-delay: 0ms;
     pointer-events: auto;
   }
-
-  @media (min-width: 768px) {
-    width: 0.325rem;
-  }
 }
 
 .ScrollbarThumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
+  background-color: oklch(14.5% 0 0deg);
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% + 1rem);
-    height: calc(100% + 1rem);
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
   }
 }
 
@@ -129,20 +150,20 @@
   width: min(40rem, calc(100vw - 2rem));
   max-height: 100%;
   max-width: 100%;
-  padding: 2rem;
-  border-radius: 0.5rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  outline: 1px solid var(--color-gray-200);
-  box-shadow: 0 24px 45px rgb(15 23 42 / 0.18);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005),
-    transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
-  overflow: hidden;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
   min-height: 0;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -152,26 +173,34 @@
   }
 }
 
-.PopupHeader {
+.Header {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.5rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
+  border-bottom: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+  }
 }
 
 .Title {
   margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.875rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1rem;
-  font-size: 1rem;
-  line-height: 1.6rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Body {
@@ -181,20 +210,13 @@
   min-height: 0;
   overflow: hidden;
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    height: 1px;
-    width: 100%;
-    background: var(--color-gray-200);
-  }
+  &:has(.BodyViewport:focus-visible) {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 0;
 
-  &::before {
-    top: 0;
-  }
-  &::after {
-    bottom: 0;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -203,44 +225,48 @@
   flex: 1 1 auto;
   min-height: 0;
   overscroll-behavior: contain;
-  padding: 1.5rem 1.5rem 1.5rem 0.25rem;
-
-  &:focus-visible {
-    outline: 1px solid var(--color-blue);
-    outline-offset: -1px;
-  }
+  outline: none;
 }
 
 .BodyContent {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+}
+
+.Section {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
 }
 
 .SectionTitle {
-  margin: 0 0 0.4rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .SectionBody {
   margin: 0;
-  font-size: 0.95rem;
-  line-height: 1.55rem;
-  color: var(--color-gray-700);
-}
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(37.1% 0 0deg);
 
-.FooterNote {
-  margin: 0 0 1.5rem;
-  font-size: 0.95rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  @media (prefers-color-scheme: dark) {
+    color: oklch(87% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: flex-end;
   gap: 0.75rem;
-  margin-top: 1rem;
+  padding: 1rem;
+  border-top: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
index bdd8f04db93..06af4d228ee 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
@@ -11,17 +11,17 @@ export default function InsideScrollDialog() {
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Viewport className={styles.Viewport}>
           <Dialog.Popup className={styles.Popup}>
-            <div className={styles.PopupHeader}>
+            <div className={styles.Header}>
               <Dialog.Title className={styles.Title}>Dialog</Dialog.Title>
+              <Dialog.Description className={styles.Description}>
+                This layout keeps the popup fully on screen while allowing its content to scroll.
+              </Dialog.Description>
             </div>
-            <Dialog.Description className={styles.Description}>
-              This layout keeps the popup fully on screen while allowing its content to scroll.
-            </Dialog.Description>
             <ScrollArea.Root className={styles.Body}>
               <ScrollArea.Viewport className={styles.BodyViewport}>
                 <ScrollArea.Content className={styles.BodyContent}>
                   {CONTENT_SECTIONS.map((item) => (
-                    <section key={item.title}>
+                    <section className={styles.Section} key={item.title}>
                       <h3 className={styles.SectionTitle}>{item.title}</h3>
                       <p className={styles.SectionBody}>{item.body}</p>
                     </section>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 40e08ddffa6..e661ef15918 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,40 +5,36 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-[250ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden rounded-lg bg-gray-50 p-8 text-gray-900 shadow-[0_24px_45px_rgba(15,23,42,0.18)] outline-1 outline-gray-200 transition-all duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 dark:outline-gray-300">
-            <div className="mb-2 flex items-start justify-between gap-3">
-              <Dialog.Title className="m-0 text-xl font-bold leading-[1.875rem]">
-                Dialog
-              </Dialog.Title>
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0">
+            <div className="flex flex-col gap-1 p-4 border-b border-neutral-950 dark:border-white">
+              <Dialog.Title className="text-base font-bold">Dialog</Dialog.Title>
+              <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                This layout keeps the popup fully on screen while allowing its content to scroll.
+              </Dialog.Description>
             </div>
-            <Dialog.Description className="m-0 mb-4 text-base leading-[1.6rem] text-gray-600">
-              This layout keeps the popup fully on screen while allowing its content to scroll.
-            </Dialog.Description>
-            <ScrollArea.Root className="relative flex min-h-0 flex-1 overflow-hidden before:absolute before:top-0 before:h-px before:w-full before:bg-gray-200 before:content-[''] after:absolute after:bottom-0 after:h-px after:w-full after:bg-gray-200 after:content-['']">
-              <ScrollArea.Viewport className="flex-1 min-h-0 overflow-y-auto overscroll-contain py-6 pr-6 pl-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
-                <ScrollArea.Content className="flex flex-col gap-6">
+            <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden has-[>_:first-child:focus-visible]:outline-2 has-[>_:first-child:focus-visible]:outline-offset-0 has-[>_:first-child:focus-visible]:outline-neutral-950 dark:has-[>_:first-child:focus-visible]:outline-white">
+              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain outline-none">
+                <ScrollArea.Content className="flex flex-col">
                   {CONTENT_SECTIONS.map((item) => (
-                    <section key={item.title}>
-                      <h3 className="mb-[0.4rem] text-base font-bold leading-6">{item.title}</h3>
-                      <p className="m-0 text-[0.95rem] leading-[1.55rem] text-gray-700">
-                        {item.body}
-                      </p>
+                    <section className="flex flex-col gap-1 p-4" key={item.title}>
+                      <h3 className="text-sm font-bold">{item.title}</h3>
+                      <p className="text-sm text-neutral-700 dark:text-neutral-300">{item.body}</p>
                     </section>
                   ))}
                 </ScrollArea.Content>
               </ScrollArea.Viewport>
-              <ScrollArea.Scrollbar className="pointer-events-none absolute m-1 flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-[250ms] data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:duration-[75ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] md:w-[0.325rem]">
-                <ScrollArea.Thumb className="w-full rounded-[inherit] bg-gray-500 before:absolute before:left-1/2 before:top-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']" />
+              <ScrollArea.Scrollbar className="pointer-events-none flex w-2 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-150 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0">
+                <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
-            <div className="mt-4 flex justify-end gap-3">
-              <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+            <div className="flex justify-end gap-3 p-4 border-t border-neutral-950 dark:border-white">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index edb5745928b..05fb6d7649e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -3,77 +3,103 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .GhostButton {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: none;
+  background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  background-color: transparent;
-  color: var(--color-blue);
-  border-radius: 0.25rem;
-  padding: 0.125rem 0.375rem;
-  margin: -0.125rem -0.375rem;
-  border: 0;
-  outline: 0;
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
 
-  @media (hover: hover) {
-    &:hover {
-      background-color: color-mix(in oklch, var(--color-blue), transparent 95%);
-    }
+  @media (prefers-color-scheme: dark) {
+    color: white;
   }
 
-  &:active {
-    background-color: color-mix(in oklch, var(--color-blue), transparent 90%);
-  }
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(92.2% 0 0deg);
 
-  @media (prefers-color-scheme: dark) {
-    @media (hover: hover) {
-      &:hover {
-        background-color: color-mix(in oklch, var(--color-blue), transparent 85%);
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
       }
     }
-
-    &:active {
-      background-color: color-mix(in oklch, var(--color-blue), transparent 75%);
-    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -83,7 +109,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -91,7 +117,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
@@ -105,63 +131,86 @@
   position: fixed;
   top: 50%;
   left: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  transition: all 150ms;
-
-  transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
-  translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
+  padding: 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
+  scale: calc(1 - 0.1 * var(--nested-dialogs));
+  transition:
+    translate 100ms ease-out,
+    scale 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  &[data-nested-dialog-open] {
-    &::after {
-      content: '';
-      inset: 0;
-      position: absolute;
-      border-radius: inherit;
-      background-color: rgb(0 0 0 / 0.05);
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgb(0 0 0 / 0.05);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 100ms ease-out;
+  }
+
+  &[data-nested-dialog-open]::after {
+    opacity: 1;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    translate: -50% calc(-50% + 0.25rem + 1.25rem * var(--nested-dialogs));
+    scale: 0.96;
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   align-items: center;
-  justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
-.ActionsLeft {
-  margin-right: auto;
+.EndActions {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
index f93ee01deff..1b34afec82a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
@@ -8,29 +8,29 @@ export default function ExampleDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Popup className={styles.Popup}>
-          <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
-          <Dialog.Description className={styles.Description}>
-            You are all caught up. Good job!
-          </Dialog.Description>
+          <div className={styles.Intro}>
+            <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
+            <Dialog.Description className={styles.Description}>
+              You are all caught up. Good job!
+            </Dialog.Description>
+          </div>
           <div className={styles.Actions}>
-            <div className={styles.ActionsLeft}>
-              <Dialog.Root>
-                <Dialog.Trigger className={styles.GhostButton}>Customize</Dialog.Trigger>
-                <Dialog.Portal>
-                  <Dialog.Popup className={styles.Popup}>
+            <Dialog.Root>
+              <Dialog.Trigger className={styles.Button}>Customize</Dialog.Trigger>
+              <Dialog.Portal>
+                <Dialog.Popup className={styles.Popup}>
+                  <div className={styles.Intro}>
                     <Dialog.Title className={styles.Title}>Customize notifications</Dialog.Title>
                     <Dialog.Description className={styles.Description}>
                       Review your settings here.
                     </Dialog.Description>
-                    <div className={styles.Actions}>
-                      <Dialog.Close className={styles.Button}>Close</Dialog.Close>
-                    </div>
-                  </Dialog.Popup>
-                </Dialog.Portal>
-              </Dialog.Root>
-            </div>
-
-            <Dialog.Close className={styles.Button}>Close</Dialog.Close>
+                  </div>
+                  <div className={styles.EndActions}>
+                    <Dialog.Close className={styles.Button}>Close</Dialog.Close>
+                  </div>
+                </Dialog.Popup>
+              </Dialog.Portal>
+            </Dialog.Root>
           </div>
         </Dialog.Popup>
       </Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index f06cad2ced5..b60d0880004 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,43 +3,41 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-          <Dialog.Title className="-mt-1.5 mb-1 text-lg font-bold">Notifications</Dialog.Title>
-          <Dialog.Description className="mb-6 text-base text-gray-600">
-            You are all caught up. Good job!
-          </Dialog.Description>
-          <div className="flex items-center justify-end gap-4">
-            <div className="mr-auto flex">
-              <Dialog.Root>
-                <Dialog.Trigger className="-mx-1.5 -my-0.5 flex items-center justify-center rounded-xs px-1.5 py-0.5 text-base font-normal text-blue-800 hover:bg-blue-800/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-blue-800/10 dark:hover:bg-blue-800/15 dark:active:bg-blue-800/25">
-                  Customize
-                </Dialog.Trigger>
-                <Dialog.Portal>
-                  <Dialog.Popup className="fixed top-[calc(50%+1.25rem*var(--nested-dialogs))] left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 scale-[calc(1-0.1*var(--nested-dialogs))] rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-                    <Dialog.Title className="-mt-1.5 mb-1 text-lg font-bold">
-                      Customize notification
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+          <div className="flex flex-col gap-1">
+            <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
+            <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+              You are all caught up. Good job!
+            </Dialog.Description>
+          </div>
+          <div className="flex items-center gap-3">
+            <Dialog.Root>
+              <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                Customize
+              </Dialog.Trigger>
+              <Dialog.Portal>
+                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+                  <div className="flex flex-col gap-1">
+                    <Dialog.Title className="text-base font-bold">
+                      Customize notifications
                     </Dialog.Title>
-                    <Dialog.Description className="mb-6 text-base text-gray-600">
+                    <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                       Review your settings here.
                     </Dialog.Description>
-                    <div className="flex items-center justify-end gap-4">
-                      <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-                        Close
-                      </Dialog.Close>
-                    </div>
-                  </Dialog.Popup>
-                </Dialog.Portal>
-              </Dialog.Root>
-            </div>
-
-            <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
-              Close
-            </Dialog.Close>
+                  </div>
+                  <div className="flex items-center justify-end gap-3">
+                    <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                      Close
+                    </Dialog.Close>
+                  </div>
+                </Dialog.Popup>
+              </Dialog.Portal>
+            </Dialog.Root>
           </div>
         </Dialog.Popup>
       </Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 681e6f2ab6d..65b1ca7cc84 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -3,56 +3,83 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Backdrop {
   position: fixed;
   inset: 0;
+  background-color: rgb(0 0 0 / 20%);
   transition-duration: 600ms;
-  transition-property: -webkit-backdrop-filter, backdrop-filter, opacity;
+  transition-property: opacity;
   transition-timing-function: var(--ease-out-fast);
-  backdrop-filter: blur(1.5px);
-  background-image: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0, rgb(0 0 0 / 10%) 50%);
-
-  @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
-  }
 
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
   }
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(0 0 0 / 50%);
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
-    backdrop-filter: blur(0);
     opacity: 0;
   }
 
@@ -85,16 +112,18 @@
 }
 
 .Scrollbar {
-  position: absolute;
   display: flex;
-  width: 0.25rem;
-  margin: 0.4rem;
   justify-content: center;
-  border-radius: 1rem;
+  background-color: rgb(0 0 0 / 12%);
+  width: 0.5rem;
   opacity: 0;
   transition: opacity 250ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &:hover,
   &[data-scrolling] {
     opacity: 1;
@@ -107,51 +136,44 @@
     transition-duration: 250ms;
     opacity: 0;
   }
-
-  @media (min-width: 768px) {
-    width: 0.4375rem;
-  }
 }
 
 .ScrollbarThumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
+  background-color: oklch(14.5% 0 0deg);
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% + 1rem);
-    height: calc(100% + 1rem);
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
   }
 }
 
 .Popup {
   box-sizing: border-box;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   width: min(40rem, calc(100vw - 2rem));
-  padding: 2rem;
+  padding: 1rem;
   margin: 4rem auto;
-  border-radius: 0.5rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  box-shadow:
-    0 10px 64px -10px rgb(36 40 52 / 20%),
-    0 0.25px 0 1px var(--color-gray-200);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 700ms cubic-bezier(0.45, 1.005, 0, 1.005);
   outline: 0;
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
-
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style] {
     transform: translateY(100dvh);
   }
@@ -164,101 +186,130 @@
 }
 
 .PopupHeader {
+  position: relative;
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-right: 2rem;
 }
 
 .Title {
   margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.875rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.6rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Close {
   box-sizing: border-box;
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
   display: inline-flex;
   align-items: center;
-  position: relative;
-  right: -0.5rem;
-  top: -0.5rem;
   justify-content: center;
-  width: 2.25rem;
-  height: 2.25rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-600);
-  transition:
-    background-color 120ms ease,
-    color 120ms ease;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
-      color: var(--color-gray-900);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.CloseIcon {
-  width: 1.1rem;
-  height: 1.1rem;
+.Body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-.Body {
+.Section {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  margin-bottom: 1.75rem;
+  gap: 0.25rem;
 }
 
 .SectionTitle {
-  margin: 0 0 0.4rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .SectionBody {
   margin: 0;
-  font-size: 0.95rem;
-  line-height: 1.55rem;
-  color: var(--color-gray-700);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(37.1% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(87% 0 0deg);
+  }
 }
 
 .FooterNote {
-  margin: 0 0 1.5rem;
-  font-size: 0.95rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .FooterLink {
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.16em;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
       text-decoration: none;
@@ -266,8 +317,11 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
-    border-radius: 0.125rem;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
index ae01de3ab46..aacba45988c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
@@ -18,19 +18,18 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup ref={popupRef} className={styles.Popup} initialFocus={popupRef}>
                   <div className={styles.PopupHeader}>
                     <Dialog.Title className={styles.Title}>Dialog</Dialog.Title>
+                    <Dialog.Description className={styles.Description}>
+                      This layout keeps an outer container scrollable while the dialog can extend
+                      past the bottom edge.
+                    </Dialog.Description>
                     <Dialog.Close className={styles.Close} aria-label="Close">
-                      <XIcon className={styles.CloseIcon} />
+                      <XIcon />
                     </Dialog.Close>
                   </div>
 
-                  <Dialog.Description className={styles.Description}>
-                    This layout keeps an outer container scrollable while the dialog can extend past
-                    the bottom edge.
-                  </Dialog.Description>
-
                   <div className={styles.Body}>
                     {CONTENT_SECTIONS.map((item) => (
-                      <section key={item.title}>
+                      <section className={styles.Section} key={item.title}>
                         <h3 className={styles.SectionTitle}>{item.title}</h3>
                         <p className={styles.SectionBody}>{item.body}</p>
                       </section>
@@ -65,18 +64,17 @@ export default function OutsideScrollDialog() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 8d77bd4ef5b..01248909e53 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,60 +7,55 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-[linear-gradient(to_bottom,rgb(0_0_0/5%)_0,rgb(0_0_0/10%)_50%)] opacity-100 transition-[backdrop-filter,opacity] duration-[600ms] ease-[var(--ease-out-fast)] backdrop-blur-[1.5px] data-[starting-style]:backdrop-blur-0 data-[starting-style]:opacity-0 data-[ending-style]:backdrop-blur-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-opacity duration-[600ms] ease-[var(--ease-out-fast)] data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-[350ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="group/dialog fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
-            className="h-full overscroll-contain group-data-[ending-style]/dialog:pointer-events-none"
+            className="h-full overscroll-contain group-data-ending-style/dialog:pointer-events-none"
           >
-            <ScrollArea.Viewport className="h-full overscroll-contain group-data-[ending-style]/dialog:pointer-events-none">
+            <ScrollArea.Viewport className="h-full overscroll-contain group-data-ending-style/dialog:pointer-events-none">
               <ScrollArea.Content className="flex min-h-full items-center justify-center">
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-18 w-[min(40rem,calc(100vw-2rem))] rounded-lg bg-gray-50 p-8 text-gray-900 shadow-[0_10px_64px_-10px_rgb(36_40_52/20%),0_0.25px_0_1px_oklch(12%_9%_264deg/7%)] transition-transform duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] dark:shadow-[0_0_0_1px_oklch(29%_0.75%_264deg/80%)] dark:outline-1 dark:outline-gray-300 motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 flex w-[min(40rem,calc(100vw-2rem))] flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-starting-style:translate-y-[100dvh] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:duration-[350ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
-                  <div className="mb-4 flex items-start justify-between gap-3">
-                    <Dialog.Title className="m-0 text-xl font-bold leading-[1.875rem]">
-                      Dialog
-                    </Dialog.Title>
+                  <div className="relative flex flex-col gap-1 pr-8">
+                    <Dialog.Title className="text-base font-bold">Dialog</Dialog.Title>
+                    <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                      This layout keeps an outer container scrollable while the dialog can extend
+                      past the bottom edge.
+                    </Dialog.Description>
                     <Dialog.Close
                       aria-label="Close"
-                      className="relative top-[-0.5rem] right-[-0.5rem] flex items-center justify-center rounded-md border border-gray-200 bg-gray-50 w-[2.25rem] h-[2.25rem] text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+                      className="absolute -top-1 -right-1 inline-flex items-center justify-center w-8 h-8 border-none bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                     >
-                      <XIcon className="h-[1.1rem] w-[1.1rem]" />
+                      <XIcon />
                     </Dialog.Close>
                   </div>
 
-                  <Dialog.Description className="m-0 mb-6 text-base leading-[1.6rem] text-gray-600">
-                    This layout keeps an outer container scrollable while the dialog can extend past
-                    the bottom edge.
-                  </Dialog.Description>
-
-                  <div className="mb-[1.75rem] flex flex-col gap-6">
+                  <div className="flex flex-col gap-4">
                     {CONTENT_SECTIONS.map((item) => (
-                      <section key={item.title}>
-                        <h3 className="m-0 mb-[0.4rem] text-base font-bold leading-6">
-                          {item.title}
-                        </h3>
-                        <p className="m-0 text-[0.95rem] leading-[1.55rem] text-gray-700">
+                      <section className="flex flex-col gap-1" key={item.title}>
+                        <h3 className="text-sm font-bold">{item.title}</h3>
+                        <p className="text-sm text-neutral-700 dark:text-neutral-300">
                           {item.body}
                         </p>
                       </section>
                     ))}
                   </div>
 
-                  <p className="m-0 mb-6 text-[0.95rem] leading-6 text-gray-600">
+                  <p className="text-sm text-neutral-600 dark:text-neutral-400">
                     Related docs:{' '}
                     {RELATED_LINKS.map((item, index) => (
                       <React.Fragment key={item.href}>
                         {index > 0 ? ', ' : null}
                         <a
-                          className="text-gray-900 underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:rounded-[0.125rem] focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:outline-offset-2"
+                          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white focus-visible:outline-offset-2"
                           href={item.href}
                         >
                           {item.label}
@@ -72,8 +67,8 @@ export default function OutsideScrollDialog() {
                 </Dialog.Popup>
               </ScrollArea.Content>
             </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar className="pointer-events-none absolute m-[0.4rem] flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] md:w-[0.4375rem] group-data-[ending-style]/dialog:opacity-0 group-data-[ending-style]/dialog:duration-300">
-              <ScrollArea.Thumb className="w-full rounded-[inherit] bg-gray-500 before:absolute before:content-[''] before:top-1/2 before:left-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2" />
+            <ScrollArea.Scrollbar className="pointer-events-none flex w-2 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-[75ms] data-scrolling:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-ending-style/dialog:opacity-0 group-data-ending-style/dialog:duration-[250ms]">
+              <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
         </Dialog.Viewport>
@@ -85,18 +80,17 @@ export default function OutsideScrollDialog() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index de032c0665d..bb9e85438f9 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -37,12 +65,8 @@
   position: fixed;
   min-height: 100dvh;
   inset: 0;
-  background-color: black;
-  opacity: 0.7;
-  backdrop-filter: blur(2px);
-  transition:
-    opacity 150ms,
-    backdrop-filter 150ms;
+  background-color: rgb(0 0 0 / 20%);
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -50,7 +74,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    background-color: rgb(0 0 0 / 50%);
   }
 
   &[data-starting-style],
@@ -64,7 +88,7 @@
   inset: 0;
   display: grid;
   place-items: center;
-  padding: 2.5rem 1rem;
+  padding: 3rem 1rem;
 
   @media (min-width: 80rem) {
     padding-block: 1.5rem;
@@ -72,9 +96,11 @@
 }
 
 .PopupRoot {
+  position: relative;
   display: flex;
   justify-content: center;
   width: 100%;
+  max-width: 70rem;
   height: 100%;
   transition: opacity 150ms;
   pointer-events: none;
@@ -83,6 +109,10 @@
   &[data-ending-style] {
     opacity: 0;
   }
+
+  @media (min-width: 80rem) {
+    max-width: none;
+  }
 }
 
 .Popup {
@@ -90,66 +120,78 @@
   width: 100%;
   height: 100%;
   max-width: 70rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
+  padding: 1rem;
   pointer-events: auto;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
   [data-starting-style] & {
-    transform: scale(1.1);
+    transform: scale(1.05);
   }
 }
 
 .Close {
   box-sizing: border-box;
   position: absolute;
-  top: 0.5rem;
-  right: 0.75rem;
+  top: -2.5rem;
+  right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 2rem;
+  height: 2rem;
   margin: 0;
-  border: none;
-  color: var(--color-gray-50);
-  border-radius: 0.375rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-gray-900);
+  @media (min-width: 80rem) {
+    top: 0;
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--color-gray-50);
-    outline-offset: -1px;
-
-    @media (prefers-color-scheme: dark) {
-      outline-color: var(--color-gray-900);
-    }
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: rgb(255 255 255 / 0.1);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  @media (min-width: 80rem) {
-    top: 0.75rem;
-    width: 2.5rem;
-    height: 2.5rem;
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
-}
 
-.CloseIcon {
-  width: 2rem;
-  height: 2rem;
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
index df95d85f314..af9ea91f342 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className={styles.Viewport}>
           <Dialog.Popup className={styles.PopupRoot}>
             <Dialog.Close className={styles.Close} aria-label="Close">
-              <XIcon className={styles.CloseIcon} />
+              <XIcon />
             </Dialog.Close>
             <div className={styles.Popup} />
           </Dialog.Popup>
@@ -23,18 +23,17 @@ export default function ExampleUncontainedDialog() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index dab06b9e80e..e0459ad82ec 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,20 +3,20 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-70 backdrop-blur-[2px] transition-[opacity,backdrop-filter] duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute dark:opacity-70" />
-        <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-10 xl:py-6">
-          <Dialog.Popup className="group/popup flex h-full w-full justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/20 dark:bg-black/50 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
+          <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0">
             <Dialog.Close
-              className="absolute right-3 top-2 flex h-7 w-7 items-center justify-center rounded-md border-0 bg-transparent text-gray-50 hover:bg-white/10 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-50 xl:right-3 xl:top-3 xl:h-10 xl:w-10 dark:text-gray-900 dark:focus-visible:outline-gray-900 pointer-events-auto"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
               aria-label="Close"
             >
-              <XIcon className="h-8 w-8" />
+              <XIcon />
             </Dialog.Close>
-            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-110 dark:outline-gray-300" />
+            <div className="pointer-events-auto h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105" />
           </Dialog.Popup>
         </Dialog.Viewport>
       </Dialog.Portal>
@@ -27,18 +27,17 @@ export default function ExampleUncontainedDialog() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index ae39c518f54..5dfb3080522 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -90,9 +118,11 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border-left: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  outline: 0;
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: auto;
@@ -100,12 +130,15 @@
   will-change: transform;
   transform: translateX(var(--drawer-swipe-movement-x));
 
-  &[data-swiping] {
-    user-select: none;
+  @media (prefers-color-scheme: dark) {
+    border-left: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+  &[data-swiping] {
+    user-select: none;
   }
 
   &[data-starting-style],
@@ -120,7 +153,11 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border-radius: 10px;
+    border: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+    }
   }
 }
 
@@ -131,23 +168,26 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
+  margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: flex-end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index 2343d513f34..186e00a3abe 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -3,20 +3,20 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right">
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
-        <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-[var(--viewport-padding)]">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-gray-50 p-6 pr-[calc(1.5rem+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-gray-300">
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-              <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">Drawer</Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-gray-600">
+              <Drawer.Title className="mb-1 text-base font-bold">Drawer</Drawer.Title>
+              <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
                 This is a drawer that slides in from the side. You can swipe to dismiss it.
               </Drawer.Description>
-              <div className="flex justify-end gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+              <div className="flex justify-end gap-3">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index f0f675ed925..8d6c54be266 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -6,34 +6,39 @@
 }
 
 .Indent {
-  --indent-progress: var(--drawer-swipe-progress);
-  --indent-radius: calc(1rem * (1 - var(--indent-progress)));
+  --indent-radius: calc(1rem * (1 - var(--drawer-swipe-progress)));
   --indent-transition: calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));
   position: relative;
-  min-height: 320px;
+  min-height: 20rem;
   transition:
     transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
     border-radius 0.25s cubic-bezier(0.32, 0.72, 0, 1);
   transform-origin: center top;
   will-change: transform;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid oklch(14.5% 0 0deg);
   contain: layout;
   padding: 1rem;
-  color: var(--color-gray-900);
-  background-color: var(--color-gray-50);
+  color: oklch(14.5% 0 0deg);
+  background-color: white;
   transition-duration:
     calc(400ms * var(--indent-transition)), calc(250ms * var(--indent-transition));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &[data-active] {
-    transform: scale(calc(0.98 + (0.02 * var(--indent-progress))))
-      translateY(calc(0.5rem * (1 - var(--indent-progress))));
+    transform: scale(calc(0.98 + (0.02 * var(--drawer-swipe-progress))))
+      translateY(calc(0.5rem * (1 - var(--drawer-swipe-progress))));
     border-top-left-radius: var(--indent-radius);
     border-top-right-radius: var(--indent-radius);
   }
 }
 
 .Center {
-  min-height: 320px;
+  min-height: 20rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -45,7 +50,7 @@
   background-color: black;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-gray-300);
+    background-color: oklch(87% 0 0deg);
   }
 }
 
@@ -54,33 +59,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -129,22 +162,26 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border-top: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  outline: 0;
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   will-change: transform;
   transform: translateY(var(--drawer-swipe-movement-y));
 
-  &[data-swiping] {
-    user-select: none;
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+  &[data-swiping] {
+    user-select: none;
   }
 
   &[data-starting-style],
@@ -167,30 +204,36 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: oklch(87% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(37.1% 0 0deg);
+  }
 }
 
 .Title {
   margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
   text-align: center;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index 10d003f6eff..bfe735e0407 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -8,27 +8,27 @@ export default function ExampleDrawer() {
   return (
     <Drawer.Provider>
       <div ref={setPortalContainer} className="[--bleed:3rem] relative w-full overflow-hidden">
-        <Drawer.IndentBackground className="absolute inset-0 bg-black dark:bg-gray-300" />
-        <Drawer.Indent className="[--indent-progress:var(--drawer-swipe-progress)] [--indent-radius:calc(1rem*(1-var(--indent-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-[320px] bg-gray-50 border border-gray-200 p-4 text-gray-900 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-[active]:[transform:scale(calc(0.98+(0.02*var(--indent-progress))))_translateY(calc(0.5rem*(1-var(--indent-progress))))] data-[active]:[border-top-left-radius:var(--indent-radius)] data-[active]:[border-top-right-radius:var(--indent-radius)]">
-          <div className="flex min-h-[320px] items-center justify-center">
+        <Drawer.IndentBackground className="absolute inset-0 bg-black dark:bg-neutral-300" />
+        <Drawer.Indent className="[--indent-radius:calc(1rem*(1-var(--drawer-swipe-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-80 border border-neutral-950 bg-white p-4 text-neutral-950 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-active:transform-[scale(calc(0.98+(0.02*var(--drawer-swipe-progress))))_translateY(calc(0.5rem*(1-var(--drawer-swipe-progress))))] data-active:rounded-tl-(--indent-radius) data-active:rounded-tr-(--indent-radius) dark:border-white dark:bg-neutral-950 dark:text-white">
+          <div className="flex min-h-80 items-center justify-center">
             <Drawer.Root modal={false}>
-              <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal leading-6 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+              <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Open drawer
               </Drawer.Trigger>
               <Drawer.Portal container={portalContainer}>
-                <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+                <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
                 <Drawer.Viewport className="absolute inset-0 flex items-end justify-center">
-                  <Drawer.Popup className="box-border w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] rounded-t-2xl outline outline-1 outline-gray-200 bg-gray-50 px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-gray-900 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-gray-300">
-                    <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-gray-300" />
+                  <Drawer.Popup className="w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] border-t border-neutral-950 bg-white px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                    <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
                     <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-                      <Drawer.Title className="mt-0 mb-1 text-lg leading-7 font-bold tracking-[-0.0025em] text-center">
+                      <Drawer.Title className="mt-0 mb-1 text-base font-bold text-center">
                         Notifications
                       </Drawer.Title>
-                      <Drawer.Description className="mb-6 text-base leading-6 text-gray-600 text-center">
+                      <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                         You are all caught up. Good job!
                       </Drawer.Description>
-                      <div className="flex justify-center gap-4">
-                        <Drawer.Close className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal leading-6 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+                      <div className="flex justify-center gap-3">
+                        <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                           Close
                         </Drawer.Close>
                       </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 6e5596d6007..840a71e91cb 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -39,9 +67,8 @@
   inset: 0;
   min-height: 100dvh;
   transition-duration: 600ms;
-  transition-property: -webkit-backdrop-filter, backdrop-filter, opacity;
+  transition-property: opacity;
   transition-timing-function: var(--ease-out-fast);
-  backdrop-filter: blur(1.5px);
   background-image: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0, rgb(0 0 0 / 10%) 50%);
   opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
 
@@ -55,7 +82,6 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    backdrop-filter: blur(0);
     opacity: 0;
   }
 
@@ -99,7 +125,7 @@
   min-height: 100%;
   padding-top: 2rem;
 
-  @media (min-width: 768px) {
+  @media (min-width: 42rem) {
     padding-top: 4rem;
     padding-bottom: 4rem;
     padding-inline: 4rem;
@@ -140,47 +166,33 @@
   display: flex;
   flex-direction: column;
   padding: 1rem 1.5rem 1.5rem;
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  box-shadow:
-    0 10px 64px -10px rgb(36 40 52 / 20%),
-    0 0.25px 0 1px var(--color-gray-200);
-  color: var(--color-gray-900);
+  border-top: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  color: oklch(14.5% 0 0deg);
   transition: box-shadow 350ms cubic-bezier(0.375, 0.015, 0.545, 0.455);
-}
 
-@media (prefers-color-scheme: dark) {
-  .Panel {
-    outline: 1px solid var(--color-gray-300);
-    box-shadow: 0 0 0 1px var(--color-gray-200);
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
 }
 
-.Popup[data-ending-style] .Panel {
-  box-shadow:
-    0 10px 64px -10px rgb(36 40 52 / 0%),
-    0 0.25px 0 1px rgb(0 0 0 / 0%);
-}
-
 @media (prefers-color-scheme: dark) {
-  .Popup[data-ending-style] .Panel {
-    box-shadow: 0 0 0 1px rgb(0 0 0 / 0%);
+  .Panel {
+    box-shadow: none;
   }
 }
 
-@media (min-width: 768px) {
-  .Panel {
-    border-radius: 0.75rem;
-  }
+.Popup[data-ending-style] .Panel {
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 0%);
 }
 
 .Header {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  margin-bottom: 0.75rem;
+  align-items: start;
 }
 
 .HeaderSpacer {
@@ -188,59 +200,86 @@
   height: 2.25rem;
 }
 
+@media (min-width: 42rem) {
+  .Panel {
+    border: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+    }
+  }
+}
+
 .Handle {
   width: 3rem;
   height: 0.25rem;
-  border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: oklch(87% 0 0deg);
   justify-self: center;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(37.1% 0 0deg);
+  }
 }
 
 .CloseButton {
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 9999px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 0;
+  background-color: transparent;
+  color: oklch(14.5% 0 0deg);
   justify-self: end;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Title {
   margin: 0 0 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1.25rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
-}
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
 
-.ScrollArea {
-  padding-bottom: 2rem;
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .List {
@@ -264,16 +303,49 @@
 }
 
 .Link {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
   width: 100%;
-  padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
+  height: 3rem;
+  padding: 0 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: inherit;
   text-decoration: none;
-  background-color: var(--color-gray-100);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -301,7 +373,7 @@
     opacity: 0;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 42rem) {
     width: 0.4375rem;
   }
 }
@@ -309,15 +381,5 @@
 .ScrollbarThumb {
   width: 100%;
   border-radius: inherit;
-  background-color: var(--color-gray-500);
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% + 1rem);
-    height: calc(100% + 1rem);
-  }
+  background-color: oklch(55.6% 0 0deg);
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
index d667272cf6c..2662670e7a8 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
@@ -67,15 +67,7 @@ export default function ExampleDrawerMobileNav() {
                       <div aria-hidden className={styles.HeaderSpacer} />
                       <div className={styles.Handle} />
                       <Drawer.Close aria-label="Close menu" className={styles.CloseButton}>
-                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                          <path
-                            d="M0.75 0.75L6 6M11.25 11.25L6 6M6 6L0.75 11.25M6 6L11.25 0.75"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
+                        <XIcon />
                       </Drawer.Close>
                     </div>
 
@@ -120,3 +112,21 @@ export default function ExampleDrawerMobileNav() {
     </Drawer.Root>
   );
 }
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 4b0921cccb4..5609d34f2bc 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -53,47 +53,37 @@ const LONG_LIST = [
 export default function ExampleDrawerMobileNav() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 m-0 outline-none text-base font-normal leading-6 text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open mobile menu
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:1] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-[100dvh] bg-[linear-gradient(to_bottom,rgb(0_0_0/5%)_0,rgb(0_0_0/10%)_50%)] opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-[backdrop-filter,opacity] duration-[600ms] ease-[var(--ease-out-fast)] backdrop-blur-[1.5px] supports-[-webkit-touch-callout:none]:absolute data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[starting-style]:backdrop-blur-0 data-[ending-style]:backdrop-blur-0 data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]" />
+        <Drawer.Backdrop className="[--backdrop-opacity:1] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-[linear-gradient(to_bottom,rgb(0_0_0/5%)_0,rgb(0_0_0/10%)_50%)] opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-600 ease-[var(--ease-out-fast)] supports-[-webkit-touch-callout:none]:absolute data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]" />
         <Drawer.Viewport className="group fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
-            className="box-border h-full overscroll-contain transition-[transform,translate] duration-[600ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-[starting-style]:translate-y-[100dvh] group-data-[ending-style]:pointer-events-none"
+            className="h-full overscroll-contain transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-starting-style:translate-y-[100dvh] group-data-ending-style:pointer-events-none"
           >
-            <ScrollArea.Viewport className="box-border h-full overscroll-contain touch-auto">
-              <ScrollArea.Content className="flex min-h-full items-end justify-center pt-8 md:py-16 md:px-16">
-                <Drawer.Popup className="group box-border w-full max-w-[42rem] outline-none transition-transform duration-[800ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(max(100dvh,100%)+2px))] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]">
+            <ScrollArea.Viewport className="h-full overscroll-contain touch-auto">
+              <ScrollArea.Content className="flex min-h-full items-end justify-center pt-8 min-[42rem]:px-16 min-[42rem]:py-16">
+                <Drawer.Popup className="group w-full max-w-[42rem] outline-none transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(max(100dvh,100%)+2px))] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none">
                   <nav
                     aria-label="Navigation"
-                    className="relative flex flex-col rounded-t-2xl bg-gray-50 px-6 pt-4 pb-6 text-gray-900 shadow-[0_10px_64px_-10px_rgb(36_40_52/20%),0_0.25px_0_1px_oklch(12%_9%_264deg/7%)] outline outline-1 outline-gray-200 transition-shadow duration-[350ms] ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-[ending-style]:shadow-[0_10px_64px_-10px_rgb(36_40_52/0%),0_0.25px_0_1px_rgb(0_0_0/0%)] dark:outline-gray-300 dark:shadow-[0_0_0_1px_oklch(29%_0.75%_264deg/80%)] dark:group-data-[ending-style]:shadow-[0_0_0_1px_rgb(0_0_0/0%)] md:rounded-xl"
+                    className="relative flex flex-col border-t border-neutral-950 bg-white px-6 pt-4 pb-6 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-shadow duration-350 ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-ending-style:shadow-[0.25rem_0.25rem_0] group-data-ending-style:shadow-black/0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none min-[42rem]:border"
                   >
-                    <div className="mb-3 grid grid-cols-[1fr_auto_1fr] items-center">
+                    <div className="grid grid-cols-[1fr_auto_1fr] items-start">
                       <div aria-hidden className="h-9 w-9" />
-                      <div className="h-1 w-12 justify-self-center rounded-full bg-gray-300" />
+                      <div className="h-1 w-12 justify-self-center bg-neutral-300 dark:bg-neutral-700" />
                       <Drawer.Close
                         aria-label="Close menu"
-                        className="flex h-9 w-9 items-center justify-center justify-self-end rounded-full border border-gray-200 bg-gray-50 text-gray-900 hover:bg-gray-100 active:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                        className="flex h-8 w-8 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                       >
-                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                          <path
-                            d="M0.75 0.75L6 6M11.25 11.25L6 6M6 6L0.75 11.25M6 6L11.25 0.75"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
+                        <XIcon />
                       </Drawer.Close>
                     </div>
 
                     <Drawer.Content className="w-full">
-                      <Drawer.Title className="m-0 mb-1 text-lg font-bold leading-7 tracking-[-0.0025em]">
-                        Menu
-                      </Drawer.Title>
-                      <Drawer.Description className="m-0 mb-5 text-base leading-6 text-gray-600">
+                      <Drawer.Title className="m-0 mb-1 text-base font-bold">Menu</Drawer.Title>
+                      <Drawer.Description className="m-0 mb-5 text-sm text-neutral-600 dark:text-neutral-400">
                         Scroll the long list. Flick down from the top to dismiss.
                       </Drawer.Description>
 
@@ -102,7 +92,7 @@ export default function ExampleDrawerMobileNav() {
                           {ITEMS.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="w-full rounded-xl bg-gray-100 px-4 py-3 text-gray-900 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                 href={item.href}
                               >
                                 {item.label}
@@ -118,7 +108,7 @@ export default function ExampleDrawerMobileNav() {
                           {LONG_LIST.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="w-full rounded-xl bg-gray-100 px-4 py-3 text-gray-900 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                 href={item.href}
                               >
                                 {item.label}
@@ -132,8 +122,8 @@ export default function ExampleDrawerMobileNav() {
                 </Drawer.Popup>
               </ScrollArea.Content>
             </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar className="pointer-events-none absolute m-[0.4rem] flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] md:w-[0.4375rem] data-[ending-style]:opacity-0 data-[ending-style]:duration-[250ms]">
-              <ScrollArea.Thumb className="w-full rounded-[inherit] bg-gray-500 before:absolute before:content-[''] before:top-1/2 before:left-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2" />
+            <ScrollArea.Scrollbar className="pointer-events-none absolute m-[0.4rem] flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-250 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-75 data-scrolling:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-75 hover:delay-[0ms] data-ending-style:opacity-0 data-ending-style:duration-250 min-[42rem]:w-[0.4375rem]">
+              <ScrollArea.Thumb className="w-full rounded-[inherit] bg-neutral-500" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
         </Drawer.Viewport>
@@ -141,3 +131,21 @@ export default function ExampleDrawerMobileNav() {
     </Drawer.Root>
   );
 }
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index eed70eea366..3d572c27651 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -3,77 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
   }
-}
 
-.GhostButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  background-color: transparent;
-  color: var(--color-blue);
-  border-radius: 0.25rem;
-  padding: 0.125rem 0.375rem;
-  margin: -0.125rem -0.375rem;
-  border: 0;
-  outline: 0;
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
 
-  @media (hover: hover) {
-    &:hover {
-      background-color: color-mix(in oklch, var(--color-blue), transparent 95%);
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: color-mix(in oklch, var(--color-blue), transparent 90%);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    @media (hover: hover) {
-      &:hover {
-        background-color: color-mix(in oklch, var(--color-blue), transparent 85%);
-      }
-    }
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
-    &:active {
-      background-color: color-mix(in oklch, var(--color-blue), transparent 75%);
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -139,16 +123,21 @@
 
   box-sizing: border-box;
   position: relative;
-  width: 100%;
+  width: calc(100% + 2px);
+  margin-left: -1px;
+  margin-right: -1px;
   max-height: calc(80vh + var(--bleed));
   height: var(--drawer-height, auto);
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  outline: 0;
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transform-origin: 50% calc(100% - var(--bleed));
@@ -159,6 +148,13 @@
   will-change: transform;
   transform: translateY(var(--translate-y)) scale(var(--stack-scale));
 
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-swiping],
   &[data-nested-drawer-swiping] {
     transition-duration: 0ms;
@@ -168,15 +164,10 @@
     user-select: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
-
   &::after {
     content: '';
     inset: 0;
     position: absolute;
-    border-radius: inherit;
     background-color: transparent;
     pointer-events: none;
     transition: background-color 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -221,10 +212,13 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: oklch(87% 0 0deg);
   transition: opacity 0.2s;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(37.1% 0 0deg);
+  }
+
   [data-nested-drawer-open] & {
     opacity: 0;
   }
@@ -237,19 +231,22 @@
 .Title {
   margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
   text-align: center;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
@@ -266,12 +263,16 @@
 .List {
   margin: 0 0 1.5rem;
   padding-left: 1.25rem;
-  color: var(--color-gray-700);
+  color: oklch(37.1% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(87% 0 0deg);
+  }
 }
 
 .Field {
   display: grid;
-  gap: 0.375rem;
+  gap: 0.5rem;
   margin-bottom: 1rem;
 }
 
@@ -279,27 +280,107 @@
   font-size: 0.925rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-700);
-}
+  color: oklch(37.1% 0 0deg);
 
-.Input,
-.Textarea {
+  @media (prefers-color-scheme: dark) {
+    color: oklch(87% 0 0deg);
+  }
+}
+.Input {
   box-sizing: border-box;
   width: 100%;
-  border-radius: 0.375rem;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  padding: 0.5rem 0.625rem;
-  font: inherit;
+  height: 2rem;
+  padding: 0 0.5rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 8rem;
+  padding: 0.5rem 0.625rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   resize: vertical;
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Input:focus-visible,
 .Textarea:focus-visible {
-  outline: 2px solid var(--color-blue);
+  outline: 2px solid oklch(14.5% 0 0deg);
   outline-offset: -1px;
+
+  @media (prefers-color-scheme: dark) {
+    outline-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.tsx
index 40730f2f31e..cc637d807b3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.tsx
@@ -21,9 +21,7 @@ export default function ExampleDrawerNested() {
               <div className={styles.Actions}>
                 <div className={styles.ActionsLeft}>
                   <Drawer.Root>
-                    <Drawer.Trigger className={styles.GhostButton}>
-                      Security settings
-                    </Drawer.Trigger>
+                    <Drawer.Trigger className={styles.Button}>Security settings</Drawer.Trigger>
                     <Drawer.Portal>
                       <Drawer.Viewport className={styles.Viewport}>
                         <Drawer.Popup className={styles.Popup}>
@@ -43,7 +41,7 @@ export default function ExampleDrawerNested() {
                             <div className={styles.Actions}>
                               <div className={styles.ActionsLeft}>
                                 <Drawer.Root>
-                                  <Drawer.Trigger className={styles.GhostButton}>
+                                  <Drawer.Trigger className={styles.Button}>
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 2da5b0ee11d..ab0de67ebdc 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -4,17 +4,17 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawerNested() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open drawer stack
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
           <Drawer.Popup className={popupClassName}>
             <div className={handleClassName} />
             <Drawer.Content className={contentClassName}>
-              <Drawer.Title className="mb-1 text-lg font-bold text-center">Account</Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-gray-600 text-center">
+              <Drawer.Title className="mb-1 text-base font-bold text-center">Account</Drawer.Title>
+              <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                 Nested drawers can be styled to stack, while each drawer remains independently focus
                 managed.
               </Drawer.Description>
@@ -22,7 +22,7 @@ export default function ExampleDrawerNested() {
               <div className="flex items-center justify-end gap-4">
                 <div className="mr-auto">
                   <Drawer.Root>
-                    <Drawer.Trigger className="text-base text-blue-800 rounded px-1.5 py-0.5 -m-0.5 hover:bg-blue-800/5 active:bg-blue-800/10 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
+                    <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                       Security settings
                     </Drawer.Trigger>
                     <Drawer.Portal>
@@ -30,14 +30,14 @@ export default function ExampleDrawerNested() {
                         <Drawer.Popup className={popupClassName}>
                           <div className={handleClassName} />
                           <Drawer.Content className={contentClassName}>
-                            <Drawer.Title className="mb-1 text-lg font-bold text-center">
+                            <Drawer.Title className="mb-1 text-base font-bold text-center">
                               Security
                             </Drawer.Title>
-                            <Drawer.Description className="mb-6 text-base text-gray-600 text-center">
+                            <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                               Review sign-in activity and update your security preferences.
                             </Drawer.Description>
 
-                            <ul className="mb-6 list-disc pl-5 text-gray-700">
+                            <ul className="mb-6 list-disc pl-5 text-neutral-700 dark:text-neutral-300">
                               <li>Passkeys enabled</li>
                               <li>2FA via authenticator app</li>
                               <li>3 signed-in devices</li>
@@ -46,7 +46,7 @@ export default function ExampleDrawerNested() {
                             <div className="flex items-center justify-end gap-4">
                               <div className="mr-auto">
                                 <Drawer.Root>
-                                  <Drawer.Trigger className="text-base text-blue-800 rounded px-1.5 py-0.5 -m-0.5 hover:bg-blue-800/5 active:bg-blue-800/10 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
+                                  <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>
@@ -54,45 +54,45 @@ export default function ExampleDrawerNested() {
                                       <Drawer.Popup className={popupClassName}>
                                         <div className={handleClassName} />
                                         <Drawer.Content className={contentClassName}>
-                                          <Drawer.Title className="mb-1 text-lg font-bold text-center">
+                                          <Drawer.Title className="mb-1 text-base font-bold text-center">
                                             Advanced
                                           </Drawer.Title>
-                                          <Drawer.Description className="mb-6 text-base text-gray-600 text-center">
+                                          <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                                             This drawer is taller to demonstrate variable-height
                                             stacking.
                                           </Drawer.Description>
 
-                                          <div className="grid gap-1.5 mb-4">
+                                          <div className="grid gap-2 mb-4">
                                             <label
-                                              className="text-sm font-bold text-gray-700"
+                                              className="text-sm font-bold text-neutral-700 dark:text-neutral-300"
                                               htmlFor="device-name-tw"
                                             >
                                               Device name
                                             </label>
                                             <input
                                               id="device-name-tw"
-                                              className="w-full rounded-md border border-gray-200 bg-gray-50 px-2.5 py-2 text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                                              className="h-8 w-full border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                               defaultValue="Personal laptop"
                                             />
                                           </div>
 
-                                          <div className="grid gap-1.5 mb-4">
+                                          <div className="grid gap-2 mb-4">
                                             <label
-                                              className="text-sm font-bold text-gray-700"
+                                              className="text-sm font-bold text-neutral-700 dark:text-neutral-300"
                                               htmlFor="notes-tw"
                                             >
                                               Notes
                                             </label>
                                             <textarea
                                               id="notes-tw"
-                                              className="w-full rounded-md border border-gray-200 bg-gray-50 px-2.5 py-2 text-gray-900 resize-y focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                                              className="min-h-32 w-full resize-y border border-neutral-950 bg-white p-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                               defaultValue="Rotate recovery codes and revoke older sessions."
                                               rows={3}
                                             />
                                           </div>
 
                                           <div className="flex justify-end">
-                                            <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+                                            <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                               Done
                                             </Drawer.Close>
                                           </div>
@@ -103,7 +103,7 @@ export default function ExampleDrawerNested() {
                                 </Drawer.Root>
                               </div>
 
-                              <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+                              <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                 Close
                               </Drawer.Close>
                             </div>
@@ -114,7 +114,7 @@ export default function ExampleDrawerNested() {
                   </Drawer.Root>
                 </div>
 
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
@@ -127,10 +127,10 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] rounded-t-2xl bg-gray-50 px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[swiping]:duration-0 data-[nested-drawer-swiping]:duration-0 data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:opacity-[0.9999] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[ending-style]:data-[swiping]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[ending-style]:data-[nested-drawer-swiping]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[nested-drawer-open]:h-[calc(var(--height)+var(--bleed))] data-[nested-drawer-open]:overflow-hidden data-[nested-drawer-open]:after:bg-black/5 dark:outline-gray-300 [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mx-px -mb-[3rem] w-[calc(100%+2px)] max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border border-neutral-950 border-b-0 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:border-b-0 dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
-  'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-[nested-drawer-open]/popup:opacity-0 group-data-[nested-drawer-swiping]/popup:opacity-100';
+  'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100';
 
 const handleClassName =
-  'mx-auto mb-4 h-1 w-12 rounded-full bg-gray-300 transition-opacity duration-[200ms] group-data-[nested-drawer-open]/popup:opacity-0 group-data-[nested-drawer-swiping]/popup:opacity-100';
+  'mx-auto mb-4 h-1 w-12 bg-neutral-300 transition-opacity duration-[200ms] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100 dark:bg-neutral-700';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index f4180f58a6f..171b88c4fc7 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -91,36 +119,36 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border-left: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  outline: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: auto;
   pointer-events: auto;
-  box-shadow:
-    0 -16px 48px rgb(0 0 0 / 0.12),
-    0 6px 18px rgb(0 0 0 / 0.06);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 450ms cubic-bezier(0.32, 0.72, 0, 1),
     box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1);
   will-change: transform;
   transform: translateX(var(--drawer-swipe-movement-x));
 
-  &[data-swiping] {
-    user-select: none;
+  @media (prefers-color-scheme: dark) {
+    border-left: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+  &[data-swiping] {
+    user-select: none;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateX(calc(100% - var(--bleed) + var(--viewport-padding) + 2px));
-    box-shadow:
-      0 -16px 48px rgb(0 0 0 / 0),
-      0 6px 18px rgb(0 0 0 / 0);
+    box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 0%);
   }
 
   &[data-ending-style] {
@@ -130,7 +158,11 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border-radius: 10px;
+    border: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+    }
   }
 }
 
@@ -141,23 +173,26 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
+  margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: flex-end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index 7ca13738851..3ca4ceccf4f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -3,22 +3,20 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right" modal={false} disablePointerDismissal>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open non-modal drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-[var(--viewport-padding)] pointer-events-none">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-gray-50 p-6 pr-[calc(1.5rem+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto shadow-[0_-16px_48px_rgb(0_0_0/0.12),0_6px_18px_rgb(0_0_0/0.06)] data-[starting-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-gray-300">
+        <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding) pointer-events-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-              <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">
-                Non-modal drawer
-              </Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-gray-600">
+              <Drawer.Title className="mb-1 text-base font-bold">Non-modal drawer</Drawer.Title>
+              <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
                 This drawer does not trap focus and ignores outside clicks. Use the close button or
                 swipe to dismiss it.
               </Drawer.Description>
-              <div className="flex justify-end gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+              <div className="flex justify-end gap-3">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index 976f255ea0d..b2a539eb46f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -79,22 +107,26 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border-top: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  outline: 0;
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   will-change: transform;
   transform: translateY(var(--drawer-swipe-movement-y));
 
-  &[data-swiping] {
-    user-select: none;
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+  &[data-swiping] {
+    user-select: none;
   }
 
   &[data-starting-style],
@@ -117,30 +149,36 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: oklch(87% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(37.1% 0 0deg);
+  }
 }
 
 .Title {
   margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
   text-align: center;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index 899e284c3e4..ef55b26f599 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -3,23 +3,23 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open bottom drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] rounded-t-2xl bg-gray-50 px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-3rem+2px))] data-[starting-style]:[transform:translateY(calc(100%-3rem+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-gray-300">
-            <div className="w-12 h-1 mx-auto mb-4 rounded-full bg-gray-300" />
+          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-              <Drawer.Title className="mb-1 text-lg font-bold text-center">
+              <Drawer.Title className="mb-1 text-base font-bold text-center">
                 Notifications
               </Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-gray-600 text-center">
+              <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                 You are all caught up. Good job!
               </Drawer.Description>
-              <div className="flex justify-center gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+              <div className="flex justify-center gap-3">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 66db4cbbb04..7933648dae4 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -3,33 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -74,7 +102,7 @@
 
 .Content {
   width: 100%;
-  max-width: 350px;
+  max-width: 22.5rem;
   margin: 0 auto;
 }
 
@@ -87,21 +115,26 @@
   width: 100%;
   max-height: calc(100dvh - var(--top-margin));
   padding-bottom: max(0px, calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
-  border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border-top: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  outline: 0;
   overflow: visible;
   touch-action: none;
-  box-shadow:
-    0 -16px 48px rgb(0 0 0 / 0.12),
-    0 6px 18px rgb(0 0 0 / 0.06);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 450ms cubic-bezier(0.32, 0.72, 0, 1),
     box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateY(calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
   will-change: transform;
 
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &::after {
     content: '';
     position: absolute;
@@ -116,17 +149,11 @@
     user-select: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
-
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateY(calc(100% + 2px));
     padding-bottom: 0;
-    box-shadow:
-      0 -16px 48px rgb(0 0 0 / 0),
-      0 6px 18px rgb(0 0 0 / 0);
+    box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 0%);
   }
 
   &[data-ending-style] {
@@ -136,12 +163,12 @@
 
 .DragArea {
   flex-shrink: 0;
-  padding: 0.875rem 1.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-gray-200);
+  padding: 0.875rem 1.5rem 1rem;
+  border-bottom: 1px solid oklch(87% 0 0deg);
   touch-action: none;
 
   @media (prefers-color-scheme: dark) {
-    border-bottom-color: var(--color-gray-300);
+    border-bottom: 1px solid oklch(37.1% 0 0deg);
   }
 }
 
@@ -159,15 +186,17 @@
   height: 0.25rem;
   margin: 0 auto 0.625rem;
   flex-shrink: 0;
-  border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: oklch(87% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(37.1% 0 0deg);
+  }
 }
 
 .Title {
   margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
   text-align: center;
   cursor: default;
@@ -175,17 +204,21 @@
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Meta {
   margin: 0 0 1.5rem;
   font-size: 0.9375rem;
   line-height: 1.5rem;
-  color: var(--color-red);
+  color: oklch(50% 55% 31deg);
   text-align: center;
 }
 
@@ -197,9 +230,11 @@
 
 .Card {
   height: 3rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-100);
+  background-color: oklch(92.2% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(37.1% 0 0deg);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index 598057b5ef1..48a4262437f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -14,37 +14,34 @@ const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
 export default function ExampleDrawerSnapPoints() {
   return (
     <Drawer.Root snapPoints={snapPoints}>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open snap drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center touch-none">
           <Drawer.Popup
-            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible rounded-t-2xl bg-gray-50 text-gray-900 outline outline-1 outline-gray-200 touch-none shadow-[0_-16px_48px_rgb(0_0_0/0.12),0_6px_18px_rgb(0_0_0/0.06)] [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-gray-50 after:content-[''] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%+2px))] data-[starting-style]:[transform:translateY(calc(100%+2px))] data-[starting-style]:[padding-bottom:0] data-[ending-style]:[padding-bottom:0] data-[starting-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-gray-300"
+            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0.25rem_0.25rem_0] shadow-black/12 [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             style={{ '--top-margin': `${TOP_MARGIN_REM}rem` } as React.CSSProperties}
           >
-            <div className="shrink-0 border-b border-gray-200 px-6 pt-3.5 pb-3 touch-none dark:border-gray-300">
-              <div className="mx-auto h-1 w-12 rounded-full bg-gray-300" />
-              <Drawer.Title className="mt-2.5 cursor-default text-center text-lg font-bold">
+            <div className="shrink-0 border-b border-neutral-300 px-6 pt-3.5 pb-4 touch-none dark:border-neutral-700">
+              <div className="mx-auto mb-2.5 h-1 w-12 shrink-0 bg-neutral-300 dark:bg-neutral-700" />
+              <Drawer.Title className="cursor-default text-center text-base font-bold">
                 Snap points
               </Drawer.Title>
             </div>
             <Drawer.Content className="min-h-0 flex-1 overflow-y-auto overscroll-contain touch-auto px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))]">
-              <div className="mx-auto w-full max-w-[350px]">
-                <Drawer.Description className="mb-4 text-base text-gray-600 text-center">
+              <div className="mx-auto w-full max-w-90">
+                <Drawer.Description className="mb-4 text-sm text-neutral-600 text-center dark:text-neutral-400">
                   Drag the sheet to snap between a compact peek and a near full-height view.
                 </Drawer.Description>
                 <div className="grid gap-3 mb-6" aria-hidden>
                   {Array.from({ length: 20 }, (_, index) => (
-                    <div
-                      key={index}
-                      className="h-12 rounded-xl border border-gray-200 bg-gray-100"
-                    />
+                    <div key={index} className="h-12 bg-neutral-200 dark:bg-neutral-700" />
                   ))}
                 </div>
-                <div className="flex items-center justify-end gap-4">
-                  <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+                <div className="flex items-center justify-end gap-3">
+                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 34ce64366dd..6495f3626fe 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -1,15 +1,21 @@
 .Root {
   position: relative;
   width: 100%;
-  min-height: 320px;
+  min-height: 20rem;
   overflow: hidden;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 }
 
 .Center {
-  min-height: 320px;
+  min-height: 20rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,11 +32,15 @@
 
 .Hint {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
   text-align: center;
   padding-right: 3rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .SwipeArea {
@@ -41,8 +51,8 @@
   width: 2.5rem;
   z-index: 1;
   box-sizing: border-box;
-  border-left: 2px dashed var(--color-blue);
-  background-color: color-mix(in oklch, var(--color-blue), transparent 90%);
+  border-left: 2px dashed oklch(45% 50% 264deg);
+  background-color: color-mix(in oklch, oklch(45% 50% 264deg), transparent 90%);
 }
 
 .SwipeLabel {
@@ -57,7 +67,7 @@
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--color-blue);
+  color: oklch(45% 50% 264deg);
   white-space: nowrap;
   pointer-events: none;
 }
@@ -67,33 +77,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -150,21 +188,26 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border-left: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  outline: 0;
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   touch-action: auto;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   will-change: transform;
   transform: translateX(var(--drawer-swipe-movement-x));
 
-  &[data-swiping] {
-    user-select: none;
+  @media (prefers-color-scheme: dark) {
+    border-left: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+  &[data-swiping] {
+    user-select: none;
   }
 
   &[data-starting-style],
@@ -179,7 +222,11 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border-radius: 10px;
+    border: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+    }
   }
 }
 
@@ -190,23 +237,26 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
+  margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Actions {
   display: flex;
   justify-content: flex-end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index b572d067f04..4322d9002bf 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -8,30 +8,30 @@ export default function ExampleDrawerSwipeArea() {
   return (
     <div
       ref={setPortalContainer}
-      className="relative min-h-[320px] w-full overflow-hidden border border-gray-200 bg-gray-50 text-gray-900"
+      className="relative min-h-80 w-full overflow-hidden border border-neutral-950 bg-white text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white"
     >
       <Drawer.Root swipeDirection="right" modal={false}>
-        <Drawer.SwipeArea className="absolute inset-y-0 right-0 z-10 box-border w-10 border-l-2 border-dashed border-blue-800 bg-blue-800/10">
-          <span className="pointer-events-none absolute right-0 top-1/2 mr-2 -translate-y-1/2 -rotate-90 origin-center whitespace-nowrap text-xs font-bold tracking-[0.12em] text-blue-800 uppercase">
+        <Drawer.SwipeArea className="absolute inset-y-0 right-0 z-[1] w-10 border-l-2 border-dashed border-blue-800 bg-blue-800/10 dark:border-blue-500 dark:bg-blue-500/10">
+          <span className="pointer-events-none absolute right-0 top-1/2 z-0 mr-2 -translate-y-1/2 -rotate-90 origin-center whitespace-nowrap text-xs font-bold tracking-[0.12em] text-blue-800 uppercase dark:text-blue-500">
             Swipe here
           </span>
         </Drawer.SwipeArea>
-        <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 px-4 text-center">
-          <p className="text-base text-gray-600 text-center pr-12">
+        <div className="flex min-h-80 flex-col items-center justify-center gap-3 p-4 text-center">
+          <p className="text-sm text-neutral-600 text-center dark:text-neutral-400 pr-12">
             Swipe from the right edge to open the drawer.
           </p>
         </div>
         <Drawer.Portal container={portalContainer}>
-          <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
-          <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-[var(--viewport-padding)]">
-            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-gray-50 p-6 pr-[calc(1.5rem+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-gray-300">
+          <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+          <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-(--viewport-padding)">
+            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-                <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">Library</Drawer.Title>
-                <Drawer.Description className="mb-6 text-base text-gray-600">
+                <Drawer.Title className="mb-1 text-base font-bold">Library</Drawer.Title>
+                <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
                   Swipe from the edge whenever you want to jump back into your playlists.
                 </Drawer.Description>
-                <div className="flex justify-end gap-4">
-                  <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+                <div className="flex justify-end gap-3">
+                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index 74657341411..7b76eb86689 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -3,29 +3,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -74,7 +106,7 @@
 .Popup {
   box-sizing: border-box;
   width: 100%;
-  max-width: 28rem;
+  max-width: 20rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -101,14 +133,17 @@
 
 .Surface {
   pointer-events: auto;
-  border-radius: 1rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
-    outline-color: var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 }
 
@@ -119,70 +154,110 @@
 }
 
 .Action:not(:first-child) {
-  border-top: 1px solid var(--color-gray-200);
+  border-top: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+  }
 }
 
 .ActionButton {
   box-sizing: border-box;
   width: 100%;
+  height: 2.5rem;
   margin: 0;
-  padding: 1rem 1.25rem;
+  padding: 0 1.25rem;
   border: 0;
   background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   text-align: center;
   color: inherit;
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
     outline: 0;
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 }
 
 .DangerSurface {
   pointer-events: auto;
-  border-radius: 1rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
-    outline-color: var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    box-shadow: none;
   }
 }
 
 .DangerButton {
   box-sizing: border-box;
   width: 100%;
+  height: 2.5rem;
   margin: 0;
-  padding: 1rem 1.25rem;
+  padding: 0 1.25rem;
   border: 0;
   background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   text-align: center;
-  color: var(--color-red);
+  color: oklch(50% 55% 31deg);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
     outline: 0;
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
index 699d8118f7b..d9be66bb2c1 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
@@ -9,21 +9,21 @@ export default function ExampleDrawerUncontained() {
 
   return (
     <Drawer.Root open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open action sheet
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.4] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--backdrop-opacity:0.7]" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.4] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--backdrop-opacity:0.7]" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="box-border pointer-events-none flex w-full max-w-[28rem] flex-col gap-3 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] outline-none focus-visible:outline-none [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[starting-style]:[transform:translateY(calc(100%+1rem+2px))] data-[ending-style]:[transform:translateY(calc(100%+1rem+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)]">
-            <Drawer.Content className="pointer-events-auto overflow-hidden rounded-2xl bg-gray-50 text-gray-900 outline outline-1 outline-gray-200 dark:outline-gray-300">
+          <Drawer.Popup className="pointer-events-none flex w-full max-w-[20rem] flex-col gap-3 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] outline-none focus-visible:outline-none [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-starting-style:[transform:translateY(calc(100%+1rem+2px))] data-ending-style:[transform:translateY(calc(100%+1rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]">
+            <Drawer.Content className="pointer-events-auto overflow-hidden border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Title className="sr-only">Profile actions</Drawer.Title>
               <Drawer.Description className="sr-only">
                 Choose an action for this user.
               </Drawer.Description>
 
               <ul
-                className="m-0 list-none divide-y divide-gray-200 p-0"
+                className="m-0 list-none divide-y divide-neutral-950 p-0 dark:divide-white"
                 aria-label="Profile actions"
               >
                 {ACTIONS.map((action, index) => (
@@ -33,7 +33,7 @@ export default function ExampleDrawerUncontained() {
                     )}
                     <button
                       type="button"
-                      className="block w-full border-0 bg-transparent px-5 py-4 text-center text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none"
+                      className="h-10 w-full border-0 bg-transparent px-5 text-center text-sm text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:bg-neutral-100 focus-visible:outline-none dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:focus-visible:bg-neutral-800"
                       onClick={() => setOpen(false)}
                     >
                       {action}
@@ -42,10 +42,10 @@ export default function ExampleDrawerUncontained() {
                 ))}
               </ul>
             </Drawer.Content>
-            <div className="pointer-events-auto overflow-hidden rounded-2xl bg-gray-50 outline outline-1 outline-gray-200 dark:outline-gray-300">
+            <div className="pointer-events-auto overflow-hidden border border-neutral-950 bg-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:shadow-none">
               <button
                 type="button"
-                className="block w-full border-0 bg-transparent px-5 py-4 text-center text-base text-red-700 select-none hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none"
+                className="h-10 w-full border-0 bg-transparent px-5 text-center text-sm text-red-700 select-none dark:text-red-400 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:bg-neutral-100 focus-visible:outline-none dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:focus-visible:bg-neutral-800"
                 onClick={() => setOpen(false)}
               >
                 Block User
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index 648405341ec..e9f619328ad 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -11,38 +11,74 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: oklch(50.5% 0.213 27.518deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.4% 0.191 22.216deg);
+  }
 }
 
 .Description {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index 019ffb80f13..cdc721c7db5 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -3,17 +3,17 @@ import { Field } from '@base-ui/react/field';
 export default function ExampleField() {
   return (
     <Field.Root className="flex w-full max-w-64 flex-col items-start gap-1">
-      <Field.Label className="text-sm font-bold text-gray-900">Name</Field.Label>
+      <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">Name</Field.Label>
       <Field.Control
         required
         placeholder="Required"
-        className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal"
+        className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
       />
-      <Field.Error className="text-sm text-red-800" match="valueMissing">
+      <Field.Error className="text-sm text-red-700 dark:text-red-400" match="valueMissing">
         Please enter your name
       </Field.Error>
 
-      <Field.Description className="text-sm text-gray-600">
+      <Field.Description className="text-sm text-neutral-600 dark:text-neutral-400">
         Visible on your profile
       </Field.Description>
     </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index d32e4a07f26..808c55e0521 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -10,13 +10,16 @@
 }
 
 .Legend {
-  border-bottom: 1px solid var(--color-gray-200);
-  padding-bottom: 0.75rem;
+  border-bottom: 1px solid oklch(14.5% 0 0deg);
   font-weight: 700;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.0025em;
-  color: var(--color-gray-900);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px solid white;
+    color: white;
+  }
 }
 
 .Field {
@@ -30,38 +33,74 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: oklch(50.5% 0.213 27.518deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.4% 0.191 22.216deg);
+  }
 }
 
 .Description {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
index 6e9e3a490d3..531b76d5261 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
@@ -4,23 +4,27 @@ import { Fieldset } from '@base-ui/react/fieldset';
 export default function ExampleField() {
   return (
     <Fieldset.Root className="flex w-full max-w-64 flex-col gap-4">
-      <Fieldset.Legend className="border-b border-gray-200 pb-3 text-lg font-bold text-gray-900">
+      <Fieldset.Legend className="border-b border-neutral-950 text-base font-bold text-neutral-950 dark:border-white dark:text-white">
         Billing details
       </Fieldset.Legend>
 
       <Field.Root className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Company</Field.Label>
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
+          Company
+        </Field.Label>
         <Field.Control
           placeholder="Enter company name"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
 
       <Field.Root className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Tax ID</Field.Label>
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
+          Tax ID
+        </Field.Label>
         <Field.Control
           placeholder="Enter fiscal number"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
     </Fieldset.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 497bfe9d557..d37a7ea2dee 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -17,33 +17,65 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: oklch(50.5% 0.213 27.518deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.4% 0.191 22.216deg);
+  }
 }
 
 .Button {
@@ -51,36 +83,62 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  &[data-disabled] {
-    color: var(--color-gray-500);
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index 187aee67d5f..9eb0ce1cc25 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -18,21 +18,23 @@ export default function ActionStateForm() {
       className="flex w-full max-w-64 flex-col gap-4"
     >
       <Field.Root name="username" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Username</Field.Label>
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
+          Username
+        </Field.Label>
         <Field.Control
           type="username"
           required
           defaultValue="admin"
           placeholder="e.g. alice132"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
-        <Field.Error className="text-sm text-red-800" />
+        <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 6adb5a4c7a2..d37a7ea2dee 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -17,33 +17,65 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: oklch(50.5% 0.213 27.518deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.4% 0.191 22.216deg);
+  }
 }
 
 .Button {
@@ -51,38 +83,62 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-gray-200);
-    box-shadow: inset 0 1px 3px var(--color-gray-200);
-    border-top-color: var(--color-gray-300);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  &[data-disabled] {
-    color: var(--color-gray-500);
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index 776fa37bd9f..448e91e9980 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -28,22 +28,24 @@ export default function ExampleForm() {
       }}
     >
       <Field.Root name="url" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Homepage</Field.Label>
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
+          Homepage
+        </Field.Label>
         <Field.Control
           type="url"
           required
           defaultValue="https://example.com"
           placeholder="https://example.com"
           pattern="https?://.*"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
-        <Field.Error className="text-sm text-red-800" />
+        <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 6adb5a4c7a2..d37a7ea2dee 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -17,33 +17,65 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: oklch(50.5% 0.213 27.518deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.4% 0.191 22.216deg);
+  }
 }
 
 .Button {
@@ -51,38 +83,62 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-gray-200);
-    box-shadow: inset 0 1px 3px var(--color-gray-200);
-    border-top-color: var(--color-gray-300);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  &[data-disabled] {
-    color: var(--color-gray-500);
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 7ec72b16d5f..06573fb53bb 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -37,24 +37,28 @@ export default function Page() {
       }}
     >
       <Field.Root name="name" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Name</Field.Label>
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
+          Name
+        </Field.Label>
         <Field.Control
           placeholder="Enter name"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
-        <Field.Error className="text-sm text-red-800" />
+        <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Field.Root name="age" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Age</Field.Label>
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
+          Age
+        </Field.Label>
         <Field.Control
           placeholder="Enter age"
-          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
-        <Field.Error className="text-sm text-red-800" />
+        <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         type="submit"
-        className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index 861b9414216..8d077d29231 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -6,25 +6,53 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
-  width: 14rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  border-radius: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  width: 10rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  &::placeholder {
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.tsx
index 47e1580ff5e..e40e184946a 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.tsx
@@ -5,7 +5,7 @@ export default function ExampleInput() {
   return (
     <label className={styles.Label}>
       Name
-      <Input placeholder="Enter your name" className={styles.Input} />
+      <Input placeholder="e.g. Colm Tuite" className={styles.Input} />
     </label>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
index 08c18c81d6b..26c179fe211 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
@@ -2,11 +2,11 @@ import { Input } from '@base-ui/react/input';
 
 export default function ExampleInput() {
   return (
-    <label className="flex flex-col items-start gap-1 text-sm text-gray-900 font-bold">
+    <label className="flex flex-col items-start gap-1 text-sm font-bold text-neutral-950 dark:text-white">
       Name
       <Input
-        placeholder="Enter your name"
-        className="h-10 w-56 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal"
+        placeholder="e.g. Colm Tuite"
+        className="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white"
       />
     </label>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index fe5733d7935..25228760fd4 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -3,40 +3,67 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Container {
@@ -52,33 +79,70 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -88,71 +152,30 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
-}
-
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -171,7 +194,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -180,29 +207,40 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
+    background-color: oklch(14.5% 0 0deg);
 
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
 .Label {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-gray-500);
+  user-select: none;
   padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
new file mode 100644
index 00000000000..79c3cb8e347
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -0,0 +1,197 @@
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.75rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
+.Positioner {
+  outline: 0;
+}
+
+.Popup {
+  box-sizing: border-box;
+  position: relative;
+  outline: 0;
+  padding-block: 0.25rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+.Arrow {
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
+
+  &[data-side='top'] {
+    bottom: -6px;
+    rotate: 180deg;
+  }
+
+  &[data-side='bottom'] {
+    top: -6px;
+    rotate: 0deg;
+  }
+
+  &[data-side='left'] {
+    right: -9px;
+    rotate: 90deg;
+  }
+
+  &[data-side='right'] {
+    left: -9px;
+    rotate: -90deg;
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: white;
+    border: 1px solid oklch(14.5% 0 0deg);
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(14.5% 0 0deg);
+      border: 1px solid white;
+    }
+  }
+}
+
+.Item {
+  outline: 0;
+  cursor: default;
+  user-select: none;
+  padding-block: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 2rem;
+  display: flex;
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
+  }
+
+  &[data-highlighted]::before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0.25rem;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+}
+
+.Separator {
+  margin: 0.25rem;
+  height: 1px;
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
+}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
new file mode 100644
index 00000000000..d78716fbb8c
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
@@ -0,0 +1,47 @@
+'use client';
+import * as React from 'react';
+import { Menu } from '@base-ui/react/menu';
+import styles from './index.module.css';
+
+export default function MenuArrowDemo() {
+  return (
+    <Menu.Root>
+      <Menu.Trigger className={styles.Button}>
+        Song <CaretDownIcon />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner
+          className={styles.Positioner}
+          sideOffset={({ side }) => (side === 'top' ? 12 : 8)}
+        >
+          <Menu.Popup className={styles.Popup}>
+            <Menu.Arrow className={styles.Arrow} />
+            <Menu.Item className={styles.Item}>Add to Library</Menu.Item>
+            <Menu.Item className={styles.Item}>Add to Playlist</Menu.Item>
+            <Menu.Separator className={styles.Separator} />
+            <Menu.Item className={styles.Item}>Play Next</Menu.Item>
+            <Menu.Item className={styles.Item}>Play Last</Menu.Item>
+            <Menu.Separator className={styles.Separator} />
+            <Menu.Item className={styles.Item}>Favorite</Menu.Item>
+            <Menu.Item className={styles.Item}>Share</Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/index.ts b/docs/src/app/(docs)/react/components/menu/demos/arrow/index.ts
new file mode 100644
index 00000000000..c668cc5973f
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/index.ts
@@ -0,0 +1,8 @@
+import { createDemoWithVariants } from 'docs/src/utils/createDemo';
+import CssModules from './css-modules';
+import Tailwind from './tailwind';
+
+export const DemoMenuArrow = createDemoWithVariants(import.meta.url, {
+  CssModules,
+  Tailwind,
+});
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
new file mode 100644
index 00000000000..fa027d10885
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -0,0 +1,49 @@
+'use client';
+import * as React from 'react';
+import { Menu } from '@base-ui/react/menu';
+
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white";
+
+export default function MenuArrowDemo() {
+  return (
+    <Menu.Root>
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Song <CaretDownIcon />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner
+          className="outline-hidden"
+          sideOffset={({ side }) => (side === 'top' ? 12 : 8)}
+        >
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:[transform:translate(-50%,50%)_rotate(45deg)] before:border before:border-neutral-950 before:bg-white before:content-[''] dark:before:border-white dark:before:bg-neutral-950" />
+            <Menu.Item className={itemClass}>Add to Library</Menu.Item>
+            <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
+            <Menu.Separator className="m-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Play Next</Menu.Item>
+            <Menu.Item className={itemClass}>Play Last</Menu.Item>
+            <Menu.Separator className="m-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Favorite</Menu.Item>
+            <Menu.Item className={itemClass}>Share</Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 8a31b2a1594..eeda6286da0 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -4,42 +4,71 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.ButtonIcon {
-  margin-right: -0.25rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -48,71 +77,30 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
-}
-
-.Arrow {
-  display: flex;
 
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -129,12 +117,16 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -143,16 +135,19 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
+    background-color: oklch(14.5% 0 0deg);
 
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
@@ -160,18 +155,16 @@
   grid-column-start: 1;
 }
 
-.CheckboxItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .CheckboxItemText {
   grid-column-start: 2;
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index 6eb873239ab..49f147be71d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -11,21 +11,18 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Workspace <ChevronDownIcon className={styles.ButtonIcon} />
+        Workspace <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Minimap</span>
             </Menu.CheckboxItem>
@@ -35,7 +32,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Search</span>
             </Menu.CheckboxItem>
@@ -45,7 +42,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Sidebar</span>
             </Menu.CheckboxItem>
@@ -56,37 +53,33 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 9dc4c6fbe8c..a2a7f9d649d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -2,6 +2,9 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const checkboxItemClass =
+  "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+
 export default function ExampleMenu() {
   const [showMinimap, setShowMinimap] = React.useState(true);
   const [showSearch, setShowSearch] = React.useState(true);
@@ -9,42 +12,39 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
-        Workspace <ChevronDownIcon className="-mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Workspace <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Menu.Arrow>
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+              className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckIcon className="size-3" />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Minimap</span>
             </Menu.CheckboxItem>
             <Menu.CheckboxItem
               checked={showSearch}
               onCheckedChange={setShowSearch}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+              className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckIcon className="size-3" />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Search</span>
             </Menu.CheckboxItem>
             <Menu.CheckboxItem
               checked={showSidebar}
               onCheckedChange={setShowSidebar}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+              className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckIcon className="size-3" />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Sidebar</span>
             </Menu.CheckboxItem>
@@ -55,37 +55,33 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
index 0158ce2c72c..efb161ff9b5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -87,10 +87,6 @@ export default function MenuDetachedTriggersControlledDemo() {
           <Menu.Portal>
             <Menu.Positioner className={styles.Positioner} sideOffset={8}>
               <Menu.Popup className={styles.Popup}>
-                <Menu.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Menu.Arrow>
-
                 {payload &&
                   itemGroups[payload].map((item, index) => (
                     <Menu.Item key={index} className={styles.Item} onClick={item.onClick}>
@@ -105,22 +101,3 @@ export default function MenuDetachedTriggersControlledDemo() {
     </React.Fragment>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 047849adb1b..698b9ba6693 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -3,7 +3,11 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  'flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300';
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+const triggerClass =
+  'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800';
+const popupClass =
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
 interface MenuItemDefinition {
   label: string;
@@ -49,7 +53,7 @@ export default function MenuDetachedTriggersControlledDemo() {
           handle={demoMenu}
           payload={'library' as const}
           id="menu-trigger-1"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className={triggerClass}
         >
           Library
         </Menu.Trigger>
@@ -57,7 +61,7 @@ export default function MenuDetachedTriggersControlledDemo() {
           handle={demoMenu}
           payload={'playback' as const}
           id="menu-trigger-2"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className={triggerClass}
         >
           Playback
         </Menu.Trigger>
@@ -65,14 +69,14 @@ export default function MenuDetachedTriggersControlledDemo() {
           handle={demoMenu}
           payload={'share' as const}
           id="menu-trigger-3"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className={triggerClass}
         >
           Share
         </Menu.Trigger>
 
         <button
           type="button"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className={triggerClass}
           onClick={() => {
             setActiveTrigger('menu-trigger-2');
             setOpen(true);
@@ -91,11 +95,7 @@ export default function MenuDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <Menu.Portal>
             <Menu.Positioner sideOffset={8} className="outline-hidden">
-              <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-                <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-                  <ArrowSvg />
-                </Menu.Arrow>
-
+              <Menu.Popup className={popupClass}>
                 {payload &&
                   MENUS[payload].map((item, index) => (
                     <Menu.Item key={index} className={itemClass} onClick={item.onClick}>
@@ -110,22 +110,3 @@ export default function MenuDetachedTriggersControlledDemo() {
     </React.Fragment>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.module.css
index af9a372b1d7..6b15e603fc5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.module.css
@@ -73,7 +73,3 @@
     opacity: 0;
   }
 }
-
-.Arrow {
-  transition: left calc(var(--animation-duration)) var(--easing);
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
index ce7d72628a7..0a9c7206d68 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
@@ -58,10 +58,6 @@ export default function MenuDetachedTriggersFullDemo() {
               className={`${styles.Positioner} ${transitionStyles.Positioner}`}
             >
               <Menu.Popup className={`${styles.Popup} ${transitionStyles.Popup}`}>
-                <Menu.Arrow className={`${styles.Arrow} ${transitionStyles.Arrow}`}>
-                  <ArrowSvg />
-                </Menu.Arrow>
-
                 <Menu.Viewport className={transitionStyles.Viewport}>
                   {payload &&
                     MENUS[payload].groups.map((group, groupIndex) => (
@@ -92,22 +88,3 @@ export default function MenuDetachedTriggersFullDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index e26c320e37a..442fe218aad 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -36,22 +36,25 @@ type MenuKey = keyof typeof MENUS;
 const demoMenu = Menu.createHandle<MenuKey>();
 
 const triggerClass = `
-  flex h-10 items-center justify-center
-  rounded-md border border-gray-200 bg-gray-50
-  px-3.5 text-base font-normal text-gray-900
+  flex h-8 items-center justify-center
+  rounded-none border border-neutral-950 bg-white
+  px-3 text-sm font-normal text-neutral-950
   select-none
-  hover:bg-gray-100 active:bg-gray-100 data-popup-open:bg-gray-100
+  hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100
+  dark:border-white dark:bg-neutral-950 dark:text-white
+  dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800
   focus-visible:outline focus-visible:outline-2
-  focus-visible:-outline-offset-1 focus-visible:outline-blue-800
+  focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white
 `;
 
 const itemClass = `
   flex cursor-default py-2 pr-8 pl-4
   text-sm leading-4 outline-none select-none
-  data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50
-  data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1
-  data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1]
-  data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900
+  data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white
+  data-highlighted:before:absolute data-highlighted:before:inset-x-1
+  data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1]
+  data-highlighted:before:bg-neutral-950 data-highlighted:before:content-['']
+  dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white
 `;
 
 export default function MenuDetachedTriggersFullDemo() {
@@ -83,34 +86,19 @@ export default function MenuDetachedTriggersFullDemo() {
               <Menu.Popup
                 className={`
                   relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] py-1
-                  origin-[var(--transform-origin)] rounded-md
-                  bg-[canvas] text-gray-900 shadow-lg shadow-gray-200
-                  outline outline-1 outline-gray-200
+                  origin-[var(--transform-origin)] border border-neutral-950
+                  bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none
                   transition-[width,height,opacity,scale]
                   duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
-                  data-[starting-style]:scale-90 data-[starting-style]:opacity-0
-                  data-[ending-style]:scale-90 data-[ending-style]:opacity-0
+                  data-starting-style:scale-90 data-starting-style:opacity-0
+                  data-ending-style:scale-90 data-ending-style:opacity-0
                   data-instant:transition-none
-                  dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300
+                  dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none
                 `}
               >
-                <Menu.Arrow
-                  className={`
-                    flex
-                    transition-[left]
-                    duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
-                    data-[side=bottom]:top-[-8px]
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180
-                  `}
-                >
-                  <ArrowSvg />
-                </Menu.Arrow>
-
                 <Menu.Viewport
                   className={`
-                    relative h-full w-full box-border overflow-clip
+                    relative h-full w-full overflow-clip
                     p-0
                     [&_[data-current]]:w-[var(--popup-width)]
                     [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100
@@ -137,7 +125,7 @@ export default function MenuDetachedTriggersFullDemo() {
                       <React.Fragment key={groupIndex}>
                         <Menu.Group>
                           {groupIndex === 0 && (
-                            <Menu.GroupLabel className="px-4 py-2 text-xs tracking-[0.05em] text-gray-500 uppercase">
+                            <Menu.GroupLabel className="px-4 py-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                               {MENUS[payload].heading}
                             </Menu.GroupLabel>
                           )}
@@ -148,7 +136,7 @@ export default function MenuDetachedTriggersFullDemo() {
                           ))}
                         </Menu.Group>
                         {groupIndex < MENUS[payload].groups.length - 1 && (
-                          <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+                          <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
                         )}
                       </React.Fragment>
                     ))}
@@ -161,22 +149,3 @@ export default function MenuDetachedTriggersFullDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
index 37988fe36eb..13807b4910a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
@@ -9,17 +9,13 @@ export default function MenuDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Menu.Trigger className={styles.IconButton} handle={demoMenu} aria-label="Project actions">
-        <DotsIcon className={styles.Icon} />
+        <EllipsisHorizontalIcon />
       </Menu.Trigger>
 
       <Menu.Root handle={demoMenu}>
         <Menu.Portal>
           <Menu.Positioner sideOffset={8} className={styles.Positioner}>
             <Menu.Popup className={styles.Popup}>
-              <Menu.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Menu.Arrow>
-
               <Menu.Item className={styles.Item}>Rename</Menu.Item>
               <Menu.Item className={styles.Item}>Duplicate</Menu.Item>
               <Menu.Item className={styles.Item}>Move to folder</Menu.Item>
@@ -34,41 +30,19 @@ export default function MenuDetachedTriggersSimpleDemo() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function DotsIcon(props: React.ComponentProps<'svg'>) {
+function EllipsisHorizontalIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <circle cx="5" cy="12" r="1" />
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
+      <circle cx="3" cy="8" r="1" />
+      <circle cx="8" cy="8" r="1" />
+      <circle cx="13" cy="8" r="1" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index a17122804ab..45416ca6a13 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,9 +4,9 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
-  'flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300';
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function MenuDetachedTriggersSimpleDemo() {
   return (
@@ -14,22 +14,19 @@ export default function MenuDetachedTriggersSimpleDemo() {
       <Menu.Trigger
         handle={demoMenu}
         aria-label="Project actions"
-        className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-gray-300 dark:bg-gray-100 dark:text-gray-900"
+        className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <DotsIcon />
+        <EllipsisHorizontalIcon />
       </Menu.Trigger>
 
       <Menu.Root handle={demoMenu}>
         <Menu.Portal>
           <Menu.Positioner sideOffset={8} className="outline-hidden">
             <Menu.Popup className={popupClass}>
-              <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-                <ArrowSvg />
-              </Menu.Arrow>
               <Menu.Item className={itemClass}>Rename</Menu.Item>
               <Menu.Item className={itemClass}>Duplicate</Menu.Item>
               <Menu.Item className={itemClass}>Move to folder</Menu.Item>
-              <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
               <Menu.Item className={itemClass}>Archive</Menu.Item>
               <Menu.Item className={`${itemClass} text-red-600`}>Delete</Menu.Item>
             </Menu.Popup>
@@ -39,42 +36,19 @@ export default function MenuDetachedTriggersSimpleDemo() {
     </React.Fragment>
   );
 }
-
-export function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-export function DotsIcon(props: React.ComponentProps<'svg'>) {
+function EllipsisHorizontalIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <circle cx="5" cy="12" r="1" />
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
+      <circle cx="3" cy="8" r="1" />
+      <circle cx="8" cy="8" r="1" />
+      <circle cx="13" cy="8" r="1" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index a6e6daa619a..c5b6651db25 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -4,42 +4,71 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.ButtonIcon {
-  margin-right: -0.25rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -48,71 +77,30 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
-}
-
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -129,12 +117,16 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -143,16 +135,19 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
+    background-color: oklch(14.5% 0 0deg);
 
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
@@ -161,33 +156,32 @@
   grid-column-start: 1;
 }
 
-.CheckboxItemIndicatorIcon,
-.RadioItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .CheckboxItemText,
 .RadioItemText {
   grid-column-start: 2;
 }
 
 .Separator {
-  margin-block: 0.375rem;
-  margin-left: 1.875rem;
-  margin-right: 1rem;
+  margin-block: 0.25rem;
+  margin-inline: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .GroupLabel {
-  cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1.875rem;
+  padding-left: 2.125rem;
   padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index fb1d37e3cdf..393a457f390 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -12,33 +12,29 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        View <ChevronDownIcon className={styles.ButtonIcon} />
+        View <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
-
             <Menu.Group>
               <Menu.GroupLabel className={styles.GroupLabel}>Sort</Menu.GroupLabel>
               <Menu.RadioGroup value={value} onValueChange={setValue}>
                 <Menu.RadioItem className={styles.RadioItem} value="date">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Date</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem className={styles.RadioItem} value="name">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Name</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem className={styles.RadioItem} value="type">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Type</span>
                 </Menu.RadioItem>
@@ -55,7 +51,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Minimap</span>
               </Menu.CheckboxItem>
@@ -65,7 +61,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Search</span>
               </Menu.CheckboxItem>
@@ -75,7 +71,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Sidebar</span>
               </Menu.CheckboxItem>
@@ -87,37 +83,33 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index f5cadcd14c5..621c3f124f7 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -2,6 +2,9 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const itemClass =
+  "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   const [showMinimap, setShowMinimap] = React.useState(true);
@@ -10,84 +13,71 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
-        View <ChevronDownIcon className="-mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        View <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Menu.Arrow>
-
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.Group>
-              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-sm leading-4 text-gray-600 select-none">
+              <Menu.GroupLabel className="py-2 pr-8 pl-[2.125rem] text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                 Sort
               </Menu.GroupLabel>
               <Menu.RadioGroup value={value} onValueChange={setValue}>
-                <Menu.RadioItem
-                  value="date"
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-                >
+                <Menu.RadioItem value="date" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Date</span>
                 </Menu.RadioItem>
-                <Menu.RadioItem
-                  value="name"
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-                >
+                <Menu.RadioItem value="name" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Name</span>
                 </Menu.RadioItem>
-                <Menu.RadioItem
-                  value="type"
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-                >
+                <Menu.RadioItem value="type" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Type</span>
                 </Menu.RadioItem>
               </Menu.RadioGroup>
             </Menu.Group>
 
-            <Menu.Separator className="my-1.5 mr-4 ml-7.5 h-px bg-gray-200" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
 
             <Menu.Group>
-              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-sm leading-4 text-gray-600 select-none">
+              <Menu.GroupLabel className="py-2 pr-8 pl-[2.125rem] text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                 Workspace
               </Menu.GroupLabel>
               <Menu.CheckboxItem
                 checked={showMinimap}
                 onCheckedChange={setShowMinimap}
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+                className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Minimap</span>
               </Menu.CheckboxItem>
               <Menu.CheckboxItem
                 checked={showSearch}
                 onCheckedChange={setShowSearch}
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+                className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Search</span>
               </Menu.CheckboxItem>
               <Menu.CheckboxItem
                 checked={showSidebar}
                 onCheckedChange={setShowSidebar}
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+                className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Sidebar</span>
               </Menu.CheckboxItem>
@@ -99,37 +89,33 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 12d2e965a42..7d30bb51b05 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -4,42 +4,71 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.ButtonIcon {
-  margin-right: -0.25rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -48,71 +77,30 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
-}
 
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -130,7 +118,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -139,21 +131,28 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
+    background-color: oklch(14.5% 0 0deg);
 
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
index 664b3bf89df..60b69aed3e8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
@@ -6,14 +6,11 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Song <ChevronDownIcon className={styles.ButtonIcon} />
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
             <Menu.Item className={styles.Item}>Add to Library</Menu.Item>
             <Menu.Item className={styles.Item}>Add to Playlist</Menu.Item>
             <Menu.Separator className={styles.Separator} />
@@ -29,29 +26,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index d2849f38c71..7201cd1b877 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -1,38 +1,26 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
-        Song <ChevronDownIcon className="-mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Menu.Arrow>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Add to Library
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Add to Playlist
-            </Menu.Item>
-            <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Play Next
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Play Last
-            </Menu.Item>
-            <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Favorite
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Share
-            </Menu.Item>
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Item className={itemClass}>Add to Library</Menu.Item>
+            <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Play Next</Menu.Item>
+            <Menu.Item className={itemClass}>Play Last</Menu.Item>
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Favorite</Menu.Item>
+            <Menu.Item className={itemClass}>Share</Menu.Item>
           </Menu.Popup>
         </Menu.Positioner>
       </Menu.Portal>
@@ -40,29 +28,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 12d2e965a42..7d30bb51b05 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -4,42 +4,71 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.ButtonIcon {
-  margin-right: -0.25rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -48,71 +77,30 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
-}
 
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -130,7 +118,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -139,21 +131,28 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
+    background-color: oklch(14.5% 0 0deg);
 
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
index c0f0de4e8ed..e459f3b1a6c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
@@ -6,14 +6,11 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger openOnHover className={styles.Button}>
-        Add to playlist <ChevronDownIcon className={styles.ButtonIcon} />
+        Add to playlist <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
             <Menu.Item className={styles.Item}>Get Up!</Menu.Item>
             <Menu.Item className={styles.Item}>Inside Out</Menu.Item>
             <Menu.Item className={styles.Item}>Night Beats</Menu.Item>
@@ -26,29 +23,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 6a4fda26a8a..74d846e1123 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -1,34 +1,26 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+
 export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        Add to playlist <ChevronDownIcon className="-mr-1" />
+        Add to playlist <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Menu.Arrow>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Get Up!
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Inside Out
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Night Beats
-            </Menu.Item>
-            <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              New playlist…
-            </Menu.Item>
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Item className={itemClass}>Get Up!</Menu.Item>
+            <Menu.Item className={itemClass}>Inside Out</Menu.Item>
+            <Menu.Item className={itemClass}>Night Beats</Menu.Item>
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>New playlist…</Menu.Item>
           </Menu.Popup>
         </Menu.Positioner>
       </Menu.Portal>
@@ -36,29 +28,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 116cef8c699..1fb92579a60 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -4,42 +4,71 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.ButtonIcon {
-  margin-right: -0.25rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -48,71 +77,30 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
-}
-
-.Arrow {
-  display: flex;
 
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -128,12 +116,16 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &[data-highlighted]::before {
@@ -142,16 +134,19 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
+    background-color: oklch(14.5% 0 0deg);
 
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
@@ -159,18 +154,16 @@
   grid-column-start: 1;
 }
 
-.RadioItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .RadioItemText {
   grid-column-start: 2;
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index 3df77c471e7..598ef447041 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -8,30 +8,27 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Sort <ChevronDownIcon className={styles.ButtonIcon} />
+        Sort <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem className={styles.RadioItem} value="date">
                 <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                  <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className={styles.RadioItemText}>Date</span>
               </Menu.RadioItem>
               <Menu.RadioItem className={styles.RadioItem} value="name">
                 <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                  <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className={styles.RadioItemText}>Name</span>
               </Menu.RadioItem>
               <Menu.RadioItem className={styles.RadioItem} value="type">
                 <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                  <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className={styles.RadioItemText}>Type</span>
               </Menu.RadioItem>
@@ -43,37 +40,33 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 2a8c24c1ec5..b6a3869c7c8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -2,44 +2,35 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const radioItemClass =
+  "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
-        Sort <ChevronDownIcon className="-mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Sort <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Menu.Arrow>
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.RadioGroup value={value} onValueChange={setValue}>
-              <Menu.RadioItem
-                value="date"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-              >
+              <Menu.RadioItem value="date" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className="col-start-2">Date</span>
               </Menu.RadioItem>
-              <Menu.RadioItem
-                value="name"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-              >
+              <Menu.RadioItem value="name" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className="col-start-2">Name</span>
               </Menu.RadioItem>
-              <Menu.RadioItem
-                value="type"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-              >
+              <Menu.RadioItem value="type" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className="col-start-2">Type</span>
               </Menu.RadioItem>
@@ -51,37 +42,33 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 6910c7196ad..4d9c32fff7c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -4,42 +4,71 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.ButtonIcon {
-  margin-right: -0.25rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -48,71 +77,30 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
-}
 
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
   }
 }
 
@@ -123,7 +111,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 1rem;
-  padding-right: 2rem;
+  padding-right: 1.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
@@ -133,38 +121,55 @@
     position: relative;
   }
 
-  &[data-popup-open]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-100);
-  }
-
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
+  &[data-popup-open]::before,
   &[data-highlighted]::before {
     content: '';
     z-index: -1;
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
   }
 
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+  &[data-popup-open]::before {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-highlighted]::before {
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+
+  &[data-highlighted][data-popup-open]::before {
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
@@ -172,11 +177,15 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding-right: 1rem;
+  padding-right: 0.5rem;
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
index 5dc4491e365..14f9bbded7e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
@@ -7,20 +7,17 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Song <ChevronDownIcon className={styles.ButtonIcon} />
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
             <Menu.Item className={styles.Item}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
               <Menu.SubmenuTrigger className={styles.SubmenuTrigger}>
                 Add to Playlist
-                <ChevronRightIcon />
+                <CaretRightIcon />
               </Menu.SubmenuTrigger>
               <Menu.Portal>
                 <Menu.Positioner
@@ -56,37 +53,32 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
   return side === 'top' || side === 'bottom' ? 4 : -4;
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 09882315b66..fa4e6816293 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -2,25 +2,27 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const popupClass =
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+const itemClass =
+  "flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+const submenuTriggerClass =
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 outline-hidden select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
-        Song <ChevronDownIcon className="-mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Menu.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Menu.Arrow>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Add to Library
-            </Menu.Item>
+          <Menu.Popup className={popupClass}>
+            <Menu.Item className={itemClass}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
-              <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-                Add to Playlist <ChevronRightIcon />
+              <Menu.SubmenuTrigger className={submenuTriggerClass}>
+                Add to Playlist <CaretRightIcon />
               </Menu.SubmenuTrigger>
               <Menu.Portal>
                 <Menu.Positioner
@@ -28,47 +30,27 @@ export default function ExampleMenu() {
                   sideOffset={getOffset}
                   alignOffset={getOffset}
                 >
-                  <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Add to Library
-                    </Menu.Item>
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Add to Playlist
-                    </Menu.Item>
-                    <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Play Next
-                    </Menu.Item>
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Play Last
-                    </Menu.Item>
-                    <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Favorite
-                    </Menu.Item>
-                    <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Share
-                    </Menu.Item>
+                  <Menu.Popup className={popupClass}>
+                    <Menu.Item className={itemClass}>Add to Library</Menu.Item>
+                    <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
+                    <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+                    <Menu.Item className={itemClass}>Play Next</Menu.Item>
+                    <Menu.Item className={itemClass}>Play Last</Menu.Item>
+                    <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+                    <Menu.Item className={itemClass}>Favorite</Menu.Item>
+                    <Menu.Item className={itemClass}>Share</Menu.Item>
                   </Menu.Popup>
                 </Menu.Positioner>
               </Menu.Portal>
             </Menu.SubmenuRoot>
 
-            <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
 
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Play Next
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Play Last
-            </Menu.Item>
-            <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Favorite
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Share
-            </Menu.Item>
+            <Menu.Item className={itemClass}>Play Next</Menu.Item>
+            <Menu.Item className={itemClass}>Play Last</Menu.Item>
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Favorite</Menu.Item>
+            <Menu.Item className={itemClass}>Share</Menu.Item>
           </Menu.Popup>
         </Menu.Positioner>
       </Menu.Portal>
@@ -80,37 +62,32 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
   return side === 'top' || side === 'bottom' ? 4 : -4;
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/page.mdx b/docs/src/app/(docs)/react/components/menu/page.mdx
index 3b4c45945b0..a7b577f6022 100644
--- a/docs/src/app/(docs)/react/components/menu/page.mdx
+++ b/docs/src/app/(docs)/react/components/menu/page.mdx
@@ -109,7 +109,6 @@ To create a submenu, nest another menu inside the parent menu with `<Menu.Submen
   <Menu.Portal>
     <Menu.Positioner>
       <Menu.Popup>
-        <Menu.Arrow />
         <Menu.Item />
 
         {/* @highlight-start */}
@@ -302,6 +301,14 @@ import { DemoMenuDetachedTriggersControlled } from './demos/detached-triggers-co
 
 <DemoMenuDetachedTriggersControlled compact />
 
+### Arrow
+
+Use the `<Menu.Arrow>` part inside the popup to visually connect the menu to its trigger.
+
+import { DemoMenuArrow } from './demos/arrow';
+
+<DemoMenuArrow compact />
+
 ### Animating the Menu
 
 When one menu is opened by multiple detached triggers, you can animate the menu as it moves between triggers.
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index e570013c1fd..6151f21738c 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -1,34 +1,70 @@
 .Menubar {
   display: flex;
-  background-color: var(--color-gray-50);
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  align-items: center;
 }
 
 .MenuTrigger {
   box-sizing: border-box;
-  background: none;
+  height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
   border: 0;
-  color: var(--color-gray-600);
-  border-radius: 0.25rem;
-  user-select: none;
-  height: 2rem;
+  background-color: transparent;
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
+  line-height: 1.25rem;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
 
   &[data-pressed],
-  &:focus-visible {
-    background-color: var(--color-gray-100);
-    outline: none;
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &[data-disabled] {
-    opacity: 0.5;
+    color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+    position: relative;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+      outline-color: white;
+    }
   }
 }
 
@@ -38,39 +74,43 @@
 
 .MenuPopup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
+  &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transition: opacity 150ms;
+    transform: scale(0.98);
   }
 
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
-.MenuItem {
+.MenuItem,
+.SubmenuTrigger {
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.5rem 1rem;
+  padding-block: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
@@ -84,35 +124,60 @@
     position: relative;
   }
 
-  &[data-popup-open]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-100);
-  }
-
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
+  &[data-popup-open]::before,
   &[data-highlighted]::before {
     content: '';
     z-index: -1;
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
   }
+
+  &[data-popup-open]::before {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-highlighted]::before {
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+
+  &[data-highlighted][data-popup-open]::before {
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+}
+
+.SubmenuTrigger {
+  padding-right: 0.5rem;
 }
 
 .MenuSeparator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
index b23b086832f..421a8624e49 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleMenubar() {
       <Menu.Root>
         <Menu.Trigger className={styles.MenuTrigger}>File</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className={styles.MenuPositioner} sideOffset={6} alignOffset={-2}>
+          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
             <Menu.Popup className={styles.MenuPopup}>
               <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                 New
@@ -23,12 +23,16 @@ export default function ExampleMenubar() {
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className={styles.MenuItem}>
+                <Menu.SubmenuTrigger className={styles.SubmenuTrigger}>
                   Export
-                  <ChevronRightIcon />
+                  <CaretRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
-                  <Menu.Positioner alignOffset={-4}>
+                  <Menu.Positioner
+                    className={styles.MenuPositioner}
+                    sideOffset={-4}
+                    alignOffset={-4}
+                  >
                     <Menu.Popup className={styles.MenuPopup}>
                       <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                         PDF
@@ -56,7 +60,7 @@ export default function ExampleMenubar() {
       <Menu.Root>
         <Menu.Trigger className={styles.MenuTrigger}>Edit</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className={styles.MenuPositioner} sideOffset={6}>
+          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
             <Menu.Popup className={styles.MenuPopup}>
               <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                 Cut
@@ -75,7 +79,7 @@ export default function ExampleMenubar() {
       <Menu.Root>
         <Menu.Trigger className={styles.MenuTrigger}>View</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className={styles.MenuPositioner} sideOffset={6}>
+          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
             <Menu.Popup className={styles.MenuPopup}>
               <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                 Zoom In
@@ -87,10 +91,14 @@ export default function ExampleMenubar() {
               <Menu.SubmenuRoot>
                 <Menu.SubmenuTrigger className={styles.MenuItem}>
                   Layout
-                  <ChevronRightIcon />
+                  <CaretRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
-                  <Menu.Positioner alignOffset={-4}>
+                  <Menu.Positioner
+                    className={styles.MenuPositioner}
+                    sideOffset={-4}
+                    alignOffset={-4}
+                  >
                     <Menu.Popup className={styles.MenuPopup}>
                       <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                         Single Page
@@ -127,16 +135,17 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
   console.log(`${event.currentTarget.textContent} clicked`);
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
-      <path
-        d="M6 12L10 8L6 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index f8f460d015e..f6a6d28796f 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -5,56 +5,56 @@ import { Menu } from '@base-ui/react/menu';
 
 export default function ExampleMenubar() {
   return (
-    <Menubar className="flex rounded-md border border-gray-200 bg-gray-50 p-0.5">
+    <Menubar className="flex items-center">
       <Menu.Root>
-        <Menu.Trigger className="h-8 rounded-sm px-3 text-sm font-normal text-gray-600 outline-hidden select-none focus-visible:bg-gray-100 data-[disabled]:opacity-50 data-[popup-open]:bg-gray-100">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white">
           File
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-hidden" sideOffset={6}>
-            <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+          <Menu.Positioner className="outline-none" sideOffset={4}>
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 New
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Open
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Save
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex w-full cursor-default items-center justify-between gap-4 px-4 py-2 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Export
-                  <ChevronRightIcon />
+                  <CaretRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
-                  <Menu.Positioner>
-                    <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+                  <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         PDF
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         PNG
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         SVG
                       </Menu.Item>
@@ -63,10 +63,10 @@ export default function ExampleMenubar() {
                 </Menu.Portal>
               </Menu.SubmenuRoot>
 
-              <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Print
               </Menu.Item>
@@ -76,27 +76,27 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 rounded-sm px-3 text-sm font-normal text-gray-600 outline-hidden select-none focus-visible:bg-gray-100 data-[disabled]:opacity-50 data-[popup-open]:bg-gray-100">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white">
           Edit
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-hidden" sideOffset={6}>
-            <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+          <Menu.Positioner className="outline-none" sideOffset={4}>
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Cut
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Copy
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Paste
               </Menu.Item>
@@ -106,48 +106,48 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 rounded-sm px-3 text-sm font-normal text-gray-600 outline-hidden select-none focus-visible:bg-gray-100 data-[disabled]:opacity-50 data-[popup-open]:bg-gray-100">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white">
           View
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-hidden" sideOffset={6}>
-            <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+          <Menu.Positioner className="outline-none" sideOffset={4}>
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Zoom In
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Zoom Out
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex w-full cursor-default items-center justify-between gap-4 px-4 py-2 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:rounded-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Layout
-                  <ChevronRightIcon />
+                  <CaretRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
-                  <Menu.Positioner>
-                    <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+                  <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         Single Page
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         Two Pages
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         Continuous
                       </Menu.Item>
@@ -156,10 +156,10 @@ export default function ExampleMenubar() {
                 </Menu.Portal>
               </Menu.SubmenuRoot>
 
-              <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Full Screen
               </Menu.Item>
@@ -169,7 +169,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root disabled>
-        <Menu.Trigger className="h-8 rounded-sm px-3 text-sm font-normal text-gray-600 outline-hidden select-none focus-visible:bg-gray-100 data-[disabled]:opacity-50 data-[popup-open]:bg-gray-100">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white">
           Help
         </Menu.Trigger>
       </Menu.Root>
@@ -182,16 +182,17 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
   console.log(`${event.currentTarget.textContent} clicked`);
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
-      <path
-        d="M6 12L10 8L6 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
index 672e538c15b..374c9b33abd 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
@@ -1,36 +1,49 @@
 .Meter {
-  box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-row-gap: 0.5rem;
-  width: 12rem;
+  row-gap: 0.5rem;
+  width: 15rem;
+  max-width: 100%;
 }
 
 .Label {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value {
-  grid-column-start: 2;
-  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   text-align: right;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Track {
   grid-column: 1 / 3;
   overflow: hidden;
-  background-color: var(--color-gray-100);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  height: 0.5rem;
+  height: 0.75rem;
+  background-color: oklch(92.2% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Indicator {
-  background-color: var(--color-gray-500);
+  background-color: oklch(14.5% 0 0deg);
   transition: width 500ms;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
index d42148d8482..5b7bede2665 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
@@ -2,11 +2,13 @@ import { Meter } from '@base-ui/react/meter';
 
 export default function ExampleMeter() {
   return (
-    <Meter.Root className="box-border grid w-48 grid-cols-2 gap-y-2" value={24}>
-      <Meter.Label className="text-sm font-normal text-gray-900">Storage Used</Meter.Label>
-      <Meter.Value className="col-start-2 m-0 text-right text-sm leading-5 text-gray-900" />
-      <Meter.Track className="col-span-2 block h-2 w-48 overflow-hidden bg-gray-100 shadow-[inset_0_0_0_1px] shadow-gray-200">
-        <Meter.Indicator className="block bg-gray-500 transition-all duration-500" />
+    <Meter.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={24}>
+      <Meter.Label className="text-sm font-normal text-neutral-950 dark:text-white">
+        Storage Used
+      </Meter.Label>
+      <Meter.Value className="text-right text-sm text-neutral-950 dark:text-white" />
+      <Meter.Track className="col-span-2 h-3 overflow-hidden bg-neutral-200 dark:bg-neutral-800">
+        <Meter.Indicator className="bg-neutral-950 transition-[width] duration-500 dark:bg-white" />
       </Meter.Track>
     </Meter.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index 600f884edae..9c36d343c8e 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -1,14 +1,17 @@
 .Root {
-  background-color: var(--color-gray-50);
-  border-radius: 0.5rem;
-  padding: 0.25rem;
-  color: var(--color-gray-900);
+  box-sizing: border-box;
+  color: oklch(14.5% 0 0deg);
   min-width: max-content;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .List {
   display: flex;
   position: relative;
+  gap: 1px;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -20,44 +23,60 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: none;
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 0;
+  background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   text-decoration: none;
 
   @media (max-width: 500px) {
-    font-size: 0.925rem;
     padding: 0 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: transform 0.2s ease;
 
   &[data-popup-open] {
@@ -116,10 +135,13 @@
 
 .Popup {
   position: relative;
+  overflow: visible;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -127,6 +149,13 @@
   width: var(--popup-width);
   height: var(--popup-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -139,34 +168,17 @@
   }
 }
 
-@media (prefers-color-scheme: light) {
-  .Popup {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .Popup {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
-}
-
 .Content {
   box-sizing: border-box;
   transition:
     opacity calc(var(--duration) * 0.5) ease,
     transform var(--duration) var(--easing);
-  padding: 1.5rem;
-  width: calc(100vw - 40px);
+  padding: 0.5rem;
   height: 100%;
 
   @media (min-width: 500px) {
     width: max-content;
-    min-width: 400px;
+    max-width: 400px;
   }
 
   &[data-starting-style],
@@ -201,8 +213,9 @@
 }
 
 .GridLinkList {
+  box-sizing: border-box;
   display: grid;
-  grid-template-columns: 12rem 12rem;
+  grid-template-columns: 1fr 1fr;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -213,6 +226,7 @@
 }
 
 .FlexLinkList {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -224,82 +238,109 @@
 
 .LinkCard {
   box-sizing: border-box;
+  position: relative;
   display: block;
+  width: 100%;
+  height: 100%;
   padding: 0.5rem;
-  border-radius: 0.375rem;
   text-decoration: none;
   color: inherit;
-  border: none;
+  text-align: left;
+  border: 0;
   background-color: transparent;
 
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  @media (min-width: 425px) {
-    padding: 0.75rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .LinkTitle {
   margin: 0 0 4px;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1rem;
 }
 
 .LinkDescription {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-500);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Arrow {
-  display: flex;
-  transition: left calc(var(--duration)) var(--easing);
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
+  transition:
+    left var(--duration) var(--easing),
+    right var(--duration) var(--easing);
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid oklch(14.5% 0 0deg);
+    background-color: white;
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: oklch(14.5% 0 0deg);
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
index 2079df2aba3..42310c79a60 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Overview
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={styles.Content}>
@@ -27,11 +27,11 @@ export default function ExampleNavigationMenu() {
           </NavigationMenu.Content>
         </NavigationMenu.Item>
 
-        <NavigationMenu.Item>
+        <NavigationMenu.Item value="b">
           <NavigationMenu.Trigger className={styles.Trigger}>
             Handbook
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={styles.Content}>
@@ -63,9 +63,7 @@ export default function ExampleNavigationMenu() {
           collisionAvoidance={{ side: 'none' }}
         >
           <NavigationMenu.Popup className={styles.Popup}>
-            <NavigationMenu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+            <NavigationMenu.Arrow className={styles.Arrow} />
             <NavigationMenu.Viewport className={styles.Viewport} />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -88,29 +86,17 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 7cebd81b050..2ebd824692c 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -3,23 +3,25 @@ import { NavigationMenu } from '@base-ui/react/navigation-menu';
 
 export default function ExampleNavigationMenu() {
   return (
-    <NavigationMenu.Root className="min-w-max rounded-lg bg-gray-50 p-1 text-gray-900">
-      <NavigationMenu.List className="relative flex">
+    <NavigationMenu.Root className="min-w-max text-neutral-950 dark:text-white">
+      <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
-              <ChevronDownIcon />
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="grid list-none grid-cols-1 gap-0 [@media(min-width:32rem)]:grid-cols-[12rem_12rem]">
+            <ul className="m-0 grid list-none grid-cols-2 p-0 max-[500px]:grid-cols-1">
               {overviewLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
-                    <h3 className="m-0 mb-1 text-base leading-5 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500">{item.description}</p>
+                    <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
+                    <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
+                      {item.description}
+                    </p>
                   </Link>
                 </li>
               ))}
@@ -30,18 +32,20 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Handbook
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
-              <ChevronDownIcon />
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="flex max-w-[400px] flex-col justify-center">
+            <ul className="m-0 flex max-w-[400px] list-none flex-col justify-center p-0">
               {handbookLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
-                    <h3 className="m-0 mb-1 text-base leading-5 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500">{item.description}</p>
+                    <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
+                    <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
+                      {item.description}
+                    </p>
                   </Link>
                 </li>
               ))}
@@ -61,16 +65,14 @@ export default function ExampleNavigationMenu() {
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
           collisionAvoidance={{ side: 'none' }}
-          className="box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
             ['--duration' as string]: '0.35s',
             ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
           }}
         >
-          <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 w-[var(--popup-width)] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <NavigationMenu.Arrow className="flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -93,53 +95,35 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
 const triggerClassName =
-  'box-border flex items-center justify-center gap-1.5 h-10 ' +
-  'px-2 [@media(min-width:32rem)]:px-3.5 m-0 rounded-md bg-gray-50 text-gray-900 font-normal ' +
-  'text-[0.925rem] [@media(min-width:32rem)]:text-base leading-6 select-none no-underline ' +
-  'hover:bg-gray-100 active:bg-gray-100 data-[popup-open]:bg-gray-100 ' +
-  'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 focus-visible:relative';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const contentClassName =
-  'w-[calc(100vw_-_40px)] h-full p-6 [@media(min-width:32rem)]:w-max [@media(min-width:32rem)]:min-w-[400px] ' +
+  'h-full p-2 min-[500px]:w-max min-[500px]:max-w-[400px] ' +
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
-  'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 ' +
-  'data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] ' +
-  'data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] ' +
-  'data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] ' +
-  'data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]';
+  'data-starting-style:opacity-0 data-ending-style:opacity-0 ' +
+  'data-starting-style:data-[activation-direction=left]:translate-x-[-50%] ' +
+  'data-starting-style:data-[activation-direction=right]:translate-x-[50%] ' +
+  'data-ending-style:data-[activation-direction=left]:translate-x-[50%] ' +
+  'data-ending-style:data-[activation-direction=right]:translate-x-[-50%]';
 
 const linkCardClassName =
-  'block rounded-md p-2 [@media(min-width:32rem)]:p-3 no-underline text-inherit ' +
-  'hover:bg-gray-100 focus-visible:relative focus-visible:outline-2 ' +
-  'focus-visible:-outline-offset-1 focus-visible:outline-blue-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 378da53f2ff..ba4849fdd65 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -1,14 +1,17 @@
 .Root {
-  background-color: var(--color-gray-50);
-  border-radius: 0.5rem;
-  padding: 0.25rem;
-  color: var(--color-gray-900);
+  box-sizing: border-box;
+  color: oklch(14.5% 0 0deg);
   min-width: max-content;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .List {
   display: flex;
   position: relative;
+  gap: 1px;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -20,44 +23,60 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: none;
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 0;
+  background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   text-decoration: none;
 
-  @media (max-width: 640px) {
-    font-size: 0.925rem;
+  @media (max-width: 500px) {
     padding: 0 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: transform 0.2s ease;
 
   &[data-popup-open] {
@@ -118,9 +137,11 @@
   position: relative;
   overflow: visible;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -128,6 +149,13 @@
   width: var(--popup-width);
   height: var(--popup-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -141,28 +169,12 @@
   }
 }
 
-@media (prefers-color-scheme: light) {
-  .Popup {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .Popup {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
-}
-
 .Content {
   box-sizing: border-box;
   transition:
     opacity calc(var(--duration) * 0.5) ease,
     transform var(--duration) cubic-bezier(0.4, 0, 0.2, 1);
-  padding: 1.25rem;
+  padding: 0.5rem;
   width: calc(100vw - 40px);
   height: 100%;
 
@@ -217,15 +229,18 @@
 }
 
 .SubmenuRoot {
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   overflow: hidden;
   overflow: clip;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .SubmenuLayout {
   display: grid;
   grid-template-columns: 1fr;
-  border-radius: 0.5rem;
   overflow: hidden;
   overflow: clip;
 }
@@ -237,38 +252,29 @@
 }
 
 .SubmenuList {
+  box-sizing: border-box;
   list-style: none;
   margin: 0;
-  padding: 1rem;
+  padding: 0.5rem;
   display: flex;
   flex-direction: row;
   gap: 0.25rem;
   overflow-x: auto;
-  background-color: var(--color-gray-100);
-}
-
-@media (prefers-color-scheme: dark) {
-  .SubmenuList {
-    background-color: rgb(0 0 0 / 20%);
-  }
 }
 
 @media (min-width: 700px) {
   .SubmenuList {
-    box-sizing: border-box;
     flex-direction: column;
-    gap: 0;
+    gap: 1px;
     overflow-x: visible;
-    overflow-y: auto;
-    border-right: 1px solid var(--color-gray-200);
+    overflow-y: clip;
+    border-right: 1px solid oklch(14.5% 0 0deg);
     height: var(--popup-height);
     transition: height var(--duration) var(--easing);
-  }
-}
 
-@media (min-width: 700px) and (prefers-color-scheme: dark) {
-  .SubmenuList {
-    border-right-color: var(--color-gray-300);
+    @media (prefers-color-scheme: dark) {
+      border-right: 1px solid white;
+    }
   }
 }
 
@@ -281,9 +287,8 @@
   width: 100%;
   min-width: 10rem;
   margin: 0;
-  padding: 0.625rem 0.75rem;
+  padding: 0.5rem;
   border: 0;
-  border-radius: 0.5rem;
   background-color: transparent;
   color: inherit;
   font-family: inherit;
@@ -291,52 +296,61 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: canvas;
-    box-shadow:
-      0 1px 2px rgb(0 0 0 / 8%),
-      0 1px 1px rgb(0 0 0 / 4%);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-@media (prefers-color-scheme: dark) {
-  .SubmenuTrigger[data-popup-open] {
-    background-color: var(--color-gray-100);
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .SubmenuLabel {
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.2;
-  color: var(--color-gray-900);
+  line-height: 1rem;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .SubmenuHint {
   font-size: 0.875rem;
-  line-height: 1.35;
-  color: var(--color-gray-500);
+  line-height: 1.25rem;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .SubmenuViewport {
   position: relative;
   overflow: hidden;
   min-height: 16.5rem;
-  border-top: 1px solid var(--color-gray-200);
-}
+  border-top: 1px solid oklch(14.5% 0 0deg);
 
-@media (prefers-color-scheme: dark) {
-  .SubmenuViewport {
-    border-top-color: var(--color-gray-300);
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
   }
 }
 
@@ -347,8 +361,11 @@
 }
 
 .SubmenuContent {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   height: 100%;
-  padding: 1.75rem;
+  padding: 1rem;
   transform: translateX(0);
   transition:
     opacity var(--duration) var(--easing),
@@ -381,7 +398,6 @@
   }
 
   @media (min-width: 700px) {
-    padding: 2rem;
     transform: translateY(0);
     filter: blur(0);
     transition-duration: calc(var(--duration) * 1.35);
@@ -416,110 +432,147 @@
 
 .SubmenuTitle {
   margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.3;
+  font-size: 1rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .SubmenuDescription {
-  margin: 0.625rem 0 0;
-  color: var(--color-gray-500);
-  font-size: 1rem;
-  line-height: 1.5;
+  margin: 0.25rem 0 0;
+  color: oklch(55.6% 0 0deg);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .LinkList {
   list-style: none;
-  margin: 1rem -0.5rem 0;
+  margin: 0 -0.5rem;
   padding: 0;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 0;
 }
 
 .LinkCard {
   box-sizing: border-box;
+  position: relative;
   display: block;
-  padding: 0.75rem 0.5rem;
-  border-radius: 0.5rem;
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
   text-decoration: none;
   color: inherit;
+  text-align: left;
+  border: 0;
   background-color: transparent;
 
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .LinkTitle {
-  margin: 0;
-  font-size: 1rem;
+  margin: 0 0 4px;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1rem;
 }
 
 .LinkDescription {
-  margin: 0.35rem 0 0;
-  color: var(--color-gray-500);
-  font-size: 0.95rem;
-  line-height: 1.45;
+  margin: 0;
+  color: oklch(55.6% 0 0deg);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .GuidesPanel {
-  padding: 1.75rem;
-
-  @media (min-width: 700px) {
-    padding: 2rem;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
 }
 
 .Arrow {
-  display: flex;
-  transition: left calc(var(--duration)) var(--easing);
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
+  transition:
+    left var(--duration) var(--easing),
+    right var(--duration) var(--easing);
 
   @media (max-width: 699px) {
     display: none;
   }
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid oklch(14.5% 0 0deg);
+    background-color: white;
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: oklch(14.5% 0 0deg);
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
index 6ce2c91f22e..74efc4f078b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Product
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={`${styles.Content} ${styles.ProductContent}`}>
@@ -33,8 +33,10 @@ export default function ExampleNavigationMenu() {
                         <span className={styles.SubmenuHint}>{menu.hint}</span>
                       </NavigationMenu.Trigger>
                       <NavigationMenu.Content className={styles.SubmenuContent}>
-                        <h4 className={styles.SubmenuTitle}>{menu.title}</h4>
-                        <p className={styles.SubmenuDescription}>{menu.description}</p>
+                        <div>
+                          <h4 className={styles.SubmenuTitle}>{menu.title}</h4>
+                          <p className={styles.SubmenuDescription}>{menu.description}</p>
+                        </div>
                         <ul className={styles.LinkList}>
                           {menu.links.map((link) => (
                             <li key={link.href}>
@@ -60,13 +62,15 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Learn
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={`${styles.Content} ${styles.GuidesContent}`}>
             <div className={styles.GuidesPanel}>
-              <h4 className={styles.SubmenuTitle}>{guidesPanel.title}</h4>
-              <p className={styles.SubmenuDescription}>{guidesPanel.description}</p>
+              <div>
+                <h4 className={styles.SubmenuTitle}>{guidesPanel.title}</h4>
+                <p className={styles.SubmenuDescription}>{guidesPanel.description}</p>
+              </div>
               <ul className={styles.LinkList}>
                 {guideLinks.map((link) => (
                   <li key={link.href}>
@@ -102,9 +106,7 @@ export default function ExampleNavigationMenu() {
           collisionAvoidance={{ side: 'none' }}
         >
           <NavigationMenu.Popup className={styles.Popup}>
-            <NavigationMenu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+            <NavigationMenu.Arrow className={styles.Arrow} />
             <NavigationMenu.Viewport className={styles.Viewport} />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -127,29 +129,17 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 67e7640f891..4553911a97a 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -8,47 +8,47 @@ export default function ExampleNavigationMenu() {
   const isDesktop = useMediaQuery('(min-width: 700px)', { defaultMatches: true });
 
   return (
-    <NavigationMenu.Root className="min-w-max rounded-lg bg-gray-50 p-1 text-gray-900">
-      <NavigationMenu.List className="relative flex">
+    <NavigationMenu.Root className="min-w-max text-neutral-950 dark:text-white">
+      <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Product
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
-              <ChevronDownIcon />
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={productContentClassName}>
             <NavigationMenu.Root
-              className="overflow-hidden text-gray-900"
+              className="overflow-hidden overflow-clip text-neutral-950 dark:text-white"
               orientation={isDesktop ? 'vertical' : 'horizontal'}
               defaultValue="developers"
             >
-              <div className="grid grid-cols-1 overflow-clip rounded-lg min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
-                <NavigationMenu.List className="m-0 flex list-none flex-row gap-1 overflow-x-auto bg-gray-100 p-4 min-[700px]:box-border min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-0 min-[700px]:overflow-x-visible min-[700px]:overflow-y-auto min-[700px]:border-r min-[700px]:border-r-gray-200 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:bg-black/20 dark:border-r-gray-300">
+              <div className="grid grid-cols-1 overflow-hidden overflow-clip min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
+                <NavigationMenu.List className="m-0 flex list-none flex-row gap-1 overflow-x-auto p-2 min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-px min-[700px]:overflow-x-visible min-[700px]:overflow-y-clip min-[700px]:border-r min-[700px]:border-r-neutral-950 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:min-[700px]:border-r-white">
                   {audienceMenus.map((menu) => (
                     <NavigationMenu.Item key={menu.value} value={menu.value}>
                       <NavigationMenu.Trigger className={submenuTriggerClassName}>
-                        <span className="text-base leading-[1.2] font-normal text-gray-900">
+                        <span className="text-sm leading-4 font-normal text-neutral-950 dark:text-white">
                           {menu.label}
                         </span>
-                        <span className="text-sm leading-[1.35] text-gray-500">{menu.hint}</span>
+                        <span className="text-sm text-neutral-500 dark:text-neutral-400">
+                          {menu.hint}
+                        </span>
                       </NavigationMenu.Trigger>
                       <NavigationMenu.Content className={submenuContentClassName}>
-                        <h4 className="m-0 text-[1.125rem] leading-[1.3] font-normal">
-                          {menu.title}
-                        </h4>
-                        <p className="m-0 mt-2.5 text-base leading-[1.5] text-gray-500">
-                          {menu.description}
-                        </p>
-                        <ul className="-mx-2 m-0 mt-4 grid list-none gap-0 p-0">
+                        <div>
+                          <h4 className="m-0 text-base leading-5 font-normal">{menu.title}</h4>
+                          <p className="m-0 mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+                            {menu.description}
+                          </p>
+                        </div>
+                        <ul className="-mx-2 m-0 flex list-none flex-col gap-0 p-0">
                           {menu.links.map((link) => (
                             <li key={link.href}>
                               <Link className={linkCardClassName} href={link.href}>
-                                <h5 className="m-0 text-base leading-[1.25] font-normal">
-                                  {link.title}
-                                </h5>
-                                <p className="m-0 mt-[0.35rem] text-[0.95rem] leading-[1.45] text-gray-500">
+                                <h5 className="m-0 text-sm leading-4 font-normal">{link.title}</h5>
+                                <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                                   {link.description}
                                 </p>
                               </Link>
@@ -59,7 +59,7 @@ export default function ExampleNavigationMenu() {
                     </NavigationMenu.Item>
                   ))}
                 </NavigationMenu.List>
-                <NavigationMenu.Viewport className="relative min-h-[16.5rem] overflow-hidden border-t border-gray-200 min-[700px]:border-t-0 dark:border-gray-300" />
+                <NavigationMenu.Viewport className="relative min-h-[16.5rem] overflow-hidden border-t border-neutral-950 min-[700px]:border-t-0 dark:border-white" />
               </div>
             </NavigationMenu.Root>
           </NavigationMenu.Content>
@@ -68,23 +68,25 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Learn
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
-              <ChevronDownIcon />
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={guidesContentClassName}>
-            <div className="p-7 text-gray-900 min-[700px]:p-8">
-              <h4 className="m-0 text-[1.125rem] leading-[1.3] font-normal">{guidesPanel.title}</h4>
-              <p className="m-0 mt-2.5 text-base leading-[1.5] text-gray-500">
-                {guidesPanel.description}
-              </p>
-              <ul className="-mx-2 m-0 mt-4 grid list-none gap-0 p-0">
+            <div className="flex flex-col gap-4 p-4 text-neutral-950 dark:text-white">
+              <div>
+                <h4 className="m-0 text-base leading-5 font-normal">{guidesPanel.title}</h4>
+                <p className="m-0 mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+                  {guidesPanel.description}
+                </p>
+              </div>
+              <ul className="-mx-2 m-0 flex list-none flex-col gap-0 p-0">
                 {guideLinks.map((link) => (
                   <li key={link.href}>
                     <Link className={linkCardClassName} href={link.href}>
-                      <h5 className="m-0 text-base leading-[1.25] font-normal">{link.title}</h5>
-                      <p className="m-0 mt-[0.35rem] text-[0.95rem] leading-[1.45] text-gray-500">
+                      <h5 className="m-0 text-sm leading-4 font-normal">{link.title}</h5>
+                      <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                         {link.description}
                       </p>
                     </Link>
@@ -113,16 +115,14 @@ export default function ExampleNavigationMenu() {
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
           collisionAvoidance={{ side: 'none' }}
-          className="box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
             ['--duration' as string]: '0.35s',
             ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
           }}
         >
-          <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity,scale,width,height] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:transition-[opacity,scale] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <NavigationMenu.Arrow className="flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-ending-style:transition-[opacity,scale] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -145,68 +145,47 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
 const triggerClassName =
-  'box-border flex items-center justify-center gap-1.5 h-10 ' +
-  'px-2 sm:px-3.5 m-0 rounded-md bg-gray-50 text-gray-900 font-normal' +
-  'text-[0.925rem] sm:text-base leading-6 select-none no-underline ' +
-  'hover:bg-gray-100 active:bg-gray-100 data-[popup-open]:bg-gray-100 ' +
-  'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 focus-visible:relative';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const sharedContentClassName =
   'h-full w-[calc(100vw_-_40px)] ' +
   'transition-[opacity,translate] duration-[calc(var(--duration)*0.5),var(--duration)] ease-[ease,cubic-bezier(0.4,0,0.2,1)] ' +
-  'data-[starting-style]:data-[activation-direction=left]:opacity-0 data-[starting-style]:data-[activation-direction=right]:opacity-0 data-[ending-style]:opacity-0 ' +
-  'data-[ending-style]:duration-[calc(var(--duration)*0.5)] data-[ending-style]:ease-[ease] ' +
-  'data-[starting-style]:data-[activation-direction=left]:translate-x-[-2rem] ' +
-  'data-[starting-style]:data-[activation-direction=right]:translate-x-[2rem] ' +
-  'data-[ending-style]:data-[activation-direction=left]:translate-x-[2rem] ' +
-  'data-[ending-style]:data-[activation-direction=right]:translate-x-[-2rem]';
+  'data-starting-style:data-[activation-direction=left]:opacity-0 data-starting-style:data-[activation-direction=right]:opacity-0 data-ending-style:opacity-0 ' +
+  'data-ending-style:duration-[calc(var(--duration)*0.5)] data-ending-style:ease-[ease] ' +
+  'data-starting-style:data-[activation-direction=left]:translate-x-[-2rem] ' +
+  'data-starting-style:data-[activation-direction=right]:translate-x-[2rem] ' +
+  'data-ending-style:data-[activation-direction=left]:translate-x-[2rem] ' +
+  'data-ending-style:data-[activation-direction=right]:translate-x-[-2rem]';
 
-const productContentClassName = `${sharedContentClassName} min-[700px]:max-w-[675px] p-0`;
+const productContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(675px,calc(100vw-40px))]`;
 
-const guidesContentClassName = `${sharedContentClassName} min-[700px]:max-w-[500px] p-0`;
+const guidesContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(500px,calc(100vw-40px))]`;
 
 const submenuTriggerClassName =
-  'box-border m-0 flex w-full min-w-[10rem] flex-col items-start gap-0.5 rounded-lg ' +
-  'bg-transparent px-3 py-2.5 text-left text-inherit ' +
-  'hover:bg-gray-100 data-[popup-open]:bg-[canvas] dark:data-[popup-open]:bg-gray-100 data-[popup-open]:shadow-[0_1px_2px_rgb(0_0_0_/_0.08),0_1px_1px_rgb(0_0_0_/_0.04)] focus-visible:outline-2 ' +
-  'focus-visible:-outline-offset-1 focus-visible:outline-blue-800';
+  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const submenuContentClassName =
-  'h-full translate-x-0 p-7 min-[700px]:p-8 min-[700px]:blur-0 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
-  'data-[starting-style]:data-[activation-direction=left]:opacity-0 data-[starting-style]:data-[activation-direction=right]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] ' +
-  'data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] ' +
-  'min-[700px]:data-[starting-style]:data-[activation-direction=up]:opacity-0 min-[700px]:data-[starting-style]:data-[activation-direction=down]:opacity-0 min-[700px]:data-[starting-style]:data-[activation-direction=up]:translate-y-[-72px] min-[700px]:data-[starting-style]:data-[activation-direction=down]:translate-y-[72px] min-[700px]:data-[starting-style]:blur-[2px] ' +
-  'min-[700px]:data-[ending-style]:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-[ending-style]:data-[activation-direction=down]:translate-y-[-72px] min-[700px]:data-[ending-style]:blur-[2px]';
+  'flex h-full translate-x-0 flex-col gap-4 p-4 min-[700px]:blur-0 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
+  'data-starting-style:data-[activation-direction=left]:opacity-0 data-starting-style:data-[activation-direction=right]:opacity-0 data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] ' +
+  'data-ending-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] ' +
+  'min-[700px]:data-starting-style:data-[activation-direction=up]:opacity-0 min-[700px]:data-starting-style:data-[activation-direction=down]:opacity-0 min-[700px]:data-starting-style:data-[activation-direction=up]:translate-y-[-72px] min-[700px]:data-starting-style:data-[activation-direction=down]:translate-y-[72px] min-[700px]:data-starting-style:blur-[2px] ' +
+  'min-[700px]:data-ending-style:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-ending-style:data-[activation-direction=down]:translate-y-[-72px] min-[700px]:data-ending-style:blur-[2px]';
 
 const linkCardClassName =
-  'box-border block rounded-lg bg-transparent px-2 py-3 no-underline text-inherit ' +
-  'hover:bg-gray-100 focus-visible:outline-2 ' +
-  'focus-visible:-outline-offset-1 focus-visible:outline-blue-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index 28e0cee61d0..4036e9129bc 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -1,14 +1,17 @@
 .Root {
-  background-color: var(--color-gray-50);
-  border-radius: 0.5rem;
-  padding: 0.25rem;
-  color: var(--color-gray-900);
+  box-sizing: border-box;
+  color: oklch(14.5% 0 0deg);
   min-width: max-content;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .List {
   display: flex;
   position: relative;
+  gap: 1px;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -20,44 +23,60 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: none;
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 0;
+  background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   text-decoration: none;
 
-  @media (max-width: 640px) {
-    font-size: 0.925rem;
+  @media (max-width: 500px) {
     padding: 0 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: transform 0.2s ease;
 
   &[data-popup-open] {
@@ -118,9 +137,11 @@
   position: relative;
   overflow: visible;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -128,6 +149,13 @@
   width: var(--popup-width);
   height: var(--popup-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -140,28 +168,12 @@
   }
 }
 
-@media (prefers-color-scheme: light) {
-  .Popup {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .Popup {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
-}
-
 .Content {
   box-sizing: border-box;
   transition:
     opacity calc(var(--duration) * 0.5) ease,
     transform var(--duration) var(--easing);
-  padding: 1.5rem;
+  padding: 0.5rem;
   width: calc(100vw - 40px);
   height: 100%;
 
@@ -202,8 +214,9 @@
 }
 
 .GridLinkList {
+  box-sizing: border-box;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr 1fr;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -214,6 +227,7 @@
 }
 
 .FlexLinkList {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -230,85 +244,105 @@
   width: 100%;
   height: 100%;
   padding: 0.5rem;
-  border-radius: 0.375rem;
   text-decoration: none;
   color: inherit;
   text-align: left;
-  border: none;
+  border: 0;
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: var(--color-gray-50);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
 
-  @media (min-width: 500px) {
-    padding: 0.75rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .LinkTitle {
   margin: 0 0 4px;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1rem;
 }
 
 .LinkDescription {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-500);
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
+  transition:
+    left var(--duration) var(--easing),
+    right var(--duration) var(--easing);
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid oklch(14.5% 0 0deg);
+    background-color: white;
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: oklch(14.5% 0 0deg);
+    }
   }
 }
 
@@ -319,8 +353,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 0.6rem;
-  height: 0.6rem;
   margin-top: -0.3rem;
   transition: transform 0.2s ease;
 
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
index 06d10a626ac..3bf24c7f646 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Overview
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={styles.Content}>
@@ -31,7 +31,7 @@ export default function ExampleNavigationMenu() {
                         <span className={styles.LinkTitle}>Handbook</span>
                         <p className={styles.LinkDescription}>How to use Base UI effectively.</p>
                         <NavigationMenu.Icon className={styles.NestedIcon}>
-                          <ChevronRightIcon />
+                          <CaretRightIcon />
                         </NavigationMenu.Icon>
                       </NavigationMenu.Trigger>
                       <NavigationMenu.Content className={styles.Content}>
@@ -52,8 +52,8 @@ export default function ExampleNavigationMenu() {
                   <NavigationMenu.Portal>
                     <NavigationMenu.Positioner
                       className={styles.Positioner}
-                      sideOffset={24}
-                      alignOffset={-24}
+                      sideOffset={8}
+                      alignOffset={-8}
                       align="end"
                       side="right"
                     >
@@ -76,9 +76,7 @@ export default function ExampleNavigationMenu() {
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
         >
           <NavigationMenu.Popup className={styles.Popup}>
-            <NavigationMenu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+            <NavigationMenu.Arrow className={styles.Arrow} />
             <NavigationMenu.Viewport className={styles.Viewport} />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -101,37 +99,32 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index c0e0a625b9b..780c3aaa967 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -3,23 +3,25 @@ import { NavigationMenu } from '@base-ui/react/navigation-menu';
 
 export default function ExampleNavigationMenu() {
   return (
-    <NavigationMenu.Root className="min-w-max rounded-lg bg-gray-50 p-1 text-gray-900">
-      <NavigationMenu.List className="relative flex">
+    <NavigationMenu.Root className="min-w-max text-neutral-950 dark:text-white">
+      <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
-              <ChevronDownIcon />
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="grid list-none grid-cols-1 gap-0 sm:grid-cols-[12rem_12rem]">
+            <ul className="m-0 grid list-none grid-cols-2 p-0 min-[640px]:grid-cols-[12rem_12rem]">
               {overviewLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
-                    <h3 className="m-0 mb-1 text-base leading-5 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500">{item.description}</p>
+                    <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
+                    <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
+                      {item.description}
+                    </p>
                   </Link>
                 </li>
               ))}
@@ -27,23 +29,23 @@ export default function ExampleNavigationMenu() {
                 <NavigationMenu.Root orientation="vertical">
                   <NavigationMenu.Item>
                     <NavigationMenu.Trigger className={linkCardClassName}>
-                      <span className="m-0 mb-1 text-base leading-5 font-normal">Handbook</span>
-                      <p className="m-0 text-sm leading-5 text-gray-500">
+                      <span className="m-0 mb-1 text-sm leading-4 font-normal">Handbook</span>
+                      <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                         How to use Base UI effectively.
                       </p>
-                      <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
-                        <ChevronRightIcon />
+                      <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
+                        <CaretRightIcon />
                       </NavigationMenu.Icon>
                     </NavigationMenu.Trigger>
                     <NavigationMenu.Content className={contentClassName}>
-                      <ul className="flex max-w-[400px] flex-col justify-center">
+                      <ul className="m-0 flex max-w-[400px] list-none flex-col justify-center p-0">
                         {handbookLinks.map((item) => (
                           <li key={item.href}>
                             <Link href={item.href} className={linkCardClassName}>
-                              <h3 className="m-0 mb-1 text-base leading-5 font-normal">
+                              <h3 className="m-0 mb-1 text-sm leading-4 font-normal">
                                 {item.title}
                               </h3>
-                              <p className="m-0 text-sm leading-5 text-gray-500">
+                              <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                                 {item.description}
                               </p>
                             </Link>
@@ -55,17 +57,17 @@ export default function ExampleNavigationMenu() {
 
                   <NavigationMenu.Portal>
                     <NavigationMenu.Positioner
-                      sideOffset={24}
-                      alignOffset={-24}
+                      sideOffset={8}
+                      alignOffset={-8}
                       align="end"
                       side="right"
-                      className="box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+                      className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
                       style={{
                         ['--duration' as string]: '0.35s',
                         ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
                       }}
                     >
-                      <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -81,16 +83,14 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Positioner
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
-          className="box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
             ['--duration' as string]: '0.35s',
             ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
           }}
         >
-          <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 w-[var(--popup-width)] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <NavigationMenu.Arrow className="flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -113,62 +113,51 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1.5" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
 
 const triggerClassName =
-  'box-border flex items-center justify-center gap-1.5 h-10 ' +
-  'px-2 sm:px-3.5 m-0 rounded-md bg-gray-50 text-gray-900 font-normal ' +
-  'text-[0.925rem] sm:text-base leading-6 select-none no-underline ' +
-  'hover:bg-gray-100 active:bg-gray-100 data-[popup-open]:bg-gray-100 ' +
-  'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 focus-visible:relative';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
-const contentClassName =
-  'w-[calc(100vw_-_40px)] h-full p-6 [@media(min-width:32rem)]:w-max [@media(min-width:32rem)]:min-w-[400px] ' +
+const contentTransitionClassName =
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
-  'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 ' +
-  'data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] ' +
-  'data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] ' +
-  'data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] ' +
-  'data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]';
+  'data-starting-style:opacity-0 data-ending-style:opacity-0 ' +
+  'data-starting-style:data-[activation-direction=left]:translate-x-[-50%] ' +
+  'data-starting-style:data-[activation-direction=right]:translate-x-[50%] ' +
+  'data-ending-style:data-[activation-direction=left]:translate-x-[50%] ' +
+  'data-ending-style:data-[activation-direction=right]:translate-x-[-50%]';
+
+const contentClassName = `h-full w-[calc(100vw_-_40px)] p-2 min-[500px]:w-max min-[500px]:min-w-[400px] ${contentTransitionClassName}`;
 
 const linkCardClassName =
-  'w-full text-left relative block rounded-md p-2 sm:p-3 no-underline text-inherit ' +
-  'hover:bg-gray-100 focus-visible:relative focus-visible:outline-2 ' +
-  'focus-visible:-outline-offset-1 focus-visible:outline-blue-800 ' +
-  'data-[popup-open]:bg-gray-100';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index 7e8f299d932..6106a7a4dba 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -20,37 +20,55 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Group {
   display: flex;
+  height: 2rem;
 }
 
 .Input {
   box-sizing: border-box;
   margin: 0;
-  padding: 0;
+  padding: 0 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
-  border-top: 1px solid var(--color-gray-200);
-  border-bottom: 1px solid var(--color-gray-200);
-  border-left: none;
-  border-right: none;
-  width: 6rem;
-  height: 2.5rem;
+  width: 7ch;
+  height: 100%;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
 
-  text-align: center;
+  text-align: left;
   font-variant-numeric: tabular-nums;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   &:focus {
     z-index: 1;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -60,35 +78,57 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 100%;
   margin: 0;
   outline: 0;
   padding: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 }
 
 .Decrement {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-right: 0;
 }
 
 .Increment {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-left: 0;
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
index b5ef4842427..88f581ef8b7 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
@@ -30,7 +30,15 @@ export default function ExampleNumberField() {
 
 function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="26" height="14" viewBox="0 0 24 14" fill="black" stroke="white" {...props}>
+    <svg
+      width="26"
+      height="14"
+      viewBox="0 0 24 14"
+      fill="black"
+      stroke="white"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
     </svg>
   );
@@ -39,15 +47,17 @@ function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0 5H5M10 5H5M5 5V0M5 5V10" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -55,15 +65,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0 5H10" />
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index d15a8275ed2..55250d1f63f 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -1,12 +1,18 @@
 import * as React from 'react';
 import { NumberField } from '@base-ui/react/number-field';
 
+const stepperClasses =
+  'flex h-full w-8 items-center justify-center border border-neutral-950 rounded-none bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+
 export default function ExampleNumberField() {
   const id = React.useId();
   return (
     <NumberField.Root id={id} defaultValue={100} className="flex flex-col items-start gap-1">
-      <NumberField.ScrubArea className="cursor-ew-resize">
-        <label htmlFor={id} className="cursor-ew-resize text-sm font-bold text-gray-900">
+      <NumberField.ScrubArea className="cursor-ew-resize font-bold select-none">
+        <label
+          htmlFor={id}
+          className="cursor-ew-resize text-sm font-bold text-neutral-950 dark:text-white"
+        >
           Amount
         </label>
         <NumberField.ScrubAreaCursor className="drop-shadow-[0_1px_1px_#0008] filter">
@@ -14,12 +20,12 @@ export default function ExampleNumberField() {
         </NumberField.ScrubAreaCursor>
       </NumberField.ScrubArea>
 
-      <NumberField.Group className="flex">
-        <NumberField.Decrement className="flex size-10 items-center justify-center rounded-tl-md rounded-bl-md border border-gray-200 bg-gray-50 bg-clip-padding text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100">
+      <NumberField.Group className="flex h-8">
+        <NumberField.Decrement className={`${stepperClasses} border-r-0`}>
           <MinusIcon />
         </NumberField.Decrement>
-        <NumberField.Input className="h-10 w-24 border-t border-b border-gray-200 text-center text-base text-gray-900 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 font-normal" />
-        <NumberField.Increment className="flex size-10 items-center justify-center rounded-tr-md rounded-br-md border border-gray-200 bg-gray-50 bg-clip-padding text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100">
+        <NumberField.Input className="h-full w-[7ch] border border-neutral-950 rounded-none bg-white px-2 text-left text-sm any-pointer-coarse:text-base font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white" />
+        <NumberField.Increment className={`${stepperClasses} border-l-0`}>
           <PlusIcon />
         </NumberField.Increment>
       </NumberField.Group>
@@ -29,7 +35,15 @@ export default function ExampleNumberField() {
 
 function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="26" height="14" viewBox="0 0 24 14" fill="black" stroke="white" {...props}>
+    <svg
+      width="26"
+      height="14"
+      viewBox="0 0 24 14"
+      fill="black"
+      stroke="white"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
     </svg>
   );
@@ -38,15 +52,17 @@ function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0 5H5M10 5H5M5 5V0M5 5V10" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -54,15 +70,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0 5H10" />
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index 91f357e5ead..6802ce91b91 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -23,21 +27,32 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  padding: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
   text-align: center;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -45,7 +60,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index 21c28ad69e0..f7858d655be 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldAlphanumericDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Recovery code
       </label>
       <OTPField.Root
@@ -22,13 +22,14 @@ export default function OTPFieldAlphanumericDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-gray-600">
-        Accept letters and numbers for backup codes such as <code>A7C9XZ</code>.
+      <p id={descriptionId} className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
+        Accept letters and numbers for backup codes such as{' '}
+        <code className="font-mono">A7C9XZ</code>.
       </p>
     </div>
   );
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index 89b23f66487..242f4599e9a 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -23,45 +27,75 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  padding: 0;
+
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
   text-align: center;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .InputInvalidA {
-  border-color: var(--color-red);
-  outline: 2px solid var(--color-red-800);
+  border-color: oklch(50.5% 0.213 27.518deg);
+  outline: 2px solid oklch(50.5% 0.213 27.518deg);
   outline-offset: -1px;
   animation: otp-field-shake-a 180ms ease-in-out;
 
+  @media (prefers-color-scheme: dark) {
+    border-color: oklch(70.4% 0.191 22.216deg);
+    outline: 2px solid oklch(70.4% 0.191 22.216deg);
+  }
+
   &:focus {
-    outline: 2px solid var(--color-red-800);
+    outline: 2px solid oklch(50.5% 0.213 27.518deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: oklch(70.4% 0.191 22.216deg);
+    }
   }
 }
 
 .InputInvalidB {
-  border-color: var(--color-red);
-  outline: 2px solid var(--color-red-800);
+  border-color: oklch(50.5% 0.213 27.518deg);
+  outline: 2px solid oklch(50.5% 0.213 27.518deg);
   outline-offset: -1px;
   animation: otp-field-shake-b 180ms ease-in-out;
 
+  @media (prefers-color-scheme: dark) {
+    border-color: oklch(70.4% 0.191 22.216deg);
+    outline: 2px solid oklch(70.4% 0.191 22.216deg);
+  }
+
   &:focus {
-    outline: 2px solid var(--color-red-800);
+    outline: 2px solid oklch(50.5% 0.213 27.518deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: oklch(70.4% 0.191 22.216deg);
+    }
   }
 }
 
@@ -69,7 +103,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index e9d545b393e..0a030141db5 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -23,25 +27,41 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  padding: 0;
+
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
   text-align: center;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 
   &::placeholder {
-    color: var(--color-gray-400);
+    color: oklch(43.9% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &:focus::placeholder {
@@ -53,5 +73,9 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index 53bff7cad06..41ff49b3796 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root
@@ -21,13 +21,13 @@ export default function OTPFieldFocusedPlaceholderDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none placeholder:text-gray-400 focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 focus:placeholder:text-transparent"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
             placeholder="•"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-gray-600">
+      <p id={descriptionId} className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
         Placeholder hints can stay visible until the active slot is focused.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index bde91d2170b..9c379ca953e 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -29,32 +33,43 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  padding: 0;
+
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
   text-align: center;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Separator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 1rem;
-  color: var(--color-gray-500);
-}
+  height: 1px;
+  background-color: currentColor;
+  color: oklch(14.5% 0 0deg);
 
-.SeparatorIcon {
-  display: block;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx
index d32d68ee3f3..afd68b83e2f 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx
@@ -22,9 +22,7 @@ export default function OTPFieldGroupedDemo() {
             />
           ))}
         </div>
-        <OTPField.Separator className={styles.Separator}>
-          <SeparatorMark className={styles.SeparatorIcon} />
-        </OTPField.Separator>
+        <OTPField.Separator className={styles.Separator} />
         <div className={styles.Group}>
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
@@ -38,11 +36,3 @@ export default function OTPFieldGroupedDemo() {
     </div>
   );
 }
-
-function SeparatorMark(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 4" width="20" height="4" fill="none" {...props}>
-      <path d="M2 2H18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
index 0ab17e187b6..fdcf869f6a2 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function OTPFieldGroupedDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root id={id} length={OTP_LENGTH} className="flex w-full items-center gap-2">
@@ -16,19 +16,17 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index}
-              className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
               aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
         </div>
-        <OTPField.Separator className="flex w-4 items-center justify-center text-gray-500">
-          <SeparatorMark />
-        </OTPField.Separator>
+        <OTPField.Separator className="h-px w-4 bg-current text-neutral-950 dark:text-white" />
         <div className="flex gap-2">
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index + 3}
-              className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
               aria-label={`Character ${index + 4} of ${OTP_LENGTH}`}
             />
           ))}
@@ -37,11 +35,3 @@ export default function OTPFieldGroupedDemo() {
     </div>
   );
 }
-
-function SeparatorMark(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 4" width="20" height="4" fill="none" {...props}>
-      <path d="M2 2H18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index c44ea351997..58164428516 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -23,21 +27,33 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  padding: 0;
+
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
   text-align: center;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -45,5 +61,9 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index af6219bcdbe..942b614f4e4 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleOTPField() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root
@@ -21,12 +21,12 @@ export default function ExampleOTPField() {
         {Array.from({ length: OTP_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-gray-600">
+      <p id={descriptionId} className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
         Enter the 6-character code we sent to your device.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index 91f357e5ead..6e42eccfbe7 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -23,21 +27,33 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  padding: 0;
+
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
   text-align: center;
-  background-color: transparent;
-  color: var(--color-gray-900);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -45,7 +61,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index d1fc4790478..49a12b0fd50 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldPasswordDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Access code
       </label>
       <OTPField.Root
@@ -22,13 +22,13 @@ export default function OTPFieldPasswordDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-gray-600">
-        Use <code>mask</code> to obscure the code on shared screens.
+      <p id={descriptionId} className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
+        Use <code className="font-mono">mask</code> to obscure the code on shared screens.
       </p>
     </div>
   );
diff --git a/docs/src/app/(docs)/react/components/page.mdx b/docs/src/app/(docs)/react/components/page.mdx
index d8165f073f2..c0478ec80fe 100644
--- a/docs/src/app/(docs)/react/components/page.mdx
+++ b/docs/src/app/(docs)/react/components/page.mdx
@@ -915,6 +915,7 @@ A list of actions in a dropdown, enhanced with keyboard navigation.
     - Detached triggers
     - Multiple triggers
     - Controlled mode with multiple triggers
+    - Arrow
     - Animating the Menu
       - Position and Size
       - Content
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index e9eaf0990e0..ef9fb899a80 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -1,44 +1,3 @@
-.IconButton {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &[data-popup-open] {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Positioner {
   width: var(--positioner-width);
   height: var(--positioner-height);
@@ -47,90 +6,101 @@
 
 .Popup {
   box-sizing: border-box;
-  padding: 1rem 1.5rem;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  outline: none;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
-
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
   max-width: 500px;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    transform: scale(0.98);
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: white;
+    border: 1px solid oklch(14.5% 0 0deg);
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(14.5% 0 0deg);
+      border: 1px solid white;
+    }
   }
 }
 
 .Title {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Container {
@@ -145,33 +115,69 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled], :disabled) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled], :disabled) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-popup-open]:not([data-disabled], :disabled) {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled],
+  &:disabled {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
index 2229198155d..7e1dcc7aa85 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -17,16 +17,16 @@ export default function PopoverDetachedTriggersControlledDemo() {
   return (
     <React.Fragment>
       <div className={styles.Container}>
-        <Popover.Trigger className={styles.IconButton} handle={demoPopover} id="trigger-1">
-          <BellIcon aria-label="Notifications" className={styles.Icon} />
+        <Popover.Trigger className={styles.Button} handle={demoPopover} id="trigger-1">
+          Trigger 1
         </Popover.Trigger>
 
-        <Popover.Trigger className={styles.IconButton} handle={demoPopover} id="trigger-2">
-          <BellIcon aria-label="Notifications" className={styles.Icon} />
+        <Popover.Trigger className={styles.Button} handle={demoPopover} id="trigger-2">
+          Trigger 2
         </Popover.Trigger>
 
-        <Popover.Trigger className={styles.IconButton} handle={demoPopover} id="trigger-3">
-          <BellIcon aria-label="Notifications" className={styles.Icon} />
+        <Popover.Trigger className={styles.Button} handle={demoPopover} id="trigger-3">
+          Trigger 3
         </Popover.Trigger>
 
         <button
@@ -50,9 +50,7 @@ export default function PopoverDetachedTriggersControlledDemo() {
         <Popover.Portal>
           <Popover.Positioner className={styles.Positioner} sideOffset={8}>
             <Popover.Popup className={styles.Popup}>
-              <Popover.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Popover.Arrow>
+              <Popover.Arrow className={styles.Arrow} />
               <Popover.Title className={styles.Title}>Notifications</Popover.Title>
               <Popover.Description className={styles.Description}>
                 You are all caught up. Good job!
@@ -64,30 +62,3 @@ export default function PopoverDetachedTriggersControlledDemo() {
     </React.Fragment>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 33ca28c1f7c..0d15c530167 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -1,11 +1,13 @@
 'use client';
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
-import { ArrowSvg, BellIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle();
 
-export default function PopoverDetachedTriggersSimpleDemo() {
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+
+export default function PopoverDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
   const [triggerId, setTriggerId] = React.useState<string | null>(null);
 
@@ -17,33 +19,21 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
-        <Popover.Trigger
-          className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100"
-          handle={demoPopover}
-          id="trigger-1"
-        >
-          <BellIcon aria-label="Notifications" />
+        <Popover.Trigger className={triggerClassName} handle={demoPopover} id="trigger-1">
+          Trigger 1
         </Popover.Trigger>
 
-        <Popover.Trigger
-          className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100"
-          handle={demoPopover}
-          id="trigger-2"
-        >
-          <BellIcon aria-label="Notifications" />
+        <Popover.Trigger className={triggerClassName} handle={demoPopover} id="trigger-2">
+          Trigger 2
         </Popover.Trigger>
 
-        <Popover.Trigger
-          className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100"
-          handle={demoPopover}
-          id="trigger-3"
-        >
-          <BellIcon aria-label="Notifications" />
+        <Popover.Trigger className={triggerClassName} handle={demoPopover} id="trigger-3">
+          Trigger 3
         </Popover.Trigger>
 
         <button
           type="button"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -61,33 +51,13 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       >
         <Popover.Portal>
           <Popover.Positioner
-            className="h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)"
+            className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup
-              className={`
-              h-(--popup-height,auto)
-              w-(--popup-width,auto) max-w-[500px]
-              origin-[var(--transform-origin)] rounded-lg bg-[canvas]
-              px-6 py-4
-              text-gray-900 shadow-lg
-              shadow-gray-200
-              outline-1
-              outline-gray-200
-              transition-[transform,scale,opacity]
-              data-[ending-style]:scale-90
-              data-[ending-style]:opacity-0
-              data-[starting-style]:scale-90
-              data-[starting-style]:opacity-0
-              dark:shadow-none
-              dark:-outline-offset-1
-              dark:outline-gray-300`}
-            >
-              <Popover.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-                <ArrowSvg />
-              </Popover.Arrow>
-              <Popover.Title className="text-base font-bold">Notifications</Popover.Title>
-              <Popover.Description className="text-base text-gray-600">
+            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+              <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 You are all caught up. Good job!
               </Popover.Description>
             </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 4fca1c597bc..ebb8000ac59 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -1,46 +1,3 @@
-.IconButton {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  user-select: none;
-  font-size: 1rem;
-  font-weight: 400;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &[data-popup-open] {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Positioner {
   --easing: cubic-bezier(0.22, 1, 0.36, 1);
   --animation-duration: 0.35s;
@@ -61,22 +18,31 @@
 
 .Popup {
   position: relative;
-  background-color: canvas;
-  color: var(--color-gray-900);
-  border-radius: 0.5rem;
+  outline: none;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  border: 1px solid oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
 
   /* These are required to make the size animations work */
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
 
-  max-width: 500px;
+  max-width: 31.25rem;
 
   /* width and height are essential for the resize animation; opacity and transform handle the enter/exit animation */
   transition-property: width, height, opacity, transform;
   transition-timing-function: var(--easing);
   transition-duration: var(--animation-duration);
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -86,29 +52,17 @@
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .Viewport {
-  --viewport-inline-padding: 1.5rem;
+  --viewport-inline-padding: 0.5rem;
   box-sizing: border-box;
   /* Required to clip the overflowing content during the slide in/out animations */
   position: relative;
   overflow: clip;
   width: 100%;
   height: 100%;
-  padding: 1rem var(--viewport-inline-padding);
+  padding: 0.5rem var(--viewport-inline-padding);
 
   [data-previous],
   [data-current] {
@@ -147,70 +101,87 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
   transition: left calc(var(--animation-duration)) var(--easing);
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: white;
+    border: 1px solid oklch(14.5% 0 0deg);
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(14.5% 0 0deg);
+      border: 1px solid white;
+    }
   }
 }
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+.Stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .Title {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Container {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .ProfilePanel {
   display: grid;
   grid-template-columns: auto auto;
-  column-gap: 16px;
-  margin: 0 -8px;
+  width: max-content;
+  column-gap: 0.5rem;
 
   .Title {
     grid-column: 2;
@@ -220,9 +191,13 @@
   .Plan {
     grid-column: 2;
     grid-row: 2;
-
     font-size: 0.875rem;
-    color: var(--color-gray-600);
+    line-height: 1.25rem;
+    color: oklch(43.9% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+    }
   }
 
   .Avatar {
@@ -233,16 +208,21 @@
     justify-content: center;
     align-items: center;
     vertical-align: middle;
-    border-radius: 100%;
     user-select: none;
     font-weight: 700;
-    color: var(--color-gray-900);
-    background-color: var(--color-gray-100);
-    font-size: 1rem;
+    color: oklch(14.5% 0 0deg);
+    background-color: oklch(92.2% 0 0deg);
+    font-size: 0.875rem;
     line-height: 1;
+    white-space: nowrap;
     overflow: hidden;
     height: 3rem;
     width: 3rem;
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   .AvatarImage {
@@ -256,19 +236,33 @@
     grid-row: 3;
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    margin-top: 0.5rem;
+    gap: 0.5rem;
     padding-top: 0.5rem;
-    border-top: 1px solid var(--color-gray-200);
     font-size: 0.875rem;
+    line-height: 1.25rem;
 
     a {
-      color: var(--color-gray-900);
-      text-decoration: none;
+      color: oklch(14.5% 0 0deg);
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 0.16em;
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
 
       @media (hover: hover) {
         &:hover {
-          text-decoration: underline;
+          text-decoration: none;
+        }
+      }
+
+      &:focus-visible {
+        outline: 2px solid oklch(14.5% 0 0deg);
+        outline-offset: 2px;
+
+        @media (prefers-color-scheme: dark) {
+          outline-color: white;
         }
       }
     }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
index 4792fd6e4b8..5fac7b84b5e 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
 import { Avatar } from '@base-ui/react/avatar';
+import baseStyles from '../../_index.module.css';
 import styles from './index.module.css';
 
 const demoPopover = Popover.createHandle<React.ComponentType>();
@@ -10,19 +11,19 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className={styles.Container}>
       <Popover.Trigger
-        className={styles.IconButton}
+        className={baseStyles.Button}
         handle={demoPopover}
         payload={NotificationsPanel}
       >
-        <BellIcon aria-label="Notifications" className={styles.Icon} />
+        Notifications
       </Popover.Trigger>
 
-      <Popover.Trigger className={styles.IconButton} handle={demoPopover} payload={ActivityPanel}>
-        <ListIcon aria-label="Activity" className={styles.Icon} />
+      <Popover.Trigger className={baseStyles.Button} handle={demoPopover} payload={ActivityPanel}>
+        Activity
       </Popover.Trigger>
 
-      <Popover.Trigger className={styles.IconButton} handle={demoPopover} payload={ProfilePanel}>
-        <UserIcon aria-label="Profile" className={styles.Icon} />
+      <Popover.Trigger className={baseStyles.Button} handle={demoPopover} payload={ProfilePanel}>
+        Profile
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
@@ -30,9 +31,7 @@ export default function PopoverDetachedTriggersFullDemo() {
           <Popover.Portal>
             <Popover.Positioner sideOffset={8} className={styles.Positioner}>
               <Popover.Popup className={styles.Popup}>
-                <Popover.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Popover.Arrow>
+                <Popover.Arrow className={styles.Arrow} />
 
                 <Popover.Viewport className={styles.Viewport}>
                   {Payload !== undefined && <Payload />}
@@ -48,12 +47,12 @@ export default function PopoverDetachedTriggersFullDemo() {
 
 function NotificationsPanel() {
   return (
-    <React.Fragment>
+    <div className={styles.Stack}>
       <Popover.Title className={styles.Title}>Notifications</Popover.Title>
       <Popover.Description className={styles.Description}>
         You are all caught up. Good job!
       </Popover.Description>
-    </React.Fragment>
+    </div>
   );
 }
 
@@ -80,81 +79,11 @@ function ProfilePanel() {
 
 function ActivityPanel() {
   return (
-    <React.Fragment>
+    <div className={styles.Stack}>
       <Popover.Title className={styles.Title}>Activity</Popover.Title>
       <Popover.Description className={styles.Description}>
         Nothing interesting happened recently.
       </Popover.Description>
-    </React.Fragment>
-  );
-}
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
-
-function UserIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 20a6 6 0 0 0-12 0" />
-      <circle cx="12" cy="10" r="4" />
-      <circle cx="12" cy="12" r="10" />
-    </svg>
-  );
-}
-
-function ListIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M3 5h.01" />
-      <path d="M3 12h.01" />
-      <path d="M3 19h.01" />
-      <path d="M8 5h13" />
-      <path d="M8 12h13" />
-      <path d="M8 19h13" />
-    </svg>
+    </div>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index f3a4f828dfb..64b764d325d 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -2,62 +2,29 @@
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
 import { Avatar } from '@base-ui/react/avatar';
-import { ArrowSvg, BellIcon, ListIcon, UserIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle<React.ComponentType>();
 
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+
 export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className={`
-          box-border flex
-          size-10 items-center justify-center
-          rounded-md border border-gray-200
-          bg-gray-50
-          text-base font-normal text-gray-900
-          select-none
-          hover:bg-gray-100 focus-visible:outline-2
-          focus-visible:-outline-offset-1
-          focus-visible:outline-blue-600 active:bg-gray-100 data-popup-open:bg-gray-100`}
+        className={triggerClassName}
         handle={demoPopover}
         payload={NotificationsPanel}
       >
-        <BellIcon aria-label="Notifications" className="size-5" />
+        Notifications
       </Popover.Trigger>
 
-      <Popover.Trigger
-        className={`
-          box-border flex
-          size-10 items-center justify-center
-          rounded-md border border-gray-200
-          bg-gray-50
-          text-base font-normal text-gray-900
-          select-none
-          hover:bg-gray-100 focus-visible:outline-2
-          focus-visible:-outline-offset-1
-          focus-visible:outline-blue-600 active:bg-gray-100 data-popup-open:bg-gray-100`}
-        handle={demoPopover}
-        payload={ActivityPanel}
-      >
-        <ListIcon aria-label="Activity" className="size-5" />
+      <Popover.Trigger className={triggerClassName} handle={demoPopover} payload={ActivityPanel}>
+        Activity
       </Popover.Trigger>
 
-      <Popover.Trigger
-        className={`
-          box-border flex
-          size-10 items-center justify-center
-          rounded-md border border-gray-200
-          bg-gray-50
-          text-base font-normal text-gray-900
-          select-none
-          hover:bg-gray-100 focus-visible:outline-2
-          focus-visible:-outline-offset-1
-          focus-visible:outline-blue-600 active:bg-gray-100 data-popup-open:bg-gray-100`}
-        handle={demoPopover}
-        payload={ProfilePanel}
-      >
-        <UserIcon aria-label="Profile" className="size-5" />
+      <Popover.Trigger className={triggerClassName} handle={demoPopover} payload={ProfilePanel}>
+        Profile
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
@@ -65,53 +32,15 @@ export default function PopoverDetachedTriggersFullDemo() {
           <Popover.Portal>
             <Popover.Positioner
               sideOffset={8}
-              className={`
-                h-(--positioner-height) w-(--positioner-width)
-                max-w-(--available-width)
-                transition-[top,left,right,bottom,transform]
-                duration-[0.35s]
-                ease-[cubic-bezier(0.22,1,0.36,1)]
-                data-instant:transition-none`}
+              className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none"
             >
-              <Popover.Popup
-                className={`
-                  relative h-(--popup-height,auto) w-(--popup-width,auto)
-                  max-w-[500px] origin-(--transform-origin)
-                  rounded-lg bg-[canvas] text-gray-900
-                  shadow-lg
-                  shadow-gray-200
-                  outline-1
-                  outline-gray-200
-                  transition-[width,height,opacity,scale]
-                  duration-[0.35s]
-                  ease-[cubic-bezier(0.22,1,0.36,1)]
-                  data-ending-style:scale-90
-                  data-ending-style:opacity-0 data-instant:transition-none
-                  data-starting-style:scale-90
-                  data-starting-style:opacity-0
-                  dark:shadow-none
-                  dark:-outline-offset-1
-                  dark:outline-gray-300`}
-              >
-                <Popover.Arrow
-                  className={`
-                    flex
-                    transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
-                    data-[side=bottom]:top-[-8px]
-                    data-[side=left]:right-[-13px]
-                    data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px]
-                    data-[side=right]:-rotate-90
-                    data-[side=top]:bottom-[-8px]
-                    data-[side=top]:rotate-180`}
-                >
-                  <ArrowSvg />
-                </Popover.Arrow>
+              <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
+                <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
                   className={`
-                    relative h-full w-full overflow-clip p-[1rem_1.5rem]
-                    [&_[data-current]]:w-[calc(var(--popup-width)-3rem)]
+                    relative h-full w-full overflow-clip p-2
+                    [&_[data-current]]:w-[calc(var(--popup-width)-1rem)]
                     [&_[data-current]]:translate-x-0
                     [&_[data-current]]:opacity-100
                     [&_[data-current]]:transition-[translate,opacity]
@@ -121,7 +50,7 @@ export default function PopoverDetachedTriggersFullDemo() {
                     data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0
                     data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-1/2
                     data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0
-                    [&_[data-previous]]:w-[calc(var(--popup-width)-3rem)]
+                    [&_[data-previous]]:w-[calc(var(--popup-width)-1rem)]
                     [&_[data-previous]]:translate-x-0
                     [&_[data-previous]]:opacity-100
                     [&_[data-previous]]:transition-[translate,opacity]
@@ -145,22 +74,22 @@ export default function PopoverDetachedTriggersFullDemo() {
 
 function NotificationsPanel() {
   return (
-    <React.Fragment>
-      <Popover.Title className="m-0 text-base font-bold">Notifications</Popover.Title>
-      <Popover.Description className="m-0 text-base text-gray-600">
+    <div className="flex flex-col gap-1">
+      <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+      <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
         You are all caught up. Good job!
       </Popover.Description>
-    </React.Fragment>
+    </div>
   );
 }
 
 function ProfilePanel() {
   return (
-    <div className="-mx-2 grid grid-cols-[auto_auto] gap-x-4">
-      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 m-0 text-base font-bold">
+    <div className="grid w-max grid-cols-[auto_auto] gap-x-2">
+      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 text-sm font-bold">
         Jason Eventon
       </Popover.Title>
-      <Avatar.Root className="col-start-1 col-end-2 row-start-1 row-end-3 inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-gray-100 align-middle text-base leading-none font-bold text-gray-900 select-none">
+      <Avatar.Root className="col-start-1 col-end-2 row-start-1 row-end-3 inline-flex h-12 w-12 items-center justify-center overflow-hidden bg-neutral-200 dark:bg-neutral-800 align-middle text-sm leading-none font-bold text-neutral-950 dark:text-white select-none">
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
           width="48"
@@ -168,14 +97,20 @@ function ProfilePanel() {
           className="h-full w-full object-cover"
         />
       </Avatar.Root>
-      <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm text-gray-600">
+      <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm text-neutral-600 dark:text-neutral-400">
         Pro plan
       </span>
-      <div className="col-start-1 col-end-3 row-start-3 row-end-4 mt-2 flex flex-col gap-2 border-t border-gray-200 pt-2 text-sm">
-        <a href="#" className="text-gray-900 no-underline hover:underline">
+      <div className="col-start-1 col-end-3 row-start-3 row-end-4 flex flex-col gap-2 pt-2 text-sm">
+        <a
+          href="#"
+          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        >
           Profile settings
         </a>
-        <a href="#" className="text-gray-900 no-underline hover:underline">
+        <a
+          href="#"
+          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        >
           Log out
         </a>
       </div>
@@ -185,11 +120,11 @@ function ProfilePanel() {
 
 function ActivityPanel() {
   return (
-    <React.Fragment>
-      <Popover.Title className="m-0 text-base font-bold">Activity</Popover.Title>
-      <Popover.Description className="m-0 text-base text-gray-600">
+    <div className="flex flex-col gap-1">
+      <Popover.Title className="text-sm font-bold">Activity</Popover.Title>
+      <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
         Nothing interesting happened recently.
       </Popover.Description>
-    </React.Fragment>
+    </div>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
index 630a49084b0..9fab34c29d4 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
@@ -8,17 +8,15 @@ const demoPopover = Popover.createHandle();
 export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
-      <Popover.Trigger className={styles.IconButton} handle={demoPopover}>
-        <BellIcon aria-label="Notifications" className={styles.Icon} />
+      <Popover.Trigger className={styles.Button} handle={demoPopover}>
+        Notifications
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
             <Popover.Popup className={styles.Popup}>
-              <Popover.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Popover.Arrow>
+              <Popover.Arrow className={styles.Arrow} />
               <Popover.Title className={styles.Title}>Notifications</Popover.Title>
               <Popover.Description className={styles.Description}>
                 You are all caught up. Good job!
@@ -30,30 +28,3 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     </React.Fragment>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index ce21f0af0d6..1b553867010 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -1,29 +1,26 @@
 'use client';
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
-import { ArrowSvg, BellIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle();
 
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+
 export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
-      <Popover.Trigger
-        className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100"
-        handle={demoPopover}
-      >
-        <BellIcon aria-label="Notifications" />
+      <Popover.Trigger className={triggerClassName} handle={demoPopover}>
+        Notifications
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="origin-[var(--transform-origin)] rounded-lg bg-[canvas] px-6 py-4 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-              <Popover.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-                <ArrowSvg />
-              </Popover.Arrow>
-              <Popover.Title className="text-base font-bold">Notifications</Popover.Title>
-              <Popover.Description className="text-base text-gray-600">
+            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+              <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 You are all caught up. Good job!
               </Popover.Description>
             </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
index d1dd7dbd75d..018ef215f44 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
@@ -5,15 +5,11 @@ import styles from '../../_index.module.css';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className={styles.IconButton}>
-        <BellIcon aria-label="Notifications" className={styles.Icon} />
-      </Popover.Trigger>
+      <Popover.Trigger className={styles.Button}>Notifications</Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className={styles.Popup}>
-            <Popover.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Popover.Arrow>
+            <Popover.Arrow className={styles.Arrow} />
             <Popover.Title className={styles.Title}>Notifications</Popover.Title>
             <Popover.Description className={styles.Description}>
               You are all caught up. Good job!
@@ -24,30 +20,3 @@ export default function ExamplePopover() {
     </Popover.Root>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index 3957e36f0f2..05158253258 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -1,20 +1,18 @@
 import { Popover } from '@base-ui/react/popover';
-import { BellIcon, ArrowSvg } from '../../icons-tw';
+
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 font-normal">
-        <BellIcon aria-label="Notifications" />
-      </Popover.Trigger>
+      <Popover.Trigger className={triggerClassName}>Notifications</Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="origin-[var(--transform-origin)] rounded-lg bg-[canvas] px-6 py-4 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Popover.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Popover.Arrow>
-            <Popover.Title className="text-base font-bold">Notifications</Popover.Title>
-            <Popover.Description className="text-base text-gray-600">
+          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+            <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
             </Popover.Description>
           </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
deleted file mode 100644
index 7cd2cde565d..00000000000
--- a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-
-export function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-export function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
-
-export function UserIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 20a6 6 0 0 0-12 0" />
-      <circle cx="12" cy="10" r="4" />
-      <circle cx="12" cy="12" r="10" />
-    </svg>
-  );
-}
-
-export function ListIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M3 5h.01" />
-      <path d="M3 12h.01" />
-      <path d="M3 19h.01" />
-      <path d="M8 5h13" />
-      <path d="M8 12h13" />
-      <path d="M8 19h13" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
index 18306bcdbe9..7e2c8c72e05 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
@@ -5,15 +5,13 @@ import styles from '../../_index.module.css';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger openOnHover className={styles.IconButton}>
-        <BellIcon aria-label="Notifications" className={styles.Icon} />
+      <Popover.Trigger openOnHover className={styles.Button}>
+        Notifications
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className={styles.Popup}>
-            <Popover.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Popover.Arrow>
+            <Popover.Arrow className={styles.Arrow} />
             <Popover.Title className={styles.Title}>Notifications</Popover.Title>
             <Popover.Description className={styles.Description}>
               You are all caught up. Good job!
@@ -24,30 +22,3 @@ export default function ExamplePopover() {
     </Popover.Root>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 11d55136593..2488e6363e8 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -1,23 +1,20 @@
 import { Popover } from '@base-ui/react/popover';
-import { BellIcon, ArrowSvg } from '../../icons-tw';
+
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger
-        openOnHover
-        className="flex size-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100"
-      >
-        <BellIcon aria-label="Notifications" />
+      <Popover.Trigger openOnHover className={triggerClassName}>
+        Notifications
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="origin-[var(--transform-origin)] rounded-lg bg-[canvas] px-6 py-4 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Popover.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Popover.Arrow>
-            <Popover.Title className="text-base font-bold">Notifications</Popover.Title>
-            <Popover.Description className="text-base text-gray-600">
+          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+            <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
             </Popover.Description>
           </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/css-modules/index.tsx
index 4813e335a17..28bc6186e03 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -120,9 +120,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           <PreviewCard.Portal>
             <PreviewCard.Positioner sideOffset={8} className={styles.Positioner}>
               <PreviewCard.Popup className={styles.Popup}>
-                <PreviewCard.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </PreviewCard.Arrow>
+                <PreviewCard.Arrow className={styles.Arrow} />
                 {payload}
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
@@ -132,22 +130,3 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index cda72c8da4d..8b057ae3e30 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,43 +6,43 @@ const demoPreviewCard = PreviewCard.createHandle<React.ReactElement>();
 
 const cardContents = {
   typography: (
-    <div className="w-min flex flex-col gap-2 p-2 box-border">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="224"
         height="150"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm text-pretty">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
   ),
   design: (
-    <div className="w-min flex flex-col gap-2 p-2 box-border">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="241"
         height="240"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm text-pretty">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
   ),
   art: (
-    <div className="w-min flex flex-col gap-2 p-2 box-border">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="206"
         height="240"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm text-pretty">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
@@ -63,11 +63,11 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
 
   return (
     <div>
-      <div className="flex gap-2 flex-wrap justify-center items-baseline">
-        <p className="m-0 text-base leading-6 text-gray-900 text-balance">
+      <div className="flex flex-wrap items-baseline justify-center gap-2">
+        <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
           Discover{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Typography"
             id="trigger-1"
@@ -77,7 +77,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           ,{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Industrial_design"
             id="trigger-2"
@@ -87,7 +87,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           , or{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Art"
             id="trigger-3"
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="box-border flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -121,10 +121,8 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="box-border w-[var(--popup-width,auto)] h-[var(--popup-height,auto)] rounded-lg bg-[canvas] origin-[var(--transform-origin)] transition-[scale,opacity] duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
-                <PreviewCard.Arrow className="flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-                  <ArrowSvg />
-                </PreviewCard.Arrow>
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
                 {payload}
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
@@ -134,22 +132,3 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index 980a9b22900..7f3ba1cffee 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -13,9 +13,10 @@
 
 .Popup {
   position: relative;
-  background-color: canvas;
-  color: var(--color-gray-900);
-  border-radius: 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
 
   /* These are required to make the size animations work */
@@ -27,62 +28,63 @@
   transition-timing-function: var(--easing);
   transition-duration: var(--animation-duration);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    transform: scale(0.98);
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
 
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid oklch(14.5% 0 0deg);
+    background-color: white;
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: oklch(14.5% 0 0deg);
+    }
   }
 }
 
@@ -139,7 +141,6 @@
 
 .Image {
   display: block;
-  border-radius: 0.25rem;
   max-width: none;
 }
 
@@ -147,7 +148,6 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
   text-wrap: pretty;
 }
 
@@ -155,31 +155,51 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   text-wrap: balance;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Link {
   outline: 0;
-  color: var(--color-blue);
+  color: oklch(42.4% 0.199 265.638deg);
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(in oklab, var(--color-blue), transparent 40%);
+  text-decoration-color: color-mix(in oklab, oklch(42.4% 0.199 265.638deg), transparent 40%);
   text-underline-offset: 2px;
 
+  @media (prefers-color-scheme: dark) {
+    color: oklch(62.3% 0.214 259.815deg);
+    text-decoration-color: color-mix(in oklab, oklch(62.3% 0.214 259.815deg), transparent 40%);
+  }
+
   @media (hover: hover) {
     &:hover {
-      text-decoration-color: var(--color-blue);
+      text-decoration-color: oklch(42.4% 0.199 265.638deg);
+
+      @media (prefers-color-scheme: dark) {
+        text-decoration-color: oklch(62.3% 0.214 259.815deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    text-decoration-color: var(--color-blue);
+    text-decoration-color: oklch(42.4% 0.199 265.638deg);
+
+    @media (prefers-color-scheme: dark) {
+      text-decoration-color: oklch(62.3% 0.214 259.815deg);
+    }
   }
 
   &:focus-visible {
-    border-radius: 0.125rem;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     text-decoration-line: none;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.tsx
index e162be303cc..c5a05910a09 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.tsx
@@ -92,9 +92,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
           <PreviewCard.Portal>
             <PreviewCard.Positioner sideOffset={8} className={styles.Positioner}>
               <PreviewCard.Popup className={styles.Popup}>
-                <PreviewCard.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </PreviewCard.Arrow>
+                <PreviewCard.Arrow className={styles.Arrow} />
                 <PreviewCard.Viewport className={styles.Viewport}>{payload}</PreviewCard.Viewport>
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
@@ -104,22 +102,3 @@ export default function PreviewCardDetachedTriggersFullDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index 95fca7e3fa0..06f4d4c649d 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,43 +6,43 @@ const demoPreviewCard = PreviewCard.createHandle<React.ReactElement>();
 
 const cardContents = {
   typography: (
-    <div className="w-min box-border flex flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="224"
         height="150"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm text-pretty">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
   ),
   design: (
-    <div className="w-min box-border flex flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="250"
         height="249"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm text-pretty">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
   ),
   art: (
-    <div className="w-min box-border flex flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="250"
         height="290"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm text-pretty">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
@@ -55,10 +55,10 @@ const cardContents = {
 export default function PreviewCardDetachedTriggersFullDemo() {
   return (
     <div>
-      <p className="m-0 text-base leading-6 text-gray-900 text-balance">
+      <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         Discover{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
           payload={cardContents.typography}
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         ,{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Design"
           payload={cardContents.design}
@@ -76,7 +76,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         , or{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Art"
           payload={cardContents.art}
@@ -93,10 +93,8 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
-              <PreviewCard.Popup className="box-border relative w-[var(--popup-width,auto)] h-[var(--popup-height,auto)] rounded-lg bg-[canvas] origin-[var(--transform-origin)] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
-                <PreviewCard.Arrow className="flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-                  <ArrowSvg />
-                </PreviewCard.Arrow>
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
                   {payload}
@@ -109,22 +107,3 @@ export default function PreviewCardDetachedTriggersFullDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/css-modules/index.tsx
index 987374aedb6..24264c02db8 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/css-modules/index.tsx
@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { PreviewCard } from '@base-ui/react/preview-card';
 import styles from '../../index.module.css';
 
@@ -24,9 +23,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
             <PreviewCard.Popup className={styles.Popup}>
-              <PreviewCard.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </PreviewCard.Arrow>
+              <PreviewCard.Arrow className={styles.Arrow} />
               <div className={styles.PopupContent}>
                 <img
                   width="224"
@@ -47,22 +44,3 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 4f4ec6387db..9404bdc631f 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { PreviewCard } from '@base-ui/react/preview-card';
 
 const demoPreviewCard = PreviewCard.createHandle();
@@ -7,10 +6,10 @@ const demoPreviewCard = PreviewCard.createHandle();
 export default function PreviewCardDetachedTriggersSimpleDemo() {
   return (
     <div>
-      <p className="m-0 text-base leading-6 text-gray-900 text-balance">
+      <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
         >
@@ -22,19 +21,17 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="box-border w-[var(--popup-width,auto)] h-[var(--popup-height,auto)] rounded-lg bg-[canvas] origin-[var(--transform-origin)] transition-[scale,opacity] duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
-              <PreviewCard.Arrow className="flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-                <ArrowSvg />
-              </PreviewCard.Arrow>
-              <div className="w-min flex flex-col gap-2 p-2 box-border">
+            <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
+              <div className="flex w-min flex-col gap-2 p-2">
                 <img
                   width="224"
                   height="150"
-                  className="block rounded-xs max-w-none"
+                  className="block max-w-none"
                   src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                   alt="Station Hofplein signage in Rotterdam, Netherlands"
                 />
-                <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+                <p className="m-0 text-sm text-pretty">
                   <strong>Typography</strong> is the art and science of arranging type to make
                   written language clear, visually appealing, and effective in communication.
                 </p>
@@ -46,22 +43,3 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
index cf6103b420a..b54f08fe1e2 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { PreviewCard } from '@base-ui/react/preview-card';
 import styles from '../../index.module.css';
 
@@ -19,9 +18,7 @@ export default function ExamplePreviewCard() {
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
           <PreviewCard.Popup className={styles.Popup}>
-            <PreviewCard.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </PreviewCard.Arrow>
+            <PreviewCard.Arrow className={styles.Arrow} />
             <div className={styles.PopupContent}>
               <img
                 width="224"
@@ -41,22 +38,3 @@ export default function ExamplePreviewCard() {
     </PreviewCard.Root>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index a105ac4c3f1..161361c43ba 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -1,13 +1,12 @@
-import * as React from 'react';
 import { PreviewCard } from '@base-ui/react/preview-card';
 
 export default function ExamplePreviewCard() {
   return (
     <PreviewCard.Root>
-      <p className="m-0 text-base leading-6 text-gray-900 text-balance">
+      <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           href="https://en.wikipedia.org/wiki/Typography"
         >
           typography
@@ -17,19 +16,17 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="box-border w-[var(--popup-width,auto)] h-[var(--popup-height,auto)] rounded-lg bg-[canvas] origin-[var(--transform-origin)] transition-[scale,opacity] duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
-            <PreviewCard.Arrow className="flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </PreviewCard.Arrow>
-            <div className="w-min flex flex-col gap-2 p-2 box-border">
+          <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
+            <div className="flex w-min flex-col gap-2 p-2">
               <img
                 width="224"
                 height="150"
-                className="block rounded-xs max-w-none"
+                className="block max-w-none"
                 src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                 alt="Station Hofplein signage in Rotterdam, Netherlands"
               />
-              <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+              <p className="m-0 text-sm text-pretty">
                 <strong>Typography</strong> is the art and science of arranging type to make written
                 language clear, visually appealing, and effective in communication.
               </p>
@@ -40,22 +37,3 @@ export default function ExamplePreviewCard() {
     </PreviewCard.Root>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index fbf76830234..c7468b139b7 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -6,71 +6,75 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
-  border-radius: 0.5rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    transform: scale(0.98);
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid oklch(14.5% 0 0deg);
+    background-color: white;
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: oklch(14.5% 0 0deg);
+    }
   }
 }
 
@@ -85,7 +89,6 @@
 
 .Image {
   display: block;
-  border-radius: 0.25rem;
   max-width: none;
 }
 
@@ -93,7 +96,6 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
   text-wrap: pretty;
 }
 
@@ -109,32 +111,52 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   text-wrap: balance;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Link {
   outline: 0;
-  color: var(--color-blue);
+  color: oklch(42.4% 0.199 265.638deg);
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(in oklab, var(--color-blue), transparent 40%);
+  text-decoration-color: color-mix(in oklab, oklch(42.4% 0.199 265.638deg), transparent 40%);
   text-underline-offset: 2px;
 
+  @media (prefers-color-scheme: dark) {
+    color: oklch(62.3% 0.214 259.815deg);
+    text-decoration-color: color-mix(in oklab, oklch(62.3% 0.214 259.815deg), transparent 40%);
+  }
+
   @media (hover: hover) {
     &:hover {
-      text-decoration-color: var(--color-blue);
+      text-decoration-color: oklch(42.4% 0.199 265.638deg);
+
+      @media (prefers-color-scheme: dark) {
+        text-decoration-color: oklch(62.3% 0.214 259.815deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    text-decoration-color: var(--color-blue);
+    text-decoration-color: oklch(42.4% 0.199 265.638deg);
+
+    @media (prefers-color-scheme: dark) {
+      text-decoration-color: oklch(62.3% 0.214 259.815deg);
+    }
   }
 
   &:focus-visible {
-    border-radius: 0.125rem;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     text-decoration-line: none;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -150,32 +172,50 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
index 97471a4a18f..fa615f7c3bc 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
@@ -1,38 +1,49 @@
 .Progress {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 0.25rem;
-  grid-row-gap: 0.5rem;
-  width: 12rem;
+  row-gap: 0.5rem;
+  width: 15rem;
+  max-width: 100%;
 }
 
 .Label {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value {
-  grid-column-start: 2;
-  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   text-align: right;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Track {
   grid-column: 1 / 3;
   overflow: hidden;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
   height: 0.25rem;
-  border-radius: 0.25rem;
+  background-color: oklch(92.2% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Indicator {
-  display: block;
-  background-color: var(--color-gray-500);
+  background-color: oklch(14.5% 0 0deg);
   transition: width 500ms;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
index da8cd8a1409..47e22756ecd 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
@@ -14,11 +14,13 @@ export default function ExampleProgress() {
   }, []);
 
   return (
-    <Progress.Root className="grid w-48 grid-cols-2 gap-y-2" value={value}>
-      <Progress.Label className="text-sm font-normal text-gray-900">Export data</Progress.Label>
-      <Progress.Value className="col-start-2 text-right text-sm text-gray-900" />
-      <Progress.Track className="col-span-full h-1 overflow-hidden rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
-        <Progress.Indicator className="block bg-gray-500 transition-all duration-500" />
+    <Progress.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={value}>
+      <Progress.Label className="text-sm font-normal text-neutral-950 dark:text-white">
+        Export data
+      </Progress.Label>
+      <Progress.Value className="text-right text-sm text-neutral-950 dark:text-white" />
+      <Progress.Track className="col-span-2 h-1 overflow-hidden bg-neutral-200 dark:bg-neutral-800">
+        <Progress.Indicator className="bg-neutral-950 transition-[width] duration-500 dark:bg-white" />
       </Progress.Track>
     </Progress.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index 7b1827cb722..95cd10a1ec1 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -3,10 +3,16 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Caption {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -14,34 +20,49 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .Radio {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 100%;
-  outline: 0;
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
-  border: none;
 
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
   &[data-checked] {
-    background-color: var(--color-gray-900);
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -59,6 +80,6 @@
     border-radius: 100%;
     width: 0.5rem;
     height: 0.5rem;
-    background-color: var(--color-gray-50);
+    background-color: currentcolor;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index d2137cd2bf7..60ab9ef79ff 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -9,38 +9,38 @@ export default function ExampleRadioGroup() {
     <RadioGroup
       aria-labelledby={id}
       defaultValue="fuji-apple"
-      className="flex flex-col items-start gap-1 text-gray-900"
+      className="flex flex-col items-start gap-1 text-neutral-950 dark:text-white"
     >
-      <div className="font-bold" id={id}>
+      <div className="text-sm font-bold" id={id}>
         Best apple
       </div>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
-          <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
+          <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="gala-apple"
-          className="flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
-          <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
+          <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Gala
       </label>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
-          <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
+          <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Granny Smith
       </label>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index 03ff5854fb8..c6612c95c52 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -6,18 +6,26 @@
 }
 
 .Viewport {
+  box-sizing: border-box;
   height: 100%;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  outline-offset: -1px;
+  border: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Content {
-  padding: 1.25rem;
+  padding: 0.75rem 1.5rem 1.5rem 0.75rem;
 }
 
 .Grid {
@@ -31,29 +39,31 @@
 }
 
 .Item {
-  border-radius: 0.5rem;
-  background-color: var(--color-gray-100);
+  background-color: oklch(92.2% 0 0deg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Scrollbar {
   display: flex;
   position: relative;
-  background-color: var(--color-gray-200);
-  border-radius: 0.375rem;
-  margin: 0.5rem;
+  background-color: rgb(0 0 0 / 12%);
+  margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
 
-  &::before {
-    content: '';
-    position: absolute;
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
   }
 
   &[data-scrolling] {
@@ -67,33 +77,19 @@
   }
 
   &[data-orientation='vertical'] {
-    width: 0.25rem;
-    margin: 0.5rem;
-
-    &::before {
-      width: 1.25rem;
-      height: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
+    width: 0.5rem;
   }
 
   &[data-orientation='horizontal'] {
-    height: 0.25rem;
-    margin: 0.5rem;
-
-    &::before {
-      width: 100%;
-      height: 1.25rem;
-      left: 0;
-      right: 0;
-      bottom: -0.5rem;
-    }
+    height: 0.5rem;
   }
 }
 
 .Thumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 45f0a0ea45f..9e0d36bd7bd 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -3,13 +3,13 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaBoth() {
   return (
     <ScrollArea.Root className="h-80 w-80 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="h-full rounded-lg border border-gray-200 focus-visible:outline focus-visible:outline-blue-800 focus-visible:outline-offset-2">
-        <ScrollArea.Content className="p-5">
+      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <ScrollArea.Content className="pt-3 pr-6 pb-6 pl-3">
           <ul className="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0">
             {Array.from({ length: 100 }, (_, i) => (
               <li
                 key={i}
-                className="flex items-center justify-center rounded-lg bg-gray-100 text-sm font-bold text-gray-600"
+                className="flex items-center justify-center bg-neutral-200 dark:bg-neutral-800 text-sm font-bold text-neutral-600 dark:text-neutral-400"
               >
                 {i + 1}
               </li>
@@ -17,14 +17,14 @@ export default function ExampleScrollAreaBoth() {
           </ul>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="relative flex rounded-sm bg-gray-200 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:m-2 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:m-2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:-bottom-2 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
-        <ScrollArea.Thumb className="w-full rounded-sm bg-gray-500" />
+      <ScrollArea.Scrollbar className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-[orientation=vertical]:w-2 data-[orientation=horizontal]:h-2 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0">
+        <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Scrollbar
-        className="relative flex rounded-sm bg-gray-200 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:m-2 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:m-2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:-bottom-2 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0"
+        className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-[orientation=vertical]:w-2 data-[orientation=horizontal]:h-2 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
         orientation="horizontal"
       >
-        <ScrollArea.Thumb className="w-full rounded-sm bg-gray-500" />
+        <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Corner />
     </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index 1ec8a7cef13..c691d7d28e1 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -3,16 +3,29 @@
   width: 24rem;
   height: 8.5rem;
   max-width: calc(100vw - 8rem);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+  }
 }
 
 .Viewport {
+  box-sizing: border-box;
   height: 100%;
-  border-radius: 0.375rem;
-  outline: 1px solid var(--color-gray-200);
-  outline-offset: -1px;
+  border: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -20,29 +33,36 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding-block: 0.75rem;
-  padding-left: 1rem;
-  padding-right: 1.5rem;
+  padding-block: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 1.25rem;
 }
 
 .Paragraph {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: var(--color-gray-200);
-  width: 0.25rem;
-  border-radius: 0.375rem;
-  margin: 0.5rem;
+  background-color: rgb(0 0 0 / 12%);
+  width: 0.5rem;
+  margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &[data-scrolling] {
     transition-duration: 0ms;
   }
@@ -52,17 +72,13 @@
     opacity: 1;
     pointer-events: auto;
   }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 1.25rem;
-    height: 100%;
-  }
 }
 
 .Thumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index fe942d464e3..e29f20c42c9 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -2,9 +2,9 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 
 export default function ExampleScrollArea() {
   return (
-    <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="h-full rounded-md outline-1 -outline-offset-1 outline-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800">
-        <div className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900">
+    <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-neutral-950">
+      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -24,10 +24,10 @@ export default function ExampleScrollArea() {
             conscious with contemporary design and construction—part of a broader interest in
             sustainable design.
           </p>
-        </div>
+        </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-2 flex w-1 justify-center rounded-sm bg-gray-200 opacity-0 transition-opacity pointer-events-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
-        <ScrollArea.Thumb className="w-full rounded-sm bg-gray-500" />
+      <ScrollArea.Scrollbar className="m-px flex w-2 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
+        <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index 8caf9e40e5e..162495f4a0e 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -3,15 +3,25 @@
   width: 24rem;
   height: 12rem;
   max-width: calc(100vw - 8rem);
-  background-color: var(--color-gray-50);
-  border-radius: 0.5rem;
+  background-color: oklch(97% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
+
+  &:has(.Viewport:focus-visible) {
+    outline: 2px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Viewport {
   --fade-size: 40px;
   height: 100%;
-  border-radius: 0.375rem;
-  background: var(--color-gray-50);
+  background: oklch(97% 0 0deg);
   mask-image: linear-gradient(
     to bottom,
     transparent 0,
@@ -20,9 +30,10 @@
     transparent 100%
   );
   mask-repeat: no-repeat;
+  outline: none;
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
+  @media (prefers-color-scheme: dark) {
+    background: oklch(26.9% 0 0deg);
   }
 }
 
@@ -30,29 +41,36 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding-block: 0.75rem;
-  padding-left: 1rem;
-  padding-right: 1.5rem;
+  padding-block: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 1.25rem;
 }
 
 .Paragraph {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: var(--color-gray-200);
-  width: 0.25rem;
-  border-radius: 0.375rem;
-  margin: 0.5rem;
+  background-color: rgb(0 0 0 / 8%);
+  width: 0.5rem;
+  margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &[data-scrolling] {
     transition-duration: 0ms;
   }
@@ -62,31 +80,13 @@
     opacity: 1;
     pointer-events: auto;
   }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 1.25rem;
-    height: 100%;
-  }
 }
 
 .Thumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
-}
-
-.ScrollUp {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.15s;
-  pointer-events: none;
+  background-color: oklch(14.5% 0 0deg);
 
-  [data-overflow-y-start] & {
-    opacity: 1;
-    pointer-events: auto;
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index d6cc782b16e..2e79511ebbb 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -2,9 +2,9 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 
 export default function ExampleScrollAreaScrollFade() {
   return (
-    <ScrollArea.Root className="box-border h-48 w-96 max-w-[calc(100vw-8rem)] rounded-lg bg-gray-50">
-      <ScrollArea.Viewport className="h-full rounded-md bg-gray-50 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900">
+    <ScrollArea.Root className="h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 dark:bg-neutral-800 has-[>_:first-child:focus-visible]:outline-2 has-[>_:first-child:focus-visible]:outline-offset-0 has-[>_:first-child:focus-visible]:outline-neutral-950 dark:has-[>_:first-child:focus-visible]:outline-white">
+      <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 outline-none mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat">
+        <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -26,8 +26,8 @@ export default function ExampleScrollAreaScrollFade() {
           </p>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="pointer-events-none m-2 flex w-1 justify-center rounded-sm bg-gray-200 opacity-0 transition-opacity duration-150 data-[hovering]:pointer-events-auto data-[hovering=true]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering=true]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling=true]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling=true]:opacity-100 data-[scrolling]:duration-0 data-[scrolling=true]:duration-0 before:absolute before:h-full before:w-5 before:content-['']">
-        <ScrollArea.Thumb className="w-full rounded-sm bg-gray-500" />
+      <ScrollArea.Scrollbar className="m-px flex w-2 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity duration-150 pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
+        <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 14f36cd7af0..573b6504cff 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -9,12 +9,20 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value[data-placeholder] {
-  opacity: 0.6;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Select {
@@ -23,84 +31,112 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
-  color: var(--color-gray-900);
-  -webkit-user-select: none;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 11rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.SelectIcon {
-  display: flex;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
   outline: none;
-  z-index: 1;
-  -webkit-user-select: none;
+  z-index: 10;
   user-select: none;
 }
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
     transition: none;
-    transform: none;
+    transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -110,69 +146,57 @@
   padding-block: 0.25rem;
   overflow-y: auto;
   max-height: var(--available-height);
-  scroll-padding-block-start: 2.25rem;
+  scroll-padding-block-start: 1.5rem;
   scroll-padding-block-end: 1.5rem;
 }
 
 .Group {
   display: block;
   padding-bottom: 0.125rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
 }
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.25rem calc(0.625rem + 0.75rem + 0.5rem);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-gray-700);
-  background-color: canvas;
-  position: sticky;
-  z-index: 1;
-  top: 0;
+  padding-block: 0.375rem;
+  padding-left: calc(0.625rem + 1rem + 0.5rem);
+  padding-right: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  user-select: none;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Item {
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
-  [data-side='none'] & {
-    font-size: 1rem;
-    padding-right: 3rem;
-  }
-
   &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
-  }
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
 
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 }
 
@@ -180,40 +204,37 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
 
 .Separator {
-  margin-block: 0.5rem;
-  margin-inline: 1rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  margin-block: 0.25rem;
+  margin-inline: 1rem;
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-gray-300);
+    background-color: white;
   }
 }
 
 .ScrollArrow {
   width: 100%;
-  background: canvas;
+  background-color: white;
   z-index: 2;
   text-align: center;
   cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -223,6 +244,8 @@
   }
 
   &[data-direction='up'] {
+    top: 0;
+
     &[data-side='none'] {
       &::before {
         top: -100%;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 698af585bef..a01d1d292fd 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -12,14 +12,16 @@ export default function ExampleSelectGrouped() {
       <Select.Root items={groupedProduce}>
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value} placeholder="Select produce" />
-          <Select.Icon className={styles.SelectIcon}>
-            <ChevronUpDownIcon />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={8}>
+          <Select.Positioner className={styles.Positioner} sideOffset={4}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow} />
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
@@ -30,7 +32,7 @@ export default function ExampleSelectGrouped() {
                       {group.items.map((item) => (
                         <Select.Item key={item.value} value={item.value} className={styles.Item}>
                           <Select.ItemIndicator className={styles.ItemIndicator}>
-                            <CheckIcon className={styles.ItemIndicatorIcon} />
+                            <CheckIcon />
                           </Select.ItemIndicator>
                           <Select.ItemText className={styles.ItemText}>
                             {item.label}
@@ -44,7 +46,9 @@ export default function ExampleSelectGrouped() {
                   </React.Fragment>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow} />
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -53,27 +57,33 @@ export default function ExampleSelectGrouped() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -106,3 +116,33 @@ const groupedProduce = [
     ],
   },
 ];
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 0d3865c809e..7df3167257d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -4,52 +4,59 @@ import { Field } from '@base-ui/react/field';
 
 export default function ExampleSelectGrouped() {
   return (
-    <Field.Root className="flex flex-col gap-1">
+    <Field.Root className="flex flex-col items-start gap-1">
       <Field.Label
-        className="cursor-default text-sm leading-5 font-bold text-gray-900"
+        className="cursor-default text-sm font-bold text-neutral-950 dark:text-white"
         nativeLabel={false}
         render={<div />}
       >
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-10 min-w-44 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 font-normal">
-          <Select.Value className="data-[placeholder]:opacity-60" placeholder="Select produce" />
-          <Select.Icon className="flex">
-            <ChevronUpDownIcon />
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+          <Select.Value
+            className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
+            placeholder="Select produce"
+          />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className="outline-none select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none dark:outline-gray-300">
-              <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-['']" />
-              <Select.List className="relative py-1 scroll-pt-[2.25rem] scroll-pb-6 overflow-y-auto max-h-[var(--available-height)]">
+          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
+              <Select.List className="relative py-1 scroll-pt-6 scroll-pb-6 overflow-y-auto max-h-[var(--available-height)]">
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
-                    <Select.Group className="block pb-0.5">
-                      <Select.GroupLabel className="sticky top-0 z-[1] bg-[canvas] pr-4 pb-1 pl-[1.875rem] pt-2 text-[0.6875rem] font-bold text-[var(--color-gray-700)] uppercase tracking-wider">
+                    <Select.Group className="block pb-0.5 last:pb-0">
+                      <Select.GroupLabel className="py-1.5 pr-4 pl-[2.125rem] text-sm leading-5 text-neutral-500 select-none dark:text-neutral-400">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (
                         <Select.Item
                           key={item.value}
                           value={item.value}
-                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]"
+                          className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                         >
                           <Select.ItemIndicator className="col-start-1">
-                            <CheckIcon className="size-3" />
+                            <CheckIcon />
                           </Select.ItemIndicator>
                           <Select.ItemText className="col-start-2">{item.label}</Select.ItemText>
                         </Select.Item>
                       ))}
                     </Select.Group>
                     {index < groupedProduce.length - 1 ? (
-                      <Select.Separator className="my-2 mx-4 h-px bg-gray-200 dark:bg-gray-300" />
+                      <Select.Separator className="mx-4 my-1 h-px bg-neutral-950 dark:bg-white" />
                     ) : null}
                   </React.Fragment>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[2] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] bottom-0 data-[side=none]:before:bottom-[-100%]" />
+              <Select.ScrollDownArrow className="bottom-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -58,27 +65,33 @@ export default function ExampleSelectGrouped() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -111,3 +124,33 @@ const groupedProduce = [
     ],
   },
 ];
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index f8bc6721da3..28fc1a19661 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -9,12 +9,20 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value[data-placeholder] {
-  opacity: 0.6;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Select {
@@ -23,84 +31,112 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
-  color: var(--color-gray-900);
-  -webkit-user-select: none;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 10rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.SelectIcon {
-  display: flex;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
   outline: none;
-  z-index: 1;
-  -webkit-user-select: none;
+  z-index: 10;
   user-select: none;
 }
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
     transition: none;
-    transform: none;
+    transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -113,86 +149,29 @@
   scroll-padding-block: 1.5rem;
 }
 
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
-}
-
 .Item {
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
-  [data-side='none'] & {
-    font-size: 1rem;
-    padding-right: 3rem;
-  }
-
   &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
-  }
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
 
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 }
 
@@ -200,29 +179,26 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
 
 .ScrollArrow {
   width: 100%;
-  background: canvas;
+  background-color: white;
   z-index: 1;
   text-align: center;
   cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -232,6 +208,8 @@
   }
 
   &[data-direction='up'] {
+    top: 0;
+
     &[data-side='none'] {
       &::before {
         top: -100%;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 3ddb06ae9f3..65e2d7c5f19 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -17,25 +17,29 @@ export default function ExampleSelect() {
         <Select.Label className={styles.Label}>Apple</Select.Label>
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value} placeholder="Select apple" />
-          <Select.Icon className={styles.SelectIcon}>
-            <ChevronUpDownIcon />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={8}>
+          <Select.Positioner className={styles.Positioner} sideOffset={4}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow} />
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {apples.map(({ label, value }) => (
                   <Select.Item key={label} value={value} className={styles.Item}>
                     <Select.ItemIndicator className={styles.ItemIndicator}>
-                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                      <CheckIcon />
                     </Select.ItemIndicator>
                     <Select.ItemText className={styles.ItemText}>{label}</Select.ItemText>
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow} />
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -44,27 +48,63 @@ export default function ExampleSelect() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
-function CheckIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index e0262a2864d..162ae5eb0e5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -11,36 +11,43 @@ const apples = [
 
 export default function ExampleSelect() {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Select.Root items={apples}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-900">
+        <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-10 min-w-40 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 font-normal">
-          <Select.Value className="data-[placeholder]:opacity-60" placeholder="Select apple" />
-          <Select.Icon className="flex">
-            <ChevronUpDownIcon />
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+          <Select.Value
+            className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
+            placeholder="Select apple"
+          />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none dark:outline-gray-300">
-              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-['']" />
+          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]">
                 {apples.map(({ label, value }) => (
                   <Select.Item
                     key={label}
                     value={value}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-hidden select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]"
+                    className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1">
-                      <CheckIcon className="size-3" />
+                      <CheckIcon />
                     </Select.ItemIndicator>
                     <Select.ItemText className="col-start-2">{label}</Select.ItemText>
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] bottom-0 data-[side=none]:before:bottom-[-100%]" />
+              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -49,27 +56,63 @@ export default function ExampleSelect() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
 
-function CheckIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 441180caf71..52a96c444c7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -9,12 +9,20 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value[data-placeholder] {
-  opacity: 0.6;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Select {
@@ -23,84 +31,114 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 14rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-  }
-}
 
-.SelectIcon {
-  display: flex;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
   outline: none;
-  z-index: 1;
+  z-index: 10;
 }
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
   overflow-y: auto;
   max-height: var(--available-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
     transition: none;
     transform: none;
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -108,43 +146,27 @@
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
-  padding-right: 1rem;
+  padding-right: 0.625rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
   user-select: none;
   scroll-margin-block: 0.25rem;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
-  [data-side='none'] & {
-    font-size: 1rem;
-    padding-right: 3rem;
-  }
-
   @media (hover: hover) {
     &[data-highlighted] {
-      z-index: 0;
-      position: relative;
-      color: var(--color-gray-50);
-    }
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
 
-    &[data-highlighted]::before {
-      content: '';
-      z-index: -1;
-      position: absolute;
-      inset-block: 0;
-      inset-inline: 0.25rem;
-      border-radius: 0.25rem;
-      background-color: var(--color-gray-900);
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
     }
   }
 }
@@ -153,50 +175,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
-
-.ScrollArrow {
-  width: 100%;
-  background: canvas;
-  z-index: 1;
-  text-align: center;
-  cursor: default;
-  border-radius: 0.375rem;
-  height: 1rem;
-  font-size: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-  }
-
-  &[data-direction='up'] {
-    top: 0;
-
-    &::before {
-      top: -100%;
-    }
-  }
-
-  &[data-direction='down'] {
-    bottom: 0;
-
-    &::before {
-      bottom: -100%;
-    }
-  }
-}
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index 8b752db7281..5abf68c5b73 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -37,21 +37,21 @@ export default function MultiSelectExample() {
         <Select.Label className={styles.Label}>Languages</Select.Label>
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value}>{renderValue}</Select.Value>
-          <Select.Icon className={styles.SelectIcon}>
-            <ChevronUpDownIcon />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner
             className={styles.Positioner}
-            sideOffset={8}
+            sideOffset={4}
             alignItemWithTrigger={false}
           >
             <Select.Popup className={styles.Popup}>
               {values.map((value) => (
                 <Select.Item key={value} value={value} className={styles.Item}>
                   <Select.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
+                    <CheckIcon />
                   </Select.ItemIndicator>
                   <Select.ItemText className={styles.ItemText}>{languages[value]}</Select.ItemText>
                 </Select.Item>
@@ -64,27 +64,33 @@ export default function MultiSelectExample() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index f4db42a4636..9ebc64c0b04 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -31,32 +31,34 @@ function renderValue(value: Language[]) {
 
 export default function MultiSelectExample() {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Select.Root multiple defaultValue={['javascript', 'typescript']}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-900">
+        <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-10 min-w-[14rem] items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 font-normal">
-          <Select.Value className="data-[placeholder]:opacity-60">{renderValue}</Select.Value>
-          <Select.Icon className="flex">
-            <ChevronUpDownIcon />
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+          <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
+            {renderValue}
+          </Select.Value>
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner
             className="outline-hidden z-10"
-            sideOffset={8}
+            sideOffset={4}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none dark:outline-gray-300">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
                   value={value}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem] [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:content-[''] [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-1 [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-xs [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1]"
+                  className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-2.5 pl-2.5 text-sm outline-hidden select-none scroll-my-1 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                 >
                   <Select.ItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Select.ItemIndicator>
                   <Select.ItemText className="col-start-2">{languages[value]}</Select.ItemText>
                 </Select.Item>
@@ -69,27 +71,33 @@ export default function MultiSelectExample() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index c612b0fe32f..7abbc7d6ec7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -9,46 +9,86 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Select {
   box-sizing: border-box;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  min-height: 2.5rem;
-  padding-block: 0.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  min-height: 2rem;
+  padding-block: 0.375rem;
+  padding-left: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  -webkit-user-select: none;
+  font-size: 0.875rem;
+  line-height: 1;
+  white-space: nowrap;
+  font-weight: 400;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 16rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -60,63 +100,58 @@
 }
 
 .ValuePrimary {
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .ValueSecondary {
-  font-size: 0.825rem;
+  font-size: 0.75rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
-}
+  color: oklch(43.9% 0 0deg);
 
-.SelectIcon {
-  display: flex;
-  align-items: center;
-  align-self: center;
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Positioner {
   outline: none;
-  z-index: 1;
-  -webkit-user-select: none;
+  z-index: 10;
   user-select: none;
 }
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
     transition: none;
-    transform: none;
+    transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -133,47 +168,36 @@
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
+  @media (hover: hover) {
+    &[data-highlighted] {
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
 
-  [data-side='none'] & {
-    font-size: 1rem;
-    padding-right: 3rem;
-  }
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
 
-  &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
+      .ItemDescription {
+        color: oklch(70.8% 0 0deg);
 
-    .ItemDescription {
-      color: currentColor;
+        @media (prefers-color-scheme: dark) {
+          color: oklch(43.9% 0 0deg);
+        }
+      }
     }
   }
-
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
 }
 
 .ItemIndicator {
@@ -186,12 +210,6 @@
   top: 0.4em;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
   display: flex;
@@ -200,29 +218,36 @@
 }
 
 .ItemLabel {
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .ItemDescription {
-  font-size: 0.825rem;
+  font-size: 0.75rem;
   line-height: 1rem;
-  opacity: 0.8;
+  color: oklch(43.9% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .ScrollArrow {
   width: 100%;
-  background: canvas;
+  background-color: white;
   z-index: 1;
   text-align: center;
   cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -232,6 +257,8 @@
   }
 
   &[data-direction='up'] {
+    top: 0;
+
     &[data-side='none'] {
       &::before {
         top: -100%;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index e77553f0860..558aea54e93 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -19,19 +19,21 @@ export default function ObjectValueSelect() {
               </span>
             )}
           </Select.Value>
-          <Select.Icon className={styles.SelectIcon}>
-            <ChevronUpDownIcon />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={8}>
+          <Select.Positioner className={styles.Positioner} sideOffset={4}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow} />
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {shippingMethods.map((method) => (
                   <Select.Item key={method.id} value={method} className={styles.Item}>
                     <Select.ItemIndicator className={styles.ItemIndicator}>
-                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                      <CheckIcon />
                     </Select.ItemIndicator>
                     <Select.ItemText className={styles.ItemText}>
                       <span className={styles.ItemLabel}>{method.name}</span>
@@ -42,7 +44,9 @@ export default function ObjectValueSelect() {
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow} />
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -51,27 +55,33 @@ export default function ObjectValueSelect() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -103,3 +113,33 @@ const shippingMethods: ShippingMethod[] = [
     price: '$19.99',
   },
 ];
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index ae1828f07ae..b4ce9340133 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -4,50 +4,54 @@ import { Select } from '@base-ui/react/select';
 
 export default function ObjectValueSelect() {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Select.Root defaultValue={shippingMethods[0]} itemToStringValue={(item) => item.id}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-900">
+        <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-10 min-w-[16rem] items-start justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 py-2 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-center justify-between gap-3 pl-2 pr-1 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
-                <span className="text-base leading-6">{method.name}</span>
-                <span className="text-xs leading-4 text-gray-600">
+                <span className="text-sm">{method.name}</span>
+                <span className="text-xs text-neutral-600 dark:text-neutral-400">
                   {method.duration} ({method.price})
                 </span>
               </span>
             )}
           </Select.Value>
-          <Select.Icon className="flex items-center self-center">
-            <ChevronUpDownIcon />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style] :transition-none dark:shadow-none dark:outline-gray-300">
-              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-['']" />
+          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]">
                 {shippingMethods.map((method) => (
                   <Select.Item
                     key={method.id}
                     value={method}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-2.5 pr-4 pl-2.5 text-sm leading-4 outline-hidden select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-5 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem] [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:content-[''] [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-1 [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-xs [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1]"
+                    className="group/item grid cursor-default grid-cols-[1rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                   >
-                    <Select.ItemIndicator className="col-start-1 flex items-center self-start relative top-[0.4em]">
-                      <CheckIcon className="size-3" />
+                    <Select.ItemIndicator className="col-start-1 flex items-center justify-center self-start relative top-[0.4em]">
+                      <CheckIcon />
                     </Select.ItemIndicator>
-                    <Select.ItemText className="col-start-2 flex flex-col items-start gap-0.5">
-                      <span className="text-base leading-6">{method.name}</span>
-                      <span className="text-xs leading-4 opacity-80">
+                    <Select.ItemText className="col-start-2 flex flex-col gap-0.5">
+                      <span className="text-sm">{method.name}</span>
+                      <span className="text-xs text-neutral-600 [@media(hover:hover)]:group-data-highlighted/item:text-neutral-400 dark:text-neutral-400 dark:[@media(hover:hover)]:group-data-highlighted/item:text-neutral-600">
                         {method.duration} ({method.price})
                       </span>
                     </Select.ItemText>
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] bottom-0 data-[side=none]:before:bottom-[-100%]" />
+              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -56,27 +60,33 @@ export default function ObjectValueSelect() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -108,3 +118,33 @@ const shippingMethods: ShippingMethod[] = [
     price: '$19.99',
   },
 ];
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
index 2629a879a7b..9847e66f20d 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
@@ -6,18 +6,27 @@
 
 .Separator {
   width: 1px;
-  background-color: var(--color-gray-300);
+  background-color: oklch(87% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(37.1% 0 0deg);
+  }
 }
 
 .Link {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
-  text-decoration-color: var(--color-gray-400);
+  color: oklch(14.5% 0 0deg);
+  text-decoration-color: oklch(87% 0 0deg);
   text-decoration-thickness: 1px;
   text-decoration-line: none;
   text-underline-offset: 2px;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+    text-decoration-color: oklch(37.1% 0 0deg);
+  }
+
   @media (hover: hover) {
     &:hover {
       text-decoration-line: underline;
@@ -25,8 +34,12 @@
   }
 
   &:focus-visible {
-    border-radius: 0.125rem;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
     text-decoration-line: none;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
index 88bac689d39..7b68dbaf468 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
@@ -5,40 +5,40 @@ export default function ExampleSeparator() {
     <div className="flex gap-4 text-nowrap">
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Home
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Pricing
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Blog
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Support
       </a>
 
-      <Separator orientation="vertical" className="w-px bg-gray-300" />
+      <Separator orientation="vertical" className="w-px bg-neutral-300 dark:bg-neutral-700" />
 
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Log in
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Sign up
       </a>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
index ae9aa629dee..034f08297a8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
@@ -11,27 +11,42 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  border-radius: 0.25rem;
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  outline: 1px solid var(--color-gray-300);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
index 3d4351277ef..19dc17339c3 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
@@ -4,9 +4,9 @@ export default function EdgeAlignedThumb() {
   return (
     <Slider.Root thumbAlignment="edge" defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
-          <Slider.Indicator className="rounded-sm bg-gray-700 select-none" />
-          <Slider.Thumb className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
+        <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+          <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
+          <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
index ae9aa629dee..034f08297a8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -11,27 +11,42 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  border-radius: 0.25rem;
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  outline: 1px solid var(--color-gray-300);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
index aa7db73bf0b..fe597859db3 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -4,11 +4,11 @@ export default function ExampleSlider() {
   return (
     <Slider.Root defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
-          <Slider.Indicator className="rounded-sm bg-gray-700 select-none" />
+        <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+          <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
index ae9aa629dee..034f08297a8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
@@ -11,27 +11,42 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  border-radius: 0.25rem;
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  outline: 1px solid var(--color-gray-300);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
index a6302490890..1b684376880 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
@@ -4,17 +4,17 @@ export default function RangeSlider() {
   return (
     <Slider.Root defaultValue={[25, 45]}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
-          <Slider.Indicator className="rounded-sm bg-gray-700 select-none" />
+        <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+          <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             index={0}
             aria-label="Minimum value"
-            className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
           />
           <Slider.Thumb
             index={1}
             aria-label="Maximum value"
-            className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
index 117746a3cf9..208b0c92ddc 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
@@ -11,11 +11,13 @@
 }
 
 .Track {
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  border-radius: 0.25rem;
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
+
   &[data-orientation='vertical'] {
     height: 100%;
     width: 0.25rem;
@@ -23,20 +25,33 @@
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  outline: 1px solid var(--color-gray-300);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
index afabb86cc1b..3c6125064b6 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
@@ -4,11 +4,11 @@ export default function VerticalSlider() {
   return (
     <Slider.Root orientation="vertical" defaultValue={35}>
       <Slider.Control className="flex touch-none select-none data-[orientation=vertical]:h-32 data-[orientation=vertical]:px-3">
-        <Slider.Track className="rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1">
-          <Slider.Indicator className="rounded-sm bg-gray-700 select-none" />
+        <Slider.Track className="bg-neutral-200 select-none dark:bg-neutral-800 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1">
+          <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index c9ddd8f7f5b..1df0bb0ff8c 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -2,98 +2,68 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Switch {
   box-sizing: border-box;
-  position: relative;
   display: flex;
-  appearance: none;
-  border: 0;
-  margin: 0;
-  padding: 1px;
-  width: 2.5rem;
-  height: 1.5rem;
-  border-radius: 1.5rem;
-  outline: 1px solid;
-  outline-offset: -1px;
-  background-color: transparent;
-  background-image: linear-gradient(to right, var(--color-gray-700) 35%, var(--color-gray-200) 65%);
-  background-size: 6.5rem 100%;
-  background-position-x: 100%;
-  background-repeat: no-repeat;
-  transition-property: background-position, box-shadow;
-  transition-timing-function: cubic-bezier(0.26, 0.75, 0.38, 0.45);
-  transition-duration: 125ms;
+  flex-shrink: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  padding: 0.125rem;
+  width: 2.25rem;
+  height: 1.25rem;
+  background-color: white;
+  transition: background-color 150ms ease;
 
-  &:active {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &[data-checked] {
-    background-position-x: 0%;
-  }
-
-  &[data-checked]:active {
-    background-color: var(--color-gray-500);
-  }
-
-  @media (prefers-color-scheme: light) {
-    box-shadow: var(--color-gray-200) 0 1.5px 2px inset;
-    outline-color: var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: rgb(0 0 0 / 75%) 0 1.5px 2px inset;
-    outline-color: rgb(255 255 255 / 15%);
-    background-image: linear-gradient(
-      to right,
-      var(--color-gray-500) 35%,
-      var(--color-gray-200) 65%
-    );
+    background-color: oklch(14.5% 0 0deg);
 
-    &[data-checked] {
-      box-shadow: none;
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
     }
   }
 
   &:focus-visible {
-    &::before {
-      content: '';
-      inset: 0;
-      position: absolute;
-      border-radius: inherit;
-      outline: 2px solid var(--color-blue);
-      outline-offset: 2px;
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
     }
   }
 }
 
 .Thumb {
-  aspect-ratio: 1 / 1;
-  height: 100%;
-  border-radius: 100%;
-  background-color: white;
-  transition: translate 150ms ease;
+  width: 0.875rem;
+  height: 0.875rem;
+  background-color: oklch(14.5% 0 0deg);
+  transition:
+    translate 150ms ease,
+    background-color 150ms ease;
 
-  &[data-checked] {
-    translate: 1rem 0;
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
   }
 
-  @media (prefers-color-scheme: light) {
-    box-shadow:
-      0 0 1px 1px var(--color-gray-100),
-      0 1px 1px var(--color-gray-100),
-      1px 2px 4px -1px var(--color-gray-100);
-  }
+  &[data-checked] {
+    translate: 1rem 0;
+    background-color: white;
 
-  @media (prefers-color-scheme: dark) {
-    box-shadow:
-      0 0 1px 1px rgb(0 0 0 / 25%),
-      0 1px 1px rgb(0 0 0 / 25%),
-      1px 2px 4px -1px rgb(0 0 0 / 25%);
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(14.5% 0 0deg);
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index 082a68f2999..7b4f0f59866 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -2,12 +2,12 @@ import { Switch } from '@base-ui/react/switch';
 
 export default function ExampleSwitch() {
   return (
-    <label className="flex items-center gap-2 text-base text-gray-900">
+    <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
       <Switch.Root
         defaultChecked
-        className="relative flex h-6 w-10 rounded-full bg-gradient-to-r from-gray-700 from-35% to-gray-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-gray-200 outline-1 -outline-offset-1 outline-gray-200 transition-[background-position,box-shadow] duration-[125ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full before:outline-offset-2 before:outline-blue-800 focus-visible:before:inset-0 focus-visible:before:outline focus-visible:before:outline-2 active:bg-gray-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-gray-500 dark:from-gray-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none"
+        className="flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 transition-colors duration-150 dark:border-white dark:bg-neutral-950 data-checked:bg-neutral-950 dark:data-checked:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <Switch.Thumb className="aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-gray-100 transition-transform duration-150 data-[checked]:translate-x-4 dark:shadow-black/25" />
+        <Switch.Thumb className="size-3.5 bg-neutral-950 transition-transform transition-colors duration-150 data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950" />
       </Switch.Root>
       Notifications
     </label>
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 9ca749e347c..7ee61077b6a 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -1,18 +1,19 @@
-.Tabs {
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
+.Root {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 20rem;
 }
 
 .List {
   display: flex;
   position: relative;
-  z-index: 0;
-  padding-inline: 0.25rem;
+  z-index: 1;
   gap: 0.25rem;
-  box-shadow: inset 0 -1px var(--color-gray-200);
+  margin-bottom: -1px;
 }
 
 .Tab {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -20,8 +21,7 @@
   margin: 0;
   outline: 0;
   background: none;
-  appearance: none;
-  color: var(--color-gray-600);
+  color: oklch(43.9% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -31,59 +31,107 @@
   word-break: keep-all;
   padding-inline: 0.5rem;
   padding-block: 0;
-  height: 2rem;
+  height: calc(2rem + 1px);
 
-  &[data-active] {
-    color: var(--color-gray-900);
+  @media (prefers-color-scheme: dark) {
+    color: oklch(87% 0 0deg);
   }
 
   @media (hover: hover) {
     &:hover {
-      color: var(--color-gray-900);
+      color: oklch(14.5% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
+    }
+  }
+
+  &[data-active] {
+    color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
     }
   }
 
   &:focus-visible {
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0.25rem 0;
-      border-radius: 0.25rem;
-      outline: 2px solid var(--color-blue);
-      outline-offset: -1px;
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
     }
   }
 }
 
 .Indicator {
+  box-sizing: border-box;
   position: absolute;
   z-index: -1;
   left: 0;
-  top: 50%;
-  translate: var(--active-tab-left) -50%;
+  top: 0;
+  translate: var(--active-tab-left);
   width: var(--active-tab-width);
-  height: 1.5rem;
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-100);
+  height: 100%;
   transition-property: translate, width;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
   transition-timing-function: ease-in-out;
+  border-top: 1px solid oklch(14.5% 0 0deg);
+  border-inline: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    border-inline: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
+}
+
+.PanelViewport {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  width: 100%;
+  min-height: 8rem;
+  border-inline: 1px solid oklch(14.5% 0 0deg);
+  border-block: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border-inline: 1px solid white;
+    border-block: 1px solid white;
+  }
 }
 
 .Panel {
-  position: relative;
+  box-sizing: border-box;
+  grid-area: 1 / 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 8rem;
+  width: 100%;
+  padding: 1rem;
+
   outline: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: center;
+  color: oklch(14.5% 0 0deg);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
-    border-radius: 0.375rem;
+    z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &[hidden] {
@@ -91,8 +139,6 @@
   }
 }
 
-.Icon {
-  width: 2.5rem;
-  height: 2.5rem;
-  color: var(--color-gray-300);
+.Paragraph {
+  margin: 0;
 }
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
index bad90074430..1f38a3adf5d 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { Tabs } from '@base-ui/react/tabs';
 import styles from './index.module.css';
 
 export default function ExampleTabs() {
   return (
-    <Tabs.Root className={styles.Tabs} defaultValue="overview">
+    <Tabs.Root className={styles.Root} defaultValue="overview">
       <Tabs.List className={styles.List}>
         <Tabs.Tab className={styles.Tab} value="overview">
           Overview
@@ -17,39 +16,17 @@ export default function ExampleTabs() {
         </Tabs.Tab>
         <Tabs.Indicator className={styles.Indicator} />
       </Tabs.List>
-      <Tabs.Panel className={styles.Panel} value="overview">
-        <OverviewIcon className={styles.Icon} />
-      </Tabs.Panel>
-      <Tabs.Panel className={styles.Panel} value="projects">
-        <ProjectIcon className={styles.Icon} />
-      </Tabs.Panel>
-      <Tabs.Panel className={styles.Panel} value="account">
-        <PersonIcon className={styles.Icon} />
-      </Tabs.Panel>
+      <div className={styles.PanelViewport}>
+        <Tabs.Panel className={styles.Panel} value="overview">
+          <p className={styles.Paragraph}>Workspace stats and activity.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className={styles.Panel} value="projects">
+          <p className={styles.Paragraph}>Milestones and deadlines.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className={styles.Panel} value="account">
+          <p className={styles.Paragraph}>Profile and preferences.</p>
+        </Tabs.Panel>
+      </div>
     </Tabs.Root>
   );
 }
-
-function OverviewIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M 6 4 C 4.895 4 4 4.895 4 6 L 4 12 C 4 13.105 4.895 14 6 14 L 12 14 C 13.105 14 14 13.105 14 12 L 14 6 C 14 4.895 13.105 4 12 4 L 6 4 z M 18 4 C 16.895 4 16 4.895 16 6 L 16 12 C 16 13.105 16.895 14 18 14 L 24 14 C 25.105 14 26 13.105 26 12 L 26 6 C 26 4.895 25.105 4 24 4 L 18 4 z M 9 6 C 10.657 6 12 7.343 12 9 C 12 10.657 10.657 12 9 12 C 7.343 12 6 10.657 6 9 C 6 7.343 7.343 6 9 6 z M 18 6 L 24 6 L 24 12 L 18 12 L 18 6 z M 6 16 C 4.895 16 4 16.895 4 18 L 4 24 C 4 25.105 4.895 26 6 26 L 12 26 C 13.105 26 14 25.105 14 24 L 14 18 C 14 16.895 13.105 16 12 16 L 6 16 z M 18 16 C 16.895 16 16 16.895 16 18 L 16 24 C 16 25.105 16.895 26 18 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 18 C 26 16.895 25.105 16 24 16 L 18 16 z M 21 17.5 L 24.5 21 L 21 24.5 L 17.5 21 L 21 17.5 z M 9 18 L 11.886719 23 L 6.1132812 23 L 9 18 z" />
-    </svg>
-  );
-}
-
-function ProjectIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M 14.984375 1.9863281 A 1.0001 1.0001 0 0 0 14 3 L 14 4 L 5 4 L 4 4 A 1.0001 1.0001 0 1 0 3.9804688 6 C 3.9348612 9.0608831 3.6893807 11.887023 3.1523438 14.142578 C 2.5565033 16.645108 1.6039585 18.395538 0.4453125 19.167969 A 1.0001 1.0001 0 0 0 1 21 L 4 21 C 4 22.105 4.895 23 6 23 L 11.787109 23 L 10.148438 26.042969 A 1.5 1.5 0 0 0 9 27.5 A 1.5 1.5 0 0 0 10.5 29 A 1.5 1.5 0 0 0 12 27.5 A 1.5 1.5 0 0 0 11.910156 26.992188 L 14.060547 23 L 15.939453 23 L 18.089844 26.992188 A 1.5 1.5 0 0 0 18 27.5 A 1.5 1.5 0 0 0 19.5 29 A 1.5 1.5 0 0 0 21 27.5 A 1.5 1.5 0 0 0 19.851562 26.042969 L 18.212891 23 L 24 23 C 25.105 23 26 22.105 26 21 L 26 6 A 1.0001 1.0001 0 1 0 26 4 L 25 4 L 16 4 L 16 3 A 1.0001 1.0001 0 0 0 14.984375 1.9863281 z M 5.9589844 6 L 14.832031 6 A 1.0001 1.0001 0 0 0 15.158203 6 L 23.958984 6 C 23.912194 9.0500505 23.687726 11.893974 23.152344 14.142578 C 22.583328 16.532444 21.674397 18.178754 20.585938 19 L 3.1523438 19 C 3.9976592 17.786874 4.6791735 16.365049 5.0976562 14.607422 C 5.6877248 12.129135 5.9137751 9.1554725 5.9589844 6 z" />
-    </svg>
-  );
-}
-
-function PersonIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M8,22.141 c1.167-3.5,4.667-2.134,5.25-4.03v-1.264c-0.262-0.141-1.013-1.109-1.092-1.865c-0.207-0.018-0.531-0.223-0.627-1.034 c-0.051-0.435,0.153-0.68,0.276-0.757c0,0-0.308-0.702-0.308-1.399C11.5,9.72,12.526,8,15,8c1.336,0,1.75,0.947,1.75,0.947 c1.194,0,1.75,1.309,1.75,2.844c0,0.765-0.308,1.399-0.308,1.399c0.124,0.077,0.328,0.322,0.277,0.757 c-0.096,0.811-0.42,1.016-0.627,1.034c-0.079,0.756-0.829,1.724-1.092,1.865v1.264c0.583,1.897,4.083,0.531,5.25,4.031 c0,0-2.618,2.859-7,2.859C10.593,25,8,22.141,8,22.141z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index fcb17b01be0..9989b63060c 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -1,72 +1,37 @@
-import * as React from 'react';
 import { Tabs } from '@base-ui/react/tabs';
 
+const tabClassName =
+  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';
+
+const panelClassName =
+  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
+
 export default function ExampleTabs() {
   return (
-    <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-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-hidden select-none before:inset-x-0 before:inset-y-1 before:rounded-xs before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[active]:text-gray-900"
-          value="overview"
-        >
+    <Tabs.Root className="w-full max-w-xs" defaultValue="overview">
+      <Tabs.List className="relative z-1 -mb-px flex gap-1">
+        <Tabs.Tab className={tabClassName} value="overview">
           Overview
         </Tabs.Tab>
-        <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-hidden select-none before:inset-x-0 before:inset-y-1 before:rounded-xs before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[active]:text-gray-900"
-          value="projects"
-        >
+        <Tabs.Tab className={tabClassName} value="projects">
           Projects
         </Tabs.Tab>
-        <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-hidden select-none before:inset-x-0 before:inset-y-1 before:rounded-xs before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[active]:text-gray-900"
-          value="account"
-        >
+        <Tabs.Tab className={tabClassName} value="account">
           Account
         </Tabs.Tab>
-        <Tabs.Indicator className="absolute top-1/2 left-0 z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-1/2 rounded-xs bg-gray-100 transition-all duration-200 ease-in-out" />
+        <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-neutral-950 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-neutral-950" />
       </Tabs.List>
-      <Tabs.Panel
-        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline-2"
-        value="overview"
-      >
-        <OverviewIcon className="size-10 text-gray-300" />
-      </Tabs.Panel>
-      <Tabs.Panel
-        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline-2"
-        value="projects"
-      >
-        <ProjectIcon className="size-10 text-gray-300" />
-      </Tabs.Panel>
-      <Tabs.Panel
-        className="relative flex h-32 items-center justify-center -outline-offset-1 outline-blue-800 focus-visible:rounded-md focus-visible:outline-2"
-        value="account"
-      >
-        <PersonIcon className="size-10 text-gray-300" />
-      </Tabs.Panel>
+      <div className="grid w-full min-h-32 grid-cols-1 border border-neutral-950 dark:border-white">
+        <Tabs.Panel className={panelClassName} value="overview">
+          <p>Workspace stats and activity.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className={panelClassName} value="projects">
+          <p>Milestones and deadlines.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className={panelClassName} value="account">
+          <p>Profile and preferences.</p>
+        </Tabs.Panel>
+      </div>
     </Tabs.Root>
   );
 }
-
-function OverviewIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M 6 4 C 4.895 4 4 4.895 4 6 L 4 12 C 4 13.105 4.895 14 6 14 L 12 14 C 13.105 14 14 13.105 14 12 L 14 6 C 14 4.895 13.105 4 12 4 L 6 4 z M 18 4 C 16.895 4 16 4.895 16 6 L 16 12 C 16 13.105 16.895 14 18 14 L 24 14 C 25.105 14 26 13.105 26 12 L 26 6 C 26 4.895 25.105 4 24 4 L 18 4 z M 9 6 C 10.657 6 12 7.343 12 9 C 12 10.657 10.657 12 9 12 C 7.343 12 6 10.657 6 9 C 6 7.343 7.343 6 9 6 z M 18 6 L 24 6 L 24 12 L 18 12 L 18 6 z M 6 16 C 4.895 16 4 16.895 4 18 L 4 24 C 4 25.105 4.895 26 6 26 L 12 26 C 13.105 26 14 25.105 14 24 L 14 18 C 14 16.895 13.105 16 12 16 L 6 16 z M 18 16 C 16.895 16 16 16.895 16 18 L 16 24 C 16 25.105 16.895 26 18 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 18 C 26 16.895 25.105 16 24 16 L 18 16 z M 21 17.5 L 24.5 21 L 21 24.5 L 17.5 21 L 21 17.5 z M 9 18 L 11.886719 23 L 6.1132812 23 L 9 18 z" />
-    </svg>
-  );
-}
-
-function ProjectIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M 14.984375 1.9863281 A 1.0001 1.0001 0 0 0 14 3 L 14 4 L 5 4 L 4 4 A 1.0001 1.0001 0 1 0 3.9804688 6 C 3.9348612 9.0608831 3.6893807 11.887023 3.1523438 14.142578 C 2.5565033 16.645108 1.6039585 18.395538 0.4453125 19.167969 A 1.0001 1.0001 0 0 0 1 21 L 4 21 C 4 22.105 4.895 23 6 23 L 11.787109 23 L 10.148438 26.042969 A 1.5 1.5 0 0 0 9 27.5 A 1.5 1.5 0 0 0 10.5 29 A 1.5 1.5 0 0 0 12 27.5 A 1.5 1.5 0 0 0 11.910156 26.992188 L 14.060547 23 L 15.939453 23 L 18.089844 26.992188 A 1.5 1.5 0 0 0 18 27.5 A 1.5 1.5 0 0 0 19.5 29 A 1.5 1.5 0 0 0 21 27.5 A 1.5 1.5 0 0 0 19.851562 26.042969 L 18.212891 23 L 24 23 C 25.105 23 26 22.105 26 21 L 26 6 A 1.0001 1.0001 0 1 0 26 4 L 25 4 L 16 4 L 16 3 A 1.0001 1.0001 0 0 0 14.984375 1.9863281 z M 5.9589844 6 L 14.832031 6 A 1.0001 1.0001 0 0 0 15.158203 6 L 23.958984 6 C 23.912194 9.0500505 23.687726 11.893974 23.152344 14.142578 C 22.583328 16.532444 21.674397 18.178754 20.585938 19 L 3.1523438 19 C 3.9976592 17.786874 4.6791735 16.365049 5.0976562 14.607422 C 5.6877248 12.129135 5.9137751 9.1554725 5.9589844 6 z" />
-    </svg>
-  );
-}
-
-function PersonIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M8,22.141 c1.167-3.5,4.667-2.134,5.25-4.03v-1.264c-0.262-0.141-1.013-1.109-1.092-1.865c-0.207-0.018-0.531-0.223-0.627-1.034 c-0.051-0.435,0.153-0.68,0.276-0.757c0,0-0.308-0.702-0.308-1.399C11.5,9.72,12.526,8,15,8c1.336,0,1.75,0.947,1.75,0.947 c1.194,0,1.75,1.309,1.75,2.844c0,0.765-0.308,1.399-0.308,1.399c0.124,0.077,0.328,0.322,0.277,0.757 c-0.096,0.811-0.42,1.016-0.627,1.034c-0.079,0.756-0.829,1.724-1.092,1.865v1.264c0.583,1.897,4.083,0.531,5.25,4.031 c0,0-2.618,2.859-7,2.859C10.593,25,8,22.141,8,22.141z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 7d98e06ad3c..a09ecfcd702 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -1,77 +1,3 @@
-.ButtonGroup {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
-.CopyButton {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .AnchoredViewport {
   outline: 0;
 }
@@ -82,44 +8,45 @@
 
 .AnchoredToast {
   box-sizing: border-box;
+  position: relative;
   font-size: 0.875rem;
   line-height: 1.25rem;
   display: flex;
   flex-direction: column;
   width: max-content;
   padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    scale 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    scale: 0.98;
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-
-    &:focus-visible {
-      outline: 1px solid var(--color-blue-800);
-      outline-offset: -1px;
-    }
+  &[data-instant] {
+    transition: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
-    &:focus-visible {
-      outline: 1px solid var(--color-blue-400);
-      outline-offset: -1px;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
     }
   }
 }
@@ -127,7 +54,7 @@
 .StackedViewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -137,7 +64,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -155,19 +82,15 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -185,6 +108,13 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -227,8 +157,14 @@
 }
 
 .Content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -239,120 +175,280 @@
   }
 }
 
+.Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
-}
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Tooltip {
   box-sizing: border-box;
+  position: relative;
   font-size: 0.875rem;
   line-height: 1.25rem;
   display: flex;
   flex-direction: column;
   padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    scale 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    scale: 0.98;
   }
 
   &[data-instant] {
-    transition-duration: 0ms;
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transition: none;
   }
+}
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
+.AnchoredDescription {
+  margin: 0;
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid oklch(14.5% 0 0deg);
+    background-color: white;
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: oklch(14.5% 0 0deg);
+    }
+  }
 }
 
-.ArrowFill {
-  fill: canvas;
+.ButtonGroup {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
 }
 
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.ArrowInnerStroke {
+.CopyButton {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
-}
 
-.Viewport {
-  outline: 0;
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index 0951c02ec3c..c26f40d11d0 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -51,7 +51,7 @@ function CopyButton() {
       description: 'Copied',
       positionerProps: {
         anchor: buttonRef.current,
-        sideOffset: 8,
+        sideOffset: 10,
       },
       timeout: 1500,
       onClose() {
@@ -70,14 +70,12 @@ function CopyButton() {
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
       >
-        {copied ? <CheckIcon className={styles.Icon} /> : <ClipboardIcon className={styles.Icon} />}
+        {copied ? <CheckIcon /> : <ClipboardIcon />}
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Positioner sideOffset={8}>
+        <Tooltip.Positioner sideOffset={10}>
           <Tooltip.Popup className={styles.Tooltip}>
-            <Tooltip.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Tooltip.Arrow>
+            <Tooltip.Arrow className={styles.Arrow} />
             Copy
           </Tooltip.Popup>
         </Tooltip.Positioner>
@@ -94,11 +92,9 @@ function AnchoredToasts() {
         {toasts.map((toast) => (
           <Toast.Positioner key={toast.id} toast={toast} className={styles.AnchoredPositioner}>
             <Toast.Root toast={toast} className={styles.AnchoredToast}>
-              <Toast.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Toast.Arrow>
+              <Toast.Arrow className={styles.Arrow} />
               <Toast.Content>
-                <Toast.Description />
+                <Toast.Description className={styles.AnchoredDescription} />
               </Toast.Content>
             </Toast.Root>
           </Toast.Positioner>
@@ -116,11 +112,11 @@ function StackedToasts() {
         {toasts.map((toast) => (
           <Toast.Root key={toast.id} toast={toast} className={styles.StackedToast}>
             <Toast.Content className={styles.Content}>
-              <Toast.Title className={styles.Title} />
-              <Toast.Description className={styles.Description} />
-              <Toast.Close className={styles.Close} aria-label="Close">
-                <XIcon className={styles.Icon} />
-              </Toast.Close>
+              <div className={styles.Text}>
+                <Toast.Title className={styles.Title} />
+                <Toast.Description className={styles.Description} />
+              </div>
+              <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
             </Toast.Content>
           </Toast.Root>
         ))}
@@ -129,37 +125,17 @@ function StackedToasts() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function ClipboardIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
+      width="16"
+      height="16"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1.5"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
       <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
@@ -170,36 +146,15 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M20 6 9 17l-5-5" />
-    </svg>
-  );
-}
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 55c78381601..49941966a96 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -35,7 +35,7 @@ function StackedToastButton() {
   return (
     <button
       type="button"
-      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Stacked toast
@@ -54,7 +54,7 @@ function CopyButton() {
       description: 'Copied',
       positionerProps: {
         anchor: buttonRef.current,
-        sideOffset: 8,
+        sideOffset: 10,
       },
       timeout: 1500,
       onClose() {
@@ -68,19 +68,17 @@ function CopyButton() {
       <Tooltip.Trigger
         ref={buttonRef}
         closeOnClick={false}
-        className="box-border flex h-10 w-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
+        className="flex h-8 w-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         onClick={handleCopy}
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
       >
-        {copied ? <CheckIcon className="h-5 w-5" /> : <ClipboardIcon className="h-5 w-5" />}
+        {copied ? <CheckIcon /> : <ClipboardIcon />}
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Positioner sideOffset={8}>
-          <Tooltip.Popup className="flex origin-(--transform-origin) flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:scale-90 data-starting-style:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Tooltip.Arrow className="data-[side=bottom]:-top-2 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-2 data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Tooltip.Arrow>
+        <Tooltip.Positioner sideOffset={10}>
+          <Tooltip.Popup className="relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Tooltip.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             Copy
           </Tooltip.Popup>
         </Tooltip.Positioner>
@@ -102,11 +100,9 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="group flex w-max origin-(--transform-origin) flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 dark:focus-visible:outline-blue-400"
+              className="relative flex flex-col w-max border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             >
-              <Toast.Arrow className="data-[side=bottom]:-top-2 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-2 data-[side=top]:rotate-180">
-                <ArrowSvg />
-              </Toast.Arrow>
+              <Toast.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Toast.Content>
                 <Toast.Description />
               </Toast.Content>
@@ -122,21 +118,20 @@ function StackedToasts() {
   const { toasts } = Toast.useToastManager();
   return (
     <Toast.Portal>
-      <Toast.Viewport className="fixed z-10 top-auto right-[1rem] bottom-[1rem] mx-auto flex w-[250px] sm:right-[2rem] sm:bottom-[2rem] sm:w-[300px]">
+      <Toast.Viewport className="fixed top-auto right-[1rem] bottom-[1rem] z-1 mx-auto w-[calc(100vw-2rem)] sm:right-[2rem] sm:bottom-[2rem] sm:w-[22.5rem]">
         {toasts.map((toast) => (
           <Toast.Root
             key={toast.id}
             toast={toast}
-            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
           >
-            <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100">
-              <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-              <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
-              <Toast.Close
-                className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-sm border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-                aria-label="Close"
-              >
-                <XIcon className="h-4 w-4" />
+            <Toast.Content className="flex h-full items-center gap-4 p-3 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                <Toast.Title className="text-sm font-bold" />
+                <Toast.Description className="text-sm" />
+              </div>
+              <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                Dismiss
               </Toast.Close>
             </Toast.Content>
           </Toast.Root>
@@ -146,37 +141,17 @@ function StackedToasts() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 function ClipboardIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
+      width="16"
+      height="16"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1.5"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
       <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
@@ -187,36 +162,15 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M20 6 9 17l-5-5" />
-    </svg>
-  );
-}
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 40093ee45e0..4f301bd6cfb 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,19 +29,15 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -94,6 +55,13 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -133,9 +101,24 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
@@ -148,39 +131,139 @@
   }
 }
 
+.Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.tsx
index d21535028ba..9408cc9f98c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.tsx
@@ -52,37 +52,18 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
-        {isCustomToast(toast) && toast.data ? (
-          <Toast.Description className={styles.Description}>
-            `data.userId` is {toast.data.userId}
-          </Toast.Description>
-        ) : (
-          <Toast.Description className={styles.Description} />
-        )}
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
+          {isCustomToast(toast) && toast.data ? (
+            <Toast.Description className={styles.Description}>
+              data.userId is {toast.data.userId}
+            </Toast.Description>
+          ) : (
+            <Toast.Description className={styles.Description} />
+          )}
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 33e580321c3..71462167492 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   right: 1rem;
   bottom: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     right: 2rem;
     bottom: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -62,29 +27,25 @@
   );
   position: absolute;
   right: 0;
-  bottom: 0;
-  left: auto;
-  width: 100%;
   margin: 0 auto;
-  margin-right: 0;
   box-sizing: border-box;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.5rem;
-  background: var(--color-gray-50);
-  background-clip: padding-box;
-  color: var(--color-gray-900);
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  padding: 1rem;
-  cursor: default;
+  width: 100%;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
-  z-index: calc(1000 - var(--toast-index));
-  height: var(--height);
+  bottom: 0;
+  left: auto;
+  margin-right: 0;
   user-select: none;
-  -webkit-user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
     opacity 0.5s,
     height 0.15s;
+  cursor: default;
+  z-index: calc(1000 - var(--toast-index));
+  height: var(--height);
   transform: translateX(var(--toast-swipe-movement-x))
     translateY(
       calc(
@@ -94,6 +55,13 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -136,6 +104,15 @@
     width: 100%;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 /* Alternate animation names so repeated updates restart the same pulse. */
@@ -148,6 +125,12 @@
 }
 
 .Content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
@@ -160,41 +143,141 @@
   }
 }
 
+.Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
-  margin: 0;
-  font-size: 0.975rem;
-  line-height: 1.25rem;
   font-weight: 700;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
 }
 
 .Description {
-  margin: 0;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
+  margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  border: none;
-  border-radius: 0.25rem;
-  background: transparent;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
 
-  &:hover {
-    background-color: var(--color-gray-100);
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 @keyframes pulse-even {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.tsx
index 2189e95ff12..477de9685b5 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.tsx
@@ -51,31 +51,12 @@ function PulseToastItem({ toast }: { toast: Toast.Root.ToastObject }) {
   return (
     <Toast.Root toast={toast} className={className}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   );
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index fb2fee07307..4f301bd6cfb 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,19 +29,15 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -94,6 +55,13 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -133,11 +101,26 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -148,39 +131,139 @@
   }
 }
 
+.Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.tsx
index 6f1718294a1..1b75203b9a1 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.tsx
@@ -40,31 +40,12 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index da9be0ed7ea..13d5b07eead 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleToast() {
     <Toast.Provider>
       <ToastButton />
       <Toast.Portal>
-        <Toast.Viewport className="fixed z-10 top-auto right-[1rem] bottom-[1rem] mx-auto flex w-[250px] sm:right-[2rem] sm:bottom-[2rem] sm:w-[300px]">
+        <Toast.Viewport className="fixed top-auto right-[1rem] bottom-[1rem] z-1 mx-auto w-[calc(100vw-2rem)] sm:right-[2rem] sm:bottom-[2rem] sm:w-[22.5rem]">
           <ToastList />
         </Toast.Viewport>
       </Toast.Portal>
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Create toast
@@ -44,37 +44,17 @@ function ToastList() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100">
-        <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-        <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
-        <Toast.Close
-          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-sm border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-          aria-label="Close"
-        >
-          <XIcon className="h-4 w-4" />
+      <Toast.Content className="flex h-full items-center gap-4 p-3 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <Toast.Title className="text-sm font-bold" />
+          <Toast.Description className="text-sm" />
+        </div>
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+          Dismiss
         </Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index 90c2afda43a..66d47848e4a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -1,43 +1,8 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 100%;
-  max-width: 300px;
+  width: calc(100vw - 2rem);
+  max-width: 22.5rem;
   margin: 0 auto;
   top: 1rem;
   right: 0;
@@ -57,21 +22,17 @@
   position: absolute;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: top center;
   top: 0;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -89,6 +50,13 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -128,11 +96,26 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -143,39 +126,139 @@
   }
 }
 
+.Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.tsx
index 24191bb98eb..3c57425820a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.tsx
@@ -40,31 +40,12 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} swipeDirection="up" className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index e7c8af6e299..5c4bcc83b52 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleToast() {
     <Toast.Provider>
       <ToastButton />
       <Toast.Portal>
-        <Toast.Viewport className="fixed z-10 top-[1rem] right-0 bottom-auto left-0 mx-auto flex w-full max-w-[300px]">
+        <Toast.Viewport className="fixed top-[1rem] right-0 bottom-auto left-0 z-1 mx-auto w-[calc(100vw-2rem)] max-w-[22.5rem]">
           <ToastList />
         </Toast.Viewport>
       </Toast.Portal>
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Create toast
@@ -45,37 +45,17 @@ function ToastList() {
       key={toast.id}
       toast={toast}
       swipeDirection="up"
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute right-0 top-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-[300px] origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100">
-        <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-        <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
-        <Toast.Close
-          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-sm border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-          aria-label="Close"
-        >
-          <XIcon className="h-4 w-4" />
+      <Toast.Content className="flex h-full items-center gap-4 p-3 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <Toast.Title className="text-sm font-bold" />
+          <Toast.Description className="text-sm" />
+        </div>
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+          Dismiss
         </Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index c9414471752..98f8dd43ede 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,19 +29,15 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -94,6 +55,13 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -134,20 +102,41 @@
     height: calc(var(--gap) + 1px);
   }
 
-  &[data-type='success'] {
-    background-color: lightgreen;
-    color: black;
+  &[data-type='success'] .Text {
+    color: oklch(52.7% 0.154 150.069deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(79.2% 0.209 151.711deg);
+    }
+  }
+
+  &[data-type='error'] .Text {
+    color: oklch(50.5% 0.213 27.518deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.4% 0.191 22.216deg);
+    }
   }
 
-  &[data-type='error'] {
-    background-color: lightpink;
-    color: black;
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -158,39 +147,139 @@
   }
 }
 
+.Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx
index d37793b65f3..1473485f336 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx
@@ -52,31 +52,12 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 05fbb3a421b..76f760be718 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 275px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,19 +29,15 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -94,6 +55,13 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -133,11 +101,26 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -148,15 +131,30 @@
   }
 }
 
+.Text {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.75rem;
+}
+
+.Message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
@@ -165,43 +163,113 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
-  border-radius: 0.25rem;
-  margin-top: 0.5rem;
-  background-color: var(--color-gray-900);
-  color: var(--color-gray-50);
-  border: none;
+  line-height: 1;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
+.Button {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
-}
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
index 4559f8c578b..59e7224e615 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
@@ -48,32 +48,14 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Action className={styles.UndoButton} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <div className={styles.Message}>
+            <Toast.Title className={styles.Title} />
+            <Toast.Description className={styles.Description} />
+          </div>
+          <Toast.Action className={styles.UndoButton} />
+        </div>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 81f39a5c7be..0fc2f1a40d8 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,18 +29,15 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -84,7 +46,6 @@
   cursor: default;
   z-index: calc(1000 - var(--toast-index));
   height: var(--height);
-  transform-origin: bottom center;
   transform: translateX(var(--toast-swipe-movement-x))
     translateY(
       calc(
@@ -94,6 +55,13 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -133,11 +101,26 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -148,39 +131,139 @@
   }
 }
 
+.Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.tsx
index a01ba8d17e8..c584a09fa90 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.tsx
@@ -41,35 +41,16 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
 
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
-
 const TEXTS = [
   'Short message.',
   'A bit longer message that spans two lines.',
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index eecbeaa6581..fece20c8a3f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -1,10 +1,12 @@
 .Panel {
   display: flex;
   gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  padding: 1px;
+  border: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
 }
 
 .Button {
@@ -16,30 +18,62 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 0;
-  border-radius: 0.25rem;
+  border: none;
+  border-radius: 0;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
+  &:active:not([data-disabled], [data-pressed]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-pressed] {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-900);
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
+  }
+
+  @media (hover: hover) {
+    &[data-pressed]:hover:not([data-disabled]) {
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
+    }
   }
-}
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
index 48db716de4b..5f93586e5d7 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
@@ -7,13 +7,13 @@ export default function ExampleToggleGroup() {
   return (
     <ToggleGroup defaultValue={['left']} className={styles.Panel}>
       <Toggle aria-label="Align left" value="left" className={styles.Button}>
-        <AlignLeftIcon className={styles.Icon} />
+        <AlignLeftIcon />
       </Toggle>
       <Toggle aria-label="Align center" value="center" className={styles.Button}>
-        <AlignCenterIcon className={styles.Icon} />
+        <AlignCenterIcon />
       </Toggle>
       <Toggle aria-label="Align right" value="right" className={styles.Button}>
-        <AlignRightIcon className={styles.Icon} />
+        <AlignRightIcon />
       </Toggle>
     </ToggleGroup>
   );
@@ -24,15 +24,13 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
+      fill="none"
       viewBox="0 0 16 16"
       stroke="currentColor"
-      strokeLinecap="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 3.5H13.5" />
-      <path d="M2.5 9.5H13.5" />
-      <path d="M2.5 6.5H10.5" />
-      <path d="M2.5 12.5H10.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-11 7h9M2.5 8h5" />
     </svg>
   );
 }
@@ -44,13 +42,10 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
       height="16"
       viewBox="0 0 16 16"
       stroke="currentColor"
-      strokeLinecap="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M3 3.5H14" />
-      <path d="M3 9.5H14" />
-      <path d="M4.5 6.5H12.5" />
-      <path d="M4.5 12.5H12.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-10 7h9M5.5 8h5" />
     </svg>
   );
 }
@@ -62,13 +57,10 @@ function AlignRightIcon(props: React.ComponentProps<'svg'>) {
       height="16"
       viewBox="0 0 16 16"
       stroke="currentColor"
-      strokeLinecap="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 3.5H13.5" />
-      <path d="M2.5 9.5H13.5" />
-      <path d="M5.5 6.5H13.5" />
-      <path d="M5.5 12.5H13.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-9 7h9M8.5 8h5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 2bcbca66a09..e6692615ef1 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -6,28 +6,28 @@ export default function ExampleToggleGroup() {
   return (
     <ToggleGroup
       defaultValue={['left']}
-      className="flex gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5"
+      className="flex gap-px p-px border border-neutral-950 dark:border-white"
     >
       <Toggle
         aria-label="Align left"
         value="left"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <AlignLeftIcon className="size-4" />
+        <AlignLeftIcon />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <AlignCenterIcon className="size-4" />
+        <AlignCenterIcon />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <AlignRightIcon className="size-4" />
+        <AlignRightIcon />
       </Toggle>
     </ToggleGroup>
   );
@@ -38,15 +38,13 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
+      fill="none"
       viewBox="0 0 16 16"
       stroke="currentColor"
-      strokeLinecap="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 3.5H13.5" />
-      <path d="M2.5 9.5H13.5" />
-      <path d="M2.5 6.5H10.5" />
-      <path d="M2.5 12.5H10.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-11 7h9M2.5 8h5" />
     </svg>
   );
 }
@@ -58,13 +56,10 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
       height="16"
       viewBox="0 0 16 16"
       stroke="currentColor"
-      strokeLinecap="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M3 3.5H14" />
-      <path d="M3 9.5H14" />
-      <path d="M4.5 6.5H12.5" />
-      <path d="M4.5 12.5H12.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-10 7h9M5.5 8h5" />
     </svg>
   );
 }
@@ -76,13 +71,10 @@ function AlignRightIcon(props: React.ComponentProps<'svg'>) {
       height="16"
       viewBox="0 0 16 16"
       stroke="currentColor"
-      strokeLinecap="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 3.5H13.5" />
-      <path d="M2.5 9.5H13.5" />
-      <path d="M5.5 6.5H13.5" />
-      <path d="M5.5 12.5H13.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-9 7h9M8.5 8h5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index fec16a36816..fece20c8a3f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -1,10 +1,12 @@
 .Panel {
   display: flex;
   gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  padding: 1px;
+  border: 1px solid oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
 }
 
 .Button {
@@ -16,27 +18,62 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 0;
-  border-radius: 0.25rem;
+  border: none;
+  border-radius: 0;
   background-color: transparent;
-  font-family: inherit;
-  font-size: 1rem;
-  color: var(--color-gray-600);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
+  &:active:not([data-disabled], [data-pressed]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-pressed] {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-900);
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
+  }
+
+  @media (hover: hover) {
+    &[data-pressed]:hover:not([data-disabled]) {
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
index 6cd539cd0db..ac5d5041ace 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
@@ -25,7 +25,14 @@ export default function ExampleToggleGroupMultiple() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -33,7 +40,14 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -41,7 +55,14 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index c0894576520..6ad3dc4ef9f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -7,26 +7,26 @@ export default function ExampleToggleGroupMultiple() {
       multiple
       defaultValue={['bold', 'italic']}
       aria-label="Text formatting options"
-      className="flex gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5"
+      className="flex gap-px p-px border border-neutral-950 dark:border-white"
     >
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <UnderlineIcon />
       </Toggle>
@@ -36,7 +36,14 @@ export default function ExampleToggleGroupMultiple() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -44,7 +51,14 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -52,7 +66,14 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index c9b1897717c..1cb61280328 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -1,12 +1,3 @@
-.Panel {
-  display: flex;
-  gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
-}
-
 .Button {
   box-sizing: border-box;
   display: flex;
@@ -16,35 +7,48 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 0;
-  border-radius: 0.25rem;
+  border: none;
+  border-radius: 0;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  @media (prefers-color-scheme: dark) {
+    color: white;
   }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-pressed] {
-    color: var(--color-gray-900);
+    color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
   }
-}
 
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
index 5f512d8f4f9..ca6724929a7 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
@@ -13,14 +13,14 @@ export default function ExampleToggle() {
           if (state.pressed) {
             return (
               <button type="button" {...props}>
-                <HeartFilledIcon className={styles.Icon} />
+                <HeartFilledIcon />
               </button>
             );
           }
 
           return (
             <button type="button" {...props}>
-              <HeartOutlineIcon className={styles.Icon} />
+              <HeartOutlineIcon />
             </button>
           );
         }}
@@ -31,7 +31,14 @@ export default function ExampleToggle() {
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -39,11 +46,18 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M7.99961 4.8232L7.24456 4.06654C6.84123 3.66235 6.18866 3.20003 5.33294 3.20003C3.86391 3.20003 2.66628 4.39767 2.66628 5.8667C2.66628 6.4079 2.91276 7.1023 3.41967 7.91383C3.91548 8.70759 4.59649 9.51244 5.31278 10.2503C6.38267 11.3525 7.47318 12.2465 7.99983 12.6605C8.52734 12.2456 9.61718 11.352 10.6864 10.2504C11.4027 9.51248 12.0837 8.70762 12.5796 7.91384C13.0865 7.1023 13.3329 6.4079 13.3329 5.8667C13.3329 4.39723 12.1354 3.20003 10.6663 3.20003C9.81056 3.20003 9.15799 3.66235 8.75466 4.06654L7.99961 4.8232ZM7.98574 3.29926C7.48264 2.79938 6.57901 2.13336 5.33294 2.13336C3.27481 2.13336 1.59961 3.80856 1.59961 5.8667C1.59961 9.1963 7.43321 13.5766 7.68121 13.7611C7.77561 13.8315 7.88761 13.8667 7.99961 13.8667C8.11161 13.8667 8.22361 13.8315 8.31801 13.7616C8.56601 13.5766 14.3996 9.1963 14.3996 5.8667C14.3996 3.80803 12.7244 2.13336 10.6663 2.13336C9.42013 2.13336 8.51645 2.79947 8.01337 3.29936C8.00877 3.30393 8.00421 3.30849 7.99967 3.31303C7.99965 3.31305 7.99963 3.31307 7.99961 3.3131C7.99502 3.3085 7.9904 3.30389 7.98574 3.29926Z"
+        d="m7.99961 4.8232-.75505-.75666c-.40333-.40419-1.0559-.86651-1.91162-.86651-1.46903 0-2.66666 1.19764-2.66666 2.66667 0 .5412.24648 1.2356.75339 2.04713.49581.79376 1.17682 1.59861 1.89311 2.33647 1.06989 1.1022 2.1604 1.9962 2.68705 2.4102.52751-.4149 1.61735-1.3085 2.68657-2.4101.7163-.73792 1.3973-1.54278 1.8932-2.33656.5069-.81154.7533-1.50594.7533-2.04714 0-1.46947-1.1975-2.66667-2.6666-2.66667-.85574 0-1.50831.46232-1.91164.86651zm-.01387-1.52394c-.5031-.49988-1.40673-1.1659-2.6528-1.1659-2.05813 0-3.73333 1.6752-3.73333 3.73334 0 3.3296 5.8336 7.7099 6.0816 7.8944a.532.532 0 0 0 .3184.1056c.112 0 .224-.0352.3184-.1051.248-.185 6.08159-4.5653 6.08159-7.8949 0-2.05867-1.6752-3.73334-3.7333-3.73334-1.24617 0-2.14985.66611-2.65293 1.166q-.0069.00686-.0137.01367c.00002-.00003-.00002.00002 0 0-.00459-.0046-.00927-.00914-.01393-.01377"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index d6aa1dd3d81..e3a078ce533 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -4,33 +4,38 @@ import { Toggle } from '@base-ui/react/toggle';
 
 export default function ExampleToggle() {
   return (
-    <div className="flex gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5">
-      <Toggle
-        aria-label="Favorite"
-        className="flex size-8 items-center justify-center rounded-xs text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:text-gray-900"
-        render={(props, state) => {
-          if (state.pressed) {
-            return (
-              <button type="button" {...props}>
-                <HeartFilledIcon className="size-5" />
-              </button>
-            );
-          }
-
+    <Toggle
+      aria-label="Favorite"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+      render={(props, state) => {
+        if (state.pressed) {
           return (
             <button type="button" {...props}>
-              <HeartOutlineIcon className="size-5" />
+              <HeartFilledIcon />
             </button>
           );
-        }}
-      />
-    </div>
+        }
+
+        return (
+          <button type="button" {...props}>
+            <HeartOutlineIcon />
+          </button>
+        );
+      }}
+    />
   );
 }
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -38,11 +43,18 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M7.99961 4.8232L7.24456 4.06654C6.84123 3.66235 6.18866 3.20003 5.33294 3.20003C3.86391 3.20003 2.66628 4.39767 2.66628 5.8667C2.66628 6.4079 2.91276 7.1023 3.41967 7.91383C3.91548 8.70759 4.59649 9.51244 5.31278 10.2503C6.38267 11.3525 7.47318 12.2465 7.99983 12.6605C8.52734 12.2456 9.61718 11.352 10.6864 10.2504C11.4027 9.51248 12.0837 8.70762 12.5796 7.91384C13.0865 7.1023 13.3329 6.4079 13.3329 5.8667C13.3329 4.39723 12.1354 3.20003 10.6663 3.20003C9.81056 3.20003 9.15799 3.66235 8.75466 4.06654L7.99961 4.8232ZM7.98574 3.29926C7.48264 2.79938 6.57901 2.13336 5.33294 2.13336C3.27481 2.13336 1.59961 3.80856 1.59961 5.8667C1.59961 9.1963 7.43321 13.5766 7.68121 13.7611C7.77561 13.8315 7.88761 13.8667 7.99961 13.8667C8.11161 13.8667 8.22361 13.8315 8.31801 13.7616C8.56601 13.5766 14.3996 9.1963 14.3996 5.8667C14.3996 3.80803 12.7244 2.13336 10.6663 2.13336C9.42013 2.13336 8.51645 2.79947 8.01337 3.29936C8.00877 3.30393 8.00421 3.30849 7.99967 3.31303C7.99965 3.31305 7.99963 3.31307 7.99961 3.3131C7.99502 3.3085 7.9904 3.30389 7.98574 3.29926Z"
+        d="m7.99961 4.8232-.75505-.75666c-.40333-.40419-1.0559-.86651-1.91162-.86651-1.46903 0-2.66666 1.19764-2.66666 2.66667 0 .5412.24648 1.2356.75339 2.04713.49581.79376 1.17682 1.59861 1.89311 2.33647 1.06989 1.1022 2.1604 1.9962 2.68705 2.4102.52751-.4149 1.61735-1.3085 2.68657-2.4101.7163-.73792 1.3973-1.54278 1.8932-2.33656.5069-.81154.7533-1.50594.7533-2.04714 0-1.46947-1.1975-2.66667-2.6666-2.66667-.85574 0-1.50831.46232-1.91164.86651zm-.01387-1.52394c-.5031-.49988-1.40673-1.1659-2.6528-1.1659-2.05813 0-3.73333 1.6752-3.73333 3.73334 0 3.3296 5.8336 7.7099 6.0816 7.8944a.532.532 0 0 0 .3184.1056c.112 0 .224-.0352.3184-.1051.248-.185 6.08159-4.5653 6.08159-7.8949 0-2.05867-1.6752-3.73334-3.7333-3.73334-1.24617 0-2.14985.66611-2.65293 1.166q-.0069.00686-.0137.01367c.00002-.00003-.00002.00002 0 0-.00459-.0046-.00927-.00914-.01393-.01377"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 6782281de44..88c2dad443a 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -3,16 +3,19 @@
   display: flex;
   align-items: center;
   gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  padding: 1px;
   width: 37.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 }
 
 .Group {
   display: flex;
-  gap: 0.25rem;
 }
 
 .Button {
@@ -20,49 +23,90 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   min-width: 2rem;
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
   border: 0;
-  border-radius: 0.25rem;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  @media (prefers-color-scheme: dark) {
+    color: white;
   }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
-  }
+  &:active:not([data-disabled], [data-pressed]) {
+    background-color: oklch(92.2% 0 0deg);
 
-  &[data-pressed] {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[aria-pressed] {
     padding: 0 0.75rem;
   }
 
+  &[data-pressed] {
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
+  }
+
+  @media (hover: hover) {
+    &[data-pressed]:hover:not([data-disabled]) {
+      background-color: oklch(14.5% 0 0deg);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: oklch(14.5% 0 0deg);
+      }
+    }
+  }
+
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
   &[role='combobox'] {
     min-width: 8rem;
     justify-content: space-between;
-    padding: 0 0.75rem;
+    padding: 0 0.5rem;
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -70,199 +114,116 @@
   width: 1px;
   height: 16px;
   margin: 0.25rem;
-  background-color: var(--color-gray-300);
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Link {
-  color: var(--color-gray-500);
+  color: oklch(55.6% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   text-decoration: none;
   align-self: center;
   flex: 0 0 auto;
   margin-inline: auto 0.875rem;
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -2px;
-    border-radius: 0.25rem;
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
   }
 
   @media (hover: hover) {
     &:hover {
-      color: var(--color-blue);
-    }
-  }
-}
-
-.Select {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  cursor: default;
-  -webkit-user-select: none;
-  user-select: none;
-  min-width: 9rem;
+      color: oklch(48.8% 0.243 264.376deg);
 
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+      @media (prefers-color-scheme: dark) {
+        color: oklch(62.3% 0.214 259.815deg);
+      }
     }
   }
 
-  &[data-popup-open] {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
+    outline: 2px solid oklch(14.5% 0 0deg);
 
-.SelectIcon {
-  display: flex;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
-  outline: 0;
-  -webkit-user-select: none;
+  outline: none;
   user-select: none;
-  z-index: 1;
+  z-index: 10;
 }
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  background-clip: padding-box;
+  color: oklch(14.5% 0 0deg);
+  min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
   overflow-y: auto;
   max-height: var(--available-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
     transition: none;
-    transform: none;
+    transform: translateY(1px);
     opacity: 1;
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
-}
-
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
 .Item {
   box-sizing: border-box;
   outline: 0;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
-  min-width: var(--anchor-width);
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
-  scroll-margin-block: 1rem;
-  font-size: 0.875rem;
 
   @media (pointer: coarse) {
     padding-block: 0.625rem;
   }
 
-  [data-side='none'] & {
-    padding-right: 3rem;
-    min-width: calc(var(--anchor-width) + 1rem);
-  }
-
   &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
-  }
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
 
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 }
 
@@ -270,12 +231,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index c85cb89ed7f..4ffa6122dab 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -39,22 +39,22 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button render={<Select.Trigger />} className={styles.Button}>
           <Select.Value />
-          <Select.Icon className={styles.SelectIcon}>
-            <ChevronUpDownIcon />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={8}>
+          <Select.Positioner className={styles.Positioner} sideOffset={4}>
             <Select.Popup className={styles.Popup}>
               <Select.Item className={styles.Item} value="Helvetica">
                 <Select.ItemIndicator className={styles.ItemIndicator}>
-                  <CheckIcon className={styles.ItemIndicatorIcon} />
+                  <CheckIcon />
                 </Select.ItemIndicator>
                 <Select.ItemText className={styles.ItemText}>Helvetica</Select.ItemText>
               </Select.Item>
               <Select.Item className={styles.Item} value="Arial">
                 <Select.ItemIndicator className={styles.ItemIndicator}>
-                  <CheckIcon className={styles.ItemIndicatorIcon} />
+                  <CheckIcon />
                 </Select.ItemIndicator>
                 <Select.ItemText className={styles.ItemText}>Arial</Select.ItemText>
               </Select.Item>
@@ -70,27 +70,33 @@ export default function ExampleToolbar() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index fdd6b779292..471ceac729f 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -6,13 +6,13 @@ import { Select } from '@base-ui/react/select';
 
 export default function ExampleToolbar() {
   return (
-    <Toolbar.Root className="flex w-150 items-center gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5">
-      <ToggleGroup className="flex gap-1" aria-label="Alignment">
+    <Toolbar.Root className="flex w-150 items-center gap-px border border-neutral-950 bg-white p-px dark:border-white dark:bg-neutral-950">
+      <ToggleGroup className="flex" aria-label="Alignment">
         <Toolbar.Button
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           Align Left
         </Toolbar.Button>
@@ -20,65 +20,65 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           Align Right
         </Toolbar.Button>
       </ToggleGroup>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-300" />
-      <Toolbar.Group className="flex gap-1" aria-label="Numerical format">
+      <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
+      <Toolbar.Group className="flex" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex size-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex size-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal text-gray-600 select-none hover:bg-gray-100 focus-visible:bg-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-200 data-[pressed]:bg-gray-100 data-[pressed]:text-gray-900"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           aria-label="Format as percent"
         >
           %
         </Toolbar.Button>
       </Toolbar.Group>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-300" />
+      <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex min-w-[8rem] h-8 text-sm font-normal items-center justify-between gap-3 rounded-md pr-3 pl-3 text-gray-600 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 cursor-default"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between gap-2 border-0 bg-transparent px-2 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Select.Value />
-          <Select.Icon className="flex">
-            <ChevronUpDownIcon />
+          <Select.Icon>
+            <CaretUpDownIcon />
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
-          <Select.Positioner className="outline-hidden select-none" sideOffset={8}>
-            <Select.Popup className="group max-h-[var(--available-height)] origin-[var(--transform-origin)] overflow-y-auto rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Select.Positioner className="z-10 outline-none select-none" sideOffset={4}>
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
-                className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 leading-4 outline-hidden select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 pointer-coarse:py-2.5"
+                className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Select.ItemIndicator>
-                <Select.ItemText className="col-start-2 text-sm">Helvetica</Select.ItemText>
+                <Select.ItemText className="col-start-2">Helvetica</Select.ItemText>
               </Select.Item>
               <Select.Item
                 value="Arial"
-                className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 leading-4 outline-hidden select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 pointer-coarse:py-2.5"
+                className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Select.ItemIndicator>
-                <Select.ItemText className="col-start-2 text-sm">Arial</Select.ItemText>
+                <Select.ItemText className="col-start-2">Arial</Select.ItemText>
               </Select.Item>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-300" />
+      <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Link
-        className="mr-[0.875rem] ml-auto flex-none self-center text-sm text-gray-500 no-underline hover:text-blue-800 focus-visible:rounded-xs focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         href="#"
       >
         Edited 51m ago
@@ -87,27 +87,33 @@ export default function ExampleToolbar() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
index 77b96c91803..6e2a09f1364 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -18,16 +18,31 @@ export default function TooltipDetachedTriggersControlledDemo() {
     <Tooltip.Provider>
       <div className={styles.Container}>
         <div className={styles.ButtonGroup}>
-          <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-1">
-            <InfoIcon aria-label="Controlled tooltip" className={styles.Icon} />
+          <Tooltip.Trigger
+            className={styles.IconButton}
+            handle={demoTooltip}
+            id="trigger-1"
+            aria-label="Trigger 1"
+          >
+            <HeadphonesIcon aria-hidden="true" />
           </Tooltip.Trigger>
 
-          <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-2">
-            <InfoIcon aria-label="Controlled tooltip" className={styles.Icon} />
+          <Tooltip.Trigger
+            className={styles.IconButton}
+            handle={demoTooltip}
+            id="trigger-2"
+            aria-label="Trigger 2"
+          >
+            <StopwatchIcon aria-hidden="true" />
           </Tooltip.Trigger>
 
-          <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-3">
-            <InfoIcon aria-label="Controlled tooltip" className={styles.Icon} />
+          <Tooltip.Trigger
+            className={styles.IconButton}
+            handle={demoTooltip}
+            id="trigger-3"
+            aria-label="Trigger 3"
+          >
+            <TrashIcon aria-hidden="true" />
           </Tooltip.Trigger>
         </div>
 
@@ -50,11 +65,9 @@ export default function TooltipDetachedTriggersControlledDemo() {
         triggerId={triggerId}
       >
         <Tooltip.Portal>
-          <Tooltip.Positioner sideOffset={10} className={styles.Positioner}>
+          <Tooltip.Positioner sideOffset={11} className={styles.Positioner}>
             <Tooltip.Popup className={styles.Popup}>
-              <Tooltip.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Tooltip.Arrow>
+              <Tooltip.Arrow className={styles.Arrow} />
               Controlled tooltip
             </Tooltip.Popup>
           </Tooltip.Positioner>
@@ -64,41 +77,62 @@ export default function TooltipDetachedTriggersControlledDemo() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
+function HeadphonesIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path strokeLinecap="round" d="M1.5 11V7.5c0-2.5 2.5-6 6.5-6s6.5 3.5 6.5 6V11" />
+      <path d="M12 7.5c1.3807 0 2.5 1.11929 2.5 2.5v2c0 1.3807-1.1193 2.5-2.5 2.5h-1.5v-7zm-8 0h1.5v7H4c-1.38071 0-2.5-1.1193-2.5-2.5v-2c0-1.38071 1.11929-2.5 2.5-2.5Z" />
+    </svg>
+  );
+}
+
+function StopwatchIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <circle cx="8" cy="8.5" r="6" />
       <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        d="M8 9.5v-5m0-2v-2m-2 0h4M12 4l1.5-1.5"
       />
     </svg>
   );
 }
 
-function InfoIcon(props: React.ComponentProps<'svg'>) {
+function TrashIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
+      <path strokeLinecap="square" d="M2.5 4h11" />
+      <path strokeLinecap="round" d="M6.5 4V3c0-.82843.67157-1.5 1.5-1.5s1.5.67157 1.5 1.5v1" />
+      <path
+        strokeLinecap="square"
+        d="m3.5 4 .87069 9.1422c.07332.7699.7199 1.3578 1.49324 1.3578h4.27217c.7733 0 1.4199-.5879 1.4932-1.3578L12.5 4"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 62ead081667..1fa6a79f0f3 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -1,10 +1,22 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { ArrowSvg, InfoIcon } from '../../icons-tw';
+import { HeadphonesIcon, StopwatchIcon, TrashIcon } from '../../icons-tw';
 
 const demoTooltip = Tooltip.createHandle();
 
+const iconButtonClass =
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white focus-visible:relative hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+
+const buttonClass =
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+
+const popupClass =
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+
+const arrowClass =
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+
 export default function TooltipDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
   const [triggerId, setTriggerId] = React.useState<string | null>(null);
@@ -19,69 +31,36 @@ export default function TooltipDetachedTriggersControlledDemo() {
       <div className="flex gap-2 flex-wrap justify-center">
         <div className="flex">
           <Tooltip.Trigger
-            className="
-              flex size-10 items-center justify-center
-              border border-gray-200 rounded-l-md
-              bg-gray-50
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-100"
+            className={iconButtonClass}
             handle={demoTooltip}
             id="trigger-1"
+            aria-label="Controlled tooltip"
           >
-            <InfoIcon aria-label="Controlled tooltip" />
+            <HeadphonesIcon aria-hidden="true" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
-            className="
-              flex size-10 items-center justify-center
-              border-y border-r border-gray-200
-              bg-gray-50
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-100"
+            className={`${iconButtonClass} border-l-0`}
             handle={demoTooltip}
             id="trigger-2"
+            aria-label="Controlled tooltip"
           >
-            <InfoIcon aria-label="Controlled tooltip" />
+            <StopwatchIcon aria-hidden="true" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
-            className="
-              flex size-10 items-center justify-center
-              border-y border-r border-gray-200 rounded-r-md
-              bg-gray-50
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-100"
+            className={`${iconButtonClass} border-l-0`}
             handle={demoTooltip}
             id="trigger-3"
+            aria-label="Controlled tooltip"
           >
-            <InfoIcon aria-label="Controlled tooltip" />
+            <TrashIcon aria-hidden="true" />
           </Tooltip.Trigger>
         </div>
 
         <button
           type="button"
-          className="
-            flex h-10 items-center justify-center
-            border border-gray-200 rounded-md
-            bg-gray-50
-            px-3.5
-            text-base font-normal text-gray-900
-            select-none
-            focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-            hover:bg-gray-100
-            active:bg-gray-100"
+          className={buttonClass}
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -100,36 +79,14 @@ export default function TooltipDetachedTriggersControlledDemo() {
         <Tooltip.Portal>
           <Tooltip.Positioner
             className="
-              h-(--positioner-height)
-              w-(--positioner-width)
-              max-w-(--available-width)
+              h-[var(--positioner-height)]
+              w-[var(--positioner-width)]
+              max-w-[var(--available-width)]
             "
-            sideOffset={10}
+            sideOffset={11}
           >
-            <Tooltip.Popup
-              className="
-                px-2 py-1
-                rounded-md
-                bg-[canvas]
-                text-sm
-                origin-(--transform-origin)
-                shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                transition-[transform,scale,opacity]
-                data-ending-style:opacity-0 data-ending-style:scale-90
-                data-instant:transition-none
-                data-starting-style:opacity-0 data-starting-style:scale-90
-                dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-            >
-              <Tooltip.Arrow
-                className="
-                  flex
-                  data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                  data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                  data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                  data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-              >
-                <ArrowSvg />
-              </Tooltip.Arrow>
+            <Tooltip.Popup className={popupClass}>
+              <Tooltip.Arrow className={arrowClass} />
               Controlled tooltip
             </Tooltip.Popup>
           </Tooltip.Positioner>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 62da6598b13..b9bca1882c0 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -11,55 +11,70 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  &[data-popup-open] {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
 
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
 
-  &:only-child {
-    border-radius: 0.375rem;
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
   }
 
-  &:first-child:not(:only-child) {
-    border-radius: 0.375rem 0 0 0.375rem;
-  }
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
 
-  &:last-child:not(:only-child) {
-    border-radius: 0 0.375rem 0.375rem 0;
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:not(:first-child) {
     border-left: none;
   }
-}
 
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+    position: relative;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -84,8 +99,10 @@
   width: var(--popup-width, auto);
   max-width: 500px;
   transform-origin: var(--transform-origin);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -93,33 +110,32 @@
     width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
     height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
     opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
-    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+    scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    scale: 0.9;
   }
 
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
   transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-instant] {
@@ -127,39 +143,42 @@
   }
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: white;
+    border: 1px solid oklch(14.5% 0 0deg);
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(14.5% 0 0deg);
+      border: 1px solid white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
index 356ccc14545..3b906e00391 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
@@ -3,37 +3,48 @@ import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 import styles from './index.module.css';
 
-const demoTooltip = Tooltip.createHandle<React.ComponentType>();
+const demoTooltip = Tooltip.createHandle<React.ReactNode>();
 
 export default function TooltipDetachedTriggersFullDemo() {
   return (
     <Tooltip.Provider>
       <div className={styles.ButtonGroup}>
-        <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={InfoContent}>
-          <InfoIcon aria-label="This is information about the feature" className={styles.Icon} />
+        <Tooltip.Trigger
+          className={styles.Button}
+          handle={demoTooltip}
+          payload="Listen to audio preview"
+          aria-label="Listen to audio preview"
+        >
+          <HeadphonesIcon aria-hidden="true" />
         </Tooltip.Trigger>
 
-        <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={HelpContent}>
-          <HelpIcon aria-label="Need help?" className={styles.Icon} />
+        <Tooltip.Trigger
+          className={styles.Button}
+          handle={demoTooltip}
+          payload="Set a timer"
+          aria-label="Set a timer"
+        >
+          <StopwatchIcon aria-hidden="true" />
         </Tooltip.Trigger>
 
-        <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={AlertContent}>
-          <AlertIcon aria-label="Warning: This action cannot be undone" className={styles.Icon} />
+        <Tooltip.Trigger
+          className={styles.Button}
+          handle={demoTooltip}
+          payload="Delete: This action cannot be undone"
+          aria-label="Delete: This action cannot be undone"
+        >
+          <TrashIcon aria-hidden="true" />
         </Tooltip.Trigger>
       </div>
 
       <Tooltip.Root handle={demoTooltip}>
-        {({ payload: Payload }) => (
+        {({ payload }) => (
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10} className={styles.Positioner}>
+            <Tooltip.Positioner sideOffset={11} className={styles.Positioner}>
               <Tooltip.Popup className={styles.Popup}>
-                <Tooltip.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={styles.Arrow} />
 
-                <Tooltip.Viewport className={styles.Viewport}>
-                  {Payload !== undefined && <Payload />}
-                </Tooltip.Viewport>
+                <Tooltip.Viewport className={styles.Viewport}>{payload}</Tooltip.Viewport>
               </Tooltip.Popup>
             </Tooltip.Positioner>
           </Tooltip.Portal>
@@ -43,93 +54,62 @@ export default function TooltipDetachedTriggersFullDemo() {
   );
 }
 
-function InfoContent() {
-  return <span>This is information about the feature</span>;
-}
-
-function HelpContent() {
-  return <span>Need help?</span>;
-}
-
-function AlertContent() {
-  return <span>Warning: This action cannot be undone</span>;
-}
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function InfoIcon(props: React.ComponentProps<'svg'>) {
+function HeadphonesIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
+      <path strokeLinecap="round" d="M1.5 11V7.5c0-2.5 2.5-6 6.5-6s6.5 3.5 6.5 6V11" />
+      <path d="M12 7.5c1.3807 0 2.5 1.11929 2.5 2.5v2c0 1.3807-1.1193 2.5-2.5 2.5h-1.5v-7zm-8 0h1.5v7H4c-1.38071 0-2.5-1.1193-2.5-2.5v-2c0-1.38071 1.11929-2.5 2.5-2.5Z" />
     </svg>
   );
 }
 
-function HelpIcon(props: React.ComponentProps<'svg'>) {
+function StopwatchIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
-      <path d="M12 17h.01" />
+      <circle cx="8" cy="8.5" r="6" />
+      <path
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        d="M8 9.5v-5m0-2v-2m-2 0h4M12 4l1.5-1.5"
+      />
     </svg>
   );
 }
 
-function AlertIcon(props: React.ComponentProps<'svg'>) {
+function TrashIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-      <path d="M12 9v4" />
-      <path d="M12 17h.01" />
+      <path strokeLinecap="square" d="M2.5 4h11" />
+      <path strokeLinecap="round" d="M6.5 4V3c0-.82843.67157-1.5 1.5-1.5s1.5.67157 1.5 1.5v1" />
+      <path
+        strokeLinecap="square"
+        d="m3.5 4 .87069 9.1422c.07332.7699.7199 1.3578 1.49324 1.3578h4.27217c.7733 0 1.4199-.5879 1.4932-1.3578L12.5 4"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index a9c4a6d1a66..f21261d3e22 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -1,74 +1,56 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { ArrowSvg, InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
+import { HeadphonesIcon, StopwatchIcon, TrashIcon } from '../../icons-tw';
 
-const demoTooltip = Tooltip.createHandle<React.ComponentType>();
+const demoTooltip = Tooltip.createHandle<React.ReactNode>();
+
+const triggerClass =
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white focus-visible:relative hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+
+const arrowClass =
+  "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function TooltipDetachedTriggersFullDemo() {
   return (
     <Tooltip.Provider>
       <div className="flex">
         <Tooltip.Trigger
-          className="
-            box-border flex size-10 items-center justify-center
-            border border-gray-200 rounded-l-md
-            bg-gray-50
-            text-base text-gray-900
-            select-none
-            data-popup-open:bg-gray-100
-            focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-600
-            hover:bg-gray-100
-            active:bg-gray-100"
+          className={triggerClass}
           handle={demoTooltip}
-          payload={InfoContent}
+          payload="Listen to audio preview"
+          aria-label="Listen to audio preview"
         >
-          <InfoIcon aria-label="This is information about the feature" className="size-5" />
+          <HeadphonesIcon aria-hidden="true" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
-          className="
-            box-border flex size-10 items-center justify-center
-            border-y border-r border-gray-200
-            bg-gray-50
-            text-base text-gray-900
-            select-none
-            data-popup-open:bg-gray-100
-            focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-600
-            hover:bg-gray-100
-            active:bg-gray-100"
+          className={`${triggerClass} border-l-0`}
           handle={demoTooltip}
-          payload={HelpContent}
+          payload="Set a timer"
+          aria-label="Set a timer"
         >
-          <HelpIcon aria-label="Need help?" className="size-5" />
+          <StopwatchIcon aria-hidden="true" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
-          className="
-            box-border flex size-10 items-center justify-center
-            border-y border-r border-gray-200 rounded-r-md
-            bg-gray-50
-            text-base text-gray-900
-            select-none
-            data-popup-open:bg-gray-100
-            focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-600
-            hover:bg-gray-100
-            active:bg-gray-100"
+          className={`${triggerClass} border-l-0`}
           handle={demoTooltip}
-          payload={AlertContent}
+          payload="Delete: This action cannot be undone"
+          aria-label="Delete: This action cannot be undone"
         >
-          <AlertIcon aria-label="Warning: This action cannot be undone" className="size-5" />
+          <TrashIcon aria-hidden="true" />
         </Tooltip.Trigger>
       </div>
 
       <Tooltip.Root handle={demoTooltip}>
-        {({ payload: Payload }) => (
+        {({ payload }) => (
           <Tooltip.Portal>
             <Tooltip.Positioner
-              sideOffset={10}
+              sideOffset={11}
               className="
-                h-(--positioner-height) w-(--positioner-width)
-                max-w-(--available-width)
+                h-[var(--positioner-height)] w-[var(--positioner-width)]
+                max-w-[var(--available-width)]
                 transition-[top,left,right,bottom,transform]
                 duration-[0.35s]
                 ease-[cubic-bezier(0.22,1,0.36,1)]
@@ -77,35 +59,21 @@ export default function TooltipDetachedTriggersFullDemo() {
               <Tooltip.Popup
                 className="
                   relative
-                  h-(--popup-height,auto) w-(--popup-width,auto)
+                  h-[var(--popup-height,auto)] w-[var(--popup-width,auto)]
                   max-w-[500px]
-                  rounded-md
-                  bg-[canvas]
-                  text-sm
-                  origin-(--transform-origin)
-                  shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                  transition-[width,height,opacity,scale]
+                  border border-neutral-950 dark:border-white
+                  bg-white dark:bg-neutral-950
+                  text-sm text-neutral-950 dark:text-white
+                  origin-[var(--transform-origin)]
+                  shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none
+                  transition-[width,height,opacity,transform]
                   duration-[0.35s]
                   ease-[cubic-bezier(0.22,1,0.36,1)]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
+                  data-ending-style:opacity-0 data-ending-style:[transform:scale(0.9)]
                   data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90
-                  dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
+                  data-starting-style:opacity-0 data-starting-style:[transform:scale(0.9)]"
               >
-                <Tooltip.Arrow
-                  className="
-                    flex
-                    transition-[left]
-                    duration-[0.35s]
-                    ease-[cubic-bezier(0.22,1,0.36,1)]
-                    data-instant:transition-none
-                    data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-                >
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={arrowClass} />
 
                 <Tooltip.Viewport
                   className="
@@ -137,7 +105,7 @@ export default function TooltipDetachedTriggersFullDemo() {
                     data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-1/2
                     data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0"
                 >
-                  {Payload !== undefined && <Payload />}
+                  {payload}
                 </Tooltip.Viewport>
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -147,15 +115,3 @@ export default function TooltipDetachedTriggersFullDemo() {
     </Tooltip.Provider>
   );
 }
-
-function InfoContent() {
-  return <span>This is information about the feature</span>;
-}
-
-function HelpContent() {
-  return <span>Need help?</span>;
-}
-
-function AlertContent() {
-  return <span>Warning: This action cannot be undone</span>;
-}
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
index 3f77f3f5a52..34f61b812d0 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
@@ -8,18 +8,16 @@ const demoTooltip = Tooltip.createHandle();
 export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
-      <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip}>
-        <InfoIcon aria-label="This is a detached tooltip" className={styles.Icon} />
+      <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} aria-label="Delete">
+        <TrashIcon aria-hidden="true" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
         <Tooltip.Portal>
-          <Tooltip.Positioner sideOffset={10}>
+          <Tooltip.Positioner sideOffset={11}>
             <Tooltip.Popup className={styles.Popup}>
-              <Tooltip.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Tooltip.Arrow>
-              This is a detached tooltip
+              <Tooltip.Arrow className={styles.Arrow} />
+              Delete
             </Tooltip.Popup>
           </Tooltip.Positioner>
         </Tooltip.Portal>
@@ -28,41 +26,24 @@ export default function TooltipDetachedTriggersSimpleDemo() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
-function InfoIcon(props: React.ComponentProps<'svg'>) {
+function TrashIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
+      <path strokeLinecap="square" d="M2.5 4h11" />
+      <path strokeLinecap="round" d="M6.5 4V3c0-.82843.67157-1.5 1.5-1.5s1.5.67157 1.5 1.5v1" />
+      <path
+        strokeLinecap="square"
+        d="m3.5 4 .87069 9.1422c.07332.7699.7199 1.3578 1.49324 1.3578h4.27217c.7733 0 1.4199-.5879 1.4932-1.3578L12.5 4"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 7a6267c52e2..fec48a5a585 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -1,57 +1,32 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { ArrowSvg, InfoIcon } from '../../icons-tw';
+import { TrashIcon } from '../../icons-tw';
 
 const demoTooltip = Tooltip.createHandle();
 
+const triggerClass =
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+
+const popupClass =
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+
+const arrowClass =
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+
 export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
-      <Tooltip.Trigger
-        className="
-          flex size-10 items-center justify-center
-          border border-gray-200 rounded-md
-          bg-gray-50
-          text-gray-900
-          select-none
-          data-popup-open:bg-gray-100
-          focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-          hover:bg-gray-100
-          active:bg-gray-100"
-        handle={demoTooltip}
-      >
-        <InfoIcon aria-label="This is a detached tooltip" />
+      <Tooltip.Trigger className={triggerClass} handle={demoTooltip} aria-label="Delete">
+        <TrashIcon aria-hidden="true" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
         <Tooltip.Portal>
-          <Tooltip.Positioner sideOffset={10}>
-            <Tooltip.Popup
-              className="
-                px-2 py-1
-                rounded-md
-                bg-[canvas]
-                text-sm
-                origin-(--transform-origin)
-                shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                transition-[transform,scale,opacity]
-                data-ending-style:opacity-0 data-ending-style:scale-90
-                data-instant:transition-none
-                data-starting-style:opacity-0 data-starting-style:scale-90
-                dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-            >
-              <Tooltip.Arrow
-                className="
-                  flex
-                  data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                  data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                  data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                  data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-              >
-                <ArrowSvg />
-              </Tooltip.Arrow>
-              This is a detached tooltip
+          <Tooltip.Positioner sideOffset={11}>
+            <Tooltip.Popup className={popupClass}>
+              <Tooltip.Arrow className={arrowClass} />
+              Delete
             </Tooltip.Popup>
           </Tooltip.Positioner>
         </Tooltip.Portal>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index c90a60c8aa2..2413592f4c3 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -1,9 +1,12 @@
 .Panel {
   display: flex;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 }
 
 .Button {
@@ -15,37 +18,49 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
   border: 0;
-  border-radius: 0.25rem;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  &[data-popup-open] {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    color: white;
   }
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
-}
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+  &:focus-visible {
+    background-color: transparent;
+    outline: 2px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Popup {
@@ -55,72 +70,77 @@
   display: flex;
   flex-direction: column;
   padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  position: relative;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    scale 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    scale: 0.98;
   }
 
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: white;
+    border: 1px solid oklch(14.5% 0 0deg);
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(14.5% 0 0deg);
+      border: 1px solid white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
index f2cbf0ae828..7750806d31c 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
@@ -7,15 +7,13 @@ export default function ExampleTooltip() {
     <Tooltip.Provider>
       <div className={styles.Panel}>
         <Tooltip.Root>
-          <Tooltip.Trigger className={styles.Button}>
-            <BoldIcon className={styles.Icon} aria-label="Bold" />
+          <Tooltip.Trigger className={styles.Button} aria-label="Bold">
+            <BoldIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
+            <Tooltip.Positioner sideOffset={11}>
               <Tooltip.Popup className={styles.Popup}>
-                <Tooltip.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={styles.Arrow} />
                 Bold
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -23,15 +21,13 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger className={styles.Button}>
-            <ItalicIcon className={styles.Icon} aria-label="Italic" />
+          <Tooltip.Trigger className={styles.Button} aria-label="Italic">
+            <ItalicIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
+            <Tooltip.Positioner sideOffset={11}>
               <Tooltip.Popup className={styles.Popup}>
-                <Tooltip.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={styles.Arrow} />
                 Italic
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -39,15 +35,13 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger className={styles.Button}>
-            <UnderlineIcon className={styles.Icon} aria-label="Underline" />
+          <Tooltip.Trigger className={styles.Button} aria-label="Underline">
+            <UnderlineIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
+            <Tooltip.Positioner sideOffset={11}>
               <Tooltip.Popup className={styles.Popup}>
-                <Tooltip.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={styles.Arrow} />
                 Underline
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -58,28 +52,16 @@ export default function ExampleTooltip() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -87,7 +69,14 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -95,7 +84,14 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 960f89f3082..cf2331ec290 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -1,54 +1,27 @@
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 
+const triggerClass =
+  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+
+const popupClass =
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+
+const arrowClass =
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+
 export default function ExampleTooltip() {
   return (
     <Tooltip.Provider>
-      <div className="flex border border-gray-200 rounded-md bg-gray-50 p-0.5">
+      <div className="flex border border-neutral-950 bg-white dark:border-white dark:bg-neutral-950">
         <Tooltip.Root>
-          <Tooltip.Trigger
-            className="
-              flex size-8 items-center justify-center
-              border-0 rounded-sm
-              bg-transparent
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:bg-none
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-200
-              focus-visible:not-[&:hover]:bg-transparent"
-          >
-            <BoldIcon aria-label="Bold" className="size-4" />
+          <Tooltip.Trigger className={triggerClass} aria-label="Bold">
+            <BoldIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup
-                className="
-                  flex flex-col
-                  px-2 py-1
-                  rounded-md
-                  bg-[canvas]
-                  text-sm
-                  origin-(--transform-origin)
-                  shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                  transition-[transform,scale,opacity]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
-                  data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90
-                  dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-              >
-                <Tooltip.Arrow
-                  className="
-                    flex
-                    data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-                >
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+            <Tooltip.Positioner sideOffset={11}>
+              <Tooltip.Popup className={popupClass}>
+                <Tooltip.Arrow className={arrowClass} />
                 Bold
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -56,49 +29,13 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger
-            className="
-              flex size-8 items-center justify-center
-              border-0 rounded-sm
-              bg-transparent
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:bg-none
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-200
-              focus-visible:not-[&:hover]:bg-transparent"
-          >
-            <ItalicIcon aria-label="Italic" className="size-4" />
+          <Tooltip.Trigger className={triggerClass} aria-label="Italic">
+            <ItalicIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup
-                className="
-                  flex flex-col
-                  px-2 py-1
-                  rounded-md
-                  bg-[canvas]
-                  text-sm
-                  origin-(--transform-origin)
-                  shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                  transition-[transform,scale,opacity]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
-                  data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90
-                  dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-              >
-                <Tooltip.Arrow
-                  className="
-                    flex
-                    data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-                >
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+            <Tooltip.Positioner sideOffset={11}>
+              <Tooltip.Popup className={popupClass}>
+                <Tooltip.Arrow className={arrowClass} />
                 Italic
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -106,49 +43,13 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger
-            className="
-              flex size-8 items-center justify-center
-              border-0 rounded-sm
-              bg-transparent
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:bg-none
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-200
-              focus-visible:not-[&:hover]:bg-transparent"
-          >
-            <UnderlineIcon aria-label="Underline" className="size-4" />
+          <Tooltip.Trigger className={triggerClass} aria-label="Underline">
+            <UnderlineIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup
-                className="
-                  flex flex-col
-                  px-2 py-1
-                  rounded-md
-                  bg-[canvas]
-                  text-sm
-                  origin-(--transform-origin)
-                  shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                  transition-[transform,scale,opacity]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
-                  data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90
-                  dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-              >
-                <Tooltip.Arrow
-                  className="
-                    flex
-                    data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-                >
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+            <Tooltip.Positioner sideOffset={11}>
+              <Tooltip.Popup className={popupClass}>
+                <Tooltip.Arrow className={arrowClass} />
                 Underline
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -159,28 +60,16 @@ export default function ExampleTooltip() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -188,7 +77,14 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -196,7 +92,14 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
index b8d7f05385a..711eaaaa0de 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
@@ -1,80 +1,61 @@
 import * as React from 'react';
 
-export function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
-export function InfoIcon(props: React.ComponentProps<'svg'>) {
+export function HeadphonesIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
+      <path strokeLinecap="round" d="M1.5 11V7.5c0-2.5 2.5-6 6.5-6s6.5 3.5 6.5 6V11" />
+      <path d="M12 7.5c1.3807 0 2.5 1.11929 2.5 2.5v2c0 1.3807-1.1193 2.5-2.5 2.5h-1.5v-7zm-8 0h1.5v7H4c-1.38071 0-2.5-1.1193-2.5-2.5v-2c0-1.38071 1.11929-2.5 2.5-2.5Z" />
     </svg>
   );
 }
 
-export function HelpIcon(props: React.ComponentProps<'svg'>) {
+export function StopwatchIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
-      <path d="M12 17h.01" />
+      <circle cx="8" cy="8.5" r="6" />
+      <path
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        d="M8 9.5v-5m0-2v-2m-2 0h4M12 4l1.5-1.5"
+      />
     </svg>
   );
 }
 
-export function AlertIcon(props: React.ComponentProps<'svg'>) {
+export function TrashIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-      <path d="M12 9v4" />
-      <path d="M12 17h.01" />
+      <path strokeLinecap="square" d="M2.5 4h11" />
+      <path strokeLinecap="round" d="M6.5 4V3c0-.82843.67157-1.5 1.5-1.5s1.5.67157 1.5 1.5v1" />
+      <path
+        strokeLinecap="square"
+        d="m3.5 4 .87069 9.1422c.07332.7699.7199 1.3578 1.49324 1.3578h4.27217c.7733 0 1.4199-.5879 1.4932-1.3578L12.5 4"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 0f097e57579..45280d4ff29 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -14,55 +14,70 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  &[data-popup-open] {
-    background-color: var(--color-gray-100);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
+  &[data-popup-open] {
+    background-color: oklch(97% 0 0deg);
 
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
 
-  &:only-child {
-    border-radius: 0.375rem;
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
   }
 
-  &:first-child:not(:only-child) {
-    border-radius: 0.375rem 0 0 0.375rem;
-  }
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
 
-  &:last-child:not(:only-child) {
-    border-radius: 0 0.375rem 0.375rem 0;
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:not(:first-child) {
     border-left: none;
   }
-}
 
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+    position: relative;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -73,76 +88,81 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    scale 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    scale: 0.98;
   }
 
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: white;
+    border: 1px solid oklch(14.5% 0 0deg);
+    transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(14.5% 0 0deg);
+      border: 1px solid white;
+    }
   }
 }
 
@@ -151,32 +171,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+    position: relative;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
index f7107531578..d9b1a4b246f 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
@@ -3,37 +3,58 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -45,25 +66,24 @@
 
 .Popup {
   box-sizing: border-box;
-  padding: 1rem 1.5rem;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  padding: 0.75rem 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  outline: none;
 
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
   max-width: 500px;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
index f7107531578..e4905005f25 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
@@ -3,37 +3,58 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -45,25 +66,23 @@
 
 .Popup {
   box-sizing: border-box;
-  padding: 1rem 1.5rem;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  padding: 0.75rem 1rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transform-origin: var(--transform-origin);
-
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
   max-width: 500px;
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
+  outline: none;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index ff21f111742..f7a1fb09792 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -4,71 +4,97 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  -webkit-user-select: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 9rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
-.SelectIcon {
-  display: flex;
+.Value[data-placeholder] {
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
 }
 
 .Positioner {
   outline: none;
-  z-index: 1;
-  -webkit-user-select: none;
+  z-index: 10;
   user-select: none;
 }
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
-  &[data-side='none'] {
-    min-width: calc(var(--anchor-width) + 1rem);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+  &[data-side='none'] {
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -106,18 +132,26 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: white;
+
+  @media (prefers-color-scheme: dark) {
+    fill: oklch(14.5% 0 0deg);
+  }
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
+  fill: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    fill: white;
   }
 }
 
 .ArrowInnerStroke {
+  fill: white;
+
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+    fill: oklch(14.5% 0 0deg);
   }
 }
 
@@ -125,42 +159,25 @@
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
-  [data-side='none'] & {
-    font-size: 1rem;
-    padding-right: 3rem;
-  }
-
   &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
-  }
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
 
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: oklch(14.5% 0 0deg);
+    }
   }
 }
 
@@ -168,29 +185,26 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
 
 .ScrollArrow {
   width: 100%;
-  background: canvas;
+  background-color: white;
   z-index: 1;
   text-align: center;
   cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -200,6 +214,8 @@
   }
 
   &[data-direction='up'] {
+    top: 0;
+
     &[data-side='none'] {
       &::before {
         top: -100%;
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index a1e8244b474..d1935b27032 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -44,22 +44,22 @@ export default function AnimatedSelectMotionDemo() {
   return (
     <Select.Root items={fonts} open={open} onOpenChange={setOpen}>
       <Select.Trigger className={styles.Select}>
-        <Select.Value />
-        <Select.Icon className={styles.SelectIcon}>
-          <ChevronUpDownIcon />
+        <Select.Value className={styles.Value} />
+        <Select.Icon>
+          <CaretUpDownIcon />
         </Select.Icon>
       </Select.Trigger>
       <AnimatePresence>
         {portalMounted && (
           <Select.Portal>
-            <Select.Positioner className={styles.Positioner} sideOffset={8} ref={positionerRef}>
+            <Select.Positioner className={styles.Positioner} sideOffset={4} ref={positionerRef}>
               <Select.Popup className={styles.Popup} render={motionElement}>
                 <Select.ScrollUpArrow className={styles.ScrollArrow} />
                 <Select.List className={styles.List}>
                   {fonts.map(({ label, value }) => (
                     <Select.Item key={label} value={value} className={styles.Item}>
                       <Select.ItemIndicator className={styles.ItemIndicator}>
-                        <CheckIcon className={styles.ItemIndicatorIcon} />
+                        <CheckIcon />
                       </Select.ItemIndicator>
                       <Select.ItemText className={styles.ItemText}>{label}</Select.ItemText>
                     </Select.Item>
@@ -75,27 +75,33 @@ export default function AnimatedSelectMotionDemo() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
-      height="12"
-      viewBox="0 0 8 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index 15a117e0ee7..ac0f8fd012b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -14,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Autocomplete.Input.Props
     <Autocomplete.Input
       ref={forwardedRef}
       className={clsx(
-        'bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+        'h-8 w-[16rem] border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white md:w-[20rem] dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
         className,
       )}
       {...props}
@@ -29,7 +29,7 @@ export function Portal(props: Autocomplete.Portal.Props) {
 export function Positioner({ className, ...props }: Autocomplete.Positioner.Props) {
   return (
     <Autocomplete.Positioner
-      className={clsx('outline-none data-[empty]:hidden', className)}
+      className={clsx('outline-none data-empty:hidden', className)}
       sideOffset={4}
       {...props}
     />
@@ -40,7 +40,7 @@ export function Popup({ className, ...props }: Autocomplete.Popup.Props) {
   return (
     <Autocomplete.Popup
       className={clsx(
-        'w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300',
+        'w-(--anchor-width) max-w-(--available-width) border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -48,15 +48,23 @@ export function Popup({ className, ...props }: Autocomplete.Popup.Props) {
   );
 }
 
-export function List(props: Autocomplete.List.Props) {
-  return <Autocomplete.List {...props} />;
+export function List({ className, ...props }: Autocomplete.List.Props) {
+  return (
+    <Autocomplete.List
+      className={clsx(
+        'max-h-[min(22.5rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export function Item({ className, ...props }: Autocomplete.Item.Props) {
   return (
     <Autocomplete.Item
       className={clsx(
-        'flex flex-col gap-0.25 cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded data-[highlighted]:before:bg-gray-900',
+        'flex cursor-default flex-col gap-0.25 py-2 pr-8 pl-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
index 86fe30cb09a..c01157d07d2 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
@@ -7,7 +7,7 @@ export function Button({ className, ...props }: React.ComponentPropsWithoutRef<'
     <BaseButton
       type="button"
       className={clsx(
-        'flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500',
+        'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:disabled:border-neutral-400 dark:disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
index cc75c355e51..e0358fdbe93 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
@@ -5,7 +5,10 @@ import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-grou
 export function CheckboxGroup({ className, ...props }: BaseCheckboxGroup.Props) {
   return (
     <BaseCheckboxGroup
-      className={clsx('flex flex-col items-start gap-1 text-gray-900', className)}
+      className={clsx(
+        'flex flex-col items-start gap-1 text-neutral-950 dark:text-white',
+        className,
+      )}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
index 394fed235cb..cca60b9ae34 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
   return (
     <Checkbox.Root
       className={clsx(
-        'flex size-5 items-center justify-center rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300',
+        'flex size-4 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-950 data-checked:text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950',
         className,
       )}
       {...props}
@@ -16,9 +16,6 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
 
 export function Indicator({ className, ...props }: Checkbox.Indicator.Props) {
   return (
-    <Checkbox.Indicator
-      className={clsx('flex text-gray-50 data-[unchecked]:hidden', className)}
-      {...props}
-    />
+    <Checkbox.Indicator className={clsx('flex data-unchecked:hidden', className)} {...props} />
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 7c52dac2d75..16f9aa0efa0 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Combobox } from '@base-ui/react/combobox';
-import { X } from 'lucide-react';
 
 export function Root(props: Combobox.Root.Props<any, any>) {
   return <Combobox.Root {...props} />;
@@ -15,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Combobox.Input.Props>(fu
     <Combobox.Input
       ref={forwardedRef}
       className={clsx(
-        'h-10 w-64 rounded-md font-normal border border-gray-200 pl-3.5 text-base text-gray-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+        'h-full w-full border-0 bg-white pl-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
         className,
       )}
       {...props}
@@ -23,16 +22,28 @@ export const Input = React.forwardRef<HTMLInputElement, Combobox.Input.Props>(fu
   );
 });
 
+export function InputGroup({ className, ...props }: Combobox.InputGroup.Props) {
+  return (
+    <Combobox.InputGroup
+      className={clsx(
+        'relative h-8 w-64 border border-neutral-950 bg-white focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white dark:bg-neutral-950 [&>input]:pr-[2.5rem] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
 export function Clear({ className, ...props }: Combobox.Clear.Props) {
   return (
     <Combobox.Clear
       className={clsx(
-        'combobox-clear flex h-10 w-6 items-center justify-center rounded bg-transparent p-0',
+        'combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white',
         className,
       )}
       {...props}
     >
-      <X className="size-4" />
+      <XIcon />
     </Combobox.Clear>
   );
 }
@@ -41,7 +52,7 @@ export function Trigger({ className, ...props }: Combobox.Trigger.Props) {
   return (
     <Combobox.Trigger
       className={clsx(
-        'flex h-10 w-6 items-center justify-center rounded bg-transparent p-0',
+        'flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white',
         className,
       )}
       {...props}
@@ -63,7 +74,7 @@ export function Popup({ className, ...props }: Combobox.Popup.Props) {
   return (
     <Combobox.Popup
       className={clsx(
-        'w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 duration-100',
+        'w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -75,7 +86,12 @@ export function Empty({ className, children, ...props }: Combobox.Empty.Props) {
   return (
     <Combobox.Empty {...props}>
       {children ? (
-        <div className={clsx('p-4 text-[0.925rem] leading-4 text-gray-600', className)}>
+        <div
+          className={clsx(
+            'py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400',
+            className,
+          )}
+        >
           {children}
         </div>
       ) : null}
@@ -87,7 +103,7 @@ export function List({ className, ...props }: Combobox.List.Props) {
   return (
     <Combobox.List
       className={clsx(
-        'outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0',
+        'outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0',
         className,
       )}
       {...props}
@@ -99,7 +115,7 @@ export function Item({ className, ...props }: Combobox.Item.Props) {
   return (
     <Combobox.Item
       className={clsx(
-        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900',
+        'grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white',
         className,
       )}
       {...props}
@@ -110,3 +126,36 @@ export function Item({ className, ...props }: Combobox.Item.Props) {
 export function ItemIndicator({ className, ...props }: Combobox.ItemIndicator.Props) {
   return <Combobox.ItemIndicator className={clsx('col-start-1', className)} {...props} />;
 }
+
+export function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
index 43bf1cfb9a9..2f5e3cfb14b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
@@ -10,7 +10,7 @@ export function Label({ className, ...props }: Field.Label.Props) {
   return (
     <Field.Label
       className={clsx(
-        'text-sm font-bold text-gray-900 has-[[role="checkbox"]]:flex has-[[role="checkbox"]]:items-center has-[[role="checkbox"]]:gap-2 has-[[role="checkbox"]]:font-normal has-[[role="radio"]]:flex has-[[role="radio"]]:items-center has-[[role="radio"]]:gap-2 has-[[role="radio"]]:font-normal has-[[role="switch"]]:flex has-[[role="switch"]]:items-center',
+        'text-sm font-bold text-neutral-950 has-[[role="checkbox"]]:flex has-[[role="checkbox"]]:items-center has-[[role="checkbox"]]:gap-2 has-[[role="checkbox"]]:font-normal has-[[role="radio"]]:flex has-[[role="radio"]]:items-center has-[[role="radio"]]:gap-2 has-[[role="radio"]]:font-normal has-[[role="switch"]]:flex has-[[role="switch"]]:items-center dark:text-white',
         className,
       )}
       {...props}
@@ -19,7 +19,12 @@ export function Label({ className, ...props }: Field.Label.Props) {
 }
 
 export function Description({ className, ...props }: Field.Description.Props) {
-  return <Field.Description className={clsx('text-sm text-gray-600', className)} {...props} />;
+  return (
+    <Field.Description
+      className={clsx('text-sm text-neutral-600 dark:text-neutral-400', className)}
+      {...props}
+    />
+  );
 }
 
 export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
@@ -31,7 +36,7 @@ export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
       <Field.Control
         ref={forwardedRef}
         className={clsx(
-          'h-10 w-full max-w-xs rounded-md bg-[canvas] border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+          'h-8 w-full max-w-xs border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
           className,
         )}
         {...props}
@@ -41,7 +46,9 @@ export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
 );
 
 export function Error({ className, ...props }: Field.Error.Props) {
-  return <Field.Error className={clsx('text-sm text-red-800', className)} {...props} />;
+  return (
+    <Field.Error className={clsx('text-sm text-red-700 dark:text-red-400', className)} {...props} />
+  );
 }
 
 export function Item(props: Field.Item.Props) {
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
index 373ab9efba5..27b42e55da3 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
@@ -8,6 +8,9 @@ export function Root(props: Fieldset.Root.Props) {
 
 export function Legend({ className, ...props }: Fieldset.Legend.Props) {
   return (
-    <Fieldset.Legend className={clsx('text-sm font-bold text-gray-900', className)} {...props} />
+    <Fieldset.Legend
+      className={clsx('text-sm font-bold text-neutral-950 dark:text-white', className)}
+      {...props}
+    />
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/form.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/form.tsx
index 583acd6e396..21ac278ef3a 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/form.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/form.tsx
@@ -5,7 +5,7 @@ import { Form as BaseForm } from '@base-ui/react/form';
 export function Form({ className, ...props }: BaseForm.Props) {
   return (
     <BaseForm
-      className={clsx('flex w-full max-w-3xs sm:max-w-[20rem] flex-col gap-5', className)}
+      className={clsx('flex w-full max-w-3xs flex-col gap-5 sm:max-w-[20rem]', className)}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
index e3afefe904a..9c1b41b3dfc 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
@@ -9,14 +9,14 @@ export function Root({ className, ...props }: NumberField.Root.Props) {
 }
 
 export function Group({ className, ...props }: NumberField.Group.Props) {
-  return <NumberField.Group className={clsx('flex', className)} {...props} />;
+  return <NumberField.Group className={clsx('flex h-8', className)} {...props} />;
 }
 
 export function Decrement({ className, ...props }: NumberField.Decrement.Props) {
   return (
     <NumberField.Decrement
       className={clsx(
-        'flex size-10 items-center justify-center rounded-tl-md rounded-bl-md border border-gray-200 bg-gray-50 bg-clip-padding text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100',
+        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
         className,
       )}
       {...props}
@@ -32,7 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, NumberField.Input.Props>
     <NumberField.Input
       ref={forwardedRef}
       className={clsx(
-        'h-10 w-24 border-t border-b border-gray-200 text-center text-base text-gray-900 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white',
         className,
       )}
       {...props}
@@ -44,7 +44,7 @@ export function Increment({ className, ...props }: NumberField.Increment.Props)
   return (
     <NumberField.Increment
       className={clsx(
-        'flex size-10 items-center justify-center rounded-tr-md rounded-br-md border border-gray-200 bg-gray-50 bg-clip-padding text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100',
+        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
index 934ebfce616..abf6d3cb17c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
@@ -5,7 +5,10 @@ import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 export function RadioGroup<Value>({ className, ...props }: BaseRadioGroup.Props<Value>) {
   return (
     <BaseRadioGroup
-      className={clsx('w-full flex flex-row items-start gap-1 text-gray-900', className)}
+      className={clsx(
+        'flex w-full flex-row items-start gap-1 text-neutral-950 dark:text-white',
+        className,
+      )}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
index 74a3483d71b..a0f5ef8a952 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Radio.Root.Props) {
   return (
     <Radio.Root
       className={clsx(
-        'flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300',
+        'flex size-4 shrink-0 items-center justify-center rounded-full border border-neutral-950 bg-white p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-950 data-checked:text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Indicator({ className, ...props }: Radio.Indicator.Props) {
   return (
     <Radio.Indicator
       className={clsx(
-        'flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden',
+        'flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index eb2fa245e6c..a229ea031b4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -7,14 +7,22 @@ export function Root(props: Select.Root.Props<any>) {
 }
 
 export function Label({ className, ...props }: Select.Label.Props) {
-  return <Select.Label className={clsx('text-sm font-bold text-gray-900', className)} {...props} />;
+  return (
+    <Select.Label
+      className={clsx(
+        'cursor-default text-sm font-bold text-neutral-950 dark:text-white',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-10 min-w-36 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 cursor-default not-[[data-filled]]:text-gray-500 bg-[canvas]',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
         className,
       )}
       {...props}
@@ -23,11 +31,19 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
 }
 
 export function Value({ className, ...props }: Select.Value.Props) {
-  return <Select.Value className={clsx('', className)} {...props} />;
+  return (
+    <Select.Value
+      className={clsx(
+        'data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
-export function Icon({ className, ...props }: Select.Icon.Props) {
-  return <Select.Icon className={clsx('flex', className)} {...props} />;
+export function Icon(props: Select.Icon.Props) {
+  return <Select.Icon {...props} />;
 }
 
 export function Portal(props: Select.Portal.Props) {
@@ -38,7 +54,7 @@ export function Positioner({ className, ...props }: Select.Positioner.Props) {
   return (
     <Select.Positioner
       className={clsx('outline-none select-none z-10', className)}
-      sideOffset={8}
+      sideOffset={4}
       {...props}
     />
   );
@@ -48,7 +64,7 @@ export function Popup({ className, ...props }: Select.Popup.Props) {
   return (
     <Select.Popup
       className={clsx(
-        'group origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none dark:outline-gray-300',
+        'group min-w-(--anchor-width) origin-(--transform-origin) border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:translate-y-px data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -60,7 +76,7 @@ export function ScrollUpArrow({ className, ...props }: Select.ScrollUpArrow.Prop
   return (
     <Select.ScrollUpArrow
       className={clsx(
-        "top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-['']",
+        "top-0 z-1 flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:-top-full before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950",
         className,
       )}
       {...props}
@@ -72,7 +88,7 @@ export function ScrollDownArrow({ className, ...props }: Select.ScrollDownArrow.
   return (
     <Select.ScrollDownArrow
       className={clsx(
-        "bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%]",
+        "bottom-0 z-1 flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-bottom-full dark:bg-neutral-950",
         className,
       )}
       {...props}
@@ -84,7 +100,7 @@ export function List({ className, ...props }: Select.List.Props) {
   return (
     <Select.List
       className={clsx(
-        'relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]',
+        'relative max-h-(--available-height) overflow-y-auto py-1 scroll-py-6',
         className,
       )}
       {...props}
@@ -96,7 +112,7 @@ export function Item({ className, ...props }: Select.Item.Props) {
   return (
     <Select.Item
       className={clsx(
-        'grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-3 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]',
+        'grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
index f093c16e368..c7e59885339 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
@@ -8,7 +8,10 @@ export function Root({ className, ...props }: Slider.Root.Props<any>) {
 
 export function Value({ className, ...props }: Slider.Value.Props) {
   return (
-    <Slider.Value className={clsx('text-sm font-normal text-gray-900', className)} {...props} />
+    <Slider.Value
+      className={clsx('text-sm font-normal text-neutral-950 dark:text-white', className)}
+      {...props}
+    />
   );
 }
 
@@ -24,10 +27,7 @@ export function Control({ className, ...props }: Slider.Control.Props) {
 export function Track({ className, ...props }: Slider.Track.Props) {
   return (
     <Slider.Track
-      className={clsx(
-        'h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none',
-        className,
-      )}
+      className={clsx('h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800', className)}
       {...props}
     />
   );
@@ -35,7 +35,10 @@ export function Track({ className, ...props }: Slider.Track.Props) {
 
 export function Indicator({ className, ...props }: Slider.Indicator.Props) {
   return (
-    <Slider.Indicator className={clsx('rounded bg-gray-700 select-none', className)} {...props} />
+    <Slider.Indicator
+      className={clsx('bg-neutral-950 select-none dark:bg-white', className)}
+      {...props}
+    />
   );
 }
 
@@ -43,7 +46,7 @@ export function Thumb({ className, ...props }: Slider.Thumb.Props) {
   return (
     <Slider.Thumb
       className={clsx(
-        'size-4 rounded-full bg-white outline outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800',
+        'size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
index e2092330cf1..7be1c8ccc5b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Switch.Root.Props) {
   return (
     <Switch.Root
       className={clsx(
-        'relative flex h-6 w-10 rounded-full bg-gradient-to-r from-gray-700 from-35% to-gray-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-gray-200 outline-1 -outline-offset-1 outline-gray-200 transition-[background-position,box-shadow] duration-[125ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full before:outline-offset-2 before:outline-blue-800 focus-visible:before:inset-0 focus-visible:before:outline focus-visible:before:outline-2 active:bg-gray-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-gray-500 dark:from-gray-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none',
+        'flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-950 dark:border-white dark:bg-neutral-950 dark:data-checked:bg-white',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Thumb({ className, ...props }: Switch.Thumb.Props) {
   return (
     <Switch.Thumb
       className={clsx(
-        'aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-gray-100 transition-transform duration-150 data-[checked]:translate-x-4 dark:shadow-black/25',
+        'size-3.5 bg-neutral-950 transition-transform transition-colors duration-150 data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index 860bf7df1bc..d83805f2259 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import { Toast } from '@base-ui/react/toast';
-import { X } from 'lucide-react';
 
 function Toasts() {
   const { toasts } = Toast.useToastManager();
@@ -9,22 +8,22 @@ function Toasts() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:transform-[translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] h-(--height) [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms]">
-        <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-        <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
+      <Toast.Content className="h-full overflow-hidden p-3 transition-opacity duration-250">
+        <Toast.Title className="text-sm font-bold" />
+        <Toast.Description className="text-sm text-neutral-700 dark:text-neutral-300" />
         <div
-          className="text-xs mt-2 p-3 py-2 bg-gray-100 text-gray-900 rounded-md select-text"
+          className="mt-2 border border-neutral-950 p-2 text-xs select-text dark:border-white"
           data-base-ui-swipe-ignore
         >
           <pre className="whitespace-pre-wrap">{JSON.stringify(toast.data, null, 2)}</pre>
         </div>
         <Toast.Close
-          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+          className="absolute top-3 right-3 flex size-8 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
           aria-label="Close"
         >
-          <X className="size-4" />
+          <XIcon />
         </Toast.Close>
       </Toast.Content>
     </Toast.Root>
@@ -45,3 +44,21 @@ export function ToastProvider(props: { children: React.ReactNode }) {
 }
 
 export const useToastManager = Toast.useToastManager;
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index 5da29bd58cb..9a32c90acda 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -1,6 +1,5 @@
 'use client';
 import * as React from 'react';
-import { ChevronDown, ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { Form } from '../../components/form';
@@ -45,15 +44,17 @@ function ExampleForm() {
 
       <Field.Root name="region">
         <Combobox.Root items={REGIONS} required>
-          <div className="relative flex flex-col gap-1 text-sm leading-5 text-gray-900">
-            <Field.Label>Region</Field.Label>
-            <Combobox.Input placeholder="e.g. eu-central-1" />
-            <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
-              <Combobox.Clear />
-              <Combobox.Trigger>
-                <ChevronDown className="size-4" />
-              </Combobox.Trigger>
-            </div>
+          <div className="relative text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+            <Field.Label className="mb-1 block">Region</Field.Label>
+            <Combobox.InputGroup>
+              <Combobox.Input placeholder="e.g. eu-central-1" />
+              <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
+                <Combobox.Clear />
+                <Combobox.Trigger>
+                  <Combobox.CaretDownIcon />
+                </Combobox.Trigger>
+              </div>
+            </Combobox.InputGroup>
           </div>
           <Combobox.Portal>
             <Combobox.Positioner>
@@ -64,7 +65,7 @@ function ExampleForm() {
                     return (
                       <Combobox.Item key={region} value={region}>
                         <Combobox.ItemIndicator>
-                          <Check className="size-4" />
+                          <CheckIcon />
                         </Combobox.ItemIndicator>
                         <span className="col-start-2">{region}</span>
                       </Combobox.Item>
@@ -95,8 +96,8 @@ function ExampleForm() {
                   {(image: Image) => {
                     return (
                       <Autocomplete.Item key={image.url} value={image}>
-                        <span className="text-base leading-6">{image.name}</span>
-                        <span className="font-mono whitespace-nowrap text-xs leading-4 opacity-80">
+                        <span>{image.name}</span>
+                        <span className="font-mono whitespace-nowrap text-xs opacity-80">
                           {image.url}
                         </span>
                       </Autocomplete.Item>
@@ -112,12 +113,12 @@ function ExampleForm() {
 
       <Field.Root name="serverType">
         <Select.Root items={SERVER_TYPES} required>
-          <div className="flex flex-col items-start gap-1">
+          <div className="w-fit space-y-1">
             <Select.Label>Server type</Select.Label>
             <Select.Trigger className="w-48">
               <Select.Value />
               <Select.Icon>
-                <ChevronsUpDown className="size-4" />
+                <CaretUpDownIcon />
               </Select.Icon>
             </Select.Trigger>
           </div>
@@ -130,7 +131,7 @@ function ExampleForm() {
                     return (
                       <Select.Item key={value} value={value}>
                         <Select.ItemIndicator>
-                          <Check className="size-4" />
+                          <CheckIcon />
                         </Select.ItemIndicator>
                         <Select.ItemText>{label}</Select.ItemText>
                       </Select.Item>
@@ -150,11 +151,11 @@ function ExampleForm() {
           <Field.Label>Number of instances</Field.Label>
           <NumberField.Group>
             <NumberField.Decrement>
-              <Minus className="size-4" />
+              <MinusIcon />
             </NumberField.Decrement>
-            <NumberField.Input className="!w-16" />
+            <NumberField.Input />
             <NumberField.Increment>
-              <Plus className="size-4" />
+              <PlusIcon />
             </NumberField.Increment>
           </NumberField.Group>
         </NumberField.Root>
@@ -175,7 +176,7 @@ function ExampleForm() {
                 minimumFractionDigits: 0,
                 maximumFractionDigits: 0,
               }}
-              className="w-98/100 gap-y-2"
+              className="w-full gap-y-2"
             />
           }
         >
@@ -214,7 +215,7 @@ function ExampleForm() {
       </Field.Root>
 
       <Field.Root name="restartOnFailure">
-        <Field.Label className="gap-4">
+        <Field.Label className="gap-2">
           Restart on failure
           <Switch.Root defaultChecked>
             <Switch.Thumb />
@@ -232,7 +233,7 @@ function ExampleForm() {
                   <Field.Label className="uppercase">
                     <Checkbox.Root value={val}>
                       <Checkbox.Indicator>
-                        <Check className="size-3" />
+                        <CheckIcon />
                       </Checkbox.Indicator>
                     </Checkbox.Root>
                     {val}
@@ -259,6 +260,73 @@ export default function App() {
   );
 }
 
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
+    </svg>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
+    </svg>
+  );
+}
+
+function MinusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13" />
+    </svg>
+  );
+}
+
 function cartesian<T extends string[][]>(...arrays: T): string[][] {
   return arrays.reduce<string[][]>(
     (acc, curr) => acc.flatMap((a) => curr.map((b) => [...a, b])),
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index d66bb31c87f..4a082a7efcf 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import { useForm, Controller } from 'react-hook-form';
-import { ChevronDown, ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { Form } from '../../components/form';
@@ -95,15 +94,17 @@ function ReactHookForm() {
         }) => (
           <Field.Root name={name} invalid={invalid} touched={isTouched} dirty={isDirty}>
             <Combobox.Root items={REGIONS} value={value} onValueChange={onChange}>
-              <div className="relative flex flex-col gap-1 text-sm leading-5 text-gray-900">
-                <Field.Label>Region</Field.Label>
-                <Combobox.Input placeholder="e.g. eu-central-1" ref={ref} onBlur={onBlur} />
-                <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
-                  <Combobox.Clear />
-                  <Combobox.Trigger>
-                    <ChevronDown className="size-4" />
-                  </Combobox.Trigger>
-                </div>
+              <div className="relative text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+                <Field.Label className="mb-1 block">Region</Field.Label>
+                <Combobox.InputGroup>
+                  <Combobox.Input placeholder="e.g. eu-central-1" ref={ref} onBlur={onBlur} />
+                  <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
+                    <Combobox.Clear />
+                    <Combobox.Trigger>
+                      <Combobox.CaretDownIcon />
+                    </Combobox.Trigger>
+                  </div>
+                </Combobox.InputGroup>
               </div>
               <Combobox.Portal>
                 <Combobox.Positioner>
@@ -114,7 +115,7 @@ function ReactHookForm() {
                         return (
                           <Combobox.Item key={region} value={region}>
                             <Combobox.ItemIndicator>
-                              <Check className="size-4" />
+                              <CheckIcon />
                             </Combobox.ItemIndicator>
                             <span className="col-start-2">{region}</span>
                           </Combobox.Item>
@@ -162,8 +163,8 @@ function ReactHookForm() {
                       {(image: Image) => {
                         return (
                           <Autocomplete.Item key={image.url} value={image}>
-                            <span className="text-base leading-6">{image.name}</span>
-                            <span className="font-mono whitespace-nowrap text-xs leading-4 opacity-80">
+                            <span>{image.name}</span>
+                            <span className="font-mono whitespace-nowrap text-xs opacity-80">
                               {image.url}
                             </span>
                           </Autocomplete.Item>
@@ -191,12 +192,12 @@ function ReactHookForm() {
         }) => (
           <Field.Root name={name} invalid={invalid} touched={isTouched} dirty={isDirty}>
             <Select.Root items={SERVER_TYPES} value={value} onValueChange={onChange} inputRef={ref}>
-              <div className="flex flex-col items-start gap-1">
+              <div className="w-fit space-y-1">
                 <Select.Label>Server type</Select.Label>
                 <Select.Trigger className="w-48" onBlur={onBlur}>
                   <Select.Value />
                   <Select.Icon>
-                    <ChevronsUpDown className="size-4" />
+                    <CaretUpDownIcon />
                   </Select.Icon>
                 </Select.Trigger>
               </div>
@@ -209,7 +210,7 @@ function ReactHookForm() {
                         return (
                           <Select.Item key={serverType} value={serverType}>
                             <Select.ItemIndicator>
-                              <Check className="size-4" />
+                              <CheckIcon />
                             </Select.ItemIndicator>
                             <Select.ItemText>{label}</Select.ItemText>
                           </Select.Item>
@@ -241,11 +242,11 @@ function ReactHookForm() {
               <Field.Label>Number of instances</Field.Label>
               <NumberField.Group>
                 <NumberField.Decrement>
-                  <Minus className="size-4" />
+                  <MinusIcon />
                 </NumberField.Decrement>
-                <NumberField.Input className="!w-16" ref={ref} onBlur={onBlur} />
+                <NumberField.Input ref={ref} onBlur={onBlur} />
                 <NumberField.Increment>
-                  <Plus className="size-4" />
+                  <PlusIcon />
                 </NumberField.Increment>
               </NumberField.Group>
             </NumberField.Root>
@@ -277,7 +278,7 @@ function ReactHookForm() {
                     minimumFractionDigits: 0,
                     maximumFractionDigits: 0,
                   }}
-                  className="w-98/100 gap-y-2"
+                  className="w-full gap-y-2"
                 />
               }
             >
@@ -348,7 +349,7 @@ function ReactHookForm() {
           fieldState: { invalid, isTouched, isDirty },
         }) => (
           <Field.Root name={name} invalid={invalid} touched={isTouched} dirty={isDirty}>
-            <Field.Label className="gap-4">
+            <Field.Label className="gap-2">
               Restart on failure
               <Switch.Root
                 checked={value}
@@ -384,7 +385,7 @@ function ReactHookForm() {
                           onBlur={onBlur}
                         >
                           <Checkbox.Indicator>
-                            <Check className="size-3" />
+                            <CheckIcon />
                           </Checkbox.Indicator>
                         </Checkbox.Root>
                         {val}
@@ -413,6 +414,73 @@ export default function App() {
   );
 }
 
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
+    </svg>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
+    </svg>
+  );
+}
+
+function MinusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13" />
+    </svg>
+  );
+}
+
 function cartesian<T extends string[][]>(...arrays: T): string[][] {
   return arrays.reduce<string[][]>(
     (acc, curr) => acc.flatMap((a) => curr.map((b) => [...a, b])),
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 35d28645c00..74021267b03 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import { useForm, revalidateLogic, DeepKeys, ValidationError } from '@tanstack/react-form';
-import { ChevronDown, ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { RadioGroup } from '../../components/radio-group';
@@ -82,7 +81,7 @@ function TanstackForm() {
   return (
     <form
       aria-label="Launch new cloud server"
-      className="flex w-full max-w-3xs sm:max-w-[20rem] flex-col gap-5"
+      className="flex w-full max-w-3xs flex-col gap-5 sm:max-w-[20rem]"
       noValidate
       onSubmit={(event) => {
         event.preventDefault();
@@ -130,15 +129,17 @@ function TanstackForm() {
                 value={field.state.value}
                 onValueChange={field.handleChange}
               >
-                <div className="relative flex flex-col gap-1 text-sm leading-5 text-gray-900">
-                  <Field.Label>Region</Field.Label>
-                  <Combobox.Input placeholder="e.g. eu-central-1" onBlur={field.handleBlur} />
-                  <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
-                    <Combobox.Clear />
-                    <Combobox.Trigger>
-                      <ChevronDown className="size-4" />
-                    </Combobox.Trigger>
-                  </div>
+                <div className="relative text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+                  <Field.Label className="mb-1 block">Region</Field.Label>
+                  <Combobox.InputGroup>
+                    <Combobox.Input placeholder="e.g. eu-central-1" onBlur={field.handleBlur} />
+                    <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
+                      <Combobox.Clear />
+                      <Combobox.Trigger>
+                        <Combobox.CaretDownIcon />
+                      </Combobox.Trigger>
+                    </div>
+                  </Combobox.InputGroup>
                 </div>
                 <Combobox.Portal>
                   <Combobox.Positioner>
@@ -149,7 +150,7 @@ function TanstackForm() {
                           return (
                             <Combobox.Item key={region} value={region}>
                               <Combobox.ItemIndicator>
-                                <Check className="size-3" />
+                                <CheckIcon />
                               </Combobox.ItemIndicator>
                               <span className="col-start-2">{region}</span>
                             </Combobox.Item>
@@ -199,8 +200,8 @@ function TanstackForm() {
                         {(image: Image) => {
                           return (
                             <Autocomplete.Item key={image.url} value={image}>
-                              <span className="text-base leading-6">{image.name}</span>
-                              <span className="font-mono whitespace-nowrap text-xs leading-4 opacity-80">
+                              <span>{image.name}</span>
+                              <span className="font-mono whitespace-nowrap text-xs opacity-80">
                                 {image.url}
                               </span>
                             </Autocomplete.Item>
@@ -234,12 +235,12 @@ function TanstackForm() {
                 value={field.state.value}
                 onValueChange={field.handleChange}
               >
-                <div className="flex flex-col items-start gap-1">
+                <div className="w-fit space-y-1">
                   <Select.Label>Server type</Select.Label>
-                  <Select.Trigger className="!w-48" onBlur={field.handleBlur}>
+                  <Select.Trigger className="w-48" onBlur={field.handleBlur}>
                     <Select.Value />
                     <Select.Icon>
-                      <ChevronsUpDown className="size-4" />
+                      <CaretUpDownIcon />
                     </Select.Icon>
                   </Select.Trigger>
                 </div>
@@ -252,7 +253,7 @@ function TanstackForm() {
                           return (
                             <Select.Item key={value} value={value}>
                               <Select.ItemIndicator>
-                                <Check className="size-3" />
+                                <CheckIcon />
                               </Select.ItemIndicator>
                               <Select.ItemText>{label}</Select.ItemText>
                             </Select.Item>
@@ -291,11 +292,11 @@ function TanstackForm() {
                 <Field.Label>Number of instances</Field.Label>
                 <NumberField.Group>
                   <NumberField.Decrement>
-                    <Minus className="size-4" />
+                    <MinusIcon />
                   </NumberField.Decrement>
-                  <NumberField.Input className="!w-16" onBlur={field.handleBlur} />
+                  <NumberField.Input onBlur={field.handleBlur} />
                   <NumberField.Increment>
-                    <Plus className="size-4" />
+                    <PlusIcon />
                   </NumberField.Increment>
                 </NumberField.Group>
               </NumberField.Root>
@@ -332,7 +333,7 @@ function TanstackForm() {
                       minimumFractionDigits: 0,
                       maximumFractionDigits: 0,
                     }}
-                    className="w-98/100 gap-y-2"
+                    className="w-full gap-y-2"
                   />
                 }
               >
@@ -411,7 +412,7 @@ function TanstackForm() {
               dirty={field.state.meta.isDirty}
               touched={field.state.meta.isTouched}
             >
-              <Field.Label className="gap-4">
+              <Field.Label className="gap-2">
                 Restart on failure
                 <Switch.Root
                   checked={field.state.value}
@@ -452,7 +453,7 @@ function TanstackForm() {
                         <Field.Label className="uppercase">
                           <Checkbox.Root value={checkboxValue} onBlur={field.handleBlur}>
                             <Checkbox.Indicator>
-                              <Check className="size-3" />
+                              <CheckIcon />
                             </Checkbox.Indicator>
                           </Checkbox.Root>
                           {checkboxValue}
@@ -485,6 +486,73 @@ export default function App() {
   );
 }
 
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m2.5 8.5 4 4 7-9" />
+    </svg>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
+    </svg>
+  );
+}
+
+function MinusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13" />
+    </svg>
+  );
+}
+
 function isEmpty(object: Partial<Record<DeepKeys<FormValues>, ValidationError>>) {
   // eslint-disable-next-line
   for (const _ in object) {
diff --git a/docs/src/app/(docs)/react/handbook/styling/page.mdx b/docs/src/app/(docs)/react/handbook/styling/page.mdx
index 26e9ab8fa73..1c8b7f82165 100644
--- a/docs/src/app/(docs)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(docs)/react/handbook/styling/page.mdx
@@ -71,16 +71,16 @@ import { Menu } from '@base-ui/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
+      <Menu.Trigger className="flex h-8 items-center justify-center rounded-md border border-neutral-950 bg-white px-3 text-sm text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800 dark:focus-visible:outline-white">
         Song
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-none" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+        <Menu.Positioner className="outline-hidden" sideOffset={8}>
+          <Menu.Popup className="origin-(--transform-origin) border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden transition data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950">
               Add to Library
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950">
               Add to Playlist
             </Menu.Item>
           </Menu.Popup>
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
index bce91993d30..034f08297a8 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
@@ -4,30 +4,49 @@
   align-items: center;
   width: 14rem;
   padding-block: 0.75rem;
+  touch-action: none;
+  user-select: none;
 }
 
 .Track {
   width: 100%;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
   height: 0.25rem;
-  border-radius: 0.25rem;
-  position: relative;
+  background-color: oklch(92.2% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(26.9% 0 0deg);
+  }
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: oklch(14.5% 0 0deg);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  outline: 1px solid var(--color-gray-300);
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+  }
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
index 3a4e318ec89..ba3175820a0 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
@@ -6,10 +6,10 @@ export default function ExampleDirectionProvider() {
     <div dir="rtl">
       <DirectionProvider direction="rtl">
         <Slider.Root defaultValue={25}>
-          <Slider.Control className="flex w-56 items-center py-3">
-            <Slider.Track className="relative h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
-              <Slider.Indicator className="rounded-sm bg-gray-700" />
-              <Slider.Thumb className="size-4 rounded-full bg-white outline-1 outline-gray-300 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
+          <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
+            <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+              <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
+              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index 34d90ef0cb0..0ff2c35a2e3 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -7,25 +7,20 @@
 .ToggleRow {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .Label {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-}
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
 
-.Panel {
-  display: flex;
-  gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
-.Button {
+.Toggle {
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -34,70 +29,93 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 0;
-  border-radius: 0.25rem;
+  border: none;
+  border-radius: 0;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  @media (prefers-color-scheme: dark) {
+    color: white;
   }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
-  }
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
 
-  &[data-pressed] {
-    color: var(--color-gray-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
-}
 
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
-.LockButton {
+.Button {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1;
+  white-space: nowrap;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
index a2f998a9b4b..36b37bdf05f 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
@@ -19,26 +19,20 @@ export default function ExamplePreventBaseUIHandler() {
   return (
     <div className={styles.Container}>
       <div className={styles.ToggleRow}>
-        <div className={styles.Panel}>
-          <Toggle
-            aria-label="Favorite"
-            pressed={pressed}
-            onPressedChange={setPressed}
-            className={styles.Button}
-            render={(props, state) => (
-              <button type="button" {...getToggleProps(props)}>
-                {state.pressed ? (
-                  <HeartFilledIcon className={styles.Icon} />
-                ) : (
-                  <HeartOutlineIcon className={styles.Icon} />
-                )}
-              </button>
-            )}
-          />
-        </div>
+        <Toggle
+          aria-label="Favorite"
+          pressed={pressed}
+          onPressedChange={setPressed}
+          className={styles.Toggle}
+          render={(props, state) => (
+            <button type="button" {...getToggleProps(props)}>
+              {state.pressed ? <HeartFilledIcon /> : <HeartOutlineIcon />}
+            </button>
+          )}
+        />
         <span className={styles.Label}>Favorite {locked ? '(locked)' : '(unlocked)'}</span>
       </div>
-      <button type="button" className={styles.LockButton} onClick={() => setLocked((l) => !l)}>
+      <button type="button" className={styles.Button} onClick={() => setLocked((l) => !l)}>
         {locked ? 'Unlock' : 'Lock'}
       </button>
     </div>
@@ -47,7 +41,14 @@ export default function ExamplePreventBaseUIHandler() {
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -55,11 +56,18 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M7.99961 4.8232L7.24456 4.06654C6.84123 3.66235 6.18866 3.20003 5.33294 3.20003C3.86391 3.20003 2.66628 4.39767 2.66628 5.8667C2.66628 6.4079 2.91276 7.1023 3.41967 7.91383C3.91548 8.70759 4.59649 9.51244 5.31278 10.2503C6.38267 11.3525 7.47318 12.2465 7.99983 12.6605C8.52734 12.2456 9.61718 11.352 10.6864 10.2504C11.4027 9.51248 12.0837 8.70762 12.5796 7.91384C13.0865 7.1023 13.3329 6.4079 13.3329 5.8667C13.3329 4.39723 12.1354 3.20003 10.6663 3.20003C9.81056 3.20003 9.15799 3.66235 8.75466 4.06654L7.99961 4.8232ZM7.98574 3.29926C7.48264 2.79938 6.57901 2.13336 5.33294 2.13336C3.27481 2.13336 1.59961 3.80856 1.59961 5.8667C1.59961 9.1963 7.43321 13.5766 7.68121 13.7611C7.77561 13.8315 7.88761 13.8667 7.99961 13.8667C8.11161 13.8667 8.22361 13.8315 8.31801 13.7616C8.56601 13.5766 14.3996 9.1963 14.3996 5.8667C14.3996 3.80803 12.7244 2.13336 10.6663 2.13336C9.42013 2.13336 8.51645 2.79947 8.01337 3.29936C8.00877 3.30393 8.00421 3.30849 7.99967 3.31303C7.99965 3.31305 7.99963 3.31307 7.99961 3.3131C7.99502 3.3085 7.9904 3.30389 7.98574 3.29926Z"
+        d="m7.99961 4.8232-.75505-.75666c-.40333-.40419-1.0559-.86651-1.91162-.86651-1.46903 0-2.66666 1.19764-2.66666 2.66667 0 .5412.24648 1.2356.75339 2.04713.49581.79376 1.17682 1.59861 1.89311 2.33647 1.06989 1.1022 2.1604 1.9962 2.68705 2.4102.52751-.4149 1.61735-1.3085 2.68657-2.4101.7163-.73792 1.3973-1.54278 1.8932-2.33656.5069-.81154.7533-1.50594.7533-2.04714 0-1.46947-1.1975-2.66667-2.6666-2.66667-.85574 0-1.50831.46232-1.91164.86651zm-.01387-1.52394c-.5031-.49988-1.40673-1.1659-2.6528-1.1659-2.05813 0-3.73333 1.6752-3.73333 3.73334 0 3.3296 5.8336 7.7099 6.0816 7.8944a.532.532 0 0 0 .3184.1056c.112 0 .224-.0352.3184-.1051.248-.185 6.08159-4.5653 6.08159-7.8949 0-2.05867-1.6752-3.73334-3.7333-3.73334-1.24617 0-2.14985.66611-2.65293 1.166q-.0069.00686-.0137.01367c.00002-.00003-.00002.00002 0 0-.00459-.0046-.00927-.00914-.01393-.01377"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
index 5e10a3d4c3a..41c83f06e11 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
@@ -3,43 +3,68 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
-  & span {
-    font-variant-numeric: tabular-nums;
-    display: inline-block;
-    text-align: end;
-    min-width: 2.5ch;
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
+.count {
+  display: inline-block;
+  min-width: 2ch;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
 .suffix {
-  margin-left: 0.125rem;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 1px solid currentColor;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1rem;
+  text-transform: uppercase;
 }
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.tsx b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
index 7d8d231fbf5..3937ba7cdc4 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
@@ -22,7 +22,7 @@ function Counter(props: CounterProps) {
     type: 'button',
     children: (
       <React.Fragment>
-        Counter: <span>{count}</span>
+        Counter: <span className={styles.count}>{count}</span>
       </React.Fragment>
     ),
     onClick() {
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
index 192b221ea0a..6a72cdc0224 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
@@ -1,7 +1,11 @@
 .Text {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-900);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 
   strong& {
     font-weight: 700;
diff --git a/docs/src/app/(private)/experiments/combobox/dialog-combobox.module.css b/docs/src/app/(private)/experiments/combobox/dialog-combobox.module.css
index 3fdd39c641b..2edae647bd8 100644
--- a/docs/src/app/(private)/experiments/combobox/dialog-combobox.module.css
+++ b/docs/src/app/(private)/experiments/combobox/dialog-combobox.module.css
@@ -91,7 +91,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 500;
 }
 
diff --git a/docs/src/app/(private)/experiments/drawer/cross-axis-scroll.module.css b/docs/src/app/(private)/experiments/drawer/cross-axis-scroll.module.css
index 53332400934..6bb9c880ce9 100644
--- a/docs/src/app/(private)/experiments/drawer/cross-axis-scroll.module.css
+++ b/docs/src/app/(private)/experiments/drawer/cross-axis-scroll.module.css
@@ -10,7 +10,6 @@
   margin: 0;
   font-size: 1.5rem;
   line-height: 2rem;
-  letter-spacing: -0.01em;
 }
 
 .Description {
diff --git a/docs/src/app/(private)/experiments/mobile-scroll-lock.module.css b/docs/src/app/(private)/experiments/mobile-scroll-lock.module.css
index 7d75dec8d5c..2852a2a2cb5 100644
--- a/docs/src/app/(private)/experiments/mobile-scroll-lock.module.css
+++ b/docs/src/app/(private)/experiments/mobile-scroll-lock.module.css
@@ -82,7 +82,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 500;
 }
 
diff --git a/docs/src/app/(private)/experiments/popups/popups-in-popups.module.css b/docs/src/app/(private)/experiments/popups/popups-in-popups.module.css
index 547ea019dcf..fe720c91be3 100644
--- a/docs/src/app/(private)/experiments/popups/popups-in-popups.module.css
+++ b/docs/src/app/(private)/experiments/popups/popups-in-popups.module.css
@@ -122,7 +122,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 500;
 }
 
@@ -236,7 +235,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 500;
   text-align: center;
 }
diff --git a/docs/src/app/(website)/icons/MinusIcon.tsx b/docs/src/app/(website)/icons/MinusIcon.tsx
index 7360f021031..1ad616c7476 100644
--- a/docs/src/app/(website)/icons/MinusIcon.tsx
+++ b/docs/src/app/(website)/icons/MinusIcon.tsx
@@ -2,13 +2,18 @@ import * as React from 'react';
 
 export function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="20" viewBox="0 0 15 15" fill="none" className="Icon" {...props}>
-      <path
-        d="M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z"
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      className="Icon"
+      {...props}
+    >
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(website)/icons/PlusIcon.tsx b/docs/src/app/(website)/icons/PlusIcon.tsx
index 346e7ba536d..c6a081ef3f1 100644
--- a/docs/src/app/(website)/icons/PlusIcon.tsx
+++ b/docs/src/app/(website)/icons/PlusIcon.tsx
@@ -2,13 +2,18 @@ import * as React from 'react';
 
 export function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="20" viewBox="0 0 15 15" fill="none" className="Icon" {...props}>
-      <path
-        d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z"
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      className="Icon"
+      {...props}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/components/Accordion.css b/docs/src/components/Accordion.css
index 1711fc0ed91..b224b9172e0 100644
--- a/docs/src/components/Accordion.css
+++ b/docs/src/components/Accordion.css
@@ -65,7 +65,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       z-index: 1;
     }
 
diff --git a/docs/src/components/CodeBlock/CodeBlock.css b/docs/src/components/CodeBlock/CodeBlock.css
index e9655565026..4dfcbe6cd92 100644
--- a/docs/src/components/CodeBlock/CodeBlock.css
+++ b/docs/src/components/CodeBlock/CodeBlock.css
@@ -51,7 +51,7 @@
     /* Scroll containers may be focusable */
     &:focus-visible {
       position: relative;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
       z-index: 1;
     }
@@ -73,7 +73,15 @@
   }
 
   .CodeBlockViewport {
+    outline: 0;
+    border-bottom-right-radius: var(--radius-6);
+    border-bottom-left-radius: var(--radius-6);
     overscroll-behavior-x: contain;
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: 0;
+    }
   }
 
   .CodeBlockPreInline {
diff --git a/docs/src/components/Demo/Demo.css b/docs/src/components/Demo/Demo.css
index 5ba9ea7350c..007eccd35c0 100644
--- a/docs/src/components/Demo/Demo.css
+++ b/docs/src/components/Demo/Demo.css
@@ -28,14 +28,6 @@
     right: 1.125rem;
   }
 
-  .DemoCopyIconWrap {
-    display: flex;
-    width: 0.875rem;
-    height: 0.875rem;
-    align-items: center;
-    justify-content: center;
-  }
-
   .DemoPlayground {
     position: relative;
 
@@ -50,7 +42,7 @@
 
     /* Scroll containers may be focusable */
     &:focus-visible {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
       z-index: 1;
     }
@@ -68,11 +60,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
-    @media (--xs) {
-      padding: 3rem 1.5rem;
-      min-height: 11.25rem; /* Match .DemoCodeBlockRoot pre min-height */
-    }
   }
 
   .DemoToolbar {
@@ -103,7 +90,7 @@
     /* Scroll containers may be focusable */
     &:focus-visible {
       position: relative;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
       z-index: 1;
     }
@@ -156,7 +143,6 @@
 
   .DemoTab {
     font-family: var(--font-mono);
-    cursor: default;
     position: relative;
     z-index: 0;
     outline: 0;
diff --git a/docs/src/components/Demo/Demo.tsx b/docs/src/components/Demo/Demo.tsx
index b7a48324240..cf27e2514a7 100644
--- a/docs/src/components/Demo/Demo.tsx
+++ b/docs/src/components/Demo/Demo.tsx
@@ -213,9 +213,7 @@ export function Demo({
                 {externalPlaygroundLink}
                 <GhostButton aria-label="Copy code" onClick={demo.copy}>
                   Copy
-                  <span className="DemoCopyIconWrap">
-                    {copyTimeout ? <CheckIcon /> : <CopyIcon />}
-                  </span>
+                  {copyTimeout ? <CheckIcon /> : <CopyIcon />}
                 </GhostButton>
 
                 {githubUrl && (
@@ -234,18 +232,17 @@ export function Demo({
                         rel="noopener"
                         onClick={onViewSource}
                       >
-                        <GitHubIcon aria-hidden="true" height={14} width={14} />
+                        <GitHubIcon aria-hidden="true" />
                         View source on GitHub
+                        <ExternalLinkIcon aria-hidden="true" />
                       </Menu.LinkItem>
 
                       <Menu.Item closeOnClick={false} onClick={onCopySourceLink}>
-                        <span className="DemoCopyIconWrap">
-                          {sourceLinkCopied ? (
-                            <CheckIcon aria-hidden="true" />
-                          ) : (
-                            <CopyIcon aria-hidden="true" />
-                          )}
-                        </span>
+                        {sourceLinkCopied ? (
+                          <CheckIcon aria-hidden="true" />
+                        ) : (
+                          <CopyIcon aria-hidden="true" />
+                        )}
                         Copy link to source
                         <span className="sr-only" aria-live="polite">
                           {sourceLinkCopied && 'Link copied!'}
diff --git a/docs/src/components/Header.css b/docs/src/components/Header.css
index fce3d8cfd30..e71e46f5163 100644
--- a/docs/src/components/Header.css
+++ b/docs/src/components/Header.css
@@ -50,7 +50,7 @@
 
     &:focus-visible {
       z-index: 1;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -2px;
     }
 
@@ -101,7 +101,7 @@
 
     &:focus-visible {
       border-radius: var(--radius-6);
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
   }
diff --git a/docs/src/components/InstallationBlock/InstallationBlock.css b/docs/src/components/InstallationBlock/InstallationBlock.css
index f63441fd8a5..e5f4414ca88 100644
--- a/docs/src/components/InstallationBlock/InstallationBlock.css
+++ b/docs/src/components/InstallationBlock/InstallationBlock.css
@@ -52,7 +52,7 @@
     }
 
     &:focus-visible::before {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
   }
@@ -69,4 +69,14 @@
     pointer-events: none;
     grid-area: 1 / 1;
   }
+
+  .InstallationBlockTabPanel {
+    border-bottom-left-radius: var(--radius-4);
+    border-bottom-right-radius: var(--radius-4);
+    outline: 0;
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+    }
+  }
 }
diff --git a/docs/src/components/InstallationBlock/InstallationBlock.tsx b/docs/src/components/InstallationBlock/InstallationBlock.tsx
index 757ccc8cfb1..ff0b62ea2c1 100644
--- a/docs/src/components/InstallationBlock/InstallationBlock.tsx
+++ b/docs/src/components/InstallationBlock/InstallationBlock.tsx
@@ -51,7 +51,7 @@ export function InstallationBlock(props: InstallationBlockProps) {
         </CodeBlock.Panel>
 
         {INSTALLATION_PACKAGE_MANAGERS.map((pm) => (
-          <Tabs.Panel key={pm.value} value={pm.value}>
+          <Tabs.Panel key={pm.value} value={pm.value} className="InstallationBlockTabPanel">
             <CodeBlock.Pre>
               <Code className="language-bash">
                 <span className="frame">
diff --git a/docs/src/components/Menu.css b/docs/src/components/Menu.css
index 9da88541b1b..1e177208624 100644
--- a/docs/src/components/Menu.css
+++ b/docs/src/components/Menu.css
@@ -47,7 +47,6 @@
     z-index: 0;
     color: var(--gray-t2);
     text-decoration: none;
-    cursor: default;
 
     &[data-highlighted] {
       position: relative;
diff --git a/docs/src/components/MobileNav.css b/docs/src/components/MobileNav.css
index 66d62c5c02c..8274a168498 100644
--- a/docs/src/components/MobileNav.css
+++ b/docs/src/components/MobileNav.css
@@ -197,7 +197,7 @@
     padding-inline: var(--mobile-nav-item-padding-x);
 
     &:focus-visible {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
 
@@ -257,7 +257,7 @@
     backdrop-filter: blur(1rem);
 
     &:focus-visible {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
 
diff --git a/docs/src/components/QuickNav/QuickNav.css b/docs/src/components/QuickNav/QuickNav.css
index d3d6287b312..179bf741d68 100644
--- a/docs/src/components/QuickNav/QuickNav.css
+++ b/docs/src/components/QuickNav/QuickNav.css
@@ -62,6 +62,11 @@
 
     /* Scroll containers are focusable */
     outline: 0;
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: -2px;
+    }
   }
 
   .QuickNavScrollbar {
@@ -119,7 +124,7 @@
 
     &:focus-visible {
       z-index: 1;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -2px;
     }
 
diff --git a/docs/src/components/ReleaseTimeline/ReleaseTimeline.css b/docs/src/components/ReleaseTimeline/ReleaseTimeline.css
index d6ba06b3875..476c12a55b0 100644
--- a/docs/src/components/ReleaseTimeline/ReleaseTimeline.css
+++ b/docs/src/components/ReleaseTimeline/ReleaseTimeline.css
@@ -177,7 +177,7 @@
 
     &:focus-visible {
       border-radius: 0.125rem;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       text-decoration-line: none;
     }
   }
diff --git a/docs/src/components/ScrollArea.css b/docs/src/components/ScrollArea.css
index d9ff61afc5c..712053fc303 100644
--- a/docs/src/components/ScrollArea.css
+++ b/docs/src/components/ScrollArea.css
@@ -5,7 +5,7 @@
     /* Scroll containers may be focusable */
     &:focus-visible {
       position: relative;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
       z-index: 1;
     }
diff --git a/docs/src/components/Search/SearchBar.css b/docs/src/components/Search/SearchBar.css
index 424cc88c7b4..cef7df9e0f7 100644
--- a/docs/src/components/Search/SearchBar.css
+++ b/docs/src/components/Search/SearchBar.css
@@ -101,7 +101,7 @@
   }
 
   .SearchTrigger:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--gray-t2);
     outline-offset: -1px;
   }
 
@@ -331,7 +331,6 @@
   .SearchPopupContained {
     max-height: min(29.5rem, calc(100vh - 6rem));
     width: min(34rem, calc(100vw - 2rem));
-    overflow: hidden;
   }
 
   .SearchPopupDefault {
@@ -358,7 +357,13 @@
   .SearchHeadContained {
     flex-shrink: 0;
     border-bottom: 1px solid var(--gray-c1);
+    border-radius: 1rem 1rem 0 0;
     padding: 0.5rem 0.5rem 0.375rem;
+
+    &:has(.SearchInput:focus-visible) {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: -1px;
+    }
   }
 
   .SearchHeadDefault {
@@ -377,7 +382,11 @@
     display: flex;
     min-height: 0;
     flex: 1;
-    overflow: hidden;
+
+    &:has(.SearchScrollAreaViewport:focus-visible) {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: -1px;
+    }
   }
 
   .SearchScrollAreaViewport {
@@ -387,6 +396,7 @@
     overscroll-behavior: contain;
     scroll-padding-top: 2.25rem;
     scroll-padding-bottom: 0.5rem;
+    outline: none;
   }
 
   .SearchList {
@@ -433,6 +443,11 @@
   .SearchRootScrollable {
     height: 100%;
     overscroll-behavior: contain;
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: -2px;
+    }
   }
 
   .SearchRootScrollable[data-ending-style] {
diff --git a/docs/src/components/Search/SearchBar.tsx b/docs/src/components/Search/SearchBar.tsx
index c0bea0adf87..13576581e1c 100644
--- a/docs/src/components/Search/SearchBar.tsx
+++ b/docs/src/components/Search/SearchBar.tsx
@@ -13,8 +13,9 @@ import { Button } from '@base-ui/react/button';
 import { Dialog } from '@base-ui/react/dialog';
 import { ScrollArea } from '@base-ui/react/scroll-area';
 import { isMac } from '@base-ui/utils/detectBrowser';
-import { CornerDownLeft, Search } from 'lucide-react';
+import { CornerDownLeft } from 'lucide-react';
 import { useGoogleAnalytics } from 'docs/src/blocks/GoogleAnalyticsProvider';
+import { MagnifyingGlassIcon } from 'docs/src/icons/MagnifyingGlassIcon';
 import { stringToUrl } from '../QuickNav/rehypeSlug.mjs';
 import './SearchBar.css';
 
@@ -321,7 +322,7 @@ export function SearchBar({
   const searchInput = React.useMemo(
     () => (
       <div className="SearchInputRoot">
-        <Search className="SearchInputIcon" />
+        <MagnifyingGlassIcon className="SearchInputIcon" />
         <Autocomplete.Input
           id="search-input"
           ref={inputRef}
@@ -371,7 +372,7 @@ export function SearchBar({
   return (
     <React.Fragment>
       <Button onClick={handleOpenDialog} aria-label="Search" className={`SearchTrigger`}>
-        <Search className="SearchTriggerIcon" />
+        <MagnifyingGlassIcon className="SearchTriggerIcon" />
         <div className="SearchTriggerKbd">
           {showCmdSymbol ? (
             <kbd className="SearchTriggerCmd">⌘</kbd>
diff --git a/docs/src/components/Select.css b/docs/src/components/Select.css
index e701833e61a..0f64a3316f5 100644
--- a/docs/src/components/Select.css
+++ b/docs/src/components/Select.css
@@ -45,7 +45,7 @@
     z-index: 0;
 
     /* Spacing is built into the grid (it's a bit easier this way) */
-    grid-template-columns: 0.625rem 0.75rem 0.375rem auto 1.75rem;
+    grid-template-columns: 0.625rem 1rem 0.375rem auto 1.75rem;
 
     &[data-highlighted] {
       position: relative;
@@ -73,7 +73,7 @@
     @media (pointer: coarse) {
       font-size: var(--font-size-15);
       height: 2.25rem;
-      grid-template-columns: 0.5rem 0.75rem 0.5rem auto 1.5rem;
+      grid-template-columns: 0.5rem 1rem 0.5rem auto 1.5rem;
     }
   }
 
diff --git a/docs/src/components/Select.tsx b/docs/src/components/Select.tsx
index b4fbc9e9534..17d4227a4b6 100644
--- a/docs/src/components/Select.tsx
+++ b/docs/src/components/Select.tsx
@@ -1,7 +1,7 @@
 import { Select } from '@base-ui/react/select';
 import clsx from 'clsx';
-import { ChevronDownIcon } from '../icons/ChevronDownIcon';
-import { ThickCheckIcon } from '../icons/ThickCheckIcon';
+import { CaretSortIcon } from '../icons/CaretSortIcon';
+import { CheckIcon } from '../icons/CheckIcon';
 import './Select.css';
 
 export const Root = Select.Root;
@@ -15,7 +15,7 @@ export function Trigger({ className, children, ...props }: TriggerProps) {
     // Implicitly relying on <GhostButton>, keep it in sync
     <Select.Trigger data-layout="text" className="GhostButton" type={undefined} {...props}>
       <Select.Value>{children}</Select.Value>
-      <Select.Icon render={<ChevronDownIcon className="bui-ml--0.5" />} />
+      <Select.Icon render={<CaretSortIcon className="bui-ml--0.5" />} />
     </Select.Trigger>
   );
 }
@@ -33,7 +33,7 @@ export function Popup({ children, className, ...props }: Select.Positioner.Props
 export function Item({ children, className, ...props }: Select.Item.Props) {
   return (
     <Select.Item className={clsx('SelectItem', className)} {...props}>
-      <Select.ItemIndicator className="SelectItemIndicator" render={<ThickCheckIcon />} />
+      <Select.ItemIndicator className="SelectItemIndicator" render={<CheckIcon />} />
       <Select.ItemText className="SelectItemText">{children}</Select.ItemText>
     </Select.Item>
   );
diff --git a/docs/src/components/SideNav.css b/docs/src/components/SideNav.css
index 7e8bf277ffd..8050ae43e5f 100644
--- a/docs/src/components/SideNav.css
+++ b/docs/src/components/SideNav.css
@@ -47,7 +47,7 @@
       inset: 0;
       pointer-events: none;
       position: absolute;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -2px;
       /* Don't inset the outline on the right */
       right: -2px;
@@ -135,7 +135,7 @@
 
     &:focus-visible {
       z-index: 1;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
   }
diff --git a/docs/src/components/SkipNav.css b/docs/src/components/SkipNav.css
index 7e752e3ebc8..bcdd08ca5df 100644
--- a/docs/src/components/SkipNav.css
+++ b/docs/src/components/SkipNav.css
@@ -30,7 +30,7 @@
       text-underline-offset: 2px;
       text-decoration-thickness: 1px;
       text-decoration-color: color-mix(in oklab, var(--color-blue), transparent);
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -2px;
       border-radius: var(--radius-4);
     }
diff --git a/docs/src/components/Subtitle/MarkdownLink.css b/docs/src/components/Subtitle/MarkdownLink.css
index 8c8885c883f..967050e25fa 100644
--- a/docs/src/components/Subtitle/MarkdownLink.css
+++ b/docs/src/components/Subtitle/MarkdownLink.css
@@ -19,7 +19,7 @@
   }
 
   .MarkdownLinkAnchor:focus-visible .MarkdownLink {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--gray-t2);
     outline-offset: -2px;
     border-radius: var(--radius-4);
   }
diff --git a/docs/src/components/TypeRef/TypeRef.css b/docs/src/components/TypeRef/TypeRef.css
index b522a368e8e..0e7b2dfcbab 100644
--- a/docs/src/components/TypeRef/TypeRef.css
+++ b/docs/src/components/TypeRef/TypeRef.css
@@ -4,16 +4,22 @@
     border: 0;
     background: transparent;
     padding: 0;
+    border-radius: var(--radius-4);
     font: inherit;
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-decoration-style: dotted;
     text-decoration-color: color-mix(in oklab, var(--color-violet), transparent);
     text-underline-offset: 3px;
-  }
 
-  .TypeRefTrigger:hover {
-    text-decoration-color: var(--color-violet);
+    &:hover {
+      text-decoration-color: var(--color-violet);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: 2px;
+    }
   }
 
   .TypeRefPopup {
diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index f33f1542aed..e965074f218 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -25,12 +25,6 @@
 /* `source(none)` disables automatic detection of sources to generate Tailwind classes. Use the safelist below instead. */
 @import 'tailwindcss/utilities' layer(utilities) source(none);
 
-/* ═══ Demo-specific theme ═══ */
-/* We defined grays, red, and blue in the theme used for demos. */
-/* Uses gray scale that is roughly compatible with Tailwind's grays. */
-/* This is injected in demos when opening in a sandbox like StackBlitz. */
-@import '../demo-data/theme/css-modules/theme.css' layer(theme);
-
 /* ═══ Docs-only imports ═══ */
 
 @import './fonts/index.css';
@@ -50,11 +44,14 @@
 
 /* ═══ Safelist to generate Tailwind classes ═══ */
 
-@source '../app/(docs)/react/**/demos/**/*.{ts,tsx}';
+/* Tailwind demos */
+@source '../app/(docs)/**/demos/**/*.{ts,tsx}';
+
+/* Enable all CSS files in the docs to ensure that all Tailwind CSS vars are available e.g. `--font-serif` */
+@source '../**/*.css';
 
-/* Temporary sources until Tailwind CSS vars are no longer used in them */
-@source './mdx-components.css';
-@source '../src/components/**/*.css';
+/* Disable Tailwind CSS vars in CSS Modules demos */
+@source not '../app/(docs)/**/demos/**/*.css';
 
 /* ═══ Tailwind theme ═══ */
 /* Register demo-relevant tokens so Tailwind can generate utility classes. */
@@ -67,70 +64,32 @@
   --color-white: white;
   --color-black: black;
 
-  /* Gray, red and blue colors defined in file://../demo-data/theme/css-modules/theme.css */
-  --color-gray-50: inherit;
-  --color-gray-100: inherit;
-  --color-gray-200: inherit;
-  --color-gray-300: inherit;
-  --color-gray-400: inherit;
-  --color-gray-500: inherit;
-  --color-gray-600: inherit;
-  --color-gray-700: inherit;
-  --color-gray-800: inherit;
-  --color-gray-900: inherit;
-  --color-gray-950: inherit;
-
-  --color-blue: inherit;
-  --color-red: inherit;
-
-  --color-blue-800: var(--color-blue);
-  --color-red-800: var(--color-red);
+  --color-neutral-50: oklch(98.5% 0 0deg);
+  --color-neutral-100: oklch(97% 0 0deg);
+  --color-neutral-200: oklch(92.2% 0 0deg);
+  --color-neutral-300: oklch(87% 0 0deg);
+  --color-neutral-400: oklch(70.8% 0 0deg);
+  --color-neutral-500: oklch(55.6% 0 0deg);
+  --color-neutral-600: oklch(43.9% 0 0deg);
+  --color-neutral-700: oklch(37.1% 0 0deg);
+  --color-neutral-800: oklch(26.9% 0 0deg);
+  --color-neutral-900: oklch(20.5% 0 0deg);
+  --color-neutral-950: oklch(14.5% 0 0deg);
+
+  --color-blue-500: oklch(62.3% 0.214 259.815deg);
+  --color-blue-700: oklch(48.8% 0.243 264.376deg);
+  --color-blue-800: oklch(42.4% 0.199 265.638deg);
+
+  --color-red-400: oklch(70.4% 0.191 22.216deg);
+  --color-red-700: oklch(50.5% 0.213 27.518deg);
+
+  --color-green-400: oklch(79.2% 0.209 151.711deg);
+  --color-green-700: oklch(52.7% 0.154 150.069deg);
 
   /* Typography */
   --font-mono: 'Paper Mono', monospace;
   --font-sans: 'die grotesk a', system-ui, sans-serif;
-  --font-sans-b: 'die grotesk b', system-ui, sans-serif;
   --font-serif: Georgia, 'Times New Roman', Times, 'Noto Serif', 'DejaVu Serif', serif;
-
-  --text-xs: 0.8125rem;
-  --text-xs--line-height: 1.25rem;
-  --text-xs--letter-spacing: 0.001em;
-
-  --text-sm: 0.875rem;
-  --text-sm--line-height: 1.25rem;
-  --text-sm--letter-spacing: 0.016em;
-
-  --text-base: 1rem;
-  --text-base--line-height: 1.5rem;
-  --text-base--letter-spacing: 0em;
-
-  --text-lg: 1.125rem;
-  --text-lg--line-height: 1.75rem;
-  --text-lg--letter-spacing: -0.0025em;
-
-  --text-xl: 1.3125rem;
-  --text-xl--line-height: 1.625rem;
-  --text-xl--letter-spacing: -0.005em;
-
-  --text-2xl: 1.5rem;
-  --text-2xl--line-height: 1.25;
-  --text-2xl--letter-spacing: -0.0125em;
-
-  --text-3xl: 1.875rem;
-  --text-3xl--line-height: 1.2;
-  --text-3xl--letter-spacing: -0.015em;
-
-  --text-4xl: 2.25rem;
-  --text-4xl--line-height: 2.5rem;
-  --text-4xl--letter-spacing: -0.015em;
-
-  --text-5xl: 3rem;
-  --text-5xl--line-height: 1;
-  --text-5xl--letter-spacing: -0.015em;
-
-  --text-6xl: 3.75rem;
-  --text-6xl--line-height: 0.95;
-  --text-6xl--letter-spacing: -0.015em;
 }
 
 /* ═══ Demo isolation ═══ */
@@ -150,11 +109,6 @@
   [data-demo]:not([data-demo='tailwind']) * {
     all: revert-layer;
   }
-
-  [data-demo='tailwind'] {
-    --text-sm--letter-spacing: 0em;
-    --text-md--letter-spacing: 0em;
-  }
 }
 
 /* ═══ Docs-only theme tokens ═══ */
@@ -197,6 +151,10 @@
     --grape-t1: hsl(276deg 66% 54%);
     --lime-t1: hsl(91deg 64% 38.75%);
 
+    /* Legacy colors */
+    --color-blue: oklch(45% 50% 264deg);
+    --color-red: oklch(50% 55% 31deg);
+
     /* Functional colors */
     --color-content: white;
     --color-background: var(--gray-s2);
@@ -214,6 +172,9 @@
     --color-green: oklch(46% 30% 150deg);
     --color-violet: oklch(40% 60% 300deg);
 
+    /* Font family */
+    --font-sans-b: 'die grotesk b', system-ui, sans-serif;
+
     /* Font size */
     --font-size-13: 0.8125rem; /* 13px */
     --font-size-14: 0.875rem; /* 14px */
@@ -314,6 +275,9 @@
       --grape-t1: hsl(276deg 86% 70%);
       --lime-t1: hsl(91deg 72% 56%);
 
+      --color-blue: oklch(69% 50% 264deg);
+      --color-red: oklch(80% 55% 31deg);
+
       /* Functional colors */
       --color-content: black;
       --color-background: black;
diff --git a/docs/src/demo-data/theme/css-modules/index.ts b/docs/src/demo-data/theme/css-modules/index.ts
deleted file mode 100644
index 937e32ead26..00000000000
--- a/docs/src/demo-data/theme/css-modules/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import './theme.css';
-
-export function DemoThemeProvider({ children }: { children: React.ReactNode }) {
-  return children;
-}
diff --git a/docs/src/demo-data/theme/index.ts b/docs/src/demo-data/theme/index.ts
deleted file mode 100644
index 907d2be93cd..00000000000
--- a/docs/src/demo-data/theme/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createDemoGlobalWithVariants } from '@mui/internal-docs-infra/createDemoData';
-import type { DemoGlobalData } from '@mui/internal-docs-infra/createDemoData/types';
-import { DemoThemeProvider as CssModules } from './css-modules';
-
-export const DemoDataTheme: DemoGlobalData = createDemoGlobalWithVariants(import.meta.url, {
-  CssModules,
-});
diff --git a/docs/src/icons/CaretSortIcon.tsx b/docs/src/icons/CaretSortIcon.tsx
new file mode 100644
index 00000000000..45b6ac29274
--- /dev/null
+++ b/docs/src/icons/CaretSortIcon.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export function CaretSortIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/icons/CheckIcon.tsx b/docs/src/icons/CheckIcon.tsx
index 82d21412ec2..4adbb999ef6 100644
--- a/docs/src/icons/CheckIcon.tsx
+++ b/docs/src/icons/CheckIcon.tsx
@@ -1,11 +1,9 @@
-export function CheckIcon() {
+import * as React from 'react';
+
+export function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-      <path
-        d="M0.833008 4.64229L3.8336 8.12297L9.53471 1.50968"
-        stroke="currentColor"
-        strokeWidth="1.25"
-      />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" {...props}>
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/icons/ChevronDownIcon.tsx b/docs/src/icons/ChevronDownIcon.tsx
deleted file mode 100644
index 8ee99b3cf42..00000000000
--- a/docs/src/icons/ChevronDownIcon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" />
-    </svg>
-  );
-}
diff --git a/docs/src/icons/CopyIcon.tsx b/docs/src/icons/CopyIcon.tsx
index 2a419a48ac0..423677b88d7 100644
--- a/docs/src/icons/CopyIcon.tsx
+++ b/docs/src/icons/CopyIcon.tsx
@@ -1,10 +1,9 @@
 export function CopyIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-      <path
-        d="M1.5 1C0.675781 1 0 1.67578 0 2.5V10.5C0 11.3242 0.675781 12 1.5 12H3V12.5C3 13.3242 3.67578 14 4.5 14H12.5C13.3242 14 14 13.3242 14 12.5V4.5C14 3.67578 13.3242 3 12.5 3H11V2.5C11 1.67578 10.3242 1 9.5 1H1.5ZM1.5 2H9.5C9.78125 2 10 2.21875 10 2.5V10.5C10 10.7812 9.78125 11 9.5 11H1.5C1.21875 11 1 10.7812 1 10.5V2.5C1 2.21875 1.21875 2 1.5 2ZM11 4H12.5C12.7812 4 13 4.21875 13 4.5V12.5C13 12.7812 12.7812 13 12.5 13H4.5C4.21875 13 4 12.7812 4 12.5V12H9.5C10.3242 12 11 11.3242 11 10.5V4Z"
-        transform="translate(0 -1)"
-      />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
+      <path strokeLinecap="square" d="M1.5 1.5h10v10h-10z" />
+      <path strokeLinecap="square" d="M4.5 11.5h-3v-10h10v3" />
+      <path d="M12 4.5h2.5v10h-10V12" />
     </svg>
   );
 }
diff --git a/docs/src/icons/ExternalLinkIcon.tsx b/docs/src/icons/ExternalLinkIcon.tsx
index 5ed4d0b3418..b283e2ddf76 100644
--- a/docs/src/icons/ExternalLinkIcon.tsx
+++ b/docs/src/icons/ExternalLinkIcon.tsx
@@ -2,11 +2,9 @@ import * as React from 'react';
 
 export function ExternalLinkIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" {...props}>
-      <path
-        transform="translate(0, -0.5)"
-        d="M7 2V3H10.293L4.02344 9.27344L4.72656 9.97656L11 3.70703V7H12V2H7ZM2 4C0.894531 4 0 4.89453 0 6V12C0 13.1055 0.894531 14 2 14H8C9.10547 14 10 13.1055 10 12V7L9 8V12C9 12.5508 8.55078 13 8 13H2C1.44922 13 1 12.5508 1 12V6C1 5.44922 1.44922 5 2 5H6L7 4H2Z"
-      />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" {...props}>
+      <path strokeLinecap="square" strokeLinejoin="round" d="m4 12 8-8" />
+      <path d="M5 3.5h7.5V11" />
     </svg>
   );
 }
diff --git a/docs/src/icons/GitHubIcon.tsx b/docs/src/icons/GitHubIcon.tsx
index e7d2c30bd00..ee87c7f9bf6 100644
--- a/docs/src/icons/GitHubIcon.tsx
+++ b/docs/src/icons/GitHubIcon.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 
 export function GitHubIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor" {...props}>
-      <path d="M9.375 0C4.6095 0 0.75 3.8595 0.75 8.625C0.75 12.4418 3.219 15.6652 6.64725 16.8075C7.0785 16.8832 7.23975 16.6245 7.23975 16.398C7.23975 16.1933 7.22925 15.5145 7.22925 14.7915C5.0625 15.1905 4.50225 14.2635 4.32975 13.779C4.23225 13.5308 3.81225 12.765 3.44475 12.5602C3.14325 12.3982 2.712 11.9993 3.43425 11.9888C4.11375 11.9783 4.599 12.6142 4.761 12.873C5.53725 14.178 6.777 13.8105 7.27275 13.584C7.34775 13.0237 7.57425 12.6465 7.8225 12.4305C5.90325 12.2153 3.8985 11.4713 3.8985 8.172C3.8985 7.2345 4.23225 6.45825 4.782 5.8545C4.69575 5.6385 4.39425 4.75425 4.86825 3.5685C4.86825 3.5685 5.5905 3.342 7.2405 4.45275C7.9305 4.2585 8.66325 4.16175 9.39675 4.16175C10.1295 4.16175 10.863 4.25925 11.553 4.45275C13.203 3.3315 13.9245 3.5685 13.9245 3.5685C14.3993 4.75425 14.097 5.6385 14.0107 5.8545C14.5605 6.45825 14.895 7.22325 14.895 8.172C14.895 11.4818 12.879 12.2145 10.9598 12.4305C11.2725 12.7005 11.5417 13.218 11.5417 14.0265C11.5417 15.18 11.5312 16.107 11.5312 16.398C11.5312 16.6245 11.6933 16.8945 12.1238 16.8083C15.5318 15.6652 18 12.4305 18 8.625C18 3.8595 14.1405 0 9.375 0Z" />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 0C3.57983 0 0 3.67031 0 8.20221c0 3.62969 2.29009 6.69509 5.46991 7.78139.4.072.54957-.174.54957-.3894 0-.1947-.00974-.8402-.00974-1.5278-2.00974.3795-2.52939-.5021-2.68939-.9628-.09044-.2361-.48-.9643-.82087-1.1591-.27965-.1541-.67965-.5334-.00974-.5434.63026-.01 1.08035.5948 1.23061.8409.72 1.241 1.86991.8915 2.32974.6761.06956-.5328.27965-.8915.50991-1.0969-1.78017-.2047-3.63965-.9122-3.63965-4.04979 0-.89154.30956-1.62974.81948-2.20389-.08-.20542-.35966-1.04632.08-2.17395 0 0 .66991-.21539 2.20034.84091.64-.18473 1.31966-.27674 2-.27674.67966 0 1.36.09272 2.00003.27674 1.5304-1.06629 2.1996-.84091 2.1996-.84091.4404 1.12763.16 1.96853.08 2.17395.5099.57415.8202 1.30165.8202 2.20389 0 3.14759-1.8699 3.84439-3.65004 4.04979.29004.2567.53974.7489.53974 1.5177 0 1.097-.00975 1.9785-.00975 2.2553 0 .2154.15035.4721.54965.3902C13.7107 14.8973 16 11.8212 16 8.20221 16 3.67031 12.4202 0 8 0" />
     </svg>
   );
 }
diff --git a/docs/src/icons/MagnifyingGlassIcon.tsx b/docs/src/icons/MagnifyingGlassIcon.tsx
new file mode 100644
index 00000000000..3e84e1eeddc
--- /dev/null
+++ b/docs/src/icons/MagnifyingGlassIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m11 11 3.5 3.5" />
+      <circle cx="7" cy="7" r="5.5" />
+    </svg>
+  );
+}
diff --git a/docs/src/icons/MarkdownIcon.tsx b/docs/src/icons/MarkdownIcon.tsx
index 71bdb997c19..df0552f8b80 100644
--- a/docs/src/icons/MarkdownIcon.tsx
+++ b/docs/src/icons/MarkdownIcon.tsx
@@ -2,10 +2,9 @@ import * as React from 'react';
 
 export function MarkdownIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <title>Markdown</title>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
       <path
-        d="M22.269 19.385H1.731a1.73 1.73 0 0 1-1.73-1.73V6.345a1.73 1.73 0 0 1 1.73-1.73h20.538a1.73 1.73 0 0 1 1.73 1.73v11.308a1.73 1.73 0 0 1-1.73 1.731zm-16.5-3.462v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.461v7.847zM21.231 12h-2.308V8.077h-2.307V12h-2.308l3.461 4.039z"
+        d="M14.846 12.9233H1.154a1.153 1.153 0 0 1-.44136-.0878 1.152 1.152 0 0 1-.37416-.25 1.153 1.153 0 0 1-.25002-.3741 1.154 1.154 0 0 1-.08779-.4414V4.22999A1.15335 1.15335 0 0 1 1.154 3.07666h13.692c.1515 0 .3014.02983.4414.08779a1.1535 1.1535 0 0 1 .7119 1.06554v7.53871c.0001.1515-.0296.3015-.0876.4415-.0579.14-.1428.2673-.2499.3744a1.153 1.153 0 0 1-.3743.2502c-.14.058-.29.0885-.4415.0885m-11-2.308V7.61533l1.53867 1.92333 1.538-1.92333v2.99997h1.53867V5.38533H6.92267l-1.538 1.92333L3.846 5.38533H2.30734v5.23137zm10.308-2.61531h-1.5387V5.38466h-1.538v2.61533H9.53867L11.846 10.6927z"
         fill="currentColor"
       />
     </svg>
diff --git a/docs/src/icons/MoreVertIcon.tsx b/docs/src/icons/MoreVertIcon.tsx
index bc364a06349..8c3fc240b16 100644
--- a/docs/src/icons/MoreVertIcon.tsx
+++ b/docs/src/icons/MoreVertIcon.tsx
@@ -2,10 +2,8 @@ import * as React from 'react';
 
 export function MoreVertIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" {...props}>
-      <circle cx="7" cy="2.5" r="1.25" />
-      <circle cx="7" cy="7" r="1.25" />
-      <circle cx="7" cy="11.5" r="1.25" />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M9.5 13c0 .8284-.67157 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.67157-1.5 1.5-1.5 1.5.6716 1.5 1.5m0-5c0 .82843-.67157 1.5-1.5 1.5S6.5 8.82843 6.5 8 7.17157 6.5 8 6.5s1.5.67157 1.5 1.5m0-5c0 .82843-.67157 1.5-1.5 1.5S6.5 3.82843 6.5 3 7.17157 1.5 8 1.5s1.5.67157 1.5 1.5" />
     </svg>
   );
 }
diff --git a/docs/src/icons/NpmIcon.tsx b/docs/src/icons/NpmIcon.tsx
index a55213c9ab2..e49cb6f067a 100644
--- a/docs/src/icons/NpmIcon.tsx
+++ b/docs/src/icons/NpmIcon.tsx
@@ -3,7 +3,9 @@ import * as React from 'react';
 export function NpmIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" {...props}>
-      <path fillRule="evenodd" clipRule="evenodd" d="M0 0V16H16V0H0ZM13 3H3V13H8V5H11V13H13V3Z" />
+      <rect width="16" height="16" fill="black" />
+      <rect x="3" y="3" width="10" height="10" fill="white" />
+      <path d="M8 5H11V13H8V5Z" fill="black" />
     </svg>
   );
 }
diff --git a/docs/src/icons/ThickCheckIcon.tsx b/docs/src/icons/ThickCheckIcon.tsx
deleted file mode 100644
index e9d6450a584..00000000000
--- a/docs/src/icons/ThickCheckIcon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export function ThickCheckIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="12" height="12" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/utils/createDemo.ts b/docs/src/utils/createDemo.ts
index 438dfcaf873..fb6aa536bc8 100644
--- a/docs/src/utils/createDemo.ts
+++ b/docs/src/utils/createDemo.ts
@@ -6,9 +6,6 @@ import {
 } from '@mui/internal-docs-infra/abstractCreateDemo';
 
 import { Demo as DemoContent } from '../components/Demo/Demo';
-import { DemoDataTheme } from '../demo-data/theme';
-
-const demoGlobalData = [DemoDataTheme];
 
 /**
  * Creates a demo component for displaying code examples with syntax highlighting.
@@ -18,7 +15,6 @@ const demoGlobalData = [DemoDataTheme];
  */
 export const createDemo = createDemoFactory({
   DemoContent,
-  demoGlobalData,
 });
 
 /**
@@ -30,5 +26,4 @@ export const createDemo = createDemoFactory({
  */
 export const createDemoWithVariants = createDemoWithVariantsFactory({
   DemoContent,
-  demoGlobalData,
 });
diff --git a/docs/src/utils/demoExportOptions.ts b/docs/src/utils/demoExportOptions.ts
index daa74fb89f3..2b42717db1b 100644
--- a/docs/src/utils/demoExportOptions.ts
+++ b/docs/src/utils/demoExportOptions.ts
@@ -8,7 +8,11 @@ import { ExportConfig } from '@mui/internal-docs-infra/useDemo';
 
 const defaultStylesLink = `<link rel="stylesheet" href="demo.css" />`;
 const htmlHeadWithDefaultStyles: ExportConfig['headTemplate'] = () => defaultStylesLink;
-const demoCss = `body {
+const demoCss = `:root {
+  color-scheme: light dark;
+}
+
+body {
   font-family: system-ui;
   margin: 0;
 
@@ -26,10 +30,6 @@ const demoCss = `body {
 }
 `;
 
-// CSS Modules Theme Styles (src/demo-data/theme)
-const themeStylesLink = `<link rel="stylesheet" href="theme.css" />`;
-const htmlHeadWithCssModulesTheme: ExportConfig['headTemplate'] = () => themeStylesLink;
-
 // Tailwind CSS Setup
 const tailwindSetup = `
 <!-- Check out the Tailwind CSS' installation guide for setting it up: https://tailwindcss.com/docs/installation/framework-guides -->
@@ -637,9 +637,7 @@ const htmlHeadWithTailwind: ExportConfig['headTemplate'] = ({ variant }) => {
 const htmlHeadTemplate: ExportConfig['headTemplate'] = (props) => {
   const head = [htmlHeadWithDefaultStyles(props)];
 
-  if (props.variantName === 'CssModules') {
-    head.push(htmlHeadWithCssModulesTheme(props));
-  } else if (props.variantName === 'Tailwind') {
+  if (props.variantName === 'Tailwind') {
     head.push(htmlHeadWithTailwind(props));
   }
 
@@ -651,23 +649,6 @@ const transformVariant: ExportConfig['transformVariant'] = (variant, variantName
   globals = { ...globals };
   globals['demo.css'] = { source: demoCss };
 
-  // Add color-scheme to the theme file if it exists
-  if (variantName === 'CssModules' && globals['theme.css']) {
-    const cssTheme = globals['theme.css'];
-    const source =
-      typeof cssTheme === 'object' && cssTheme.source && stringOrHastToString(cssTheme.source);
-    if (source) {
-      if (!source.includes(':root {')) {
-        throw new Error('Expected to find a ":root" selector in the demo theme file');
-      }
-
-      globals['theme.css'] = {
-        ...cssTheme,
-        source: source.replace(':root {', `:root {\n  color-scheme: light dark;\n`),
-      };
-    }
-  }
-
   return { globals };
 };
 
@@ -705,10 +686,6 @@ const transformVariantForCRA: ExportConfig['transformVariant'] = (
 
   const transformedGlobalsForCRA = { ...transformedGlobals };
 
-  if (variantName === 'CssModules') {
-    exposeMetadataToPublic(transformedGlobalsForCRA, 'theme.css');
-  }
-
   exposeMetadataToPublic(transformedGlobalsForCRA, 'demo.css');
 
   return {
diff --git a/test/regressions/TestViewer.tsx b/test/regressions/TestViewer.tsx
index 18d9309065b..afe784ae4ca 100644
--- a/test/regressions/TestViewer.tsx
+++ b/test/regressions/TestViewer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-function TestViewer(props: { children: React.ReactNode }) {
-  const { children } = props;
+function TestViewer(props: { children: React.ReactNode; isTailwind: boolean }) {
+  const { children, isTailwind } = props;
 
   // We're simulating `act(() => ReactDOM.render(children))`
   // In the end children passive effects should've been flushed.
@@ -35,16 +35,30 @@ function TestViewer(props: { children: React.ReactNode }) {
     };
   }, []);
 
+  // Tailwind demos rely on preflight's `box-sizing: border-box` for `*`, so we
+  // skip the content-box flip there — otherwise the demos render with wrong
+  // dimensions and don't represent what users actually see.
+  const boxSizingFlip = isTailwind
+    ? ''
+    : `
+    html {
+      box-sizing: content-box;
+    }
+
+    *, *::before, *::after {
+      box-sizing: inherit;
+    }
+  `;
+
   const globalStyles = `
     html {
       --webkit-font-smoothing: antialiased;
       --moz-osx-font-smoothing: grayscale;
-      /* Do the opposite of the docs in order to help catching issues. */
-      box-sizing: content-box;
     }
 
+    ${boxSizingFlip}
+
     *, *::before, *::after {
-      box-sizing: inherit;
       /* Disable transitions to avoid flaky screenshots */
       transition: none !important;
       animation: none !important;
diff --git a/test/regressions/fixtures.ts b/test/regressions/fixtures.ts
index ce57fe241fa..d6d32e81440 100644
--- a/test/regressions/fixtures.ts
+++ b/test/regressions/fixtures.ts
@@ -5,6 +5,7 @@ export interface Fixture {
   name: string;
   path: string;
   suite: string;
+  isTailwind: boolean;
 }
 
 // Get all the fixtures specifically written for preventing visual regressions.
@@ -27,6 +28,7 @@ for (const path in globbedRegressionFixtures) {
     suite: `regression-${suite}`,
     name,
     Component: globbedRegressionFixtures[path].default,
+    isTailwind: false,
   });
 }
 
@@ -93,6 +95,7 @@ for (const path in globbedDemos) {
       suite,
       name,
       Component: globbedDemos[path].default,
+      isTailwind: path.includes('/tailwind/'),
     });
   }
 }
diff --git a/test/regressions/main.tsx b/test/regressions/main.tsx
index aed485709c9..4b5c25508a6 100644
--- a/test/regressions/main.tsx
+++ b/test/regressions/main.tsx
@@ -7,13 +7,19 @@ import 'docs/src/css/index.css';
 
 const viewerRoot = document.getElementById('test-viewer');
 
-function FixtureRenderer({ component: FixtureComponent }: { component: React.ElementType }) {
+function FixtureRenderer({
+  component: FixtureComponent,
+  isTailwind,
+}: {
+  component: React.ElementType;
+  isTailwind: boolean;
+}) {
   const viewerReactRoot = React.useRef<ReactDOMClient.Root | null>(null);
 
   React.useLayoutEffect(() => {
     const renderTimeout = setTimeout(() => {
       const children = (
-        <TestViewer>
+        <TestViewer isTailwind={isTailwind}>
           <FixtureComponent />
         </TestViewer>
       );
@@ -32,7 +38,7 @@ function FixtureRenderer({ component: FixtureComponent }: { component: React.Ele
         viewerReactRoot.current = null;
       });
     };
-  }, [FixtureComponent]);
+  }, [FixtureComponent, isTailwind]);
 
   return null;
 }
@@ -78,7 +84,9 @@ function App() {
             <Route
               key={path}
               path={path}
-              element={<FixtureRenderer component={FixtureComponent} />}
+              element={
+                <FixtureRenderer component={FixtureComponent} isTailwind={fixture.isTailwind} />
+              }
             />
           );
         })}