feat(themes): align component themes with schema tokens

src/components/color-picker/themes/dark/_themes.scss

@@ -1,10 +1,7 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/color-picker' as *;
 
-// Schema keys the component styles never read.
-$_unused: ('swatch-preview-border-radius',);
-$material: map.remove(digest-schema($dark-material-color-picker), $_unused...);
-$bootstrap: map.remove(digest-schema($dark-bootstrap-color-picker), $_unused...);
-$fluent: map.remove(digest-schema($dark-fluent-color-picker), $_unused...);
-$indigo: map.remove(digest-schema($dark-indigo-color-picker), $_unused...);
+$material: digest-schema($dark-material-color-picker);
+$bootstrap: digest-schema($dark-bootstrap-color-picker);
+$fluent: digest-schema($dark-fluent-color-picker);
+$indigo: digest-schema($dark-indigo-color-picker);

src/components/color-picker/themes/light/_themes.scss

@@ -1,11 +1,8 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/color-picker' as *;
 
-// Schema keys the component styles never read.
-$_unused: ('swatch-preview-border-radius',);
-$base: map.remove(digest-schema($light-color-picker), $_unused...);
-$material: map.remove(digest-schema($material-color-picker), $_unused...);
-$bootstrap: map.remove(digest-schema($bootstrap-color-picker), $_unused...);
-$fluent: map.remove(digest-schema($fluent-color-picker), $_unused...);
-$indigo: map.remove(digest-schema($indigo-color-picker), $_unused...);
+$base: digest-schema($light-color-picker);
+$material: digest-schema($material-color-picker);
+$bootstrap: digest-schema($bootstrap-color-picker);
+$fluent: digest-schema($fluent-color-picker);
+$indigo: digest-schema($indigo-color-picker);

src/components/combo/themes/combo.base.scss

@@ -56,14 +56,6 @@
         --ig-size: var(--ig-size-small, 1);
         --ig-theme: material;
     }
-
-    [part~='case-icon'] {
-        color: color(gray, 600);
-    }
-
-    [part='case-icon active'] {
-        color: color(primary, 500);
-    }
 }
 
 [part='filter-input'] {

src/components/combo/themes/dark/_themes.scss

@@ -1,10 +1,7 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/combo' as *;
 
-// Schema keys the component styles never read.
-$_unused: ('case-icon-color', 'case-icon-color--active');
-$material: map.remove(digest-schema($dark-material-combo), $_unused...);
-$bootstrap: map.remove(digest-schema($dark-bootstrap-combo), $_unused...);
-$fluent: map.remove(digest-schema($dark-fluent-combo), $_unused...);
-$indigo: map.remove(digest-schema($dark-indigo-combo), $_unused...);
+$material: digest-schema($dark-material-combo);
+$bootstrap: digest-schema($dark-bootstrap-combo);
+$fluent: digest-schema($dark-fluent-combo);
+$indigo: digest-schema($dark-indigo-combo);

src/components/combo/themes/light/_themes.scss

@@ -1,13 +1,9 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/combo' as *;
 @use 'components/input/themes/light/themes' as input-theme;
 
-// Schema keys the component styles never read.
-$_unused: ('case-icon-color', 'case-icon-color--active');
-$base: map.remove(digest-schema($light-combo), $_unused...);
-$material: map.remove(digest-schema($material-combo), $_unused...);
-$bootstrap: map.remove(digest-schema($bootstrap-combo), $_unused...);
-$fluent: map.remove(digest-schema($fluent-combo), $_unused...);
-$indigo: map.remove(digest-schema($indigo-combo), $_unused...);
-
+$base: digest-schema($light-combo);
+$material: digest-schema($material-combo);
+$bootstrap: digest-schema($bootstrap-combo);
+$fluent: digest-schema($fluent-combo);
+$indigo: digest-schema($indigo-combo);

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

@@ -92,10 +92,6 @@ $dropdown-theme: dropdown-theme.$bootstrap;
     border-inline-end: rem(1px) solid var-get($input-theme, 'border-color');
 }
 
-[part='case-icon active'] {
-    color: color(primary, 500);
-}
-
 :host(:disabled),
 :host([disabled]) {
     [part~='clear-icon'] {

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

@@ -48,6 +48,14 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
+[part~='case-icon'] {
+    color: var-get($theme, 'case-icon-color');
+}
+
+[part='case-icon active'] {
+    color: var-get($theme, 'case-icon-color-active');
+}
+
 igc-input[slot='anchor']:focus-within {
     [part~='toggle-icon'] {
         background: var-get($theme, 'toggle-button-background-focus');

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

@@ -27,14 +27,6 @@ $dropdown-theme: dropdown-theme.$indigo;
     }
 }
 
-[part='case-icon'] {
-    color: color(gray, 600);
-}
-
-[part='case-icon active'] {
-    color: color(gray, 900);
-}
-
 :host(:not([single-select])) {
     > igc-input::part(input) {
         &::selection {
@@ -59,10 +51,6 @@ $dropdown-theme: dropdown-theme.$indigo;
             background: color(primary, 100);
         }
     }
-
-    [part='case-icon active'] {
-        color: color(primary, 500);
-    }
 }
 
 [part='list'] {

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

@@ -65,14 +65,6 @@ $dropdown-theme: dropdown-theme.$material;
             background: color(primary, 100);
         }
     }
-
-    [part='case-icon'] {
-        color: color(gray, 600);
-    }
-
-    [part='case-icon active'] {
-        color: color(primary, 500);
-    }
 }
 
 :host(:not([outlined]):focus-within) {

src/components/input/themes/dark/_themes.scss

@@ -3,7 +3,7 @@
 @use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *;
 
 // Schema keys the component styles never read.
-$_unused: ('filled-secondary-color', 'success-secondary-color', 'success-shadow-color', 'warning-secondary-color');
+$_unused: ('success-secondary-color', 'success-shadow-color', 'warning-secondary-color');
 $material: map.remove(digest-schema($dark-material-input-group), $_unused...);
 $bootstrap: map.remove(digest-schema($dark-bootstrap-input-group), $_unused...);
 $fluent: map.remove(digest-schema($dark-fluent-input-group), $_unused...);

src/components/input/themes/light/_themes.scss

@@ -3,7 +3,7 @@
 @use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *;
 
 // Schema keys the component styles never read.
-$_unused: ('filled-secondary-color', 'success-secondary-color', 'success-shadow-color', 'warning-secondary-color');
+$_unused: ('success-secondary-color', 'success-shadow-color', 'warning-secondary-color');
 $base: map.remove(digest-schema($light-input-group), $_unused...);
 $material: map.remove(digest-schema($material-input-group), $_unused...);
 $bootstrap: map.remove(digest-schema($bootstrap-input-group), $_unused...);

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

@@ -83,6 +83,10 @@ $theme: $bootstrap;
     }
 }
 
+[part='label']:has(+ [part~='filled']) {
+    color: var-get($theme, 'filled-secondary-color');
+}
+
 [name='prefix']::slotted(*),
 [name='suffix']::slotted(*) {
     display: inline-flex;

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

@@ -48,6 +48,10 @@ $theme: $fluent;
         color: var-get($theme, 'idle-secondary-color');
     }
 
+    [part='label']:has(+ [part~='filled']) {
+        color: var-get($theme, 'filled-secondary-color');
+    }
+
     [part^='container'] {
         height: var-get($theme, 'size');
         background: var-get($theme, 'border-background');

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

@@ -65,6 +65,10 @@ $transition-duration: .25s;
         margin-block-end: rem(4px);
     }
 
+    [part='label']:has(+ [part~='filled']) {
+        color: var-get($theme, 'filled-secondary-color');
+    }
+
     [part^='container'] {
         border-radius: var-get($theme, 'box-border-radius');
         border-end-start-radius: 0;

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

@@ -91,6 +91,10 @@ $fs: rem(16px) !default;
     will-change: font-size, color, transform, translate;
 }
 
+[part~='filled'] [part='label'] {
+    color: var-get($theme, 'filled-secondary-color');
+}
+
 [part^='container'] {
     grid-template-columns: auto auto 1fr auto;
 }

src/components/rating/themes/dark/_themes.scss

@@ -1,10 +1,7 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/rating' as *;
 
-// Schema keys the component styles never read.
-$_unused: ('disabled-value-label',);
-$material: map.remove(digest-schema($dark-material-rating), $_unused...);
-$bootstrap: map.remove(digest-schema($dark-bootstrap-rating), $_unused...);
-$fluent: map.remove(digest-schema($dark-fluent-rating), $_unused...);
-$indigo: map.remove(digest-schema($dark-indigo-rating), $_unused...);
+$material: digest-schema($dark-material-rating);
+$bootstrap: digest-schema($dark-bootstrap-rating);
+$fluent: digest-schema($dark-fluent-rating);
+$indigo: digest-schema($dark-indigo-rating);

src/components/rating/themes/light/_themes.scss

@@ -1,11 +1,8 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/rating' as *;
 
-// Schema keys the component styles never read.
-$_unused: ('disabled-value-label',);
-$base: map.remove(digest-schema($light-rating), $_unused...);
-$material: map.remove(digest-schema($material-rating), $_unused...);
-$bootstrap: map.remove(digest-schema($bootstrap-rating), $_unused...);
-$fluent: map.remove(digest-schema($fluent-rating), $_unused...);
-$indigo: map.remove(digest-schema($indigo-rating), $_unused...);
+$base: digest-schema($light-rating);
+$material: digest-schema($material-rating);
+$bootstrap: digest-schema($bootstrap-rating);
+$fluent: digest-schema($fluent-rating);
+$indigo: digest-schema($indigo-rating);

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

@@ -45,7 +45,7 @@ $theme: $material;
     }
 
     [part~='value-label'] {
-        color: var-get($theme, 'disabled-label-color');
+        color: var-get($theme, 'disabled-value-label');
     }
 
     [part~='symbols'] {

src/components/textarea/themes/light/_themes.scss

@@ -3,7 +3,7 @@
 @use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *;
 
 // Schema keys the component styles never read.
-$_unused: ('filled-secondary-color', 'success-secondary-color', 'success-shadow-color', 'warning-secondary-color');
+$_unused: ('success-secondary-color', 'success-shadow-color', 'warning-secondary-color');
 $base: map.remove(digest-schema($light-input-group), $_unused...);
 $material: map.remove(digest-schema($material-input-group), $_unused...);
 $bootstrap: map.remove(digest-schema($bootstrap-input-group), $_unused...);

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

@@ -41,6 +41,11 @@ $theme: $base;
     color: var-get($theme, 'idle-secondary-color');
 }
 
+[part~='filled'] [part~='label'],
+[part~='label']:has(+ [part~='filled']) {
+    color: var-get($theme, 'filled-secondary-color');
+}
+
 textarea {
     background: transparent;
     color: var-get($theme, 'filled-text-color');

src/components/tile-manager/themes/dark/_themes.scss

@@ -1,11 +1,8 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/tile-manager' as *;
 
-// Schema keys the component styles never read.
-$_unused: ('overlay-background',);
-$base: map.remove(digest-schema($dark-base-tile-manager), $_unused...);
-$material: map.remove(digest-schema($dark-material-tile-manager), $_unused...);
-$bootstrap: map.remove(digest-schema($dark-bootstrap-tile-manager), $_unused...);
-$fluent: map.remove(digest-schema($dark-fluent-tile-manager), $_unused...);
-$indigo: map.remove(digest-schema($dark-indigo-tile-manager), $_unused...);
+$base: digest-schema($dark-base-tile-manager);
+$material: digest-schema($dark-material-tile-manager);
+$bootstrap: digest-schema($dark-bootstrap-tile-manager);
+$fluent: digest-schema($dark-fluent-tile-manager);
+$indigo: digest-schema($dark-indigo-tile-manager);

src/components/tile-manager/themes/light/_themes.scss

@@ -1,11 +1,8 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/tile-manager' as *;
 
-// Schema keys the component styles never read.
-$_unused: ('overlay-background',);
-$base: map.remove(digest-schema($light-tile-manager), $_unused...);
-$material: map.remove(digest-schema($material-tile-manager), $_unused...);
-$bootstrap: map.remove(digest-schema($bootstrap-tile-manager), $_unused...);
-$fluent: map.remove(digest-schema($fluent-tile-manager), $_unused...);
-$indigo: map.remove(digest-schema($indigo-tile-manager), $_unused...);
+$base: digest-schema($light-tile-manager);
+$material: digest-schema($material-tile-manager);
+$bootstrap: digest-schema($bootstrap-tile-manager);
+$fluent: digest-schema($fluent-tile-manager);
+$indigo: digest-schema($indigo-tile-manager);

src/components/tile-manager/themes/shared/tile/tile.common.scss

@@ -38,7 +38,7 @@ $theme: $material;
 }
 
 :host([part~='dragging']) {
-    background: var-get($theme, 'placeholder-background');
+    background: var-get($theme, 'overlay-background');
 
     // An outline, not a border, so that the dragged tile keeps its size.
     outline: rem(1px) solid var-get($theme, 'ghost-border');