From 873c30dc8ada7a891dc23aa3da4b9d45311bdd67 Mon Sep 17 00:00:00 2001
From: OpenStaxClaude <tw33+clauderunner@rice.edu>
Date: Mon, 31 Aug 2026 13:09:37 +0000
Subject: [PATCH 1/4] CORE-2006: Migrate ProfileMenu and HelpMenu to plain CSS

Replaces the styled-components definitions in ProfileMenu/index.tsx and
HelpMenu/index.tsx with plain CSS files, following the hybrid approach used
by the other components in this migration: theme values stay in JavaScript
and are bound to CSS custom properties on the element, with the palette hex
as a fallback in the CSS.

No test changes: the snapshot flake this branch originally worked around is
gone from main, CORE-2715 (#138) and CORE-2716 (#139) having replaced both
component snapshots with targeted assertions. Those specs pass against the
migrated components unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/HelpMenu/HelpMenu.css       |  70 ++++++++++++
 src/components/HelpMenu/index.tsx          | 119 +++++++++------------
 src/components/ProfileMenu/ProfileMenu.css |  44 ++++++++
 src/components/ProfileMenu/index.tsx       |  90 +++++++++-------
 4 files changed, 220 insertions(+), 103 deletions(-)
 create mode 100644 src/components/HelpMenu/HelpMenu.css
 create mode 100644 src/components/ProfileMenu/ProfileMenu.css

diff --git a/src/components/HelpMenu/HelpMenu.css b/src/components/HelpMenu/HelpMenu.css
new file mode 100644
index 000000000..2af02f2b1
--- /dev/null
+++ b/src/components/HelpMenu/HelpMenu.css
@@ -0,0 +1,70 @@
+/* HelpMenu trigger button */
+.help-menu-button {
+  color: var(--help-menu-button-color, #5e5e5e);
+  font-size: 1.4rem;
+}
+
+/* HelpMenu menu item */
+.help-menu-item {
+  color: var(--help-menu-item-color, #424242);
+  text-decoration: none;
+}
+
+/* The compound selector keeps the override of .navbar-menu-item:focus-visible
+   independent of stylesheet order */
+.navbar-menu-item.help-menu-item:focus-visible {
+  outline: 0;
+  background: var(--help-menu-item-focus-bg, #f1f1f1);
+}
+
+.help-menu-item:hover {
+  color: var(--help-menu-item-color, #424242);
+  text-decoration: none;
+}
+
+/* Contact form iframe, portaled to the body */
+.help-menu-iframe-wrapper {
+  background-color: var(--help-menu-iframe-wrapper-bg, #f5f5f5);
+  position: absolute;
+  width: 100%;
+  top: 4rem;
+  left: 0;
+  bottom: 0;
+  z-index: 20;
+}
+
+.help-menu-iframe {
+  border: 0;
+  width: 100%;
+  height: calc(100% - 5rem);
+}
+
+/* Bar with the "Back" button that puts the contact form away */
+.help-menu-put-away {
+  border-top: 0.1rem solid var(--help-menu-put-away-border-color, #d5d5d5);
+  width: 100%;
+  height: 5.6rem;
+  display: flex;
+  align-items: center;
+  background-color: var(--help-menu-put-away-bg, #f5f5f5);
+  padding-left: 1.5rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+}
+
+@media (min-width: 56em) {
+  .help-menu-put-away {
+    padding: 0 calc(50vw - 43rem);
+  }
+}
+
+.help-menu-put-away button {
+  height: 3rem;
+  background-color: var(--help-menu-put-away-button-bg, #ffffff);
+  border: 1px solid var(--help-menu-put-away-button-border-color, #d5d5d5);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  width: 9rem;
+  border-radius: 0.5rem;
+}
diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index c4ad9c382..15a07e166 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -1,48 +1,62 @@
 import React from 'react';
-import { NavBarMenuButton, NavBarMenuItem } from '../NavBarMenuButtons';
+import classNames from 'classnames';
+import { NavBarBaseButtonProps, NavBarMenuButton, NavBarMenuItem } from '../NavBarMenuButtons';
 import { colors } from '../../theme';
-import styled from 'styled-components';
 import { BodyPortal } from '../BodyPortal';
+import { CSSPropertiesWithVariables } from '../../types';
 import { ChatConfiguration, getPreChatFields, useChatController, useHoursRange } from './hooks';
+import './HelpMenu.css';
 
-export const HelpMenuButton = styled(NavBarMenuButton)`
-  color: ${colors.palette.gray};
-  font-size: 1.4rem;
-`;
+export const HelpMenuButton = ({ className, style, ...props }: NavBarBaseButtonProps) => {
+  const buttonStyle: CSSPropertiesWithVariables = {
+    '--help-menu-button-color': colors.palette.gray,
+    ...style
+  };
 
-export const HelpMenuItem = styled(NavBarMenuItem)`
-  color: ${colors.palette.neutralDarker};
-  text-decoration: none;
+  return (
+    <NavBarMenuButton
+      className={classNames('help-menu-button', className)}
+      style={buttonStyle}
+      {...props}
+    />
+  );
+};
 
-  :focus-visible {
-    outline: 0;
-    background: ${colors.palette.neutralLighter};
-  }
-  :hover {
-    color: ${colors.palette.neutralDarker};
-    text-decoration: none;
-  }
-`;
-
-const IframeWrapper = styled(BodyPortal)`
-  background-color: ${colors.palette.neutralBright};
-  position: absolute;
-  width: 100%;
-  top: 4rem;
-  left: 0;
-  bottom: 0;
-  z-index: 20;
-`;
-
-const Iframe = styled.iframe`
-  border: 0;
-  width: 100%;
-  height: calc(100% - 5rem);
-`;
+export const HelpMenuItem = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof NavBarMenuItem>
+>(({ className, style, ...props }, ref) => {
+  const menuItemStyle: CSSPropertiesWithVariables = {
+    '--help-menu-item-color': colors.palette.neutralDarker,
+    '--help-menu-item-focus-bg': colors.palette.neutralLighter,
+    ...style
+  };
+
+  return (
+    <NavBarMenuItem
+      ref={ref}
+      className={classNames('help-menu-item', className)}
+      style={menuItemStyle}
+      {...props}
+    />
+  );
+});
+HelpMenuItem.displayName = 'HelpMenuItem';
+
+const iframeWrapperStyle: CSSPropertiesWithVariables = {
+  '--help-menu-iframe-wrapper-bg': colors.palette.neutralBright,
+};
+
+const putAwayStyle: CSSPropertiesWithVariables = {
+  '--help-menu-put-away-border-color': colors.palette.pale,
+  '--help-menu-put-away-bg': colors.palette.neutralBright,
+  '--help-menu-put-away-button-bg': colors.palette.white,
+  '--help-menu-put-away-button-border-color': colors.palette.pale,
+};
 
 function PutAway({onClick, className}: {onClick: () => void; className?: string}) {
   return (
-    <div className={className}>
+    <div className={classNames('help-menu-put-away', className)} style={putAwayStyle}>
       <button type='button' onClick={onClick} aria-label='close form'>
           Back
       </button>
@@ -50,33 +64,6 @@ function PutAway({onClick, className}: {onClick: () => void; className?: string}
   );
 }
 
-const StyledPutAway = styled(PutAway)`
-  border-top: 0.1rem solid ${colors.palette.pale};
-  width: 100%;
-  height: 5.6rem;
-  display: flex;
-  align-items: center;
-  background-color: ${colors.palette.neutralBright};
-  padding-left: 1.5rem;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 20;
-
-  @media(min-width: 56em) {
-    padding: 0 calc(50vw - 43rem);
-  }
-
-  button {
-    height: 3rem;
-    background-color: ${colors.palette.white};
-    border: 1px solid ${colors.palette.pale};
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-    width: 9rem;
-    border-radius: 0.5rem;
-  }
-`;
-
 /**
  * SVG icon representing a "new tab" indicator
  * Used to visually indicate when a link or action will open in a new tab/window
@@ -162,10 +149,10 @@ export const HelpMenu: React.FC<HelpMenuProps> = ({ contactFormParams, chatConfi
       </HelpMenuButton>
 
       {showIframe && (
-        <IframeWrapper>
-          <Iframe title='Contact form' src={showIframe} />
-          <StyledPutAway onClick={() => setShowIframe(undefined)} />
-        </IframeWrapper>
+        <BodyPortal className='help-menu-iframe-wrapper' style={iframeWrapperStyle}>
+          <iframe className='help-menu-iframe' title='Contact form' src={showIframe} />
+          <PutAway onClick={() => setShowIframe(undefined)} />
+        </BodyPortal>
       )}
     </>
   );
diff --git a/src/components/ProfileMenu/ProfileMenu.css b/src/components/ProfileMenu/ProfileMenu.css
new file mode 100644
index 000000000..05ae752e3
--- /dev/null
+++ b/src/components/ProfileMenu/ProfileMenu.css
@@ -0,0 +1,44 @@
+/* ProfileMenu trigger button */
+.profile-menu-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  border: none;
+  line-height: 1.6rem;
+  font-size: 1.4rem;
+  color: var(--profile-menu-button-color, #ffffff);
+  background-color: var(--profile-menu-button-bg, #007297);
+  cursor: pointer;
+}
+
+.profile-menu-button:hover {
+  box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3);
+}
+
+.profile-menu-button[data-focused],
+.profile-menu-button[data-focus-visible] {
+  /* defaultFocusOutline from src/theme.ts */
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  outline-offset: 0.2rem;
+}
+
+.profile-menu-button svg {
+  width: 1.5rem;
+}
+
+/* ProfileMenu popover; the compound selector keeps the margin-top override of
+   .navbar-popover independent of stylesheet order */
+.navbar-popover.profile-menu-popover {
+  min-width: 10rem;
+  margin-top: 0.4rem;
+}
+
+/* ProfileMenu menu item */
+.profile-menu-item {
+  color: var(--profile-menu-item-color, #424242);
+  text-decoration: none;
+}
diff --git a/src/components/ProfileMenu/index.tsx b/src/components/ProfileMenu/index.tsx
index 928ac42c4..1cab8e447 100644
--- a/src/components/ProfileMenu/index.tsx
+++ b/src/components/ProfileMenu/index.tsx
@@ -1,48 +1,64 @@
 import React from 'react';
-import { Button, Menu, MenuTrigger, Key } from 'react-aria-components';
-import styled from 'styled-components';
-import { colors, defaultFocusOutline } from '../../theme';
+import classNames from 'classnames';
+import { Button, ButtonProps, Menu, MenuTrigger, PopoverProps, Key } from 'react-aria-components';
+import { colors } from '../../theme';
 import { NavBarPopover, NavBarMenuItem } from '../NavBarMenuButtons';
+import { CSSPropertiesWithVariables } from '../../types';
 import { UserIcon } from './UserIcon';
+import './ProfileMenu.css';
 
-export const ProfileMenuButton = styled(Button)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 3.5rem;
-  height: 3.5rem;
-  border-radius: 50%;
-  border: none;
-  line-height: 1.6rem;
-  font-size: 1.4rem;
-  color: ${colors.palette.white};
-  background-color: ${colors.palette.darkTeal};
-  cursor: pointer;
+export const ProfileMenuButton = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  ButtonProps
+>(({ className, style, ...props }, ref) => {
+  const buttonStyle: CSSPropertiesWithVariables = {
+    '--profile-menu-button-color': colors.palette.white,
+    '--profile-menu-button-bg': colors.palette.darkTeal,
+    ...style
+  };
 
-  &:hover {
-    box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3);
-  }
-
-  &[data-focused],
-  &[data-focus-visible] {
-    ${defaultFocusOutline}
-    outline-offset: 0.2rem;
-  }
+  return (
+    <Button
+      ref={ref}
+      className={classNames('profile-menu-button', className)}
+      style={buttonStyle}
+      {...props}
+    />
+  );
+});
+ProfileMenuButton.displayName = 'ProfileMenuButton';
 
-  svg {
-    width: 1.5rem;
-  }
-`;
+export const ProfileMenuPopover = React.forwardRef<
+  HTMLDivElement,
+  PopoverProps
+>(({ className, ...props }, ref) => (
+  <NavBarPopover
+    ref={ref}
+    className={classNames('profile-menu-popover', className)}
+    {...props}
+  />
+));
+ProfileMenuPopover.displayName = 'ProfileMenuPopover';
 
-export const ProfileMenuPopover = styled(NavBarPopover)`
-  min-width: 10rem;
-  margin-top: 0.4rem;
-`;
+export const ProfileMenuItem = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof NavBarMenuItem>
+>(({ className, style, ...props }, ref) => {
+  const menuItemStyle: CSSPropertiesWithVariables = {
+    '--profile-menu-item-color': colors.palette.neutralDarker,
+    ...style
+  };
 
-export const ProfileMenuItem = styled(NavBarMenuItem)`
-  color: ${colors.palette.neutralDarker};
-  text-decoration: none;
-`;
+  return (
+    <NavBarMenuItem
+      ref={ref}
+      className={classNames('profile-menu-item', className)}
+      style={menuItemStyle}
+      {...props}
+    />
+  );
+});
+ProfileMenuItem.displayName = 'ProfileMenuItem';
 
 function getInitials(
   user?: { firstName?: string; lastName?: string }

From 45b1816aac9d45243a5bda3609907735b0c6bd83 Mon Sep 17 00:00:00 2001
From: OpenStaxClaude <tw33+clauderunner@rice.edu>
Date: Mon, 31 Aug 2026 14:35:08 +0000
Subject: [PATCH 2/4] CORE-2006: compose render-callback style in the button
 wrappers

Addresses Copilot's two review comments. ProfileMenuButton and HelpMenuButton
merged the caller's style into their CSS-variable object with a spread.
react-aria-components types style as `CSSProperties | ((renderProps) =>
CSSProperties)`, and spreading a function copies nothing, so a render-callback
style was silently dropped and replaced by the wrapper's static object. Both now
build their variables inside composeRenderProps, the same shape CORE-2710 (#137)
uses for NavBarMenuItem/NavBarPopover/TreeCheckbox. The caller still spreads
last, and the object form is unchanged -- all 116 snapshots pass untouched.

Their style reaches react-aria's Button directly (HelpMenuButton's by way of
NavBarButton, which passes it straight through), so this works against main as
it stands.

ProfileMenuItem and HelpMenuItem have the same defect but are left spreading for
now, with a comment saying why: they hand style to NavBarMenuItem, which spreads
it as well, so composing only here would send a function into that spread and
lose these variables along with the caller's style. Both levels have to compose
together, which needs #137 on main first.

Eight tests: three per button wrapper (render-callback merged, render-callback
overriding the wrapper variables, object form merging caller-last) plus
object-form coverage for each menu item. Confirmed failing before the fix:
stashing only the two component files leaves 4 failed, 33 passed across the two
specs -- the four callback and override cases fail, the object-form cases pass.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/HelpMenu/index.spec.tsx    | 72 +++++++++++++++++++++-
 src/components/HelpMenu/index.tsx         | 18 ++++--
 src/components/ProfileMenu/index.spec.tsx | 73 ++++++++++++++++++++++-
 src/components/ProfileMenu/index.tsx      | 22 +++++--
 4 files changed, 173 insertions(+), 12 deletions(-)

diff --git a/src/components/HelpMenu/index.spec.tsx b/src/components/HelpMenu/index.spec.tsx
index 1691ab68e..6bc26a671 100644
--- a/src/components/HelpMenu/index.spec.tsx
+++ b/src/components/HelpMenu/index.spec.tsx
@@ -1,8 +1,13 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Menu } from 'react-aria-components';
 import { BodyPortalSlotsContext } from '../BodyPortalSlotsContext';
-import { HelpMenu, HelpMenuItem, HelpMenuProps, NewTabIcon } from '.';
+import { HelpMenu, HelpMenuButton, HelpMenuItem, HelpMenuProps, NewTabIcon } from '.';
 import { NavBar } from '../NavBar';
 import { ChatConfiguration } from './hooks';
+import type { CSSPropertiesWithVariables } from '../../types';
+
+type HelpMenuButtonProps = React.ComponentProps<typeof HelpMenuButton>;
+type HelpMenuItemProps = React.ComponentProps<typeof HelpMenuItem>;
 
 describe('HelpMenu', () => {
   let root: HTMLElement;
@@ -327,3 +332,68 @@ describe('HelpMenu', () => {
     await screen.findByRole('menuitem', { name: /report an issue/i });
   });
 });
+
+describe('HelpMenu style composition', () => {
+  beforeAll(() => {
+    global.CSS = {
+      supports: () => true,
+      escape: jest.fn(),
+    } as any;
+  });
+
+  const renderButton = (style: HelpMenuButtonProps['style']) => {
+    render(<HelpMenuButton label='Help' style={style} />);
+    return document.querySelector('.help-menu-button') as HTMLElement;
+  };
+
+  const renderMenuItem = (style: HelpMenuItemProps['style']) => {
+    render(
+      <Menu aria-label='Test menu'>
+        <HelpMenuItem style={style}>Report an issue</HelpMenuItem>
+      </Menu>
+    );
+    return document.querySelector('.help-menu-item') as HTMLElement;
+  };
+
+  describe('HelpMenuButton', () => {
+    it('merges a render-callback style', () => {
+      const button = renderButton(() => ({ color: 'rgb(255, 0, 0)' }));
+
+      expect(button.style.color).toBe('rgb(255, 0, 0)');
+      expect(button.style.getPropertyValue('--help-menu-button-color')).toBeTruthy();
+    });
+
+    it('lets a render-callback style override the wrapper variables', () => {
+      const button = renderButton(() => ({
+        '--help-menu-button-color': 'rebeccapurple'
+      }) as CSSPropertiesWithVariables);
+
+      expect(button.style.getPropertyValue('--help-menu-button-color')).toBe('rebeccapurple');
+    });
+
+    it('keeps merging an object style, caller last', () => {
+      const button = renderButton({
+        color: 'rgb(0, 0, 255)',
+        '--help-menu-button-color': 'rebeccapurple'
+      } as CSSPropertiesWithVariables);
+
+      expect(button.style.color).toBe('rgb(0, 0, 255)');
+      expect(button.style.getPropertyValue('--help-menu-button-color')).toBe('rebeccapurple');
+    });
+  });
+
+  // No render-callback cases here: HelpMenuItem passes style to NavBarMenuItem, which
+  // spreads it, so the callback form cannot reach the DOM until CORE-2710 (#137) is on main.
+  describe('HelpMenuItem', () => {
+    it('merges an object style, caller last', () => {
+      const item = renderMenuItem({
+        color: 'rgb(0, 0, 255)',
+        '--help-menu-item-color': 'rebeccapurple'
+      } as CSSPropertiesWithVariables);
+
+      expect(item.style.color).toBe('rgb(0, 0, 255)');
+      expect(item.style.getPropertyValue('--help-menu-item-color')).toBe('rebeccapurple');
+      expect(item.style.getPropertyValue('--navbar-menu-item-hover-bg')).toBeTruthy();
+    });
+  });
+});
diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 15a07e166..55617a021 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { composeRenderProps } from 'react-aria-components';
 import { NavBarBaseButtonProps, NavBarMenuButton, NavBarMenuItem } from '../NavBarMenuButtons';
 import { colors } from '../../theme';
 import { BodyPortal } from '../BodyPortal';
@@ -8,10 +9,16 @@ import { ChatConfiguration, getPreChatFields, useChatController, useHoursRange }
 import './HelpMenu.css';
 
 export const HelpMenuButton = ({ className, style, ...props }: NavBarBaseButtonProps) => {
-  const buttonStyle: CSSPropertiesWithVariables = {
-    '--help-menu-button-color': colors.palette.gray,
-    ...style
-  };
+  // composeRenderProps normalises the object and render-callback forms of style so a
+  // caller-supplied callback is merged rather than dropped. The caller still spreads last
+  // and can override the CSS variables set here.
+  const buttonStyle = composeRenderProps(
+    style,
+    (resolvedStyle): CSSPropertiesWithVariables => ({
+      '--help-menu-button-color': colors.palette.gray,
+      ...resolvedStyle
+    })
+  );
 
   return (
     <NavBarMenuButton
@@ -26,6 +33,9 @@ export const HelpMenuItem = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof NavBarMenuItem>
 >(({ className, style, ...props }, ref) => {
+  // Deliberately a spread rather than composeRenderProps: see the note on
+  // ProfileMenuItem. NavBarMenuItem spreads style as well, so composing only here would
+  // lose these variables; both need composing together once CORE-2710 (#137) is on main.
   const menuItemStyle: CSSPropertiesWithVariables = {
     '--help-menu-item-color': colors.palette.neutralDarker,
     '--help-menu-item-focus-bg': colors.palette.neutralLighter,
diff --git a/src/components/ProfileMenu/index.spec.tsx b/src/components/ProfileMenu/index.spec.tsx
index 5f5671910..22397ec09 100644
--- a/src/components/ProfileMenu/index.spec.tsx
+++ b/src/components/ProfileMenu/index.spec.tsx
@@ -1,5 +1,10 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { ProfileMenu, ProfileMenuItem, UserIcon } from '.';
+import { Menu } from 'react-aria-components';
+import { ProfileMenu, ProfileMenuButton, ProfileMenuItem, UserIcon } from '.';
+import type { CSSPropertiesWithVariables } from '../../types';
+
+type ProfileMenuButtonProps = React.ComponentProps<typeof ProfileMenuButton>;
+type ProfileMenuItemProps = React.ComponentProps<typeof ProfileMenuItem>;
 
 describe('ProfileMenu', () => {
   beforeAll(() => {
@@ -347,3 +352,69 @@ describe('UserIcon', () => {
     expect(svg?.classList.contains('custom-class')).toBe(true);
   });
 });
+
+describe('ProfileMenu style composition', () => {
+  beforeAll(() => {
+    global.CSS = {
+      supports: () => true,
+      escape: jest.fn(),
+    } as any;
+  });
+
+  const renderButton = (style: ProfileMenuButtonProps['style']) => {
+    render(<ProfileMenuButton style={style}>JD</ProfileMenuButton>);
+    return document.querySelector('.profile-menu-button') as HTMLElement;
+  };
+
+  const renderMenuItem = (style: ProfileMenuItemProps['style']) => {
+    render(
+      <Menu aria-label='Test menu'>
+        <ProfileMenuItem style={style}>Profile</ProfileMenuItem>
+      </Menu>
+    );
+    return document.querySelector('.profile-menu-item') as HTMLElement;
+  };
+
+  describe('ProfileMenuButton', () => {
+    it('merges a render-callback style', () => {
+      const button = renderButton(() => ({ color: 'rgb(255, 0, 0)' }));
+
+      expect(button.style.color).toBe('rgb(255, 0, 0)');
+      expect(button.style.getPropertyValue('--profile-menu-button-bg')).toBeTruthy();
+    });
+
+    it('lets a render-callback style override the wrapper variables', () => {
+      const button = renderButton(() => ({
+        '--profile-menu-button-bg': 'rebeccapurple'
+      }) as CSSPropertiesWithVariables);
+
+      expect(button.style.getPropertyValue('--profile-menu-button-bg')).toBe('rebeccapurple');
+    });
+
+    it('keeps merging an object style, caller last', () => {
+      const button = renderButton({
+        color: 'rgb(0, 0, 255)',
+        '--profile-menu-button-bg': 'rebeccapurple'
+      } as CSSPropertiesWithVariables);
+
+      expect(button.style.color).toBe('rgb(0, 0, 255)');
+      expect(button.style.getPropertyValue('--profile-menu-button-bg')).toBe('rebeccapurple');
+      expect(button.style.getPropertyValue('--profile-menu-button-color')).toBeTruthy();
+    });
+  });
+
+  // No render-callback cases here: ProfileMenuItem passes style to NavBarMenuItem, which
+  // spreads it, so the callback form cannot reach the DOM until CORE-2710 (#137) is on main.
+  describe('ProfileMenuItem', () => {
+    it('merges an object style, caller last', () => {
+      const item = renderMenuItem({
+        color: 'rgb(0, 0, 255)',
+        '--profile-menu-item-color': 'rebeccapurple'
+      } as CSSPropertiesWithVariables);
+
+      expect(item.style.color).toBe('rgb(0, 0, 255)');
+      expect(item.style.getPropertyValue('--profile-menu-item-color')).toBe('rebeccapurple');
+      expect(item.style.getPropertyValue('--navbar-menu-item-hover-bg')).toBeTruthy();
+    });
+  });
+});
diff --git a/src/components/ProfileMenu/index.tsx b/src/components/ProfileMenu/index.tsx
index 1cab8e447..5ff2f35f3 100644
--- a/src/components/ProfileMenu/index.tsx
+++ b/src/components/ProfileMenu/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Button, ButtonProps, Menu, MenuTrigger, PopoverProps, Key } from 'react-aria-components';
+import { Button, ButtonProps, composeRenderProps, Menu, MenuTrigger, PopoverProps, Key } from 'react-aria-components';
 import { colors } from '../../theme';
 import { NavBarPopover, NavBarMenuItem } from '../NavBarMenuButtons';
 import { CSSPropertiesWithVariables } from '../../types';
@@ -11,11 +11,17 @@ export const ProfileMenuButton = React.forwardRef<
   React.ElementRef<typeof Button>,
   ButtonProps
 >(({ className, style, ...props }, ref) => {
-  const buttonStyle: CSSPropertiesWithVariables = {
-    '--profile-menu-button-color': colors.palette.white,
-    '--profile-menu-button-bg': colors.palette.darkTeal,
-    ...style
-  };
+  // composeRenderProps normalises the object and render-callback forms of style so a
+  // caller-supplied callback is merged rather than dropped. The caller still spreads last
+  // and can override the CSS variables set here.
+  const buttonStyle = composeRenderProps(
+    style,
+    (resolvedStyle): CSSPropertiesWithVariables => ({
+      '--profile-menu-button-color': colors.palette.white,
+      '--profile-menu-button-bg': colors.palette.darkTeal,
+      ...resolvedStyle
+    })
+  );
 
   return (
     <Button
@@ -44,6 +50,10 @@ export const ProfileMenuItem = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof NavBarMenuItem>
 >(({ className, style, ...props }, ref) => {
+  // Deliberately a spread rather than composeRenderProps: this wrapper hands style to
+  // NavBarMenuItem, which spreads it too, so a composed function would be dropped there
+  // along with this variable. Both need composing together once CORE-2710 (#137) is on
+  // main; a render-callback style is discarded here until then, as it is on main today.
   const menuItemStyle: CSSPropertiesWithVariables = {
     '--profile-menu-item-color': colors.palette.neutralDarker,
     ...style

From 0729aeba7fbf44134cf9ab08bcb6940413a4e48a Mon Sep 17 00:00:00 2001
From: OpenStaxClaude <tw33+clauderunner@rice.edu>
Date: Tue, 1 Sep 2026 19:16:28 +0000
Subject: [PATCH 3/4] CORE-2006: compose render-callback className in the new
 wrappers

CORE-2708 (#136) is on main now, so NavBarButton, NavBarMenuItem and
NavBarPopover compose className through composeRenderProps. The wrappers added
here can follow: ProfileMenuButton, ProfileMenuPopover, ProfileMenuItem,
HelpMenuButton and HelpMenuItem passed the caller's className straight into
classNames(), which ignores functions, so a render-callback className was
silently dropped -- and unlike the style case TypeScript does not catch it.

Composing only at this level was not possible before #136: the composed function
would have reached NavBarMenuItem's classNames() and been discarded there,
taking the profile-menu-item / help-menu-item class with it.

Two tests per component, matching the shape #136 uses: a render-callback
className reaches the DOM alongside the wrapper's own class, and a string
className still composes. Confirmed failing before the fix: stashing only the
two component files leaves the two render-callback cases red.

The style half of this is still split. The two button wrappers compose it; the
two menu items cannot until CORE-2710 (#137) lands, because NavBarMenuItem
still spreads style. Comments in both files say so.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/HelpMenu/index.spec.tsx    | 43 ++++++++++++++++
 src/components/HelpMenu/index.tsx         |  4 +-
 src/components/ProfileMenu/index.spec.tsx | 61 ++++++++++++++++++++++-
 src/components/ProfileMenu/index.tsx      |  6 +--
 4 files changed, 107 insertions(+), 7 deletions(-)

diff --git a/src/components/HelpMenu/index.spec.tsx b/src/components/HelpMenu/index.spec.tsx
index 6bc26a671..28628f13e 100644
--- a/src/components/HelpMenu/index.spec.tsx
+++ b/src/components/HelpMenu/index.spec.tsx
@@ -397,3 +397,46 @@ describe('HelpMenu style composition', () => {
     });
   });
 });
+
+describe('HelpMenu className composition', () => {
+  beforeAll(() => {
+    global.CSS = {
+      supports: () => true,
+      escape: jest.fn(),
+    } as any;
+  });
+
+  it('composes a render-callback className on each wrapper', () => {
+    render(
+      <HelpMenuButton label='Help' className={() => 'caller-button'}>
+        <HelpMenuItem className={() => 'caller-item'}>Report an issue</HelpMenuItem>
+      </HelpMenuButton>
+    );
+
+    const button = document.querySelector('.help-menu-button');
+    expect(button?.className).toContain('navbar-button');
+    expect(button?.className).toContain('caller-button');
+
+    render(
+      <Menu aria-label='Test menu'>
+        <HelpMenuItem className={() => 'caller-item'}>Report an issue</HelpMenuItem>
+      </Menu>
+    );
+
+    const item = document.querySelector('.help-menu-item');
+    expect(item?.className).toContain('navbar-menu-item');
+    expect(item?.className).toContain('caller-item');
+  });
+
+  it('keeps composing a string className', () => {
+    render(<HelpMenuButton label='Help' className='caller-button' />);
+    expect(document.querySelector('.help-menu-button')?.className).toContain('caller-button');
+
+    render(
+      <Menu aria-label='Test menu'>
+        <HelpMenuItem className='caller-item'>Report an issue</HelpMenuItem>
+      </Menu>
+    );
+    expect(document.querySelector('.help-menu-item')?.className).toContain('caller-item');
+  });
+});
diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index 55617a021..c4e22694a 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -22,7 +22,7 @@ export const HelpMenuButton = ({ className, style, ...props }: NavBarBaseButtonP
 
   return (
     <NavBarMenuButton
-      className={classNames('help-menu-button', className)}
+      className={composeRenderProps(className, (resolved) => classNames('help-menu-button', resolved))}
       style={buttonStyle}
       {...props}
     />
@@ -45,7 +45,7 @@ export const HelpMenuItem = React.forwardRef<
   return (
     <NavBarMenuItem
       ref={ref}
-      className={classNames('help-menu-item', className)}
+      className={composeRenderProps(className, (resolved) => classNames('help-menu-item', resolved))}
       style={menuItemStyle}
       {...props}
     />
diff --git a/src/components/ProfileMenu/index.spec.tsx b/src/components/ProfileMenu/index.spec.tsx
index 22397ec09..d8a3719b1 100644
--- a/src/components/ProfileMenu/index.spec.tsx
+++ b/src/components/ProfileMenu/index.spec.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { Menu } from 'react-aria-components';
-import { ProfileMenu, ProfileMenuButton, ProfileMenuItem, UserIcon } from '.';
+import { Menu, MenuTrigger } from 'react-aria-components';
+import { ProfileMenu, ProfileMenuButton, ProfileMenuItem, ProfileMenuPopover, UserIcon } from '.';
 import type { CSSPropertiesWithVariables } from '../../types';
 
 type ProfileMenuButtonProps = React.ComponentProps<typeof ProfileMenuButton>;
@@ -418,3 +418,60 @@ describe('ProfileMenu style composition', () => {
     });
   });
 });
+
+describe('ProfileMenu className composition', () => {
+  beforeAll(() => {
+    global.CSS = {
+      supports: () => true,
+      escape: jest.fn(),
+    } as any;
+  });
+
+  const renderOpenMenu = (
+    popoverClassName: React.ComponentProps<typeof ProfileMenuPopover>['className']
+  ) => {
+    render(
+      <MenuTrigger defaultOpen>
+        <ProfileMenuButton className={() => 'caller-button'}>JD</ProfileMenuButton>
+        <ProfileMenuPopover className={popoverClassName}>
+          <Menu aria-label='Test menu'>
+            <ProfileMenuItem className={() => 'caller-item'}>Profile</ProfileMenuItem>
+          </Menu>
+        </ProfileMenuPopover>
+      </MenuTrigger>
+    );
+  };
+
+  it('composes a render-callback className on each wrapper', () => {
+    renderOpenMenu(() => 'caller-popover');
+
+    const button = document.querySelector('.profile-menu-button');
+    expect(button?.className).toContain('profile-menu-button');
+    expect(button?.className).toContain('caller-button');
+
+    const popover = document.querySelector('.profile-menu-popover');
+    expect(popover?.className).toContain('navbar-popover');
+    expect(popover?.className).toContain('caller-popover');
+
+    const item = document.querySelector('.profile-menu-item');
+    expect(item?.className).toContain('navbar-menu-item');
+    expect(item?.className).toContain('caller-item');
+  });
+
+  it('keeps composing a string className', () => {
+    render(
+      <MenuTrigger defaultOpen>
+        <ProfileMenuButton className='caller-button'>JD</ProfileMenuButton>
+        <ProfileMenuPopover className='caller-popover'>
+          <Menu aria-label='Test menu'>
+            <ProfileMenuItem className='caller-item'>Profile</ProfileMenuItem>
+          </Menu>
+        </ProfileMenuPopover>
+      </MenuTrigger>
+    );
+
+    expect(document.querySelector('.profile-menu-button')?.className).toContain('caller-button');
+    expect(document.querySelector('.profile-menu-popover')?.className).toContain('caller-popover');
+    expect(document.querySelector('.profile-menu-item')?.className).toContain('caller-item');
+  });
+});
diff --git a/src/components/ProfileMenu/index.tsx b/src/components/ProfileMenu/index.tsx
index 5ff2f35f3..5196b837b 100644
--- a/src/components/ProfileMenu/index.tsx
+++ b/src/components/ProfileMenu/index.tsx
@@ -26,7 +26,7 @@ export const ProfileMenuButton = React.forwardRef<
   return (
     <Button
       ref={ref}
-      className={classNames('profile-menu-button', className)}
+      className={composeRenderProps(className, (resolved) => classNames('profile-menu-button', resolved))}
       style={buttonStyle}
       {...props}
     />
@@ -40,7 +40,7 @@ export const ProfileMenuPopover = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <NavBarPopover
     ref={ref}
-    className={classNames('profile-menu-popover', className)}
+    className={composeRenderProps(className, (resolved) => classNames('profile-menu-popover', resolved))}
     {...props}
   />
 ));
@@ -62,7 +62,7 @@ export const ProfileMenuItem = React.forwardRef<
   return (
     <NavBarMenuItem
       ref={ref}
-      className={classNames('profile-menu-item', className)}
+      className={composeRenderProps(className, (resolved) => classNames('profile-menu-item', resolved))}
       style={menuItemStyle}
       {...props}
     />

From 7993af3851761ecba2ae51e779cbb95ca9413176 Mon Sep 17 00:00:00 2001
From: OpenStaxClaude <tw33+clauderunner@rice.edu>
Date: Tue, 1 Sep 2026 20:11:45 +0000
Subject: [PATCH 4/4] CORE-2006: move ProfileMenu and HelpMenu onto the global
 theme tokens

Follows the CORE-2720 (#143) sweep, which this branch is now stacked on. The two
new stylesheets repeated eleven palette hexes as var() fallbacks; they now read
the --ox-* tokens instead, e.g.

  color: var(--help-menu-button-color, var(--ox-color-gray));

The override hooks are unchanged -- only their defaults moved from JavaScript to
the CSS side, so the components no longer bind static custom properties inline.
That means style is no longer destructured in ProfileMenuButton,
ProfileMenuItem, HelpMenuButton or HelpMenuItem: it passes through in ...props
and react-aria handles both the object and render-callback forms itself.

Two consequences worth naming:

- The CORE-2710 (#137) dependency is gone rather than deferred. The bug it
  guards against was a wrapper overwriting the caller's style, which these
  wrappers no longer do, so the menu items need nothing from #137. Same
  reasoning as the note #143 leaves on NavBarMenuItem.
- iframeWrapperStyle and putAwayStyle are gone; the iframe wrapper and the
  put-away bar take their colours from HelpMenu.css.

className composition stays -- that one is a real bug fix, not a default.

The specs that asserted the inline defaults now assert what matters instead:
the caller's style reaches the element in both forms, and the override hook
still wins. Defaults are covered centrally by src/theme/tokens.spec.ts, which
also fails on any colour literal that duplicates a theme value -- both new
stylesheets pass it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/HelpMenu/HelpMenu.css       | 18 +++---
 src/components/HelpMenu/index.spec.tsx     | 42 ++++++------
 src/components/HelpMenu/index.tsx          | 75 ++++++----------------
 src/components/ProfileMenu/ProfileMenu.css |  6 +-
 src/components/ProfileMenu/index.spec.tsx  | 40 ++++++------
 src/components/ProfileMenu/index.tsx       | 62 ++++++------------
 6 files changed, 97 insertions(+), 146 deletions(-)

diff --git a/src/components/HelpMenu/HelpMenu.css b/src/components/HelpMenu/HelpMenu.css
index 2af02f2b1..236ca4578 100644
--- a/src/components/HelpMenu/HelpMenu.css
+++ b/src/components/HelpMenu/HelpMenu.css
@@ -1,12 +1,12 @@
 /* HelpMenu trigger button */
 .help-menu-button {
-  color: var(--help-menu-button-color, #5e5e5e);
+  color: var(--help-menu-button-color, var(--ox-color-gray));
   font-size: 1.4rem;
 }
 
 /* HelpMenu menu item */
 .help-menu-item {
-  color: var(--help-menu-item-color, #424242);
+  color: var(--help-menu-item-color, var(--ox-color-neutral-darker));
   text-decoration: none;
 }
 
@@ -14,17 +14,17 @@
    independent of stylesheet order */
 .navbar-menu-item.help-menu-item:focus-visible {
   outline: 0;
-  background: var(--help-menu-item-focus-bg, #f1f1f1);
+  background: var(--help-menu-item-focus-bg, var(--ox-color-neutral-lighter));
 }
 
 .help-menu-item:hover {
-  color: var(--help-menu-item-color, #424242);
+  color: var(--help-menu-item-color, var(--ox-color-neutral-darker));
   text-decoration: none;
 }
 
 /* Contact form iframe, portaled to the body */
 .help-menu-iframe-wrapper {
-  background-color: var(--help-menu-iframe-wrapper-bg, #f5f5f5);
+  background-color: var(--help-menu-iframe-wrapper-bg, var(--ox-color-neutral-bright));
   position: absolute;
   width: 100%;
   top: 4rem;
@@ -41,12 +41,12 @@
 
 /* Bar with the "Back" button that puts the contact form away */
 .help-menu-put-away {
-  border-top: 0.1rem solid var(--help-menu-put-away-border-color, #d5d5d5);
+  border-top: 0.1rem solid var(--help-menu-put-away-border-color, var(--ox-color-pale));
   width: 100%;
   height: 5.6rem;
   display: flex;
   align-items: center;
-  background-color: var(--help-menu-put-away-bg, #f5f5f5);
+  background-color: var(--help-menu-put-away-bg, var(--ox-color-neutral-bright));
   padding-left: 1.5rem;
   position: fixed;
   bottom: 0;
@@ -62,8 +62,8 @@
 
 .help-menu-put-away button {
   height: 3rem;
-  background-color: var(--help-menu-put-away-button-bg, #ffffff);
-  border: 1px solid var(--help-menu-put-away-button-border-color, #d5d5d5);
+  background-color: var(--help-menu-put-away-button-bg, var(--ox-color-white));
+  border: 1px solid var(--help-menu-put-away-button-border-color, var(--ox-color-pale));
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
   width: 9rem;
   border-radius: 0.5rem;
diff --git a/src/components/HelpMenu/index.spec.tsx b/src/components/HelpMenu/index.spec.tsx
index 28628f13e..22d2d23b1 100644
--- a/src/components/HelpMenu/index.spec.tsx
+++ b/src/components/HelpMenu/index.spec.tsx
@@ -333,7 +333,7 @@ describe('HelpMenu', () => {
   });
 });
 
-describe('HelpMenu style composition', () => {
+describe('HelpMenu style passthrough', () => {
   beforeAll(() => {
     global.CSS = {
       supports: () => true,
@@ -341,6 +341,8 @@ describe('HelpMenu style composition', () => {
     } as any;
   });
 
+  // The components no longer set --help-menu-* inline; those are defaults in HelpMenu.css,
+  // guarded by src/theme/tokens.spec.ts. See the note in ProfileMenu's spec.
   const renderButton = (style: HelpMenuButtonProps['style']) => {
     render(<HelpMenuButton label='Help' style={style} />);
     return document.querySelector('.help-menu-button') as HTMLElement;
@@ -356,44 +358,46 @@ describe('HelpMenu style composition', () => {
   };
 
   describe('HelpMenuButton', () => {
-    it('merges a render-callback style', () => {
+    it('passes a render-callback style through', () => {
       const button = renderButton(() => ({ color: 'rgb(255, 0, 0)' }));
 
       expect(button.style.color).toBe('rgb(255, 0, 0)');
-      expect(button.style.getPropertyValue('--help-menu-button-color')).toBeTruthy();
     });
 
-    it('lets a render-callback style override the wrapper variables', () => {
-      const button = renderButton(() => ({
-        '--help-menu-button-color': 'rebeccapurple'
-      }) as CSSPropertiesWithVariables);
+    it('passes an object style through', () => {
+      const button = renderButton({ color: 'rgb(0, 0, 255)' });
 
-      expect(button.style.getPropertyValue('--help-menu-button-color')).toBe('rebeccapurple');
+      expect(button.style.color).toBe('rgb(0, 0, 255)');
     });
 
-    it('keeps merging an object style, caller last', () => {
+    it('lets the caller override the CSS variables', () => {
       const button = renderButton({
-        color: 'rgb(0, 0, 255)',
         '--help-menu-button-color': 'rebeccapurple'
       } as CSSPropertiesWithVariables);
 
-      expect(button.style.color).toBe('rgb(0, 0, 255)');
       expect(button.style.getPropertyValue('--help-menu-button-color')).toBe('rebeccapurple');
     });
   });
 
-  // No render-callback cases here: HelpMenuItem passes style to NavBarMenuItem, which
-  // spreads it, so the callback form cannot reach the DOM until CORE-2710 (#137) is on main.
   describe('HelpMenuItem', () => {
-    it('merges an object style, caller last', () => {
+    it('passes a render-callback style through', () => {
+      const item = renderMenuItem(() => ({ color: 'rgb(255, 0, 0)' }));
+
+      expect(item.style.color).toBe('rgb(255, 0, 0)');
+    });
+
+    it('passes an object style through', () => {
+      const item = renderMenuItem({ color: 'rgb(0, 0, 255)' });
+
+      expect(item.style.color).toBe('rgb(0, 0, 255)');
+    });
+
+    it('lets the caller override the CSS variables', () => {
       const item = renderMenuItem({
-        color: 'rgb(0, 0, 255)',
-        '--help-menu-item-color': 'rebeccapurple'
+        '--help-menu-item-focus-bg': 'rebeccapurple'
       } as CSSPropertiesWithVariables);
 
-      expect(item.style.color).toBe('rgb(0, 0, 255)');
-      expect(item.style.getPropertyValue('--help-menu-item-color')).toBe('rebeccapurple');
-      expect(item.style.getPropertyValue('--navbar-menu-item-hover-bg')).toBeTruthy();
+      expect(item.style.getPropertyValue('--help-menu-item-focus-bg')).toBe('rebeccapurple');
     });
   });
 });
diff --git a/src/components/HelpMenu/index.tsx b/src/components/HelpMenu/index.tsx
index c4e22694a..972bb22c1 100644
--- a/src/components/HelpMenu/index.tsx
+++ b/src/components/HelpMenu/index.tsx
@@ -4,69 +4,36 @@ import { composeRenderProps } from 'react-aria-components';
 import { NavBarBaseButtonProps, NavBarMenuButton, NavBarMenuItem } from '../NavBarMenuButtons';
 import { colors } from '../../theme';
 import { BodyPortal } from '../BodyPortal';
-import { CSSPropertiesWithVariables } from '../../types';
 import { ChatConfiguration, getPreChatFields, useChatController, useHoursRange } from './hooks';
 import './HelpMenu.css';
-
-export const HelpMenuButton = ({ className, style, ...props }: NavBarBaseButtonProps) => {
-  // composeRenderProps normalises the object and render-callback forms of style so a
-  // caller-supplied callback is merged rather than dropped. The caller still spreads last
-  // and can override the CSS variables set here.
-  const buttonStyle = composeRenderProps(
-    style,
-    (resolvedStyle): CSSPropertiesWithVariables => ({
-      '--help-menu-button-color': colors.palette.gray,
-      ...resolvedStyle
-    })
-  );
-
-  return (
-    <NavBarMenuButton
-      className={composeRenderProps(className, (resolved) => classNames('help-menu-button', resolved))}
-      style={buttonStyle}
-      {...props}
-    />
-  );
-};
+import '../../theme/theme.css';
+
+export const HelpMenuButton = ({ className, ...props }: NavBarBaseButtonProps) => (
+  // style is deliberately not destructured: with the theme defaults moved into
+  // HelpMenu.css there is nothing left to merge it with, so it passes straight through in
+  // ...props and react-aria handles both the object and render-callback forms.
+  <NavBarMenuButton
+    className={composeRenderProps(className, (resolved) => classNames('help-menu-button', resolved))}
+    {...props}
+  />
+);
 
 export const HelpMenuItem = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof NavBarMenuItem>
->(({ className, style, ...props }, ref) => {
-  // Deliberately a spread rather than composeRenderProps: see the note on
-  // ProfileMenuItem. NavBarMenuItem spreads style as well, so composing only here would
-  // lose these variables; both need composing together once CORE-2710 (#137) is on main.
-  const menuItemStyle: CSSPropertiesWithVariables = {
-    '--help-menu-item-color': colors.palette.neutralDarker,
-    '--help-menu-item-focus-bg': colors.palette.neutralLighter,
-    ...style
-  };
-
-  return (
-    <NavBarMenuItem
-      ref={ref}
-      className={composeRenderProps(className, (resolved) => classNames('help-menu-item', resolved))}
-      style={menuItemStyle}
-      {...props}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  // style passes through in ...props — see the note on HelpMenuButton above.
+  <NavBarMenuItem
+    ref={ref}
+    className={composeRenderProps(className, (resolved) => classNames('help-menu-item', resolved))}
+    {...props}
+  />
+));
 HelpMenuItem.displayName = 'HelpMenuItem';
 
-const iframeWrapperStyle: CSSPropertiesWithVariables = {
-  '--help-menu-iframe-wrapper-bg': colors.palette.neutralBright,
-};
-
-const putAwayStyle: CSSPropertiesWithVariables = {
-  '--help-menu-put-away-border-color': colors.palette.pale,
-  '--help-menu-put-away-bg': colors.palette.neutralBright,
-  '--help-menu-put-away-button-bg': colors.palette.white,
-  '--help-menu-put-away-button-border-color': colors.palette.pale,
-};
-
 function PutAway({onClick, className}: {onClick: () => void; className?: string}) {
   return (
-    <div className={classNames('help-menu-put-away', className)} style={putAwayStyle}>
+    <div className={classNames('help-menu-put-away', className)}>
       <button type='button' onClick={onClick} aria-label='close form'>
           Back
       </button>
@@ -159,7 +126,7 @@ export const HelpMenu: React.FC<HelpMenuProps> = ({ contactFormParams, chatConfi
       </HelpMenuButton>
 
       {showIframe && (
-        <BodyPortal className='help-menu-iframe-wrapper' style={iframeWrapperStyle}>
+        <BodyPortal className='help-menu-iframe-wrapper'>
           <iframe className='help-menu-iframe' title='Contact form' src={showIframe} />
           <PutAway onClick={() => setShowIframe(undefined)} />
         </BodyPortal>
diff --git a/src/components/ProfileMenu/ProfileMenu.css b/src/components/ProfileMenu/ProfileMenu.css
index 05ae752e3..7dc4e3277 100644
--- a/src/components/ProfileMenu/ProfileMenu.css
+++ b/src/components/ProfileMenu/ProfileMenu.css
@@ -9,8 +9,8 @@
   border: none;
   line-height: 1.6rem;
   font-size: 1.4rem;
-  color: var(--profile-menu-button-color, #ffffff);
-  background-color: var(--profile-menu-button-bg, #007297);
+  color: var(--profile-menu-button-color, var(--ox-color-white));
+  background-color: var(--profile-menu-button-bg, var(--ox-color-dark-teal));
   cursor: pointer;
 }
 
@@ -39,6 +39,6 @@
 
 /* ProfileMenu menu item */
 .profile-menu-item {
-  color: var(--profile-menu-item-color, #424242);
+  color: var(--profile-menu-item-color, var(--ox-color-neutral-darker));
   text-decoration: none;
 }
diff --git a/src/components/ProfileMenu/index.spec.tsx b/src/components/ProfileMenu/index.spec.tsx
index d8a3719b1..cc3d9350e 100644
--- a/src/components/ProfileMenu/index.spec.tsx
+++ b/src/components/ProfileMenu/index.spec.tsx
@@ -353,7 +353,7 @@ describe('UserIcon', () => {
   });
 });
 
-describe('ProfileMenu style composition', () => {
+describe('ProfileMenu style passthrough', () => {
   beforeAll(() => {
     global.CSS = {
       supports: () => true,
@@ -361,6 +361,9 @@ describe('ProfileMenu style composition', () => {
     } as any;
   });
 
+  // These components no longer set --profile-menu-* inline; those are defaults in
+  // ProfileMenu.css, guarded by src/theme/tokens.spec.ts. What matters here is that the
+  // caller's style reaches the element in both forms, and that the override hook works.
   const renderButton = (style: ProfileMenuButtonProps['style']) => {
     render(<ProfileMenuButton style={style}>JD</ProfileMenuButton>);
     return document.querySelector('.profile-menu-button') as HTMLElement;
@@ -376,45 +379,46 @@ describe('ProfileMenu style composition', () => {
   };
 
   describe('ProfileMenuButton', () => {
-    it('merges a render-callback style', () => {
+    it('passes a render-callback style through', () => {
       const button = renderButton(() => ({ color: 'rgb(255, 0, 0)' }));
 
       expect(button.style.color).toBe('rgb(255, 0, 0)');
-      expect(button.style.getPropertyValue('--profile-menu-button-bg')).toBeTruthy();
     });
 
-    it('lets a render-callback style override the wrapper variables', () => {
-      const button = renderButton(() => ({
-        '--profile-menu-button-bg': 'rebeccapurple'
-      }) as CSSPropertiesWithVariables);
+    it('passes an object style through', () => {
+      const button = renderButton({ color: 'rgb(0, 0, 255)' });
 
-      expect(button.style.getPropertyValue('--profile-menu-button-bg')).toBe('rebeccapurple');
+      expect(button.style.color).toBe('rgb(0, 0, 255)');
     });
 
-    it('keeps merging an object style, caller last', () => {
+    it('lets the caller override the CSS variables', () => {
       const button = renderButton({
-        color: 'rgb(0, 0, 255)',
         '--profile-menu-button-bg': 'rebeccapurple'
       } as CSSPropertiesWithVariables);
 
-      expect(button.style.color).toBe('rgb(0, 0, 255)');
       expect(button.style.getPropertyValue('--profile-menu-button-bg')).toBe('rebeccapurple');
-      expect(button.style.getPropertyValue('--profile-menu-button-color')).toBeTruthy();
     });
   });
 
-  // No render-callback cases here: ProfileMenuItem passes style to NavBarMenuItem, which
-  // spreads it, so the callback form cannot reach the DOM until CORE-2710 (#137) is on main.
   describe('ProfileMenuItem', () => {
-    it('merges an object style, caller last', () => {
+    it('passes a render-callback style through', () => {
+      const item = renderMenuItem(() => ({ color: 'rgb(255, 0, 0)' }));
+
+      expect(item.style.color).toBe('rgb(255, 0, 0)');
+    });
+
+    it('passes an object style through', () => {
+      const item = renderMenuItem({ color: 'rgb(0, 0, 255)' });
+
+      expect(item.style.color).toBe('rgb(0, 0, 255)');
+    });
+
+    it('lets the caller override the CSS variables', () => {
       const item = renderMenuItem({
-        color: 'rgb(0, 0, 255)',
         '--profile-menu-item-color': 'rebeccapurple'
       } as CSSPropertiesWithVariables);
 
-      expect(item.style.color).toBe('rgb(0, 0, 255)');
       expect(item.style.getPropertyValue('--profile-menu-item-color')).toBe('rebeccapurple');
-      expect(item.style.getPropertyValue('--navbar-menu-item-hover-bg')).toBeTruthy();
     });
   });
 });
diff --git a/src/components/ProfileMenu/index.tsx b/src/components/ProfileMenu/index.tsx
index 5196b837b..a145c3334 100644
--- a/src/components/ProfileMenu/index.tsx
+++ b/src/components/ProfileMenu/index.tsx
@@ -1,37 +1,24 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Button, ButtonProps, composeRenderProps, Menu, MenuTrigger, PopoverProps, Key } from 'react-aria-components';
-import { colors } from '../../theme';
 import { NavBarPopover, NavBarMenuItem } from '../NavBarMenuButtons';
-import { CSSPropertiesWithVariables } from '../../types';
 import { UserIcon } from './UserIcon';
 import './ProfileMenu.css';
+import '../../theme/theme.css';
 
 export const ProfileMenuButton = React.forwardRef<
   React.ElementRef<typeof Button>,
   ButtonProps
->(({ className, style, ...props }, ref) => {
-  // composeRenderProps normalises the object and render-callback forms of style so a
-  // caller-supplied callback is merged rather than dropped. The caller still spreads last
-  // and can override the CSS variables set here.
-  const buttonStyle = composeRenderProps(
-    style,
-    (resolvedStyle): CSSPropertiesWithVariables => ({
-      '--profile-menu-button-color': colors.palette.white,
-      '--profile-menu-button-bg': colors.palette.darkTeal,
-      ...resolvedStyle
-    })
-  );
-
-  return (
-    <Button
-      ref={ref}
-      className={composeRenderProps(className, (resolved) => classNames('profile-menu-button', resolved))}
-      style={buttonStyle}
-      {...props}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  // style is deliberately not destructured: with the theme defaults moved into
+  // ProfileMenu.css there is nothing left to merge it with, so it passes straight through
+  // in ...props and react-aria handles both the object and render-callback forms.
+  <Button
+    ref={ref}
+    className={composeRenderProps(className, (resolved) => classNames('profile-menu-button', resolved))}
+    {...props}
+  />
+));
 ProfileMenuButton.displayName = 'ProfileMenuButton';
 
 export const ProfileMenuPopover = React.forwardRef<
@@ -49,25 +36,14 @@ ProfileMenuPopover.displayName = 'ProfileMenuPopover';
 export const ProfileMenuItem = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof NavBarMenuItem>
->(({ className, style, ...props }, ref) => {
-  // Deliberately a spread rather than composeRenderProps: this wrapper hands style to
-  // NavBarMenuItem, which spreads it too, so a composed function would be dropped there
-  // along with this variable. Both need composing together once CORE-2710 (#137) is on
-  // main; a render-callback style is discarded here until then, as it is on main today.
-  const menuItemStyle: CSSPropertiesWithVariables = {
-    '--profile-menu-item-color': colors.palette.neutralDarker,
-    ...style
-  };
-
-  return (
-    <NavBarMenuItem
-      ref={ref}
-      className={composeRenderProps(className, (resolved) => classNames('profile-menu-item', resolved))}
-      style={menuItemStyle}
-      {...props}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  // style passes through in ...props — see the note on ProfileMenuButton above.
+  <NavBarMenuItem
+    ref={ref}
+    className={composeRenderProps(className, (resolved) => classNames('profile-menu-item', resolved))}
+    {...props}
+  />
+));
 ProfileMenuItem.displayName = 'ProfileMenuItem';
 
 function getInitials(