fix(file-input): make all elements styleable with CSS variables + fix Bootstrap invalid box-shadow (#1747)

adrianptrv · web-flow · commit ca6fc20a4bab · 2025-07-04T14:33:11.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.2.2",
-    "igniteui-theming": "^19.0.0",
+    "igniteui-theming": "^19.1.1",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^16.1.2",
     "lit-analyzer": "^2.0.3",
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,9 @@
+@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');
+}
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,9 @@
+@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');
+}
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'] {
@@ -23,7 +25,9 @@ $theme: $base;
         max-height: var-get($theme, 'size');
         height: 100%;
         grid-area: 1 / 3;
-
+        color: var-get($theme-file-input, 'file-names-foreground');
+        background: var-get($theme-file-input, 'file-names-background');
+          
         > span {
             @include ellipsis();
         }
@@ -57,6 +61,42 @@ $theme: $base;
     [part~='suffix'] {
         grid-area: 1 / 4;
     }
+
+    [part~='filled'] 
+    [part~='file-names'] {
+        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-file-input, 'file-names-foreground--focused');
+            background: var-get($theme-file-input, 'file-names-background--focused')
+        }
+    }
+
+    [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--disabled')};
+        --background: #{var-get($theme-file-input, 'file-selector-button-background')};
+        --disabled-background: #{var-get($theme-file-input, 'file-selector-button-background--disabled')};
+        --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--filled')};
+        --background: #{var-get($theme-file-input, 'file-selector-button-background--filled')};
+    }
+
+    [part~='container']:focus-within
+    [part~='file-selector-button'] igc-button {
+        --foreground: #{var-get($theme-file-input, 'file-selector-button-foreground--focused')};
+        --background: #{var-get($theme-file-input, 'file-selector-button-background--focused')};
+    }
 }
 
 :host(:not(:disabled)) {
@@ -69,6 +109,7 @@ $theme: $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')
     }
 }
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,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig');
+}
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,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig');
+}
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
@@ -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')};
@@ -12,17 +14,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);
         transition: border 0.15s ease-out;
@@ -46,7 +37,6 @@ $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');
     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');
@@ -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');
+        color: var-get($theme-file-input, 'file-names-foreground--disabled');
         border-color: var-get($theme, 'disabled-border-color');
     }
 
diff --git a/src/components/file-input/themes/shared/file-input.indigo.scss b/src/components/file-input/themes/shared/file-input.indigo.scss
@@ -1,12 +1,13 @@
 @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');
     font-size: rem(12px);
     line-height: rem(16px);
 }
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
diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss
