diff --git a/sass/themes/components/_index.scss b/sass/themes/components/_index.scss
index a53ca8d1..c1ad66f0 100644
--- a/sass/themes/components/_index.scss
+++ b/sass/themes/components/_index.scss
@@ -1,3 +1,4 @@
+@forward 'action-strip/action-strip-theme';
@forward 'avatar/avatar-theme';
@forward 'badge/badge-theme';
@forward 'banner/banner-theme';
@@ -22,6 +23,7 @@
@forward 'icon/icon-theme';
@forward 'icon-button/icon-button-theme';
@forward 'input/input-theme';
+@forward 'input/file-input-theme';
@forward 'label/label-theme';
@forward 'list/list-theme';
@forward 'navbar/navbar-theme';
diff --git a/sass/themes/components/action-strip/_action-strip-theme.scss b/sass/themes/components/action-strip/_action-strip-theme.scss
new file mode 100644
index 00000000..0f584e9a
--- /dev/null
+++ b/sass/themes/components/action-strip/_action-strip-theme.scss
@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use '../../config';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+
+////
+/// @group themes
+/// @package theming
+/// @access public
+/// @author Simeon Simeonoff
+/// @author Marin Popov
+////
+
+/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+///
+/// @param {Color} $icon-color [null] - The color used for the actions icons.
+/// @param {Color} $background [null] - The color used for the action strip component content background.
+/// @param {Color} $actions-background [null] - The color used for the actions background.
+/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
+/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
+///
+/// @example scss Change the background and icon colors in action strip
+/// $my-action-strip-theme: action-strip-theme($background: black);
+/// // Pass the theme to the css-vars() mixin
+/// @include css-vars($my-action-strip-theme);
+@function action-strip-theme(
+ $schema: $light-material-schema,
+
+ $background: null,
+ $actions-background: null,
+ $icon-color: null,
+ $delete-action: null,
+ $actions-border-radius: null
+) {
+ $name: 'igx-action-strip';
+ $action-strip-schema: ();
+
+ @if map.has-key($schema, 'action-strip') {
+ $action-strip-schema: map.get($schema, 'action-strip');
+ } @else {
+ $action-strip-schema: $schema;
+ }
+
+ $theme: digest-schema($action-strip-schema);
+
+ @if not($icon-color) and $actions-background {
+ $icon-color: adaptive-contrast(var(--actions-background));
+ }
+
+ @if not($actions-border-radius) {
+ $actions-border-radius: map.get($theme, 'actions-border-radius');
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ background: $background,
+ actions-background: $actions-background,
+ icon-color: $icon-color,
+ delete-action: $delete-action,
+ actions-border-radius: $actions-border-radius,
+ )
+ );
+}
diff --git a/sass/themes/components/grid/_index.scss b/sass/themes/components/grid/_index.scss
index 3f80ac6a..9fd9c91e 100644
--- a/sass/themes/components/grid/_index.scss
+++ b/sass/themes/components/grid/_index.scss
@@ -1,3 +1,4 @@
@forward 'grid-theme';
@forward 'grid-summary-theme';
@forward 'grid-toolbar-theme';
+@forward 'pivot-data-selector-theme';
diff --git a/sass/themes/components/grid/_pivot-data-selector-theme.scss b/sass/themes/components/grid/_pivot-data-selector-theme.scss
new file mode 100644
index 00000000..4276cd33
--- /dev/null
+++ b/sass/themes/components/grid/_pivot-data-selector-theme.scss
@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../../config';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @group themes
+/// @package theming
+/// @access public
+/// @author Simeon Simeonoff
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+@function pivot-data-selector-theme($schema: $light-material-schema, $background: null) {
+ $name: 'igx-pivot-data-selector';
+ $selector: '.igx-pivot-data-selector';
+ $pivot-data-selector-schema: ();
+
+ @if map.has-key($schema, 'pivot-data-selector') {
+ $pivot-data-selector-schema: map.get($schema, 'pivot-data-selector');
+ } @else {
+ $pivot-data-selector-schema: $schema;
+ }
+
+ $theme: digest-schema($pivot-data-selector-schema);
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ )
+ );
+}
diff --git a/sass/themes/components/input/_file-input-theme.scss b/sass/themes/components/input/_file-input-theme.scss
new file mode 100644
index 00000000..5cf117e7
--- /dev/null
+++ b/sass/themes/components/input/_file-input-theme.scss
@@ -0,0 +1,150 @@
+@use 'sass:map';
+@use '../../config';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @group themes
+/// @package theming
+/// @access public
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $file-names-background [null] - The file names container background color.
+/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
+/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
+/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
+/// @param {Color} $file-names-foreground [null] - The file names color.
+/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
+/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
+/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
+/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
+/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
+/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
+/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
+/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
+/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
+/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
+/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
+/// @example scss Change the focused border and label colors
+/// $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
+/// // Pass the theme to the css-vars() mixin
+/// @include css-vars($my-file-input-theme);
+@function file-input-theme(
+ $schema: $light-material-schema,
+ $file-names-background: null,
+ $file-names-background--focused: null,
+ $file-names-background--filled: null,
+ $file-names-background--disabled: null,
+ $file-names-foreground: null,
+ $file-names-foreground--focused: null,
+ $file-names-foreground--filled: null,
+ $file-names-foreground--disabled: null,
+
+ $file-selector-button-background: null,
+ $file-selector-button-background--focused: null,
+ $file-selector-button-background--filled: null,
+ $file-selector-button-background--disabled: null,
+ $file-selector-button-foreground: null,
+ $file-selector-button-foreground--focused: null,
+ $file-selector-button-foreground--filled: null,
+ $file-selector-button-foreground--disabled: null
+) {
+ $name: 'igx-file-input';
+ $file-input-schema: ();
+
+ @if map.has-key($schema, 'file-input') {
+ $file-input-schema: map.get($schema, 'file-input');
+ } @else {
+ $file-input-schema: $schema;
+ }
+
+ $theme: digest-schema($file-input-schema);
+
+ @if $file-names-background != transparent {
+ @if not($file-names-background--focused) and $file-names-background {
+ $file-names-background--focused: dynamic-shade(var(--file-names-background));
+ }
+
+ @if not($file-names-background--filled) and $file-names-background {
+ $file-names-background--filled: $file-names-background;
+ }
+
+ @if not($file-names-background--disabled) and $file-names-background {
+ $file-names-background--disabled: hsla(from $file-names-background h s l / 0.4);
+ }
+
+ @if not($file-names-foreground) and $file-names-background {
+ $file-names-foreground: adaptive-contrast($file-names-background);
+ }
+
+ @if not($file-names-foreground--focused) and $file-names-background--focused {
+ $file-names-foreground--focused: adaptive-contrast($file-names-background--focused);
+ }
+
+ @if not($file-names-foreground--filled) and $file-names-background--filled {
+ $file-names-foreground--filled: adaptive-contrast($file-names-background--filled);
+ }
+
+ @if not($file-names-foreground--disabled) and $file-names-background--disabled {
+ $file-names-foreground--disabled: adaptive-contrast($file-names-background--disabled);
+ }
+ }
+
+ @if $file-selector-button-background != transparent {
+ @if not($file-selector-button-background--focused) and $file-selector-button-background {
+ $file-selector-button-background--focused: dynamic-shade(var(--file-selector-button-background));
+ }
+
+ @if not($file-selector-button-background--filled) and $file-selector-button-background {
+ $file-selector-button-background--filled: $file-selector-button-background;
+ }
+
+ @if not($file-selector-button-background--disabled) and $file-selector-button-background {
+ $file-selector-button-background--disabled: hsla(from $file-selector-button-background h s l / 0.4);
+ }
+
+ @if not($file-selector-button-foreground) and $file-selector-button-background {
+ $file-selector-button-foreground: adaptive-contrast($file-selector-button-background);
+ }
+
+ @if not($file-selector-button-foreground--focused) and $file-selector-button-background--focused {
+ $file-selector-button-foreground--focused: adaptive-contrast($file-selector-button-background--focused);
+ }
+
+ @if not($file-selector-button-foreground--filled) and $file-selector-button-background--filled {
+ $file-selector-button-foreground--filled: adaptive-contrast($file-selector-button-background--filled);
+ }
+
+ @if not($file-selector-button-foreground--disabled) and $file-selector-button-background--disabled {
+ $file-selector-button-foreground--disabled: adaptive-contrast($file-selector-button-background--disabled);
+ }
+ }
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ file-names-background: $file-names-background,
+ file-names-background--focused: $file-names-background--focused,
+ file-names-background--filled: $file-names-background--filled,
+ file-names-background--disabled: $file-names-background--disabled,
+ file-names-foreground: $file-names-foreground,
+ file-names-foreground--focused: $file-names-foreground--focused,
+ file-names-foreground--filled: $file-names-foreground--filled,
+ file-names-foreground--disabled: $file-names-foreground--disabled,
+
+ file-selector-button-background: $file-selector-button-background,
+ file-selector-button-background--focused: $file-selector-button-background--focused,
+ file-selector-button-background--filled: $file-selector-button-background--filled,
+ file-selector-button-background--disabled: $file-selector-button-background--disabled,
+ file-selector-button-foreground: $file-selector-button-foreground,
+ file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
+ file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
+ file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
+ )
+ );
+}