refactor(item, list): use the same background color (#29739)

core/src/components/item-sliding/test/basic/index.html

@@ -75,7 +75,7 @@
                 </ion-label>
               </ion-item>
               <ion-item-options side="start" class="sliding-enabled">
-                <ion-item-option color="secondary" expandable>
+                <ion-item-option color="primary" expandable>
                   <ion-icon slot="start" name="checkmark"></ion-icon>
                   Unread
                 </ion-item-option>
@@ -105,7 +105,7 @@
                   <ion-icon slot="start" name="checkmark"></ion-icon>
                   Btn 1
                 </ion-item-option>
-                <ion-item-option color="secondary" expandable>
+                <ion-item-option color="primary" expandable>
                   <ion-icon slot="start" name="checkmark"></ion-icon>
                   Btn 2
                 </ion-item-option>
@@ -124,7 +124,7 @@
                   <ion-icon slot="start" name="mail"></ion-icon>
                   Btn 5
                 </ion-item-option>
-                <ion-item-option color="secondary" expandable>
+                <ion-item-option color="primary" expandable>
                   <ion-icon slot="start" name="mail"></ion-icon>
                   Btn 6
                 </ion-item-option>

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

@@ -8,7 +8,7 @@ import { configs, dragElementBy, test } from '@utils/test/playwright';
  * It is important to test all modes to ensure that the
  * child components are being rendered correctly.
  */
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/basic`, config);
@@ -105,7 +105,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
  * make sure the safe area padding is applied only to that side
  * regardless of direction
  */
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
     test.describe('safe area left', () => {
       test('should have padding on the left only', async ({ page }) => {

core/src/components/item/item.ionic.scss

@@ -1,11 +1,12 @@
-@use "./item.common";
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./item.common";
+@use "./item.ionic.vars" as vars;
 
 // Item
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ionic-color-base-white};
+  --background: #{vars.$item-ionic-background};
   --background-activated: #{globals.$ionic-color-neutral-200};
   --border-color: #{globals.$ionic-color-neutral-300};
   --border-style: #{globals.$ionic-border-style-solid};

core/src/components/item/item.ionic.vars.scss

@@ -1,5 +1,10 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
 /// @prop - Padding start for the item content
 $item-ionic-padding-start: globals.$ionic-space-400;
 
 /// @prop - Padding end for the item content
 $item-ionic-padding-end: globals.$ionic-space-400;
+
+/// @prop - Background color for the item content
+$item-ionic-background: globals.$ionic-color-base-white;

core/src/components/list-header/list-header.ionic.scss

@@ -1,6 +1,6 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "../item/item.ionic.vars" as itemVars;
 @import "./list-header";
-@import "../item/item.ionic.vars";
 
 :host {
   --background: transparent;
@@ -20,13 +20,13 @@
 
   /* stylelint-disable */
   @include ltr() {
-    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$item-ionic-padding-end});
-    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$item-ionic-padding-start});
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{itemVars.$item-ionic-padding-end});
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{itemVars.$item-ionic-padding-start});
   }
 
   @include rtl() {
-    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$item-ionic-padding-start});
-    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$item-ionic-padding-end});
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{itemVars.$item-ionic-padding-start});
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{itemVars.$item-ionic-padding-end});
   }
   /* stylelint-enable */
 }

core/src/components/list/list.ionic.scss

@@ -1,4 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "../item/item.ionic.vars" as itemVars;
 @import "./list.ionic.vars.scss";
 
 // Ionic List
@@ -10,6 +11,8 @@ ion-list {
 
   display: block;
 
+  background: #{itemVars.$item-ionic-background};
+
   contain: content;
   list-style-type: none;
 }