feat(file-input): add foreground tokens for file names field

Author: adrianptrv

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

@@ -10,6 +10,6 @@ $theme: $fluent;
 
 :host(:is(igc-file-input)) {
   [part~='file-names'] {
-      color: var(--ig-input-idle-text-color, #fff)
+      color: var(--ig-file-names-foreground, #fff)
   }
 }

src/components/file-input/themes/dark/file-input.material.scss

@@ -10,6 +10,6 @@ $theme: $material;
 
 :host(:is(igc-file-input)) {
   [part~='file-names'] {
-      color: var(--ig-input-idle-text-color, #fff)
+      color: var(--ig-file-names-foreground, #fff)
   }
 }

src/components/file-input/themes/file-input.base.scss

@@ -63,13 +63,13 @@ $theme-file-input: file-input.$base;
 
     [part~='filled'] 
     [part~='file-names'] {
-        color: var-get($theme, 'filled-text-color');
+        color: var-get($theme-file-input, 'file-names-foreground--filled');
         background: var-get($theme-file-input, 'file-names-background--filled')
     }
 
     [part~='container']:focus-within {
         [part~='file-names'] {
-            color: var-get($theme, 'focused-text-color');
+            color: var-get($theme-file-input, 'file-names-foreground--focused');
             background: var-get($theme-file-input, 'file-names-background--focused')
         }
     }
@@ -108,7 +108,7 @@ $theme-file-input: file-input.$base;
 :host(:is(igc-file-input):disabled),
 :host(:is(igc-file-input)[disabled]) {
     [part~='file-names'] {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($theme-file-input, 'file-names-foreground--disabled');
         background: var-get($theme-file-input, 'file-names-background--disabled')
     }
 }

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

@@ -9,6 +9,6 @@ $theme: $fluent;
 
 :host(:is(igc-file-input)) {
   [part~='file-names'] {
-      color: var(--ig-input-idle-text-color, #000)
+      color: var(--ig-file-names-foreground, #000)
   }
 }

src/components/file-input/themes/light/file-input.material.scss

@@ -9,6 +9,6 @@ $theme: $material;
 
 :host(:is(igc-file-input)) {
   [part~='file-names'] {
-      color: var(--ig-input-idle-text-color, #000)
+      color: var(--ig-file-names-foreground, #000)
   }
 }

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

@@ -1,7 +1,9 @@
 @use 'styles/utilities' as *;
 @use '../../../input/themes/light/themes' as *;
+@use '../light/themes' as file-input;
 
 $theme: $bootstrap;
+$theme-file-input: file-input.$bootstrap;
 
 :host(:focus-within) {
     --border-color: #{var-get($theme, 'focused-border-color')};
@@ -35,7 +37,7 @@ $theme: $bootstrap;
     font-size: var(--input-font);
     padding-inline: pad-inline(8px, 12px, 16px);
     padding-block: pad-block(4px, 6px, 8px);
-    color: var-get($theme, 'idle-text-color');
+    color: var-get($theme-file-input, 'file-names-foreground');
     border: 1px solid var-get($theme, 'border-color');
     border-start-end-radius: var-get($theme, 'border-border-radius');
     border-end-end-radius: var-get($theme, 'border-border-radius');
@@ -92,7 +94,7 @@ $theme: $bootstrap;
     --input-border-color: #{var-get($theme, 'disabled-border-color')};
 
     [part~='file-names'] {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($theme-file-input, 'file-names-foreground--disabled');
         border-color: var-get($theme, 'disabled-border-color');
     }
 

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

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