fix(pure-black): align Advanced details Expandable sheet with other elevated sheets (#33152)

<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## **Description**

Aligns the confirmations **Advanced details** stacked sheet
(`Expandable` → `BottomModal`) with other pure black elevated sheets.

In pure black dark mode, `modalContent` was using the wrong surface
color (`bg-section`). This is not as severe as the `bg-default` banding
issue elsewhere, but it made this sheet look inconsistent with other
elevated bottom sheets. This PR updates `expandable.styles.ts` only:

- `backgroundColor` uses `getElevatedSurfaceColor()` so the sheet
resolves to `bg-alternative` in pure black dark mode (unchanged when the
preview flag is off)
- `border.muted` is applied only when pure black preview is on in dark
mode, matching other elevated-surface stopgaps (`SelectComponent`,
`ModalConfirmation`)

`expandable.tsx` is unchanged — still uses legacy `BottomModal` for
stacking on the confirmation sheet. We plan to replace this with MMDS
`BottomSheet` in a follow-up; this is a style-only stopgap until then.

`modalContent` is shared by all `Expandable` consumers in confirmations
(Advanced details, signature Message, and account Details rows).

## **Changelog**

CHANGELOG entry: Fixed Advanced details bottom sheet surface color in
Pure Black to match other elevated sheets (style-only change).

## **Related issues**

Refs: TMCU-622
Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-1095

## **Manual testing steps**

```gherkin
Feature: Advanced details sheet matches other pure black elevated sheets

  Scenario: Open Advanced details from a dapp-initiated transfer
    Given dark mode is enabled and MM_PURE_BLACK_PREVIEW=true
    And the wallet is connected to https://metamask.github.io/test-dapp
    When the user taps "Send EIP-1559 Transaction"
    And scrolls to and taps the "Advanced details" row (testID: advanced-details)
    Then a stacked bottom sheet opens titled "Advanced details"
    And the sheet surface color matches other elevated bottom sheets
    And nonce / interacting-with / data content is unchanged
    And the sheet dismisses via the close button or swipe down
```

## **Screenshots/Recordings**

### **Before**

<img width="394" height="227" alt="Screenshot 2026-07-13 at 9 43 32 PM"
src="https://github.com/user-attachments/assets/a47df661-3a63-45da-8a5b-5d3629094dcc"
/>

### **After**

<img width="396" height="243" alt="Screenshot 2026-07-13 at 9 43 36 PM"
src="https://github.com/user-attachments/assets/f9f0980a-0134-4adf-b868-a8277992ef58"
/>

## **Pre-merge author checklist**

- [x] I've followed MetaMask Contributor Docs and Coding Standards
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using JSDoc format if applicable
- [x] I've applied the right labels on the PR (internal only)

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use the linked power-user SRPs to import wallets with many accounts
and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics

<!-- CURSOR_AGENT_PR_BODY_END -->

[Slack
Thread](https://consensys.slack.com/archives/C09AYKX30P3/p1783696571170129?thread_ts=1783696571.170129&cid=C09AYKX30P3)

<div><a
href="https://cursor.com/agents/bc-1ff8cb7f-5a41-5bf6-9731-0debff237f9d"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-1ff8cb7f-5a41-5bf6-9731-0debff237f9d"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Author: georgewrmarshall

app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts

@@ -1,13 +1,20 @@
 import { StyleSheet } from 'react-native';
 
-import { Theme } from '../../../../../../util/theme/models';
+import { AppThemeKey, Theme } from '../../../../../../util/theme/models';
+import {
+  getElevatedSurfaceColor,
+  isPureBlackEnabled,
+} from '../../../../../../util/theme/themeUtils';
 
 const styleSheet = (params: {
   theme: Theme;
   vars: { isCompact: boolean | undefined };
 }) => {
   const { theme, vars } = params;
   const { isCompact } = vars;
+  const { colors } = theme;
+  const isPureBlackDark =
+    isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark;
 
   return StyleSheet.create({
     container: {
@@ -20,8 +27,12 @@ const styleSheet = (params: {
       padding: isCompact ? 0 : 16,
       marginBottom: isCompact ? 0 : 8,
     },
+    // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens.
+    // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks.
     modalContent: {
-      backgroundColor: theme.colors.background.section,
+      backgroundColor: getElevatedSurfaceColor(theme),
+      borderWidth: isPureBlackDark ? 1 : 0,
+      borderColor: isPureBlackDark ? colors.border.muted : undefined,
       paddingBottom: 34,
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,