fix(select): revert flaky screenshot

Co-authored-by: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com>

core/src/components/button/button.ionic.scss

@@ -59,9 +59,9 @@
 :host(.button-outline) {
   --border-width: #{globals.$ion-border-size-025};
   --border-style: #{globals.$ion-border-style-solid};
-  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
+  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
   --background-focused: transparent;
-  --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
+  --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
   --background-hover-opacity: 1;
   --border-color: #{globals.ion-color(primary, base)};
   --color: #{globals.ion-color(primary, base)};
@@ -69,20 +69,13 @@
   --ripple-color: var(--background-activated);
 }
 
-// Warning Outline Button - use foreground color for text and border
-:host(.button-outline.ion-color-warning) .button-native {
-  border-color: globals.ion-color(warning, foreground);
-
-  color: globals.ion-color(warning, foreground);
-}
-
 // Clear Button
 // --------------------------------------------------
 
 :host(.button-clear) {
-  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
+  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
   --background-focused: transparent;
-  --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
+  --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
   --background-hover-opacity: 1;
   --color: #{globals.ion-color(primary, foreground)};
   --ripple-opacity: var(--background-activated-opacity, 1);
@@ -98,7 +91,7 @@
 
 :host(.button-outline.ion-color) ion-ripple-effect,
 :host(.button-clear.ion-color) ion-ripple-effect {
-  color: globals.current-color(shade, $subtle: true);
+  color: globals.$ion-primitives-neutral-200;
 }
 
 // Button Sizes
@@ -185,21 +178,21 @@
 // --------------------------------------------------
 
 :host(.button-soft) {
-  --border-radius: #{globals.$ion-soft-xs};
+  --border-radius: #{globals.$ion-border-radius-200};
 }
 
 // Round Button
 // --------------------------------------------------
 
 :host(.button-round) {
-  --border-radius: #{globals.$ion-round-xs};
+  --border-radius: #{globals.$ion-border-radius-full};
 }
 
 // Rectangular Button
 // --------------------------------------------------
 
 :host(.button-rectangular) {
-  --border-radius: #{globals.$ion-rectangular-xs};
+  --border-radius: #{globals.$ion-border-radius-0};
 }
 
 // Button: Focus
@@ -218,15 +211,8 @@
   background: globals.current-color(shade);
 }
 
-:host(.button-outline.ion-color.ion-activated) .button-native::after,
-:host(.button-clear.ion-color.ion-activated) .button-native::after {
-  background: globals.current-color(shade, $subtle: true);
-}
-
 :host(.ion-activated) .button-native:has(ion-ripple-effect)::after,
-:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
-:host(.button-outline.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
-:host(.button-clear.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
+:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
   background: transparent;
 }
 
@@ -237,11 +223,6 @@
   :host(.button-solid.ion-color:hover) .button-native::after {
     background: globals.current-color(shade);
   }
-
-  :host(.button-outline.ion-color:hover) .button-native::after,
-  :host(.button-clear.ion-color:hover) .button-native::after {
-    background: globals.current-color(shade, $subtle: true);
-  }
 }
 
 // Button: Disabled

core/src/components/button/test/theme-ionic/index.html

@@ -56,8 +56,7 @@
             <ion-select-option value="primary">Primary</ion-select-option>
             <ion-select-option value="success">Success</ion-select-option>
             <ion-select-option value="warning">Warning</ion-select-option>
-            <ion-select-option value="medium">Medium</ion-select-option>
-            <ion-select-option value="danger">Danger</ion-select-option>
+            <ion-select-option value="neutral">Neutral</ion-select-option>
           </ion-select>
         </p>
 

core/src/components/input-otp/input-otp.common.scss

@@ -129,6 +129,13 @@
   background: var(--separator-color);
 }
 
+// Fills
+// --------------------------------------------------
+
+:host(.input-otp-fill-outline) {
+  --background: none;
+}
+
 // States
 // --------------------------------------------------
 

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

@@ -68,24 +68,20 @@
 // --------------------------------------------------
 
 :host(.input-otp-shape-round) {
-  --border-radius: #{globals.$ion-round-xl};
+  --border-radius: #{globals.$ion-border-radius-400};
 }
 
 :host(.input-otp-shape-soft) {
-  --border-radius: #{globals.$ion-soft-xl};
+  --border-radius: #{globals.$ion-border-radius-200};
 }
 
 :host(.input-otp-shape-rectangular) {
-  --border-radius: #{globals.$ion-rectangular-xl};
+  --border-radius: #{globals.$ion-border-radius-0};
 }
 
 // Fills
 // --------------------------------------------------
 
-:host(.input-otp-fill-outline) {
-  --background: #{globals.$ion-bg-input-default};
-}
-
 :host(.input-otp-fill-solid) {
   --border-color: #{globals.$ion-bg-input-bold-default};
   --background: #{globals.$ion-bg-input-bold-default};

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

@@ -108,30 +108,30 @@
 // Ionic Input Sizes
 // --------------------------------------------------
 
-:host(.input-size-small) {
+:host(.input-size-medium) {
   --padding-start: #{globals.$ion-space-300};
   --padding-end: #{globals.$ion-space-300};
 }
 
-:host(.input-size-medium) {
+:host(.input-size-large) {
   --padding-start: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-400};
 }
 
-:host(.input-size-large) {
+:host(.input-size-xlarge) {
   --padding-start: #{globals.$ion-space-500};
   --padding-end: #{globals.$ion-space-500};
 }
 
-:host(.input-size-small) .native-wrapper {
+:host(.input-size-medium) .native-wrapper {
   min-height: globals.$ion-scale-1000;
 }
 
-:host(.input-size-medium) .native-wrapper {
+:host(.input-size-large) .native-wrapper {
   min-height: globals.$ion-scale-1200;
 }
 
-:host(.input-size-large) .native-wrapper {
+:host(.input-size-xlarge) .native-wrapper {
   min-height: globals.$ion-scale-1400;
 }