fix(select): style component using sass theme (#1933)

Co-authored-by: Dilyana Yarabanova <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>
Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: 4 people

src/components/select/themes/shared/select.common.scss

@@ -34,7 +34,7 @@ $dropdown-theme: dropdown-theme.$material;
 
 :host(:focus-within) {
     [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-focus--border');
+        background: var-get($theme, 'toggle-button-background-focus');
         color: var-get($theme, 'toggle-button-foreground-focus');
 
         igc-icon {
@@ -43,6 +43,13 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
+:host(:not(:focus-within, [disabled])),
+:host(:not(:focus-within, :disabled)) {
+    [part='toggle-icon filled'] {
+        color: var-get($theme, 'toggle-button-foreground-filled');
+    }
+}
+
 :host([disabled]),
 :host(:disabled) {
     ::part(helper-text) {

src/components/select/themes/shared/select.fluent.scss

@@ -32,13 +32,6 @@ $input-theme: input-theme.$fluent;
     }
 }
 
-:host(:focus-within) {
-    [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-focus');
-    }
-
-}
-
 :host(:not(:state(ig-invalid)):focus-within) {
     igc-input[readonly]:not([disabled])::part(container) {
         &::before {

src/components/select/themes/shared/select.material.scss

@@ -88,10 +88,6 @@ $active-border-width: rem(2px) !default;
     }
 }
 
-[part='toggle-icon filled'] {
-    color: var-get($theme, 'toggle-button-foreground-filled');
-}
-
 :host([disabled]),
 :host(:disabled) {
     igc-input::part(input)::selection {