Merge branch 'next' into ROU-11323

Author: OS-pedrolourenco

core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png

@@ -1,6 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "./input";
-@import "./input.ionic.vars";
 @import "./input.ionic.outline.scss";
 
 // Ionic Input

core/src/components/input/input.ionic.scss

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

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

@@ -1,5 +1,4 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "../item/item.ionic.vars" as itemVars;
 @import "./list-header";
 
 :host {
@@ -10,7 +9,7 @@
 
   min-height: 58px;
 
-  /** 
+  /**
    * The focus rings from components like buttons and links
    * are being cut off. This style ensures that the focus ring
    * is completely visible.
@@ -19,13 +18,13 @@
 
   /* stylelint-disable */
   @include ltr() {
-    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});
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{globals.$ion-space-400});
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{globals.$ion-space-400});
   }
 
   @include rtl() {
-    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});
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{globals.$ion-space-400});
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{globals.$ion-space-400});
   }
   /* stylelint-enable */
 }

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

@@ -1,6 +1,4 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "../item/item.ionic.vars" as itemVars;
-@import "./list.ionic.vars.scss";
 
 // Ionic List
 // --------------------------------------------------
@@ -11,7 +9,7 @@ ion-list {
 
   display: block;
 
-  background: #{itemVars.$item-ionic-background};
+  background: #{globals.$ion-primitives-base-white};
 
   contain: content;
   list-style-type: none;
@@ -52,7 +50,7 @@ ion-list {
      * The top of the list should not have a border radius because
      * that would include the header.
      */
-    @include globals.border-radius(initial, initial, $list-ionic-border-radius-round, $list-ionic-border-radius-round);
+    @include globals.border-radius(initial, initial, globals.$ion-border-radius-400, globals.$ion-border-radius-400);
   }
 
   // Target the first element in the list after the header
@@ -62,7 +60,7 @@ ion-list {
      * The bottom of the first element should not have a border radius
      * because that would not look connected to the rest.
      */
-    @include globals.border-radius($list-ionic-border-radius-round, $list-ionic-border-radius-round, initial, initial);
+    @include globals.border-radius(globals.$ion-border-radius-400, globals.$ion-border-radius-400, initial, initial);
   }
 
   /* Soft */
@@ -72,7 +70,7 @@ ion-list {
      * The top of the list should not have a border radius because
      * that would include the header.
      */
-    @include globals.border-radius(initial, initial, $list-ionic-border-radius-soft, $list-ionic-border-radius-soft);
+    @include globals.border-radius(initial, initial, globals.$ion-border-radius-200, globals.$ion-border-radius-200);
   }
 
   // Target the first element in the list after the header
@@ -82,7 +80,7 @@ ion-list {
      * The bottom of the first element should not have a border radius
      * because that would not look connected to the rest.
      */
-    @include globals.border-radius($list-ionic-border-radius-soft, $list-ionic-border-radius-soft, initial, initial);
+    @include globals.border-radius(globals.$ion-border-radius-200, globals.$ion-border-radius-200, initial, initial);
   }
 
   /* Rectangular */
@@ -92,12 +90,7 @@ ion-list {
      * The top of the list should not have a border radius because
      * that would include the header.
      */
-    @include globals.border-radius(
-      initial,
-      initial,
-      $list-ionic-border-radius-rectangular,
-      $list-ionic-border-radius-rectangular
-    );
+    @include globals.border-radius(initial, initial, globals.$ion-border-radius-0, globals.$ion-border-radius-0);
   }
 
   // Target the first element in the list after the header
@@ -107,29 +100,24 @@ ion-list {
      * The bottom of the first element should not have a border radius
      * because that would not look connected to the rest.
      */
-    @include globals.border-radius(
-      $list-ionic-border-radius-rectangular,
-      $list-ionic-border-radius-rectangular,
-      initial,
-      initial
-    );
+    @include globals.border-radius(globals.$ion-border-radius-0, globals.$ion-border-radius-0, initial, initial);
   }
 }
 
 .list-ionic:not(:has(ion-list-header)) {
   /* Round */
   &.list-round {
-    @include globals.border-radius($list-ionic-border-radius-round);
+    @include globals.border-radius(globals.$ion-border-radius-400);
   }
 
   /* Soft */
   &.list-soft {
-    @include globals.border-radius($list-ionic-border-radius-soft);
+    @include globals.border-radius(globals.$ion-border-radius-200);
   }
 
   /* Rectangular */
   &.list-rectangular {
-    @include globals.border-radius($list-ionic-border-radius-rectangular);
+    @include globals.border-radius(globals.$ion-border-radius-0);
   }
 }
 

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

@@ -1,13 +1,13 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./tab-bar.common";
-@import "./tab-bar.ionic.vars";
 
 :host {
-  --background: #{$tabbar-ionic-background};
-  --background-activated: #{$tabbar-ionic-background-activated};
-  --background-focused: #{$tabbar-ionic-background-focused};
-  --color: #{$tabbar-ionic-color};
-  --color-selected: #{$tabbar-ionic-color-selected};
+  --background: #{globals.$tabbar-ionic-background};
+  --background-activated: #{globals.$tabbar-ionic-background-activated};
+  --background-focused: #{globals.$tabbar-ionic-background-focused};
+  --border: #{globals.$ion-border-size-0} #{globals.$ion-border-style-solid} #{globals.$tabbar-ionic-border-color};
+  --color: #{globals.$tabbar-ionic-color};
+  --color-selected: #{globals.$tabbar-ionic-color-selected};
 
   /**
    * Tab bar has a box sizing of content-box to ensure the padding