- reorganize fill vars

Author: JoaoFerreira-FrontEnd

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

@@ -0,0 +1,6 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+:host(.input-fill-outline) {
+    --background: #{globals.$ion-primitives-base-white};  
+    --border-color: #{globals.$ion-primitives-neutral-500};
+}

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

@@ -1,21 +1,20 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./input.common";
+@forward "./input.ionic.outline.scss";
 @forward "./input.ionic.solid.scss";
 // Ionic Input
 // --------------------------------------------------
 
 :host {
   --color: #{globals.$ion-primitives-neutral-1200};
   --border-width: #{globals.$ion-border-size-025};
-  --border-color: #{globals.$ion-primitives-neutral-500};
   --border-radius: #{globals.$ion-border-radius-100};
   --highlight-color-valid: #{globals.$ion-semantics-success-900};
   --highlight-color-invalid: #{globals.$ion-border-danger-default};
   --padding-start: #{globals.$ion-space-300};
   --padding-end: #{globals.$ion-space-300};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
-  --background: #{globals.$ion-primitives-base-white};
 
   @include globals.typography(globals.$ion-body-md-regular);
 }

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

@@ -11,7 +11,7 @@
  * If the input has a validity state, the
  * border should reflect that as a color.
  */
-:host(.has-focus.input-fill-solid.ion-valid) .native-wrapper,
+:host(.input-fill-solid.has-focus.ion-valid) .native-wrapper,
 :host(.input-fill-solid.ion-touched.ion-invalid) .native-wrapper {
   --border-color: var(--highlight-color);
 }