From a68cd170b0708137825729940b7294d63296b1df Mon Sep 17 00:00:00 2001
From: Max Yinger <max.yinger@clerk.dev>
Date: Fri, 14 Aug 2026 15:18:37 -0600
Subject: [PATCH] fix(ui): tokenise the Mosaic Menu item's transition duration

`item` was the last slot in `menu.styles.ts` still carrying a hardcoded
`150ms` / `0.01ms` pair. `--cl-duration-base` is 0.15s, so the fill lands
identically; the reduced-motion branch goes rather than moving with it,
since `item` transitions only `background-color` and a fill is not the
vestibular concern the signal is about. `Button` already transitions its
highlight the same way, and `tokens.stylex.ts` states the rule.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .changeset/menu-item-durations.md               |  2 ++
 .../src/mosaic/components/menu/menu.styles.ts   | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/menu-item-durations.md

diff --git a/.changeset/menu-item-durations.md b/.changeset/menu-item-durations.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/menu-item-durations.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/mosaic/components/menu/menu.styles.ts b/packages/ui/src/mosaic/components/menu/menu.styles.ts
index 5055f68e110..c9aff75ab64 100644
--- a/packages/ui/src/mosaic/components/menu/menu.styles.ts
+++ b/packages/ui/src/mosaic/components/menu/menu.styles.ts
@@ -1,6 +1,14 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, fontFamilyVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
+import {
+  colorVars,
+  durationVars,
+  fontFamilyVars,
+  fontWeightVars,
+  radiusVars,
+  space,
+  typeScaleVars,
+} from '../../tokens.stylex';
 
 export const styles = stylex.create({
   // Positioning is applied inline by the headless positioner; this only clears the
@@ -71,10 +79,9 @@ export const styles = stylex.create({
     opacity: { default: 1, ':is([data-disabled])': 0.5 },
     position: 'relative',
     textAlign: 'start',
-    transitionDuration: {
-      default: '150ms',
-      '@media (prefers-reduced-motion: reduce)': '0.01ms',
-    },
+    // Ungated: the only thing moving is a fill, which is not what `prefers-reduced-motion`
+    // is about. Matches `Button`, whose highlight transitions the same way.
+    transitionDuration: durationVars['--cl-duration-base'],
     transitionProperty: 'background-color',
     height: space['7'],
     width: '100%',