fix(combo): style component using sass theme

Author: SisIvanova

src/components/combo/themes/shared/combo.bootstrap.scss

@@ -96,53 +96,11 @@ $dropdown-theme: dropdown-theme.$bootstrap;
     color: color(primary, 500);
 }
 
-:host(:focus-within) {
-    [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-focus--border');
-        color: var-get($theme, 'toggle-button-foreground-focus');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-
-    [part~='clear-icon'] {
-        background: var-get($theme, 'clear-button-background-focus');
-        color: var-get($theme, 'clear-button-foreground-focus');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-}
-
 :host(:disabled),
 :host([disabled]) {
-    ::slotted([slot='prefix']),
-    ::slotted([slot='suffix']),
-    igc-input::part(label),
-    igc-input::part(input)::placeholder {
-        color: var-get($theme, 'disabled-text-color');
-    }
-
     [part~='clear-icon'] {
         border-inline-end: rem(1px) solid
             var-get($input-theme, 'disabled-border-color');
-        background: inherit;
-        color: var-get($theme, 'disabled-text-color');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-
-    [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-disabled');
-        color: var-get($theme, 'toggle-button-foreground-disabled');
-
-        igc-icon {
-            color: inherit;
-        }
     }
 
     ::slotted([slot='suffix']),

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

@@ -19,6 +19,7 @@ $dropdown-theme: dropdown-theme.$material;
 
 [part='empty'] {
     color: var-get($theme, 'empty-list-placeholder-color');
+    background: var-get($theme, 'empty-list-background');
 }
 
 [part~='toggle-icon'] {
@@ -30,6 +31,10 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
+[part='toggle-icon filled'] {
+    color: var-get($theme, 'toggle-button-foreground-filled');
+}
+
 [part~='clear-icon'] {
     background: var-get($theme, 'clear-button-background');
     color: var-get($theme, 'clear-button-foreground');
@@ -41,7 +46,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 {

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

@@ -70,55 +70,3 @@ $dropdown-theme: dropdown-theme.$fluent;
         background: transparent;
     }
 }
-
-[part='empty'] {
-    color: var-get($theme, 'empty-list-placeholder-color');
-}
-
-:host(:focus-within) {
-    [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-focus');
-        color: var-get($theme, 'toggle-button-foreground-focus');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-
-    [part~='clear-icon'] {
-        background: var-get($theme, 'clear-button-background-focus');
-        color: var-get($theme, 'clear-button-foreground-focus');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-}
-
-:host(:disabled),
-:host([disabled]) {
-    ::slotted([slot='prefix']),
-    ::slotted([slot='suffix']),
-    igc-input::part(label),
-    igc-input::part(input)::placeholder {
-        color: var-get($theme, 'disabled-text-color');
-    }
-
-    [part~='clear-icon'] {
-        background: inherit;
-        color: var-get($theme, 'disabled-text-color');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-
-    [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-disabled');
-        color: var-get($theme, 'toggle-button-foreground-disabled');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-}

src/components/combo/themes/shared/combo.indigo.scss

@@ -83,7 +83,7 @@ $dropdown-theme: dropdown-theme.$indigo;
 :host(:hover),
 :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 {
@@ -112,26 +112,7 @@ $dropdown-theme: dropdown-theme.$indigo;
 :host([disabled]) {
     ::slotted([slot='prefix']),
     ::slotted([slot='suffix']),
-
     igc-input::part(input)::selection {
         background: transparent;
     }
-
-    [part~='clear-icon'] {
-        background: inherit;
-        color: var-get($theme, 'disabled-text-color');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-
-    [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-disabled');
-        color: var-get($theme, 'toggle-button-foreground-disabled');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
 }

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

@@ -75,18 +75,14 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
-[part='toggle-icon filled'] {
-    color: var-get($theme, 'toggle-button-foreground-filled');
-}
-
 :host(:not([outlined]):focus-within) {
     igc-input::part(container) {
         --_toggle-focus-background: #{var-get($theme, 'toggle-button-background')};
         --_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground')};
 
         &:focus-within {
             --_toggle-focus-background: #{var-get($theme, 'toggle-button-background-focus')};
-            --_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground-filled')};
+            --_toggle-focus-foreground: #{var-get($theme, 'toggle-button-foreground-focus')};
         }
     }
 
@@ -106,34 +102,6 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
-:host(:disabled),
-:host([disabled]) {
-    ::slotted([slot='prefix']),
-    ::slotted([slot='suffix']),
-    igc-input::part(label),
-    igc-input::part(input)::placeholder {
-        color: var-get($theme, 'disabled-text-color');
-    }
-
-    [part~='clear-icon'] {
-        background: inherit;
-        color: var-get($theme, 'disabled-text-color');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-
-    [part~='toggle-icon'] {
-        background: var-get($theme, 'toggle-button-background-disabled');
-        color: var-get($theme, 'toggle-button-foreground-disabled');
-
-        igc-icon {
-            color: inherit;
-        }
-    }
-}
-
 :host(:disabled[outlined]),
 :host([outlined][disabled]) {
     igc-input::part(filled) + igc-input::part(notch) {