+ @if (isFileType && isFilled) {
+
-
-
-
-
-
-
-
-
+
+
-
-
- @switch (theme) {
- @case ('bootstrap') {
-
- }
- @case ('fluent') {
-
- }
- @case ('indigo') {
-
- }
- @default {
-
- }
- }
-
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.scss b/projects/igniteui-angular/src/lib/input-group/input-group.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index 86a739ffa42..8b0eb978076 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -1,4 +1,4 @@
-import { NgTemplateOutlet, NgClass } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectorRef,
Component,
@@ -7,14 +7,18 @@ import {
DestroyRef,
ElementRef,
HostBinding,
- HostListener, Inject, Input,
- Optional, QueryList, booleanAttribute,
+ HostListener,
+ Inject,
+ Input,
+ Optional,
+ QueryList,
+ booleanAttribute,
inject,
+ ViewEncapsulation,
DOCUMENT,
- AfterContentChecked
} from '@angular/core';
import { IInputResourceStrings, InputResourceStringsEN } from '../core/i18n/input-resources';
-import { PlatformUtil, getComponentTheme } from '../core/utils';
+import { PlatformUtil } from '../core/utils';
import { IgxButtonDirective } from '../directives/button/button.directive';
import { IgxHintDirective } from '../directives/hint/hint.directive';
import {
@@ -33,10 +37,12 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token
@Component({
selector: 'igx-input-group',
templateUrl: 'input-group.component.html',
+ styleUrl: 'input-group.component.css',
+ encapsulation: ViewEncapsulation.None,
providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }],
- imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
+ imports: [NgTemplateOutlet, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
})
-export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentChecked {
+export class IgxInputGroupComponent implements IgxInputGroupBase {
/**
* Sets the resource strings.
* By default it uses EN resources.
@@ -124,7 +130,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh
private _destroyRef = inject(DestroyRef);
private _type: IgxInputGroupType = null;
private _filled = false;
- private _theme: IgxTheme;
+ protected _theme: IgxTheme;
private _resourceStrings = getCurrentResourceStrings(InputResourceStringsEN);
private _readOnly: undefined | boolean;
@@ -294,7 +300,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh
/** @hidden @internal */
@HostBinding('class.igx-input-group--suffixed')
public get hasSuffixes() {
- return this._suffixes.length > 0 || this.isFileType && this.isFilled;
+ return this._suffixes.length > 0 || (this.isFileType && this.isFilled && !this.disabled);
}
/** @hidden @internal */
@@ -329,10 +335,17 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh
* }
* ```
*/
+ @HostBinding('class.igx-input-group--line')
public get isTypeLine(): boolean {
return this.type === 'line' && this._theme === 'material';
}
+ /** @hidden @internal */
+ @HostBinding('class.igx-input-group--base')
+ public get isNotBorder(): boolean {
+ return this.type !== 'border' && this._theme === 'material';
+ }
+
/**
* Returns whether the `IgxInputGroupComponent` type is box.
* ```typescript
@@ -403,50 +416,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh
return this.type === 'border' && this._theme === 'material';
}
- /**
- * Returns true if the `IgxInputGroupComponent` theme is Fluent.
- * ```typescript
- * @ViewChild("MyInputGroup1")
- * public inputGroup: IgxInputGroupComponent;
- * ngAfterViewInit(){
- * let isTypeFluent = this.inputGroup.isTypeFluent;
- * }
- * ```
- */
- @HostBinding('class.igx-input-group--fluent')
- public get isTypeFluent() {
- return this._theme === 'fluent';
- }
- /**
- * Returns true if the `IgxInputGroupComponent` theme is Bootstrap.
- * ```typescript
- * @ViewChild("MyInputGroup1")
- * public inputGroup: IgxInputGroupComponent;
- * ngAfterViewInit(){
- * let isTypeBootstrap = this.inputGroup.isTypeBootstrap;
- * }
- * ```
- */
- @HostBinding('class.igx-input-group--bootstrap')
- public get isTypeBootstrap() {
- return this._theme === 'bootstrap';
- }
-
- /**
- * Returns true if the `IgxInputGroupComponent` theme is Indigo.
- * ```typescript
- * @ViewChild("MyInputGroup1")
- * public inputGroup: IgxInputGroupComponent;
- * ngAfterViewInit(){
- * let isTypeIndigo = this.inputGroup.isTypeIndigo;
- * }
- * ```
- */
- @HostBinding('class.igx-input-group--indigo')
- public get isTypeIndigo() {
- return this._theme === 'indigo';
- }
/**
* Returns whether the `IgxInputGroupComponent` type is search.
@@ -474,20 +444,4 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentCh
public set filled(val) {
this._filled = val;
}
-
- private setComponentTheme() {
- if (!this.themeToken.preferToken) {
- const theme = getComponentTheme(this.element.nativeElement);
-
- if (theme && theme !== this._theme) {
- this.theme = theme;
- this.cdr.markForCheck();
- }
- }
- }
-
- /** @hidden @internal */
- public ngAfterContentChecked() {
- this.setComponentTheme();
- }
}
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/_base.scss b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss
new file mode 100644
index 00000000000..9d5518af043
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/_base.scss
@@ -0,0 +1,546 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color' as *;
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/animations/easings' as *;
+@use './light/tokens' as *;
+
+$theme: $base;
+
+$required-symbol: '*';
+$transition-timing: .25s $out-cubic;
+
+// This creates an inverse relationship
+// between the value of the base scale size and
+// the sizing of all inner elements.
+// i.e. the bigger the scale size,
+// the smaller the padding of the inner items.
+$base-scale-size: (
+ 'comfortable': 16px,
+ 'cosy': 19px,
+ 'compact': 22px
+);
+
+@include layer(base) {
+ %bundle-start-end {
+ display: flex;
+ min-width: 0;
+ min-height: 100%;
+ grid-row: var(--_bundle-row);
+ }
+
+ @include b(igx-input-group) {
+ @include sizable();
+ --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+ --_bundle-template-columns: auto 1fr auto;
+ --_bundle-template-rows: auto #{var-get($theme, 'size')};
+ --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(12px), rem(16px))};
+ --_bundle-row: 1;
+
+ &:has([igxLabel], igx-label) {
+ --_label-row: 1;
+ --_bundle-row: 2;
+ --_hint-row: 3;
+ }
+
+ &:not(:has([igxLabel], igx-label)) {
+ --_bundle-row: 1;
+ --_hint-row: 2;
+ }
+
+ display: grid;
+ grid-template-columns: var(--_bundle-template-columns);
+ grid-template-rows: var(--_bundle-template-rows);
+ position: relative;
+ color: var-get($theme, 'idle-text-color');
+
+ igx-icon,
+ igx-icon[igxPrefix],
+ igx-icon[igxSuffix] {
+ --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+ }
+
+ igx-suffix:not(igx-icon),
+ [igxSuffix]:not(igx-icon),
+ igx-prefix:not(igx-icon),
+ [igxPrefix]:not(igx-icon) {
+ // The :not(igx-icon) makes sure that we don't override the icon font if the prefix/suffix is set on igx-icon
+ @include type-style(subtitle-1);
+ }
+
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix,
+ [igxSuffix] {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+
+ // !important is needed, otherwise if the directive is set directly on the igx-icon
+ // the icon overrides the width/height set by the prefix/suffix
+ width: max-content !important;
+ height: auto !important;
+ min-height: 100%;
+ outline-style: none;
+ transition: color $transition-timing, background $transition-timing;
+
+ &:not(:empty) {
+ padding-inline: var(--_prefix-suffix-spacing);
+ }
+ }
+
+ igx-prefix,
+ [igxPrefix] {
+ color: var-get($theme, 'input-prefix-color');
+ background: var-get($theme, 'input-prefix-background');
+ }
+
+ igx-suffix:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__clear-button, .igx-input-group__case-icon),
+ [igxSuffix]:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__clear-button, .igx-input-group__case-icon) {
+ color: var-get($theme, 'input-suffix-color');
+ background: var-get($theme, 'input-suffix-background');
+ }
+
+ @include e(toggle-button) {
+ cursor: pointer;
+ color: var(--toggle-button-foreground);
+ background: var(--toggle-button-background);
+ }
+
+ @include e(clear-button) {
+ cursor: pointer;
+ color: var(--clear-button-foreground);
+ background: var(--clear-button-background);
+ }
+
+ @include e(clear-icon) {
+ cursor: pointer;
+
+ // The clear icon/suffix is visible only when the file type input is filled
+ color: var-get($theme, 'input-suffix-color--filled');
+ background: var-get($theme, 'input-suffix-background--filled');
+ }
+
+ @include e(bundle) {
+ display: grid;
+
+ // Safari can't handle subgrid correctly that's why i need to add the template here
+ grid-template-columns: var(--_bundle-template-columns);
+ grid-template-rows: subgrid;
+ grid-row: var(--_bundle-row);
+ position: relative;
+ max-width: 100%;
+ font-size: rem(16px);
+ height: var-get($theme, 'size');
+ min-height: var-get($theme, 'size');
+ grid-column: 1 / -1;
+ }
+
+ @include e(label) {
+ color: #{var-get($theme, 'idle-secondary-color')};
+
+ display: inline-block;
+ grid-row: var(--_label-row);
+ grid-column: 1 / -1;
+ }
+
+ @include e(bundle-start) {
+ @extend %bundle-start-end;
+ grid-column: 1;
+ }
+
+ @include e(bundle-end) {
+ @extend %bundle-start-end;
+
+ grid-column: 3;
+ }
+
+ @include e(bundle-main) {
+ grid-row: var(--_bundle-row);
+ min-width: 0;
+ }
+
+ %input-textarea-common {
+ position: relative;
+ display: block;
+ border: none;
+ width: 100%;
+ min-width: 0;
+ background: transparent;
+ color: var-get($theme, 'filled-text-color');
+ outline-style: none;
+ box-shadow: none;
+ text-overflow: ellipsis;
+ z-index: 0;
+
+ &::-webkit-input-placeholder {
+ line-height: normal;
+ }
+
+ &::placeholder {
+ color: var-get($theme, 'placeholder-color');
+ opacity: 1;
+
+ /* Fix placeholder position in Safari */
+ line-height: normal;
+ }
+
+ &:hover {
+ color: var-get($theme, 'filled-text-hover-color');
+
+ &::placeholder {
+ color: var-get($theme, 'hover-placeholder-color');
+ }
+ }
+
+ &:focus {
+ cursor: text;
+ color: var-get($theme, 'focused-text-color');
+
+ &::placeholder {
+ color: var-get($theme, 'hover-placeholder-color');
+ }
+ }
+ }
+
+ @include e(input) {
+ @extend %input-textarea-common;
+
+ overflow: hidden;
+ height: calc(var-get($theme, 'size') - 1px);
+
+ &:not([type='date']) {
+ /* Reset typography */
+ line-height: 0 !important;
+ }
+
+ &[type='file'] {
+ opacity: 0;
+ z-index: 2;
+ width: 100%;
+ height: 100%;
+
+ &::-webkit-file-upload-button {
+ width: inherit;
+ height: inherit;
+ }
+ }
+
+ &[type='number'] {
+ -moz-appearance: textfield;
+ }
+
+ &[type='number']::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ height: auto;
+ }
+
+ &[type='search']::-webkit-search-cancel-button,
+ &[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+ }
+
+ @include e(textarea) {
+ @extend %input-textarea-common;
+
+ padding: 0;
+ resize: vertical;
+ z-index: 1;
+ }
+
+ @include e(hint) {
+ @include type-style(caption);
+ @include line-clamp(2, true, true);
+
+ color: var-get($theme, 'helper-text-color');
+ position: relative;
+ grid-row: var(--_hint-row);
+ grid-column: 1 / -1;
+ overflow-wrap: anywhere;
+
+ &:empty {
+ --_hint-row: 1;
+ visibility: hidden;
+ z-index: -1;
+ }
+ }
+
+ @include e(file-input) {
+ width: 100%;
+ max-width: 100%;
+ overflow: hidden;
+ height: var-get($theme, 'size');
+ color: var-get($theme, 'placeholder-color');
+ grid-column: 3 / -2;
+
+ span {
+ @include ellipsis();
+ position: relative;
+ display: inline-block;
+ width: inherit;
+ max-width: inherit;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+
+ @include m(file, $not: (disabled)) {
+ @include e(input) {
+ &[type='file'] {
+ &::-webkit-file-upload-button {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ @include m(file, $not: (border)) {
+ --_bundle-template-columns: auto auto 1fr auto;
+
+ @include e(upload) {
+ grid-column: 2;
+ }
+
+
+ @include e(bundle-main) {
+ grid-column: 3;
+ }
+
+ @include e(bundle-end) {
+ grid-column: 4;
+ }
+ }
+
+ @include m(file) {
+ @include e(input) {
+ grid-column: 2 / -2;
+ }
+
+ @include e(bundle-main) {
+ display: contents;
+ }
+ }
+
+ @include e(upload) {
+ display: flex;
+ height: 100%;
+ grid-column: 2;
+ }
+
+ @include e(upload-button) {
+ --background: #{var-get($theme, 'file-selector-button-background')};
+ --foreground: #{var-get($theme, 'file-selector-button-foreground')};
+ --focus-background: #{var-get($theme, 'file-selector-button-background--focused')};
+ --focus-foreground: #{var-get($theme, 'file-selector-button-foreground--focused')};
+ --focus-visible-background: #{var-get($theme, 'file-selector-button-background--focused')};
+ --active-background: #{var-get($theme, 'file-selector-button-background')};
+ --active-foreground: #{var-get($theme, 'file-selector-button-foreground')};
+ --disabled-background: #{var-get($theme, 'file-selector-button-background--disabled')};
+ --disabled-foreground: #{var-get($theme, 'file-selector-button-foreground--disabled')};
+ }
+
+ @include m(textarea-group) {
+ --_bundle-template-rows: auto auto auto;
+
+ @include e(bundle) {
+ height: auto;
+ }
+ }
+
+ @include m(readonly, $not: (file, disabled)) {
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix,
+ [igxSuffix] {
+ color: var-get($theme, 'disabled-text-color');
+ }
+
+ @include e(input) {
+ &:hover {
+ cursor: default;
+ color: var-get($theme, 'filled-text-color');
+ }
+
+ &:hover:not(:focus-within) {
+ &::placeholder {
+ color: var-get($theme, 'placeholder-color');
+ }
+ }
+ }
+
+ @include e(textarea) {
+ &:hover {
+ cursor: default;
+ color: var-get($theme, 'filled-text-color');
+ }
+
+ &:hover:not(:focus-within) {
+ &::placeholder {
+ color: var-get($theme, 'placeholder-color');
+ }
+ }
+ }
+ }
+
+ @include mx(readonly, focused, ('not': (file))) {
+ igx-suffix,
+ [igxSuffix] {
+ color: var-get($theme, 'disabled-text-color');
+ }
+ }
+
+ @include m(required) {
+ @include e(label) {
+ &::after {
+ content: '*';
+ font-size: inherit;
+ vertical-align: top;
+ margin-inline-start: rem(2px);
+ display: inline-block;
+ }
+ }
+ }
+
+ @include m(filled) {
+ igx-prefix,
+ [igxPrefix] {
+ color: var-get($theme, 'input-prefix-color--filled');
+ background: var-get($theme, 'input-prefix-background--filled');
+ }
+
+ igx-suffix:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__clear-button, .igx-input-group__case-icon),
+ [igxSuffix]:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__clear-button, .igx-input-group__case-icon) {
+ color: var-get($theme, 'input-suffix-color--filled');
+ background: var-get($theme, 'input-suffix-background--filled');
+ }
+
+ @include e(file-input) {
+ color: var-get($theme, 'filled-text-color');
+ }
+
+ @include e(toggle-button) {
+ color: var(--toggle-button-foreground-filled);
+ background: var(--toggle-button-background);
+ }
+
+ @include e(clear-button) {
+ color: var(--clear-button-foreground);
+ background: var(--clear-button-background);
+ }
+ }
+
+ @include m(focused) {
+ igx-prefix,
+ [igxPrefix] {
+ color: var-get($theme, 'input-prefix-color--focused');
+ background: var-get($theme, 'input-prefix-background--focused');
+ }
+
+ igx-suffix:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__clear-button, .igx-input-group__case-icon),
+ [igxSuffix]:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__clear-button, .igx-input-group__case-icon) {
+ color: var-get($theme, 'input-suffix-color--focused');
+ background: var-get($theme, 'input-suffix-background--focused');
+ }
+
+ @include e(toggle-button) {
+ color: var(--toggle-button-foreground-focus);
+ background: var(--toggle-button-background-focus);
+ }
+
+ @include e(clear-button) {
+ color: var(--clear-button-foreground-focus);
+ background: var(--clear-button-background-focus);
+ }
+ }
+
+ @include mx(focused, border) {
+ @include e(toggle-button) {
+ background: var(--toggle-button-background-focus--border);
+ }
+ }
+
+ @include mx(focused, line) {
+ @include e(toggle-button) {
+ background: var(--toggle-button-background-focus--border);
+ }
+ }
+
+ @include m(disabled) {
+ %input-textarea-disabled-colors {
+ cursor: default;
+
+ color: var-get($theme, 'disabled-text-color');
+
+ &::placeholder {
+ color: var-get($theme, 'disabled-placeholder-color');
+ }
+ }
+
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__case-icon),
+ [igxSuffix]:not(.igx-input-group__toggle-button, .igx-input-group__clear-icon, .igx-input-group__case-icon) {
+ color: var-get($theme, 'disabled-text-color');
+ }
+
+ igx-suffix.igx-combo__clear-button {
+ background: var-get($theme, 'border-disabled-background');
+ }
+
+ @include e(label) {
+ color: var-get($theme, 'disabled-text-color')
+ }
+
+ @include e(input) {
+ @extend %input-textarea-disabled-colors;
+ }
+
+ @include e(textarea) {
+ @extend %input-textarea-disabled-colors;
+
+ resize: none;
+ }
+
+ @include e(bundle) {
+ > * {
+ cursor: default;
+ }
+ }
+
+ @include e(hint) {
+ color: var-get($theme, 'disabled-text-color');
+ grid-column: 1 / -1;
+ }
+
+ @include e(toggle-button) {
+ color: var(--toggle-button-foreground-disabled);
+ background: var(--toggle-button-background-disabled);
+ }
+
+ @include e(clear-icon) {
+ display: none;
+ }
+
+ @include e(file-input) {
+ background: var-get($theme, 'file-names-background--disabled');
+ color: var-get($theme, 'file-names-foreground--disabled');
+ }
+
+ /* stylelint-disable max-nesting-depth */
+ &:hover {
+ @include e(input) {
+ @extend %input-textarea-disabled-colors;
+ }
+
+ @include e(textarea) {
+ @extend %input-textarea-disabled-colors;
+ }
+ }
+ /* stylelint-enable max-nesting-depth */
+ }
+
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/input-group/themes/dark/_index.scss
new file mode 100644
index 00000000000..d077c9bdea4
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/dark/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-input-group, $tokens, dark);
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/input-group/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..51cc1a0654c
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/dark/_tokens.scss
@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/file-input' as *;
+
+$input-material: digest-schema($dark-material-input-group);
+$input-bootstrap: digest-schema($dark-bootstrap-input-group);
+$input-fluent: digest-schema($dark-fluent-input-group);
+$input-indigo: digest-schema($dark-indigo-input-group);
+$file-material: digest-schema($dark-material-file-input);
+$file-bootstrap: digest-schema($dark-bootstrap-file-input);
+$file-fluent: digest-schema($dark-fluent-file-input);
+$file-indigo: digest-schema($dark-indigo-file-input);
+
+$material: map.merge($input-material, $file-material);
+$bootstrap: map.merge($input-bootstrap, $file-bootstrap);
+$fluent: map.merge($input-fluent, $file-fluent);
+$indigo: map.merge($input-indigo, $file-indigo);
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/light/_index.scss b/projects/igniteui-angular/src/lib/input-group/themes/light/_index.scss
new file mode 100644
index 00000000000..d5ca9bfed95
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/light/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-input-group, $tokens, light);
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/input-group/themes/light/_tokens.scss
new file mode 100644
index 00000000000..7b3007c9db6
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/light/_tokens.scss
@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/file-input' as *;
+
+$input-base: digest-schema($light-input-group);
+$input-material: digest-schema($material-input-group);
+$input-bootstrap: digest-schema($bootstrap-input-group);
+$input-fluent: digest-schema($fluent-input-group);
+$input-indigo: digest-schema($indigo-input-group);
+$file-base: digest-schema($light-file-input);
+$file-material: digest-schema($material-file-input);
+$file-bootstrap: digest-schema($bootstrap-file-input);
+$file-fluent: digest-schema($fluent-file-input);
+$file-indigo: digest-schema($indigo-file-input);
+
+$base: map.merge($input-base, $file-base);
+$material: map.merge($input-material, $file-material);
+$bootstrap: map.merge($input-bootstrap, $file-bootstrap);
+$fluent: map.merge($input-fluent, $file-fluent);
+$indigo: map.merge($input-indigo, $file-indigo);
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/_index.scss
new file mode 100644
index 00000000000..0ca60c75786
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/_index.scss
@@ -0,0 +1,4 @@
+@forward 'material';
+@forward 'bootstrap';
+@forward 'fluent';
+@forward 'indigo';
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss
new file mode 100644
index 00000000000..3a868ba537b
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss
@@ -0,0 +1,540 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $bootstrap;
+$border-size: rem(1px);
+$border-style: solid;
+$border-color: var-get($_theme, 'border-color');
+$border-radius: var-get($_theme, 'border-border-radius');
+
+@layer ig.bootstrap {
+ @container style(--ig-theme: bootstrap) {
+ %border-styles {
+ border-style: $border-style;
+ border-color: $border-color;
+ }
+
+ %disabled-styles {
+ background: var-get($_theme, 'border-disabled-background');
+ color: var-get($_theme, 'disabled-text-color');
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ igx-input-group:not(.igx-input-group--prefixed, .igx-input-group--file) {
+ .igx-input-group__bundle-main {
+ border-start-start-radius: $border-radius;
+ border-end-start-radius: $border-radius;
+ }
+ }
+
+ igx-input-group:not(.igx-input-group--suffixed) {
+ .igx-input-group__bundle-main {
+ border-start-end-radius: $border-radius;
+ border-end-end-radius: $border-radius;
+ border-inline-start-width: $border-size;
+ }
+ }
+
+ igx-input-group:not(.igx-input-group--textarea-group) {
+ .igx-input-group__bundle {
+ border-radius: $border-radius;
+ }
+ }
+ }
+}
+
+@include themed-block(igx-input-group, bootstrap) {
+ --_bundle-template-rows: revert;
+ --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(10px), rem(14px))};
+
+ row-gap: rem(4px);
+
+ @include e(clear-icon) {
+ &:focus {
+ color: contrast-color($color: 'primary', $variant: 600);
+ background: color($color: 'primary', $variant: 500);
+ }
+ }
+
+ @include e(bundle) {
+ border-radius: $border-radius;
+ }
+
+ @include e(upload) {
+ @extend %border-styles;
+
+ border-width: $border-size;
+ grid-row: 2;
+ }
+
+ @include e(upload-button) {
+ @include type-style(body-1);
+
+ min-height: revert;
+ border: 0;
+ border-radius: 0;
+ }
+
+ @include e(label) {
+ @include type-style(body-1);
+ }
+
+ @include e(hint) {
+ @include type-style(body-2);
+ }
+
+ @include e(input) {
+ @include type-style(body-1);
+
+ min-height: 100%;
+ padding-block: 0;
+ padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
+ }
+
+ @include e(file-input) {
+ @include type-style(body-1);
+
+ height: 100%;
+ padding-block: 0;
+ border-block: $border-size solid $border-color;
+ border-inline-end: $border-size solid $border-color;
+ padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
+ }
+
+ @include e(textarea) {
+ @include type-style(body-1);
+
+ min-height: 100%;
+ padding-block: pad-block(rem(4px), rem(8px), rem(12px)) 0;
+ padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
+ }
+
+ @include m(textarea-group) {
+ @include e(bundle-main) {
+ height: revert;
+ }
+ }
+
+ @include e(bundle-main) {
+ @extend %border-styles;
+
+ z-index: 1;
+ border-width: $border-size;
+ height: var(--size);
+ }
+
+ @include m(file, $not: (prefixed)) {
+ @include e(upload) {
+ border-start-start-radius: $border-radius;
+ border-end-start-radius: $border-radius;
+ }
+
+ @include e(upload-button) {
+ border-start-start-radius: $border-radius;
+ border-end-start-radius: $border-radius;
+ }
+ }
+
+ @include m(file, $not: (suffixed)) {
+ @include e(file-input) {
+ border-start-end-radius: $border-radius;
+ border-end-end-radius: $border-radius;
+ border-inline-start-width: $border-size;
+ }
+ }
+
+ @include e(bundle-start) {
+ &:empty {
+ border: 0;
+ visibility: hidden;
+ }
+ }
+
+ @include m(prefixed) {
+ @include e(bundle-start) {
+ @extend %border-styles;
+
+ z-index: 0;
+ border-block-width: $border-size;
+ border-inline-start-width: $border-size;
+ border-inline-end-width: 0;
+ border-start-start-radius: $border-radius;
+ border-end-start-radius: $border-radius;
+ overflow: hidden;
+ }
+ }
+
+ @include m(prefixed, $not: (disabled)) {
+ @include e(bundle-start) {
+ igx-prefix:not(:first-child),
+ [igxPrefix]:not(:first-child) {
+ border-inline-start: rem(1px) solid var-get($_theme, 'border-color');
+ }
+ }
+ }
+
+ @include m(suffixed, $not: (disabled)) {
+ @include e(bundle-end) {
+ igx-suffix:not(:last-child),
+ [igxSuffix]:not(:last-child) {
+ border-inline-end: rem(1px) solid var-get($_theme, 'border-color');
+ }
+ }
+ }
+
+ @include m(suffixed) {
+ @include e(bundle-end) {
+ @extend %border-styles;
+
+ z-index: 0;
+ border-width: $border-size;
+ border-inline-start-width: 0;
+ border-start-end-radius: $border-radius;
+ border-end-end-radius: $border-radius;
+ overflow: hidden;
+ }
+ }
+
+ @include m(readonly, $not: (file, disabled)) {
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix,
+ [igxSuffix] {
+ background: var-get($_theme, 'border-disabled-background');
+ }
+
+ @include e(bundle-main) {
+ background: var-get($_theme, 'border-disabled-background');
+ }
+
+ @include e(textarea) {
+ background: var-get($_theme, 'border-disabled-background');
+ }
+ }
+
+ @include mx(invalid, readonly, ('not': (file, disabled))) {
+ @include e(hint) {
+ color: var-get($_theme, 'helper-text-color');
+ }
+
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'border-color');
+ }
+ }
+
+ @include mx(invalid, readonly, focused, ('not': (file, disabled))) {
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'focused-border-color');
+ box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focused-secondary-color');
+ }
+ }
+
+ @include m(focused) {
+ @include e(bundle-main) {
+ transition: border .15s ease-out;
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+
+ @include e(file-input) {
+ transition: border .15s ease-out;
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+ }
+
+ @include m(invalid) {
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(file-input) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'error-secondary-color');
+ }
+ }
+
+ @include m(warning) {
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(file-input) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+
+ @include m(valid) {
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(file-input) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'success-secondary-color');
+ }
+ }
+
+ @include mx(focused, invalid) {
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(file-input) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+ }
+
+ @include mx(focused, warning) {
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(file-input) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+
+ @include mx(focused, valid) {
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(bundle-main) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+
+ @include m(focused, $not: (file)) {
+ @include e(bundle-main) {
+ transition: box-shadow .15s ease-out;
+ box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focused-secondary-color');
+ }
+ }
+
+ @include mx(focused, valid, ('not': (file))) {
+ @include e(bundle-main) {
+ box-shadow: 0 0 0 rem(4px) var-get($_theme, 'success-shadow-color');
+ }
+ }
+
+ @include mx(focused, invalid, ('not': (file))) {
+ @include e(bundle-main) {
+ box-shadow: 0 0 0 rem(4px) var-get($_theme, 'error-shadow-color');
+ }
+ }
+
+ @include mx(focused, warning, ('not': (file))) {
+ @include e(bundle-main) {
+ // TODO: This state has no schema variable
+ box-shadow: 0 0 0 rem(4px) color($color: 'warning', $variant: 500, $opacity: .38);
+ }
+ }
+
+ $transition-border: border .15s ease-out;
+ $transition-box-shadow: box-shadow .15s ease-out;
+
+ @include m(file) {
+ @include e(bundle) {
+ transition: $transition-box-shadow
+ }
+
+ @include e(upload) {
+ transition: $transition-border;
+
+ min-height: var-get($_theme, 'size');
+ }
+
+ @include e(bundle-start) {
+ transition: $transition-border;
+ }
+
+ @include e(bundle-end) {
+ transition: $transition-border;
+ }
+ }
+
+ @include mx(focused, file) {
+ @include e(bundle) {
+ transition: $transition-box-shadow;
+ box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focused-secondary-color');
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'focused-border-color');
+
+ igx-prefix:not(:first-child),
+ [igxPrefix]:not(:first-child) {
+ border-inline-start: rem(1px) solid var-get($_theme, 'focused-border-color');
+ }
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'focused-border-color');
+
+ igx-suffix:not(:last-child),
+ [igxSuffix]:not(:last-child) {
+ border-inline-end: rem(1px) solid var-get($_theme, 'focused-border-color');
+ }
+ }
+ }
+
+ @include mx(file, valid) {
+ @include e(upload) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'success-secondary-color');
+
+ igx-prefix:not(:first-child),
+ [igxPrefix]:not(:first-child) {
+ border-inline-start: rem(1px) solid var-get($_theme, 'success-secondary-color');
+ }
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'success-secondary-color');
+
+ igx-suffix:not(:last-child),
+ [igxSuffix]:not(:last-child) {
+ border-inline-end: rem(1px) solid var-get($_theme, 'success-secondary-color');
+ }
+ }
+ }
+
+ @include mx(file, invalid) {
+ @include e(upload) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'error-secondary-color');
+
+ igx-prefix:not(:first-child),
+ [igxPrefix]:not(:first-child) {
+ border-inline-start: rem(1px) solid var-get($_theme, 'error-secondary-color');
+ }
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'error-secondary-color');
+
+ igx-suffix:not(:last-child),
+ [igxSuffix]:not(:last-child) {
+ border-inline-end: rem(1px) solid var-get($_theme, 'error-secondary-color');
+ }
+ }
+ }
+
+ @include mx(file, warning) {
+ @include e(upload) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+
+ igx-prefix:not(:first-child),
+ [igxPrefix]:not(:first-child) {
+ border-inline-start: rem(1px) solid var-get($_theme, 'warning-secondary-color');
+ }
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+
+ igx-suffix:not(:last-child),
+ [igxSuffix]:not(:last-child) {
+ border-inline-end: rem(1px) solid var-get($_theme, 'warning-secondary-color');
+ }
+ }
+ }
+
+ @include mx(file, focused, valid) {
+ @include e(bundle) {
+ box-shadow: 0 0 0 rem(4px) var-get($_theme, 'success-shadow-color');
+ }
+ }
+
+ @include mx(file, focused, invalid) {
+ @include e(bundle) {
+ box-shadow: 0 0 0 rem(4px) var-get($_theme, 'error-shadow-color');
+ }
+ }
+
+ @include mx(file, focused, warning) {
+ // TODO: This state has no schema variable
+ //@include e(bundle) {
+ // box-shadow: 0 0 0 rem(4px) var-get($_theme, 'warning-shadow-color');
+ //}
+ }
+
+ @include m(disabled) {
+ @include e(bundle) {
+ @extend %disabled-styles;
+ }
+
+ @include e(bundle-main) {
+ @extend %disabled-styles;
+ }
+
+ @include e(bundle-start) {
+ @extend %disabled-styles;
+
+ igx-prefix:not(:first-child),
+ [igxPrefix]:not(:first-child) {
+ border-inline-start: rem(1px) solid var-get($_theme, 'disabled-border-color');
+ }
+ }
+
+ @include e(bundle-end) {
+ @extend %disabled-styles;
+
+ igx-suffix:not(:last-child),
+ [igxSuffix]:not(:last-child) {
+ border-inline-end: rem(1px) solid var-get($_theme, 'disabled-border-color');
+ }
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(file-input) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(clear-icon) {
+ pointer-events: none;
+ }
+
+ @include e(toggle-button) {
+ border-color: var-get($_theme, 'disabled-border-color') !important;
+ }
+
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix:not(.igx-input-group__toggle-button),
+ [igxSuffix] {
+ background: var-get($_theme, 'border-disabled-background');
+ color: var-get($_theme, 'disabled-text-color');
+ }
+ }
+}
+
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss
new file mode 100644
index 00000000000..75d916a017f
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss
@@ -0,0 +1,250 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $fluent;
+
+@include themed-block(igx-input-group, fluent) {
+ --_bundle-template-rows: revert;
+ --_prefix-suffix-spacing: #{pad-inline(rem(8px), rem(10px), rem(14px))};
+
+ row-gap: rem(5px);
+
+ @include e(clear-icon) {
+ &:focus {
+ color: contrast-color($color: 'primary', $variant: 600);
+ background: color($color: 'primary', $variant: 500);
+ }
+ }
+
+ @include e(hint) {
+ min-height: rem(18px);
+ }
+
+ @include e(input) {
+ @include type-style(body-2);
+
+ padding-inline: rem(8px);
+ padding-block: 0;
+ height: calc(var-get($_theme, 'size') - rem(2px));
+ }
+
+ @include e(textarea) {
+ @include type-style(body-2);
+
+ padding-inline: pad-inline(rem(8px));
+ padding-block: pad-block(rem(6px), rem(10px), rem(14px)) 0;
+ }
+
+ @include e(file-input) {
+ @include type-style(body-2);
+ }
+
+ @include e(bundle) {
+ background: var-get($_theme, 'border-background');
+ border-radius: var-get($_theme, 'border-border-radius');
+ border: rem(1px) solid var-get($_theme, 'border-color');
+
+ > * {
+ grid-row: revert;
+ min-height: 0;
+ }
+
+ &:hover {
+ border-color: var-get($_theme, 'hover-border-color');
+ }
+ }
+
+ @include e(bundle-start) {
+ overflow: hidden;
+ border-start-start-radius: var-get($_theme, 'border-border-radius');
+ border-end-start-radius: var-get($_theme, 'border-border-radius');
+ }
+
+ @include e(bundle-end) {
+ overflow: hidden;
+ border-start-end-radius: var-get($_theme, 'border-border-radius');
+ border-end-end-radius: var-get($_theme, 'border-border-radius');
+ }
+
+ @include m(search) {
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix,
+ [igxSuffix] {
+ background: transparent;
+ color: color($color: 'primary', $variant: 500);
+ }
+ }
+
+ @include mx(search, focused) {
+ igx-prefix,
+ [igxPrefix] {
+ // !important is needed, otherwise if the directive is set directly on the igx-icon
+ // the icon overrides the display set by the prefix/suffix
+ display: none !important;
+ }
+
+ igx-suffix,
+ [igxSuffix] {
+ color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
+ }
+ }
+
+ @include m(readonly, $not: (file)) {
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix,
+ [igxSuffix] {
+ background: transparent;
+ }
+
+ @include e(bundle) {
+ &:hover:not(:focus-within) {
+ border-color: var-get($_theme, 'border-color');
+ }
+ }
+ }
+
+ @include mx(readonly, search) {
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix,
+ [igxSuffix] {
+ color: var(--igx-input-group-disabled-text-color, var(--ig-gray-500));
+ }
+ }
+
+ @include mx(readonly, search, focused) {
+ igx-suffix,
+ [igxSuffix] {
+ color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
+ }
+ }
+
+ @include mx(invalid, readonly, ('not': (file, disabled))) {
+ @include e(bundle) {
+ border-color: var-get($_theme, 'border-color');
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'helper-text-color');
+ }
+ }
+
+ @include mx(invalid, readonly, focused, ('not': (file, disabled))) {
+ @include e(bundle) {
+ &::after {
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+ }
+ }
+
+ @include m(invalid) {
+ @include e(label) {
+ &::after {
+ color: var-get($_theme, 'error-secondary-color');
+ }
+ }
+
+ @include e(bundle) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'error-secondary-color');
+ }
+ }
+
+ @include m(warning) {
+ @include e(label) {
+ &::after {
+ color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+
+ @include e(bundle) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+
+ @include m(valid) {
+ @include e(label) {
+ &::after {
+ color: var-get($_theme, 'success-secondary-color');
+ }
+ }
+
+ @include e(bundle) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'success-secondary-color');
+ }
+ }
+
+ @include m(focused) {
+ @include e(bundle) {
+ border-color: transparent;
+
+ &::after {
+ content: '';
+ position: absolute;
+ pointer-events: none;
+ user-select: none;
+ inset-block-start: rem(-1px);
+ inset-inline-start: rem(-1px);
+ width: calc(100% + #{rem(2px)});
+ height: calc(100% + #{rem(2px)});
+ border-radius: var-get($_theme, 'border-border-radius');
+ border: rem(2px) solid var-get($_theme, 'focused-border-color');
+ }
+ }
+ }
+
+ @include mx(focused, valid) {
+ @include e(bundle) {
+ &::after {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+ }
+ }
+
+ @include mx(focused, warning) {
+ @include e(bundle) {
+ &::after {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+ }
+
+ @include mx(focused, invalid) {
+ @include e(bundle) {
+ &::after {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+ }
+ }
+
+ @include m(disabled) {
+ igx-prefix,
+ [igxPrefix],
+ igx-suffix:not(.igx-input-group__toggle-button),
+ [igxSuffix] {
+ color: var-get($_theme, 'disabled-text-color');
+ }
+
+ @include e(bundle) {
+ background: var-get($_theme, 'border-disabled-background');
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+ }
+}
+
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss
new file mode 100644
index 00000000000..83504a552a2
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss
@@ -0,0 +1,214 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/animations/easings' as *;
+@use '../light/tokens' as *;
+
+$_theme: $indigo;
+
+@include themed-block(igx-input-group, indigo) {
+ --_prefix-suffix-spacing: #{pad-inline(rem(2px), rem(4px), rem(6px))};
+ --_bundle-template-rows: revert;
+
+ igx-icon {
+ --size: #{sizable(rem(14px), rem(16px), rem(16px))};
+ }
+
+ row-gap: rem(4px);
+
+ @include e(clear-icon) {
+ &:focus {
+ color: contrast-color($color: 'primary', $variant: 600);
+ background: color($color: 'primary', $variant: 500);
+ }
+ }
+
+ @include e(label) {
+ line-height: var(--ig-caption-line-height);
+ }
+
+ @include e(input) {
+ @include type-style(body-2);
+
+ caret-color: var-get($_theme, 'focused-bottom-line-color');
+ padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
+ padding-block: rem(6px);
+
+ &::placeholder {
+ font-style: italic;
+ }
+ }
+
+ @include m(search) {
+ --_prefix-suffix-spacing: #{pad-inline(rem(6px), rem(8px), rem(10px))};
+
+ @include e(input) {
+ padding-inline: var(--_prefix-suffix-spacing);
+ }
+ }
+
+ @include m(suffixed) {
+ @include e(input) {
+ padding-inline-end: 0;
+ }
+ }
+
+ @include m(prefixed) {
+ @include e(input) {
+ padding-inline-start: 0;
+ }
+ }
+
+ @include e(textarea) {
+ @include type-style(body-2);
+
+ caret-color: var-get($_theme, 'focused-bottom-line-color');
+
+ &::placeholder {
+ font-style: italic;
+ }
+ }
+
+ @include e(file-input) {
+ @include type-style(body-2);
+ }
+
+ @include m(textarea-group) {
+ @include e(textarea) {
+ padding-block: pad-block(rem(4px), rem(6px), rem(8px)) 0;
+ }
+
+ @include e(bundle) {
+ height: auto;
+ }
+ }
+
+ @include m(textarea-group, $not: (prefixed)) {
+ @include e(textarea) {
+ padding-inline-start: pad-inline(rem(2px), rem(4px), rem(6px));
+ }
+ }
+
+ @include m(textarea-group, $not: (suffixed)) {
+ @include e(textarea) {
+ padding-inline-end: pad-inline(rem(2px), rem(4px), rem(6px));
+ }
+ }
+
+ @include e(bundle) {
+ transition: all .25s $out-cubic;
+ border-block-end: rem(1px) solid var-get($_theme, 'idle-bottom-line-color');
+
+ &:hover {
+ background: var-get($_theme, 'box-background-hover');
+ border-block-end-color: var-get($_theme, 'hover-bottom-line-color');
+ }
+ }
+
+ @include m(file) {
+ @include e(input) {
+ padding-block: 0;
+ }
+
+ @include e(bundle) {
+ > * {
+ grid-row: 1;
+ }
+ }
+ }
+
+ @include m(readonly, $not: (file, disabled)) {
+ @include e(bundle) {
+ border-block-end-color: var-get($_theme, 'disabled-text-color');
+
+ &:hover:not(:focus-within) {
+ background: unset;
+ border-block-end-color: var-get($_theme, 'disabled-text-color');
+ }
+ }
+ }
+
+ @include mx(readonly, focused, ('not': (file, disabled))) {
+ @include e(bundle) {
+ border-block-end-color: var-get($_theme, 'focused-bottom-line-color');
+ }
+ }
+
+ @include m(focused) {
+ @include e(bundle) {
+ background: var-get($_theme, 'box-background-hover');
+ border-block-end-color: var-get($_theme, 'focused-bottom-line-color');
+ }
+ }
+
+ @include m(valid) {
+ @include e(bundle) {
+ border-block-end: rem(1px) solid var-get($_theme, 'success-secondary-color');
+
+ &:hover {
+ border-block-end-color: var-get($_theme, 'success-secondary-color');
+ }
+ }
+ }
+
+ @include m(warning) {
+ @include e(bundle) {
+ border-block-end: rem(1px) solid var-get($_theme, 'warning-secondary-color');
+
+ &:hover {
+ border-block-end-color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+ }
+
+ @include m(invalid) {
+ @include e(bundle) {
+ border-block-end: rem(1px) solid var-get($_theme, 'error-secondary-color');
+
+ &:hover {
+ border-block-end-color: var-get($_theme, 'error-secondary-color');
+ }
+ }
+ }
+
+ @include mx(valid, focused) {
+ @include e(bundle) {
+ border-block-end: rem(1px) solid var-get($_theme, 'success-secondary-color');
+ }
+ }
+
+ @include mx(warning, focused) {
+ @include e(bundle) {
+ border-block-end: rem(1px) solid var-get($_theme, 'warning-secondary-color');
+ }
+ }
+
+ @include mx(invalid, focused) {
+ @include e(bundle) {
+ border-block-end: rem(1px) solid var-get($_theme, 'error-secondary-color');
+ }
+ }
+
+ @include e(case-icon) {
+ igx-icon {
+ --size: #{rem(16px)};
+ }
+ }
+
+ @include m(disabled) {
+ @include e(bundle) {
+ border-block-end: rem(1px) solid var-get($_theme, 'disabled-bottom-line-color');
+
+ &:hover {
+ border-block-end-color: var-get($_theme, 'disabled-bottom-line-color');
+ }
+ }
+
+ &:hover {
+ @include e(bundle) {
+ background: var-get($_theme, 'box-disabled-background');
+ }
+ }
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss
new file mode 100644
index 00000000000..a82f0589030
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss
@@ -0,0 +1,1069 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/animations/easings' as *;
+@use '../light/tokens' as *;
+
+$_theme: $material;
+$transition-timing: .25s $out-cubic;
+$bundle-start-end-min-width: pad(rem(8px), rem(10px), rem(12px));
+$input-inline-padding: rem(4px);
+$input-top-spacing: rem(20px);
+$input-bottom-spacing: rem(6px);
+
+@layer ig.material {
+ @container style(--ig-theme: material) {
+ %box-floating-label {
+ @include type-style(caption);
+
+ translate: 0 rem(-12px);
+ }
+
+ %box-floating-text-area-label {
+ @include type-style(caption);
+
+ translate: 0;
+ inset-block-start: calc(var(--_input-top-spacing) / 4);
+ }
+
+ %border-textarea-floating-label {
+ @include type-style(caption);
+
+ display: inline-block;
+ position: relative;
+ inset-block: 0;
+ }
+ }
+
+ .igx-input-group--base:not(.igx-input-group--filled, .igx-input-group--focused) {
+ &:has(input:placeholder-shown) {
+ .igx-input-group__label {
+ @extend %box-floating-label;
+ }
+ }
+
+ &:has(textarea:placeholder-shown) {
+ .igx-input-group__label {
+ @extend %box-floating-text-area-label;
+ }
+ }
+ }
+
+ .igx-input-group--border:not(.igx-input-group--filled, .igx-input-group--focused) {
+ &:has(input:placeholder-shown) {
+ .igx-input-group__label {
+ @include type-style(caption);
+ }
+ }
+
+ &:has(textarea:placeholder-shown) {
+ .igx-input-group__label {
+ @extend %border-textarea-floating-label;
+ }
+ }
+
+ &:has(input:placeholder-shown, textarea:placeholder-shown) {
+ .igx-input-group__label {
+ align-self: start;
+ translate: 0 var(--_label-translate-top);
+ }
+
+ .igx-input-group__notch {
+ border-block-start-color: transparent;
+ }
+ }
+ }
+}
+
+@include themed-block(igx-input-group, material) {
+ --_prefix-suffix-spacing: #{pad-inline(rem(12px), rem(14px), rem(16px))};
+ --_bundle-template-rows: #{var-get($_theme, 'size')};
+
+ &:has([igxLabel], igx-label) {
+ --_input-top-spacing: #{$input-top-spacing};
+ --_input-bottom-spacing: #{$input-bottom-spacing};
+ --_label-row: 1;
+ --_bundle-row: 1;
+ --_hint-row: 2;
+ }
+
+ &:has(:not([igxLabel], igx-label)) {
+ --_hint-row: 2;
+ }
+
+ row-gap: rem(4px);
+
+ @include e(bundle) {
+ grid-row: var(--_bundle-row);
+
+ grid-template-columns: subgrid;
+ }
+
+ @include e(file-input) {
+ @extend %input-paddings;
+
+ padding-inline: $input-inline-padding;
+ }
+
+ @include e(bundle-start) {
+ overflow: clip;
+ min-width: $bundle-start-end-min-width;
+ }
+
+ @include e(bundle-end) {
+ overflow: clip;
+ min-width: $bundle-start-end-min-width;
+ }
+
+ @include e(bundle) {
+ > * {
+ grid-row: var(--_bundle-row);
+ }
+ }
+
+ @include e(hint) {
+ grid-row: var(--_hint-row);
+ min-height: rem(18px);
+ padding-inline: sizable(rem(12px), rem(14px), rem(16px));
+ }
+
+ @include m(base) {
+ %input-paddings {
+ padding-block-start: var(--_input-top-spacing);
+ padding-block-end: var(--_input-bottom-spacing);
+ }
+
+ @include e(bundle) {
+ transition: border-bottom-color $transition-timing;
+ align-items: center;
+ grid-column: 1 / -1;
+ }
+
+ @include e(bundle-main) {
+ padding-inline: $input-inline-padding;
+ grid-column: 2;
+ }
+
+ @include e(label) {
+ padding-inline: $input-inline-padding;
+ grid-column: 2;
+ z-index: 1;
+ align-self: center;
+ }
+
+ @include e(input) {
+ @extend %input-paddings;
+
+ padding-inline: 0;
+ }
+ }
+
+ @include m(base, $not: (search)) {
+ @include e(bundle) {
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ inset-inline-end: 0;
+ }
+
+ &::before {
+ inset-block-end: 0;
+ height: rem(1px);
+ border-block-end: rem(1px) solid var-get($_theme, 'idle-bottom-line-color');
+ z-index: 1;
+ }
+
+ &::after {
+ inset-block-end: rem(0px);
+ height: rem(2px);
+ align-self: end;
+ scale: 0;
+ transform-origin: center;
+ background: var-get($_theme, 'focused-bottom-line-color');
+ z-index: 2;
+ }
+
+ &:hover {
+ &::before {
+ border-block-end-color: var-get($_theme, 'hover-bottom-line-color');
+ }
+ }
+ }
+ }
+
+ @include e(clear-icon) {
+ background: transparent;
+
+ &:focus {
+ color: color($color: 'secondary', $variant: 500);
+ }
+ }
+
+ @include mx(base, focused) {
+ @include e(bundle) {
+ &::after {
+ scale: 1;
+ transition: scale $transition-timing;
+ }
+ }
+
+ @include e(label) {
+ @extend %box-floating-label;
+
+ color: var-get($_theme, 'focused-secondary-color');
+ }
+ }
+
+ @include mx(base, valid) {
+ @include e(bundle) {
+ &::before {
+ border-block-end-color: rem(1px) solid var-get($_theme, 'success-secondary-color');
+ }
+
+ &::after {
+ background: var-get($_theme, 'success-secondary-color');
+ }
+ }
+ }
+
+ @include mx(base, warning) {
+ @include e(bundle) {
+ &::before {
+ border-block-end-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ &::after {
+ background: var-get($_theme, 'warning-secondary-color');
+ }
+
+ &:hover {
+ &::before {
+ border-block-end-color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+ }
+ }
+
+ @include mx(base, invalid) {
+ @include e(bundle) {
+ &::before {
+ border-block-end-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ &::after {
+ background: var-get($_theme, 'error-secondary-color');
+ }
+
+ &:hover {
+ &::before {
+ border-block-end-color: var-get($_theme, 'error-secondary-color');
+ }
+ }
+ }
+ }
+
+ @include mx(base, filled) {
+ @include e(label) {
+ @extend %box-floating-label;
+ }
+ }
+
+ @include mx(box, disabled) {
+ @include e(bundle) {
+ background: var-get($_theme, 'box-disabled-background');
+
+ &:hover {
+ background: var-get($_theme, 'box-disabled-background');
+ }
+ }
+ }
+
+ @include mx(border, disabled) {
+ @include e(bundle) {
+ background: var-get($_theme, 'border-disabled-background');
+ }
+
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(notch) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ &:hover {
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(notch) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'disabled-border-color');
+ }
+ }
+ }
+
+ @include m(textarea-group) {
+ --_bundle-template-rows: auto;
+
+ --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))};
+
+ &:has(label:not(:empty)) {
+ --_input-top-spacing: #{pad-block(rem(16px), rem(20px), rem(24px))};
+ }
+
+ @include e(bundle-main) {
+ padding-block-start: var(--_input-top-spacing);
+ }
+
+ @include e(textarea) {
+ // This gives the drag handle some room from the field bottom border
+ border-bottom: rem(2px) solid transparent;
+ }
+ }
+
+ @include m(textarea-group, $not: (suffixed)) {
+ @include e(bundle-main) {
+ grid-area: 1 / 2 / span 1 / span 3;
+ padding-inline-end: 0;
+ }
+
+ @include e(textarea) {
+ padding-inline-end: pad-inline(rem(12px), rem(14px), rem(16px));
+ }
+ }
+
+ @include mx(box, textarea-group, ('not': (suffixed))) {
+ @include e(textarea) {
+ max-width: calc(100% - #{rem(1px)});
+ }
+ }
+
+ @include mx(border, textarea-group) {
+ @include e(bundle-main) {
+ --_input-top-spacing: #{sizable(rem(8px), rem(12px), rem(16px))};
+ }
+ }
+
+ @include mx(border, textarea-group, ('not': (suffixed))) {
+ @include e(textarea) {
+ max-width: calc(100% - #{rem(2px)});
+ }
+ }
+
+ @include mx(base, textarea-group) {
+ @include e(label) {
+ top: var(--_input-top-spacing);
+ align-self: start;
+ }
+ }
+
+ @include mx(base, textarea-group, filled) {
+ @include e(label) {
+ @extend %box-floating-text-area-label;
+ }
+ }
+
+ @include mx(base, textarea-group, focused) {
+ @include e(label) {
+ @extend %box-floating-text-area-label;
+ }
+ }
+
+ @include m(box) {
+ @include e(bundle) {
+ background: var-get($_theme, 'box-background');
+ border-start-start-radius: var-get($_theme, 'box-border-radius');
+ border-start-end-radius: var-get($_theme, 'box-border-radius');
+ overflow: clip;
+ }
+
+ @include e(bundle) {
+ &:hover {
+ background: var-get($_theme, 'box-background-hover');
+ }
+ }
+
+ @include e(bundle-start) {
+ border: {
+ start: {
+ start-radius: calc(var-get($_theme, 'box-border-radius') - rem(1px));
+ };
+ }
+ }
+
+ @include e(bundle-end) {
+ border: {
+ start: {
+ end-radius: calc(var-get($_theme, 'box-border-radius') - rem(1px));
+ }
+ }
+ }
+ }
+
+ @include mx(box, focused) {
+ @include e(bundle) {
+ background: var-get($_theme, 'box-background-focus');
+ border-bottom-color: transparent;
+ }
+ }
+
+ @include mx(base, disabled, ('not': (border, search))) {
+ @include e(bundle) {
+ &::before {
+ border-block-end-color: var-get($_theme, 'disabled-bottom-line-color');
+ border-block-end-style: dashed;
+ }
+ }
+
+ &:hover {
+ @include e(bundle) {
+ &::before {
+ border-block-end-color: var-get($_theme, 'disabled-bottom-line-color');
+ }
+ }
+ }
+ }
+
+ @include m(search) {
+ @include e(bundle) {
+ background: var-get($_theme, 'search-background');
+ border-bottom: none;
+ border-radius: var-get($_theme, 'search-border-radius');
+ box-shadow: var-get($_theme, 'search-resting-elevation');
+
+ &:hover {
+ box-shadow: var-get($_theme, 'search-hover-elevation');
+ }
+ }
+
+ @include e(bundle-start) {
+ border-start-start-radius: var-get($_theme, 'search-border-radius');
+ border-end-start-radius: var-get($_theme, 'search-border-radius');
+ }
+
+ @include e(bundle-end) {
+ border-start-end-radius: var-get($_theme, 'search-border-radius');
+ border-end-end-radius: var-get($_theme, 'search-border-radius');
+ }
+ }
+
+ @include mx(search, focused) {
+ @include e(bundle) {
+ box-shadow: var-get($_theme, 'search-hover-elevation');
+ }
+ }
+
+ @include mx(search, disabled) {
+ @include e(bundle) {
+ background: var-get($_theme, 'search-disabled-background');
+ box-shadow: var-get($_theme, 'search-disabled-elevation');
+ }
+ }
+
+ @include m(file) {
+ @include e(file-input) {
+ background: var-get($_theme, 'file-names-background');
+ color: var-get($_theme, 'file-names-foreground');
+ }
+ }
+
+ @include mx(file, filled) {
+ @include e(file-input) {
+ background: var-get($_theme, 'file-names-background--filled');
+ color: var-get($_theme, 'file-names-foreground--filled');
+ }
+ }
+
+ @include mx(file, focused) {
+ @include e(file-input) {
+ background: var-get($_theme, 'file-names-background--focused');
+ color: var-get($_theme, 'file-names-foreground--focused');
+ }
+ }
+
+ @include mx(file, disabled) {
+ @include e(file-input) {
+ background: var-get($_theme, 'file-names-background--disabled');
+ color: var-get($_theme, 'file-names-foreground--disabled');
+ }
+ }
+
+ @include mx(border, textarea-group) {
+ @include e(label) {
+ top: var(--_input-top-spacing);
+ transition:
+ translate 150ms cubic-bezier(.4, 0, .2, 1),
+ color 150ms cubic-bezier(.4, 0, .2, 1),
+ font-size 150ms cubic-bezier(.4, 0, .2, 1);
+ will-change: translate;
+ align-self: start;
+ }
+ }
+
+ @include mx(border, textarea-group, filled) {
+ @include e(label) {
+ @extend %border-textarea-floating-label;
+ }
+ }
+
+ @include mx(border, textarea-group, focused) {
+ @include e(label) {
+ @extend %border-textarea-floating-label;
+ }
+ }
+
+ @include mx(base, file) {
+ @include e(label) {
+ grid-column: 3;
+ }
+
+ @include e(bundle-main) {
+ grid-column: 3;
+ }
+
+ @include e(bundle-end) {
+ grid-column: 4;
+ }
+ }
+
+ @include m(border) {
+ $label-position: calc((var-get($_theme, 'size') / 2) - (var(--_input-border-size) / 2));
+ --_bundle-template-columns: auto auto 1fr auto;
+ --_input-border-size: #{rem(1px)};
+ --_input-border-style: solid;
+ --_label-translate-top: -50%;
+
+ $border-size: rem(1px);
+
+ %idle-border-styles {
+ border-width: var(--_input-border-size-focus, var(--_input-border-size));
+ border-style: var(--_input-border-style);
+ border-color: var-get($_theme, 'border-color');
+ }
+
+ @include e(bundle) {
+ grid-column: 1 / -1;
+ background: var-get($_theme, 'border-background');
+ border-radius: var-get($_theme, 'border-border-radius');
+ }
+
+ @include e(input) {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ border: none;
+ outline-style: none;
+ z-index: 1;
+ }
+
+ @include e(bundle-start) {
+ @extend %idle-border-styles;
+
+ border-inline-end-width: 0;
+ border-start-start-radius: var-get($_theme, 'border-border-radius');
+ border-end-start-radius: var-get($_theme, 'border-border-radius');
+ }
+
+ @include e(bundle-main) {
+ grid-column: 2 / span 2;
+ padding-inline: $input-inline-padding;
+ }
+
+ @include e(notch) {
+ @extend %idle-border-styles;
+
+ display: flex;
+ align-items: center;
+ border-inline: none;
+ padding-inline: $input-inline-padding;
+ grid-column: 2;
+ min-width: 0;
+ }
+
+ @include e(filler) {
+ @extend %idle-border-styles;
+
+ border-inline: none;
+ grid-column: 3;
+ }
+
+ @include e(upload) {
+ @extend %idle-border-styles;
+
+ border-inline: none;
+ grid-column: 2;
+ display: flex;
+ align-items: center;
+ }
+
+ @include e(bundle-end) {
+ @extend %idle-border-styles;
+
+ border-inline-start-width: 0;
+ grid-column: 4;
+ border-start-end-radius: var-get($_theme, 'border-border-radius');
+ border-end-end-radius: var-get($_theme, 'border-border-radius');
+ }
+
+ &:hover {
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'hover-border-color');
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'hover-border-color');
+ }
+
+ @include e(notch) {
+ border-color: var-get($_theme, 'hover-border-color');
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'hover-border-color');
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'hover-border-color');
+ }
+ }
+ }
+
+ @include mx(border, focused) {
+ --_input-border-size-focus: calc(var(--_input-border-size) + #{rem(1px)});
+
+ $negative-margin: calc((var(--_input-border-size-focus) / 2) * -1);
+
+ @include e(label) {
+ color: var-get($_theme, 'focused-secondary-color');
+ translate: 0 var(--_label-translate-top);
+ align-self: start;
+ }
+
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'focused-border-color');
+
+ &:has(igx-prefix),
+ &:has([igxPrefix]) {
+ igx-prefix:first-child,
+ [igxPrefix]:first-child {
+ margin-inline-start: $negative-margin;
+ }
+ }
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'focused-border-color');
+
+ &:has(igx-suffix),
+ &:has([igxSuffix]) {
+ igx-suffix:last-child,
+ [igxSuffix]:last-child {
+ margin-inline-end: $negative-margin;
+ }
+ }
+ }
+
+ @include e(notch) {
+ border-color: var-get($_theme, 'focused-border-color');
+ border-block-start-color: transparent;
+ border-block-start-width: rem(1px);
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+ }
+
+ @include mx(border, filled, ('not': (focused))) {
+ @include e(label) {
+ translate: 0 var(--_label-translate-top);
+ align-self: start;
+ }
+ }
+
+ @include mx(border, filled) {
+ @include e(notch) {
+ border-block-start-color: transparent;
+ }
+ }
+
+ @include mx(border, valid) {
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(notch) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+
+ &:hover {
+ @include e(upload) {
+ border-color: var-get($_theme, 'success-secondary-color');
+ }
+ }
+ }
+
+ @include mx(border, valid, focused) {
+ @include e(notch) {
+ border-block-start-color: transparent;
+ }
+ }
+
+ @include mx(border, warning) {
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(notch) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ &:hover {
+ @include e(upload) {
+ border-color: var-get($_theme, 'warning-secondary-color');
+ }
+ }
+ }
+
+ @include mx(border, warning, focused) {
+ @include e(notch) {
+ border-block-start-color: transparent;
+ }
+ }
+
+ @include mx(border, invalid) {
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(notch) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+
+ &:hover {
+ @include e(upload) {
+ border-color: var-get($_theme, 'error-secondary-color');
+ }
+ }
+ }
+
+ @include mx(border, invalid, focused) {
+ @include e(notch) {
+ border-block-start-color: transparent;
+ }
+ }
+
+ @include mx(border, invalid, filled) {
+ @include e(notch) {
+ border-block-start-color: transparent;
+ }
+ }
+
+ @include m(file, $not: (border)) {
+ @include e(label) {
+ @extend %box-floating-label;
+ grid-row: 1 / -1;
+ }
+ }
+
+ @include mx(border, file, ('not': (focused))) {
+ @include e(label) {
+ @include type-style(caption);
+
+ translate: 0 var(--_label-translate-top);
+ align-self: start;
+ }
+
+ @include e(notch) {
+ border-block-start-color: transparent;
+ }
+ }
+
+ @include mx(border, file) {
+ --_bundle-template-columns: auto auto auto 1fr auto;
+
+ @include e(notch) {
+ grid-column: 3
+ }
+
+ @include e(bundle-main) {
+ grid-column: 3 / span 2;
+ }
+
+ @include e(filler) {
+ grid-column: 4 / 5;
+ }
+
+ @include e(bundle-end) {
+ grid-area: 1 / 5;
+ }
+ }
+
+ @include m(valid) {
+ @include e(label) {
+ color: #{var-get($_theme, 'success-secondary-color')};
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'success-secondary-color');
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'success-secondary-color');;
+ }
+ }
+
+ @include m(warning) {
+ @include e(label) {
+ color: #{var-get($_theme, 'warning-secondary-color')};
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'warning-secondary-color');
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'warning-secondary-color');;
+ }
+ }
+
+ @include m(invalid) {
+ @include e(label) {
+ color: #{var-get($_theme, 'error-secondary-color')};
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'error-secondary-color');
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'error-secondary-color');;
+ }
+ }
+
+ @include mx(valid, focused) {
+ @include e(label) {
+ color: #{var-get($_theme, 'success-secondary-color')};
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'success-secondary-color');;
+ }
+ }
+
+ @include mx(warning, focused) {
+ @include e(label) {
+ color: #{var-get($_theme, 'warning-secondary-color')};
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'warning-secondary-color');;
+ }
+ }
+
+ @include mx(invalid, focused) {
+ @include e(label) {
+ color: #{var-get($_theme, 'error-secondary-color')};
+ }
+
+ @include e(upload) {
+ border-color: var-get($_theme, 'error-secondary-color');;
+ }
+ }
+
+ @include e(notch) {
+ &:empty {
+ display: none;
+ }
+ }
+
+ @include e(label) {
+ @include type-style(subtitle-1);
+
+ will-change: font-size, color, translate;
+ transition: all $transition-timing;
+ pointer-events: none;
+ }
+
+ @include e(input) {
+ @include type-style(subtitle-1);
+ }
+
+ @include e(textarea) {
+ @include type-style(subtitle-1);
+ }
+
+ @include m(readonly, $not: (file)) {
+ @include e(bundle) {
+ &:hover::before {
+ border-block-end-color: var-get($_theme, 'idle-bottom-line-color');
+ }
+ }
+ }
+
+ @include mx(readonly, box, ('not': (file, disabled))) {
+ &:hover:not(:focus-within) {
+ @include e(bundle) {
+ background: var-get($_theme, 'box-background-focus');
+ }
+ }
+ }
+
+ @include mx(readonly, border, ('not': (file, focused))) {
+ &:hover {
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'border-color');
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'border-color');
+ }
+
+ @include e(notch) {
+ border-color: var-get($_theme, 'border-color');
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'border-color');
+ }
+ }
+ }
+
+ @include mx(invalid, readonly, ('not': (file, disabled))) {
+ @include e(label) {
+ color: var-get($_theme, 'idle-secondary-color');
+ }
+
+ @include e(hint) {
+ color: var-get($_theme, 'helper-text-color');
+ }
+
+ @include e(bundle) {
+ &::before {
+ border-block-end-color: var-get($_theme, 'idle-bottom-line-color');
+ }
+ }
+ }
+
+ @include mx(invalid, readonly, focused, ('not': (file, disabled))) {
+ @include e(label) {
+ color: var-get($_theme, 'focused-secondary-color');
+ }
+
+ @include e(bundle) {
+ &::after {
+ background: var-get($_theme, 'focused-bottom-line-color');
+ }
+ }
+ }
+
+ @include mx(border, invalid, readonly, focused, ('not': (file, disabled))) {
+ @include e(bundle-start) {
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+
+ @include e(bundle-end) {
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+
+ @include e(notch) {
+ border-block-end-color: var-get($_theme, 'focused-border-color');
+ }
+
+ @include e(filler) {
+ border-color: var-get($_theme, 'focused-border-color');
+ }
+ }
+
+ @include mx(readonly, search) {
+ @include e(bundle) {
+ &:hover:not(:focus-within) {
+ box-shadow: var-get($_theme, 'search-resting-elevation');
+ }
+ }
+ }
+
+ @include mx(readonly, search, focused) {
+ igx-suffix,
+ [igxSuffix] {
+ color: var-get($_theme, 'disabled-text-color');
+ }
+ }
+
+ @include m(filled) {
+ @include e(label) {
+ @include type-style(caption);
+ }
+ }
+
+ @include m(focused) {
+ @include e(label) {
+ @include type-style(caption);
+ }
+ }
+
+ @include m(file, $not: (focused)) {
+ @include e(label) {
+ @include type-style(caption);
+ }
+ }
+
+ .igx-input-group__bundle-start:not(:empty) + .igx-input-group__upload {
+ padding-inline-start: rem(4px);
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/list/list-item.component.html b/projects/igniteui-angular/src/lib/list/list-item.component.html
index ef538fa89f4..aff32dc5dbe 100644
--- a/projects/igniteui-angular/src/lib/list/list-item.component.html
+++ b/projects/igniteui-angular/src/lib/list/list-item.component.html
@@ -1,6 +1,6 @@
@if (!isHeader && list.listItemLeftPanningTemplate) {
-
@@ -8,7 +8,7 @@
}
@if (!isHeader && list.listItemRightPanningTemplate) {
-
@@ -20,20 +20,20 @@
-
-
+
+
-
-
+
+
-
-
+
+
@@ -42,7 +42,7 @@
}
@if (!isHeader) {
-
+
diff --git a/projects/igniteui-angular/src/lib/list/list-item.component.ts b/projects/igniteui-angular/src/lib/list/list-item.component.ts
index ab0bd4e7b07..29a11cb0ccf 100644
--- a/projects/igniteui-angular/src/lib/list/list-item.component.ts
+++ b/projects/igniteui-angular/src/lib/list/list-item.component.ts
@@ -193,7 +193,7 @@ export class IgxListItemComponent implements IListChild {
* @memberof IgxListItemComponent
*/
public get contentElement() {
- const candidates = this.element.getElementsByClassName('igx-list__item-content');
+ const candidates = this.element.getElementsByClassName('igx-list-item__content');
return (candidates && candidates.length > 0) ? candidates[0] : null;
}
@@ -282,6 +282,10 @@ export class IgxListItemComponent implements IListChild {
this._role = val;
}
+ /** @hidden @internal */
+ @HostBinding('class.igx-list-item')
+ protected cssClass = 'igx-list-item';
+
/**
* Sets/gets whether the `list item` is selected.
* Selection is only applied to non-header items.
@@ -296,6 +300,7 @@ export class IgxListItemComponent implements IListChild {
*
* @memberof IgxListItemComponent
*/
+ @HostBinding('class.igx-list-item--selected')
@HostBinding('class.igx-list__item-base--selected')
@Input({ transform: booleanAttribute })
public get selected() {
@@ -314,6 +319,7 @@ export class IgxListItemComponent implements IListChild {
*
* @memberof IgxListItemComponent
*/
+ @HostBinding('class.igx-list-item--header')
@HostBinding('class.igx-list__header')
public get headerStyle(): boolean {
return this.isHeader;
@@ -327,11 +333,17 @@ export class IgxListItemComponent implements IListChild {
*
* @memberof IgxListItemComponent
*/
+ @HostBinding('class.igx-list-item--base')
@HostBinding('class.igx-list__item-base')
public get innerStyle(): boolean {
return !this.isHeader;
}
+ @HostBinding('class.igx-list-item--active')
+ public get active(): boolean {
+ return false;
+ }
+
/**
* Returns string value which describes the display mode of the `list item`.
* ```typescript
diff --git a/projects/igniteui-angular/src/lib/list/list.component.scss b/projects/igniteui-angular/src/lib/list/list.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/list.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/src/lib/list/list.component.spec.ts b/projects/igniteui-angular/src/lib/list/list.component.spec.ts
index 8b730256a3a..369855f9152 100644
--- a/projects/igniteui-angular/src/lib/list/list.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/list/list.component.spec.ts
@@ -59,7 +59,7 @@ describe('List', () => {
expect(list).toBeDefined();
expect(list.id).toContain('igx-list-');
expect(list instanceof IgxListComponent).toBeTruthy();
- expect(list.cssClass).toBeFalsy();
+ expect(list.cssClass).toBeTruthy();
expect(list.isListEmpty).toBeTruthy();
expect(list.items instanceof Array).toBeTruthy();
expect(list.items.length).toBe(0);
@@ -233,7 +233,7 @@ describe('List', () => {
fixture.detectChanges();
verifyItemsCount(list, 0);
- expect(list.cssClass).toBeFalsy();
+ expect(list.cssClass).toBeTruthy();
expect(list.isListEmpty).toBeTruthy();
const noItemsMessage = fixture.debugElement.query(By.css('.igx-list__message'));
@@ -248,7 +248,7 @@ describe('List', () => {
fixture.detectChanges();
verifyItemsCount(list, 0);
- expect(list.cssClass).toBeFalsy();
+ expect(list.cssClass).toBeTruthy();
expect(list.isListEmpty).toBeTruthy();
const noItemsParagraphEl = fixture.debugElement.query(By.css('h3'));
@@ -263,7 +263,7 @@ describe('List', () => {
fixture.detectChanges();
verifyItemsCount(list, 0);
- expect(list.cssClass).toBeFalsy();
+ expect(list.cssClass).toBeTruthy();
expect(list.isListEmpty).toBeTruthy();
const noItemsMessage = fixture.debugElement.query(By.css('.igx-list__message'));
@@ -297,7 +297,7 @@ describe('List', () => {
fixture.detectChanges();
verifyItemsCount(list, 0);
- expect(list.cssClass).toBeFalsy();
+ expect(list.cssClass).toBeTruthy();
expect(list.isListEmpty).toBeTruthy();
const noItemsParagraphEl = fixture.debugElement.query(By.css('h3'));
diff --git a/projects/igniteui-angular/src/lib/list/list.component.ts b/projects/igniteui-angular/src/lib/list/list.component.ts
index 32b4d00b75d..a8c4a4283a3 100644
--- a/projects/igniteui-angular/src/lib/list/list.component.ts
+++ b/projects/igniteui-angular/src/lib/list/list.component.ts
@@ -13,7 +13,8 @@ import {
TemplateRef,
ViewChild,
Directive,
- booleanAttribute
+ booleanAttribute,
+ ViewEncapsulation
} from '@angular/core';
@@ -99,6 +100,7 @@ export class IgxListLineDirective { }
standalone: true
})
export class IgxListLineTitleDirective {
+ @HostBinding('class.igx-list-item__title')
@HostBinding('class.igx-list__item-line-title')
public cssClass = 'igx-list__item-line-title';
}
@@ -112,6 +114,7 @@ export class IgxListLineTitleDirective {
standalone: true
})
export class IgxListLineSubTitleDirective {
+ @HostBinding('class.igx-list-item__subtitle')
@HostBinding('class.igx-list__item-line-subtitle')
public cssClass = 'igx-list__item-line-subtitle';
}
@@ -145,7 +148,9 @@ export class IgxListLineSubTitleDirective {
@Component({
selector: 'igx-list',
templateUrl: 'list.component.html',
+ styleUrl: 'list.component.css',
providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }],
+ encapsulation: ViewEncapsulation.None,
imports: [NgTemplateOutlet]
})
export class IgxListComponent extends IgxListBaseDirective {
@@ -496,6 +501,14 @@ export class IgxListComponent extends IgxListBaseDirective {
this._role = val;
}
+ /**
+ * @hidden
+ * @internal
+ *
+ */
+ @HostBinding('class.igx-list')
+ public cssClass = 'igx-list';
+
/**
* Gets a boolean indicating if the list is empty.
*
@@ -509,15 +522,6 @@ export class IgxListComponent extends IgxListBaseDirective {
return !this.children || this.children.length === 0;
}
- /**
- * @hidden
- * @internal
- */
- @HostBinding('class.igx-list')
- public get cssClass(): boolean {
- return !this.isListEmpty;
- }
-
/**
* Gets the list `items` excluding the header ones.
*
diff --git a/projects/igniteui-angular/src/lib/list/themes/_base.scss b/projects/igniteui-angular/src/lib/list/themes/_base.scss
new file mode 100644
index 00000000000..cfb905464cc
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/_base.scss
@@ -0,0 +1,282 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/animations/easings' as *;
+@use 'styles/themes/standalone' as *;
+@use 'light/tokens' as *;
+
+$theme: $base;
+
+@include layer(base) {
+ %igx-list-item-pan {
+ position: absolute;
+ visibility: hidden;
+ display: flex;
+ z-index: 1;
+ }
+
+ %item-padding {
+ padding-block: var(--_padding-block);
+ padding-inline: var(--_padding-inline);
+ }
+
+ @include b(igx-list) {
+ @include sizable();
+
+ --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+ --list-size: var(--component-size);
+
+ position: relative;
+ display: flex;
+ flex-flow: column nowrap;
+ background: var-get($theme, 'background');
+ height: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
+ z-index: 0;
+ border-radius: var-get($theme, 'border-radius');
+
+ &:focus-visible {
+ outline-style: none;
+ }
+
+ @include m(empty) {
+ justify-content: center;
+ align-items: center;
+
+ @include e(message) {
+ text-align: center;
+ color: var-get($theme, 'item-text-color');
+ padding: rem(16px);
+ z-index: 1;
+ }
+ }
+ }
+
+ @include b(igx-list-item) {
+ --_padding-block: #{pad-block(rem(2px), rem(4px), rem(8px))};
+ --_padding-inline: #{pad-block(rem(4px), rem(8px), rem(16px))};
+
+ display: flex;
+ flex-flow: column wrap;
+ justify-content: center;
+
+ igx-avatar {
+ --ig-size: 1;
+ }
+
+ &:hover {
+ @include e(lines) {
+ color: currentColor;
+ }
+
+ @include e(title) {
+ color: var-get($theme, 'item-title-color-hover');
+ }
+
+ @include e(subtitle) {
+ color: var-get($theme, 'item-subtitle-color-hover');
+ }
+
+ @include e(actions) {
+ color: var-get($theme, 'item-action-color-hover');
+
+ igx-icon,
+ igc-icon {
+ color: var-get($theme, 'item-action-color-hover');
+ }
+ }
+
+ @include e(thumbnail) {
+ color: var-get($theme, 'item-thumbnail-color-hover');
+
+ igx-icon,
+ igc-icon {
+ color: var-get($theme, 'item-thumbnail-color-hover');
+ }
+ }
+ }
+
+ @include e(thumbnail) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ align-self: center;
+ padding: 0;
+ color: var-get($theme, 'item-thumbnail-color');
+ gap: rem(8px);
+
+ > igx-icon,
+ > igc-icon {
+ --component-size: var(--list-size);
+ }
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ @include e(lines) {
+ color: currentColor;
+ display: flex;
+ flex-direction: column;
+ flex: 1 0 0%;
+ gap: rem(2px);
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ @include e(actions) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var-get($theme, 'item-action-color');
+ gap: rem(8px);
+
+ &:empty {
+ display: none;
+ }
+
+ > * {
+ --component-size: var(--list-size);
+ }
+
+ igc-icon,
+ igx-icon {
+ color: var-get($theme, 'item-action-color');
+ }
+
+ [dir='rtl'] & {
+ igx-icon,
+ igc-icon {
+ transform: scaleX(-1);
+ }
+ }
+ }
+
+ @include e(title) {
+ color: var-get($theme, 'item-title-color');
+ }
+
+ @include e(subtitle) {
+ color: var-get($theme, 'item-subtitle-color');
+ }
+
+ @include e(content) {
+ @extend %item-padding;
+ --component-size: var(--list-size);
+
+ display: flex;
+ align-items: center;
+ position: relative;
+ color: var-get($theme, 'item-text-color');
+ background: var-get($theme, 'item-background');
+ transition: background 0.15s ease-out, transform 0.3s $out-quad;
+ border-radius: var-get($theme, 'item-border-radius');
+ z-index: 2;
+ gap: rem(16px);
+
+ &:hover,
+ &:focus-within {
+ color: var-get($theme, 'item-text-color-hover');
+ background: var-get($theme, 'item-background-hover');
+ }
+ }
+
+ @include e(left) {
+ @extend %igx-list-item-pan;
+ }
+
+ @include e(right) {
+ @extend %igx-list-item-pan;
+ }
+
+ @include m(header) {
+ @extend %item-padding;
+ @include type-style(overline) {
+ margin: 0;
+ }
+
+ --component-size: var(--list-size);
+
+ display: flex;
+ color: var-get($theme, 'header-text-color');
+ background: var-get($theme, 'header-background');
+ }
+
+ @include m(base) {
+ border-radius: var-get($theme, 'item-border-radius');
+ }
+
+ @include m(active) {
+ @include e(content) {
+ color: var-get($theme, 'item-text-color-active');
+ background: var-get($theme, 'item-background-active');
+ z-index: 3;
+ }
+
+ @include e(thumbnail) {
+ color: var-get($theme, 'item-thumbnail-color-active');
+
+ igx-icon,
+ igc-icon {
+ color: var-get($theme, 'item-thumbnail-color-active');
+ }
+ }
+
+ @include e(title) {
+ color: var-get($theme, 'item-title-color-active');
+ }
+
+ @include e(subtitle) {
+ color: var-get($theme, 'item-subtitle-color-active');
+ }
+
+ @include e(actions) {
+ color: var-get($theme, 'item-action-color-active');
+
+ igx-icon,
+ igc-icon {
+ color: var-get($theme, 'item-action-color-active');
+ }
+ }
+ }
+
+ @include m(selected) {
+ @include e(content) {
+ color: var-get($theme, 'item-text-color-selected');
+ background: var-get($theme, 'item-background-selected');
+ z-index: 3;
+ }
+
+ @include e(thumbnail) {
+ color: var-get($theme, 'item-thumbnail-color-selected');
+
+ igx-icon,
+ igc-icon {
+ color: var-get($theme, 'item-thumbnail-color-selected');
+ }
+ }
+
+ @include e(title) {
+ color: var-get($theme, 'item-title-color-selected');
+ }
+
+ @include e(subtitle) {
+ color: var-get($theme, 'item-subtitle-color-selected');
+ }
+
+ @include e(actions) {
+ color: var-get($theme, 'item-action-color-selected');
+
+ igx-icon,
+ igc-icon {
+ color: var-get($theme, 'item-action-color-selected');
+ }
+ }
+ }
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/list/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/list/themes/dark/_index.scss
new file mode 100644
index 00000000000..8a5fe3df421
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/dark/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-list, $tokens, dark);
diff --git a/projects/igniteui-angular/src/lib/list/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/list/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..15de2278dbe
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/dark/_tokens.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/list' as *;
+
+$material: digest-schema($dark-material-list);
+$bootstrap: digest-schema($dark-bootstrap-list);
+$fluent: digest-schema($dark-fluent-list);
+$indigo: digest-schema($dark-indigo-list);
diff --git a/projects/igniteui-angular/src/lib/list/themes/light/_index.scss b/projects/igniteui-angular/src/lib/list/themes/light/_index.scss
new file mode 100644
index 00000000000..2f16c6fabcd
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/light/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-list, $tokens, light);
diff --git a/projects/igniteui-angular/src/lib/list/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/list/themes/light/_tokens.scss
new file mode 100644
index 00000000000..d136c6036ad
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/list' as *;
+
+$base: digest-schema($light-list);
+$material: digest-schema($material-list);
+$bootstrap: digest-schema($bootstrap-list);
+$fluent: digest-schema($fluent-list);
+$indigo: digest-schema($indigo-list);
diff --git a/projects/igniteui-angular/src/lib/list/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/list/themes/shared/_bootstrap.scss
new file mode 100644
index 00000000000..be2f388f7e2
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/shared/_bootstrap.scss
@@ -0,0 +1,39 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $bootstrap;
+
+@include themed-block(igx-list, bootstrap) {
+ border: rem(1px) solid var-get($_theme, 'border-color');
+}
+
+@include themed-block(igx-list-item, bootstrap) {
+ @include e(lines) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(title) {
+ @include type-style(body-1) {
+ margin: 0;
+ }
+ }
+
+ @include e(subtitle) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+
+ @include m(base) {
+ border-bottom: var-get($_theme, 'border-width') solid
+ var-get($_theme, 'border-color');
+
+ &:last-of-type {
+ border-bottom: none;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/list/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/list/themes/shared/_fluent.scss
new file mode 100644
index 00000000000..7ae2cecdef2
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/shared/_fluent.scss
@@ -0,0 +1,35 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $fluent;
+
+@include themed-block(igx-list-item, fluent) {
+ @include e(lines) {
+ @include type-style(caption) {
+ margin: 0;
+ }
+ }
+
+ @include e(title) {
+ @include type-style(caption) {
+ margin: 0;
+ }
+ }
+
+ @include e(subtitle) {
+ @include type-style(caption) {
+ margin: 0;
+ }
+ }
+
+ @include m(base) {
+ border-bottom: var-get($_theme, 'border-width') solid
+ var-get($_theme, 'border-color');
+
+ &:last-of-type {
+ border-bottom: none;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/list/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/list/themes/shared/_index.scss
new file mode 100644
index 00000000000..0ca60c75786
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/shared/_index.scss
@@ -0,0 +1,4 @@
+@forward 'material';
+@forward 'bootstrap';
+@forward 'fluent';
+@forward 'indigo';
diff --git a/projects/igniteui-angular/src/lib/list/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/list/themes/shared/_indigo.scss
new file mode 100644
index 00000000000..55b7fa42937
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/shared/_indigo.scss
@@ -0,0 +1,57 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-list, indigo) {
+ gap: rem(4px);
+}
+
+@include themed-block(igx-list-item, indigo) {
+ --_padding-block: #{pad-block(rem(4px), rem(6px), rem(8px))};
+ --_padding-inline: #{pad-block(rem(8px), rem(12px), rem(16px))};
+
+ igx-avatar {
+ --ig-size: 2;
+ }
+
+ @include e(lines) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(title) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(subtitle) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(thumbnail) {
+ > igx-icon,
+ > igc-icon {
+ --component-size: 2;
+ }
+ }
+
+ @include e(content) {
+ gap: rem(8px);
+ }
+
+ @include e(actions) {
+ gap: sizable(rem(4px), rem(6px), rem(8px));
+
+ > * {
+ --component-size: 2;
+ }
+ }
+
+ @include m(header) {
+ min-height: sizable(rem(24px), rem(28px), rem(32px));
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/list/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/list/themes/shared/_material.scss
new file mode 100644
index 00000000000..7ed8e026038
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/list/themes/shared/_material.scss
@@ -0,0 +1,28 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-list-item, material) {
+ igx-checkbox {
+ --composite-padding: 0;
+ --label-margin: #{rem(12px)};
+ }
+
+ @include e(lines) {
+ @include type-style(subtitle-1) {
+ margin: 0;
+ }
+ }
+
+ @include e(title) {
+ @include type-style(subtitle-1) {
+ margin: 0;
+ }
+ }
+
+ @include e(subtitle) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/navbar/navbar.component.html b/projects/igniteui-angular/src/lib/navbar/navbar.component.html
index 772a0a5e3f7..0f96424384e 100644
--- a/projects/igniteui-angular/src/lib/navbar/navbar.component.html
+++ b/projects/igniteui-angular/src/lib/navbar/navbar.component.html
@@ -1,4 +1,4 @@
-