fix(input-group): use the file schema colors

Author: desig9stein

projects/igniteui-angular/src/lib/input-group/themes/_base.scss

@@ -332,13 +332,15 @@ $base-scale-size: (
         }
 
         @include e(upload-button) {
-            --igx-button-background: transparent;
-            --igx-button-hover-background: transparent;
-            --igx-button-focus-background: transparent;
-            --igx-button-focus-visible-background: transparent;
-            --igx-button-active-background: transparent;
-
-            //padding-inline: var(--_prefix-suffix-spacing);
+            --background: #{var-get($theme, 'file-selector-button-background')};
+            --foreground: #{var-get($theme, 'file-selector-button-foreground')};
+            --focus-background: #{var-get($theme, 'file-selector-button-background--focused')};
+            --focus-foreground: #{var-get($theme, 'file-selector-button-foreground--focused')};
+            --focus-visible-background: #{var-get($theme, 'file-selector-button-background--focused')};
+            --active-background: #{var-get($theme, 'file-selector-button-background')};
+            --active-foreground: #{var-get($theme, 'file-selector-button-foreground')};
+            --disabled-background: #{var-get($theme, 'file-selector-button-background--disabled')};
+            --disabled-foreground: #{var-get($theme, 'file-selector-button-foreground--disabled')};
         }
 
         @include m(textarea-group) {
@@ -473,10 +475,6 @@ $base-scale-size: (
                 grid-column: 1 / -1;
             }
 
-            @include e(file-input) {
-                color: var-get($theme, 'disabled-text-color');
-            }
-
             @include e(toggle-button) {
                 color: var(--toggle-button-foreground-disabled);
                 background: var(--toggle-button-background-disabled);
@@ -486,6 +484,11 @@ $base-scale-size: (
                 display: none;
             }
 
+            @include e(file-input) {
+                background: var-get($theme, 'file-names-background--disabled');
+                color: var-get($theme, 'file-names-foreground--disabled');
+            }
+
             /* stylelint-disable max-nesting-depth */
             &:hover {
                 @include e(input) {
@@ -498,5 +501,6 @@ $base-scale-size: (
             }
             /* stylelint-enable max-nesting-depth */
         }
+
     }
 }

projects/igniteui-angular/src/lib/input-group/themes/dark/_tokens.scss

@@ -1,7 +1,18 @@
+@use 'sass:map';
 @use 'igniteui-theming/sass/themes' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/file-input' as *;
 
-$material: digest-schema($dark-material-input-group);
-$bootstrap: digest-schema($dark-bootstrap-input-group);
-$fluent: digest-schema($dark-fluent-input-group);
-$indigo: digest-schema($dark-indigo-input-group);
+$input-material: digest-schema($dark-material-input-group);
+$input-bootstrap: digest-schema($dark-bootstrap-input-group);
+$input-fluent: digest-schema($dark-fluent-input-group);
+$input-indigo: digest-schema($dark-indigo-input-group);
+$file-material: digest-schema($dark-material-file-input);
+$file-bootstrap: digest-schema($dark-bootstrap-file-input);
+$file-fluent: digest-schema($dark-fluent-file-input);
+$file-indigo: digest-schema($dark-indigo-file-input);
+
+$material: map.merge($input-material, $file-material);
+$bootstrap: map.merge($input-bootstrap, $file-bootstrap);
+$fluent: map.merge($input-fluent, $file-fluent);
+$indigo: map.merge($input-indigo, $file-indigo);

projects/igniteui-angular/src/lib/input-group/themes/light/_tokens.scss

@@ -1,8 +1,21 @@
+@use 'sass:map';
 @use 'igniteui-theming/sass/themes' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/file-input' as *;
 
-$base: digest-schema($light-input-group);
-$material: digest-schema($material-input-group);
-$bootstrap: digest-schema($bootstrap-input-group);
-$fluent: digest-schema($fluent-input-group);
-$indigo: digest-schema($indigo-input-group);
+$input-base: digest-schema($light-input-group);
+$input-material: digest-schema($material-input-group);
+$input-bootstrap: digest-schema($bootstrap-input-group);
+$input-fluent: digest-schema($fluent-input-group);
+$input-indigo: digest-schema($indigo-input-group);
+$file-base: digest-schema($light-file-input);
+$file-material: digest-schema($material-file-input);
+$file-bootstrap: digest-schema($bootstrap-file-input);
+$file-fluent: digest-schema($fluent-file-input);
+$file-indigo: digest-schema($indigo-file-input);
+
+$base: map.merge($input-base, $file-base);
+$material: map.merge($input-material, $file-material);
+$bootstrap: map.merge($input-bootstrap, $file-bootstrap);
+$fluent: map.merge($input-fluent, $file-fluent);
+$indigo: map.merge($input-indigo, $file-indigo);

projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss

@@ -81,22 +81,10 @@ $border-radius: var-get($_theme, 'border-border-radius');
         @extend %border-styles;
 
         border-width: $border-size;
-        background: var-get($_theme, 'input-prefix-background');
         grid-row: 2;
     }
 
     @include e(upload-button) {
-        --igx-button-background: #{var-get($_theme, 'input-prefix-background')};
-        --igx-button-hover-background: #{var-get($_theme, 'input-prefix-background')};
-        --igx-button-active-background: #{var-get($_theme, 'input-prefix-background')};
-        --igx-button-focus-visible-background: #{var-get($_theme, 'input-prefix-background')};
-        --igx-button-foreground: #{var-get($_theme, 'input-prefix-color')};
-        --igx-button-hover-foreground: #{var-get($_theme, 'input-prefix-color')};
-        --igx-button-active-foreground: #{var-get($_theme, 'input-prefix-color')};
-        --igx-button-focus-visible-foreground: #{var-get($_theme, 'input-prefix-color')};
-        --igx-button-disabled-foreground: #{var-get($_theme, 'disabled-text-color')};
-        --igx-button-disabled-background: #{var-get($_theme, 'border-disabled-background')};
-
         @include type-style(body-1);
 
         min-height: revert;
@@ -460,7 +448,7 @@ $border-radius: var-get($_theme, 'border-border-radius');
         }
 
         @include e(upload) {
-            @extend %disabled-styles;
+            border-color: var-get($_theme, 'disabled-border-color');
         }
 
         @include e(file-input) {

projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss

@@ -18,14 +18,6 @@ $_theme: $fluent;
         }
     }
 
-    @include e(upload-button) {
-        --igx-button-background: transparent;
-        --igx-button-hover-background: transparent;
-        --igx-button-focus-background: transparent;
-        --igx-button-focus-visible-background: transparent;
-        --igx-button-active-background: transparent;
-    }
-
     @include e(hint) {
         min-height: rem(18px);
     }

projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss

@@ -450,6 +450,34 @@ $input-bottom-spacing: rem(6px);
         }
     }
 
+    @include m(file) {
+        @include e(file-input) {
+            background: var-get($_theme, 'file-names-background');
+            color: var-get($_theme, 'file-names-foreground');
+        }
+    }
+
+    @include mx(file, filled) {
+        @include e(file-input) {
+            background: var-get($_theme, 'file-names-background--filled');
+            color: var-get($_theme, 'file-names-foreground--filled');
+        }
+    }
+
+    @include mx(file, focused) {
+        @include e(file-input) {
+            background: var-get($_theme, 'file-names-background--focused');
+            color: var-get($_theme, 'file-names-foreground--focused');
+        }
+    }
+
+    @include mx(file, disabled) {
+        @include e(file-input) {
+            background: var-get($_theme, 'file-names-background--disabled');
+            color: var-get($_theme, 'file-names-foreground--disabled');
+        }
+    }
+
     @include mx(border, textarea-group) {
         @include e(label) {
             top: var(--_input-top-spacing);