feat(toggle): add new styles for press state

Author: OS-martacarlos

core/src/components/toggle/toggle.ionic.scss

@@ -5,7 +5,7 @@
 // -----------------------------------------
 
 :host {
-  --track-background: #{globals.$ion-primitives-neutral-800};
+  --track-background: #{globals.$ion-primitives-neutral-500};
   --track-background-checked: #{globals.ion-color(primary, base)};
   --border-radius: #{globals.$ion-border-radius-full};
   --focus-ring-color: #{globals.$ion-border-focus-default};
@@ -82,9 +82,12 @@
 
 // Toggle Native Wrapper: Pressed
 // ----------------------------------------------------------------
+:host(.ion-activated) .toggle-icon {
+  background: globals.$ion-bg-neutral-base-press;
+}
 
-:host(.ion-activated) .toggle-icon::after {
-  @include globals.pressed-state();
+:host(.ion-activated.toggle-checked) .toggle-icon {
+  background: globals.$ion-bg-primary-base-press;
 }
 
 // Ionic Toggle: Disabled

core/src/themes/ionic/ionic.mixins.scss

@@ -12,12 +12,14 @@
 //      }
 //
 // --------------------------------------------------
-@mixin pressed-state() {
+@mixin pressed-state($color: null) {
+  $color: if($color != null, $color, tokens.$ion-state-press);
+
   @include mixins.position(0, 0, 0, 0);
 
   position: absolute;
 
-  background-color: tokens.$ion-state-press;
+  background-color: $color;
 
   content: "";
 }