fix(palettes): align iOS dark list backgrounds

core/src/css/palettes/dark.scss

@@ -130,8 +130,13 @@ $colors:  (
     --ion-card-background: #1c1c1d;
   }
 
+  & ion-card {
+    --ion-item-background: var(--ion-card-background);
+  }
+
   & ion-modal {
     --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));
+    --ion-item-background: var(--ion-background-color);
     --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));
     --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));
   }

core/src/css/test/list-surfaces/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>List surfaces</title>
+    <link href="../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div id="surfaces">
+          <ion-list id="outside-list"><ion-item lines="none">Outside the cards</ion-item></ion-list>
+          <ion-card id="default-card">
+            <ion-card-header><ion-card-title>Default card</ion-card-title></ion-card-header>
+            <ion-list><ion-item lines="none">In the card</ion-item></ion-list>
+          </ion-card>
+          <ion-card id="custom-card" style="--ion-card-background: #243b53">
+            <ion-card-header><ion-card-title>Custom card color</ion-card-title></ion-card-header>
+            <ion-list>
+              <ion-item lines="none">Uses the card color</ion-item>
+              <ion-item id="custom-item" lines="none" style="--background: #5f244f">Explicit item color</ion-item>
+            </ion-list>
+          </ion-card>
+          <ion-card id="custom-list-card" style="--ion-item-background: #5f244f">
+            <ion-card-header><ion-card-title>Explicit list color</ion-card-title></ion-card-header>
+            <ion-list><ion-item lines="none">Keeps the item token</ion-item></ion-list>
+          </ion-card>
+        </div>
+        <button id="open-modal" onclick="document.querySelector('ion-modal').present()">Open modal</button>
+        <ion-modal style="--width: 320px; --height: 380px">
+          <div class="ion-page">
+            <ion-content>
+              <ion-list id="modal-list"><ion-item lines="none">In the modal</ion-item></ion-list>
+              <ion-card id="modal-card">
+                <ion-card-header><ion-card-title>Card in the modal</ion-card-title></ion-card-header>
+                <ion-list><ion-item lines="none">Uses the card color</ion-item></ion-list>
+              </ion-card>
+              <ion-list
+                ><ion-item id="modal-custom-item" lines="none" style="--background: #5f244f"
+                  >Explicit item color</ion-item
+                ></ion-list
+              >
+            </ion-content>
+          </div>
+        </ion-modal>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

core/src/css/test/list-surfaces/list-surfaces.e2e.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('list surfaces'), () => {
+    test('should preserve card, outside-list, and custom backgrounds', async ({ page }) => {
+      await page.goto('/src/css/test/list-surfaces', config);
+      await expect(page.locator('#surfaces')).toHaveScreenshot(screenshot('list-surfaces-cards'));
+    });
+
+    for (const customBackground of [false, true]) {
+      test(`should preserve ${customBackground ? 'custom' : 'default'} modal and nested-card backgrounds`, async ({
+        page,
+      }) => {
+        await page.goto('/src/css/test/list-surfaces', config);
+        const modal = page.locator('ion-modal');
+        if (customBackground) {
+          await modal.evaluate((el: HTMLIonModalElement) => el.style.setProperty('--ion-background-color', '#243b53'));
+        }
+        const didPresent = await page.spyOnEvent('ionModalDidPresent');
+        await page.locator('#open-modal').click();
+        await didPresent.next();
+        await expect(modal).toHaveScreenshot(
+          screenshot(`list-surfaces-modal-${customBackground ? 'custom' : 'default'}`)
+        );
+      });
+    }
+  });
+});