chore(themes): move leftover component themes from angular

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';

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 <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// 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,
+        )
+    );
+}

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';

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 <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @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,
+        )
+    );
+}

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,
+        )
+    );
+}