ui phase 12

client/src/theme/theme.ts

@@ -82,6 +82,10 @@ function createAppTheme(direction: 'ltr' | 'rtl') {
         },
       },
       MuiDrawer: {
+        // Calm enter/exit for the side-nav + bottom-sheet uses (phase-12 motion pass) — same numbers as
+        // MuiDialog below, one place; the app-wide reduced-motion gate (globals.css) collapses MUI's own
+        // JS-driven transition durations regardless, so no per-drawer reduced-motion branch.
+        defaultProps: { transitionDuration: { enter: 200, exit: 120 } },
         styleOverrides: {
           paper: {
             backgroundColor: 'var(--bal-bg-default)',
@@ -158,6 +162,10 @@ function createAppTheme(direction: 'ltr' | 'rtl') {
         },
       },
       MuiDialog: {
+        // Calm enter/exit — one place for every dialog/bottom-sheet (phase-12 motion pass), mirroring
+        // --bal-motion-base/-fast (tokens.css); the app-wide reduced-motion gate (globals.css) collapses
+        // MUI's own JS-driven transition durations regardless, so no per-dialog reduced-motion branch.
+        defaultProps: { transitionDuration: { enter: 200, exit: 120 } },
         styleOverrides: {
           paper: {
             borderRadius: 'var(--bal-radius-lg)',
@@ -166,6 +174,12 @@ function createAppTheme(direction: 'ltr' | 'rtl') {
           },
         },
       },
+      MuiPopover: {
+        defaultProps: { transitionDuration: { enter: 200, exit: 120 } },
+      },
+      MuiMenu: {
+        defaultProps: { transitionDuration: { enter: 200, exit: 120 } },
+      },
       MuiTabs: {
         styleOverrides: {
           indicator: {

client/src/theme/tokens.css

@@ -51,6 +51,21 @@
   --bal-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/*
+ * Reduced motion — the token half of the single gate (globals.css carries the universal
+ * transition/animation-duration override that makes this bite even for consumers, like MUI's own
+ * Dialog/Drawer/Menu transitions, that don't read these custom properties directly). Zeroing the
+ * durations here too means anything that DOES read the token (this file's own consumers, any future
+ * one) needs no reduced-motion branch of its own.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --bal-motion-fast: 0ms;
+    --bal-motion-base: 0ms;
+    --bal-motion-slow: 0ms;
+  }
+}
+
 /* ── Light scheme — the unconditional default ──────────────────────────── */
 :root,
 [data-mui-color-scheme='light'] {