Merge branch 'next' into ROU-11438

Author: JoaoFerreira-FrontEnd

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

@@ -50,3 +50,23 @@
 
   box-sizing: border-box;
 }
+
+// Focus
+// ---------------------------------------------
+
+:host(.ion-focused.select-fill-outline) {
+  --border-color: var(--highlight-color);
+}
+
+:host(.ion-focused.select-fill-outline:not(.ion-invalid):not(.ion-valid)) {
+  --border-width: #{globals.$ion-border-size-050};
+}
+
+/**
+ * If the select has a validity state, the
+ * border should reflect that as a color.
+ */
+:host(.has-focus.select-fill-outline.ion-valid),
+:host(.select-fill-outline.ion-touched.ion-invalid) {
+  --border-color: var(--highlight-color);
+}

core/src/components/select/select.ionic.scss

@@ -9,14 +9,17 @@
   --background: #{globals.$ion-primitives-base-white};
   // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
   // ios and md. This will allow us to have a single color map.
-  --border-color: #{globals.current-color(neutral)};
+  --border-color: #{globals.$ion-primitives-neutral-500};
   --border-width: #{globals.$ion-border-size-025};
   --padding-start: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-400};
   --padding-top: #{globals.$ion-space-300};
   --padding-bottom: #{globals.$ion-space-300};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
+  --highlight-color-focused: #{globals.$ion-border-focus-default};
+  --highlight-color-valid: #{globals.$ion-semantics-success-900};
+  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
 }
 
 // Select Label