refactor(input): move file related styles to file component

Author: simeonoff

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

@@ -0,0 +1,5 @@
+@use 'styles/utilities' as *;
+
+[part='file-names'] {
+    font-size: rem(14px);
+}

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

@@ -0,0 +1,12 @@
+@use 'styles/utilities' as *;
+@use '../../../input/themes/light/themes' as *;
+
+$theme: $indigo;
+
+[part='file-names'] {
+    @include type-style('body-2');
+
+    color: var-get($theme, 'idle-text-color');
+    font-size: rem(12px);
+    line-height: rem(16px);
+}

src/components/file-input/themes/themes.ts

@@ -5,6 +5,8 @@ import { all as inputThemes } from '../../input/themes/themes.js';
 
 // Shared Styles
 import { styles as bootstrap } from './shared/bootstrap.css.js';
+import { styles as fluent } from './shared/fluent.css.js';
+import { styles as indigo } from './shared/indigo.css.js';
 import { styles as material } from './shared/material.css.js';
 
 const light = {
@@ -20,9 +22,11 @@ const light = {
     ${inputThemes.light.material!}
   `,
   indigo: css`
+    ${indigo}
     ${inputThemes.light.indigo!}
   `,
   fluent: css`
+    ${fluent}
     ${inputThemes.light.fluent!}
   `,
 };
@@ -40,9 +44,11 @@ const dark = {
     ${inputThemes.dark.material!}
   `,
   indigo: css`
+    ${indigo}
     ${inputThemes.dark.indigo!}
   `,
   fluent: css`
+    ${fluent}
     ${inputThemes.dark.fluent!}
   `,
 };

src/components/input/input.ts

@@ -3,7 +3,6 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 
-import IgcButtonComponent from '../button/button.js';
 import { registerComponent } from '../common/definitions/register.js';
 import {
   type FormValue,
@@ -47,11 +46,7 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
 
   /* blazorSuppress */
   public static register() {
-    registerComponent(
-      IgcInputComponent,
-      IgcValidationContainerComponent,
-      IgcButtonComponent
-    );
+    registerComponent(IgcInputComponent, IgcValidationContainerComponent);
   }
 
   protected override _formValue: FormValue<string>;
@@ -275,7 +270,6 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
       <input
         id=${this.inputId}
         part=${partNameMap(this.resolvePartNames('input'))}
-        class="native-input"
         name=${ifDefined(this.name)}
         type=${ifDefined(this.type)}
         pattern=${ifDefined(this.pattern)}

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

@@ -74,10 +74,6 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
         border: none;
         grid-area: 1 / 2;
     }
-
-    [part='file-names'] {
-        font-size: rem(14px);
-    }
 }
 
 :host(:hover) {

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

@@ -117,14 +117,6 @@ $transition-duration: .25s;
     [part~='suffixed'] {
         padding-inline-end: 0;
     }
-
-    [part='file-names'] {
-        @include type-style('body-2');
-
-        color: var-get($theme, 'idle-text-color');
-        font-size: rem(12px);
-        line-height: rem(16px);
-    }
 }
 
 :host(:focus-within),