feat(file-input): fix bootstrap invalid state box-shadow + add file-input CSS vars for elements

adrianptrv · adrianptrv · commit ae67b292f940 · 2025-06-13T19:46:24.000+03:00
diff --git a/src/components/file-input/themes/dark/_themes.scss b/src/components/file-input/themes/dark/_themes.scss
@@ -0,0 +1,8 @@
+@use 'sass:map';
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/file-input' as *;
+
+$material: digest-schema($dark-material-file-input);
+$bootstrap: digest-schema($dark-bootstrap-file-input);
+$fluent: digest-schema($dark-fluent-file-input);
+$indigo: digest-schema($dark-indigo-file-input);
diff --git a/src/components/file-input/themes/dark/file-input.bootstrap.scss b/src/components/file-input/themes/dark/file-input.bootstrap.scss
@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+}
diff --git a/src/components/file-input/themes/dark/file-input.fluent.scss b/src/components/file-input/themes/dark/file-input.fluent.scss
@@ -0,0 +1,15 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+}
+
+:host(:is(igc-file-input)) {
+  [part~='file-names'] {
+      color: var(--ig-input-idle-text-color, #fff)
+  }
+}
diff --git a/src/components/file-input/themes/dark/file-input.indigo.scss b/src/components/file-input/themes/dark/file-input.indigo.scss
@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+}
diff --git a/src/components/file-input/themes/dark/file-input.material.scss b/src/components/file-input/themes/dark/file-input.material.scss
@@ -0,0 +1,15 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+}
+
+:host(:is(igc-file-input)) {
+  [part~='file-names'] {
+      color: var(--ig-input-idle-text-color, #fff)
+  }
+}
diff --git a/src/components/file-input/themes/file-input.base.scss b/src/components/file-input/themes/file-input.base.scss
@@ -1,7 +1,9 @@
 @use 'styles/utilities' as *;
 @use '../../input/themes/light/themes' as *;
+@use 'light/themes' as file-input;
 
 $theme: $base;
+$theme-file-input: file-input.$base;
 
 :host(:is(igc-file-input)) {
     [part~='file-parts'] {
@@ -22,6 +24,7 @@ $theme: $base;
 
         align-content: center;
         grid-area: 1 / 3;
+        background: var-get($theme-file-input, 'file-names-background')
     }
 
     [part~='container'] {
@@ -47,6 +50,42 @@ $theme: $base;
     [part~='suffix'] {
         grid-area: 1 / 4;
     }
+
+    [part~='filled'] 
+    [part~='file-names'] {
+        color: var-get($theme, 'filled-text-color');
+        background: var-get($theme-file-input, 'file-names-background--fill')
+    }
+
+    [part~='container']:focus-within {
+        [part~='file-names'] {
+            color: var-get($theme, 'focused-text-color');
+            background: var-get($theme-file-input, 'file-names-background--focus')
+        }
+    }
+
+    [part~='file-selector-button'] igc-button {
+        --foreground: #{var-get($theme-file-input, 'file-selector-button-foreground')};
+        --disabled-foreground: #{var-get($theme-file-input, 'file-selector-button-foreground--disable')};
+        --background: #{var-get($theme-file-input, 'file-selector-button-background')};
+        --disabled-background: #{var-get($theme-file-input, 'file-selector-button-background--disable')};
+        --hover-foreground: var(--foreground);
+        --active-foreground: var(--foreground);
+        --hover-background: var(--background);
+        --active-background: var(--background);
+    }
+  
+    [part~='filled'] 
+    [part~='file-selector-button'] igc-button {
+        --foreground: #{var-get($theme-file-input, 'file-selector-button-foreground--fill')};
+        --background: #{var-get($theme-file-input, 'file-selector-button-background--fill')};
+    }
+
+    [part~='container']:focus-within
+    [part~='file-selector-button'] igc-button {
+        --foreground: #{var-get($theme-file-input, 'file-selector-button-foreground--focus')};
+        --background: #{var-get($theme-file-input, 'file-selector-button-background--focus')};
+    }
 }
 
 :host(:not(:disabled)) {
@@ -60,5 +99,6 @@ $theme: $base;
 :host(:is(igc-file-input)[disabled]) {
     [part~='file-names'] {
         color: var-get($theme, 'disabled-text-color');
+        background: var-get($theme-file-input, 'file-names-background--disable')
     }
 }
diff --git a/src/components/file-input/themes/light/_themes.scss b/src/components/file-input/themes/light/_themes.scss
@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/file-input' as *;
+
+$base: digest-schema($light-file-input);
+$material: digest-schema($material-file-input);
+$bootstrap: digest-schema($bootstrap-file-input);
+$fluent: digest-schema($fluent-file-input);
+$indigo: digest-schema($indigo-file-input);
diff --git a/src/components/file-input/themes/light/file-input.bootstrap.scss b/src/components/file-input/themes/light/file-input.bootstrap.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig');
+}
diff --git a/src/components/file-input/themes/light/file-input.fluent.scss b/src/components/file-input/themes/light/file-input.fluent.scss
@@ -0,0 +1,14 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig');
+}
+
+:host(:is(igc-file-input)) {
+  [part~='file-names'] {
+      color: var(--ig-input-idle-text-color, #000)
+  }
+}
diff --git a/src/components/file-input/themes/light/file-input.indigo.scss b/src/components/file-input/themes/light/file-input.indigo.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig');
+}
diff --git a/src/components/file-input/themes/light/file-input.material.scss b/src/components/file-input/themes/light/file-input.material.scss
@@ -0,0 +1,14 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig');
+}
+
+:host(:is(igc-file-input)) {
+  [part~='file-names'] {
+      color: var(--ig-input-idle-text-color, #000)
+  }
+}
diff --git a/src/components/file-input/themes/light/file-input.shared.scss b/src/components/file-input/themes/light/file-input.shared.scss
@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+:host {
+    @include css-vars-from-theme($base, 'ig');
+}
diff --git a/src/components/file-input/themes/shared/file-input.bootstrap.scss b/src/components/file-input/themes/shared/file-input.bootstrap.scss
@@ -12,16 +12,6 @@ $theme: $bootstrap;
 }
 
 [part~='file-selector-button'] igc-button {
-    --foreground: #{var-get($theme, 'input-prefix-color')};
-    --background: #{var-get($theme, 'input-prefix-background')};
-    --hover-foreground: var(--foreground);
-    --hover-background: var(--background);
-    --active-foreground: var(--foreground);
-    --active-background: var(--background);
-    --focus-visible-foreground: var(--foreground);
-    --focus-visible-background: var(--background);
-    --disabled-foreground: #{var-get($theme, 'disabled-text-color')};
-    --disabled-background: #{var-get($theme, 'border-disabled-background')};
 
     &::part(base) {
         font-size: var(--input-font);
@@ -85,24 +75,25 @@ $theme: $bootstrap;
 :host(:not([disabled])[invalid]) {
     --input-border-color: #{var-get($theme, 'error-secondary-color')};
 
-    [part~='container'] {
-        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
-    }
-
     [part='prefix'],
     [part='suffix'],
     [part~='file-names'] {
         border-color: var-get($theme, 'error-secondary-color');
     }
 }
 
+:host(:not([disabled])[invalid]:focus-within) {
+    [part~='container'] {
+        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     --input-border-color: #{var-get($theme, 'disabled-border-color')};
 
     [part~='file-names'] {
         color: var-get($theme, 'disabled-text-color');
-        background: var-get($theme, 'border-disabled-background');
         border-color: var-get($theme, 'disabled-border-color');
     }
 
diff --git a/src/components/file-input/themes/themes.ts b/src/components/file-input/themes/themes.ts
@@ -3,6 +3,17 @@ import { css } from 'lit';
 import type { Themes } from '../../../theming/types.js';
 import { all as inputThemes } from '../../input/themes/themes.js';
 
+// Dark Overrides
+import { styles as bootstrapDark } from './dark/file-input.bootstrap.css.js';
+import { styles as fluentDark } from './dark/file-input.fluent.css.js';
+import { styles as indigoDark } from './dark/file-input.indigo.css.js';
+import { styles as materialDark } from './dark/file-input.material.css.js';
+// Light Overrides
+import { styles as bootstrapLight } from './light/file-input.bootstrap.css.js';
+import { styles as fluentLight } from './light/file-input.fluent.css.js';
+import { styles as indigoLight } from './light/file-input.indigo.css.js';
+import { styles as materialLight } from './light/file-input.material.css.js';
+import { styles as shared } from './light/file-input.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/file-input.bootstrap.css.js';
 import { styles as fluent } from './shared/file-input.fluent.css.js';
@@ -11,44 +22,54 @@ import { styles as material } from './shared/file-input.material.css.js';
 
 const light = {
   shared: css`
+    ${shared}
     ${inputThemes.light.shared!}
   `,
   bootstrap: css`
     ${bootstrap}
+    ${bootstrapLight}
     ${inputThemes.light.bootstrap!}
   `,
   material: css`
     ${material}
+    ${materialLight}
     ${inputThemes.light.material!}
   `,
   indigo: css`
     ${indigo}
+    ${indigoLight}
     ${inputThemes.light.indigo!}
   `,
   fluent: css`
     ${fluent}
+    ${fluentLight}
     ${inputThemes.light.fluent!}
   `,
 };
 
 const dark = {
   shared: css`
+    ${shared}
     ${inputThemes.dark.shared!}
   `,
   bootstrap: css`
     ${bootstrap}
+    ${bootstrapDark}
     ${inputThemes.dark.bootstrap!}
   `,
   material: css`
     ${material}
+    ${materialDark}
     ${inputThemes.dark.material!}
   `,
   indigo: css`
     ${indigo}
+    ${indigoDark}
     ${inputThemes.dark.indigo!}
   `,
   fluent: css`
     ${fluent}
+    ${fluentDark}
     ${inputThemes.dark.fluent!}
   `,
 };
diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss
@@ -170,10 +170,14 @@ $theme: $bootstrap;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not([disabled])[invalid]:focus-within) {
+:host(:not([disabled])[invalid]) {
     [part~='input'] {
         border-color: var-get($theme, 'error-secondary-color');
+    }
+}
+
+:host(:not([disabled])[invalid]:focus-within) {
+    [part~='input'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
     }
 }
diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss
@@ -31,11 +31,15 @@ $input-theme: input-theme.$bootstrap;
     }
 }
 
-:host([invalid]),
+:host([invalid]) {
+    igc-input[readonly]:not([disabled])::part(input) {
+        border-color: var-get($input-theme, 'error-secondary-color');
+    }
+}
+
 :host([invalid]:focus-within) {
     igc-input[readonly]:not([disabled])::part(input) {
         box-shadow: 0 0 0 rem(4px) var-get($input-theme, 'error-shadow-color');
-        border-color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss
@@ -121,14 +121,20 @@ textarea {
 :host([invalid]:not([disabled])) {
     textarea {
         border: rem(1px) solid var-get($theme, 'error-secondary-color');
-        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
     }
 
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
 }
 
+:host([invalid]:not(:disabled):focus-within),
+:host([invalid]:not([disabled])):focus-within {
+    textarea {
+        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     [part='prefix'],
