Merge branch 'ROU-11323' into ROU-11324

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

@@ -5,16 +5,16 @@
 // --------------------------------------------------
 
 :host {
-  --knob-border-radius: 50%;
+  --knob-border-radius: #{globals.$ion-border-radius-full};
   --knob-background: #{globals.$ion-primitives-base-white};
-  --knob-box-shadow: 0;
-  --knob-size: 22px;
+  --knob-box-shadow: none;
+  --knob-size: #{globals.$ion-scale-600};
   --knob-handle-size: #{globals.$ion-scale-1000};
   --bar-height: #{globals.$ion-scale-200};
   --bar-background: #{globals.$ion-primitives-neutral-100};
   --bar-background-active: #{globals.ion-color(primary, base)};
   --bar-border-radius: #{globals.$ion-border-radius-400};
-  --height: 42px;
+  --height: #{globals.$ion-scale-1000};
 
   @include globals.typography(globals.$ion-body-md-regular);
 
@@ -39,11 +39,11 @@
 }
 
 ::slotted([slot="start"]) {
-  @include margin(0, 16px, 0, 0);
+  @include margin(0, globals.$ion-space-400, 0, 0);
 }
 
 ::slotted([slot="end"]) {
-  @include margin(0, 0, 0, 16px);
+  @include margin(0, 0, 0, globals.$ion-space-400);
 }
 
 ::slotted([slot="label"]) {
@@ -93,7 +93,7 @@
   @include border-radius(globals.$ion-border-radius-0);
 
   position: absolute;
-  top: calc((42px * 0.5) - (globals.$ion-scale-300 * 0.5));
+  top: calc((var(--height) * 0.5) - (globals.$ion-scale-300 * 0.5));
 
   width: globals.$ion-scale-100;
   height: globals.$ion-scale-300;
@@ -109,7 +109,7 @@
 .range-pin {
   @include padding(globals.$ion-space-300, globals.$ion-space-300, globals.$ion-space-300, globals.$ion-space-300);
 
-  min-width: 28px;
+  min-width: globals.$ion-scale-700;
 
   transform: translate3d(0, calc(-100% + 11px), 0) scale(1);
 
@@ -122,8 +122,9 @@
 
 .range-knob {
   border-width: globals.$ion-border-size-025;
-  border-style: solid;
+  border-style: globals.$ion-border-style-solid;
   border-color: globals.ion-color(primary, base);
+  box-sizing: border-box;
 }
 
 // Ionic Range: Disabled (based on iOS Range)

core/src/components/list-header/list-header.ionic.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